@accelint/design-toolkit 2.6.0 → 3.0.0

package/dist/components/drawer/types.d.ts

@@ -1,53 +1,93 @@
-import { Key, FocusableElement } from '@react-types/shared';
-import { PropsWithChildren, ReactElement, DOMAttributes } from 'react';
+import { AriaAttributesWithRef } from '../../lib/types.js';
+import { Payload } from '@accelint/bus';
+import { UniqueId } from '@accelint/core';
+import { FocusableElement } from '@react-types/shared';
+import { ComponentPropsWithRef, ReactElement, DOMAttributes } from 'react';
+import { HeadingProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+import { ToggleButtonProps } from '../button/types.js';
+import { ViewStackEvent } from '../view-stack/types.js';
+import { DrawerEventTypes } from './events.js';
+import { DrawerTitleStyles } from './styles.js';
+import '../button/styles.js';
+import 'tailwind-merge';
+import '../view-stack/events.js';
 
-/**
- * Defines the possible sizes for a drawer.
- */
-type DrawerSize = 'small' | 'medium' | 'large';
-/**
- * Defines the possible placements for a drawer.
- */
-type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
-type DrawerLayoutPush = DrawerPlacement | `${DrawerPlacement} ${DrawerPlacement}` | `${DrawerPlacement} ${DrawerPlacement} ${DrawerPlacement}` | `${DrawerPlacement} ${DrawerPlacement} ${DrawerPlacement} ${DrawerPlacement}`;
-/**
- * Represents the state of a single drawer.
- */
-type DrawerState = {
-    id: Key;
-    isOpen: boolean;
-    selectedMenuItemId?: Key;
-};
-/**
- * Base props for drawer container components.
- */
-interface DrawerContainerProps extends PropsWithChildren<{
-    className?: string;
-}> {
-}
-/**
- * Props for the `Drawer.Provider` component.
- */
-interface DrawerProviderProps extends PropsWithChildren {
-    /**
-     * A callback function that is called when the state of any drawer changes.
-     * @param drawerId
-     * @param state
-     * @returns
-     */
-    onStateChange?: (drawerId: Key, state: DrawerState) => void;
-}
-/**
- * Props for the `Drawer.Layout` component.
- */
-interface DrawerLayoutProps extends DrawerContainerProps {
+type Top = 'top';
+type Bottom = 'bottom';
+type YAxisUnion = Top | Bottom;
+type YAxisIntersection = `${Top} ${Bottom}` | `${Bottom} ${Top}`;
+type Right = 'right';
+type Left = 'left';
+type XAxisUnion = Right | Left;
+type XAxisIntersection = `${Right} ${Left}` | `${Left} ${Right}`;
+type DrawerLayoutProps = ComponentPropsWithRef<'div'> & {
     /**
      * Which drawers should extend to full container dimensions.
      * Determines the overall layout structure and drawer relationships in regard to space.
      *
      * @default 'left right'
+     *
+     * Extended Drawer Layout Configurations
+     *
+     * The layout system supports four different drawer extension modes that determine
+     * how drawers are arranged and which drawers extend to the full container dimensions.
+     *
+     * extend: "left right"
+     * ┌──────┬──────────┬───────┐
+     * │      │   top    │       │
+     * │      ├──────────┤       │
+     * │ left │   main   │ right │
+     * │      ├──────────┤       │
+     * │      │  bottom  │       │
+     * └──────┴──────────┴───────┘
+     *
+     * extend: "top bottom"
+     * ┌─────────────────────────┐
+     * │          top            │
+     * ├──────┬──────────┬───────┤
+     * │ left │   main   │ right │
+     * ├──────┴──────────┴───────┤
+     * │         bottom          │
+     * └─────────────────────────┘
+     *
+     * extend: "top"
+     * ┌─────────────────────────┐
+     * │          top            │
+     * ├──────┬──────────┬───────┤
+     * │      │   main   │       │
+     * │ left ├──────────┤ right │
+     * │      │  bottom  │       │
+     * └──────┴──────────┴───────┘
+     *
+     * extend: "bottom"
+     * ┌──────┬──────────┬───────┐
+     * │      │   top    │       │
+     * │ left ├──────────┤ right │
+     * │      │   main   │       │
+     * ├──────┴──────────┴───────┤
+     * │         bottom          │
+     * └─────────────────────────┘
+     *
+     * extend: "left"
+     * ┌──────┬──────────────────┐
+     * │      │   top            │
+     * │      ├──────────┬───────│
+     * │ left │   main   │ right │
+     * │      ├──────────┴───────┤
+     * │      │  bottom          │
+     * └──────┴──────────────────┘
+     *
+     * extend: "right"
+     * ┌─────────────────┬───────┐
+     * │          top    │       │
+     * ├──────┬──────────┤       │
+     * │ left │   main   │ right │
+     * ├──────┴──────────┤       │
+     * │         bottom  │       │
+     * └─────────────────┴───────┘
      */
-    extend?: DrawerLayouts;
+    extend?: XAxisUnion | XAxisIntersection | YAxisUnion | YAxisIntersection;
     /**
      * Determines how drawer interact with the main content area and overall layout:
      *
@@ -56,224 +96,100 @@ interface DrawerLayoutProps extends DrawerContainerProps {
      *   If no placements are defined for push, the default behavior for a drawer is to float over the main content without affecting its layout or dimensions.
      *   Content remains at full width, panel appears as an overlay.
      */
-    push?: DrawerLayoutPush;
-}
-/**
- * Props for the `Drawer` component.
- */
-interface DrawerProps extends DrawerContainerProps {
-    /**
-     * The unique identifier for the drawer.
-     */
-    id: Key;
+    push?: XAxisUnion | YAxisUnion | XAxisIntersection | YAxisIntersection | `${XAxisUnion} ${YAxisUnion}` | `${YAxisUnion} ${XAxisUnion}` | `${XAxisUnion} ${YAxisIntersection}` | `${YAxisIntersection} ${XAxisUnion}` | `${YAxisUnion} ${XAxisIntersection}` | `${XAxisIntersection} ${YAxisUnion}` | `${XAxisIntersection} ${YAxisIntersection}` | `${YAxisIntersection} ${XAxisIntersection}`;
+};
+type DrawerProps = Omit<ComponentPropsWithRef<'div'>, 'onChange'> & {
+    id: UniqueId;
+    defaultView?: UniqueId;
     /**
      * The placement of the drawer.
      * @default 'left'
      */
-    placement: DrawerPlacement;
+    placement?: XAxisUnion | YAxisUnion;
     /**
      * The size of the drawer.
      * @default 'medium'
      */
-    size?: DrawerSize;
-    /**
-     * Whether the drawer is open or not.
-     * @default false
-     */
-    isOpen?: boolean;
-    /**
-     * The id of the menu item that should be selected by default.
-     */
-    defaultSelectedMenuItemId?: Key;
-    /**
-     * A callback function that is called when the drawer is opened or closed.
-     * @param boolean
-     */
-    onOpenChange?: OnOpenChangeCallback;
-    /**
-     * A callback function that is called when the state of the drawer changes.
-     * @param state
-     * @returns
-     */
-    onStateChange?: (state: DrawerState) => void;
-}
-/**
- * A callback function that is called when the drawer is opened or closed.
- * @param boolean
- */
-type OnOpenChangeCallback = ((isOpen: boolean) => void) | undefined;
-/**
- * Props for the 'Drawer.Menu' component.
- */
-interface DrawerMenuProps extends DrawerContainerProps {
+    size?: 'small' | 'medium' | 'large';
+    onChange?: (view: UniqueId | null) => void;
+};
+type DrawerMenuProps = ComponentPropsWithRef<'nav'> & {
     /**
      * The position of the menu.
-     * @default 'middle'
-     */
-    position?: 'start' | 'middle' | 'end';
-}
-/**
- * Props for the 'Drawer.Trigger' component.
- */
-interface DrawerTriggerProps extends DrawerContainerProps {
-    /**
-     * The id of the drawer to control.
-     */
-    for: Key;
-    /**
-     * The behavior of the trigger.
-     * @default 'toggle'
-     */
-    behavior?: 'open' | 'close' | 'toggle';
-    /**
-     * The children of the component.
-     */
-    children: ReactElement<DOMAttributes<FocusableElement>, string>;
-}
-/**
- * Props for the 'Drawer.Menu.Item' component.
- */
-type DrawerMenuItemProps = {
-    /**
-     * The unique identifier for the menu item.
+     * @default 'center'
      */
-    id?: Key;
-    /**
-     * The class name for the menu item.
-     */
-    className?: string;
-    /**
-     * The children of the component.
-     */
-    children: ReactElement<DOMAttributes<FocusableElement>, string>;
+    position?: 'start' | 'center' | 'end';
 };
 /**
- * Props for the 'Drawer.Panel' component.
+ * Drawer.Menu.Item implements Drawer.Trigger with the default behavior of
+ * the trigger's `open` event type, which resets the stack before pushing the new view
  */
-interface DrawerPanelProps extends DrawerContainerProps {
-    /**
-     * The unique identifier for the panel.
-     */
-    id?: Key;
-}
-/**
- * The value provided by the 'DrawersContext'.
- */
-type DrawersContextValue = {
-    /**
-     * A record of all the drawer's state.
-     */
-    drawerStates: Record<Key, DrawerState>;
+type DrawerMenuItemProps = Omit<ToggleButtonProps, 'id'> & {
     /**
-     * A function to toggle the drawer.
-     * @param drawerId
-     * @returns
-     */
-    toggleDrawer: (drawerId: Key) => void;
-    /**
-     * A function to open a drawer.
-     * @param drawerId
-     * @param menuItemId
-     * @returns
-     */
-    openDrawer: (drawerId: Key, menuItemId?: Key) => void;
-    /**
-     * A function to close a drawer.
-     * @param drawerId
-     * @returns
+     * The unique identifier of the view that this menu item controls.
+     *
+     * Links the menu item to a specific view, enabling it to open or toggle the associated view when activated.
+     *
+     * The value should match the `id` of the target view component. This prop is required for correct association and interaction.
+     *
+     * If the menu item is intended to control multiple views, use the `views` prop for additional associations; do not include the `for` id in the `views` array.
      */
-    closeDrawer: (drawerId: Key) => void;
+    for: UniqueId;
     /**
-     * A function to get the state of a drawer.
-     * @param drawerId
-     * @returns
+     * An optional array of additional view identifiers. If provided, the menu item will display as active when any of these views are active.
+     *
+     * You do not need to include the `id` already passed in the `for` prop.
      */
-    getDrawerState: (drawerId: Key) => DrawerState;
+    views?: UniqueId[];
     /**
-     * A function to register a drawer.
-     * @param initialState
-     * @param callbacks
-     * @returns
+     * If set to `true`, the menu item will toggle the visibility of the associated view each time it is activated.
+     *
+     * By default, the menu item only opens the view. Use this prop to enable toggling between open and closed states.
      */
-    registerDrawer: (initialState: DrawerState, callbacks?: {
-        onOpenChange?: OnOpenChangeCallback;
-        onStateChange?: (state: DrawerState) => void;
-    }) => void;
+    toggle?: boolean;
+};
+type DrawerTitleProps = Omit<HeadingProps, 'level'> & AriaAttributesWithRef<HTMLHeadingElement> & VariantProps<typeof DrawerTitleStyles>;
+type DrawerOpenEvent = Payload<typeof DrawerEventTypes.open, {
+    view: UniqueId;
+}>;
+type DrawerToggleEvent = Payload<typeof DrawerEventTypes.toggle, {
+    view: UniqueId;
+}>;
+type DrawerEvent = DrawerOpenEvent | DrawerToggleEvent | ViewStackEvent;
+type SimpleEvents = 'back' | 'clear' | 'close' | 'reset' | UniqueId;
+type TargetedEvents = `back:${UniqueId}` | `clear:${UniqueId}` | `close:${UniqueId}` | `open:${UniqueId}` | `toggle:${UniqueId}` | `reset:${UniqueId}`;
+type ChainedEvents = (SimpleEvents | TargetedEvents)[];
+type DrawerTriggerProps = {
+    children: ReactElement<DOMAttributes<FocusableElement>, string>;
     /**
-     * A function to check if a menu item is selected.
-     * @param selectedMenuItemId
-     * @param menuItemId
-     * @returns
+     * __SimpleEvents__ allow the easiest implementation of events, but come with some restrictions:
+     * - The literal commands `back | clear | close | reset` will only work inside of the context of a Drawer
+     * - When passing a view's UniqueId the behavior is always to push that id onto it's parent's stack
+     *
+     * __TargetedEvents__ allow for external control of a Drawer, the UniqueId of a Drawer is passed to know which drawer to affect
+     *
+     * __ChainedEvents__ allow a list of events from a single control to enable multiple behaviors
+     *
+     * _NOTE_: Open differs from Push (just a UniqueId), Open clears the stack before pushing the new view
+     *
+     * @example
+     * // Reset a drawer stack and then push a view on:
+     * ['reset', myViewId]
+     *
+     * // Open multiple drawers:
+     * [`open:${tabOneId}`, `open:${tabCId}`]
+     *
+     * // Push multiple views to multiple drawers:
+     * [viewOneId, viewTwoId, viewThreeId]
+     *
+     * // Close the current drawer from inside its context:
+     * 'close'
      */
-    isSelectedMenuItem: (selectedMenuItemId?: Key, menuItemId?: Key) => boolean;
+    for: SimpleEvents | TargetedEvents | ChainedEvents;
 };
 type DrawerContextValue = {
-    state: DrawerState;
-};
-/**
- * Extended Drawer Layout Configurations
- *
- * The layout system supports four different drawer extension modes that determine
- * how drawers are arranged and which drawers extend to the full container dimensions.
- *
- * extend: "left right"
- * ┌──────┬──────────┬───────┐
- * │      │   top    │       │
- * │      ├──────────┤       │
- * │ left │   main   │ right │
- * │      ├──────────┤       │
- * │      │  bottom  │       │
- * └──────┴──────────┴───────┘
- *
- * extend: "top bottom"
- * ┌─────────────────────────┐
- * │          top            │
- * ├──────┬──────────┬───────┤
- * │ left │   main   │ right │
- * ├──────┴──────────┴───────┤
- * │         bottom          │
- * └─────────────────────────┘
- *
- * extend: "top"
- * ┌─────────────────────────┐
- * │          top            │
- * ├──────┬──────────┬───────┤
- * │      │   main   │       │
- * │ left ├──────────┤ right │
- * │      │  bottom  │       │
- * └──────┴──────────┴───────┘
- *
- * extend: "bottom"
- * ┌──────┬──────────┬───────┐
- * │      │   top    │       │
- * │ left ├──────────┤ right │
- * │      │   main   │       │
- * ├──────┴──────────┴───────┤
- * │         bottom          │
- * └─────────────────────────┘
- *
- * extend: "left"
- * ┌──────┬──────────────────┐
- * │      │   top            │
- * │      ├──────────┬───────│
- * │ left │   main   │ right │
- * │      ├──────────┴───────┤
- * │      │  bottom          │
- * └──────┴──────────────────┘
- *
- * extend: "right"
- * ┌─────────────────┬───────┐
- * │          top    │       │
- * ├──────┬──────────┤       │
- * │ left │   main   │ right │
- * ├──────┴──────────┤       │
- * │         bottom  │       │
- * └─────────────────┴───────┘
- */
-type DrawerLayouts = 'left right' | 'top bottom' | 'top' | 'bottom' | 'left' | 'right';
-declare const DrawerDefaults: {
-    readonly selectedMenuItemId: undefined;
-    readonly isOpen: false;
+    register: (view: UniqueId) => void;
+    unregister: (view: UniqueId) => void;
 };
 
-export { type DrawerContainerProps, type DrawerContextValue, DrawerDefaults, type DrawerLayoutProps, type DrawerLayoutPush, type DrawerLayouts, type DrawerMenuItemProps, type DrawerMenuProps, type DrawerPanelProps, type DrawerPlacement, type DrawerProps, type DrawerProviderProps, type DrawerSize, type DrawerState, type DrawerTriggerProps, type DrawersContextValue, type OnOpenChangeCallback };
+export type { DrawerContextValue, DrawerEvent, DrawerLayoutProps, DrawerMenuItemProps, DrawerMenuProps, DrawerOpenEvent, DrawerProps, DrawerTitleProps, DrawerToggleEvent, DrawerTriggerProps };

package/dist/components/drawer/types.js

@@ -1,2 +1,2 @@
-const e={selectedMenuItemId:void 0,isOpen:false};export{e as DrawerDefaults};//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map
 //# sourceMappingURL=types.js.map

package/dist/components/drawer/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/drawer/types.ts"],"names":["DrawerDefaults"],"mappings":"AAwTO,MAAMA,CAAAA,CAAiB,CAC5B,kBAAA,CAAoB,MAAA,CACpB,OAAQ,KACV","file":"types.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport type { FocusableElement, Key } from '@react-types/shared';\nimport type { DOMAttributes, PropsWithChildren, ReactElement } from 'react';\n\n/**\n * Defines the possible sizes for a drawer.\n */\nexport type DrawerSize = 'small' | 'medium' | 'large';\n\n/**\n * Defines the possible placements for a drawer.\n */\nexport type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';\n\nexport type DrawerLayoutPush =\n  | DrawerPlacement\n  | `${DrawerPlacement} ${DrawerPlacement}`\n  | `${DrawerPlacement} ${DrawerPlacement} ${DrawerPlacement}`\n  | `${DrawerPlacement} ${DrawerPlacement} ${DrawerPlacement} ${DrawerPlacement}`;\n\n/**\n * Represents the state of a single drawer.\n */\nexport type DrawerState = {\n  id: Key;\n  isOpen: boolean;\n  selectedMenuItemId?: Key;\n};\n\n/**\n * Base props for drawer container components.\n */\nexport interface DrawerContainerProps\n  extends PropsWithChildren<{ className?: string }> {}\n\n/**\n * Props for the `Drawer.Provider` component.\n */\nexport interface DrawerProviderProps extends PropsWithChildren {\n  /**\n   * A callback function that is called when the state of any drawer changes.\n   * @param drawerId\n   * @param state\n   * @returns\n   */\n  onStateChange?: (drawerId: Key, state: DrawerState) => void;\n}\n\n/**\n * Props for the `Drawer.Layout` component.\n */\nexport interface DrawerLayoutProps extends DrawerContainerProps {\n  /**\n   * Which drawers should extend to full container dimensions.\n   * Determines the overall layout structure and drawer relationships in regard to space.\n   *\n   * @default 'left right'\n   */\n  extend?: DrawerLayouts;\n  /**\n   * Determines how drawer interact with the main content area and overall layout:\n   *\n   * - `'push'`: Drawer pushes the main content aside, reducing its available width.\n   *   Content area shrinks to accommodate the panel space.\n   *   If no placements are defined for push, the default behavior for a drawer is to float over the main content without affecting its layout or dimensions.\n   *   Content remains at full width, panel appears as an overlay.\n   */\n  push?: DrawerLayoutPush;\n}\n\n/**\n * Props for the `Drawer` component.\n */\nexport interface DrawerProps extends DrawerContainerProps {\n  /**\n   * The unique identifier for the drawer.\n   */\n  id: Key;\n  /**\n   * The placement of the drawer.\n   * @default 'left'\n   */\n  placement: DrawerPlacement;\n  /**\n   * The size of the drawer.\n   * @default 'medium'\n   */\n  size?: DrawerSize;\n  /**\n   * Whether the drawer is open or not.\n   * @default false\n   */\n  isOpen?: boolean;\n  /**\n   * The id of the menu item that should be selected by default.\n   */\n  defaultSelectedMenuItemId?: Key;\n  /**\n   * A callback function that is called when the drawer is opened or closed.\n   * @param boolean\n   */\n  onOpenChange?: OnOpenChangeCallback;\n  /**\n   * A callback function that is called when the state of the drawer changes.\n   * @param state\n   * @returns\n   */\n  onStateChange?: (state: DrawerState) => void;\n}\n\n/**\n * A callback function that is called when the drawer is opened or closed.\n * @param boolean\n */\nexport type OnOpenChangeCallback = ((isOpen: boolean) => void) | undefined;\n\n/**\n * Props for the 'Drawer.Menu' component.\n */\nexport interface DrawerMenuProps extends DrawerContainerProps {\n  /**\n   * The position of the menu.\n   * @default 'middle'\n   */\n  position?: 'start' | 'middle' | 'end';\n}\n\n/**\n * Props for the 'Drawer.Trigger' component.\n */\nexport interface DrawerTriggerProps extends DrawerContainerProps {\n  /**\n   * The id of the drawer to control.\n   */\n  for: Key;\n  /**\n   * The behavior of the trigger.\n   * @default 'toggle'\n   */\n  behavior?: 'open' | 'close' | 'toggle';\n  /**\n   * The children of the component.\n   */\n  children: ReactElement<DOMAttributes<FocusableElement>, string>;\n}\n\n/**\n * Props for the 'Drawer.Menu.Item' component.\n */\nexport type DrawerMenuItemProps = {\n  /**\n   * The unique identifier for the menu item.\n   */\n  id?: Key;\n  /**\n   * The class name for the menu item.\n   */\n  className?: string;\n  /**\n   * The children of the component.\n   */\n  children: ReactElement<DOMAttributes<FocusableElement>, string>;\n};\n\n/**\n * Props for the 'Drawer.Panel' component.\n */\nexport interface DrawerPanelProps extends DrawerContainerProps {\n  /**\n   * The unique identifier for the panel.\n   */\n  id?: Key;\n}\n\n/**\n * The value provided by the 'DrawersContext'.\n */\nexport type DrawersContextValue = {\n  /**\n   * A record of all the drawer's state.\n   */\n  drawerStates: Record<Key, DrawerState>;\n  /**\n   * A function to toggle the drawer.\n   * @param drawerId\n   * @returns\n   */\n  toggleDrawer: (drawerId: Key) => void;\n  /**\n   * A function to open a drawer.\n   * @param drawerId\n   * @param menuItemId\n   * @returns\n   */\n  openDrawer: (drawerId: Key, menuItemId?: Key) => void;\n  /**\n   * A function to close a drawer.\n   * @param drawerId\n   * @returns\n   */\n  closeDrawer: (drawerId: Key) => void;\n  /**\n   * A function to get the state of a drawer.\n   * @param drawerId\n   * @returns\n   */\n  getDrawerState: (drawerId: Key) => DrawerState;\n  /**\n   * A function to register a drawer.\n   * @param initialState\n   * @param callbacks\n   * @returns\n   */\n  registerDrawer: (\n    initialState: DrawerState,\n    callbacks?: {\n      onOpenChange?: OnOpenChangeCallback;\n      onStateChange?: (state: DrawerState) => void;\n    },\n  ) => void;\n\n  /**\n   * A function to check if a menu item is selected.\n   * @param selectedMenuItemId\n   * @param menuItemId\n   * @returns\n   */\n  isSelectedMenuItem: (selectedMenuItemId?: Key, menuItemId?: Key) => boolean;\n};\n\nexport type DrawerContextValue = {\n  state: DrawerState;\n};\n\n/**\n * Extended Drawer Layout Configurations\n *\n * The layout system supports four different drawer extension modes that determine\n * how drawers are arranged and which drawers extend to the full container dimensions.\n *\n * extend: \"left right\"\n * ┌──────┬──────────┬───────┐\n * │      │   top    │       │\n * │      ├──────────┤       │\n * │ left │   main   │ right │\n * │      ├──────────┤       │\n * │      │  bottom  │       │\n * └──────┴──────────┴───────┘\n *\n * extend: \"top bottom\"\n * ┌─────────────────────────┐\n * │          top            │\n * ├──────┬──────────┬───────┤\n * │ left │   main   │ right │\n * ├──────┴──────────┴───────┤\n * │         bottom          │\n * └─────────────────────────┘\n *\n * extend: \"top\"\n * ┌─────────────────────────┐\n * │          top            │\n * ├──────┬──────────┬───────┤\n * │      │   main   │       │\n * │ left ├──────────┤ right │\n * │      │  bottom  │       │\n * └──────┴──────────┴───────┘\n *\n * extend: \"bottom\"\n * ┌──────┬──────────┬───────┐\n * │      │   top    │       │\n * │ left ├──────────┤ right │\n * │      │   main   │       │\n * ├──────┴──────────┴───────┤\n * │         bottom          │\n * └─────────────────────────┘\n *\n * extend: \"left\"\n * ┌──────┬──────────────────┐\n * │      │   top            │\n * │      ├──────────┬───────│\n * │ left │   main   │ right │\n * │      ├──────────┴───────┤\n * │      │  bottom          │\n * └──────┴──────────────────┘\n *\n * extend: \"right\"\n * ┌─────────────────┬───────┐\n * │          top    │       │\n * ├──────┬──────────┤       │\n * │ left │   main   │ right │\n * ├──────┴──────────┤       │\n * │         bottom  │       │\n * └─────────────────┴───────┘\n */\nexport type DrawerLayouts =\n  | 'left right'\n  | 'top bottom'\n  | 'top'\n  | 'bottom'\n  | 'left'\n  | 'right';\n\nexport const DrawerDefaults = {\n  selectedMenuItemId: undefined,\n  isOpen: false,\n} as const;\n"]}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"types.js"}

package/dist/components/hotkey/index.d.ts

@@ -11,6 +11,37 @@ declare function HotkeyProvider({ children, ...props }: ProviderProps<HotkeyProp
 declare namespace HotkeyProvider {
     var displayName: string;
 }
+/**
+ * Hotkey - A visual representation of keyboard shortcuts and key combinations
+ *
+ * Displays keyboard keys and shortcuts in a consistent, accessible format.
+ * Perfect for documentation, help systems, or UI elements that need to show
+ * keyboard shortcuts. Supports multiple visual styles including outlined keys,
+ * flat presentation, and icon-specific formatting.
+ *
+ * @example
+ * // Basic hotkey display
+ * <Hotkey>Ctrl</Hotkey>
+ *
+ * @example
+ * // Hotkey combination with different variants
+ * <Hotkey.Set>
+ *   <Hotkey variant="outline">Cmd</Hotkey>
+ *   <span>+</span>
+ *   <Hotkey variant="outline">K</Hotkey>
+ * </Hotkey.Set>
+ *
+ * @example
+ * // Flat style for inline text
+ * <p>Press <Hotkey variant="flat">Enter</Hotkey> to submit</p>
+ *
+ * @example
+ * // Icon variant for special keys
+ * <Hotkey.Set>
+ *   <Hotkey variant="icon">⌘</Hotkey>
+ *   <Hotkey>Space</Hotkey>
+ * </Hotkey.Set>
+ */
 declare function Hotkey({ ref, children, ...props }: HotkeyProps): react_jsx_runtime.JSX.Element;
 declare namespace Hotkey {
     var displayName: string;
@@ -22,4 +53,4 @@ declare namespace HotkeySet {
     var displayName: string;
 }
 
-export { Hotkey, HotkeyContext, HotkeySet };
+export { Hotkey, HotkeyContext };

package/dist/components/hotkey/index.js

@@ -1,2 +1,2 @@
-import {jsx}from'react/jsx-runtime';import'client-only';import {createContext}from'react';import {useContextProps,Keyboard}from'react-aria-components';import {Icon}from'../icon/index.js';import {HotkeyStyles,HotkeyStylesDefaults}from'./styles.js';const {key:c,set:v}=HotkeyStyles(),y=createContext(null);function i({children:e,...o}){return jsx(y.Provider,{value:o,children:e})}i.displayName="Hotkey.Provider";function s({ref:e,children:o,...t}){[t,e]=useContextProps(t,e??null,y);const{className:a,variant:l=HotkeyStylesDefaults.variant}=t;return jsx(Keyboard,{ref:e,...t,className:c({className:a,variant:l}),children:o})}s.displayName="Hotkey";function n({children:e,...o}){const{className:t}=o;return jsx("div",{className:v({className:t}),children:jsx(Icon.Provider,{size:"large",children:e})})}n.displayName="Hotkey.Set",s.Set=n,s.Provider=i;export{s as Hotkey,y as HotkeyContext,n as HotkeySet};//# sourceMappingURL=index.js.map
+import {jsx}from'react/jsx-runtime';import'client-only';import {createContext}from'react';import {useContextProps,Keyboard}from'react-aria-components';import {Icon}from'../icon/index.js';import {HotkeyStyles,HotkeyStylesDefaults}from'./styles.js';const {key:c,set:v}=HotkeyStyles(),y=createContext(null);function i({children:e,...o}){return jsx(y.Provider,{value:o,children:e})}i.displayName="Hotkey.Provider";function s({ref:e,children:o,...t}){[t,e]=useContextProps(t,e??null,y);const{className:a,variant:l=HotkeyStylesDefaults.variant}=t;return jsx(Keyboard,{ref:e,...t,className:c({className:a,variant:l}),children:o})}s.displayName="Hotkey";function n({children:e,...o}){const{className:t}=o;return jsx("div",{className:v({className:t}),children:jsx(Icon.Provider,{size:"large",children:e})})}n.displayName="Hotkey.Set",s.Set=n,s.Provider=i;export{s as Hotkey,y as HotkeyContext};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/hotkey/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/hotkey/index.tsx"],"names":["HotkeyStyles","HotkeyContext","createContext","H","p","props","jsx","r","HotkeyProvider","useContextProps","ref","P","HotkeyStylesDefaults","Keyboard","m","className","children","Hotkey","Icon","k"],"mappings":"6PA0BqBA,CAAAA,GAERC,CAAAA,CACXC,CAAAA,KAA0D,CAAA,CAE5DC,YAAA,EAAA,CAAA,CAAA,CAAAC,aAAA,CAAA,IAA0B,WAAU,CAAA,CAAA,CAAGC,QACrC,CAAA,CAAA,CACEC,GAACL,CAAc,CAAA,CAAA,CAAA,OAASM,GAAA,CAAA,CAAA,CAAA,QAAe,CAAA,CAAA,KAAS,CAEpD,CACAC,CAAAA,QAAe,CAAA,CAAA,CAAA,CAAA,CAAc,CAAA,CAAA,WAAA,CAAA,iBAEJ,CAAA,eAAe,CAAA,CAAA,CAAGH,QAC9B,CAAA,CAAII,CAAAA,GAAuBC,CAAAA,CAAAA,CAAO,CAAA,CAAA,CAAA,CAAA,CAAMT,CAAa,CAAAU,eAChE,MAAQ,IAAA,CAAA,CAAA,CAAA,CAAA,KAAW,CAAA,SAAUC,CAAqB,CAAA,CAAA,OAAYP,CAAAA,CAE9D,6BACGQ,CAAA,CAAS,CAAA,CAAA,OAAcR,GAAAA,CAAOS,QAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,GAAe,CAAE,CAAA,SAAAC,CAAAA,CAAW,CAAA,CAAA,SAAS,CACjE,CAAA,CAAA,OAAAC,CAAAA,CACH,CAEJ,CACAC,CAAAA,QAAO,CAAA,CAAA,CAAA,CAAA,CAAc,aAEd,CAAA,QAAqB,CAAA,SAAU,CAAA,CAAA,CAAGZ,QACvC,CAAM,CAAE,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,KAAcA,CAAAA,SAGpBC,CAAC,YAAIC,GAAA,CAAA,KAAe,CAAE,CAAA,SAAAQ,CAAU,CAAC,CAAA,CAC/B,SAAAT,CAAAA,CAACY,EAAK,CAAA,QAAL,CAAcX,GAAA,CAAAY,IAAA,CAAA,QAAK,CAAS,aAC/B,CAEJ,QACU,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAc,CAAA,CAAA,WAExBF,aACO,CAAA,CAAA,CAAA,GAAWT,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,QAAAA,CAAAA,CAAAA","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport type { ProviderProps } from '@/lib/types';\nimport { createContext } from 'react';\nimport {\n  type ContextValue,\n  Keyboard,\n  useContextProps,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { HotkeyStyles, HotkeyStylesDefaults } from './styles';\nimport type { HotkeyProps, HotkeySetProps } from './types';\n\nconst { key, set } = HotkeyStyles();\n\nexport const HotkeyContext =\n  createContext<ContextValue<HotkeyProps, HTMLElement>>(null);\n\nfunction HotkeyProvider({ children, ...props }: ProviderProps<HotkeyProps>) {\n  return (\n    <HotkeyContext.Provider value={props}>{children}</HotkeyContext.Provider>\n  );\n}\nHotkeyProvider.displayName = 'Hotkey.Provider';\n\nexport function Hotkey({ ref, children, ...props }: HotkeyProps) {\n  [props, ref] = useContextProps(props, ref ?? null, HotkeyContext);\n  const { className, variant = HotkeyStylesDefaults.variant } = props;\n\n  return (\n    <Keyboard ref={ref} {...props} className={key({ className, variant })}>\n      {children}\n    </Keyboard>\n  );\n}\nHotkey.displayName = 'Hotkey';\n\nexport function HotkeySet({ children, ...props }: HotkeySetProps) {\n  const { className } = props;\n\n  return (\n    <div className={set({ className })}>\n      <Icon.Provider size='large'>{children}</Icon.Provider>\n    </div>\n  );\n}\nHotkeySet.displayName = 'Hotkey.Set';\n\nHotkey.Set = HotkeySet;\nHotkey.Provider = HotkeyProvider;\n"]}
+{"version":3,"sources":["../../../src/components/hotkey/index.tsx"],"names":["HotkeyStyles","HotkeyContext","createContext","H","m","props","jsx","r","HotkeyProvider","useContextProps","ref","P","HotkeyStylesDefaults","Keyboard","p","className","children","Hotkey","Icon","k"],"mappings":"6PA0BqBA,CAAAA,GAERC,CAAAA,CACXC,CAAAA,KAA0D,CAAA,CAE5DC,YAAA,EAAA,CAAA,CAAA,CAAAC,aAAA,CAAA,IAA0B,WAAU,CAAA,CAAA,CAAGC,QACrC,CAAA,CAAA,CACEC,GAACL,CAAc,CAAA,CAAA,CAAA,OAASM,GAAA,CAAA,CAAA,CAAA,QAAe,CAAA,CAAA,KAAS,CAEpD,CACAC,CAAAA,QAAe,CAAA,CAAA,CAAA,CAAA,CAAc,CAAA,CAAA,WAAA,CAAA,iBAiCJ,CAAA,eAAe,CAAA,CAAA,CAAGH,QAC9B,CAAA,CAAII,CAAAA,GAAuBC,CAAAA,CAAAA,CAAO,CAAA,CAAA,CAAA,CAAA,CAAMT,CAAa,CAAAU,eAChE,MAAQ,IAAA,CAAA,CAAA,CAAA,CAAA,KAAW,CAAA,SAAUC,CAAqB,CAAA,CAAA,OAAYP,CAAAA,CAE9D,6BACGQ,CAAA,CAAS,CAAA,CAAA,OAAcR,GAAAA,CAAOS,QAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,GAAe,CAAE,CAAA,SAAAC,CAAAA,CAAW,CAAA,CAAA,SAAS,CACjE,CAAA,CAAA,OAAAC,CAAAA,CACH,CAEJ,CACAC,CAAAA,QAAO,CAAA,CAAA,CAAA,CAAA,CAAc,aAErB,CAAA,QAAqB,CAAA,SAAU,CAAA,CAAA,CAAGZ,QAChC,CAAM,CAAE,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,KAAcA,CAAAA,SAGpBC,CAAC,YAAIC,GAAA,CAAA,KAAe,CAAE,CAAA,SAAAQ,CAAU,CAAC,CAAA,CAC/B,SAAAT,CAAAA,CAACY,EAAK,CAAA,QAAL,CAAcX,GAAA,CAAAY,IAAA,CAAA,QAAK,CAAS,aAC/B,CAEJ,QACU,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAc,CAAA,CAAA,WAExBF,aACO,CAAA,CAAA,CAAA,GAAWT,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,QAAAA,CAAAA,CAAAA","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport type { ProviderProps } from '@/lib/types';\nimport { createContext } from 'react';\nimport {\n  type ContextValue,\n  Keyboard,\n  useContextProps,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { HotkeyStyles, HotkeyStylesDefaults } from './styles';\nimport type { HotkeyProps, HotkeySetProps } from './types';\n\nconst { key, set } = HotkeyStyles();\n\nexport const HotkeyContext =\n  createContext<ContextValue<HotkeyProps, HTMLElement>>(null);\n\nfunction HotkeyProvider({ children, ...props }: ProviderProps<HotkeyProps>) {\n  return (\n    <HotkeyContext.Provider value={props}>{children}</HotkeyContext.Provider>\n  );\n}\nHotkeyProvider.displayName = 'Hotkey.Provider';\n\n/**\n * Hotkey - A visual representation of keyboard shortcuts and key combinations\n *\n * Displays keyboard keys and shortcuts in a consistent, accessible format.\n * Perfect for documentation, help systems, or UI elements that need to show\n * keyboard shortcuts. Supports multiple visual styles including outlined keys,\n * flat presentation, and icon-specific formatting.\n *\n * @example\n * // Basic hotkey display\n * <Hotkey>Ctrl</Hotkey>\n *\n * @example\n * // Hotkey combination with different variants\n * <Hotkey.Set>\n *   <Hotkey variant=\"outline\">Cmd</Hotkey>\n *   <span>+</span>\n *   <Hotkey variant=\"outline\">K</Hotkey>\n * </Hotkey.Set>\n *\n * @example\n * // Flat style for inline text\n * <p>Press <Hotkey variant=\"flat\">Enter</Hotkey> to submit</p>\n *\n * @example\n * // Icon variant for special keys\n * <Hotkey.Set>\n *   <Hotkey variant=\"icon\">⌘</Hotkey>\n *   <Hotkey>Space</Hotkey>\n * </Hotkey.Set>\n */\nexport function Hotkey({ ref, children, ...props }: HotkeyProps) {\n  [props, ref] = useContextProps(props, ref ?? null, HotkeyContext);\n  const { className, variant = HotkeyStylesDefaults.variant } = props;\n\n  return (\n    <Keyboard ref={ref} {...props} className={key({ className, variant })}>\n      {children}\n    </Keyboard>\n  );\n}\nHotkey.displayName = 'Hotkey';\n\nfunction HotkeySet({ children, ...props }: HotkeySetProps) {\n  const { className } = props;\n\n  return (\n    <div className={set({ className })}>\n      <Icon.Provider size='large'>{children}</Icon.Provider>\n    </div>\n  );\n}\nHotkeySet.displayName = 'Hotkey.Set';\n\nHotkey.Set = HotkeySet;\nHotkey.Provider = HotkeyProvider;\n"]}

package/dist/components/icon/index.d.ts

@@ -9,6 +9,35 @@ declare function IconProvider({ children, ...props }: ProviderProps<IconProps>):
 declare namespace IconProvider {
     var displayName: string;
 }
+/**
+ * Icon - A wrapper component for displaying SVG icons with consistent sizing
+ *
+ * Provides a standardized container for SVG icons with built-in size variants and
+ * proper accessibility support. Works seamlessly with the Accelint icon library
+ * and supports custom SVG elements with consistent styling and alignment.
+ *
+ * @example
+ * // Basic icon usage
+ * <Icon>
+ *   <Settings />
+ * </Icon>
+ *
+ * @example
+ * // Icon with different sizes
+ * <Icon size="small">
+ *   <User />
+ * </Icon>
+ * <Icon size="large">
+ *   <Dashboard />
+ * </Icon>
+ *
+ * @example
+ * // Icon in button context (automatically inherits sizing)
+ * <Button>
+ *   <Icon><Plus /></Icon>
+ *   Add Item
+ * </Button>
+ */
 declare function Icon({ ref, ...props }: IconProps): react_jsx_runtime.JSX.Element;
 declare namespace Icon {
     var displayName: string;

package/dist/components/icon/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/icon/index.tsx"],"names":["createContext","a","props","i","IconProvider","ref","useContextProps","rest","P","Icon"],"mappings":"mLAoBEA,MAAwD,CAAA,CAAAC,aAAA,CAAI,IAE9D,EAAA,oBAAkC,CAAA,CAAGC,CAAM,GACzC,WAAoBC,GAAA,CAAA,CAAA,CAAA,QAAS,CAAA,CAAA,gBAC/B,CACAC,CAAAA,CAAa,CAAA,CAAA,CAAA,CAAA,2BAEN,CAAA,SAAgB,CAAA,CAAA,CAAAC,GAAK,CAAA,CAAGH,CAAM,GACnC,CAACA,CAAAA,CAAOG,CAAG,EAAIC,CAAAA,CAAgBJ,CAAAA,CAAOG,eAAAA,CAAAA,CAAO,CAAA,CAAA,EAAA,IAE7C,SAAQ,CAAA,QAAU,CAAA,CAAA,CAAA,gBAAkB,CAAA,CAAA,CAAA,QAAaE,CAAK,GAAIL,CAE1D,WACGC,GAAA,CAAA,OACKI,CAAAA,GACJ,CAAA,CAAKF,GACL,CAAA,CAAA,CAAA,SAAwB,CAAAG,UAAA,CAAA,CAAA,UACxB,CAAA,CAAA,CAAA,CAAA,sBAKN,CACAC,CAAAA,CAAK,CAAA,CAAA,CAAA,CAAA,WAAc,CAAA,MACd,CAAA,CAAA,CAAA,QAAWL,CAAAA,CAAAA","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport 'client-only';\nimport type { ProviderProps } from '@/lib/types';\nimport { createContext } from 'react';\nimport { type ContextValue, useContextProps } from 'react-aria-components';\nimport { IconStyles } from './styles';\nimport type { IconProps } from './types';\n\nexport const IconContext =\n  createContext<ContextValue<IconProps, HTMLSpanElement>>(null);\n\nfunction IconProvider({ children, ...props }: ProviderProps<IconProps>) {\n  return <IconContext.Provider value={props}>{children}</IconContext.Provider>;\n}\nIconProvider.displayName = 'Icon.Provider';\n\nexport function Icon({ ref, ...props }: IconProps) {\n  [props, ref] = useContextProps(props, ref ?? null, IconContext);\n\n  const { children, className, size = 'medium', ...rest } = props;\n\n  return (\n    <span\n      {...rest}\n      ref={ref}\n      className={IconStyles({ className })}\n      data-size={size}\n    >\n      {children}\n    </span>\n  );\n}\nIcon.displayName = 'Icon';\nIcon.Provider = IconProvider;\n"]}
+{"version":3,"sources":["../../../src/components/icon/index.tsx"],"names":["createContext","a","props","i","IconProvider","ref","useContextProps","rest","P","Icon"],"mappings":"mLAoBEA,MAAwD,CAAA,CAAAC,aAAA,CAAI,IAE9D,EAAA,oBAAkC,CAAA,CAAGC,CAAM,GACzC,WAAoBC,GAAA,CAAA,CAAA,CAAA,QAAS,CAAA,CAAA,gBAC/B,CACAC,CAAAA,CAAa,CAAA,CAAA,CAAA,CAAA,2BA+BN,CAAA,SAAgB,CAAA,CAAA,CAAAC,GAAK,CAAA,CAAGH,CAAM,GACnC,CAACA,CAAAA,CAAOG,CAAG,EAAIC,CAAAA,CAAgBJ,CAAAA,CAAOG,eAAAA,CAAAA,CAAO,CAAA,CAAA,EAAA,IAE7C,SAAQ,CAAA,QAAU,CAAA,CAAA,CAAA,gBAAkB,CAAA,CAAA,CAAA,QAAaE,CAAK,GAAIL,CAE1D,WACGC,GAAA,CAAA,OACKI,CAAAA,GACJ,CAAA,CAAKF,GACL,CAAA,CAAA,CAAA,SAAwB,CAAAG,UAAA,CAAA,CAAA,UACxB,CAAA,CAAA,CAAA,CAAA,sBAKN,CACAC,CAAAA,CAAK,CAAA,CAAA,CAAA,CAAA,WAAc,CAAA,MACd,CAAA,CAAA,CAAA,QAAWL,CAAAA,CAAAA","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport 'client-only';\nimport type { ProviderProps } from '@/lib/types';\nimport { createContext } from 'react';\nimport { type ContextValue, useContextProps } from 'react-aria-components';\nimport { IconStyles } from './styles';\nimport type { IconProps } from './types';\n\nexport const IconContext =\n  createContext<ContextValue<IconProps, HTMLSpanElement>>(null);\n\nfunction IconProvider({ children, ...props }: ProviderProps<IconProps>) {\n  return <IconContext.Provider value={props}>{children}</IconContext.Provider>;\n}\nIconProvider.displayName = 'Icon.Provider';\n\n/**\n * Icon - A wrapper component for displaying SVG icons with consistent sizing\n *\n * Provides a standardized container for SVG icons with built-in size variants and\n * proper accessibility support. Works seamlessly with the Accelint icon library\n * and supports custom SVG elements with consistent styling and alignment.\n *\n * @example\n * // Basic icon usage\n * <Icon>\n *   <Settings />\n * </Icon>\n *\n * @example\n * // Icon with different sizes\n * <Icon size=\"small\">\n *   <User />\n * </Icon>\n * <Icon size=\"large\">\n *   <Dashboard />\n * </Icon>\n *\n * @example\n * // Icon in button context (automatically inherits sizing)\n * <Button>\n *   <Icon><Plus /></Icon>\n *   Add Item\n * </Button>\n */\nexport function Icon({ ref, ...props }: IconProps) {\n  [props, ref] = useContextProps(props, ref ?? null, IconContext);\n\n  const { children, className, size = 'medium', ...rest } = props;\n\n  return (\n    <span\n      {...rest}\n      ref={ref}\n      className={IconStyles({ className })}\n      data-size={size}\n    >\n      {children}\n    </span>\n  );\n}\nIcon.displayName = 'Icon';\nIcon.Provider = IconProvider;\n"]}

package/dist/components/input/index.d.ts

@@ -4,11 +4,30 @@ import { ContextValue } from 'react-aria-components';
 import { InputProps } from './types.js';
 import 'tailwind-variants';
 import '../button/types.js';
+import '../../lib/types.js';
 import '../button/styles.js';
 import 'tailwind-merge';
 import './styles.js';
 
 declare const InputContext: react.Context<ContextValue<InputProps, HTMLInputElement>>;
+/**
+ * Input - A flexible text input component with enhanced features
+ *
+ * Provides a customizable text input with automatic sizing, clear functionality,
+ * and integrated validation states. Supports various styling options and integrates
+ * seamlessly with form field components for comprehensive form experiences.
+ *
+ * @example
+ * // Basic input
+ * <Input placeholder="Enter text..." />
+ *
+ * @example
+ * // Input with clear button
+ * <Input
+ *   defaultValue="Clearable text"
+ *   classNames={{ clear: "hover:bg-gray-100" }}
+ * />
+ */
 declare function Input({ ref, ...props }: InputProps): react_jsx_runtime.JSX.Element;
 declare namespace Input {
     var displayName: string;

package/dist/components/input/index.js

@@ -1,2 +1,2 @@
-import {jsxs,jsx}from'react/jsx-runtime';import'client-only';import {CancelFill}from'@accelint/icons';import {useControlledState}from'@react-stately/utils';import {createContext}from'react';import {useContextProps,InputContext,Input,composeRenderProps}from'react-aria-components';import {Button}from'../button/index.js';import {Icon}from'../icon/index.js';import {InputStyles,InputStylesDefaults}from'./styles.js';const {container:w,sizer:A,input:B,clear:F}=InputStyles(),v={target:{value:""}},K=createContext(null);function k({ref:t,...a}){[a,t]=useContextProps(a,t??null,InputContext),[a,t]=useContextProps({...a},t??null,K);const{classNames:u,autoSize:r,defaultValue:h="",disabled:i,placeholder:p,readOnly:c,required:m,size:f,type:l=InputStylesDefaults.type,value:g,isClearable:n,isInvalid:x,onChange:E,onKeyDown:P,...N}=a,[s,b]=useControlledState(g,h),z=(`${s??""}`.length||p?.length)??0,I=s==null||s==="";function d(e){E?.(e),e.defaultPrevented||b(e.target.value);}return jsxs("div",{className:w({className:u?.container,autoSize:r,type:l,isClearable:n}),"data-disabled":i||null,"data-empty":I||null,"data-invalid":x||null,"data-length":z,"data-placeholder":!!p&&I||null,"data-readonly":c||null,"data-required":m||null,"data-size":f,children:[jsx("div",{className:A({className:u?.sizer,autoSize:r,type:l,isClearable:n}),children:jsx(Input,{...N,ref:t,className:composeRenderProps(u?.input,e=>B({className:e,autoSize:r,type:l,isClearable:n})),disabled:i,placeholder:p,readOnly:c,required:m,type:l,value:s,onChange:d,onKeyDown:e=>{P?.(e),n&&!e.defaultPrevented&&e.key==="Escape"&&d(v);}})}),n&&jsx(Button,{className:composeRenderProps(u?.clear,e=>F({className:e,autoSize:r,type:l,isClearable:n})),excludeFromTabOrder:true,size:"small",variant:"icon",isDisabled:i,onPress:()=>{d(v),t?.current?.focus();},children:jsx(Icon,{children:jsx(CancelFill,{})})})]})}k.displayName="Input";export{k as Input,K as InputContext};//# sourceMappingURL=index.js.map
+import {jsxs,jsx}from'react/jsx-runtime';import'client-only';import {CancelFill}from'@accelint/icons';import {useControlledState}from'@react-stately/utils';import {createContext}from'react';import {useContextProps,InputContext,Input,composeRenderProps}from'react-aria-components';import {Button}from'../button/index.js';import {Icon}from'../icon/index.js';import {InputStyles,InputStylesDefaults}from'./styles.js';const {container:w,sizer:A,input:B,clear:F}=InputStyles(),v={target:{value:""}},K=createContext(null);function k({ref:t,...a}){[a,t]=useContextProps(a,t??null,InputContext),[a,t]=useContextProps({...a},t??null,K);const{classNames:u,autoSize:r,defaultValue:h="",disabled:i,placeholder:d,readOnly:c,required:m,size:f="medium",type:l=InputStylesDefaults.type,value:g,isClearable:n,isInvalid:x,onChange:E,onKeyDown:P,...N}=a,[s,b]=useControlledState(g,h),z=(`${s??""}`.length||d?.length)??0,I=s==null||s==="";function p(e){E?.(e),e.defaultPrevented||b(e.target.value);}return jsxs("div",{className:w({className:u?.container,autoSize:r,type:l,isClearable:n}),"data-disabled":i||null,"data-empty":I||null,"data-invalid":x||null,"data-length":z,"data-placeholder":!!d&&I||null,"data-readonly":c||null,"data-required":m||null,"data-size":f,children:[jsx("div",{className:A({className:u?.sizer,autoSize:r,type:l,isClearable:n}),children:jsx(Input,{...N,ref:t,className:composeRenderProps(u?.input,e=>B({className:e,autoSize:r,type:l,isClearable:n})),disabled:i,placeholder:d,readOnly:c,required:m,type:l,value:s,onChange:p,onKeyDown:e=>{P?.(e),n&&!e.defaultPrevented&&e.key==="Escape"&&p(v);}})}),n&&jsx(Button,{className:composeRenderProps(u?.clear,e=>F({className:e,autoSize:r,type:l,isClearable:n})),excludeFromTabOrder:true,size:"small",variant:"icon",isDisabled:i,onPress:()=>{p(v),t?.current?.focus();},children:jsx(Icon,{children:jsx(CancelFill,{})})})]})}k.displayName="Input";export{k as Input,K as InputContext};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map