@accelint/design-toolkit 9.1.1 → 9.3.0

package/dist/components/options/item.d.ts

@@ -12,7 +12,7 @@
 
 import { OptionsDataItem, OptionsItemProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime94 from "react/jsx-runtime";
+import * as react_jsx_runtime149 from "react/jsx-runtime";
 
 //#region src/components/options/item.d.ts
 declare function OptionsItem<T extends OptionsDataItem>({
@@ -21,7 +21,7 @@ declare function OptionsItem<T extends OptionsDataItem>({
   color,
   textValue,
   ...rest
-}: OptionsItemProps<T>): react_jsx_runtime94.JSX.Element;
+}: OptionsItemProps<T>): react_jsx_runtime149.JSX.Element;
 //#endregion
 export { OptionsItem };
 //# sourceMappingURL=item.d.ts.map

package/dist/components/options/section.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { OptionsDataItem, OptionsSectionProps } from "./types.js";
-import * as react_jsx_runtime95 from "react/jsx-runtime";
+import * as react_jsx_runtime150 from "react/jsx-runtime";
 
 //#region src/components/options/section.d.ts
 declare function OptionsSection<T extends OptionsDataItem>({
@@ -19,7 +19,7 @@ declare function OptionsSection<T extends OptionsDataItem>({
   classNames,
   header,
   items
-}: OptionsSectionProps<T>): react_jsx_runtime95.JSX.Element;
+}: OptionsSectionProps<T>): react_jsx_runtime150.JSX.Element;
 //#endregion
 export { OptionsSection };
 //# sourceMappingURL=section.d.ts.map

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

@@ -12,10 +12,10 @@
 
 import { PaginationContextValue } from "./types.js";
 import "client-only";
-import * as react28 from "react";
+import * as react40 from "react";
 
 //#region src/components/pagination/context.d.ts
-declare const PaginationContext: react28.Context<PaginationContextValue>;
+declare const PaginationContext: react40.Context<PaginationContextValue>;
 //#endregion
 export { PaginationContext };
 //# sourceMappingURL=context.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { PaginationProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime98 from "react/jsx-runtime";
+import * as react_jsx_runtime151 from "react/jsx-runtime";
 
 //#region src/components/pagination/index.d.ts
 /**
@@ -39,7 +39,7 @@ declare function Pagination({
   isLoading,
   onChange,
   ...rest
-}: PaginationProps): react_jsx_runtime98.JSX.Element;
+}: PaginationProps): react_jsx_runtime151.JSX.Element;
 //#endregion
 export { Pagination };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/pagination/next.d.ts

@@ -12,13 +12,13 @@
 
 import { PaginationNextProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime100 from "react/jsx-runtime";
+import * as react_jsx_runtime152 from "react/jsx-runtime";
 
 //#region src/components/pagination/next.d.ts
 declare function PaginationNext({
   className,
   onPress
-}: PaginationNextProps): react_jsx_runtime100.JSX.Element;
+}: PaginationNextProps): react_jsx_runtime152.JSX.Element;
 //#endregion
 export { PaginationNext };
 //# sourceMappingURL=next.d.ts.map

package/dist/components/pagination/pages.d.ts

@@ -12,13 +12,13 @@
 
 import { PaginationPagesProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime102 from "react/jsx-runtime";
+import * as react_jsx_runtime154 from "react/jsx-runtime";
 
 //#region src/components/pagination/pages.d.ts
 declare function PaginationPages({
   className,
   onPress
-}: PaginationPagesProps): react_jsx_runtime102.JSX.Element[] | null;
+}: PaginationPagesProps): react_jsx_runtime154.JSX.Element[] | null;
 //#endregion
 export { PaginationPages };
 //# sourceMappingURL=pages.d.ts.map

package/dist/components/pagination/prev.d.ts

@@ -12,13 +12,13 @@
 
 import { PaginationPrevProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime103 from "react/jsx-runtime";
+import * as react_jsx_runtime144 from "react/jsx-runtime";
 
 //#region src/components/pagination/prev.d.ts
 declare function PaginationPrev({
   className,
   onPress
-}: PaginationPrevProps): react_jsx_runtime103.JSX.Element;
+}: PaginationPrevProps): react_jsx_runtime144.JSX.Element;
 //#endregion
 export { PaginationPrev };
 //# sourceMappingURL=prev.d.ts.map

package/dist/components/popover/content.d.ts

@@ -12,13 +12,13 @@
 
 import "client-only";
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime113 from "react/jsx-runtime";
+import * as react_jsx_runtime179 from "react/jsx-runtime";
 
 //#region src/components/popover/content.d.ts
 declare function PopoverContent({
   className,
   ...rest
-}: ComponentPropsWithRef<'div'>): react_jsx_runtime113.JSX.Element;
+}: ComponentPropsWithRef<'div'>): react_jsx_runtime179.JSX.Element;
 //#endregion
 export { PopoverContent };
 //# sourceMappingURL=content.d.ts.map

package/dist/components/popover/footer.d.ts

@@ -12,13 +12,13 @@
 
 import "client-only";
 import { ComponentPropsWithRef } from "react";
-import * as react_jsx_runtime129 from "react/jsx-runtime";
+import * as react_jsx_runtime180 from "react/jsx-runtime";
 
 //#region src/components/popover/footer.d.ts
 declare function PopoverFooter({
   children,
   className
-}: ComponentPropsWithRef<'footer'>): react_jsx_runtime129.JSX.Element;
+}: ComponentPropsWithRef<'footer'>): react_jsx_runtime180.JSX.Element;
 //#endregion
 export { PopoverFooter };
 //# sourceMappingURL=footer.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { PopoverProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime126 from "react/jsx-runtime";
+import * as react_jsx_runtime178 from "react/jsx-runtime";
 
 //#region src/components/popover/index.d.ts
 
@@ -51,7 +51,7 @@ declare function Popover({
   children,
   classNames,
   ...rest
-}: PopoverProps): react_jsx_runtime126.JSX.Element;
+}: PopoverProps): react_jsx_runtime178.JSX.Element;
 //#endregion
 export { Popover };
 //# sourceMappingURL=index.d.ts.map

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

@@ -12,13 +12,13 @@
 
 import "client-only";
 import { HeadingProps } from "react-aria-components";
-import * as react_jsx_runtime141 from "react/jsx-runtime";
+import * as react_jsx_runtime176 from "react/jsx-runtime";
 
 //#region src/components/popover/title.d.ts
 declare function PopoverTitle({
   className,
   ...rest
-}: HeadingProps): react_jsx_runtime141.JSX.Element;
+}: HeadingProps): react_jsx_runtime176.JSX.Element;
 //#endregion
 export { PopoverTitle };
 //# sourceMappingURL=title.d.ts.map

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

@@ -12,14 +12,14 @@
 
 import { PopoverTriggerProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime127 from "react/jsx-runtime";
+import * as react_jsx_runtime182 from "react/jsx-runtime";
 
 //#region src/components/popover/trigger.d.ts
 declare function PopoverTrigger({
   ref,
   children,
   ...rest
-}: PopoverTriggerProps): react_jsx_runtime127.JSX.Element;
+}: PopoverTriggerProps): react_jsx_runtime182.JSX.Element;
 //#endregion
 export { PopoverTrigger };
 //# sourceMappingURL=trigger.d.ts.map

package/dist/components/query-builder/action-element.d.ts

@@ -11,7 +11,7 @@
  */
 
 import "client-only";
-import * as react_jsx_runtime133 from "react/jsx-runtime";
+import * as react_jsx_runtime181 from "react/jsx-runtime";
 import { ActionProps } from "react-querybuilder";
 
 //#region src/components/query-builder/action-element.d.ts
@@ -20,7 +20,7 @@ declare function ActionElement({
   disabledTranslation,
   title: titleProp,
   handleOnClick
-}: ActionProps): react_jsx_runtime133.JSX.Element;
+}: ActionProps): react_jsx_runtime181.JSX.Element;
 //#endregion
 export { ActionElement };
 //# sourceMappingURL=action-element.d.ts.map

package/dist/components/query-builder/actions.d.ts

@@ -11,7 +11,7 @@
  */
 
 import "client-only";
-import * as react_jsx_runtime134 from "react/jsx-runtime";
+import * as react_jsx_runtime183 from "react/jsx-runtime";
 import { ActionProps } from "react-querybuilder";
 
 //#region src/components/query-builder/actions.d.ts
@@ -19,17 +19,17 @@ declare function RemoveRuleAction({
   handleOnClick,
   className,
   ...rest
-}: ActionProps): react_jsx_runtime134.JSX.Element;
+}: ActionProps): react_jsx_runtime183.JSX.Element;
 declare function LockAction({
   handleOnClick,
   className,
   ...rest
-}: ActionProps): react_jsx_runtime134.JSX.Element;
+}: ActionProps): react_jsx_runtime183.JSX.Element;
 declare function CloneAction({
   handleOnClick,
   className,
   ...rest
-}: ActionProps): react_jsx_runtime134.JSX.Element;
+}: ActionProps): react_jsx_runtime183.JSX.Element;
 //#endregion
 export { CloneAction, LockAction, RemoveRuleAction };
 //# sourceMappingURL=actions.d.ts.map

package/dist/components/query-builder/combinator-selector.d.ts

@@ -11,7 +11,7 @@
  */
 
 import "client-only";
-import * as react_jsx_runtime137 from "react/jsx-runtime";
+import * as react_jsx_runtime188 from "react/jsx-runtime";
 import { CombinatorSelectorProps } from "react-querybuilder";
 
 //#region src/components/query-builder/combinator-selector.d.ts
@@ -19,7 +19,7 @@ declare function CombinatorSelector({
   options,
   value,
   handleOnChange
-}: CombinatorSelectorProps): react_jsx_runtime137.JSX.Element;
+}: CombinatorSelectorProps): react_jsx_runtime188.JSX.Element;
 //#endregion
 export { CombinatorSelector };
 //# sourceMappingURL=combinator-selector.d.ts.map

package/dist/components/query-builder/index.d.ts

@@ -12,7 +12,7 @@
 
 import { QueryBuilderProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime114 from "react/jsx-runtime";
+import * as react_jsx_runtime126 from "react/jsx-runtime";
 
 //#region src/components/query-builder/index.d.ts
 
@@ -46,7 +46,7 @@ declare function QueryBuilder({
   orientation,
   showRuleLines,
   ...rest
-}: QueryBuilderProps): react_jsx_runtime114.JSX.Element;
+}: QueryBuilderProps): react_jsx_runtime126.JSX.Element;
 //#endregion
 export { QueryBuilder };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/query-builder/rule-group.d.ts

@@ -11,13 +11,13 @@
  */
 
 import "client-only";
-import * as react_jsx_runtime115 from "react/jsx-runtime";
+import * as react_jsx_runtime127 from "react/jsx-runtime";
 import { RuleGroupProps, useRuleGroup } from "react-querybuilder";
 
 //#region src/components/query-builder/rule-group.d.ts
-declare function RuleGroup(props: RuleGroupProps): react_jsx_runtime115.JSX.Element;
-declare function RuleGroupHeaderComponent(ruleGroup: RuleGroupProps & ReturnType<typeof useRuleGroup>): react_jsx_runtime115.JSX.Element;
-declare function RuleGroupFooterComponent(ruleGroup: RuleGroupProps & ReturnType<typeof useRuleGroup>): react_jsx_runtime115.JSX.Element;
+declare function RuleGroup(props: RuleGroupProps): react_jsx_runtime127.JSX.Element;
+declare function RuleGroupHeaderComponent(ruleGroup: RuleGroupProps & ReturnType<typeof useRuleGroup>): react_jsx_runtime127.JSX.Element;
+declare function RuleGroupFooterComponent(ruleGroup: RuleGroupProps & ReturnType<typeof useRuleGroup>): react_jsx_runtime127.JSX.Element;
 //#endregion
 export { RuleGroup, RuleGroupFooterComponent, RuleGroupHeaderComponent };
 //# sourceMappingURL=rule-group.d.ts.map

package/dist/components/query-builder/rule.d.ts

@@ -11,11 +11,11 @@
  */
 
 import "client-only";
-import * as react_jsx_runtime118 from "react/jsx-runtime";
+import * as react_jsx_runtime130 from "react/jsx-runtime";
 import { RuleProps } from "react-querybuilder";
 
 //#region src/components/query-builder/rule.d.ts
-declare function Rule(props: RuleProps): react_jsx_runtime118.JSX.Element;
+declare function Rule(props: RuleProps): react_jsx_runtime130.JSX.Element;
 //#endregion
 export { Rule };
 //# sourceMappingURL=rule.d.ts.map

package/dist/components/query-builder/value-editor.d.ts

@@ -11,11 +11,11 @@
  */
 
 import "client-only";
-import * as react_jsx_runtime121 from "react/jsx-runtime";
+import * as react_jsx_runtime131 from "react/jsx-runtime";
 import { ValueEditorProps } from "react-querybuilder";
 
 //#region src/components/query-builder/value-editor.d.ts
-declare function ValueEditor(props: ValueEditorProps): react_jsx_runtime121.JSX.Element | null;
+declare function ValueEditor(props: ValueEditorProps): react_jsx_runtime131.JSX.Element | null;
 //#endregion
 export { ValueEditor };
 //# sourceMappingURL=value-editor.d.ts.map

package/dist/components/query-builder/value-selector.d.ts

@@ -11,11 +11,11 @@
  */
 
 import "client-only";
-import * as react_jsx_runtime119 from "react/jsx-runtime";
+import * as react_jsx_runtime132 from "react/jsx-runtime";
 import { ValueSelectorProps } from "react-querybuilder";
 
 //#region src/components/query-builder/value-selector.d.ts
-declare function ValueSelector(props: ValueSelectorProps): react_jsx_runtime119.JSX.Element;
+declare function ValueSelector(props: ValueSelectorProps): react_jsx_runtime132.JSX.Element;
 //#endregion
 export { ValueSelector };
 //# sourceMappingURL=value-selector.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { RadioGroupProps as RadioGroupProps$1 } from "./types.js";
 import "client-only";
-import * as react34 from "react";
+import * as react36 from "react";
 import { ContextValue } from "react-aria-components";
 
 //#region src/components/radio/context.d.ts
@@ -21,7 +21,7 @@ import { ContextValue } from "react-aria-components";
  *
  * Provides context for RadioGroup component to share state with Radio components
  */
-declare const RadioContext: react34.Context<ContextValue<RadioGroupProps$1, HTMLDivElement>>;
+declare const RadioContext: react36.Context<ContextValue<RadioGroupProps$1, HTMLDivElement>>;
 //#endregion
 export { RadioContext };
 //# sourceMappingURL=context.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { RadioGroupProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime131 from "react/jsx-runtime";
+import * as react_jsx_runtime133 from "react/jsx-runtime";
 
 //#region src/components/radio/group.d.ts
 /**
@@ -24,7 +24,7 @@ import * as react_jsx_runtime131 from "react/jsx-runtime";
 declare function RadioGroup({
   ref,
   ...props
-}: RadioGroupProps): react_jsx_runtime131.JSX.Element;
+}: RadioGroupProps): react_jsx_runtime133.JSX.Element;
 //#endregion
 export { RadioGroup };
 //# sourceMappingURL=group.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { RadioProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime132 from "react/jsx-runtime";
+import * as react_jsx_runtime134 from "react/jsx-runtime";
 
 //#region src/components/radio/index.d.ts
 
@@ -51,7 +51,7 @@ declare function Radio({
   classNames,
   children,
   ...rest
-}: RadioProps): react_jsx_runtime132.JSX.Element;
+}: RadioProps): react_jsx_runtime134.JSX.Element;
 //#endregion
 export { Radio };
 //# sourceMappingURL=index.d.ts.map

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 react32 from "react";
+import * as react37 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime122 from "react/jsx-runtime";
+import * as react_jsx_runtime135 from "react/jsx-runtime";
 
 //#region src/components/search-field/context.d.ts
 /**
@@ -23,7 +23,7 @@ import * as react_jsx_runtime122 from "react/jsx-runtime";
  *
  * Provides context for SearchField component to share props
  */
-declare const SearchFieldContext: react32.Context<ContextValue<SearchFieldProps$1, HTMLDivElement>>;
+declare const SearchFieldContext: react37.Context<ContextValue<SearchFieldProps$1, HTMLDivElement>>;
 /**
  * Provider for SearchField component
  *
@@ -32,7 +32,7 @@ declare const SearchFieldContext: react32.Context<ContextValue<SearchFieldProps$
 declare function SearchFieldProvider({
   children,
   ...props
-}: ProviderProps<SearchFieldProps$1>): react_jsx_runtime122.JSX.Element;
+}: ProviderProps<SearchFieldProps$1>): react_jsx_runtime135.JSX.Element;
 //#endregion
 export { SearchFieldContext, SearchFieldProvider };
 //# sourceMappingURL=context.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { SearchFieldProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime123 from "react/jsx-runtime";
+import * as react_jsx_runtime136 from "react/jsx-runtime";
 
 //#region src/components/search-field/index.d.ts
 
@@ -50,7 +50,7 @@ import * as react_jsx_runtime123 from "react/jsx-runtime";
 declare function SearchField({
   ref,
   ...props
-}: SearchFieldProps): react_jsx_runtime123.JSX.Element;
+}: SearchFieldProps): react_jsx_runtime136.JSX.Element;
 //#endregion
 export { SearchField };
 //# sourceMappingURL=index.d.ts.map

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

@@ -13,16 +13,16 @@
 import { ProviderProps } from "../../lib/types.js";
 import { SelectFieldProps } from "./types.js";
 import "client-only";
-import * as react33 from "react";
+import * as react38 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime124 from "react/jsx-runtime";
+import * as react_jsx_runtime137 from "react/jsx-runtime";
 
 //#region src/components/select-field/context.d.ts
-declare const SelectFieldContext: react33.Context<ContextValue<SelectFieldProps, HTMLDivElement>>;
+declare const SelectFieldContext: react38.Context<ContextValue<SelectFieldProps, HTMLDivElement>>;
 declare function SelectFieldProvider({
   children,
   ...props
-}: ProviderProps<SelectFieldProps>): react_jsx_runtime124.JSX.Element;
+}: ProviderProps<SelectFieldProps>): react_jsx_runtime137.JSX.Element;
 //#endregion
 export { SelectFieldContext, SelectFieldProvider };
 //# sourceMappingURL=context.d.ts.map

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

@@ -12,7 +12,7 @@
 
 import { SelectFieldProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime125 from "react/jsx-runtime";
+import * as react_jsx_runtime138 from "react/jsx-runtime";
 
 //#region src/components/select-field/index.d.ts
 
@@ -63,7 +63,7 @@ import * as react_jsx_runtime125 from "react/jsx-runtime";
 declare function SelectField({
   ref,
   ...props
-}: SelectFieldProps): react_jsx_runtime125.JSX.Element;
+}: SelectFieldProps): react_jsx_runtime138.JSX.Element;
 //#endregion
 export { SelectField };
 //# sourceMappingURL=index.d.ts.map

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

@@ -20,7 +20,7 @@ import { Options } from "../options/index.js";
 import { SelectFieldContext } from "./context.js";
 import "client-only";
 import { clsx } from "@accelint/design-foundation/lib/utils";
-import { FieldError, ListLayout, Popover, Select, SelectValue, Text, Virtualizer, composeRenderProps, useContextProps } from "react-aria-components";
+import { Button, FieldError, ListLayout, Popover, Select, SelectValue, Text, Virtualizer, composeRenderProps, useContextProps } from "react-aria-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import ChevronDown from "@accelint/icons/chevron-down";
 import styles from "./styles.module.css";
@@ -72,17 +72,19 @@ import styles from "./styles.module.css";
 */
 function SelectField({ ref, ...props }) {
 	[props, ref] = useContextProps(props, ref ?? null, SelectFieldContext);
-	const { size = "medium", children, classNames, description: descriptionProp, errorMessage: errorMessageProp, label: labelProp, layoutOptions, isInvalid: isInvalidProp, ...rest } = props;
+	const { size = "medium", children, classNames, description: descriptionProp, errorMessage: errorMessageProp, label: labelProp, layoutOptions, isInvalid: isInvalidProp, isReadOnly, ...rest } = props;
 	const errorMessage = errorMessageProp?.trim() ?? null;
 	const isInvalid = isInvalidProp ?? !!errorMessage;
 	const isSmall = size === "small";
 	const showLabel = !isSmall && !!labelProp;
+	const shouldShowDescription = !isReadOnly && !!descriptionProp && !(isSmall || isInvalid);
 	return /* @__PURE__ */ jsx(Select, {
 		...rest,
 		ref,
 		className: composeRenderProps(classNames?.field, (className) => clsx("group/select-field", styles.field, className)),
 		isInvalid,
 		"data-size": size,
+		"data-readonly": isReadOnly,
 		children: composeRenderProps(children, (children$1, { isRequired, isDisabled, isInvalid: isInvalid$1 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
 			showLabel && /* @__PURE__ */ jsx(Label$1, {
 				className: clsx(styles.label, classNames?.label),
@@ -90,13 +92,17 @@ function SelectField({ ref, ...props }) {
 				isDisabled,
 				children: labelProp
 			}),
-			/* @__PURE__ */ jsxs(Button$1, {
+			isReadOnly ? /* @__PURE__ */ jsx(Button, {
+				isDisabled: true,
+				className: styles.readonly,
+				children: /* @__PURE__ */ jsx(SelectValue, { className: clsx(styles.value, classNames?.value) })
+			}) : /* @__PURE__ */ jsxs(Button$1, {
 				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" }) })]
 			}),
-			!!descriptionProp && !(isSmall || isInvalid$1) && /* @__PURE__ */ jsx(Text, {
+			shouldShowDescription && /* @__PURE__ */ jsx(Text, {
 				slot: "description",
 				className: clsx(styles.description, classNames?.description),
 				children: descriptionProp

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["AriaSelect","Label","Button","isInvalid","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  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    ...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\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    >\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            <Button\n              className={composeRenderProps(classNames?.trigger, (className) =>\n                clsx(styles.trigger, className),\n              )}\n              size={size}\n              variant='outline'\n            >\n              <SelectValue className={clsx(styles.value, classNames?.value)} />\n              <Icon>\n                <ChevronDown className='transform group-open/select-field:rotate-180' />\n              </Icon>\n            </Button>\n            {!!descriptionProp && !(isSmall || isInvalid) && (\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+EA,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,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;AAEhC,QACE,oBAACA;EACC,GAAI;EACC;EACL,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,sBAAsB,OAAO,OAAO,UAAU,CACpD;EACU;EACX,aAAW;YAEV,mBACC,WACC,YAAU,EAAE,YAAY,YAAY,6BACnC;GACG,aACC,oBAACC;IACC,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;IACpC;IACA;cAEX;KACK;GAEV,qBAACC;IACC,WAAW,mBAAmB,YAAY,UAAU,cAClD,KAAK,OAAO,SAAS,UAAU,CAChC;IACK;IACN,SAAQ;eAER,oBAAC,eAAY,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM,GAAI,EACjE,oBAAC,kBACC,oBAAC,eAAY,WAAU,iDAAiD,GACnE;KACA;GACR,CAAC,CAAC,mBAAmB,EAAE,WAAWC,gBACjC,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 - 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"}

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

@@ -36,6 +36,10 @@
   .error {
     @apply fg-serious-bold text-body-xs;
   }
+
+  .readonly {
+    @apply py-xs block;
+  }
 }
 
 @layer components.l2 {

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

@@ -29,6 +29,7 @@ type SelectFieldProps = Omit<SelectProps, 'className'> & Pick<VirtualizerProps<L
   label?: string;
   description?: string;
   errorMessage?: string;
+  isReadOnly?: boolean;
   size?: 'medium' | 'small';
 };
 //#endregion

package/dist/components/sidenav/avatar.d.ts

@@ -12,7 +12,7 @@
 
 import { SidenavAvatarProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime128 from "react/jsx-runtime";
+import * as react_jsx_runtime139 from "react/jsx-runtime";
 
 //#region src/components/sidenav/avatar.d.ts
 /**
@@ -24,7 +24,7 @@ declare function SidenavAvatar({
   children,
   className,
   ...rest
-}: SidenavAvatarProps): react_jsx_runtime128.JSX.Element;
+}: SidenavAvatarProps): react_jsx_runtime139.JSX.Element;
 //#endregion
 export { SidenavAvatar };
 //# sourceMappingURL=avatar.d.ts.map