@okshaun/components 0.5.6 → 0.5.8

package/dist/index.d.ts

@@ -27,6 +27,7 @@ import { LabelVariantProps } from '../../../styled-system/recipes';
 import { LinkVariantProps } from '../../../styled-system/recipes';
 import { menu } from '../../../styled-system/recipes';
 import { MenuVariantProps } from '../../../styled-system/recipes';
+import { ModalVariantProps } from '../../../styled-system/recipes';
 import { NumericSizeToken } from '../../../styled-system/tokens';
 import { Placement } from '@floating-ui/react';
 import { RadioInputVariantProps } from '../../../styled-system/recipes';
@@ -34,6 +35,10 @@ import { RadioVariantProps } from '../../../styled-system/recipes';
 import * as React_2 from 'react';
 import { ReactNode } from 'react';
 import { RefObject } from 'react';
+import { SelectContextValue } from './types';
+import { SelectOptionProps } from './types';
+import { SelectProps } from './types';
+import { SelectTriggerProps } from './types';
 import { SpinnerVariantProps } from '../../../styled-system/recipes';
 import { SVGAttributes } from 'react';
 import { SystemStyleObject } from '../../../styled-system/types';
@@ -207,7 +212,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.
  */
-export 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'> = Omit<BoxProps, keyof ButtonVariantProps | 'as'> & Omit<ButtonVariantProps, 'iconBefore' | 'iconAfter'> & {
     as?: E;
     href?: string;
     loading?: boolean;
@@ -219,13 +224,39 @@ export declare type ButtonProps<E extends React_2.ElementType = 'button'> = Reac
     gap?: NumericSizeToken;
 };
 
-export declare const Card: React.FC<CardProps>;
+/**
+ * Card component that supports both static (content container) and interactive (button/link) modes.
+ *
+ * By default, renders as a div for semantic correctness.
+ * - With `href`: renders as an anchor element
+ * - With `interactive` or `onClick`: renders as a button element
+ * - Use `as` prop for custom elements like 'article' or 'section'
+ */
+export declare const Card: CardComponent;
 
-export declare type CardProps = Omit<BoxProps, keyof CardVariantProps> & CardVariantProps & {
+/**
+ * Define a polymorphic CardComponent type.
+ */
+declare type CardComponent = <E extends React_2.ElementType = 'div'>(props: CardProps<E> & {
+    ref?: React_2.ForwardedRef<Element>;
+}) => React_2.ReactElement;
+
+/**
+ * CardProps is generic and manages its own polymorphism.
+ * Default element is 'div' for non-interactive cards.
+ * Automatically renders as 'a' when href is provided, or 'button' when interactive without href.
+ */
+export declare type CardProps<E extends React_2.ElementType = 'div'> = Omit<BoxProps, keyof CardVariantProps | 'as'> & Omit<CardVariantProps, 'interactive'> & {
+    as?: E;
     href?: string;
-    children?: string | ReactNode;
-    grabbed?: boolean;
+    children?: React_2.ReactNode;
+    className?: string;
     disabled?: boolean;
+    /**
+     * When true, the card becomes interactive (button or link).
+     * Automatically true when href or onClick is provided.
+     */
+    interactive?: boolean;
 };
 
 /**
@@ -311,45 +342,19 @@ export declare type CodeProps = Omit<BoxProps, keyof CodeVariantProps | keyof Te
 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;
-    };
+    '2xs': string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+    '7xl': string;
+    '8xl': string;
 };
 
 export declare const Divider: React.FC<DividerProps>;
@@ -396,7 +401,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.
  */
-export declare type IconButtonProps<E extends React_2.ElementType = 'button'> = React_2.ComponentPropsWithoutRef<E> & IconButtonVariantProps & {
+export declare type IconButtonProps<E extends React_2.ElementType = 'button'> = Omit<BoxProps, keyof IconButtonVariantProps | 'as'> & IconButtonVariantProps & {
     as?: E;
     href?: string;
     loading?: boolean;
@@ -869,6 +874,55 @@ export declare type MenuTriggerProps = Omit<BoxProps, 'children'> & {
     disabled?: boolean;
 };
 
+export declare const Modal: default_2.FC<ModalProps>;
+
+export declare const ModalBody: default_2.FC<ModalBodyProps>;
+
+export declare type ModalBodyProps = Omit<BoxProps, 'children'> & {
+    /** Body content */
+    children: React.ReactNode;
+};
+
+declare interface ModalContextValue {
+    /** Whether the modal is open */
+    open: boolean;
+    /** Callback to close the modal */
+    onClose: () => void;
+    /** Whether overlay clicks should close the modal */
+    preventOverlayClose?: boolean;
+}
+
+export declare const ModalFooter: default_2.FC<ModalFooterProps>;
+
+export declare type ModalFooterProps = Omit<BoxProps, 'children'> & {
+    /** Footer content (typically action buttons) */
+    children: React.ReactNode;
+};
+
+export declare const ModalHeader: default_2.FC<ModalHeaderProps>;
+
+export declare type ModalHeaderProps = Omit<BoxProps, 'children'> & {
+    /** Title text */
+    title?: string | React.ReactNode;
+    /** Whether to show the close button */
+    showCloseButton?: boolean;
+    /** Children (custom header content) */
+    children?: React.ReactNode;
+};
+
+export declare type ModalProps = Omit<BoxProps, keyof ModalVariantProps> & ModalVariantProps & {
+    /** Controlled open state (REQUIRED) */
+    open: boolean;
+    /** Callback when open state should change (REQUIRED) */
+    onOpenChange: (open: boolean) => void;
+    /** Whether clicking the overlay should close the modal */
+    preventOverlayClose?: boolean;
+    /** Children (ModalHeader, ModalBody, ModalFooter) */
+    children: React.ReactNode;
+    /** Optional ID for ARIA attributes */
+    id?: string;
+};
+
 declare const numericSizes: {
     '0': {
         value: string;
@@ -1051,8 +1105,27 @@ export declare type RadioProps = Omit<BoxProps, keyof RadioVariantProps> & Radio
     error?: boolean;
 };
 
+export declare const Select: default_2.FC<SelectProps>;
+
+export { SelectContextValue }
+
 export declare type SelectionIndicator = 'checkmark' | 'checkbox';
 
+/**
+ * SelectOption component used within Select
+ * Note: This component doesn't render directly - the Select parent component
+ * converts SelectOption instances to MenuItem components for actual rendering.
+ */
+export declare const SelectOption: default_2.FC<SelectOptionProps>;
+
+export { SelectOptionProps }
+
+export { SelectProps }
+
+export declare const SelectTrigger: default_2.FC<SelectTriggerProps>;
+
+export { SelectTriggerProps }
+
 export declare const Spinner: React.FC<SpinnerProps>;
 
 export declare type SpinnerProps = Omit<BoxProps, keyof SpinnerVariantProps> & SpinnerVariantProps & {
@@ -1186,6 +1259,10 @@ export declare function useMediaQuery(breakpoint: BreakpointKey, direction?: Que
 
 export declare const useMenuContext: () => MenuContextValue;
 
+export declare const useModalContext: () => ModalContextValue;
+
+export declare const useSelectContext: () => SelectContextValue;
+
 export declare function useTheme(): ThemeContextType;
 
 export { }