@accelint/design-toolkit 7.0.1 → 8.0.0

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"]}

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

@@ -0,0 +1,175 @@
+/*
+ * 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 {
+    --length: attr(data-length type(<number>), 0);
+    @apply gap-xs rounded-medium px-s py-xs font-display outline-interactive grid items-center outline;
+    grid-template-areas: 'input clear';
+
+    @variant size-medium {
+      @apply text-body-s;
+    }
+
+    @variant size-small {
+      @apply text-body-xs;
+    }
+
+    @variant hover {
+      @apply outline-interactive-hover;
+    }
+
+    @variant focus-visible-within {
+      @apply outline-accent-primary-bold;
+    }
+
+    @variant pressed {
+      @apply outline-interactive-pressed;
+    }
+
+    @variant invalid {
+      @apply outline-serious-bold;
+    }
+
+    @variant disabled {
+      @apply fg-disabled outline-interactive-disabled cursor-not-allowed;
+    }
+
+    &.hasPrefix {
+      grid-template-areas: 'prefix input';
+    }
+
+    &.hasSuffix {
+      grid-template-areas: 'input suffix';
+    }
+
+    &.hasPrefix.hasSuffix {
+      grid-template-areas: 'prefix input suffix';
+    }
+
+    &.isClearable {
+      &.hasPrefix {
+        grid-template-areas: 'prefix input clear';
+      }
+
+      &.hasSuffix {
+        grid-template-areas: 'input suffix-1 suffix-2';
+      }
+
+      &.hasPrefix.hasSuffix {
+        grid-template-areas: 'prefix input suffix-1 suffix-2';
+      }
+    }
+  }
+
+  .prefix {
+    grid-area: prefix;
+  }
+
+  .sizer {
+    grid-area: input;
+
+    &:has([type='color']),
+    &:has([type='date']),
+    &:has([type='datetime-local']),
+    &:has([type='email']),
+    &:has([type='number']),
+    &:has([type='password']),
+    &:has([type='search']),
+    &:has([type='tel']),
+    &:has([type='text']),
+    &:has([type='time']),
+    &:has([type='url']) {
+      @variant group-size-medium/input {
+        min-width: 160px;
+        max-width: 400px;
+      }
+
+      @variant group-size-small/input {
+        min-width: 80px;
+        max-width: 200px;
+      }
+    }
+
+    &:has([type='number']),
+    &:has([type='text']) {
+      &.autoSize {
+        @variant group-size-medium/input {
+          width: calc(
+            (var(--length) * 1ch) +
+              ((var(--length) - 1) * var(--typography-body-s-spacing))
+          );
+        }
+
+        @variant group-size-small/input {
+          min-width: calc(
+            2ch + ((var(--length) - 1) * var(--typography-body-xs-spacing))
+          );
+          width: calc(
+            (var(--length) * 1ch) +
+              ((var(--length) - 1) * var(--typography-body-xs-spacing))
+          );
+        }
+      }
+    }
+  }
+
+  .input {
+    @apply w-full outline-none;
+
+    &[type='number'] {
+      appearance: textfield;
+
+      &::-webkit-inner-spin-button,
+      &::-webkit-outer-spin-button {
+        appearance: none;
+      }
+    }
+  }
+
+  .suffix {
+    grid-area: suffix;
+
+    &.hasSuffix.isClearable {
+      grid-area: suffix-2;
+
+      @variant group-focus-within/input {
+        @variant group-not-data-empty/input {
+          grid-area: suffix-1;
+        }
+      }
+    }
+  }
+
+  .clear {
+    @apply -my-xs -mr-s invisible;
+    grid-area: clear;
+
+    @variant group-focus-within/input {
+      @variant group-not-data-empty/input {
+        @apply visible;
+      }
+    }
+
+    &.hasSuffix.isClearable {
+      grid-area: suffix-1;
+
+      @variant group-focus-within/input {
+        @variant group-not-data-empty/input {
+          grid-area: suffix-2;
+        }
+      }
+    }
+  }
+}

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

@@ -1,20 +1,21 @@
-import { RefAttributes } from 'react';
+import { RefAttributes, ReactNode } from 'react';
 import { InputProps as InputProps$1 } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
 import { ButtonProps } from '../button/types.js';
-import { InputStyles } from './styles.js';
 import '../../lib/types.js';
-import '../button/styles.js';
-import 'tailwind-merge';
 
-type InputProps = Omit<InputProps$1, 'className' | 'size' | 'type'> & RefAttributes<HTMLInputElement> & Omit<VariantProps<typeof InputStyles>, 'isEmpty'> & {
+type InputProps = Omit<InputProps$1, 'className' | 'size'> & RefAttributes<HTMLInputElement> & {
     classNames?: {
         container?: string;
         sizer?: string;
         input?: InputProps$1['className'];
         clear?: ButtonProps['className'];
+        prefix?: string;
+        suffix?: string;
     };
+    autoSize?: boolean;
+    prefix?: ReactNode;
     size?: 'medium' | 'small';
+    suffix?: ReactNode;
     isClearable?: boolean;
     isInvalid?: boolean;
 };

package/dist/components/kanban/card-body.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { KanbanComponentProps } from './types.js';
+import 'react';
+import '../search-field/types.js';
+import 'react-aria-components';
+import '../button/types.js';
+import '../../lib/types.js';
+import '../icon/types.js';
+
+declare function KanbanCardBody({ children, className, ...rest }: KanbanComponentProps): react_jsx_runtime.JSX.Element;
+
+export { KanbanCardBody };

package/dist/components/kanban/card-body.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 t from'./styles.module.css';function i({children:o,className:n,...r}){return jsx("div",{...r,className:clsx(t.cardBody,n),children:o})}export{i as KanbanCardBody};//# sourceMappingURL=card-body.js.map
+//# sourceMappingURL=card-body.js.map

package/dist/components/kanban/card-body.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/kanban/card-body.tsx"],"names":["KanbanCardBody","children","className","jsx","rest","clsx","styles"],"mappings":"oJAkBO,SAASA,CAAe,CAC7B,SAAAC,CAAAA,CACA,CAAA,SAAAC,CAAAA,CACA,CAAA,GACF,CAAA,CAAyB,CACvB,CAAA,OACEC,GAAC,OAAK,CAAA,GAAGC,CAAM,CAAA,SAAWC,CAAAA,IAAKC,EAAO,CAAA,QAAUJ,CAAS,CAAA,CACtD,CAAA,QAAAD,EACH,CAEJ,CAAA","file":"card-body.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';\nimport 'client-only';\n\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport styles from './styles.module.css';\nimport type { KanbanComponentProps } from './types';\n\nexport function KanbanCardBody({\n  children,\n  className,\n  ...rest\n}: KanbanComponentProps) {\n  return (\n    <div {...rest} className={clsx(styles.cardBody, className)}>\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/components/kanban/card-header-actions.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { KanbanComponentProps } from './types.js';
+import 'react';
+import '../search-field/types.js';
+import 'react-aria-components';
+import '../button/types.js';
+import '../../lib/types.js';
+import '../icon/types.js';
+
+declare function KanbanCardHeaderActions({ children, className, ...rest }: KanbanComponentProps): react_jsx_runtime.JSX.Element;
+
+export { KanbanCardHeaderActions };

package/dist/components/kanban/card-header-actions.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 e from'./styles.module.css';function m({children:o,className:n,...r}){return jsx("div",{...r,className:clsx(e.cardHeaderActions,n),children:o})}export{m as KanbanCardHeaderActions};//# sourceMappingURL=card-header-actions.js.map
+//# sourceMappingURL=card-header-actions.js.map

package/dist/components/kanban/card-header-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/kanban/card-header-actions.tsx"],"names":["KanbanCardHeaderActions","children","className","jsx","rest","clsx","styles"],"mappings":"oJAkBO,SAASA,CAAwB,CACtC,SAAAC,CAAAA,CACA,CAAA,SAAAC,CAAAA,CACA,CAAA,GACF,CAAA,CAAyB,CACvB,CAAA,OACEC,GAAC,OAAK,CAAA,GAAGC,CAAM,CAAA,SAAWC,CAAAA,IAAKC,EAAO,CAAA,iBAAmBJ,CAAS,CAAA,CAC/D,CAAA,QAAAD,EACH,CAEJ,CAAA","file":"card-header-actions.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';\nimport 'client-only';\n\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport styles from './styles.module.css';\nimport type { KanbanComponentProps } from './types';\n\nexport function KanbanCardHeaderActions({\n  children,\n  className,\n  ...rest\n}: KanbanComponentProps) {\n  return (\n    <div {...rest} className={clsx(styles.cardHeaderActions, className)}>\n      {children}\n    </div>\n  );\n}\n"]}

package/dist/components/kanban/card-header-title.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { KanbanComponentProps } from './types.js';
+import 'react';
+import '../search-field/types.js';
+import 'react-aria-components';
+import '../button/types.js';
+import '../../lib/types.js';
+import '../icon/types.js';
+
+declare function KanbanCardHeaderTitle({ className, children, ...rest }: KanbanComponentProps): react_jsx_runtime.JSX.Element;
+
+export { KanbanCardHeaderTitle };

package/dist/components/kanban/card-header-title.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 t from'./styles.module.css';function i({className:n,children:o,...p}){return jsx("span",{...p,className:clsx(t.cardTitle,n),children:o})}export{i as KanbanCardHeaderTitle};//# sourceMappingURL=card-header-title.js.map
+//# sourceMappingURL=card-header-title.js.map

package/dist/components/kanban/card-header-title.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/kanban/card-header-title.tsx"],"names":["KanbanCardHeaderTitle","className","children","jsx","rest","clsx","styles"],"mappings":"oJAkBO,SAASA,CAAsB,CACpC,UAAAC,CAAAA,CACA,CAAA,QAAAC,CAAAA,CACA,CAAA,GACF,CAAA,CAAyB,CACvB,CAAA,OACEC,GAAC,QAAM,CAAA,GAAGC,CAAM,CAAA,SAAWC,CAAAA,IAAKC,EAAO,CAAA,SAAWL,CAAS,CAAA,CACxD,CAAA,QAAAC,EACH,CAEJ,CAAA","file":"card-header-title.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';\nimport 'client-only';\n\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport styles from './styles.module.css';\nimport type { KanbanComponentProps } from './types';\n\nexport function KanbanCardHeaderTitle({\n  className,\n  children,\n  ...rest\n}: KanbanComponentProps) {\n  return (\n    <span {...rest} className={clsx(styles.cardTitle, className)}>\n      {children}\n    </span>\n  );\n}\n"]}

package/dist/components/kanban/card-header.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { KanbanComponentProps } from './types.js';
+import 'react';
+import '../search-field/types.js';
+import 'react-aria-components';
+import '../button/types.js';
+import '../../lib/types.js';
+import '../icon/types.js';
+
+declare function KanbanCardHeader({ className, children, ...rest }: KanbanComponentProps): react_jsx_runtime.JSX.Element;
+
+export { KanbanCardHeader };

package/dist/components/kanban/card-header.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 {KanbanHeader}from'./header.js';import p from'./styles.module.css';function b({className:r,children:a,...n}){return jsx(KanbanHeader,{...n,className:clsx(p.cardHeader,r),children:a})}export{b as KanbanCardHeader};//# sourceMappingURL=card-header.js.map
+//# sourceMappingURL=card-header.js.map

package/dist/components/kanban/card-header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/kanban/card-header.tsx"],"names":["rest","t","e","o"],"mappings":"2LAmBO,SACL,CAAA,CAAA,CAAA,SACA,CAAA,CAAA,CAAA,SACGA,CACL,CAAA,GACE,CAAA,CAAA,CAAA,CAAA,OACiBC,GAAA,CAAAC,YAAGF,CAAAA,CAAM,GAAA,CAAA,CAAA,SAAuB,CAAAG,IAAA,CAAA,CAAA,CAAA,UAC5C,CAAA,CAAA,CAAA,CAAA,QAGP,CAAA,CAAA,CAAA,CAAA","file":"card-header.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';\nimport 'client-only';\n\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { KanbanHeader } from './header';\nimport styles from './styles.module.css';\nimport type { KanbanComponentProps } from './types';\n\nexport function KanbanCardHeader({\n  className,\n  children,\n  ...rest\n}: KanbanComponentProps) {\n  return (\n    <KanbanHeader {...rest} className={clsx(styles.cardHeader, className)}>\n      {children}\n    </KanbanHeader>\n  );\n}\n"]}

package/dist/components/kanban/card.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { KanbanCardProps } from './types.js';
+import 'react';
+import '../search-field/types.js';
+import 'react-aria-components';
+import '../button/types.js';
+import '../../lib/types.js';
+import '../icon/types.js';
+
+declare function KanbanCard({ className, children, card, isActive, ...rest }: KanbanCardProps): react_jsx_runtime.JSX.Element;
+
+export { KanbanCard };

package/dist/components/kanban/card.js

@@ -0,0 +1,4 @@
+'use client';
+
+import {jsxs,jsx}from'react/jsx-runtime';import'client-only';import {clsx}from'@accelint/design-foundation/lib/utils';import {useCardInteractions}from'../../hooks/kanban/index.js';import {Divider}from'../divider/index.js';import {useDragContext}from'./kanban.js';import r from'./styles.module.css';function I({className:n,children:d,card:a,isActive:m,...c}){const{isDragging:l,closestEdge:e,ref:p,style:f,attributes:u,listeners:g}=useCardInteractions(a),{activeId:i}=useDragContext(),o=i&&i!==a.id&&e;return jsxs("li",{className:r.cardContainerOuter,ref:p,style:f,children:[o&&e==="top"&&jsx(Divider,{className:r.divider}),jsx("div",{"data-dragging":l||void 0,"data-current":m||void 0,className:clsx(r.card,n),...u,...g,...c,children:d}),o&&e==="bottom"&&jsx(Divider,{className:r.divider})]})}export{I as KanbanCard};//# sourceMappingURL=card.js.map
+//# sourceMappingURL=card.js.map

package/dist/components/kanban/card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/kanban/card.tsx"],"names":["children","isDragging","closestEdge","attributes","listeners","showPlaceholder","activeId","card","b","jsxs","styles","y","ref","jsx","t","isActive","rest","Divider"],"mappings":"0SAuBE,SAAAA,CACA,CAAA,CAAA,SACA,CAAA,CAAA,CAAA,QAEF,CAAA,CAAoB,CAClB,IAAA,CAAM,CAAE,CAAA,QAAA,CAAA,CAAAC,CAAAA,GAAY,CAAA,CAAA,CAAA,CAAA,KAAA,CAAAC,UAAkB,CAAA,CAAA,CAAA,WAAO,CAAA,CAAA,CAAAC,GAAY,CAAA,CAAA,CAAA,KAAA,CAAAC,CAAU,CAAA,UAE3D,CAAA,CAAA,CAAA,SAA4B,CAG9BC,CAAAA,CAAkBC,CAAAA,mBAAAA,CAAYA,CAAAA,CAAAA,CAAAA,CAAaC,QAEjD,CAAA,CAAA,CAAA,CAAAC,cAAA,EACEC,CAAAA,CAAC,CAAA,CAAA,EAAA,CAAA,GAAG,CAAA,CAAA,EAAA,EAAA,CAAA,CAAWC,OAAOC,IAAA,CAAA,IAAA,CAAA,CAAA,SAAoB,CAAKC,CAAAA,CAAK,kBACjDP,CAAAA,GAAmBH,CAAAA,CAAAA,CAAgB,KAAA,CAAA,CAClCW,CAAAA,QAAS,CAAA,CAAA,CAAA,EAAA,CAAWH,GAAO,KAAA,EAASI,GAAA,CAGtCD,OAAAA,CAAC,CAAA,SACC,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAeZ,GAAAA,CAAAA,KAAc,CAAA,CAAA,eAC7B,CAAcc,CAAAA,EAAY,MAAA,CAC1B,cAAuB,CAAA,CAAA,EAAA,MACtB,CAAGZ,SAEH,CAAGa,IAAAA,CAEH,CAAA,CAAA,IAAA,CAAA,CAAA,CAAAhB,CAAAA,GAGFK,CAAAA,CAAAA,GAAmBH,CAAAA,CAAgB,GAAA,CAAA,CAAA,QACjCe,CAAA,CAAQ,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,GAAWP,QAAO,EAASI,WAExC,CAEJ,CAAA,SAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA","file":"card.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';\nimport 'client-only';\n\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { useCardInteractions } from '../../hooks/kanban';\nimport { Divider } from '../divider';\nimport { useDragContext } from './kanban';\nimport styles from './styles.module.css';\nimport type { KanbanCardProps } from './types';\n\nexport function KanbanCard({\n  className,\n  children,\n  card,\n  isActive,\n  ...rest\n}: KanbanCardProps) {\n  const { isDragging, closestEdge, ref, style, attributes, listeners } =\n    useCardInteractions(card);\n  const { activeId } = useDragContext();\n\n  // Check if we should show the drop placeholder\n  const showPlaceholder = activeId && activeId !== card.id && closestEdge;\n\n  return (\n    <li className={styles.cardContainerOuter} ref={ref} style={style}>\n      {showPlaceholder && closestEdge === 'top' && (\n        <Divider className={styles.divider} />\n      )}\n\n      <div\n        data-dragging={isDragging || undefined}\n        data-current={isActive || undefined}\n        className={clsx(styles.card, className)}\n        {...attributes}\n        {...listeners}\n        {...rest}\n      >\n        {children}\n      </div>\n\n      {showPlaceholder && closestEdge === 'bottom' && (\n        <Divider className={styles.divider} />\n      )}\n    </li>\n  );\n}\n"]}