@okshaun/components 0.3.2 → 0.3.4

package/dist/index.d.ts

@@ -6,6 +6,7 @@ import { CardVariantProps } from '../../../styled-system/recipes';
 import { ChangeEventHandler } from 'react';
 import { CheckboxInputVariantProps } from '../../../styled-system/recipes';
 import { CheckboxVariantProps } from '../../../styled-system/recipes';
+import { CodeVariantProps } from '../../../styled-system/recipes';
 import { ColorToken } from '../../../styled-system/tokens';
 import { ComponentPropsWithoutRef } from 'react';
 import { default as default_2 } from 'react';
@@ -26,6 +27,7 @@ import { RadioInputVariantProps } from '../../../styled-system/recipes';
 import { RadioVariantProps } from '../../../styled-system/recipes';
 import * as React_2 from 'react';
 import { ReactNode } from 'react';
+import { RefObject } from 'react';
 import { SpinnerVariantProps } from '../../../styled-system/recipes';
 import { SVGAttributes } from 'react';
 import { SystemStyleObject } from '../../../styled-system/types';
@@ -56,7 +58,7 @@ declare type BadgeComponent = <E extends React_2.ElementType = 'span'>(props: Ba
  * BadgeProps is generic and manages its own polymorphism.
  * It includes props for the element type E (default "span") and BadgeVariantProps.
  */
-declare type BadgeProps<E extends React_2.ElementType = 'span'> = React_2.ComponentPropsWithoutRef<E> & BadgeVariantProps & {
+export declare type BadgeProps<E extends React_2.ElementType = 'span'> = React_2.ComponentPropsWithoutRef<E> & BadgeVariantProps & {
     as?: E;
     className?: string;
     children?: React_2.ReactNode;
@@ -64,13 +66,13 @@ declare type BadgeProps<E extends React_2.ElementType = 'span'> = React_2.Compon
 
 export declare const Box: default_2.FC<BoxProps>;
 
-declare type BoxProps = Omit<ComponentPropsWithoutRef<ElementType>, 'as'> & SystemStyleObject & BoxVariantProps & {
+export declare type BoxProps = Omit<ComponentPropsWithoutRef<ElementType>, 'as'> & SystemStyleObject & BoxVariantProps & {
     as?: ElementType;
 } & AriaAttributes;
 
 export declare const Breadcrumbs: default_2.FC<BreadcrumbsProps>;
 
-declare type BreadcrumbsProps = BoxProps & {
+export declare type BreadcrumbsProps = BoxProps & {
     items: {
         id: string;
         label: string;
@@ -78,6 +80,19 @@ declare type BreadcrumbsProps = BoxProps & {
     }[];
 };
 
+export declare function BreakpointIndicator(): JSX.Element;
+
+declare type BreakpointKey = keyof typeof breakpoints;
+
+declare const breakpoints: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+};
+
 /**
  * The Button component uses the polymorphic Box as its base.
  * It automatically renders as an <a> if href is provided.
@@ -98,7 +113,7 @@ declare type ButtonComponent = <E extends React_2.ElementType = 'button'>(props:
  * It includes props for the element type E (default "button") and ButtonVariantProps.
  * This means that any prop accepted by the underlying element (e.g. onClick) is automatically allowed.
  */
-declare type ButtonProps<E extends React_2.ElementType = 'button'> = React_2.ComponentPropsWithoutRef<E> & Omit<ButtonVariantProps, 'iconBefore' | 'iconAfter'> & {
+export declare type ButtonProps<E extends React_2.ElementType = 'button'> = React_2.ComponentPropsWithoutRef<E> & Omit<ButtonVariantProps, 'iconBefore' | 'iconAfter'> & {
     as?: E;
     href?: string;
     loading?: boolean;
@@ -111,7 +126,7 @@ declare type ButtonProps<E extends React_2.ElementType = 'button'> = React_2.Com
 
 export declare const Card: React.FC<CardProps>;
 
-declare type CardProps = Omit<BoxProps, keyof CardVariantProps> & CardVariantProps & {
+export declare type CardProps = Omit<BoxProps, keyof CardVariantProps> & CardVariantProps & {
     href?: string;
     children?: string | ReactNode;
     grabbed?: boolean;
@@ -133,7 +148,7 @@ export declare const Checkbox: React.FC<CheckboxProps>;
 
 export declare const CheckboxInput: FC<CheckboxInputProps>;
 
-declare type CheckboxInputProps = BoxProps & CheckboxInputVariantProps & {
+export declare type CheckboxInputProps = BoxProps & CheckboxInputVariantProps & {
     name: string;
     checked: boolean;
     onChange: ChangeEventHandler<HTMLInputElement>;
@@ -143,7 +158,7 @@ declare type CheckboxInputProps = BoxProps & CheckboxInputVariantProps & {
     disabled?: boolean;
 };
 
-declare type CheckboxProps = {
+export declare type CheckboxProps = {
     /** Form field name */
     name: string;
     /** Controlled checked state (REQUIRED) */
@@ -160,16 +175,67 @@ declare type CheckboxProps = {
     error?: boolean;
 } & Omit<BoxProps, 'checked' | 'onChange' | keyof CheckboxVariantProps> & CheckboxVariantProps;
 
+export declare const Code: React.FC<CodeProps>;
+
+export declare type CodeProps = Omit<BoxProps, keyof CodeVariantProps | keyof TextProps> & CodeVariantProps & TextProps & {
+    children?: string | React.ReactNode;
+    lang?: string;
+};
+
+declare type ContainerSizeKey = keyof typeof containerSizes;
+
+declare const containerSizes: {
+    '2xs': {
+        value: string;
+    };
+    xs: {
+        value: string;
+    };
+    sm: {
+        value: string;
+    };
+    md: {
+        value: string;
+    };
+    lg: {
+        value: string;
+    };
+    xl: {
+        value: string;
+    };
+    '2xl': {
+        value: string;
+    };
+    '3xl': {
+        value: string;
+    };
+    '4xl': {
+        value: string;
+    };
+    '5xl': {
+        value: string;
+    };
+    '6xl': {
+        value: string;
+    };
+    '7xl': {
+        value: string;
+    };
+    '8xl': {
+        value: string;
+    };
+};
+
 export declare const Divider: React.FC<DividerProps>;
 
-declare type DividerProps = Omit<BoxProps, keyof DividerVariantProps> & DividerVariantProps & {
+export declare type DividerProps = Omit<BoxProps, keyof DividerVariantProps> & DividerVariantProps & {
     direction?: string;
     weight?: string;
 };
 
 export declare const Heading: React.FC<HeadingProps>;
 
-declare type HeadingProps = Omit<TextProps, keyof HeadingVariantProps> & HeadingVariantProps & {
+export declare type HeadingProps = Omit<TextProps, keyof HeadingVariantProps> & HeadingVariantProps & {
     children?: string | React.ReactNode;
     level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 };
@@ -200,7 +266,7 @@ declare type IconButtonComponent = <E extends React_2.ElementType = 'button'>(pr
  * We've added a new optional prop 'iconName'. When provided (and if no children
  * are passed), IconButton will render the corresponding Icon automatically.
  */
-declare type IconButtonProps<E extends React_2.ElementType = 'button'> = React_2.ComponentPropsWithoutRef<E> & IconButtonVariantProps & {
+export declare type IconButtonProps<E extends React_2.ElementType = 'button'> = React_2.ComponentPropsWithoutRef<E> & IconButtonVariantProps & {
     as?: E;
     href?: string;
     loading?: boolean;
@@ -506,7 +572,7 @@ export declare const IconNames: {
     readonly 'zoom-out': "zoom-out";
 };
 
-declare type IconProps = Omit<BoxProps, 'size'> & SVGAttributes<SVGElement> & {
+export declare type IconProps = Omit<BoxProps, 'size'> & SVGAttributes<SVGElement> & {
     name: IconNamesList;
     size?: AllowedIconSizes;
     fill?: ColorToken;
@@ -514,14 +580,14 @@ declare type IconProps = Omit<BoxProps, 'size'> & SVGAttributes<SVGElement> & {
 
 export declare const Label: default_2.FC<LabelProps>;
 
-declare type LabelProps = Omit<BoxProps, keyof LabelVariantProps> & LabelVariantProps & {
+export declare type LabelProps = Omit<BoxProps, keyof LabelVariantProps> & LabelVariantProps & {
     htmlFor?: string;
     children?: string | default_2.ReactNode;
 };
 
 export declare const Link: React.FC<LinkProps>;
 
-declare type LinkProps = Omit<BoxProps, keyof LinkVariantProps> & LinkVariantProps & {
+export declare type LinkProps = Omit<BoxProps, keyof LinkVariantProps> & LinkVariantProps & {
     href: string;
     external?: boolean;
     disabled?: boolean;
@@ -536,7 +602,7 @@ declare type LinkProps = Omit<BoxProps, keyof LinkVariantProps> & LinkVariantPro
 
 export declare const Menu: React.FC<MenuProps>;
 
-declare type MenuProps = Omit<BoxProps, keyof MenuVariantProps> & MenuVariantProps & {
+export declare type MenuProps = Omit<BoxProps, keyof MenuVariantProps> & MenuVariantProps & {
     menuSection: {
         id?: string;
         title?: string;
@@ -714,24 +780,28 @@ declare type Position = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'bot
 
 export declare const Pre: React.FC<PreProps>;
 
-declare type PreProps = BoxProps & {
+export declare type PreProps = BoxProps & {
     children: string | React.ReactNode;
     lang?: string;
     as?: string;
 };
 
+declare type QueryDirection = 'min' | 'max';
+
+declare type QueryDirection_2 = 'min' | 'max';
+
 export declare const Radio: React.FC<RadioProps>;
 
 export declare const RadioInput: FC<RadioInputProps>;
 
-declare type RadioInputProps = BoxProps & RadioInputVariantProps & {
+export declare type RadioInputProps = BoxProps & RadioInputVariantProps & {
     name: string;
     id?: string;
     error?: boolean;
     children?: string | ReactNode;
 };
 
-declare type RadioProps = Omit<BoxProps, keyof RadioVariantProps> & RadioVariantProps & {
+export declare type RadioProps = Omit<BoxProps, keyof RadioVariantProps> & RadioVariantProps & {
     id?: string;
     name: string;
     disabled?: boolean;
@@ -740,7 +810,7 @@ declare type RadioProps = Omit<BoxProps, keyof RadioVariantProps> & RadioVariant
 
 export declare const Spinner: React.FC<SpinnerProps>;
 
-declare type SpinnerProps = Omit<BoxProps, keyof SpinnerVariantProps> & SpinnerVariantProps & {
+export declare type SpinnerProps = Omit<BoxProps, keyof SpinnerVariantProps> & SpinnerVariantProps & {
     size?: 'standard' | 'small' | 'large';
     className?: string;
 };
@@ -749,7 +819,7 @@ export declare const splitProps: (props: Record<string, any>) => [string, Record
 
 export declare const Tag: React.FC<TagProps>;
 
-declare type TagProps = BoxProps & TagVariantProps & {
+export declare type TagProps = BoxProps & TagVariantProps & {
     children: string | ReactNode;
     iconName?: IconNamesList;
 };
@@ -759,7 +829,7 @@ export { Text_2 as Text }
 
 export declare const Textarea: React.FC<TextareaProps>;
 
-declare type TextareaProps = Omit<BoxProps, keyof TextareaVariantProps> & TextareaVariantProps & {
+export declare type TextareaProps = Omit<BoxProps, keyof TextareaVariantProps> & TextareaVariantProps & {
     name: string;
     error?: boolean;
     id?: string;
@@ -767,13 +837,13 @@ declare type TextareaProps = Omit<BoxProps, keyof TextareaVariantProps> & Textar
 
 export declare const TextInput: React.FC<TextInputProps>;
 
-declare type TextInputProps = Omit<BoxProps, keyof TextinputVariantProps> & TextinputVariantProps & {
+export declare type TextInputProps = Omit<BoxProps, keyof TextinputVariantProps> & TextinputVariantProps & {
     name: string;
     error?: boolean;
     id?: string;
 };
 
-declare type TextProps = Omit<BoxProps, keyof TextVariantProps> & TextVariantProps & {
+export declare type TextProps = Omit<BoxProps, keyof TextVariantProps> & TextVariantProps & {
     italic?: boolean;
     family?: FontToken;
     bold?: boolean;
@@ -802,14 +872,14 @@ export declare const Toggle: default_2.FC<ToggleProps>;
 
 export declare const ToggleInput: FC<ToggleInputProps>;
 
-declare type ToggleInputProps = BoxProps & ToggleInputVariantProps & {
+export declare type ToggleInputProps = BoxProps & ToggleInputVariantProps & {
     name: string;
     id?: string;
     error?: boolean;
     children?: string | ReactNode;
 };
 
-declare type ToggleProps = Omit<BoxProps, keyof ToggleVariantProps> & ToggleVariantProps & {
+export declare type ToggleProps = Omit<BoxProps, keyof ToggleVariantProps> & ToggleVariantProps & {
     name: string;
     id?: string;
     error?: boolean;
@@ -818,7 +888,7 @@ declare type ToggleProps = Omit<BoxProps, keyof ToggleVariantProps> & ToggleVari
 
 export declare const Tooltip: React.FC<TooltipProps>;
 
-declare type TooltipProps = Omit<BoxProps, keyof TooltipVariantProps> & TooltipVariantProps & {
+export declare type TooltipProps = Omit<BoxProps, keyof TooltipVariantProps> & TooltipVariantProps & {
     text: string;
     title?: string;
     caret?: boolean;
@@ -827,6 +897,47 @@ declare type TooltipProps = Omit<BoxProps, keyof TooltipVariantProps> & TooltipV
     trigger?: 'onHover' | 'onClick';
 };
 
+/**
+ * Token-aware container query hook for conditional rendering based on container sizes.
+ * Requires a ref to the container element and the container must have container-type set.
+ *
+ * @example
+ * // Component with container query
+ * function MyComponent() {
+ *   const containerRef = useRef<HTMLDivElement>(null);
+ *   const isLarge = useContainerQuery(containerRef, 'lg');
+ *
+ *   return (
+ *     <div ref={containerRef} style={{ containerType: 'inline-size' }}>
+ *       {isLarge && <LargeLayout />}
+ *       {!isLarge && <SmallLayout />}
+ *     </div>
+ *   );
+ * }
+ *
+ * @example
+ * // Max-width: matches when container is < xl size
+ * const isSmall = useContainerQuery(containerRef, 'xl', 'max');
+ */
+export declare function useContainerQuery(containerRef: RefObject<HTMLElement>, size: ContainerSizeKey, direction?: QueryDirection_2): boolean;
+
+/**
+ * Token-aware media query hook for conditional rendering based on breakpoints.
+ *
+ * @example
+ * // Mobile-first: matches when viewport is >= md (768px)
+ * const isDesktop = useMediaQuery('md');
+ *
+ * @example
+ * // Max-width: matches when viewport is < lg (1024px)
+ * const isMobile = useMediaQuery('lg', 'max');
+ *
+ * @example
+ * // In JSX
+ * {isDesktop && <DesktopOnlyComponent />}
+ */
+export declare function useMediaQuery(breakpoint: BreakpointKey, direction?: QueryDirection): boolean;
+
 export declare function useTheme(): ThemeContextType;
 
 export { }