@accelint/design-toolkit 9.4.0 → 9.5.0

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

@@ -12,7 +12,7 @@
 
 import { DrawerTriggerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime71 from "react/jsx-runtime";
+import * as react_jsx_runtime48 from "react/jsx-runtime";
 
 //#region src/components/drawer/trigger.d.ts
 
@@ -47,7 +47,7 @@ import * as react_jsx_runtime71 from "react/jsx-runtime";
 declare function DrawerTrigger({
   for: events,
   ...rest
-}: DrawerTriggerProps): react_jsx_runtime71.JSX.Element;
+}: DrawerTriggerProps): react_jsx_runtime48.JSX.Element;
 //#endregion
 export { DrawerTrigger };
 //# sourceMappingURL=trigger.d.ts.map

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

@@ -13,7 +13,7 @@
 import { ViewStackViewProps } from "../view-stack/types.js";
 import "client-only";
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime73 from "react/jsx-runtime";
+import * as react_jsx_runtime51 from "react/jsx-runtime";
 
 //#region src/components/drawer/view.d.ts
 
@@ -44,7 +44,7 @@ declare function DrawerView({
   children,
   className,
   ...rest
-}: ViewStackViewProps & ComponentPropsWithRef<'div'>): react_jsx_runtime73.JSX.Element;
+}: ViewStackViewProps & ComponentPropsWithRef<'div'>): react_jsx_runtime51.JSX.Element;
 //#endregion
 export { DrawerView };
 //# sourceMappingURL=view.d.ts.map

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

@@ -12,14 +12,14 @@
 
 import { FlashcardComponentProps, FlashcardDetailsListProps, FlashcardProps } from "./types.js";
 import "client-only";
-import * as react24 from "react";
-import * as react_jsx_runtime75 from "react/jsx-runtime";
+import * as react12 from "react";
+import * as react_jsx_runtime54 from "react/jsx-runtime";
 
 //#region src/components/flashcard/index.d.ts
 /**
  * Context for sharing Flashcard state across child components.
  */
-declare const FlashcardContext: react24.Context<FlashcardProps>;
+declare const FlashcardContext: react12.Context<FlashcardProps>;
 /**
  * Flashcard - A quick visual identifier for map entity data.
  *
@@ -46,7 +46,7 @@ declare const FlashcardContext: react24.Context<FlashcardProps>;
  * </Flashcard>
  * ```
  */
-declare function Flashcard(props: FlashcardProps): react_jsx_runtime75.JSX.Element;
+declare function Flashcard(props: FlashcardProps): react_jsx_runtime54.JSX.Element;
 declare namespace Flashcard {
   var displayName: string;
 }
@@ -68,7 +68,7 @@ declare namespace Flashcard {
  * </Flashcard>
  * ```
  */
-declare function FlashcardHero(props: FlashcardComponentProps): react_jsx_runtime75.JSX.Element;
+declare function FlashcardHero(props: FlashcardComponentProps): react_jsx_runtime54.JSX.Element;
 declare namespace FlashcardHero {
   var displayName: string;
 }
@@ -92,7 +92,7 @@ declare namespace FlashcardHero {
  * </Flashcard>
  * ```
  */
-declare function FlashcardAdditionalData(props: FlashcardComponentProps): react_jsx_runtime75.JSX.Element | null;
+declare function FlashcardAdditionalData(props: FlashcardComponentProps): react_jsx_runtime54.JSX.Element | null;
 declare namespace FlashcardAdditionalData {
   var displayName: string;
 }
@@ -119,7 +119,7 @@ declare namespace FlashcardAdditionalData {
  * </Flashcard>
  * ```
  */
-declare function FlashcardDetailsList(props: FlashcardDetailsListProps): react_jsx_runtime75.JSX.Element;
+declare function FlashcardDetailsList(props: FlashcardDetailsListProps): react_jsx_runtime54.JSX.Element;
 declare namespace FlashcardDetailsList {
   var displayName: string;
 }
@@ -141,7 +141,7 @@ declare namespace FlashcardDetailsList {
  * </FlashcardDetailsList>
  * ```
  */
-declare function FlashcardDetailsLabel(props: FlashcardComponentProps): react_jsx_runtime75.JSX.Element;
+declare function FlashcardDetailsLabel(props: FlashcardComponentProps): react_jsx_runtime54.JSX.Element;
 declare namespace FlashcardDetailsLabel {
   var displayName: string;
 }
@@ -163,7 +163,7 @@ declare namespace FlashcardDetailsLabel {
  * </FlashcardDetailsList>
  * ```
  */
-declare function FlashcardDetailsValue(props: FlashcardComponentProps): react_jsx_runtime75.JSX.Element;
+declare function FlashcardDetailsValue(props: FlashcardComponentProps): react_jsx_runtime54.JSX.Element;
 declare namespace FlashcardDetailsValue {
   var displayName: string;
 }

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

@@ -12,14 +12,14 @@
 
 import { HeroProps } from "./types.js";
 import "client-only";
-import * as react27 from "react";
+import * as react3 from "react";
 import { ContextValue } from "react-aria-components";
 
 //#region src/components/hero/context.d.ts
 /**
  * Context for sharing Hero props across component tree.
  */
-declare const HeroContext: react27.Context<ContextValue<HeroProps, HTMLElement>>;
+declare const HeroContext: react3.Context<ContextValue<HeroProps, HTMLElement>>;
 //#endregion
 export { HeroContext };
 //# sourceMappingURL=context.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { HeroProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime53 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 
 //#region src/components/hero/index.d.ts
 
@@ -56,7 +56,7 @@ import * as react_jsx_runtime53 from "react/jsx-runtime";
 declare function Hero({
   ref,
   ...props
-}: HeroProps): react_jsx_runtime53.JSX.Element;
+}: HeroProps): react_jsx_runtime20.JSX.Element;
 //#endregion
 export { Hero };
 //# sourceMappingURL=index.d.ts.map

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

@@ -11,7 +11,7 @@
  */
 
 import "client-only";
-import * as react21 from "react";
+import * as react4 from "react";
 import * as react_aria_components0 from "react-aria-components";
 
 //#region src/components/hero/subtitle.d.ts
@@ -30,7 +30,7 @@ import * as react_aria_components0 from "react-aria-components";
  * </Hero>
  * ```
  */
-declare const HeroSubtitle: react21.ForwardRefExoticComponent<react_aria_components0.TextProps & react21.RefAttributes<HTMLElement>>;
+declare const HeroSubtitle: react4.ForwardRefExoticComponent<react_aria_components0.TextProps & react4.RefAttributes<HTMLElement>>;
 //#endregion
 export { HeroSubtitle };
 //# sourceMappingURL=subtitle.d.ts.map

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

@@ -11,7 +11,7 @@
  */
 
 import "client-only";
-import * as react18 from "react";
+import * as react7 from "react";
 import * as react_aria_components0 from "react-aria-components";
 
 //#region src/components/hero/title.d.ts
@@ -28,7 +28,7 @@ import * as react_aria_components0 from "react-aria-components";
  * </Hero>
  * ```
  */
-declare const HeroTitle: react18.ForwardRefExoticComponent<react_aria_components0.HeadingProps & react18.RefAttributes<HTMLHeadingElement>>;
+declare const HeroTitle: react7.ForwardRefExoticComponent<react_aria_components0.HeadingProps & react7.RefAttributes<HTMLHeadingElement>>;
 //#endregion
 export { HeroTitle };
 //# sourceMappingURL=title.d.ts.map

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

@@ -13,15 +13,15 @@
 import { ProviderProps } from "../../lib/types.js";
 import { HotkeyProps } from "./types.js";
 import "client-only";
-import * as react20 from "react";
+import * as react9 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime52 from "react/jsx-runtime";
+import * as react_jsx_runtime24 from "react/jsx-runtime";
 
 //#region src/components/hotkey/context.d.ts
 /**
  * Context for sharing Hotkey props across component tree.
  */
-declare const HotkeyContext: react20.Context<ContextValue<HotkeyProps, HTMLElement>>;
+declare const HotkeyContext: react9.Context<ContextValue<HotkeyProps, HTMLElement>>;
 /**
  * HotkeyProvider - Context provider for setting default Hotkey props.
  *
@@ -42,7 +42,7 @@ declare const HotkeyContext: react20.Context<ContextValue<HotkeyProps, HTMLEleme
 declare function HotkeyProvider({
   children,
   ...props
-}: ProviderProps<HotkeyProps>): react_jsx_runtime52.JSX.Element;
+}: ProviderProps<HotkeyProps>): react_jsx_runtime24.JSX.Element;
 //#endregion
 export { HotkeyContext, HotkeyProvider };
 //# sourceMappingURL=context.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { HotkeyProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime55 from "react/jsx-runtime";
+import * as react_jsx_runtime26 from "react/jsx-runtime";
 
 //#region src/components/hotkey/index.d.ts
 
@@ -66,7 +66,7 @@ declare function Hotkey({
   ref,
   children,
   ...props
-}: HotkeyProps): react_jsx_runtime55.JSX.Element;
+}: HotkeyProps): react_jsx_runtime26.JSX.Element;
 //#endregion
 export { Hotkey };
 //# sourceMappingURL=index.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import "client-only";
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime96 from "react/jsx-runtime";
+import * as react_jsx_runtime25 from "react/jsx-runtime";
 
 //#region src/components/hotkey/set.d.ts
 
@@ -37,7 +37,7 @@ import * as react_jsx_runtime96 from "react/jsx-runtime";
 declare function HotkeySet({
   className,
   ...rest
-}: ComponentPropsWithRef<'div'>): react_jsx_runtime96.JSX.Element;
+}: ComponentPropsWithRef<'div'>): react_jsx_runtime25.JSX.Element;
 //#endregion
 export { HotkeySet };
 //# sourceMappingURL=set.d.ts.map

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

@@ -13,15 +13,15 @@
 import { ProviderProps } from "../../lib/types.js";
 import { IconProps } from "./types.js";
 import "client-only";
-import * as react29 from "react";
+import * as react10 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime98 from "react/jsx-runtime";
+import * as react_jsx_runtime27 from "react/jsx-runtime";
 
 //#region src/components/icon/context.d.ts
 /**
  * Context for sharing Icon props across component tree.
  */
-declare const IconContext: react29.Context<ContextValue<IconProps, HTMLSpanElement>>;
+declare const IconContext: react10.Context<ContextValue<IconProps, HTMLSpanElement>>;
 /**
  * IconProvider - Context provider for setting default Icon props.
  *
@@ -42,7 +42,7 @@ declare const IconContext: react29.Context<ContextValue<IconProps, HTMLSpanEleme
 declare function IconProvider({
   children,
   ...props
-}: ProviderProps<IconProps>): react_jsx_runtime98.JSX.Element;
+}: ProviderProps<IconProps>): react_jsx_runtime27.JSX.Element;
 //#endregion
 export { IconContext, IconProvider };
 //# sourceMappingURL=context.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { IconProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime56 from "react/jsx-runtime";
+import * as react_jsx_runtime75 from "react/jsx-runtime";
 
 //#region src/components/icon/index.d.ts
 
@@ -61,7 +61,7 @@ import * as react_jsx_runtime56 from "react/jsx-runtime";
 declare function Icon({
   ref,
   ...props
-}: IconProps): react_jsx_runtime56.JSX.Element;
+}: IconProps): react_jsx_runtime75.JSX.Element;
 //#endregion
 export { Icon };
 //# sourceMappingURL=index.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { InputProps as InputProps$1 } from "./types.js";
 import "client-only";
-import * as react23 from "react";
+import * as react16 from "react";
 import { ContextValue } from "react-aria-components";
 
 //#region src/components/input/context.d.ts
@@ -20,7 +20,7 @@ import { ContextValue } from "react-aria-components";
  * Context for sharing Input props across component tree.
  * Used internally by field components to pass props to Input.
  */
-declare const InputContext: react23.Context<ContextValue<InputProps$1, HTMLInputElement>>;
+declare const InputContext: react16.Context<ContextValue<InputProps$1, HTMLInputElement>>;
 //#endregion
 export { InputContext };
 //# sourceMappingURL=context.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { InputProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime57 from "react/jsx-runtime";
+import * as react_jsx_runtime81 from "react/jsx-runtime";
 
 //#region src/components/input/index.d.ts
 
@@ -52,7 +52,7 @@ import * as react_jsx_runtime57 from "react/jsx-runtime";
 declare function Input({
   ref,
   ...props
-}: InputProps): react_jsx_runtime57.JSX.Element;
+}: InputProps): react_jsx_runtime81.JSX.Element;
 //#endregion
 export { Input };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/input/index.js

@@ -14,14 +14,13 @@
 'use client';
 
 import { IconProvider } from "../icon/context.js";
-import { Icon } from "../icon/index.js";
-import { Button as Button$1 } from "../button/index.js";
+import { ClearButton } from "../button/__internal__/clear.js";
 import { InputContext as InputContext$1 } from "./context.js";
 import "client-only";
+import { useCallback } from "react";
 import { clsx } from "@accelint/design-foundation/lib/utils";
 import { Input as Input$1, InputContext, composeRenderProps, useContextProps } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-import CancelFill from "@accelint/icons/cancel-fill";
 import { useControlledState } from "@react-stately/utils";
 import styles from "./styles.module.css";
 
@@ -78,10 +77,14 @@ function Input({ ref = null, ...props }) {
 	const suffix = !!suffixProp && styles.hasSuffix;
 	const clear = isClearable && styles.isClearable;
 	const isEmpty = value == null || value === "";
-	function handleChange(event) {
+	const handleChange = useCallback((event) => {
 		onChange?.(event);
 		if (!event.defaultPrevented) setValue(event.target.value);
-	}
+	}, [onChange, setValue]);
+	const handleClearButtonPress = useCallback(() => {
+		handleChange(clearInputEvent);
+		ref?.current?.focus();
+	}, [handleChange, ref]);
 	return /* @__PURE__ */ jsx(IconProvider, {
 		size: "small",
 		children: /* @__PURE__ */ jsxs("div", {
@@ -123,17 +126,10 @@ function Input({ ref = null, ...props }) {
 					className: clsx(styles.suffix, prefix, suffix, clear, classNames?.suffix),
 					children: suffixProp
 				}),
-				!readOnly && isClearable && /* @__PURE__ */ jsx(Button$1, {
+				!readOnly && isClearable && /* @__PURE__ */ jsx(ClearButton, {
 					className: composeRenderProps(classNames?.clear, (className) => clsx(styles.clear, prefix, suffix, clear, className)),
-					excludeFromTabOrder: true,
-					size: "small",
-					variant: "icon",
 					isDisabled: disabled,
-					onPress: () => {
-						handleChange(clearInputEvent);
-						ref?.current?.focus();
-					},
-					children: /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(CancelFill, {}) })
+					onPress: handleClearButtonPress
 				})
 			]
 		})

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["AriaInputContext","InputContext","AriaInput","Button"],"sources":["../../../src/components/input/index.tsx"],"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/cancel-fill';\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 * @param props - {@link InputProps}\n * @param props.ref - Ref to the input element.\n * @param props.classNames - CSS class names for input subcomponents.\n * @param props.autoSize - Whether the input should auto-size to its content.\n * @param props.prefix - Content to display before the input.\n * @param props.size - Size variant for the input.\n * @param props.suffix - Content to display after the input.\n * @param props.isClearable - Whether the input shows a clear button.\n * @param props.isInvalid - Whether the input is in an invalid state.\n * @returns The rendered Input component.\n *\n * @example\n * ```tsx\n * // Basic input\n * <Input placeholder=\"Enter text...\" />\n * ```\n *\n * @example\n * ```tsx\n * // Input with clear button\n * <Input\n *   defaultValue=\"Clearable text\"\n *   classNames={{ clear: \"hover:bg-info-bold\" }}\n * />\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\n          className={clsx(\n            styles.sizer,\n            classNames?.sizer,\n            autoSize && styles.autoSize,\n          )}\n        >\n          <AriaInput\n            {...rest}\n            ref={ref}\n            className={composeRenderProps(classNames?.input, (className) =>\n              clsx(styles.input, className),\n            )}\n            title={value ? String(value) : ''}\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        {!readOnly && 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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,MAAM,kBAAkB,EACtB,QAAQ,EAAE,OAAO,IAAI,EACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCD,SAAgB,MAAM,EAAE,MAAM,MAAM,GAAG,SAAqB;;;;;;;;;AAS1D,EAAC,OAAO,OAAO,gBAAgB,OAAO,KAAKA,aAAiB;AAC5D,EAAC,OAAO,OAAO,gBAAgB,EAAE,GAAG,OAAO,EAAE,KAAKC,eAAa;CAE/D,MAAM,EACJ,YACA,UACA,eAAe,IACf,UACA,aACA,QAAQ,YACR,UACA,UACA,OAAO,UACP,QAAQ,YACR,OAAO,QACP,OAAO,WACP,cAAc,MACd,WACA,UACA,WACA,GAAG,SACD;CAEJ,MAAM,CAAC,OAAO,YAAY,mBAAmB,WAAW,aAAa;CACrE,MAAM,UAAU,GAAG,SAAS,KAAK,UAAU,aAAa,WAAW;CACnE,MAAM,SAAS,CAAC,CAAC,cAAc,OAAO;CACtC,MAAM,SAAS,CAAC,CAAC,cAAc,OAAO;CACtC,MAAM,QAAQ,eAAe,OAAO;CACpC,MAAM,UAAU,SAAS,QAAQ,UAAU;CAE3C,SAAS,aAAa,OAAsC;AAC1D,aAAW,MAAM;AAEjB,MAAI,CAAC,MAAM,iBACT,UAAS,MAAM,OAAO,MAAM;;AAIhC,QACE,oBAAC;EAAa,MAAK;YACjB,qBAAC;GACC,WAAW,KACT,eACA,OAAO,WACP,QACA,QACA,OACA,YAAY,UACb;GACD,iBAAe,YAAY;GAC3B,cAAY,WAAW;GACvB,gBAAc,aAAa;GAC3B,eAAa;GACb,oBAAmB,CAAC,CAAC,eAAe,WAAY;GAChD,iBAAe,YAAY;GAC3B,iBAAe,YAAY;GAC3B,aAAW;;IAEV,UACC,oBAAC;KAAK,WAAW,KAAK,OAAO,QAAQ,YAAY,OAAO;eACrD;MACI;IAET,oBAAC;KACC,WAAW,KACT,OAAO,OACP,YAAY,OACZ,YAAY,OAAO,SACpB;eAED,oBAACC;MACC,GAAI;MACC;MACL,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;MACD,OAAO,QAAQ,OAAO,MAAM,GAAG;MACrB;MACG;MACH;MACA;MACJ;MACC;MACP,UAAU;MACV,YAAY,UAAU;AACpB,mBAAY,MAAM;AAElB,WACE,eACA,CAAC,MAAM,oBACP,MAAM,QAAQ,SAEd,cAAa,gBAAgB;;OAGjC;MACE;IACL,UACC,oBAAC;KACC,WAAW,KACT,OAAO,QACP,QACA,QACA,OACA,YAAY,OACb;eAEA;MACI;IAER,CAAC,YAAY,eACZ,oBAACC;KACC,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,QAAQ,QAAQ,OAAO,UAAU,CACrD;KACD;KACA,MAAK;KACL,SAAQ;KACR,YAAY;KACZ,eAAe;AACb,mBAAa,gBAAgB;AAE7B,WAAK,SAAS,OAAO;;eAGvB,oBAAC,kBACC,oBAAC,eAAa,GACT;MACA;;IAEP;GACO"}
+{"version":3,"file":"index.js","names":["AriaInputContext","InputContext","AriaInput"],"sources":["../../../src/components/input/index.tsx"],"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 { useControlledState } from '@react-stately/utils';\nimport { type ChangeEvent, useCallback } from 'react';\nimport {\n  Input as AriaInput,\n  InputContext as AriaInputContext,\n  composeRenderProps,\n  useContextProps,\n} from 'react-aria-components';\nimport { ClearButton } from '../button/__internal__/clear';\nimport { IconProvider } from '../icon/context';\nimport { InputContext } from './context';\nimport styles from './styles.module.css';\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 * @param props - {@link InputProps}\n * @param props.ref - Ref to the input element.\n * @param props.classNames - CSS class names for input subcomponents.\n * @param props.autoSize - Whether the input should auto-size to its content.\n * @param props.prefix - Content to display before the input.\n * @param props.size - Size variant for the input.\n * @param props.suffix - Content to display after the input.\n * @param props.isClearable - Whether the input shows a clear button.\n * @param props.isInvalid - Whether the input is in an invalid state.\n * @returns The rendered Input component.\n *\n * @example\n * ```tsx\n * // Basic input\n * <Input placeholder=\"Enter text...\" />\n * ```\n *\n * @example\n * ```tsx\n * // Input with clear button\n * <Input\n *   defaultValue=\"Clearable text\"\n *   classNames={{ clear: \"hover:bg-info-bold\" }}\n * />\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  const handleChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      onChange?.(event);\n\n      if (!event.defaultPrevented) {\n        setValue(event.target.value);\n      }\n    },\n    [onChange, setValue],\n  );\n  const handleClearButtonPress = useCallback(() => {\n    handleChange(clearInputEvent);\n\n    ref?.current?.focus();\n  }, [handleChange, ref]);\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\n          className={clsx(\n            styles.sizer,\n            classNames?.sizer,\n            autoSize && styles.autoSize,\n          )}\n        >\n          <AriaInput\n            {...rest}\n            ref={ref}\n            className={composeRenderProps(classNames?.input, (className) =>\n              clsx(styles.input, className),\n            )}\n            title={value ? String(value) : ''}\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        {!readOnly && isClearable && (\n          <ClearButton\n            className={composeRenderProps(classNames?.clear, (className) =>\n              clsx(styles.clear, prefix, suffix, clear, className),\n            )}\n            isDisabled={disabled}\n            onPress={handleClearButtonPress}\n          />\n        )}\n      </div>\n    </IconProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,kBAAkB,EACtB,QAAQ,EAAE,OAAO,IAAI,EACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCD,SAAgB,MAAM,EAAE,MAAM,MAAM,GAAG,SAAqB;;;;;;;;;AAS1D,EAAC,OAAO,OAAO,gBAAgB,OAAO,KAAKA,aAAiB;AAC5D,EAAC,OAAO,OAAO,gBAAgB,EAAE,GAAG,OAAO,EAAE,KAAKC,eAAa;CAE/D,MAAM,EACJ,YACA,UACA,eAAe,IACf,UACA,aACA,QAAQ,YACR,UACA,UACA,OAAO,UACP,QAAQ,YACR,OAAO,QACP,OAAO,WACP,cAAc,MACd,WACA,UACA,WACA,GAAG,SACD;CAEJ,MAAM,CAAC,OAAO,YAAY,mBAAmB,WAAW,aAAa;CACrE,MAAM,UAAU,GAAG,SAAS,KAAK,UAAU,aAAa,WAAW;CACnE,MAAM,SAAS,CAAC,CAAC,cAAc,OAAO;CACtC,MAAM,SAAS,CAAC,CAAC,cAAc,OAAO;CACtC,MAAM,QAAQ,eAAe,OAAO;CACpC,MAAM,UAAU,SAAS,QAAQ,UAAU;CAE3C,MAAM,eAAe,aAClB,UAAyC;AACxC,aAAW,MAAM;AAEjB,MAAI,CAAC,MAAM,iBACT,UAAS,MAAM,OAAO,MAAM;IAGhC,CAAC,UAAU,SAAS,CACrB;CACD,MAAM,yBAAyB,kBAAkB;AAC/C,eAAa,gBAAgB;AAE7B,OAAK,SAAS,OAAO;IACpB,CAAC,cAAc,IAAI,CAAC;AAEvB,QACE,oBAAC;EAAa,MAAK;YACjB,qBAAC;GACC,WAAW,KACT,eACA,OAAO,WACP,QACA,QACA,OACA,YAAY,UACb;GACD,iBAAe,YAAY;GAC3B,cAAY,WAAW;GACvB,gBAAc,aAAa;GAC3B,eAAa;GACb,oBAAmB,CAAC,CAAC,eAAe,WAAY;GAChD,iBAAe,YAAY;GAC3B,iBAAe,YAAY;GAC3B,aAAW;;IAEV,UACC,oBAAC;KAAK,WAAW,KAAK,OAAO,QAAQ,YAAY,OAAO;eACrD;MACI;IAET,oBAAC;KACC,WAAW,KACT,OAAO,OACP,YAAY,OACZ,YAAY,OAAO,SACpB;eAED,oBAACC;MACC,GAAI;MACC;MACL,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;MACD,OAAO,QAAQ,OAAO,MAAM,GAAG;MACrB;MACG;MACH;MACA;MACJ;MACC;MACP,UAAU;MACV,YAAY,UAAU;AACpB,mBAAY,MAAM;AAElB,WACE,eACA,CAAC,MAAM,oBACP,MAAM,QAAQ,SAEd,cAAa,gBAAgB;;OAGjC;MACE;IACL,UACC,oBAAC;KACC,WAAW,KACT,OAAO,QACP,QACA,QACA,OACA,YAAY,OACb;eAEA;MACI;IAER,CAAC,YAAY,eACZ,oBAAC;KACC,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,QAAQ,QAAQ,OAAO,UAAU,CACrD;KACD,YAAY;KACZ,SAAS;MACT;;IAEA;GACO"}

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

@@ -12,7 +12,7 @@
 
 import { KanbanComponentProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime58 from "react/jsx-runtime";
+import * as react_jsx_runtime83 from "react/jsx-runtime";
 
 //#region src/components/kanban/card-body.d.ts
 /**
@@ -27,7 +27,7 @@ declare function KanbanCardBody({
   children,
   className,
   ...rest
-}: KanbanComponentProps): react_jsx_runtime58.JSX.Element;
+}: KanbanComponentProps): react_jsx_runtime83.JSX.Element;
 //#endregion
 export { KanbanCardBody };
 //# sourceMappingURL=card-body.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { KanbanComponentProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime59 from "react/jsx-runtime";
+import * as react_jsx_runtime85 from "react/jsx-runtime";
 
 //#region src/components/kanban/card-header-actions.d.ts
 /**
@@ -27,7 +27,7 @@ declare function KanbanCardHeaderActions({
   children,
   className,
   ...rest
-}: KanbanComponentProps): react_jsx_runtime59.JSX.Element;
+}: KanbanComponentProps): react_jsx_runtime85.JSX.Element;
 //#endregion
 export { KanbanCardHeaderActions };
 //# sourceMappingURL=card-header-actions.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { KanbanComponentProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime60 from "react/jsx-runtime";
+import * as react_jsx_runtime86 from "react/jsx-runtime";
 
 //#region src/components/kanban/card-header-title.d.ts
 /**
@@ -27,7 +27,7 @@ declare function KanbanCardHeaderTitle({
   className,
   children,
   ...rest
-}: KanbanComponentProps): react_jsx_runtime60.JSX.Element;
+}: KanbanComponentProps): react_jsx_runtime86.JSX.Element;
 //#endregion
 export { KanbanCardHeaderTitle };
 //# sourceMappingURL=card-header-title.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { KanbanComponentProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime61 from "react/jsx-runtime";
+import * as react_jsx_runtime96 from "react/jsx-runtime";
 
 //#region src/components/kanban/card-header.d.ts
 /**
@@ -29,7 +29,7 @@ declare function KanbanCardHeader({
   className,
   children,
   ...rest
-}: KanbanComponentProps): react_jsx_runtime61.JSX.Element;
+}: KanbanComponentProps): react_jsx_runtime96.JSX.Element;
 //#endregion
 export { KanbanCardHeader };
 //# sourceMappingURL=card-header.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { KanbanCardProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime62 from "react/jsx-runtime";
+import * as react_jsx_runtime103 from "react/jsx-runtime";
 
 //#region src/components/kanban/card.d.ts
 
@@ -45,7 +45,7 @@ declare function KanbanCard({
   card,
   isActive,
   ...rest
-}: KanbanCardProps): react_jsx_runtime62.JSX.Element;
+}: KanbanCardProps): react_jsx_runtime103.JSX.Element;
 //#endregion
 export { KanbanCard };
 //# sourceMappingURL=card.d.ts.map

package/dist/components/kanban/column-actions.d.ts

@@ -12,7 +12,7 @@
 
 import { KanbanColContentActionProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime63 from "react/jsx-runtime";
+import * as react_jsx_runtime104 from "react/jsx-runtime";
 
 //#region src/components/kanban/column-actions.d.ts
 /**
@@ -27,7 +27,7 @@ declare function KanbanColumnActions({
   className,
   onAddCard,
   ...rest
-}: KanbanColContentActionProps): react_jsx_runtime63.JSX.Element;
+}: KanbanColContentActionProps): react_jsx_runtime104.JSX.Element;
 //#endregion
 export { KanbanColumnActions };
 //# sourceMappingURL=column-actions.d.ts.map

package/dist/components/kanban/column-container.d.ts

@@ -12,7 +12,7 @@
 
 import { KanbanComponentProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime64 from "react/jsx-runtime";
+import * as react_jsx_runtime121 from "react/jsx-runtime";
 
 //#region src/components/kanban/column-container.d.ts
 /**
@@ -27,7 +27,7 @@ declare function KanbanColumnContainer({
   children,
   className,
   ...rest
-}: KanbanComponentProps): react_jsx_runtime64.JSX.Element;
+}: KanbanComponentProps): react_jsx_runtime121.JSX.Element;
 //#endregion
 export { KanbanColumnContainer };
 //# sourceMappingURL=column-container.d.ts.map

package/dist/components/kanban/column-content.d.ts

@@ -12,7 +12,7 @@
 
 import { KanbanColContentProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime65 from "react/jsx-runtime";
+import * as react_jsx_runtime123 from "react/jsx-runtime";
 
 //#region src/components/kanban/column-content.d.ts
 /**
@@ -31,7 +31,7 @@ declare function KanbanColumnContent({
   className,
   column,
   ...rest
-}: KanbanColContentProps): react_jsx_runtime65.JSX.Element;
+}: KanbanColContentProps): react_jsx_runtime123.JSX.Element;
 //#endregion
 export { KanbanColumnContent };
 //# sourceMappingURL=column-content.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { KanbanMenuProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime68 from "react/jsx-runtime";
+import * as react_jsx_runtime124 from "react/jsx-runtime";
 
 //#region src/components/kanban/column-header-actions.d.ts
 /**
@@ -31,7 +31,7 @@ declare function KanbanColumnHeaderActions({
   cardCount,
   children,
   ...rest
-}: KanbanMenuProps): react_jsx_runtime68.JSX.Element;
+}: KanbanMenuProps): react_jsx_runtime124.JSX.Element;
 //#endregion
 export { KanbanColumnHeaderActions };
 //# sourceMappingURL=column-header-actions.d.ts.map

package/dist/components/kanban/column-header-drag-handle.d.ts

@@ -11,7 +11,7 @@
  */
 
 import "client-only";
-import * as react_jsx_runtime72 from "react/jsx-runtime";
+import * as react_jsx_runtime28 from "react/jsx-runtime";
 
 //#region src/components/kanban/column-header-drag-handle.d.ts
 /**
@@ -19,7 +19,7 @@ import * as react_jsx_runtime72 from "react/jsx-runtime";
  *
  * @returns The rendered KanbanColumnHeaderDragHandle component.
  */
-declare function KanbanColumnHeaderDragHandle(): react_jsx_runtime72.JSX.Element;
+declare function KanbanColumnHeaderDragHandle(): react_jsx_runtime28.JSX.Element;
 //#endregion
 export { KanbanColumnHeaderDragHandle };
 //# sourceMappingURL=column-header-drag-handle.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { KanbanComponentProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime70 from "react/jsx-runtime";
+import * as react_jsx_runtime30 from "react/jsx-runtime";
 
 //#region src/components/kanban/column-header-title.d.ts
 /**
@@ -27,7 +27,7 @@ declare function KanbanColumnHeaderTitle({
   children,
   className,
   ...rest
-}: KanbanComponentProps): react_jsx_runtime70.JSX.Element;
+}: KanbanComponentProps): react_jsx_runtime30.JSX.Element;
 //#endregion
 export { KanbanColumnHeaderTitle };
 //# sourceMappingURL=column-header-title.d.ts.map