@keystone-ui/core

import { Box, Text, Stack, Core, useTheme } from "@keystone-ui/core";

const { Box, Text, Stack, Core, useTheme } = require("@keystone-ui/core");

import { Core, Box, Text, Stack, ThemeProvider } from "@keystone-ui/core";

// Import the default theme from its specific location
// Note: The default theme is not exported from the main package entry point
// You need to import it directly from the themes directory
import { theme } from "@keystone-ui/core/themes/default";

// Or create your own theme following this structure
const customTheme = {
  spacing: { medium: 16, large: 24 },
  colors: { neutral100: '#f5f5f5', neutral700: '#6b7280' },
  radii: { medium: 8 },
  typography: { fontSize: { large: '1.125rem' }, fontWeight: { bold: 700 } }
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Core>
        <Stack gap="medium">
          <Box padding="large" background="neutral100" rounding="medium">
            <Text size="large" weight="bold">Welcome</Text>
            <Text color="neutral700">
              This is a simple example using @keystone-ui/core components.
            </Text>
          </Box>
        </Stack>
      </Core>
    </ThemeProvider>
  );
}

// Core layout component with comprehensive styling props
function Box(props: BoxProps): JSX.Element;

// Flexible vertical/horizontal layout with gaps and dividers
function Stack(props: StackProps): JSX.Element;

// Horizontal layout with wrapping support
function Inline(props: InlineProps): JSX.Element;

interface BoxProps {
  // Color props
  background?: ResponsiveProp<keyof Theme['palette']>;
  foreground?: ResponsiveProp<keyof Theme['palette']>;
  
  // Spacing props
  margin?: ResponsiveProp<keyof Theme['spacing']>;
  padding?: ResponsiveProp<keyof Theme['spacing']>;
  
  // Border radius props
  rounding?: ResponsiveProp<keyof Theme['radii']>;
  
  // Layout props
  width?: ResponsiveProp<string | number>;
  height?: ResponsiveProp<string | number>;
  textAlign?: ResponsiveProp<'left' | 'right' | 'center' | 'justify'>;
  
  // Polymorphic as prop
  as?: ElementType;
}

// Text component with typography controls
function Text(props: TextProps): JSX.Element;

// Generic heading component
function Heading(props: HeadingProps): JSX.Element;

// Specific heading level components
function H1(props: BoxProps): JSX.Element;
function H2(props: BoxProps): JSX.Element;
function H3(props: BoxProps): JSX.Element;
function H4(props: BoxProps): JSX.Element;
function H5(props: BoxProps): JSX.Element;
function H6(props: BoxProps): JSX.Element;

interface TextProps extends BoxProps {
  leading?: keyof Theme['typography']['leading'];
  size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
  tracking?: keyof Theme['typography']['tracking'];
  color?: keyof Theme['palette'];
  weight?: keyof Theme['typography']['fontWeight'];
}

// Theme context provider
function ThemeProvider(props: { theme: Theme; children: ReactNode }): JSX.Element;

// Hook to access current theme
function useTheme(): Theme;

// React context for theme
const ThemeContext: React.Context<{ theme: Theme }>;

// Default theme object
const theme: Theme;

// Responsive utilities hook
function useMediaQuery(): {
  mq: (styles: any) => any;
  minBreak: (key: keyof Theme['breakpoints']) => string;
  maxBreak: (key: keyof Theme['breakpoints']) => string;
};

// Root application wrapper with global styles
function Core(props: CoreProps): JSX.Element;

interface CoreProps {
  children: ReactNode;
  includeNormalize?: boolean;
  optimizeLegibility?: boolean;
}

// Screen reader only content component
function VisuallyHidden(props: { children?: ReactNode; as?: ElementType }): JSX.Element;

// Visual separator component  
function Divider(props: DividerProps): JSX.Element;

// Centering layout component
function Center(props: CenterProps): JSX.Element;

// Link component with theme integration
function Link(props: { as?: ElementType }): JSX.Element;

// Polymorphic component helper
function forwardRefWithAs<DefaultElementType extends ElementType, BaseProps>(
  render: (props: BaseProps & { as?: ElementType }, ref: React.Ref<any>) => ReactNode
): CompWithAsProp<BaseProps, DefaultElementType>;

interface DividerProps extends MarginProps {
  color?: ResponsiveProp<keyof Theme['palette']>;
  orientation?: 'horizontal' | 'vertical';
}

interface CenterProps extends BoxProps {
  fillView?: boolean;
}

// CSS styling function
function css(template: TemplateStringsArray, ...args: any[]): SerializedStyles;

// JSX pragma for emotion
function jsx(type: any, props: any, ...children: any[]): any;

// CSS keyframes for animations
function keyframes(template: TemplateStringsArray, ...args: any[]): Keyframes;

// Global CSS styles component
function Global(props: { styles: any }): JSX.Element;

// Render prop for dynamic class names
function ClassNames(props: { children: (cx: any) => ReactNode }): JSX.Element;

// CSS normalization styles for consistent cross-browser rendering
const normalize: SerializedStyles;

// Hook for controlled/uncontrolled component patterns
function useManagedState<V, E = ChangeEvent>(
  controlledValue: V | undefined,
  defaultValue: V,
  onChange: ManagedChangeHandler<V, E> | undefined
): [V, ManagedChangeHandler<V, E>];

type ManagedChangeHandler<V = string, E = ChangeEvent> = (value: V, event: E) => void;

// Utility functions
function devWarning(condition: boolean, message: string): void;
function makeId(...args: (string | number | null | undefined)[]): string;
function useId(idFromProps?: string | null): string | undefined;

// Main theme type derived from default theme
type Theme = typeof theme;

// Responsive prop type for breakpoint-aware values
type ResponsiveProp<T> = T | readonly (T | null)[];

// Component prop types
type ColorProps = {
  background?: ResponsiveProp<keyof Theme['palette']>;
  foreground?: ResponsiveProp<keyof Theme['palette']>;
};

type RadiiProps = {
  rounding?: ResponsiveProp<keyof Theme['radii']>;
  roundingBottom?: ResponsiveProp<keyof Theme['radii']>;
  roundingLeft?: ResponsiveProp<keyof Theme['radii']>;
  roundingRight?: ResponsiveProp<keyof Theme['radii']>;
  roundingTop?: ResponsiveProp<keyof Theme['radii']>;
};

type MarginProps = {
  margin?: ResponsiveProp<keyof Theme['spacing']>;
  marginTop?: ResponsiveProp<keyof Theme['spacing']>;
  marginRight?: ResponsiveProp<keyof Theme['spacing']>;
  marginBottom?: ResponsiveProp<keyof Theme['spacing']>;
  marginLeft?: ResponsiveProp<keyof Theme['spacing']>;
  marginY?: ResponsiveProp<keyof Theme['spacing']>;
  marginX?: ResponsiveProp<keyof Theme['spacing']>;
};

type PaddingProps = {
  padding?: ResponsiveProp<keyof Theme['spacing']>;
  paddingTop?: ResponsiveProp<keyof Theme['spacing']>;
  paddingRight?: ResponsiveProp<keyof Theme['spacing']>;
  paddingBottom?: ResponsiveProp<keyof Theme['spacing']>;
  paddingLeft?: ResponsiveProp<keyof Theme['spacing']>;
  paddingY?: ResponsiveProp<keyof Theme['spacing']>;
  paddingX?: ResponsiveProp<keyof Theme['spacing']>;
};

type BoxProps = ColorProps & RadiiProps & MarginProps & PaddingProps & {
  textAlign?: ResponsiveProp<'left' | 'right' | 'center' | 'justify' | 'start' | 'end'>;
  height?: ResponsiveProp<string | number>;
  width?: ResponsiveProp<string | number>;
};