@accelint/design-toolkit 2.4.2 → 2.5.0

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

@@ -0,0 +1,279 @@
+import { Key, FocusableElement } from '@react-types/shared';
+import { PropsWithChildren, ReactElement, DOMAttributes } from 'react';
+
+/**
+ * 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 {
+    /**
+     * Which drawers should extend to full container dimensions.
+     * Determines the overall layout structure and drawer relationships in regard to space.
+     *
+     * @default 'left right'
+     */
+    extend?: DrawerLayouts;
+    /**
+     * Determines how drawer interact with the main content area and overall layout:
+     *
+     * - `'push'`: Drawer pushes the main content aside, reducing its available width.
+     *   Content area shrinks to accommodate the panel space.
+     *   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;
+    /**
+     * The placement of the drawer.
+     * @default 'left'
+     */
+    placement: DrawerPlacement;
+    /**
+     * 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 {
+    /**
+     * 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.
+     */
+    id?: Key;
+    /**
+     * The class name for the menu item.
+     */
+    className?: string;
+    /**
+     * The children of the component.
+     */
+    children: ReactElement<DOMAttributes<FocusableElement>, string>;
+};
+/**
+ * Props for the 'Drawer.Panel' component.
+ */
+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>;
+    /**
+     * 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
+     */
+    closeDrawer: (drawerId: Key) => void;
+    /**
+     * A function to get the state of a drawer.
+     * @param drawerId
+     * @returns
+     */
+    getDrawerState: (drawerId: Key) => DrawerState;
+    /**
+     * A function to register a drawer.
+     * @param initialState
+     * @param callbacks
+     * @returns
+     */
+    registerDrawer: (initialState: DrawerState, callbacks?: {
+        onOpenChange?: OnOpenChangeCallback;
+        onStateChange?: (state: DrawerState) => void;
+    }) => void;
+    /**
+     * A function to check if a menu item is selected.
+     * @param selectedMenuItemId
+     * @param menuItemId
+     * @returns
+     */
+    isSelectedMenuItem: (selectedMenuItemId?: Key, menuItemId?: Key) => boolean;
+};
+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;
+};
+
+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 };

package/dist/components/drawer/types.js

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

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,45 @@
+import * as react_aria_components from 'react-aria-components';
+import { ContextValue } from 'react-aria-components';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { HeroProps } from './types.js';
+
+declare const HeroContext: react.Context<ContextValue<HeroProps, HTMLElement>>;
+/**
+ * A versatile hero component that displays an icon alongside primary and secondary content.
+ * Automatically organizes child components by type and supports both stacked and grid layouts.
+ *
+ * @example
+ * ```tsx
+ * // Basic hero with icon and content
+ * <Hero>
+ *   <Icon><Placeholder /></Icon>
+ *   <Hero.Title>Primary Title</Hero.Title>
+ *   <Hero.Subtitle>Secondary information</Hero.Subtitle>
+ * </Hero>
+ *
+ * // Grid layout for compact display
+ * <Hero compact>
+ *   <Icon><Settings /></Icon>
+ *   <Hero.Title>Settings</Hero.Title>
+ *   <Hero.Subtitle>Configure your preferences</Hero.Subtitle>
+ * </Hero>
+ * ```
+ *
+ * ## Child Component Behavior
+ * - **Icon**: Only one allowed
+ * - **Hero.Title**: Only one allowed
+ * - **Hero.Subtitle**: Any number allowed as secondary content
+ *
+ * ## Layout Modes
+ * - **Stack** (default): Vertical layout with larger icon and stacked content
+ * - **Grid** (compact=true): Horizontal layout with smaller icon beside content
+ */
+declare function Hero({ ref, ...props }: HeroProps): react_jsx_runtime.JSX.Element;
+declare namespace Hero {
+    var displayName: string;
+    var Title: react.ForwardRefExoticComponent<react_aria_components.HeadingProps & react.RefAttributes<HTMLHeadingElement>>;
+    var Subtitle: react.ForwardRefExoticComponent<react_aria_components.TextProps & react.RefAttributes<HTMLElement>>;
+}
+
+export { Hero, HeroContext };

package/dist/components/hero/index.js

@@ -0,0 +1,2 @@
+import {jsx}from'react/jsx-runtime';import'client-only';import {containsExactChildren}from'./../../lib/react.js';import {createContext}from'react';import {Text,useContextProps,Provider,HeadingContext,TextContext,Header,Heading}from'react-aria-components';import {Icon,IconContext}from'../icon/index.js';import {HeroStyles}from'./styles.js';const {hero:b,icon:f,title:P,subtitle:S}=HeroStyles(),g=createContext(null);function e({ref:o,...a}){[a,o]=useContextProps(a,o??null,g);const{children:l,classNames:t,compact:i,...s}=a;return containsExactChildren({children:l,componentName:e.displayName,restrictions:[[Icon,{min:1,max:1}],[e.Title,{min:1,max:1}],[e.Subtitle,{min:0}]]}),jsx(Provider,{values:[[IconContext,{className:f({className:t?.icon}),size:"large"}],[HeadingContext,{className:P({className:t?.title}),level:2}],[TextContext,{className:S({className:t?.subtitle})}]],children:jsx(Header,{...s,ref:o,className:b({className:t?.hero}),"data-layout":i?"grid":"stack",children:l})})}e.displayName="Hero",e.Title=Heading,e.Title.displayName="Hero.Title",e.Subtitle=Text,e.Subtitle.displayName="Hero.Subtitle";export{e as Hero,g as HeroContext};//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/hero/index.tsx"],"names":["subtitle","HeroStyles","HeroContext","Hero","ref","props","N","children","compact","m","jsx","Provider","icon","C","classNames","HeadingContext","title","u","H","rest","r","hero","p","Text","x"],"mappings":"oVA8B2B,MAAA,CAAA,IAAA,CAAA,CAAA,CAAAA,IAAaC,CAAW,CAAA,CAEtCC,KACyC,CAAA,CAAA,CAAI,WAgC1CC,CAAAA,UAAK,KAAEC,aAAAA,CAAK,IAAS,EAAc,SAClBC,CAAAA,CAAOD,CAAAA,GAAO,CAAA,CAAA,CAAA,GAAiB,CAE9D,CAAA,CAAA,CAAA,CAAA,CAAM,CAAE,CAAA,CAAA,CAAAE,eAAA,CAAA,CAAA,CAAA,CAAA,EAAAC,IAAU,CAAA,CAAA,CAAA,CAAA,MAAY,QAAAC,CAAAA,CAAS,CAAA,oBAGrC,CAAA,CAAA,CAAA,GAAAD,CAAAA,CACA,CAAA,CAAA,CAAA,OAAAE,qBAAA,CAAA,CAAA,wBACA,CAAA,CAAA,CAAA,YACmB,oBACJ,CAAE,GAAA,CAAK,EAAG,GAAA,CAAK,CAAE,CAAC,CAAA,CAC/B,CAACN,CAAAA,CAAK,KAAA,CAAA,CAAA,GAAY,CAAA,CAAA,CAAA,GAAQ,CAC5B,CACF,CAAC,CAAA,CAGCO,CAAAA,CAACC,SACC,CAAQ,CACN,GAEE,CAAE,mBAAWC,CAAAA,CAAK,MAAE,CAAA,CAAA,CAAAC,WAAA,CAAWC,CAAAA,SAAqB,CAAA,CAAA,CAAA,CAAA,SACtD,CAAA,CACA,EACEC,IACE,CAAA,CAAA,CAAA,IAAA,CAAWC,OAAQ,CAAA,CAAA,CAAA,CAAAC,cAAA,CAAWH,CAAAA,SAAmB,CAAG,CAAA,CAAA,CAAA,UAItD,CAAE,EAAA,KAAA,CAAA,CAAA,CAAWd,KAAW,CAAA,CAAA,CAAA,CAAA,CAAA,CAAAkB,WAAA,CAAWJ,UAAY,CAAS,CAAC,CAAE,CAC7D,aAGFJ,QACMS,CACJ,CAAA,CAAA,CAAA,CAAKf,SACL,CAAAgB,GAAA,CAAWC,MAAAA,CAAK,CAAE,GAAA,CAAA,CAAA,GAAA,CAAA,CAAWP,CAAAA,SAC7B,CAAA,CAAA,CAAA,CAAA,SAAA,CAAaN,CAAAA,EAAU,IAAA,CAAA,CAAS,CAAA,aAE/B,CAAA,CAAA,CAAAD,MAKTJ,CAAAA,OAAK,CAAA,QAAc,CAAA,CAAA,CAAA,CACnBA,EAAK,CAAA,CAAA,CAAA,WACA,CAAA,MAAM,CAAA,CAAA,CAAA,KAAc,CAAAmB,OAAA,CAAA,CAAA,CAAA,KAAA,CAAA,WACpB,CAAWC,YACX,CAAS,CAAA,CAAA,QAAA,CAAAC,IAAc,CAAA,CAAA,CAAA,QAAA,CAAA,WAAA,CAAA,eAAA","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'use client';\n\nimport 'client-only';\nimport { containsExactChildren } from '@/lib/react';\nimport { createContext } from 'react';\nimport {\n  type ContextValue,\n  Header,\n  Heading,\n  HeadingContext,\n  Provider,\n  Text,\n  TextContext,\n  useContextProps,\n} from 'react-aria-components';\nimport { Icon, IconContext } from '../icon';\nimport { HeroStyles } from './styles';\nimport type { HeroProps } from './types';\n\nconst { hero, icon, title, subtitle } = HeroStyles();\n\nexport const HeroContext =\n  createContext<ContextValue<HeroProps, HTMLElement>>(null);\n\n/**\n * A versatile hero component that displays an icon alongside primary and secondary content.\n * Automatically organizes child components by type and supports both stacked and grid layouts.\n *\n * @example\n * ```tsx\n * // Basic hero with icon and content\n * <Hero>\n *   <Icon><Placeholder /></Icon>\n *   <Hero.Title>Primary Title</Hero.Title>\n *   <Hero.Subtitle>Secondary information</Hero.Subtitle>\n * </Hero>\n *\n * // Grid layout for compact display\n * <Hero compact>\n *   <Icon><Settings /></Icon>\n *   <Hero.Title>Settings</Hero.Title>\n *   <Hero.Subtitle>Configure your preferences</Hero.Subtitle>\n * </Hero>\n * ```\n *\n * ## Child Component Behavior\n * - **Icon**: Only one allowed\n * - **Hero.Title**: Only one allowed\n * - **Hero.Subtitle**: Any number allowed as secondary content\n *\n * ## Layout Modes\n * - **Stack** (default): Vertical layout with larger icon and stacked content\n * - **Grid** (compact=true): Horizontal layout with smaller icon beside content\n */\nexport function Hero({ ref, ...props }: HeroProps) {\n  [props, ref] = useContextProps(props, ref ?? null, HeroContext);\n\n  const { children, classNames, compact, ...rest } = props;\n\n  containsExactChildren({\n    children,\n    componentName: Hero.displayName,\n    restrictions: [\n      [Icon, { min: 1, max: 1 }],\n      [Hero.Title, { min: 1, max: 1 }],\n      [Hero.Subtitle, { min: 0 }],\n    ],\n  });\n\n  return (\n    <Provider\n      values={[\n        [\n          IconContext,\n          { className: icon({ className: classNames?.icon }), size: 'large' },\n        ],\n        [\n          HeadingContext,\n          { className: title({ className: classNames?.title }), level: 2 },\n        ],\n        [\n          TextContext,\n          { className: subtitle({ className: classNames?.subtitle }) },\n        ],\n      ]}\n    >\n      <Header\n        {...rest}\n        ref={ref}\n        className={hero({ className: classNames?.hero })}\n        data-layout={compact ? 'grid' : 'stack'}\n      >\n        {children}\n      </Header>\n    </Provider>\n  );\n}\nHero.displayName = 'Hero';\nHero.Title = Heading;\nHero.Title.displayName = 'Hero.Title';\nHero.Subtitle = Text;\nHero.Subtitle.displayName = 'Hero.Subtitle';\n"]}

package/dist/components/hero/styles.d.ts

@@ -0,0 +1,48 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_merge from 'tailwind-merge';
+
+declare const HeroStyles: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            icon?: tailwind_merge.ClassNameValue;
+            title?: tailwind_merge.ClassNameValue;
+            hero?: tailwind_merge.ClassNameValue;
+            subtitle?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_merge.ClassNameValue | {
+            icon?: tailwind_merge.ClassNameValue;
+            title?: tailwind_merge.ClassNameValue;
+            hero?: tailwind_merge.ClassNameValue;
+            subtitle?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    hero: string;
+    icon: string;
+    title: string;
+    subtitle: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            icon?: tailwind_merge.ClassNameValue;
+            title?: tailwind_merge.ClassNameValue;
+            hero?: tailwind_merge.ClassNameValue;
+            subtitle?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    hero: string;
+    icon: string;
+    title: string;
+    subtitle: string;
+}, tailwind_variants.TVReturnType<unknown, {
+    hero: string;
+    icon: string;
+    title: string;
+    subtitle: string;
+}, undefined, unknown, unknown, undefined>>;
+
+export { HeroStyles };

package/dist/components/hero/styles.js

@@ -0,0 +1,2 @@
+import {tv}from'./../../lib/utils.js';const l=tv({slots:{hero:"group/hero relative flex flex-col layout-stack:rounded-large layout-stack:bg-transparent-light layout-stack:px-l layout-stack:py-xl layout-grid:pl-xxl",icon:"fg-default-dark -order-3 group-layout-grid/hero:absolute group-layout-grid/hero:top-xxs group-layout-grid/hero:left-xs group-layout-stack/hero:mb-l group-layout-stack/hero:size-[48px]",title:"fg-default-light -order-2 mb-xs font-display text-header-l",subtitle:"fg-default-dark -order-1 block font-display text-body-s"}});export{l as HeroStyles};//# sourceMappingURL=styles.js.map
+//# sourceMappingURL=styles.js.map

package/dist/components/hero/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/hero/styles.ts"],"names":["t"],"mappings":"sCAeE,MAAA,CAAO,CACLA,EAAA,CAAA,CAAA,KAAM,CAAA,CAAA,IAAA,CAAA,wJACA,CAAA,IAAA,CAAA,4PAEI,CAAA,QAAA,CAAA,yDAEb,CAAA,CAAA","file":"styles.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 { tv } from '@/lib/utils';\n\nexport const HeroStyles = tv({\n  slots: {\n    hero: 'group/hero relative flex flex-col layout-stack:rounded-large layout-stack:bg-transparent-light layout-stack:px-l layout-stack:py-xl layout-grid:pl-xxl',\n    icon: 'fg-default-dark -order-3 group-layout-grid/hero:absolute group-layout-grid/hero:top-xxs group-layout-grid/hero:left-xs group-layout-stack/hero:mb-l group-layout-stack/hero:size-[48px]',\n    title: 'fg-default-light -order-2 mb-xs font-display text-header-l',\n    subtitle: 'fg-default-dark -order-1 block font-display text-body-s',\n  },\n});\n"]}

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

@@ -0,0 +1,13 @@
+import { ComponentPropsWithRef } from 'react';
+
+type HeroProps = Omit<ComponentPropsWithRef<'header'>, 'className'> & {
+    classNames?: {
+        hero?: string;
+        icon?: string;
+        title?: string;
+        subtitle?: string;
+    };
+    compact?: boolean;
+};
+
+export type { HeroProps };

package/dist/components/hero/types.js

@@ -0,0 +1,2 @@
+//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"types.js"}

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

@@ -1,10 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
+import { ProviderProps } from '../../lib/types.js';
 import { ContextValue } from 'react-aria-components';
-import { IconProps, IconProviderProps } from './types.js';
+import { IconProps } from './types.js';
 
 declare const IconContext: react.Context<ContextValue<IconProps, HTMLSpanElement>>;
-declare function IconProvider({ children, ...props }: IconProviderProps): react_jsx_runtime.JSX.Element;
+declare function IconProvider({ children, ...props }: ProviderProps<IconProps>): react_jsx_runtime.JSX.Element;
 declare namespace IconProvider {
     var displayName: string;
 }

package/dist/components/icon/index.js

@@ -1,2 +1,2 @@
-import'client-only';import {createContext}from'react';import {useContextProps}from'react-aria-components';import {IconStyles}from'./styles.js';import {jsx}from'react/jsx-runtime';var r=createContext(null);function n({children:o,...e}){return jsx(r.Provider,{value:e,children:o})}n.displayName="Icon.Provider";function t({ref:o,...e}){[e,o]=useContextProps(e,o??null,r);let{children:i,className:s,size:p="medium",...a}=e;return jsx("span",{...a,ref:o,className:IconStyles({className:s}),"data-size":p,children:i})}t.displayName="Icon";t.Provider=n;export{t as Icon,r as IconContext};//# sourceMappingURL=index.js.map
+import {jsx}from'react/jsx-runtime';import'client-only';import {createContext}from'react';import {useContextProps}from'react-aria-components';import {IconStyles}from'./styles.js';const r=createContext(null);function t({children:o,...e}){return jsx(r.Provider,{value:e,children:o})}t.displayName="Icon.Provider";function n({ref:o,...e}){[e,o]=useContextProps(e,o??null,r);const{children:p,className:s,size:c="medium",...m}=e;return jsx("span",{...m,ref:o,className:IconStyles({className:s}),"data-size":c,children:p})}n.displayName="Icon",n.Provider=t;export{n as Icon,r as IconContext};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/icon/index.tsx"],"names":["IconContext","createContext","IconProvider","children","jsx","props","Icon","ref","useContextProps","className","size","rest","IconStyles"],"mappings":"mLAkBaA,KACXC,CAAAA,aAAwD,CAAA,IAAI,EAE9D,SAASC,CAAa,CAAE,SAAAC,CAAAA,CAAU,CAAA,GAAS,CAAA,CAAsB,CAC/D,QAAOC,GAACJ,CAAAA,CAAY,CAAA,QAAZ,CAAqB,CAAA,KAAOK,CAAAA,CAAQ,SAAAF,CAAAA,CAAS,CACvD,CACAD,CAAAA,CAAa,CAAA,WAAc,gBAEpB,CAAA,SAASI,CAAK,CAAE,CAAA,GAAAC,CAAAA,CAAK,CAAA,GAAS,CAAA,CAAc,CACjD,CAACF,CAAAA,CAAOE,CAAG,EAAIC,CAAAA,eAAgBH,CAAAA,CAAOE,CAAAA,CAAAA,EAAO,IAAMP,CAAW,CAAA,CAE9D,IAAQ,CAAA,QAAAG,EAAU,CAAA,SAAAM,CAAAA,CAAW,KAAAC,CAAAA,CAAO,CAAA,QAAU,CAAA,GAAQ,CAAA,CAAIL,CAAAA,CAE1D,QACED,GAAC,CAAA,MAAA,CACE,IAAGO,CACJ,CAAA,GAAKJ,EACL,CAAA,SAAWK,CAAAA,UAAW,CAAE,CAAA,SAAAH,CAAU,CAAC,EACnC,CAAA,WAAWC,CAAAA,CAEV,SAAAP,CAAAA,CACH,CAEJ,CACAG,CAAAA,CAAK,CAAA,WAAc,CAAA,MACnBA,CAAAA,CAAK,CAAA,QAAWJ,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 { createContext } from 'react';\nimport { type ContextValue, useContextProps } from 'react-aria-components';\nimport { IconStyles } from './styles';\nimport type { IconProps, IconProviderProps } from './types';\n\nexport const IconContext =\n  createContext<ContextValue<IconProps, HTMLSpanElement>>(null);\n\nfunction IconProvider({ children, ...props }: IconProviderProps) {\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,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"]}

package/dist/components/icon/styles.js

@@ -1,2 +1,2 @@
-import {tv}from'./../../lib/utils.js';var s=tv({base:["block h-[var(--icon-size,var(--icon-size-m))] w-[var(--icon-size,var(--icon-size-m))] [color:var(--icon-color,currentColor)]","size-large:[--icon-size:var(--icon-size-l)]","size-medium:[--icon-size:var(--icon-size-m)]","size-small:[--icon-size:var(--icon-size-s)]","size-xsmall:[--icon-size:var(--icon-size-xs)]"]});export{s as IconStyles};//# sourceMappingURL=styles.js.map
+import {tv}from'./../../lib/utils.js';const e=tv({base:["block h-[var(--icon-size,var(--icon-size-m))] w-[var(--icon-size,var(--icon-size-m))] flex-none [color:var(--icon-color,currentColor)]","size-large:[--icon-size:var(--icon-size-l)]","size-medium:[--icon-size:var(--icon-size-m)]","size-small:[--icon-size:var(--icon-size-s)]","size-xsmall:[--icon-size:var(--icon-size-xs)]"]});export{e as IconStyles};//# sourceMappingURL=styles.js.map
 //# sourceMappingURL=styles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/icon/styles.ts"],"names":["i"],"mappings":"sCAeE,IAAA,CAAA,CAAAA,EAAM,CACJ,qIACA,CAAA,6CACA,CAAA,8CACA,CAAA,6CACA,CAAA,+CAEH,CAAA,CAAA","file":"styles.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 { tv } from '@/lib/utils';\n\nexport const IconStyles = tv({\n  base: [\n    'block h-[var(--icon-size,var(--icon-size-m))] w-[var(--icon-size,var(--icon-size-m))] [color:var(--icon-color,currentColor)]',\n    'size-large:[--icon-size:var(--icon-size-l)]',\n    'size-medium:[--icon-size:var(--icon-size-m)]',\n    'size-small:[--icon-size:var(--icon-size-s)]',\n    'size-xsmall:[--icon-size:var(--icon-size-xs)]',\n  ],\n});\n"]}
+{"version":3,"sources":["../../../src/components/icon/styles.ts"],"names":[],"mappings":"sCAeE,MAAM,CACJ,mJACA,CAAA,6CACA,CAAA,8CACA,CAAA,6CACA,CAAA,+CAEH,CAAA,CAAA","file":"styles.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 { tv } from '@/lib/utils';\n\nexport const IconStyles = tv({\n  base: [\n    'block h-[var(--icon-size,var(--icon-size-m))] w-[var(--icon-size,var(--icon-size-m))] flex-none [color:var(--icon-color,currentColor)]',\n    'size-large:[--icon-size:var(--icon-size-l)]',\n    'size-medium:[--icon-size:var(--icon-size-m)]',\n    'size-small:[--icon-size:var(--icon-size-s)]',\n    'size-xsmall:[--icon-size:var(--icon-size-xs)]',\n  ],\n});\n"]}

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

@@ -1,8 +1,7 @@
-import { PropsWithChildren, RefAttributes, HTMLAttributes } from 'react';
+import { ComponentPropsWithRef } from 'react';
 
-type IconProps = PropsWithChildren<RefAttributes<HTMLSpanElement> & HTMLAttributes<HTMLSpanElement> & {
+type IconProps = ComponentPropsWithRef<'span'> & {
     size?: 'large' | 'medium' | 'small' | 'xsmall';
-}>;
-type IconProviderProps = PropsWithChildren<IconProps>;
+};
 
-export type { IconProps, IconProviderProps };
+export type { IconProps };

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

@@ -5,6 +5,7 @@ import { InputProps } from './types.js';
 import 'tailwind-variants';
 import '../button/types.js';
 import '../button/styles.js';
+import 'tailwind-merge';
 import './styles.js';
 
 declare const InputContext: react.Context<ContextValue<InputProps, HTMLInputElement>>;

package/dist/components/input/index.js

@@ -1,2 +1,2 @@
-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';import {jsxs,jsx}from'react/jsx-runtime';var {container:w,sizer:B,input:F,clear:K}=InputStyles(),v={target:{value:""}},k=createContext(null);function R({ref:n,...p}){let[i]=useContextProps({},n??null,InputContext);[p,n]=useContextProps({...p},n??null,k);let{classNames:r,autoSize:s,defaultValue:P=i.defaultValue??"",disabled:d,placeholder:c,readOnly:I,required:y,size:g,type:a=InputStylesDefaults.type,value:x=i.value,isClearable:t,isInvalid:E,onChange:C,onKeyDown:N,...b}=p,[u,z]=useControlledState(x,P,C),A=(`${u??""}`.length||c?.length)??0,l=u==null||u==="";function m(e){i.onChange?.(e),C?.(e),e.defaultPrevented||z(e.target.value);}return jsxs("div",{className:w({className:r?.container,autoSize:s,type:a,isClearable:t,isEmpty:l}),"data-disabled":d||null,"data-invalid":E||null,"data-length":A,"data-placeholder":!!c&&l||null,"data-readonly":I||null,"data-required":y||null,"data-size":g,children:[jsx("div",{className:B({className:r?.sizer,autoSize:s,type:a,isClearable:t,isEmpty:l}),children:jsx(Input,{...b,ref:n,className:composeRenderProps(r?.input,e=>F({className:e,autoSize:s,type:a,isClearable:t,isEmpty:l})),disabled:d,placeholder:c,readOnly:I,required:y,type:a,value:u,onChange:m,onKeyDown:e=>{N?.(e),t&&!e.defaultPrevented&&e.key==="Escape"&&m(v);}})}),t&&jsx(Button,{className:composeRenderProps(r?.clear,e=>K({className:e,autoSize:s,type:a,isClearable:t,isEmpty:l})),excludeFromTabOrder:true,size:"small",variant:"icon",isDisabled:d,onPress:()=>{m(v),n?.current?.focus();},children:jsx(Icon,{children:jsx(CancelFill,{})})})]})}R.displayName="Input";export{R 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:r,autoSize:s,defaultValue:h="",disabled:p,placeholder:d,readOnly:m,required:I,size:f,type:l=InputStylesDefaults.type,value:g,isClearable:n,isInvalid:x,onChange:E,onKeyDown:P,...N}=a,[i,b]=useControlledState(g,h),z=(`${i??""}`.length||d?.length)??0,o=i==null||i==="";function c(e){E?.(e),e.defaultPrevented||b(e.target.value);}return jsxs("div",{className:w({className:r?.container,autoSize:s,type:l,isClearable:n,isEmpty:o}),"data-disabled":p||null,"data-invalid":x||null,"data-length":z,"data-placeholder":!!d&&o||null,"data-readonly":m||null,"data-required":I||null,"data-size":f,children:[jsx("div",{className:A({className:r?.sizer,autoSize:s,type:l,isClearable:n,isEmpty:o}),children:jsx(Input,{...N,ref:t,className:composeRenderProps(r?.input,e=>B({className:e,autoSize:s,type:l,isClearable:n,isEmpty:o})),disabled:p,placeholder:d,readOnly:m,required:I,type:l,value:i,onChange:c,onKeyDown:e=>{P?.(e),n&&!e.defaultPrevented&&e.key==="Escape"&&c(v);}})}),n&&jsx(Button,{className:composeRenderProps(r?.clear,e=>F({className:e,autoSize:s,type:l,isClearable:n,isEmpty:o})),excludeFromTabOrder:true,size:"small",variant:"icon",isDisabled:p,onPress:()=>{c(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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/input/index.tsx"],"names":["InputStyles","q","clearInputEvent","InputContext","createContext","D","props","useContextProps","h","ref","L","contextProps","InputStylesDefaults","O","rest","value","setValue","useControlledState","valueProp","defaultValue","onChange","length","placeholder","event","classNames","disabled","isInvalid","isEmpty","readOnly","required","jsx","o","AriaInput","H","className","input","onKeyDown","isClearable","handleChange","Button","M","clear","Icon","S","CancelFill","Input"],"mappings":"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","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 { CancelFill } from '@accelint/icons';\nimport { useControlledState } from '@react-stately/utils';\nimport { type ChangeEvent, createContext } from 'react';\nimport {\n  Input as AriaInput,\n  InputContext as AriaInputContext,\n  type InputProps as AriaInputProps,\n  type ContextValue,\n  composeRenderProps,\n  useContextProps,\n} from 'react-aria-components';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { InputStyles, InputStylesDefaults } from './styles';\nimport type { InputProps } from './types';\n\nconst { container, sizer, input, clear } = InputStyles();\n\n// TODO: Improve this implementation so it is more of a realistic event\nconst clearInputEvent = {\n  target: { value: '' },\n} as ChangeEvent<HTMLInputElement>;\n\nexport const InputContext =\n  createContext<ContextValue<InputProps, HTMLInputElement>>(null);\n\nexport function Input({ ref, ...props }: InputProps) {\n  /**\n   * It is necessary to pull in the AriaInputContext to capture defaultValue,\n   * value & onChange props that may be supplied by a Field component\n   *\n   * These are necessary due to the implementation of useControlledState for\n   * the purposes of supporting the clear button and to capture the length\n   * of the current value for the autoSize feature\n   */\n  const [contextProps] = useContextProps<\n    AriaInputProps,\n    AriaInputProps,\n    HTMLInputElement\n  >({}, ref ?? null, AriaInputContext);\n  [props, ref] = useContextProps({ ...props }, ref ?? null, InputContext);\n\n  const {\n    classNames,\n    autoSize,\n    defaultValue = contextProps.defaultValue ?? '',\n    disabled,\n    placeholder,\n    readOnly,\n    required,\n    size,\n    type = InputStylesDefaults.type,\n    value: valueProp = contextProps.value,\n    isClearable,\n    isInvalid,\n    onChange,\n    onKeyDown,\n    ...rest\n  } = props;\n\n  const [value, setValue] = useControlledState(\n    valueProp,\n    defaultValue,\n    onChange,\n  );\n  const length = (`${value ?? ''}`.length || placeholder?.length) ?? 0;\n  const isEmpty = value == null || value === '';\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    contextProps.onChange?.(event);\n    onChange?.(event);\n\n    if (!event.defaultPrevented) {\n      setValue(event.target.value);\n    }\n  }\n\n  return (\n    <div\n      className={container({\n        className: classNames?.container,\n        autoSize,\n        type,\n        isClearable,\n        isEmpty,\n      })}\n      data-disabled={disabled || null}\n      data-invalid={isInvalid || null}\n      data-length={length}\n      data-placeholder={(!!placeholder && isEmpty) || null}\n      data-readonly={readOnly || null}\n      data-required={required || null}\n      data-size={size}\n    >\n      <div\n        className={sizer({\n          className: classNames?.sizer,\n          autoSize,\n          type,\n          isClearable,\n          isEmpty,\n        })}\n      >\n        <AriaInput\n          {...rest}\n          ref={ref}\n          className={composeRenderProps(classNames?.input, (className) =>\n            input({ className, autoSize, type, isClearable, isEmpty }),\n          )}\n          disabled={disabled}\n          placeholder={placeholder}\n          readOnly={readOnly}\n          required={required}\n          type={type}\n          value={value}\n          onChange={handleChange}\n          onKeyDown={(event) => {\n            onKeyDown?.(event);\n\n            if (\n              isClearable &&\n              !event.defaultPrevented &&\n              event.key === 'Escape'\n            ) {\n              handleChange(clearInputEvent);\n            }\n          }}\n        />\n      </div>\n      {isClearable && (\n        <Button\n          className={composeRenderProps(classNames?.clear, (className) =>\n            clear({ className, autoSize, type, isClearable, isEmpty }),\n          )}\n          excludeFromTabOrder\n          size='small'\n          variant='icon'\n          isDisabled={disabled}\n          onPress={() => {\n            handleChange(clearInputEvent);\n\n            ref?.current?.focus();\n          }}\n        >\n          <Icon>\n            <CancelFill />\n          </Icon>\n        </Button>\n      )}\n    </div>\n  );\n}\nInput.displayName = 'Input';\n"]}
+{"version":3,"sources":["../../../src/components/input/index.tsx"],"names":["clear","clearInputEvent","M","InputContext","createContext","Input","ref","props","useContextProps","C","q","autoSize","defaultValue","placeholder","readOnly","required","type","valueProp","isInvalid","onChange","onKeyDown","value","setValue","length","isEmpty","handleChange","event","jsxs","R","classNames","jsx","u","AriaInput","composeRenderProps","className","input","y","disabled","isClearable","D"],"mappings":"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","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 { CancelFill } from '@accelint/icons';\nimport { useControlledState } from '@react-stately/utils';\nimport { type ChangeEvent, createContext } from 'react';\nimport {\n  Input as AriaInput,\n  InputContext as AriaInputContext,\n  type ContextValue,\n  composeRenderProps,\n  useContextProps,\n} from 'react-aria-components';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { InputStyles, InputStylesDefaults } from './styles';\nimport type { InputProps } from './types';\n\nconst { container, sizer, input, clear } = InputStyles();\n\n// TODO: Improve this implementation so it is more of a realistic event\nconst clearInputEvent = {\n  target: { value: '' },\n} as ChangeEvent<HTMLInputElement>;\n\nexport const InputContext =\n  createContext<ContextValue<InputProps, HTMLInputElement>>(null);\n\nexport function Input({ ref, ...props }: InputProps) {\n  /**\n   * It is necessary to pull in the AriaInputContext to capture defaultValue,\n   * value & onChange props that may be supplied by a Field component\n   *\n   * These are necessary due to the implementation of useControlledState for\n   * the purposes of supporting the clear button and to capture the length\n   * of the current value for the autoSize feature\n   */\n  [props, ref] = useContextProps(props, ref ?? null, AriaInputContext);\n  [props, ref] = useContextProps({ ...props }, ref ?? null, InputContext);\n\n  const {\n    classNames,\n    autoSize,\n    defaultValue = '',\n    disabled,\n    placeholder,\n    readOnly,\n    required,\n    size,\n    type = InputStylesDefaults.type,\n    value: valueProp,\n    isClearable,\n    isInvalid,\n    onChange,\n    onKeyDown,\n    ...rest\n  } = props;\n\n  const [value, setValue] = useControlledState(valueProp, defaultValue);\n  const length = (`${value ?? ''}`.length || placeholder?.length) ?? 0;\n  const isEmpty = value == null || value === '';\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    onChange?.(event);\n\n    if (!event.defaultPrevented) {\n      setValue(event.target.value);\n    }\n  }\n\n  return (\n    <div\n      className={container({\n        className: classNames?.container,\n        autoSize,\n        type,\n        isClearable,\n        isEmpty,\n      })}\n      data-disabled={disabled || null}\n      data-invalid={isInvalid || null}\n      data-length={length}\n      data-placeholder={(!!placeholder && isEmpty) || null}\n      data-readonly={readOnly || null}\n      data-required={required || null}\n      data-size={size}\n    >\n      <div\n        className={sizer({\n          className: classNames?.sizer,\n          autoSize,\n          type,\n          isClearable,\n          isEmpty,\n        })}\n      >\n        <AriaInput\n          {...rest}\n          ref={ref}\n          className={composeRenderProps(classNames?.input, (className) =>\n            input({ className, autoSize, type, isClearable, isEmpty }),\n          )}\n          disabled={disabled}\n          placeholder={placeholder}\n          readOnly={readOnly}\n          required={required}\n          type={type}\n          value={value}\n          onChange={handleChange}\n          onKeyDown={(event) => {\n            onKeyDown?.(event);\n\n            if (\n              isClearable &&\n              !event.defaultPrevented &&\n              event.key === 'Escape'\n            ) {\n              handleChange(clearInputEvent);\n            }\n          }}\n        />\n      </div>\n      {isClearable && (\n        <Button\n          className={composeRenderProps(classNames?.clear, (className) =>\n            clear({ className, autoSize, type, isClearable, isEmpty }),\n          )}\n          excludeFromTabOrder\n          size='small'\n          variant='icon'\n          isDisabled={disabled}\n          onPress={() => {\n            handleChange(clearInputEvent);\n\n            ref?.current?.focus();\n          }}\n        >\n          <Icon>\n            <CancelFill />\n          </Icon>\n        </Button>\n      )}\n    </div>\n  );\n}\nInput.displayName = 'Input';\n"]}

package/dist/components/input/styles.js

@@ -1,2 +1,2 @@
-import {tv}from'./../../lib/utils.js';var t={type:"text"},i=tv({slots:{container:"group/input grid items-center [--length:attr(data-length_type(<number>),0)] [grid-template-columns:minmax(0,1fr)_min-content]",sizer:["[grid-column:1/-1] [grid-row:1]","font-display group-size-medium/input:text-body-s group-size-small/input:text-body-xs"],input:["block w-full rounded-medium py-xs pr-[calc(var(--room)+var(--spacing-s))] pl-s font-display text-default-light outline outline-interactive","enabled:group-focus/input:outline-highlight","enabled:group-hover/input:outline-interactive-hover","enabled:group-invalid/input:outline-serious","disabled:cursor-not-allowed disabled:text-disabled disabled:outline-interactive-disabled disabled:placeholder:text-disabled"],clear:["[grid-column:2/-1] [grid-row:1]","group-size-medium/input:mr-xs group-size-small/input:mr-xxs","enabled:fg-interactive enabled:bg-transparent","enabled:focus:fg-interactive-hover enabled:focus:bg-transparent","enabled:hover:fg-interactive-hover enabled:hover:bg-transparent"]},variants:{autoSize:{false:"",true:""},type:{button:"",checkbox:"",color:"",date:"","datetime-local":"",email:"",file:"",hidden:"",image:"",month:"",number:{input:"[appearance:textfield] placeholder:text-default-dark [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"},password:"",radio:"",range:"",reset:"",search:"",submit:"",tel:"",text:"",time:"",url:"",week:""},isClearable:{false:{container:"[--room:0px]"},true:{container:"[--room:20px]"}},isEmpty:{false:{clear:"group-not-focus-within/input:hidden"},true:{clear:"hidden"}}},compoundVariants:[{type:["color","date","datetime-local","email","number","password","search","tel","text","time","url"],className:{sizer:["group-size-medium/input:min-w-[160px] group-size-medium/input:max-w-[400px]","group-size-medium/input:min-w-[80px] group-size-small/input:max-w-[200px]"]}},{autoSize:true,type:["number","text"],className:{sizer:["group-size-medium/input:w-[calc((var(--length)*1ch)+((var(--length)-1)*var(--typography-body-s-spacing))+(var(--spacing-s)*2)+var(--room))]","group-size-small/input:w-[calc((var(--length)*1ch)+((var(--length)-1)*var(--typography-body-xs-spacing))+(var(--spacing-s)*2)+var(--room))] group-size-small/input:min-w-[calc(2ch+((var(--length)-1)*var(--typography-body-xs-spacing))+(var(--spacing-s)*2)+var(--room))]"]}}],defaultVariants:t});export{i as InputStyles,t as InputStylesDefaults};//# sourceMappingURL=styles.js.map
+import {tv}from'./../../lib/utils.js';const t={type:"text"},i=tv({slots:{container:"group/input grid items-center [--length:attr(data-length_type(<number>),0)] [grid-template-columns:minmax(0,1fr)_min-content]",sizer:["[grid-column:1/-1] [grid-row:1]","font-display group-size-medium/input:text-body-s group-size-small/input:text-body-xs"],input:["block w-full rounded-medium py-xs pr-[calc(var(--room)+var(--spacing-s))] pl-s font-display text-default-light outline outline-interactive","enabled:group-focus/input:outline-highlight","enabled:group-hover/input:outline-interactive-hover","enabled:group-invalid/input:outline-serious","disabled:cursor-not-allowed disabled:text-disabled disabled:outline-interactive-disabled disabled:placeholder:text-disabled"],clear:["[grid-column:2/-1] [grid-row:1]","group-size-medium/input:mr-xs group-size-small/input:mr-xxs","enabled:fg-interactive enabled:bg-transparent","enabled:focus:fg-interactive-hover enabled:focus:bg-transparent","enabled:hover:fg-interactive-hover enabled:hover:bg-transparent"]},variants:{autoSize:{false:"",true:""},type:{button:"",checkbox:"",color:"",date:"","datetime-local":"",email:"",file:"",hidden:"",image:"",month:"",number:{input:"[appearance:textfield] placeholder:text-default-dark [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"},password:"",radio:"",range:"",reset:"",search:"",submit:"",tel:"",text:"",time:"",url:"",week:""},isClearable:{false:{container:"[--room:0px]"},true:{container:"[--room:20px]"}},isEmpty:{false:{clear:"group-not-focus-within/input:hidden"},true:{clear:"hidden"}}},compoundVariants:[{type:["color","date","datetime-local","email","number","password","search","tel","text","time","url"],className:{sizer:["group-size-medium/input:min-w-[160px] group-size-medium/input:max-w-[400px]","group-size-medium/input:min-w-[80px] group-size-small/input:max-w-[200px]"]}},{autoSize:true,type:["number","text"],className:{sizer:["group-size-medium/input:w-[calc((var(--length)*1ch)+((var(--length)-1)*var(--typography-body-s-spacing))+(var(--spacing-s)*2)+var(--room))]","group-size-small/input:w-[calc((var(--length)*1ch)+((var(--length)-1)*var(--typography-body-xs-spacing))+(var(--spacing-s)*2)+var(--room))] group-size-small/input:min-w-[calc(2ch+((var(--length)-1)*var(--typography-body-xs-spacing))+(var(--spacing-s)*2)+var(--room))]"]}}],defaultVariants:t});export{i as InputStyles,t as InputStylesDefaults};//# sourceMappingURL=styles.js.map
 //# sourceMappingURL=styles.js.map