@accelint/design-toolkit 9.3.0 → 9.4.1

package/dist/components/radio/index.js

@@ -21,35 +21,22 @@ import styles from "./styles.module.css";
 
 //#region src/components/radio/index.tsx
 /**
-* Radio - A form control for exclusive selection within a group of options
+* Radio - Individual radio button option within a RadioGroup
 *
-* Provides accessible radio button functionality where only one option can be
-* selected at a time within a group. Includes proper labeling, keyboard navigation,
-* and visual feedback for selection states.
+* Renders a selectable radio button with label. Must be used inside a RadioGroup.
 *
-* @example
-* // Basic radio group
-* <RadioGroup label="Choose size">
-*   <Radio value="small">Small</Radio>
-*   <Radio value="medium">Medium</Radio>
-*   <Radio value="large">Large</Radio>
-* </RadioGroup>
-*
-* @example
-* // Radio group with default selection
-* <RadioGroup defaultValue="medium" label="Size preference">
-*   <Radio value="small">Small (S)</Radio>
-*   <Radio value="medium">Medium (M)</Radio>
-*   <Radio value="large">Large (L)</Radio>
-* </RadioGroup>
+* @param props - {@link RadioProps}
+* @param props.classNames - Custom CSS class names for radio, control, and label.
+* @param props.children - Label content for the radio button.
+* @returns The rendered Radio component.
 *
 * @example
-* // Disabled radio options
-* <RadioGroup label="Shipping options">
-*   <Radio value="standard">Standard shipping</Radio>
-*   <Radio value="express">Express shipping</Radio>
-*   <Radio value="overnight" isDisabled>Overnight (unavailable)</Radio>
+* ```tsx
+* <RadioGroup label="Favorite color">
+*   <Radio value="red">Red</Radio>
+*   <Radio value="blue">Blue</Radio>
 * </RadioGroup>
+* ```
 */
 function Radio({ classNames, children, ...rest }) {
 	return /* @__PURE__ */ jsx(Radio$1, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["AriaRadio","children"],"sources":["../../../src/components/radio/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'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { Radio as AriaRadio, composeRenderProps } from 'react-aria-components';\nimport styles from './styles.module.css';\nimport type { RadioProps } from './types';\n\n/**\n * Radio - A form control for exclusive selection within a group of options\n *\n * Provides accessible radio button functionality where only one option can be\n * selected at a time within a group. Includes proper labeling, keyboard navigation,\n * and visual feedback for selection states.\n *\n * @example\n * // Basic radio group\n * <RadioGroup label=\"Choose size\">\n *   <Radio value=\"small\">Small</Radio>\n *   <Radio value=\"medium\">Medium</Radio>\n *   <Radio value=\"large\">Large</Radio>\n * </RadioGroup>\n *\n * @example\n * // Radio group with default selection\n * <RadioGroup defaultValue=\"medium\" label=\"Size preference\">\n *   <Radio value=\"small\">Small (S)</Radio>\n *   <Radio value=\"medium\">Medium (M)</Radio>\n *   <Radio value=\"large\">Large (L)</Radio>\n * </RadioGroup>\n *\n * @example\n * // Disabled radio options\n * <RadioGroup label=\"Shipping options\">\n *   <Radio value=\"standard\">Standard shipping</Radio>\n *   <Radio value=\"express\">Express shipping</Radio>\n *   <Radio value=\"overnight\" isDisabled>Overnight (unavailable)</Radio>\n * </RadioGroup>\n */\nexport function Radio({ classNames, children, ...rest }: RadioProps) {\n  return (\n    <AriaRadio\n      {...rest}\n      className={composeRenderProps(classNames?.radio, (className) =>\n        clsx('group/radio', styles.radio, className),\n      )}\n    >\n      {composeRenderProps(children, (children) => (\n        <>\n          <span className={clsx(styles.control, classNames?.control)} />\n          <span className={clsx(styles.label, classNames?.label)}>\n            {children}\n          </span>\n        </>\n      ))}\n    </AriaRadio>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,SAAgB,MAAM,EAAE,YAAY,UAAU,GAAG,QAAoB;AACnE,QACE,oBAACA;EACC,GAAI;EACJ,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,eAAe,OAAO,OAAO,UAAU,CAC7C;YAEA,mBAAmB,WAAW,eAC7B,4CACE,oBAAC,UAAK,WAAW,KAAK,OAAO,SAAS,YAAY,QAAQ,GAAI,EAC9D,oBAAC;GAAK,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;aACnDC;IACI,IACN,CACH;GACQ"}
+{"version":3,"file":"index.js","names":["AriaRadio","children"],"sources":["../../../src/components/radio/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'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { Radio as AriaRadio, composeRenderProps } from 'react-aria-components';\nimport styles from './styles.module.css';\nimport type { RadioProps } from './types';\n\n/**\n * Radio - Individual radio button option within a RadioGroup\n *\n * Renders a selectable radio button with label. Must be used inside a RadioGroup.\n *\n * @param props - {@link RadioProps}\n * @param props.classNames - Custom CSS class names for radio, control, and label.\n * @param props.children - Label content for the radio button.\n * @returns The rendered Radio component.\n *\n * @example\n * ```tsx\n * <RadioGroup label=\"Favorite color\">\n *   <Radio value=\"red\">Red</Radio>\n *   <Radio value=\"blue\">Blue</Radio>\n * </RadioGroup>\n * ```\n */\nexport function Radio({ classNames, children, ...rest }: RadioProps) {\n  return (\n    <AriaRadio\n      {...rest}\n      className={composeRenderProps(classNames?.radio, (className) =>\n        clsx('group/radio', styles.radio, className),\n      )}\n    >\n      {composeRenderProps(children, (children) => (\n        <>\n          <span className={clsx(styles.control, classNames?.control)} />\n          <span className={clsx(styles.label, classNames?.label)}>\n            {children}\n          </span>\n        </>\n      ))}\n    </AriaRadio>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqCA,SAAgB,MAAM,EAAE,YAAY,UAAU,GAAG,QAAoB;AACnE,QACE,oBAACA;EACC,GAAI;EACJ,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,eAAe,OAAO,OAAO,UAAU,CAC7C;YAEA,mBAAmB,WAAW,eAC7B,4CACE,oBAAC,UAAK,WAAW,KAAK,OAAO,SAAS,YAAY,QAAQ,GAAI,EAC9D,oBAAC;GAAK,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;aACnDC;IACI,IACN,CACH;GACQ"}

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

@@ -15,6 +15,14 @@ import { RefAttributes } from "react";
 import { RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1 } from "react-aria-components";
 
 //#region src/components/radio/types.d.ts
+/**
+ * Props for RadioGroup component.
+ *
+ * Extends AriaRadioGroupProps with custom classNames and label support.
+ * - `classNames.group` - CSS class for the radio group container.
+ * - `classNames.label` - CSS class for the group label.
+ * - `label` - Optional text label for the group.
+ */
 type RadioGroupProps = Omit<RadioGroupProps$1, 'className'> & RefAttributes<HTMLDivElement> & {
   classNames?: {
     group?: RadioGroupProps$1['className'];
@@ -22,6 +30,14 @@ type RadioGroupProps = Omit<RadioGroupProps$1, 'className'> & RefAttributes<HTML
   };
   label?: string;
 };
+/**
+ * Props for Radio component.
+ *
+ * Extends AriaRadioProps with custom classNames support.
+ * - `classNames.radio` - CSS class for the radio label wrapper.
+ * - `classNames.control` - CSS class for the radio button control.
+ * - `classNames.label` - CSS class for the radio label text.
+ */
 type RadioProps = Omit<RadioProps$1, 'className'> & RefAttributes<HTMLLabelElement> & {
   classNames?: {
     radio?: RadioProps$1['className'];

package/dist/components/search-field/context.d.ts

@@ -13,9 +13,9 @@
 import { ProviderProps } from "../../lib/types.js";
 import { SearchFieldProps as SearchFieldProps$1 } from "./types.js";
 import "client-only";
-import * as react37 from "react";
+import * as react36 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime135 from "react/jsx-runtime";
+import * as react_jsx_runtime152 from "react/jsx-runtime";
 
 //#region src/components/search-field/context.d.ts
 /**
@@ -23,16 +23,19 @@ import * as react_jsx_runtime135 from "react/jsx-runtime";
  *
  * Provides context for SearchField component to share props
  */
-declare const SearchFieldContext: react37.Context<ContextValue<SearchFieldProps$1, HTMLDivElement>>;
+declare const SearchFieldContext: react36.Context<ContextValue<SearchFieldProps$1, HTMLDivElement>>;
 /**
  * Provider for SearchField component
  *
  * Allows setting default props for all SearchField components within
+ *
+ * @param props - Provider props including children and default SearchFieldProps.
+ * @returns The provider component wrapping children with context.
  */
 declare function SearchFieldProvider({
   children,
   ...props
-}: ProviderProps<SearchFieldProps$1>): react_jsx_runtime135.JSX.Element;
+}: ProviderProps<SearchFieldProps$1>): react_jsx_runtime152.JSX.Element;
 //#endregion
 export { SearchFieldContext, SearchFieldProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/search-field/context.js

@@ -28,6 +28,9 @@ const SearchFieldContext = createContext(null);
 * Provider for SearchField component
 *
 * Allows setting default props for all SearchField components within
+*
+* @param props - Provider props including children and default SearchFieldProps.
+* @returns The provider component wrapping children with context.
 */
 function SearchFieldProvider({ children, ...props }) {
 	return /* @__PURE__ */ jsx(SearchFieldContext.Provider, {

package/dist/components/search-field/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/search-field/context.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'use client';\n\nimport 'client-only';\nimport { createContext } from 'react';\nimport type { ContextValue } from 'react-aria-components';\nimport type { ProviderProps } from '@/lib/types';\nimport type { SearchFieldProps } from './types';\n\n/**\n * Context for SearchField component\n *\n * Provides context for SearchField component to share props\n */\nexport const SearchFieldContext =\n  createContext<ContextValue<SearchFieldProps, HTMLDivElement>>(null);\n\n/**\n * Provider for SearchField component\n *\n * Allows setting default props for all SearchField components within\n */\nexport function SearchFieldProvider({\n  children,\n  ...props\n}: ProviderProps<SearchFieldProps>) {\n  return (\n    <SearchFieldContext.Provider value={props}>\n      {children}\n    </SearchFieldContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,qBACX,cAA8D,KAAK;;;;;;AAOrE,SAAgB,oBAAoB,EAClC,UACA,GAAG,SAC+B;AAClC,QACE,oBAAC,mBAAmB;EAAS,OAAO;EACjC;GAC2B"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/search-field/context.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'use client';\n\nimport 'client-only';\nimport { createContext } from 'react';\nimport type { ContextValue } from 'react-aria-components';\nimport type { ProviderProps } from '@/lib/types';\nimport type { SearchFieldProps } from './types';\n\n/**\n * Context for SearchField component\n *\n * Provides context for SearchField component to share props\n */\nexport const SearchFieldContext =\n  createContext<ContextValue<SearchFieldProps, HTMLDivElement>>(null);\n\n/**\n * Provider for SearchField component\n *\n * Allows setting default props for all SearchField components within\n *\n * @param props - Provider props including children and default SearchFieldProps.\n * @returns The provider component wrapping children with context.\n */\nexport function SearchFieldProvider({\n  children,\n  ...props\n}: ProviderProps<SearchFieldProps>) {\n  return (\n    <SearchFieldContext.Provider value={props}>\n      {children}\n    </SearchFieldContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,qBACX,cAA8D,KAAK;;;;;;;;;AAUrE,SAAgB,oBAAoB,EAClC,UACA,GAAG,SAC+B;AAClC,QACE,oBAAC,mBAAmB;EAAS,OAAO;EACjC;GAC2B"}

package/dist/components/search-field/index.d.ts

@@ -12,45 +12,36 @@
 
 import { SearchFieldProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime136 from "react/jsx-runtime";
+import * as react_jsx_runtime153 from "react/jsx-runtime";
 
 //#region src/components/search-field/index.d.ts
 
 /**
- * SearchField - A customizable search input component built on React Aria Components
+ * SearchField - Search input with integrated search icon, loading state, and clear button
  *
- * Provides a search input with integrated search icon, loading state, and clear functionality.
- * Supports two visual variants (filled/outlined), and granular styling control.
+ * Supports outline and filled variants with automatic icon sizing.
  *
- * @example
- * // Basic search field
- * <SearchField inputProps={{ placeholder: 'Search...' }} />
- *
- * @example
- * // Filled variant with custom styling
- * <SearchField
- *   variant="filled"
- *   inputProps={{ placeholder: 'Search...' }}
- *   classNames={{
- *     input: "bg-info-bold",
- *     searchIcon: "fg-accent-primary-bold"
- *   }}
- * />
+ * @param props - {@link SearchFieldProps}
+ * @param props.ref - Forwarded ref for the field container.
+ * @param props.classNames - Custom CSS class names for field elements.
+ * @param props.inputProps - Additional props for the input element.
+ * @param props.isLoading - Whether to show loading spinner instead of clear button.
+ * @param props.variant - Visual variant ('outline' or 'filled').
+ * @returns The rendered SearchField component.
  *
  * @example
- * // With event handlers
+ * ```tsx
  * <SearchField
- *   inputProps: {
- *     placeholder: 'Search...',
- *   },
- *   onSubmit={(value) => console.log('Search:', value)}
+ *   label="Search"
+ *   placeholder="Search items..."
  *   onChange={(value) => setQuery(value)}
  * />
+ * ```
  */
 declare function SearchField({
   ref,
   ...props
-}: SearchFieldProps): react_jsx_runtime136.JSX.Element;
+}: SearchFieldProps): react_jsx_runtime153.JSX.Element;
 //#endregion
 export { SearchField };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/search-field/index.js

@@ -20,40 +20,33 @@ import "client-only";
 import { clsx } from "@accelint/design-foundation/lib/utils";
 import { Button, Input, SearchField as SearchField$1, composeRenderProps, useContextProps } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { CancelFill, Loop, Search } from "@accelint/icons";
+import CancelFill from "@accelint/icons/cancel-fill";
+import Loop from "@accelint/icons/loop";
+import Search from "@accelint/icons/search";
 import styles from "./styles.module.css";
 
 //#region src/components/search-field/index.tsx
 /**
-* SearchField - A customizable search input component built on React Aria Components
+* SearchField - Search input with integrated search icon, loading state, and clear button
 *
-* Provides a search input with integrated search icon, loading state, and clear functionality.
-* Supports two visual variants (filled/outlined), and granular styling control.
+* Supports outline and filled variants with automatic icon sizing.
 *
-* @example
-* // Basic search field
-* <SearchField inputProps={{ placeholder: 'Search...' }} />
-*
-* @example
-* // Filled variant with custom styling
-* <SearchField
-*   variant="filled"
-*   inputProps={{ placeholder: 'Search...' }}
-*   classNames={{
-*     input: "bg-info-bold",
-*     searchIcon: "fg-accent-primary-bold"
-*   }}
-* />
+* @param props - {@link SearchFieldProps}
+* @param props.ref - Forwarded ref for the field container.
+* @param props.classNames - Custom CSS class names for field elements.
+* @param props.inputProps - Additional props for the input element.
+* @param props.isLoading - Whether to show loading spinner instead of clear button.
+* @param props.variant - Visual variant ('outline' or 'filled').
+* @returns The rendered SearchField component.
 *
 * @example
-* // With event handlers
+* ```tsx
 * <SearchField
-*   inputProps: {
-*     placeholder: 'Search...',
-*   },
-*   onSubmit={(value) => console.log('Search:', value)}
+*   label="Search"
+*   placeholder="Search items..."
 *   onChange={(value) => setQuery(value)}
 * />
+* ```
 */
 function SearchField({ ref, ...props }) {
 	[props, ref] = useContextProps(props, ref ?? null, SearchFieldContext);

package/dist/components/search-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["AriaSearchField"],"sources":["../../../src/components/search-field/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'use client';\n\nimport { CancelFill, Loop, Search } from '@accelint/icons';\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport {\n  SearchField as AriaSearchField,\n  Button,\n  composeRenderProps,\n  Input,\n  useContextProps,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { IconProvider } from '../icon/context';\nimport { SearchFieldContext } from './context';\nimport styles from './styles.module.css';\nimport type { SearchFieldProps } from './types';\n\n/**\n * SearchField - A customizable search input component built on React Aria Components\n *\n * Provides a search input with integrated search icon, loading state, and clear functionality.\n * Supports two visual variants (filled/outlined), and granular styling control.\n *\n * @example\n * // Basic search field\n * <SearchField inputProps={{ placeholder: 'Search...' }} />\n *\n * @example\n * // Filled variant with custom styling\n * <SearchField\n *   variant=\"filled\"\n *   inputProps={{ placeholder: 'Search...' }}\n *   classNames={{\n *     input: \"bg-info-bold\",\n *     searchIcon: \"fg-accent-primary-bold\"\n *   }}\n * />\n *\n * @example\n * // With event handlers\n * <SearchField\n *   inputProps: {\n *     placeholder: 'Search...',\n *   },\n *   onSubmit={(value) => console.log('Search:', value)}\n *   onChange={(value) => setQuery(value)}\n * />\n */\nexport function SearchField({ ref, ...props }: SearchFieldProps) {\n  [props, ref] = useContextProps(props, ref ?? null, SearchFieldContext);\n\n  const {\n    classNames,\n    inputProps,\n    isLoading = false,\n    variant = 'outline',\n    ...rest\n  } = props;\n\n  return (\n    <IconProvider size='small'>\n      <AriaSearchField\n        {...rest}\n        ref={ref}\n        className={composeRenderProps(classNames?.field, (className) =>\n          clsx('group/search-field', styles.field, styles[variant], className),\n        )}\n      >\n        <Icon className={clsx(styles.search, classNames?.search)}>\n          <Search />\n        </Icon>\n        <Input\n          {...inputProps}\n          className={composeRenderProps(classNames?.input, (className) =>\n            clsx(styles.input, className),\n          )}\n          type='search'\n        />\n        {isLoading ? (\n          <Icon className={clsx(styles.loading, classNames?.loading)}>\n            <Loop />\n          </Icon>\n        ) : (\n          <Button\n            className={composeRenderProps(classNames?.clear, (className) =>\n              clsx(styles.clear, className),\n            )}\n          >\n            <Icon>\n              <CancelFill />\n            </Icon>\n          </Button>\n        )}\n      </AriaSearchField>\n    </IconProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DA,SAAgB,YAAY,EAAE,KAAK,GAAG,SAA2B;AAC/D,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,mBAAmB;CAEtE,MAAM,EACJ,YACA,YACA,YAAY,OACZ,UAAU,WACV,GAAG,SACD;AAEJ,QACE,oBAAC;EAAa,MAAK;YACjB,qBAACA;GACC,GAAI;GACC;GACL,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,sBAAsB,OAAO,OAAO,OAAO,UAAU,UAAU,CACrE;;IAED,oBAAC;KAAK,WAAW,KAAK,OAAO,QAAQ,YAAY,OAAO;eACtD,oBAAC,WAAS;MACL;IACP,oBAAC;KACC,GAAI;KACJ,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;KACD,MAAK;MACL;IACD,YACC,oBAAC;KAAK,WAAW,KAAK,OAAO,SAAS,YAAY,QAAQ;eACxD,oBAAC,SAAO;MACH,GAEP,oBAAC;KACC,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;eAED,oBAAC,kBACC,oBAAC,eAAa,GACT;MACA;;IAEK;GACL"}
+{"version":3,"file":"index.js","names":["AriaSearchField"],"sources":["../../../src/components/search-field/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'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport CancelFill from '@accelint/icons/cancel-fill';\nimport Loop from '@accelint/icons/loop';\nimport Search from '@accelint/icons/search';\nimport {\n  SearchField as AriaSearchField,\n  Button,\n  composeRenderProps,\n  Input,\n  useContextProps,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { IconProvider } from '../icon/context';\nimport { SearchFieldContext } from './context';\nimport styles from './styles.module.css';\nimport type { SearchFieldProps } from './types';\n\n/**\n * SearchField - Search input with integrated search icon, loading state, and clear button\n *\n * Supports outline and filled variants with automatic icon sizing.\n *\n * @param props - {@link SearchFieldProps}\n * @param props.ref - Forwarded ref for the field container.\n * @param props.classNames - Custom CSS class names for field elements.\n * @param props.inputProps - Additional props for the input element.\n * @param props.isLoading - Whether to show loading spinner instead of clear button.\n * @param props.variant - Visual variant ('outline' or 'filled').\n * @returns The rendered SearchField component.\n *\n * @example\n * ```tsx\n * <SearchField\n *   label=\"Search\"\n *   placeholder=\"Search items...\"\n *   onChange={(value) => setQuery(value)}\n * />\n * ```\n */\nexport function SearchField({ ref, ...props }: SearchFieldProps) {\n  [props, ref] = useContextProps(props, ref ?? null, SearchFieldContext);\n\n  const {\n    classNames,\n    inputProps,\n    isLoading = false,\n    variant = 'outline',\n    ...rest\n  } = props;\n\n  return (\n    <IconProvider size='small'>\n      <AriaSearchField\n        {...rest}\n        ref={ref}\n        className={composeRenderProps(classNames?.field, (className) =>\n          clsx('group/search-field', styles.field, styles[variant], className),\n        )}\n      >\n        <Icon className={clsx(styles.search, classNames?.search)}>\n          <Search />\n        </Icon>\n        <Input\n          {...inputProps}\n          className={composeRenderProps(classNames?.input, (className) =>\n            clsx(styles.input, className),\n          )}\n          type='search'\n        />\n        {isLoading ? (\n          <Icon className={clsx(styles.loading, classNames?.loading)}>\n            <Loop />\n          </Icon>\n        ) : (\n          <Button\n            className={composeRenderProps(classNames?.clear, (className) =>\n              clsx(styles.clear, className),\n            )}\n          >\n            <Icon>\n              <CancelFill />\n            </Icon>\n          </Button>\n        )}\n      </AriaSearchField>\n    </IconProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,SAAgB,YAAY,EAAE,KAAK,GAAG,SAA2B;AAC/D,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,mBAAmB;CAEtE,MAAM,EACJ,YACA,YACA,YAAY,OACZ,UAAU,WACV,GAAG,SACD;AAEJ,QACE,oBAAC;EAAa,MAAK;YACjB,qBAACA;GACC,GAAI;GACC;GACL,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,sBAAsB,OAAO,OAAO,OAAO,UAAU,UAAU,CACrE;;IAED,oBAAC;KAAK,WAAW,KAAK,OAAO,QAAQ,YAAY,OAAO;eACtD,oBAAC,WAAS;MACL;IACP,oBAAC;KACC,GAAI;KACJ,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;KACD,MAAK;MACL;IACD,YACC,oBAAC;KAAK,WAAW,KAAK,OAAO,SAAS,YAAY,QAAQ;eACxD,oBAAC,SAAO;MACH,GAEP,oBAAC;KACC,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;eAED,oBAAC,kBACC,oBAAC,eAAa,GACT;MACA;;IAEK;GACL"}

package/dist/components/search-field/types.d.ts

@@ -16,6 +16,19 @@ import { RefAttributes } from "react";
 import { InputProps, SearchFieldProps as SearchFieldProps$1 } from "react-aria-components";
 
 //#region src/components/search-field/types.d.ts
+/**
+ * Props for SearchField component.
+ *
+ * Extends AriaSearchFieldProps with custom classNames, variant, and loading support.
+ * - `classNames.field` - CSS class for the field container.
+ * - `classNames.input` - CSS class for the input element.
+ * - `classNames.clear` - CSS class for the clear button.
+ * - `classNames.loading` - CSS class for the loading spinner.
+ * - `classNames.search` - CSS class for the search icon.
+ * - `inputProps` - Additional props passed to the Input element.
+ * - `variant` - Visual style ('filled' or 'outline').
+ * - `isLoading` - Displays a loading spinner when true.
+ */
 interface SearchFieldProps extends Omit<SearchFieldProps$1, 'className' | 'pattern' | 'type'>, RefAttributes<HTMLDivElement> {
   classNames?: {
     field?: SearchFieldProps$1['className'];

package/dist/components/select-field/context.d.ts

@@ -13,16 +13,23 @@
 import { ProviderProps } from "../../lib/types.js";
 import { SelectFieldProps } from "./types.js";
 import "client-only";
-import * as react38 from "react";
+import * as react37 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime137 from "react/jsx-runtime";
+import * as react_jsx_runtime154 from "react/jsx-runtime";
 
 //#region src/components/select-field/context.d.ts
-declare const SelectFieldContext: react38.Context<ContextValue<SelectFieldProps, HTMLDivElement>>;
+/** Context for SelectField component */
+declare const SelectFieldContext: react37.Context<ContextValue<SelectFieldProps, HTMLDivElement>>;
+/**
+ * Provider for setting default props across multiple SelectField components
+ *
+ * @param props - Provider props including children and default SelectFieldProps.
+ * @returns The provider component wrapping children with context.
+ */
 declare function SelectFieldProvider({
   children,
   ...props
-}: ProviderProps<SelectFieldProps>): react_jsx_runtime137.JSX.Element;
+}: ProviderProps<SelectFieldProps>): react_jsx_runtime154.JSX.Element;
 //#endregion
 export { SelectFieldContext, SelectFieldProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/select-field/context.js

@@ -18,7 +18,14 @@ import { createContext } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/select-field/context.tsx
+/** Context for SelectField component */
 const SelectFieldContext = createContext(null);
+/**
+* Provider for setting default props across multiple SelectField components
+*
+* @param props - Provider props including children and default SelectFieldProps.
+* @returns The provider component wrapping children with context.
+*/
 function SelectFieldProvider({ children, ...props }) {
 	return /* @__PURE__ */ jsx(SelectFieldContext.Provider, {
 		value: props,

package/dist/components/select-field/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/select-field/context.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'use client';\n\nimport type { ProviderProps } from '@/lib/types';\nimport 'client-only';\nimport { createContext } from 'react';\nimport type { ContextValue } from 'react-aria-components';\nimport type { SelectFieldProps } from './types';\n\nexport const SelectFieldContext =\n  createContext<ContextValue<SelectFieldProps, HTMLDivElement>>(null);\n\nexport function SelectFieldProvider({\n  children,\n  ...props\n}: ProviderProps<SelectFieldProps>) {\n  return (\n    <SelectFieldContext.Provider value={props}>\n      {children}\n    </SelectFieldContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,MAAa,qBACX,cAA8D,KAAK;AAErE,SAAgB,oBAAoB,EAClC,UACA,GAAG,SAC+B;AAClC,QACE,oBAAC,mBAAmB;EAAS,OAAO;EACjC;GAC2B"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/select-field/context.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'use client';\n\nimport type { ProviderProps } from '@/lib/types';\nimport 'client-only';\nimport { createContext } from 'react';\nimport type { ContextValue } from 'react-aria-components';\nimport type { SelectFieldProps } from './types';\n\n/** Context for SelectField component */\nexport const SelectFieldContext =\n  createContext<ContextValue<SelectFieldProps, HTMLDivElement>>(null);\n\n/**\n * Provider for setting default props across multiple SelectField components\n *\n * @param props - Provider props including children and default SelectFieldProps.\n * @returns The provider component wrapping children with context.\n */\nexport function SelectFieldProvider({\n  children,\n  ...props\n}: ProviderProps<SelectFieldProps>) {\n  return (\n    <SelectFieldContext.Provider value={props}>\n      {children}\n    </SelectFieldContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoBA,MAAa,qBACX,cAA8D,KAAK;;;;;;;AAQrE,SAAgB,oBAAoB,EAClC,UACA,GAAG,SAC+B;AAClC,QACE,oBAAC,mBAAmB;EAAS,OAAO;EACjC;GAC2B"}

package/dist/components/select-field/index.d.ts

@@ -12,58 +12,38 @@
 
 import { SelectFieldProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime138 from "react/jsx-runtime";
+import * as react_jsx_runtime155 from "react/jsx-runtime";
 
 //#region src/components/select-field/index.d.ts
 
 /**
- * SelectField - A dropdown selection component with comprehensive form field features
+ * SelectField - Dropdown select with form field features
  *
- * Provides an accessible and feature-rich select dropdown with built-in validation,
- * multiple sizing options, virtualization support for large datasets, and seamless
- * integration with form libraries. Includes label, description, and error messaging
- * capabilities with customizable styling through className props.
+ * Includes label, description, error messaging, and virtualized rendering for large datasets.
  *
- * @example
- * // Basic select field
- * <SelectField label='Country' placeholder='Select a country'>
- *   <OptionsItem textValue='us'>United States</OptionsItem>
- *   <OptionsItem textValue='ca'>Canada</OptionsItem>
- *   <OptionsItem textValue='uk'>United Kingdom</OptionsItem>
- * </SelectField>
- *
- * @example
- * // Select field with validation and description
- * <SelectField
- *   label="Priority Level"
- *   description="Choose the urgency level for this task"
- *   errorMessage={errors.priority}
- *   isRequired
- *   isInvalid={!!errors.priority}
- * >
- *   <OptionsItem textValue="low">Low</OptionsItem>
- *   <OptionsItem textValue="medium">Medium</OptionsItem>
- *   <OptionsItem textValue="high">High</OptionsItem>
- * </SelectField>
+ * @param props - {@link SelectFieldProps}
+ * @param props.ref - Forwarded ref for the field container.
+ * @param props.size - Field size ('medium' or 'small').
+ * @param props.classNames - Custom CSS class names for field elements.
+ * @param props.label - Label text for the field.
+ * @param props.description - Helper text below the field.
+ * @param props.errorMessage - Error message displayed when invalid.
+ * @param props.isReadOnly - Displays value without dropdown interaction.
+ * @param props.layoutOptions - Virtualizer layout options for large lists.
+ * @returns The rendered SelectField component.
  *
  * @example
- * // Small size select field with custom styling
- * <SelectField
- *   size="small"
- *   placeholder="Quick select"
- *   classNames={{
- *     field: "custom-field-styles",
- *     trigger: "custom-trigger-styles"
- *   }}
- * >
- *   <OptionsItem textValue="option1">Option 1</OptionsItem>
- *   <OptionsItem textValue="option2">Option 2</OptionsItem>
+ * ```tsx
+ * <SelectField label="Country" onSelectionChange={setCountry}>
+ *   <Option id="us">United States</Option>
+ *   <Option id="ca">Canada</Option>
  * </SelectField>
+ * ```
  */
 declare function SelectField({
   ref,
   ...props
-}: SelectFieldProps): react_jsx_runtime138.JSX.Element;
+}: SelectFieldProps): react_jsx_runtime155.JSX.Element;
 //#endregion
 export { SelectField };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/select-field/index.js

@@ -27,48 +27,28 @@ import styles from "./styles.module.css";
 
 //#region src/components/select-field/index.tsx
 /**
-* SelectField - A dropdown selection component with comprehensive form field features
+* SelectField - Dropdown select with form field features
 *
-* Provides an accessible and feature-rich select dropdown with built-in validation,
-* multiple sizing options, virtualization support for large datasets, and seamless
-* integration with form libraries. Includes label, description, and error messaging
-* capabilities with customizable styling through className props.
+* Includes label, description, error messaging, and virtualized rendering for large datasets.
 *
-* @example
-* // Basic select field
-* <SelectField label='Country' placeholder='Select a country'>
-*   <OptionsItem textValue='us'>United States</OptionsItem>
-*   <OptionsItem textValue='ca'>Canada</OptionsItem>
-*   <OptionsItem textValue='uk'>United Kingdom</OptionsItem>
-* </SelectField>
-*
-* @example
-* // Select field with validation and description
-* <SelectField
-*   label="Priority Level"
-*   description="Choose the urgency level for this task"
-*   errorMessage={errors.priority}
-*   isRequired
-*   isInvalid={!!errors.priority}
-* >
-*   <OptionsItem textValue="low">Low</OptionsItem>
-*   <OptionsItem textValue="medium">Medium</OptionsItem>
-*   <OptionsItem textValue="high">High</OptionsItem>
-* </SelectField>
+* @param props - {@link SelectFieldProps}
+* @param props.ref - Forwarded ref for the field container.
+* @param props.size - Field size ('medium' or 'small').
+* @param props.classNames - Custom CSS class names for field elements.
+* @param props.label - Label text for the field.
+* @param props.description - Helper text below the field.
+* @param props.errorMessage - Error message displayed when invalid.
+* @param props.isReadOnly - Displays value without dropdown interaction.
+* @param props.layoutOptions - Virtualizer layout options for large lists.
+* @returns The rendered SelectField component.
 *
 * @example
-* // Small size select field with custom styling
-* <SelectField
-*   size="small"
-*   placeholder="Quick select"
-*   classNames={{
-*     field: "custom-field-styles",
-*     trigger: "custom-trigger-styles"
-*   }}
-* >
-*   <OptionsItem textValue="option1">Option 1</OptionsItem>
-*   <OptionsItem textValue="option2">Option 2</OptionsItem>
+* ```tsx
+* <SelectField label="Country" onSelectionChange={setCountry}>
+*   <Option id="us">United States</Option>
+*   <Option id="ca">Canada</Option>
 * </SelectField>
+* ```
 */
 function SelectField({ ref, ...props }) {
 	[props, ref] = useContextProps(props, ref ?? null, SelectFieldContext);
@@ -100,7 +80,7 @@ function SelectField({ ref, ...props }) {
 				className: composeRenderProps(classNames?.trigger, (className) => clsx(styles.trigger, className)),
 				size,
 				variant: "outline",
-				children: [/* @__PURE__ */ jsx(SelectValue, { className: clsx(styles.value, classNames?.value) }), /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronDown, { className: "transform group-open/select-field:rotate-180" }) })]
+				children: [/* @__PURE__ */ jsx(SelectValue, { className: clsx(styles.value, classNames?.value) }), /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(ChevronDown, { className: styles.chevron }) })]
 			}),
 			shouldShowDescription && /* @__PURE__ */ jsx(Text, {
 				slot: "description",

package/dist/components/select-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["AriaSelect","Label","AriaButton","Button","children"],"sources":["../../../src/components/select-field/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'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport ChevronDown from '@accelint/icons/chevron-down';\nimport {\n  Button as AriaButton,\n  Select as AriaSelect,\n  composeRenderProps,\n  FieldError,\n  ListLayout,\n  Popover,\n  SelectValue,\n  Text,\n  useContextProps,\n  Virtualizer,\n} from 'react-aria-components';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { Options } from '../options';\nimport { SelectFieldContext } from './context';\nimport styles from './styles.module.css';\nimport type { SelectFieldProps } from './types';\n\n/**\n * SelectField - A dropdown selection component with comprehensive form field features\n *\n * Provides an accessible and feature-rich select dropdown with built-in validation,\n * multiple sizing options, virtualization support for large datasets, and seamless\n * integration with form libraries. Includes label, description, and error messaging\n * capabilities with customizable styling through className props.\n *\n * @example\n * // Basic select field\n * <SelectField label='Country' placeholder='Select a country'>\n *   <OptionsItem textValue='us'>United States</OptionsItem>\n *   <OptionsItem textValue='ca'>Canada</OptionsItem>\n *   <OptionsItem textValue='uk'>United Kingdom</OptionsItem>\n * </SelectField>\n *\n * @example\n * // Select field with validation and description\n * <SelectField\n *   label=\"Priority Level\"\n *   description=\"Choose the urgency level for this task\"\n *   errorMessage={errors.priority}\n *   isRequired\n *   isInvalid={!!errors.priority}\n * >\n *   <OptionsItem textValue=\"low\">Low</OptionsItem>\n *   <OptionsItem textValue=\"medium\">Medium</OptionsItem>\n *   <OptionsItem textValue=\"high\">High</OptionsItem>\n * </SelectField>\n *\n * @example\n * // Small size select field with custom styling\n * <SelectField\n *   size=\"small\"\n *   placeholder=\"Quick select\"\n *   classNames={{\n *     field: \"custom-field-styles\",\n *     trigger: \"custom-trigger-styles\"\n *   }}\n * >\n *   <OptionsItem textValue=\"option1\">Option 1</OptionsItem>\n *   <OptionsItem textValue=\"option2\">Option 2</OptionsItem>\n * </SelectField>\n */\nexport function SelectField({ ref, ...props }: SelectFieldProps) {\n  [props, ref] = useContextProps(props, ref ?? null, SelectFieldContext);\n\n  const {\n    size = 'medium',\n    children,\n    classNames,\n    description: descriptionProp,\n    errorMessage: errorMessageProp,\n    label: labelProp,\n    layoutOptions,\n    isInvalid: isInvalidProp,\n    isReadOnly,\n    ...rest\n  } = props;\n\n  const errorMessage = errorMessageProp?.trim() ?? null;\n  const hasError = !!errorMessage;\n  const isInvalid = isInvalidProp ?? hasError;\n  const isSmall = size === 'small';\n  const showLabel = !isSmall && !!labelProp;\n  const shouldShowDescription =\n    !isReadOnly && !!descriptionProp && !(isSmall || isInvalid);\n\n  return (\n    <AriaSelect\n      {...rest}\n      ref={ref}\n      className={composeRenderProps(classNames?.field, (className) =>\n        clsx('group/select-field', styles.field, className),\n      )}\n      isInvalid={isInvalid}\n      data-size={size}\n      data-readonly={isReadOnly}\n    >\n      {composeRenderProps(\n        children,\n        (children, { isRequired, isDisabled, isInvalid }) => (\n          <>\n            {showLabel && (\n              <Label\n                className={clsx(styles.label, classNames?.label)}\n                isRequired={isRequired}\n                isDisabled={isDisabled}\n              >\n                {labelProp}\n              </Label>\n            )}\n            {isReadOnly ? (\n              // Using the native RAC disabled button component because we don't want the DTK button styles\n              <AriaButton isDisabled className={styles.readonly}>\n                <SelectValue\n                  className={clsx(styles.value, classNames?.value)}\n                />\n              </AriaButton>\n            ) : (\n              <Button\n                className={composeRenderProps(\n                  classNames?.trigger,\n                  (className) => clsx(styles.trigger, className),\n                )}\n                size={size}\n                variant='outline'\n              >\n                <SelectValue\n                  className={clsx(styles.value, classNames?.value)}\n                />\n                <Icon>\n                  <ChevronDown className='transform group-open/select-field:rotate-180' />\n                </Icon>\n              </Button>\n            )}\n            {shouldShowDescription && (\n              <Text\n                slot='description'\n                className={clsx(styles.description, classNames?.description)}\n              >\n                {descriptionProp}\n              </Text>\n            )}\n            <FieldError\n              className={composeRenderProps(classNames?.error, (className) =>\n                clsx(styles.error, className),\n              )}\n            >\n              {errorMessage}\n            </FieldError>\n            <Popover\n              className={composeRenderProps(classNames?.popover, (className) =>\n                clsx(styles.popover, className),\n              )}\n            >\n              <Virtualizer layout={ListLayout} layoutOptions={layoutOptions}>\n                <Options>{children}</Options>\n              </Virtualizer>\n            </Popover>\n          </>\n        ),\n      )}\n    </AriaSelect>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgFA,SAAgB,YAAY,EAAE,KAAK,GAAG,SAA2B;AAC/D,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,mBAAmB;CAEtE,MAAM,EACJ,OAAO,UACP,UACA,YACA,aAAa,iBACb,cAAc,kBACd,OAAO,WACP,eACA,WAAW,eACX,YACA,GAAG,SACD;CAEJ,MAAM,eAAe,kBAAkB,MAAM,IAAI;CAEjD,MAAM,YAAY,iBADD,CAAC,CAAC;CAEnB,MAAM,UAAU,SAAS;CACzB,MAAM,YAAY,CAAC,WAAW,CAAC,CAAC;CAChC,MAAM,wBACJ,CAAC,cAAc,CAAC,CAAC,mBAAmB,EAAE,WAAW;AAEnD,QACE,oBAACA;EACC,GAAI;EACC;EACL,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,sBAAsB,OAAO,OAAO,UAAU,CACpD;EACU;EACX,aAAW;EACX,iBAAe;YAEd,mBACC,WACC,YAAU,EAAE,YAAY,YAAY,6BACnC;GACG,aACC,oBAACC;IACC,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;IACpC;IACA;cAEX;KACK;GAET,aAEC,oBAACC;IAAW;IAAW,WAAW,OAAO;cACvC,oBAAC,eACC,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM,GAChD;KACS,GAEb,qBAACC;IACC,WAAW,mBACT,YAAY,UACX,cAAc,KAAK,OAAO,SAAS,UAAU,CAC/C;IACK;IACN,SAAQ;eAER,oBAAC,eACC,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM,GAChD,EACF,oBAAC,kBACC,oBAAC,eAAY,WAAU,iDAAiD,GACnE;KACA;GAEV,yBACC,oBAAC;IACC,MAAK;IACL,WAAW,KAAK,OAAO,aAAa,YAAY,YAAY;cAE3D;KACI;GAET,oBAAC;IACC,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;cAEA;KACU;GACb,oBAAC;IACC,WAAW,mBAAmB,YAAY,UAAU,cAClD,KAAK,OAAO,SAAS,UAAU,CAChC;cAED,oBAAC;KAAY,QAAQ;KAA2B;eAC9C,oBAAC,qBAASC,aAAmB;MACjB;KACN;MACT,CAEN;GACU"}
+{"version":3,"file":"index.js","names":["AriaSelect","Label","AriaButton","Button","children"],"sources":["../../../src/components/select-field/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'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport ChevronDown from '@accelint/icons/chevron-down';\nimport {\n  Button as AriaButton,\n  Select as AriaSelect,\n  composeRenderProps,\n  FieldError,\n  ListLayout,\n  Popover,\n  SelectValue,\n  Text,\n  useContextProps,\n  Virtualizer,\n} from 'react-aria-components';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { Options } from '../options';\nimport { SelectFieldContext } from './context';\nimport styles from './styles.module.css';\nimport type { SelectFieldProps } from './types';\n\n/**\n * SelectField - Dropdown select with form field features\n *\n * Includes label, description, error messaging, and virtualized rendering for large datasets.\n *\n * @param props - {@link SelectFieldProps}\n * @param props.ref - Forwarded ref for the field container.\n * @param props.size - Field size ('medium' or 'small').\n * @param props.classNames - Custom CSS class names for field elements.\n * @param props.label - Label text for the field.\n * @param props.description - Helper text below the field.\n * @param props.errorMessage - Error message displayed when invalid.\n * @param props.isReadOnly - Displays value without dropdown interaction.\n * @param props.layoutOptions - Virtualizer layout options for large lists.\n * @returns The rendered SelectField component.\n *\n * @example\n * ```tsx\n * <SelectField label=\"Country\" onSelectionChange={setCountry}>\n *   <Option id=\"us\">United States</Option>\n *   <Option id=\"ca\">Canada</Option>\n * </SelectField>\n * ```\n */\nexport function SelectField({ ref, ...props }: SelectFieldProps) {\n  [props, ref] = useContextProps(props, ref ?? null, SelectFieldContext);\n\n  const {\n    size = 'medium',\n    children,\n    classNames,\n    description: descriptionProp,\n    errorMessage: errorMessageProp,\n    label: labelProp,\n    layoutOptions,\n    isInvalid: isInvalidProp,\n    isReadOnly,\n    ...rest\n  } = props;\n\n  const errorMessage = errorMessageProp?.trim() ?? null;\n  const hasError = !!errorMessage;\n  const isInvalid = isInvalidProp ?? hasError;\n  const isSmall = size === 'small';\n  const showLabel = !isSmall && !!labelProp;\n  const shouldShowDescription =\n    !isReadOnly && !!descriptionProp && !(isSmall || isInvalid);\n\n  return (\n    <AriaSelect\n      {...rest}\n      ref={ref}\n      className={composeRenderProps(classNames?.field, (className) =>\n        clsx('group/select-field', styles.field, className),\n      )}\n      isInvalid={isInvalid}\n      data-size={size}\n      data-readonly={isReadOnly}\n    >\n      {composeRenderProps(\n        children,\n        (children, { isRequired, isDisabled, isInvalid }) => (\n          <>\n            {showLabel && (\n              <Label\n                className={clsx(styles.label, classNames?.label)}\n                isRequired={isRequired}\n                isDisabled={isDisabled}\n              >\n                {labelProp}\n              </Label>\n            )}\n            {isReadOnly ? (\n              // Using the native RAC disabled button component because we don't want the DTK button styles\n              <AriaButton isDisabled className={styles.readonly}>\n                <SelectValue\n                  className={clsx(styles.value, classNames?.value)}\n                />\n              </AriaButton>\n            ) : (\n              <Button\n                className={composeRenderProps(\n                  classNames?.trigger,\n                  (className) => clsx(styles.trigger, className),\n                )}\n                size={size}\n                variant='outline'\n              >\n                <SelectValue\n                  className={clsx(styles.value, classNames?.value)}\n                />\n                <Icon>\n                  <ChevronDown className={styles.chevron} />\n                </Icon>\n              </Button>\n            )}\n            {shouldShowDescription && (\n              <Text\n                slot='description'\n                className={clsx(styles.description, classNames?.description)}\n              >\n                {descriptionProp}\n              </Text>\n            )}\n            <FieldError\n              className={composeRenderProps(classNames?.error, (className) =>\n                clsx(styles.error, className),\n              )}\n            >\n              {errorMessage}\n            </FieldError>\n            <Popover\n              className={composeRenderProps(classNames?.popover, (className) =>\n                clsx(styles.popover, className),\n              )}\n            >\n              <Virtualizer layout={ListLayout} layoutOptions={layoutOptions}>\n                <Options>{children}</Options>\n              </Virtualizer>\n            </Popover>\n          </>\n        ),\n      )}\n    </AriaSelect>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DA,SAAgB,YAAY,EAAE,KAAK,GAAG,SAA2B;AAC/D,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,mBAAmB;CAEtE,MAAM,EACJ,OAAO,UACP,UACA,YACA,aAAa,iBACb,cAAc,kBACd,OAAO,WACP,eACA,WAAW,eACX,YACA,GAAG,SACD;CAEJ,MAAM,eAAe,kBAAkB,MAAM,IAAI;CAEjD,MAAM,YAAY,iBADD,CAAC,CAAC;CAEnB,MAAM,UAAU,SAAS;CACzB,MAAM,YAAY,CAAC,WAAW,CAAC,CAAC;CAChC,MAAM,wBACJ,CAAC,cAAc,CAAC,CAAC,mBAAmB,EAAE,WAAW;AAEnD,QACE,oBAACA;EACC,GAAI;EACC;EACL,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,sBAAsB,OAAO,OAAO,UAAU,CACpD;EACU;EACX,aAAW;EACX,iBAAe;YAEd,mBACC,WACC,YAAU,EAAE,YAAY,YAAY,6BACnC;GACG,aACC,oBAACC;IACC,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;IACpC;IACA;cAEX;KACK;GAET,aAEC,oBAACC;IAAW;IAAW,WAAW,OAAO;cACvC,oBAAC,eACC,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM,GAChD;KACS,GAEb,qBAACC;IACC,WAAW,mBACT,YAAY,UACX,cAAc,KAAK,OAAO,SAAS,UAAU,CAC/C;IACK;IACN,SAAQ;eAER,oBAAC,eACC,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM,GAChD,EACF,oBAAC,kBACC,oBAAC,eAAY,WAAW,OAAO,UAAW,GACrC;KACA;GAEV,yBACC,oBAAC;IACC,MAAK;IACL,WAAW,KAAK,OAAO,aAAa,YAAY,YAAY;cAE3D;KACI;GAET,oBAAC;IACC,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;cAEA;KACU;GACb,oBAAC;IACC,WAAW,mBAAmB,YAAY,UAAU,cAClD,KAAK,OAAO,SAAS,UAAU,CAChC;cAED,oBAAC;KAAY,QAAQ;KAA2B;eAC9C,oBAAC,qBAASC,aAAmB;MACjB;KACN;MACT,CAEN;GACU"}

package/dist/components/select-field/styles.module.css

@@ -40,6 +40,14 @@
   .readonly {
     @apply py-xs block;
   }
+
+  .chevron {
+    @apply transform;
+
+    @variant group-open/select-field {
+      @apply rotate-180;
+    }
+  }
 }
 
 @layer components.l2 {

package/dist/components/select-field/types.d.ts

@@ -16,6 +16,24 @@ import { RefAttributes } from "react";
 import { FieldErrorProps, ListLayoutOptions, PopoverProps, SelectProps, VirtualizerProps } from "react-aria-components";
 
 //#region src/components/select-field/types.d.ts
+
+/**
+ * Props for SelectField component.
+ *
+ * Extends AriaSelectProps with form field features and virtualization.
+ * - `classNames.description` - CSS class for the description text.
+ * - `classNames.error` - CSS class for the error message.
+ * - `classNames.field` - CSS class for the field container.
+ * - `classNames.label` - CSS class for the label.
+ * - `classNames.trigger` - CSS class for the trigger button.
+ * - `classNames.value` - CSS class for the selected value display.
+ * - `classNames.popover` - CSS class for the dropdown popover.
+ * - `label` - Label text for the field.
+ * - `description` - Helper text below the field.
+ * - `errorMessage` - Error message displayed when invalid.
+ * - `isReadOnly` - Displays value without dropdown interaction.
+ * - `size` - Field size ('medium' or 'small').
+ */
 type SelectFieldProps = Omit<SelectProps, 'className'> & Pick<VirtualizerProps<ListLayoutOptions>, 'layoutOptions'> & RefAttributes<HTMLDivElement> & {
   classNames?: {
     description?: string;