@accelint/design-toolkit 7.0.1 → 8.1.0

package/dist/components/flashcard/styles.module.css

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@reference '../../index.module.css';
+
+@layer components.l1 {
+  .container {
+    @apply rounded-medium font-display outline-interactive-hover outline;
+
+    min-width: 128px;
+  }
+
+  .hero {
+    @apply mb-s bg-surface-muted p-s flex flex-col;
+  }
+
+  .header {
+    @apply fg-primary-bold text-body-m;
+  }
+
+  .subheader {
+    @apply fg-primary-muted text-body-xs;
+  }
+
+  .data {
+    @apply fg-primary-muted px-s text-body-xs;
+  }
+
+  .details-list {
+    @apply p-s pb-s text-body-xs;
+  }
+
+  .details-label {
+    @apply fg-primary-muted nth-of-type-[n+6]:hidden;
+  }
+  .details-value {
+    @apply fg-primary-bold nth-of-type-[n+6]:hidden;
+  }
+
+  .skeleton {
+    @apply min-h-[8px] py-0;
+  }
+
+  .half {
+    @apply max-w-1/2;
+  }
+
+  .smaller {
+    @apply my-xxs;
+  }
+}

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

@@ -0,0 +1,13 @@
+import { PropsWithChildren, ComponentPropsWithRef } from 'react';
+import { DetailsListProps } from '../details-list/types.js';
+import 'react-aria-components';
+
+type FlashcardComponentProps = PropsWithChildren & ComponentPropsWithRef<'div'>;
+type FlashcardProps = FlashcardComponentProps & {
+    isLoading?: boolean;
+    header: string;
+    subheader: string;
+};
+type FlashcardDetailsListProps = FlashcardComponentProps & Partial<DetailsListProps>;
+
+export type { FlashcardComponentProps, FlashcardDetailsListProps, FlashcardProps };

package/dist/components/hero/index.js

@@ -1,4 +1,4 @@
 'use client';
 
-import {jsx}from'react/jsx-runtime';import'client-only';import {useContextProps,Provider,HeadingContext,TextContext,Header}from'react-aria-components';import {IconContext}from'../icon/context.js';import {HeroContext}from'./context.js';import {HeroStyles}from'./styles.js';const{hero:H,icon:x,title:f,subtitle:C}=HeroStyles();function b({ref:t,...o}){[o,t]=useContextProps(o,t??null,HeroContext);const{children:r,classNames:e,compact:a,...l}=o;return jsx(Provider,{values:[[IconContext,{className:x({className:e?.icon}),size:"large"}],[HeadingContext,{className:f({className:e?.title}),level:2}],[TextContext,{className:C({className:e?.subtitle})}]],children:jsx(Header,{...l,ref:t,className:H({className:e?.hero}),"data-layout":a?"grid":"stack",children:r})})}export{b as Hero};//# sourceMappingURL=index.js.map
+import {jsx}from'react/jsx-runtime';import'client-only';import {clsx}from'@accelint/design-foundation/lib/utils';import {useContextProps,Provider,HeadingContext,TextContext,Header}from'react-aria-components';import {IconContext}from'../icon/context.js';import {HeroContext}from'./context.js';import t from'./styles.module.css';function v({ref:r,...s}){[s,r]=useContextProps(s,r??null,HeroContext);const{children:l,classNames:e,compact:a,...m}=s;return jsx(Provider,{values:[[IconContext,{className:clsx(t.icon,e?.icon),size:"large"}],[HeadingContext,{className:clsx(t.title,e?.title),level:2}],[TextContext,{className:clsx(t.subtitle,e?.subtitle)}]],children:jsx(Header,{...m,ref:r,className:clsx("group/hero",t.hero,e?.hero),"data-layout":a?"grid":"stack",children:l})})}export{v as Hero};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/hero/index.tsx"],"names":["hero","icon","subtitle","HeroStyles","Hero","props","ref","HeroContext","d","classNames","compact","jsx","Provider","s","IconContext","N","HeadingContext","title","TextContext","n","Header"],"mappings":"gRA0BQA,MAAMC,IAAM,CAAA,CAAA,CAAA,IAAO,CAAA,CAAA,CAAA,KAAAC,CAAS,CAAA,CAAIC,sBAgCxBC,EAAK,CAAE,SAAQC,CAAM,CAAA,CAAc,GAChDA,CAAOC,CAAG,CAAA,GAAoBD,CAAAA,CAAOC,CAAAA,CAAAA,CAAO,CAAA,CAAA,CAAA,CAAA,CAAMC,eAAW,EAE9D,CAAA,CAAA,EAAA,IAAQ,CAAAC,WAAA,CAAA,CAAA,KAAU,WAAAC,CAAAA,UAAYC,CAAS,CAAA,CAAA,OAEvC,CAAA,CAAA,CAAA,GACEC,CAAAA,CAACC,CAAAA,CAAA,CACC,OAAQC,GACN,CACEC,QAAAA,CACA,CAAE,MAAA,CAAA,CAAA,CAAAC,WAAWd,CAAAA,CAAK,SAAE,CAAA,CAAWQ,CAAAA,CAAAA,SAAqB,CAAA,CAAA,EAAM,IAAA,CAAA,CAAA,CAAQ,IAGlEO,CAAAA,yBACaC,CAAAA,CAAM,SAAE,CAAA,CAAWR,CAAAA,CAAAA,SAAsB,CAAA,CAAA,EAAA,KACxD,CACA,CACES,CAAAA,KACE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAAC,WAAWjB,CAAAA,CAAS,SAAE,CAAA,CAAWO,WAAqB,CAAC,CAAE,EAE/D,QAEA,CAAA,CAAA,CAAAE,CAAAA,CAACS,CAAAA,QAEC,CAAAP,GAAA,CAAKP,MAAAA,CACL,CAAA,GAAA,CAAA,CAAA,GAAA,CAAWN,CAAAA,CAAK,SAAE,CAAA,CAAWS,WAC7B,CAAA,CAAA,EAAA,IAAA,CAAA,CAAA,CAAA,aAAgC,CAAA,CAAA,CAAA,MAE/B,CAAA,OACH,SAGN,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA","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 {\n  Header,\n  HeadingContext,\n  Provider,\n  TextContext,\n  useContextProps,\n} from 'react-aria-components';\nimport { IconContext } from '../icon/context';\nimport { HeroContext } from './context';\nimport { HeroStyles } from './styles';\nimport type { HeroProps } from './types';\n\nconst { hero, icon, title, subtitle } = HeroStyles();\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 *   <HeroTitle>Primary Title</HeroTitle>\n *   <HeroSubtitle>Secondary information</HeroSubtitle>\n * </Hero>\n *\n * // Grid layout for compact display\n * <Hero compact>\n *   <Icon><Settings /></Icon>\n *   <HeroTitle>Settings</HeroTitle>\n *   <HeroSubtitle>Configure your preferences</HeroSubtitle>\n * </Hero>\n * ```\n *\n * ## Child Component Behavior\n * - **Icon**: Only one allowed\n * - **HeroTitle**: Only one allowed\n * - **HeroSubtitle**: 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  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}\n"]}
+{"version":3,"sources":["../../../src/components/hero/index.tsx"],"names":["Hero","props","useContextProps","ref","d","HeroContext","H","children","compact","jsx","Provider","i","p","IconContext","x","classNames","n","o","u","rest","c"],"mappings":"uUAyDgBA,SAAY,CAAA,CAAA,CAAGC,GAAoB,CACjD,CAACA,CAAAA,GAAU,CAAIC,CAAAA,CAAgBD,CAAAA,CAAOE,GAAO,CAAA,CAAAC,eAAA,CAAA,CAAMC,CAAW,CAAA,EAE9D,IAAM,CAAEC,WAAA,CAAA,CAAA,KAAA,CAAAC,QAAU,CAAA,CAAA,CAAA,UAAY,CAAA,CAAAC,CAAAA,OAAqBP,CAAAA,CAEnD,CAAA,GAAA,CAAA,CAAA,CACEQ,EAACC,OACCC,GAAA,CAAAC,QAAQ,CACN,CACEC,MACE,CAAA,CAAA,CAAAC,WAAA,CAAA,CAAA,SAAuB,CAAMC,IAAAA,CAAAA,CAAY,CAAA,IAAI,CAAG,CAAA,EAAA,IAAM,CAAA,CAAA,IAC1D,CAAA,OAGI,CAAA,CAAA,CAAA,CAAAC,cAAA,CAAA,CAAA,SAAuB,CAAAC,IAAOF,CAAAA,CAAAA,CAAY,KAAK,CAAA,CAAG,EAAA,KAAS,CAC/D,CAAA,KAGI,CAAA,CAAA,CAAA,CAAA,CAAA,CAAAG,WAAA,CAAA,CAAA,SAAuB,CAAAD,IAAA,CAAA,CAAA,CAAUF,QAAY,CAAA,CAAA,EAAU,QAI7D,CAAA,CAAA,CAAA,CAAA,CAAAN,QACMU,IACJ,CAAAC,MAAA,CAAA,CAAKjB,GACL,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,SAAgB,CAAAc,IAAA,CAAA,YAA2BF,CAAAA,CAAY,CAAA,IAAI,CAC3D,CAAA,EAAA,IAAA,CAAA,CAAA,aAAuB,CAAS,CAAA,CAAA,MAE/B,CAAA,OAAA,CAAAR,QAIT,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA","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 { clsx } from '@accelint/design-foundation/lib/utils';\nimport {\n  Header,\n  HeadingContext,\n  Provider,\n  TextContext,\n  useContextProps,\n} from 'react-aria-components';\nimport { IconContext } from '../icon/context';\nimport { HeroContext } from './context';\nimport styles from './styles.module.css';\nimport type { HeroProps } from './types';\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 *   <HeroTitle>Primary Title</HeroTitle>\n *   <HeroSubtitle>Secondary information</HeroSubtitle>\n * </Hero>\n *\n * // Grid layout for compact display\n * <Hero compact>\n *   <Icon><Settings /></Icon>\n *   <HeroTitle>Settings</HeroTitle>\n *   <HeroSubtitle>Configure your preferences</HeroSubtitle>\n * </Hero>\n * ```\n *\n * ## Child Component Behavior\n * - **Icon**: Only one allowed\n * - **HeroTitle**: Only one allowed\n * - **HeroSubtitle**: 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  return (\n    <Provider\n      values={[\n        [\n          IconContext,\n          { className: clsx(styles.icon, classNames?.icon), size: 'large' },\n        ],\n        [\n          HeadingContext,\n          { className: clsx(styles.title, classNames?.title), level: 2 },\n        ],\n        [\n          TextContext,\n          { className: clsx(styles.subtitle, classNames?.subtitle) },\n        ],\n      ]}\n    >\n      <Header\n        {...rest}\n        ref={ref}\n        className={clsx('group/hero', styles.hero, classNames?.hero)}\n        data-layout={compact ? 'grid' : 'stack'}\n      >\n        {children}\n      </Header>\n    </Provider>\n  );\n}\n"]}

package/dist/components/hero/styles.module.css

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@reference '../../index.module.css';
+
+@layer components.l1 {
+  .hero {
+    @apply relative flex flex-col;
+
+    @variant layout-grid {
+      @apply pl-xxl;
+    }
+
+    @variant layout-stack {
+      @apply rounded-large bg-interactive-disabled px-l py-xl;
+    }
+  }
+
+  .title {
+    @apply fg-primary-bold mb-xs font-display text-header-l -order-2;
+  }
+
+  .subtitle {
+    @apply fg-primary-muted font-display text-body-s -order-1 block;
+  }
+}
+
+@layer components.l2 {
+  .icon {
+    @apply fg-primary-muted -order-3;
+
+    @variant group-layout-grid/hero {
+      @apply top-xxs left-xs absolute;
+    }
+
+    @variant group-layout-stack/hero {
+      @apply mb-l;
+      width: 48px;
+      height: 48px;
+    }
+  }
+}

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

@@ -3,8 +3,6 @@ import * as react from 'react';
 import { ProviderProps } from '../../lib/types.js';
 import { ContextValue } from 'react-aria-components';
 import { HotkeyProps } from './types.js';
-import 'tailwind-variants';
-import './styles.js';
 
 declare const HotkeyContext: react.Context<ContextValue<HotkeyProps, HTMLElement>>;
 declare function HotkeyProvider({ children, ...props }: ProviderProps<HotkeyProps>): react_jsx_runtime.JSX.Element;

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

@@ -1,8 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { HotkeyProps } from './types.js';
 import 'react';
-import 'tailwind-variants';
-import './styles.js';
 
 /**
  * Hotkey - A visual representation of keyboard shortcuts and key combinations

package/dist/components/hotkey/index.js

@@ -1,4 +1,4 @@
 'use client';
 
-import {jsx}from'react/jsx-runtime';import'client-only';import {useContextProps,Keyboard}from'react-aria-components';import {HotkeyContext}from'./context.js';import {HotkeyStyles,HotkeyStylesDefaults}from'./styles.js';const{key:l}=HotkeyStyles();function u({ref:o,children:e,...t}){[t,o]=useContextProps(t,o??null,HotkeyContext);const{className:r,variant:y=HotkeyStylesDefaults.variant}=t;return jsx(Keyboard,{ref:o,...t,className:l({className:r,variant:y}),children:e})}export{u as Hotkey};//# sourceMappingURL=index.js.map
+import {jsx}from'react/jsx-runtime';import'client-only';import {clsx}from'@accelint/design-foundation/lib/utils';import {useContextProps,Keyboard}from'react-aria-components';import {HotkeyContext}from'./context.js';import e from'./styles.module.css';function x({ref:o,children:r,...t}){[t,o]=useContextProps(t,o??null,HotkeyContext);const{className:m,variant:s="outline",...y}=t;return jsx(Keyboard,{...y,ref:o,className:clsx(e.key,e[s],m),children:r})}export{x as Hotkey};//# 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","n","ref","props","useContextProps","HotkeyContext","m","variant","jsx","k"],"mappings":"0NAoBQ,KAAQA,IAiCT,CAAA,CAAA,CAAA,CAAAC,YAAA,EAAA,CAAA,SAAkBC,CAAK,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,QAAmB,CAAgB,CAC/D,CAACC,GAAU,CAAA,CAAIC,CAAAA,CAAgBD,CAAAA,CAAOD,CAAAA,CAAAA,CAAO,mBAAMG,CAAa,EAChE,IAAA,CAAMC,aAAE,iBAAW,CAAA,CAAA,CAAAC,8BAAuC,CAAA,OAE1D,CAAA,CAAA,CACEC,CAAAA,OAAUC,GAAKP,CAAAA,QAAM,CAAA,CAAA,GAAU,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,SAAiB,CAAA,CAAA,CAAA,CAAA,SAAW,CAAA,CAAA,CAAAK,OACxD,CAAA,CAAA,CAAA,CAAA,CAAA,QAGP,CAAA,CAAA,CAAA,CAAA","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 { Keyboard, useContextProps } from 'react-aria-components';\nimport { HotkeyContext } from './context';\nimport { HotkeyStyles, HotkeyStylesDefaults } from './styles';\nimport type { HotkeyProps } from './types';\n\nconst { key } = HotkeyStyles();\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 * <HotkeySet>\n *   <Hotkey variant=\"outline\">Cmd</Hotkey>\n *   <span>+</span>\n *   <Hotkey variant=\"outline\">K</Hotkey>\n * </HotkeySet>\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 * <HotkeySet>\n *   <Hotkey variant=\"icon\">⌘</Hotkey>\n *   <Hotkey>Space</Hotkey>\n * </HotkeySet>\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}\n"]}
+{"version":3,"sources":["../../../src/components/hotkey/index.tsx"],"names":["ref","props","useContextProps","HotkeyContext","a","n","rest","i","styles","className"],"mappings":"0PAoDO,SAAkB,CAAA,CAAAA,CAAAA,GAAK,CAAA,CAAA,CAAA,SAAaC,CAAM,CAAA,GAC9CA,EAAOD,CAAG,CAAA,CAAIE,CAAAA,CAAgBD,CAAAA,CAAOD,CAAAA,eAAAA,CAAO,CAAA,CAAA,CAAA,EAAMG,oBAE7C,KAAE,CAAA,SAAW,CAAA,CAAA,CAAA,OAAU,CAAA,CAAA,CAAA,SAAmB,CAAA,GAEhD,CAAA,CAAA,CAAA,CAAA,CAAA,OAEKC,GAAA,CAAAC,QAAGC,CAAAA,CACJ,GAAA,CAAKN,CAAAA,eACkB,CAAAO,IAAA,CAAA,CAAKC,CAAAA,GAAc,CAAGC,CAAS,CAAA,CAErD,CAAA,CAAA,CAAA,CAAA,CAAA,QAGP,CAAA,CAAA,CAAA,CAAA","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 { clsx } from '@accelint/design-foundation/lib/utils';\nimport { Keyboard, useContextProps } from 'react-aria-components';\nimport { HotkeyContext } from './context';\nimport styles from './styles.module.css';\nimport type { HotkeyProps } from './types';\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 * <HotkeySet>\n *   <Hotkey variant=\"outline\">Cmd</Hotkey>\n *   <span>+</span>\n *   <Hotkey variant=\"outline\">K</Hotkey>\n * </HotkeySet>\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 * <HotkeySet>\n *   <Hotkey variant=\"icon\">⌘</Hotkey>\n *   <Hotkey>Space</Hotkey>\n * </HotkeySet>\n */\nexport function Hotkey({ ref, children, ...props }: HotkeyProps) {\n  [props, ref] = useContextProps(props, ref ?? null, HotkeyContext);\n\n  const { className, variant = 'outline', ...rest } = props;\n\n  return (\n    <Keyboard\n      {...rest}\n      ref={ref}\n      className={clsx(styles.key, styles[variant], className)}\n    >\n      {children}\n    </Keyboard>\n  );\n}\n"]}

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

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentPropsWithRef } from 'react';
+
+declare function HotkeySet({ className, ...rest }: ComponentPropsWithRef<'div'>): react_jsx_runtime.JSX.Element;
+
+export { HotkeySet };

package/dist/components/hotkey/set.js

@@ -0,0 +1,4 @@
+'use client';
+
+import {jsx}from'react/jsx-runtime';import'client-only';import {clsx}from'@accelint/design-foundation/lib/utils';import {IconProvider}from'../icon/context.js';import m from'./styles.module.css';function c({className:r,...e}){return jsx(IconProvider,{size:"large",children:jsx("div",{...e,className:clsx(m.set,r)})})}export{c as HotkeySet};//# sourceMappingURL=set.js.map
+//# sourceMappingURL=set.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/hotkey/set.tsx"],"names":["rest","o","i","className"],"mappings":"uNAsBE,CAAGA,CACL,CAAA,GACE,CAAA,CAAA,CAAA,CAAA,OACgBC,GAAA,CAAAC,YAAA,CAAA,CAAK,YACjB,CAAA,kBAASF,CAAAA,CAAM,cAAuB,OAAKG,CAAS,IACtD,CAEJ,CAAA,CAAA,CAAA,CAAA,CAAA","file":"set.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 { clsx } from '@accelint/design-foundation/lib/utils';\nimport { IconProvider } from '../icon/context';\nimport styles from './styles.module.css';\nimport type { ComponentPropsWithRef } from 'react';\n\nexport function HotkeySet({\n  className,\n  ...rest\n}: ComponentPropsWithRef<'div'>) {\n  return (\n    <IconProvider size='large'>\n      <div {...rest} className={clsx(styles.set, className)} />\n    </IconProvider>\n  );\n}\n"]}

package/dist/components/hotkey/styles.module.css

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@reference '../../index.module.css';
+
+@layer components.l1 {
+  .key {
+    @apply fg-primary-bold p-xs text-header-s font-primary w-fit min-w-xl uppercase;
+
+    &.flat {
+      @apply bg-transparent;
+    }
+
+    &.icon {
+      @apply -mx-xs bg-transparent px-0;
+    }
+
+    &.outline {
+      @apply rounded-medium bg-surface-default outline-static outline;
+      box-shadow: 0 3px var(--outline-static);
+    }
+  }
+
+  .set {
+    @apply fg-primary-muted gap-xs text-header-m flex items-center;
+  }
+}

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

@@ -1,8 +1,7 @@
-import { HTMLAttributes, RefAttributes, PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
-import { HotkeyStyles } from './styles.js';
+import { ComponentPropsWithRef } from 'react';
 
-type HotkeyProps = HTMLAttributes<HTMLElement> & VariantProps<typeof HotkeyStyles> & RefAttributes<HTMLElement>;
-type HotkeySetProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren;
+type HotkeyProps = ComponentPropsWithRef<'kbd'> & {
+    variant?: 'flat' | 'icon' | 'outline';
+};
 
-export type { HotkeyProps, HotkeySetProps };
+export type { HotkeyProps };

package/dist/components/icon/index.js

@@ -1,4 +1,4 @@
 'use client';
 
-import {jsx}from'react/jsx-runtime';import'client-only';import {useContextProps}from'react-aria-components';import {IconContext}from'./context.js';import {IconStyles}from'./styles.js';function f({ref:o,...t}){[t,o]=useContextProps(t,o??null,IconContext);const{children:n,className:e,size:s="medium",...m}=t;return jsx("span",{...m,ref:o,className:IconStyles({className:e}),"data-size":s,children:n})}export{f as Icon};//# sourceMappingURL=index.js.map
+import {jsx}from'react/jsx-runtime';import'client-only';import {clsx}from'@accelint/design-foundation/lib/utils';import {useContextProps}from'react-aria-components';import {IconContext}from'./context.js';import p from'./styles.module.css';function x({ref:o,...t}){[t,o]=useContextProps(t,o??null,IconContext);const{children:s,className:n,size:e="medium",...m}=t;return jsx("span",{...m,ref:o,className:clsx(p.icon,n),"data-size":e,children:s})}export{x as Icon};//# 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":["ref","props","useContextProps","r","IconContext","c","size","jsx","p","i"],"mappings":"wLAgDO,SAAgBA,CAAK,KAAS,CAAc,CACjD,CAACC,GAAU,CAAA,CAAIC,CAAAA,CAAgBD,EAAOD,CAAAA,CAAAA,CAAO,CAAAG,eAAA,CAAA,CAAA,CAAMC,CAAW,EAE9D,IAAA,CAAMC,WAAE,CAAA,CAAA,KAAA,CAAA,QAAU,CAAA,CAAA,CAAA,SAAWC,CAAAA,CAAO,CAAA,IAAA,CAAA,CAAA,CAAA,SAEpC,GAAA,CAAA,CAAA,CAAA,CACEC,CAAAA,OAACC,GAAA,CACE,MACD,CAAA,CAAA,GACA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,SAAwB,CAAAC,UAAA,CAAA,CAAA,SACxB,CAAA,CAAA,CAAA,CAAA,CAAA,WAEC,CAAA,CAAA,CAAA,QAGP,CAAA,CAAA,CAAA,CAAA","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 { useContextProps } from 'react-aria-components';\nimport { IconContext } from './context';\nimport { IconStyles } from './styles';\nimport type { IconProps } from './types';\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}\n"]}
+{"version":3,"sources":["../../../src/components/icon/index.tsx"],"names":["ref","props","useContextProps","IconContext","c","size","l","rest","r","className"],"mappings":"+OAiDO,WAAgBA,CAAAA,GAAK,CAAGC,CAAM,CAAA,GAClCA,CAAAA,CAAOD,CAAG,EAAIE,CAAAA,CAAgBD,CAAAA,CAAOD,CAAAA,eAAAA,CAAO,CAAA,CAAA,CAAA,EAAMG,IAEnD,CAAAC,WAAA,CAAA,CAAM,cAAY,CAAA,CAAA,CAAA,SAAW,CAAA,CAAA,CAAAC,IAAO,CAAA,CAAA,CAAA,QAAkB,IAEtD,CAAA,CAAA,CAAA,CAAA,CAAA,OACGC,GAAA,CAAA,MACKC,CAAAA,CACJ,GAAA,CAAKP,CAAAA,eACkB,CAAAQ,IAAA,CAAA,CAAA,CAAMC,IAC7B,CAAA,CAAA,CAAA,CAAA,WAEC,CAAA,CAAA,CAAA,QAGP,CAAA,CAAA,CAAA,CAAA","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 { clsx } from '@accelint/design-foundation/lib/utils';\nimport { useContextProps } from 'react-aria-components';\nimport { IconContext } from './context';\nimport styles from './styles.module.css';\nimport type { IconProps } from './types';\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={clsx(styles.icon, className)}\n      data-size={size}\n    >\n      {children}\n    </span>\n  );\n}\n"]}

package/dist/components/icon/styles.module.css

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@reference '../../index.module.css';
+
+@layer components.l1 {
+  .icon {
+    @apply block flex-none;
+    width: var(--icon-size, var(--icon-size-m));
+    height: var(--icon-size, var(--icon-size-m));
+    color: var(--icon-color, currentColor);
+
+    @variant size-large {
+      --icon-size: var(--icon-size-l);
+    }
+
+    @variant size-medium {
+      --icon-size: var(--icon-size-m);
+    }
+
+    @variant size-small {
+      --icon-size: var(--icon-size-s);
+    }
+
+    @variant size-xsmall {
+      --icon-size: var(--icon-size-xs);
+    }
+  }
+}

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

@@ -1,12 +1,8 @@
 import * as react from 'react';
 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>>;
 

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

@@ -2,12 +2,8 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { InputProps } from './types.js';
 import 'react';
 import 'react-aria-components';
-import 'tailwind-variants';
 import '../button/types.js';
 import '../../lib/types.js';
-import '../button/styles.js';
-import 'tailwind-merge';
-import './styles.js';
 
 /**
  * Input - A flexible text input component with enhanced features

package/dist/components/input/index.js

@@ -1,4 +1,4 @@
 'use client';
 
-import {jsxs,jsx}from'react/jsx-runtime';import {CancelFill}from'@accelint/icons';import {useControlledState}from'@react-stately/utils';import'client-only';import {useContextProps,InputContext,Input,composeRenderProps}from'react-aria-components';import {Button}from'../button/index.js';import {Icon}from'../icon/index.js';import {InputContext as InputContext$1}from'./context.js';import {InputStyles,InputStylesDefaults}from'./styles.js';const{container:H,sizer:K,input:L,clear:M}=InputStyles(),f={target:{value:""}};function X({ref:t,...n}){[n,t]=useContextProps(n,t??null,InputContext),[n,t]=useContextProps({...n},t??null,InputContext$1);const{classNames:r,autoSize:s,defaultValue:h="",disabled:i,placeholder:d,readOnly:m,required:c,size:C="medium",type:l=InputStylesDefaults.type,value:g,isClearable:a,isInvalid:E,onChange:P,onKeyDown:N,...b}=n,[u,z]=useControlledState(g,h),x=(`${u??""}`.length||d?.length)??0,y=u==null||u==="";function p(e){P?.(e),e.defaultPrevented||z(e.target.value);}return jsxs("div",{className:H({className:r?.container,autoSize:s,type:l,isClearable:a}),"data-disabled":i||null,"data-empty":y||null,"data-invalid":E||null,"data-length":x,"data-placeholder":!!d&&y||null,"data-readonly":m||null,"data-required":c||null,"data-size":C,children:[jsx("div",{className:K({className:r?.sizer,autoSize:s,type:l,isClearable:a}),children:jsx(Input,{...b,ref:t,className:composeRenderProps(r?.input,e=>L({className:e,autoSize:s,type:l,isClearable:a})),disabled:i,placeholder:d,readOnly:m,required:c,type:l,value:u,onChange:p,onKeyDown:e=>{N?.(e),a&&!e.defaultPrevented&&e.key==="Escape"&&p(f);}})}),a&&jsx(Button,{className:composeRenderProps(r?.clear,e=>M({className:e,autoSize:s,type:l,isClearable:a})),excludeFromTabOrder:true,size:"small",variant:"icon",isDisabled:i,onPress:()=>{p(f),t?.current?.focus();},children:jsx(Icon,{children:jsx(CancelFill,{})})})]})}export{X as Input};//# sourceMappingURL=index.js.map
+import {jsx,jsxs}from'react/jsx-runtime';import'client-only';import {clsx}from'@accelint/design-foundation/lib/utils';import {CancelFill}from'@accelint/icons';import {useControlledState}from'@react-stately/utils';import {useContextProps,InputContext,Input,composeRenderProps}from'react-aria-components';import {Button}from'../button/index.js';import {Icon}from'../icon/index.js';import {IconProvider}from'../icon/context.js';import {InputContext as InputContext$1}from'./context.js';import t from'./styles.module.css';const P={target:{value:""}};function j({ref:n=null,...o}){[o,n]=useContextProps(o,n,InputContext),[o,n]=useContextProps({...o},n,InputContext$1);const{classNames:l,autoSize:R,defaultValue:E="",disabled:p,placeholder:d,prefix:x,readOnly:v,required:h,size:b="medium",suffix:I,type:z="text",value:N,isClearable:c=true,isInvalid:q,onChange:D,onKeyDown:O,...S}=o,[i,T]=useControlledState(N,E),w=(`${i??""}`.length||d?.length)??0,s=!!x&&t.hasPrefix,u=!!I&&t.hasSuffix,m=c&&t.isClearable,y=i==null||i==="";function f(e){D?.(e),e.defaultPrevented||T(e.target.value);}return jsx(IconProvider,{size:"small",children:jsxs("div",{className:clsx("group/input",t.container,s,u,m,l?.container),"data-disabled":p||null,"data-empty":y||null,"data-invalid":q||null,"data-length":w,"data-placeholder":!!d&&y||null,"data-readonly":v||null,"data-required":h||null,"data-size":b,children:[s&&jsx("span",{className:clsx(t.prefix,l?.prefix),children:x}),jsx("div",{className:clsx(t.sizer,l?.sizer),children:jsx(Input,{...S,ref:n,className:composeRenderProps(l?.input,e=>clsx(t.input,e)),disabled:p,placeholder:d,readOnly:v,required:h,type:z,value:i,onChange:f,onKeyDown:e=>{O?.(e),c&&!e.defaultPrevented&&e.key==="Escape"&&f(P);}})}),u&&jsx("span",{className:clsx(t.suffix,s,u,m,l?.suffix),children:I}),c&&jsx(Button,{className:composeRenderProps(l?.clear,e=>clsx(t.clear,s,u,m,e)),excludeFromTabOrder:true,size:"small",variant:"icon",isDisabled:p,onPress:()=>{f(P),n?.current?.focus();},children:jsx(Icon,{children:jsx(CancelFill,{})})})]})})}export{j as Input};//# 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":["input","InputStyles","Input","ref","props","AriaInputContext","useContextProps","v","O","classNames","A","autoSize","defaultValue","disabled","placeholder","size","isClearable","isInvalid","rest","useControlledState","valueProp","value","S","isEmpty","handleChange","event","onChange","setValue","container","type","readOnly","o","jsx","AriaInput","className","onKeyDown","Button","composeRenderProps","clear","clearInputEvent","CancelFill","w","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 { CancelFill } from '@accelint/icons';\nimport { useControlledState } from '@react-stately/utils';\nimport 'client-only';\nimport {\n  Input as AriaInput,\n  InputContext as AriaInputContext,\n  composeRenderProps,\n  useContextProps,\n} from 'react-aria-components';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { InputContext } from './context';\nimport { InputStyles, InputStylesDefaults } from './styles';\nimport type { ChangeEvent } from 'react';\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\n/**\n * Input - A flexible text input component with enhanced features\n *\n * Provides a customizable text input with automatic sizing, clear functionality,\n * and integrated validation states. Supports various styling options and integrates\n * seamlessly with form field components for comprehensive form experiences.\n *\n * @example\n * // Basic input\n * <Input placeholder=\"Enter text...\" />\n *\n * @example\n * // Input with clear button\n * <Input\n *   defaultValue=\"Clearable text\"\n *   classNames={{ clear: \"hover:bg-info-bold\" }}\n * />\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 = 'medium',\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      })}\n      data-disabled={disabled || null}\n      data-empty={isEmpty || 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        })}\n      >\n        <AriaInput\n          {...rest}\n          ref={ref}\n          className={composeRenderProps(classNames?.input, (className) =>\n            input({ className, autoSize, type, isClearable }),\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 }),\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}\n"]}
+{"version":3,"sources":["../../../src/components/input/index.tsx"],"names":["Input","ref","props","useContextProps","InputContext","g","H","classNames","V","autoSize","disabled","placeholder","required","size","valueProp","isClearable","isInvalid","rest","useControlledState","value","prefix","prefixProp","styles","suffixProp","clear","isEmpty","event","onChange","setValue","IconProvider","a","M","clsx","k","suffix","readOnly","jsx","r","AriaInput","F","className","C","type","onKeyDown","Button","clearInputEvent","Icon","CancelFill","L","A"],"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 { clsx } from '@accelint/design-foundation/lib/utils';\nimport { CancelFill } from '@accelint/icons';\nimport { useControlledState } from '@react-stately/utils';\nimport {\n  Input as AriaInput,\n  InputContext as AriaInputContext,\n  composeRenderProps,\n  useContextProps,\n} from 'react-aria-components';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { IconProvider } from '../icon/context';\nimport { InputContext } from './context';\nimport styles from './styles.module.css';\nimport type { ChangeEvent } from 'react';\nimport type { InputProps } from './types';\n\n// TODO: Improve this implementation so it is more of a realistic event\nconst clearInputEvent = {\n  target: { value: '' },\n} as ChangeEvent<HTMLInputElement>;\n\n/**\n * Input - A flexible text input component with enhanced features\n *\n * Provides a customizable text input with automatic sizing, clear functionality,\n * and integrated validation states. Supports various styling options and integrates\n * seamlessly with form field components for comprehensive form experiences.\n *\n * @example\n * // Basic input\n * <Input placeholder=\"Enter text...\" />\n *\n * @example\n * // Input with clear button\n * <Input\n *   defaultValue=\"Clearable text\"\n *   classNames={{ clear: \"hover:bg-info-bold\" }}\n * />\n */\n\n// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: just a little bit over, not worth refactoring\nexport function Input({ ref = null, ...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, AriaInputContext);\n  [props, ref] = useContextProps({ ...props }, ref, InputContext);\n\n  const {\n    classNames,\n    autoSize,\n    defaultValue = '',\n    disabled,\n    placeholder,\n    prefix: prefixProp,\n    readOnly,\n    required,\n    size = 'medium',\n    suffix: suffixProp,\n    type = 'text',\n    value: valueProp,\n    isClearable = true,\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 prefix = !!prefixProp && styles.hasPrefix;\n  const suffix = !!suffixProp && styles.hasSuffix;\n  const clear = isClearable && styles.isClearable;\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    <IconProvider size='small'>\n      <div\n        className={clsx(\n          'group/input',\n          styles.container,\n          prefix,\n          suffix,\n          clear,\n          classNames?.container,\n        )}\n        data-disabled={disabled || null}\n        data-empty={isEmpty || 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        {prefix && (\n          <span className={clsx(styles.prefix, classNames?.prefix)}>\n            {prefixProp}\n          </span>\n        )}\n        <div className={clsx(styles.sizer, classNames?.sizer)}>\n          <AriaInput\n            {...rest}\n            ref={ref}\n            className={composeRenderProps(classNames?.input, (className) =>\n              clsx(styles.input, className),\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        {suffix && (\n          <span\n            className={clsx(\n              styles.suffix,\n              prefix,\n              suffix,\n              clear,\n              classNames?.suffix,\n            )}\n          >\n            {suffixProp}\n          </span>\n        )}\n        {isClearable && (\n          <Button\n            className={composeRenderProps(classNames?.clear, (className) =>\n              clsx(styles.clear, prefix, suffix, clear, className),\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    </IconProvider>\n  );\n}\n"]}