@accelint/design-toolkit 9.2.0 → 9.4.0

package/dist/components/text-area-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Label"],"sources":["../../../src/components/text-area-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\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport {\n  composeRenderProps,\n  FieldError,\n  Text,\n  TextArea,\n  TextField,\n  useContextProps,\n} from 'react-aria-components';\nimport { Label } from '../label';\nimport { TextAreaFieldContext } from './context';\nimport styles from './styles.module.css';\nimport type { TextAreaFieldProps } from './types';\n\n/**\n * TextAreaField - A multi-line text input component with label and validation\n *\n * Provides a complete form field experience for longer text content with integrated\n * label, description, and error message components. Handles validation states and\n * accessibility automatically while supporting resizable text areas.\n *\n * @example\n * // Basic text area field\n * <TextAreaField label=\"Comments\" />\n *\n * @example\n * // Text area with validation\n * <TextAreaField\n *   isInvalid={true}\n *   errorMessage='Message is required'\n *   label='Foo'\n *   isRequired\n *   />\n */\nexport function TextAreaField({ ref, ...props }: TextAreaFieldProps) {\n  [props, ref] = useContextProps(props, ref ?? null, TextAreaFieldContext);\n\n  const {\n    classNames,\n    description: descriptionProp,\n    errorMessage: errorMessageProp,\n    label: labelProp,\n    inputProps,\n    size = 'medium',\n    isInvalid: isInvalidProp,\n    ...rest\n  } = props;\n  const errorMessage = errorMessageProp || null; // Protect against empty string\n  const isSmall = size === 'small';\n\n  return (\n    <TextField\n      {...rest}\n      aria-label={labelProp}\n      ref={ref}\n      className={composeRenderProps(classNames?.field, (className) =>\n        clsx('group/text-area-field', styles.field, className),\n      )}\n      isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n      data-size={size}\n    >\n      {(\n        { isDisabled, isInvalid, isRequired }, // Rely on internal state, not props, since state could differ from props\n      ) => (\n        <>\n          {!!labelProp && !isSmall && (\n            <Label\n              className={clsx(styles.label, classNames?.label)}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n            >\n              {labelProp}\n            </Label>\n          )}\n          <TextArea\n            {...inputProps}\n            className={composeRenderProps(classNames?.input, (className) =>\n              clsx(styles.input, className),\n            )}\n          />\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        </>\n      )}\n    </TextField>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,SAAgB,cAAc,EAAE,KAAK,GAAG,SAA6B;AACnE,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,qBAAqB;CAExE,MAAM,EACJ,YACA,aAAa,iBACb,cAAc,kBACd,OAAO,WACP,YACA,OAAO,UACP,WAAW,eACX,GAAG,SACD;CACJ,MAAM,eAAe,oBAAoB;CACzC,MAAM,UAAU,SAAS;AAEzB,QACE,oBAAC;EACC,GAAI;EACJ,cAAY;EACP;EACL,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,yBAAyB,OAAO,OAAO,UAAU,CACvD;EACD,WAAW,kBAAkB,eAAe,OAAO;EACnD,aAAW;aAGT,EAAE,YAAY,WAAW,iBAEzB;GACG,CAAC,CAAC,aAAa,CAAC,WACf,oBAACA;IACC,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;IACpC;IACA;cAEX;KACK;GAEV,oBAAC;IACC,GAAI;IACJ,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;KACD;GACD,CAAC,CAAC,mBAAmB,EAAE,WAAW,cACjC,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;MACZ;GAEK"}
+{"version":3,"file":"index.js","names":["Label"],"sources":["../../../src/components/text-area-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\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport {\n  composeRenderProps,\n  FieldError,\n  Text,\n  TextArea,\n  TextField,\n  useContextProps,\n} from 'react-aria-components';\nimport { Label } from '../label';\nimport { TextAreaFieldContext } from './context';\nimport styles from './styles.module.css';\nimport type { TextAreaFieldProps } from './types';\n\n/**\n * TextAreaField - Multi-line text input with label and validation\n *\n * Provides integrated label, description, and error message with automatic accessibility.\n *\n * @param props - {@link TextAreaFieldProps}\n * @param props.ref - Ref to the field container element.\n * @param props.classNames - Custom CSS class names for field elements.\n * @param props.description - Helper text displayed below the input.\n * @param props.errorMessage - Error message displayed when validation fails.\n * @param props.label - Label text for the field.\n * @param props.inputProps - Props passed to the underlying TextArea element.\n * @param props.size - Size variant of the field.\n * @param props.isInvalid - Whether the field is in an invalid state.\n * @returns The rendered TextAreaField component.\n *\n * @example\n * ```tsx\n * <TextAreaField\n *   label=\"Description\"\n *   placeholder=\"Enter description...\"\n *   onChange={setDescription}\n * />\n * ```\n */\nexport function TextAreaField({ ref, ...props }: TextAreaFieldProps) {\n  [props, ref] = useContextProps(props, ref ?? null, TextAreaFieldContext);\n\n  const {\n    classNames,\n    description: descriptionProp,\n    errorMessage: errorMessageProp,\n    label: labelProp,\n    inputProps,\n    size = 'medium',\n    isInvalid: isInvalidProp,\n    ...rest\n  } = props;\n  const errorMessage = errorMessageProp || null; // Protect against empty string\n  const isSmall = size === 'small';\n\n  return (\n    <TextField\n      {...rest}\n      aria-label={labelProp}\n      ref={ref}\n      className={composeRenderProps(classNames?.field, (className) =>\n        clsx('group/text-area-field', styles.field, className),\n      )}\n      isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n      data-size={size}\n    >\n      {(\n        { isDisabled, isInvalid, isRequired }, // Rely on internal state, not props, since state could differ from props\n      ) => (\n        <>\n          {!!labelProp && !isSmall && (\n            <Label\n              className={clsx(styles.label, classNames?.label)}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n            >\n              {labelProp}\n            </Label>\n          )}\n          <TextArea\n            {...inputProps}\n            className={composeRenderProps(classNames?.input, (className) =>\n              clsx(styles.input, className),\n            )}\n          />\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        </>\n      )}\n    </TextField>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,SAAgB,cAAc,EAAE,KAAK,GAAG,SAA6B;AACnE,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,qBAAqB;CAExE,MAAM,EACJ,YACA,aAAa,iBACb,cAAc,kBACd,OAAO,WACP,YACA,OAAO,UACP,WAAW,eACX,GAAG,SACD;CACJ,MAAM,eAAe,oBAAoB;CACzC,MAAM,UAAU,SAAS;AAEzB,QACE,oBAAC;EACC,GAAI;EACJ,cAAY;EACP;EACL,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,yBAAyB,OAAO,OAAO,UAAU,CACvD;EACD,WAAW,kBAAkB,eAAe,OAAO;EACnD,aAAW;aAGT,EAAE,YAAY,WAAW,iBAEzB;GACG,CAAC,CAAC,aAAa,CAAC,WACf,oBAACA;IACC,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;IACpC;IACA;cAEX;KACK;GAEV,oBAAC;IACC,GAAI;IACJ,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;KACD;GACD,CAAC,CAAC,mBAAmB,EAAE,WAAW,cACjC,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;MACZ;GAEK"}

package/dist/components/text-area-field/styles.module.css

@@ -41,7 +41,7 @@
     }
 
     @variant pressed {
-      @apply outline-accent-primary-pressed;
+      @apply outline-interactive-pressed;
     }
 
     @variant group-invalid/text-area-field {
@@ -51,6 +51,10 @@
     @variant disabled {
       @apply fg-disabled outline-interactive-disabled;
     }
+
+    @variant read-only {
+      @apply px-0 outline-none;
+    }
   }
 
   .description {

package/dist/components/text-area-field/types.d.ts

@@ -14,7 +14,11 @@ import { RefAttributes } from "react";
 import { FieldErrorProps, TextAreaProps, TextFieldProps } from "react-aria-components";
 
 //#region src/components/text-area-field/types.d.ts
+/**
+ * Props for the TextAreaField component.
+ */
 type TextAreaFieldProps = Omit<TextFieldProps, 'children' | 'className'> & RefAttributes<HTMLDivElement> & {
+  /** Custom CSS class names for field elements. */
   classNames?: {
     field?: TextFieldProps['className'];
     label?: string;
@@ -22,10 +26,15 @@ type TextAreaFieldProps = Omit<TextFieldProps, 'children' | 'className'> & RefAt
     description?: string;
     error?: FieldErrorProps['className'];
   };
+  /** Label text for the field. */
   label?: string;
+  /** Props passed to the underlying TextArea element. */
   inputProps?: Omit<TextAreaProps, 'className'> & RefAttributes<HTMLTextAreaElement>;
+  /** Helper text displayed below the input. */
   description?: string;
+  /** Error message displayed when validation fails. */
   errorMessage?: FieldErrorProps['children'];
+  /** Size variant of the field. */
   size?: 'medium' | 'small';
 };
 //#endregion

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

@@ -13,16 +13,36 @@
 import { ProviderProps } from "../../lib/types.js";
 import { TextFieldProps as TextFieldProps$1 } from "./types.js";
 import "client-only";
-import * as react29 from "react";
+import * as react39 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime119 from "react/jsx-runtime";
+import * as react_jsx_runtime166 from "react/jsx-runtime";
 
 //#region src/components/text-field/context.d.ts
-declare const TextFieldContext: react29.Context<ContextValue<TextFieldProps$1, HTMLDivElement>>;
+/** Context for sharing props across TextField components */
+declare const TextFieldContext: react39.Context<ContextValue<TextFieldProps$1, HTMLDivElement>>;
+/**
+ * Sets default props for all TextField components within.
+ *
+ * @example
+ * ```tsx
+ * <TextFieldProvider isRequired>
+ *   <TextField label="First Name">
+ *     <Input placeholder="Enter first name" />
+ *   </TextField>
+ *   <TextField label="Last Name">
+ *     <Input placeholder="Enter last name" />
+ *   </TextField>
+ * </TextFieldProvider>
+ * ```
+ *
+ * @param props - ProviderProps with TextFieldProps.
+ * @param props.children - Child components that receive the context.
+ * @returns The TextFieldContext provider wrapping children.
+ */
 declare function TextFieldProvider({
   children,
   ...props
-}: ProviderProps<TextFieldProps$1>): react_jsx_runtime119.JSX.Element;
+}: ProviderProps<TextFieldProps$1>): react_jsx_runtime166.JSX.Element;
 //#endregion
 export { TextFieldContext, TextFieldProvider };
 //# sourceMappingURL=context.d.ts.map

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

@@ -18,7 +18,27 @@ import { createContext } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/text-field/context.tsx
+/** Context for sharing props across TextField components */
 const TextFieldContext = createContext(null);
+/**
+* Sets default props for all TextField components within.
+*
+* @example
+* ```tsx
+* <TextFieldProvider isRequired>
+*   <TextField label="First Name">
+*     <Input placeholder="Enter first name" />
+*   </TextField>
+*   <TextField label="Last Name">
+*     <Input placeholder="Enter last name" />
+*   </TextField>
+* </TextFieldProvider>
+* ```
+*
+* @param props - ProviderProps with TextFieldProps.
+* @param props.children - Child components that receive the context.
+* @returns The TextFieldContext provider wrapping children.
+*/
 function TextFieldProvider({ children, ...props }) {
 	return /* @__PURE__ */ jsx(TextFieldContext.Provider, {
 		value: props,

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/text-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 { TextFieldProps } from './types';\n\nexport const TextFieldContext =\n  createContext<ContextValue<TextFieldProps, HTMLDivElement>>(null);\n\nexport function TextFieldProvider({\n  children,\n  ...props\n}: ProviderProps<TextFieldProps>) {\n  return (\n    <TextFieldContext.Provider value={props}>\n      {children}\n    </TextFieldContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,MAAa,mBACX,cAA4D,KAAK;AAEnE,SAAgB,kBAAkB,EAChC,UACA,GAAG,SAC6B;AAChC,QACE,oBAAC,iBAAiB;EAAS,OAAO;EAC/B;GACyB"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/text-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 { TextFieldProps } from './types';\n\n/** Context for sharing props across TextField components */\nexport const TextFieldContext =\n  createContext<ContextValue<TextFieldProps, HTMLDivElement>>(null);\n\n/**\n * Sets default props for all TextField components within.\n *\n * @example\n * ```tsx\n * <TextFieldProvider isRequired>\n *   <TextField label=\"First Name\">\n *     <Input placeholder=\"Enter first name\" />\n *   </TextField>\n *   <TextField label=\"Last Name\">\n *     <Input placeholder=\"Enter last name\" />\n *   </TextField>\n * </TextFieldProvider>\n * ```\n *\n * @param props - ProviderProps with TextFieldProps.\n * @param props.children - Child components that receive the context.\n * @returns The TextFieldContext provider wrapping children.\n */\nexport function TextFieldProvider({\n  children,\n  ...props\n}: ProviderProps<TextFieldProps>) {\n  return (\n    <TextFieldContext.Provider value={props}>\n      {children}\n    </TextFieldContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoBA,MAAa,mBACX,cAA4D,KAAK;;;;;;;;;;;;;;;;;;;;AAqBnE,SAAgB,kBAAkB,EAChC,UACA,GAAG,SAC6B;AAChC,QACE,oBAAC,iBAAiB;EAAS,OAAO;EAC/B;GACyB"}

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

@@ -12,100 +12,35 @@
 
 import { TextFieldProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime148 from "react/jsx-runtime";
+import * as react_jsx_runtime169 from "react/jsx-runtime";
 
 //#region src/components/text-field/index.d.ts
 
 /**
- * TextField - A complete form field component with label, input, and validation
+ * TextField - Single-line text input with label and validation
  *
- * Provides a comprehensive form field experience combining label, input, description,
- * and error message components. Handles validation states and accessibility
- * automatically while supporting extensive customization through styling props.
+ * Provides integrated label, description, and error message with automatic accessibility.
  *
- * @example
- * // Basic text field with label and required validation
- * <TextField label='Full Name' isRequired defaultValue='John Doe' />
- *
- * @example
- * // Text field with placeholder and description
- * <TextField
- *   label='Email Address'
- *   inputProps={{ placeholder: 'Enter your email address', type: 'email' }}
- *   description='We will never share your email with third parties'
- * />
- *
- * @example
- * // Text field with prefix for currency
- * <TextField
- *   label='Price'
- *   inputProps={{ placeholder: '0.00', type: 'number', prefix: '$' }}
- *   description='Enter the price in dollars'
- * />
- *
- * @example
- * // Text field with suffix for units
- * <TextField
- *   label='Weight'
- *   inputProps={{ placeholder: '0', type: 'number', suffix: 'kg' }}
- *   description='Enter the weight in kilograms'
- * />
- *
- * @example
- * // Text field with both prefix and suffix
- * <TextField
- *   label='Temperature'
- *   inputProps={{ placeholder: '0', type: 'number', prefix: '~', suffix: '°C' }}
- *   description='Approximate temperature in Celsius'
- * />
- *
- * @example
- * // Text field with error state
- * <TextField
- *   label='Username'
- *   isInvalid
- *   errorMessage='Username must be at least 3 characters long'
- *   inputProps={{ placeholder: 'Enter username' }}
- * />
- *
- * @example
- * // Small size text field with clearable input
- * <TextField
- *   label='Search'
- *   size='small'
- *   inputProps={{
- *     placeholder: 'Type to search...',
- *     isClearable: true,
- *     type: 'search'
- *   }}
- * />
- *
- * @example
- * // Disabled text field
- * <TextField
- *   label='Status'
- *   isDisabled
- *   defaultValue='Inactive'
- *   description='This field cannot be edited'
- * />
+ * @param props - {@link TextFieldProps}
+ * @param props.ref - Ref to the field container element.
+ * @param props.classNames - Custom CSS class names for field elements.
+ * @param props.description - Helper text displayed below the input.
+ * @param props.errorMessage - Error message displayed when validation fails.
+ * @param props.inputProps - Props passed to the underlying Input element.
+ * @param props.label - Label text for the field.
+ * @param props.size - Size variant of the field.
+ * @param props.isInvalid - Whether the field is in an invalid state.
+ * @returns The rendered TextField component.
  *
  * @example
- * // Password field with validation
- * <TextField
- *   label='Password'
- *   isRequired
- *   inputProps={{
- *     type: 'password',
- *     placeholder: 'Enter a secure password',
- *     minLength: 8
- *   }}
- *   description='Password must be at least 8 characters'
- * />
+ * ```tsx
+ * <TextField label="Email" type="email" onChange={setEmail} />
+ * ```
  */
 declare function TextField({
   ref,
   ...props
-}: TextFieldProps): react_jsx_runtime148.JSX.Element;
+}: TextFieldProps): react_jsx_runtime169.JSX.Element;
 //#endregion
 export { TextField };
 //# sourceMappingURL=index.d.ts.map

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

@@ -24,90 +24,25 @@ import styles from "./styles.module.css";
 
 //#region src/components/text-field/index.tsx
 /**
-* TextField - A complete form field component with label, input, and validation
+* TextField - Single-line text input with label and validation
 *
-* Provides a comprehensive form field experience combining label, input, description,
-* and error message components. Handles validation states and accessibility
-* automatically while supporting extensive customization through styling props.
+* Provides integrated label, description, and error message with automatic accessibility.
 *
-* @example
-* // Basic text field with label and required validation
-* <TextField label='Full Name' isRequired defaultValue='John Doe' />
-*
-* @example
-* // Text field with placeholder and description
-* <TextField
-*   label='Email Address'
-*   inputProps={{ placeholder: 'Enter your email address', type: 'email' }}
-*   description='We will never share your email with third parties'
-* />
-*
-* @example
-* // Text field with prefix for currency
-* <TextField
-*   label='Price'
-*   inputProps={{ placeholder: '0.00', type: 'number', prefix: '$' }}
-*   description='Enter the price in dollars'
-* />
-*
-* @example
-* // Text field with suffix for units
-* <TextField
-*   label='Weight'
-*   inputProps={{ placeholder: '0', type: 'number', suffix: 'kg' }}
-*   description='Enter the weight in kilograms'
-* />
-*
-* @example
-* // Text field with both prefix and suffix
-* <TextField
-*   label='Temperature'
-*   inputProps={{ placeholder: '0', type: 'number', prefix: '~', suffix: '°C' }}
-*   description='Approximate temperature in Celsius'
-* />
-*
-* @example
-* // Text field with error state
-* <TextField
-*   label='Username'
-*   isInvalid
-*   errorMessage='Username must be at least 3 characters long'
-*   inputProps={{ placeholder: 'Enter username' }}
-* />
-*
-* @example
-* // Small size text field with clearable input
-* <TextField
-*   label='Search'
-*   size='small'
-*   inputProps={{
-*     placeholder: 'Type to search...',
-*     isClearable: true,
-*     type: 'search'
-*   }}
-* />
-*
-* @example
-* // Disabled text field
-* <TextField
-*   label='Status'
-*   isDisabled
-*   defaultValue='Inactive'
-*   description='This field cannot be edited'
-* />
+* @param props - {@link TextFieldProps}
+* @param props.ref - Ref to the field container element.
+* @param props.classNames - Custom CSS class names for field elements.
+* @param props.description - Helper text displayed below the input.
+* @param props.errorMessage - Error message displayed when validation fails.
+* @param props.inputProps - Props passed to the underlying Input element.
+* @param props.label - Label text for the field.
+* @param props.size - Size variant of the field.
+* @param props.isInvalid - Whether the field is in an invalid state.
+* @returns The rendered TextField component.
 *
 * @example
-* // Password field with validation
-* <TextField
-*   label='Password'
-*   isRequired
-*   inputProps={{
-*     type: 'password',
-*     placeholder: 'Enter a secure password',
-*     minLength: 8
-*   }}
-*   description='Password must be at least 8 characters'
-* />
+* ```tsx
+* <TextField label="Email" type="email" onChange={setEmail} />
+* ```
 */
 function TextField({ ref, ...props }) {
 	[props, ref] = useContextProps(props, ref ?? null, TextFieldContext);

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["AriaTextField","Label","Input"],"sources":["../../../src/components/text-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 {\n  TextField as AriaTextField,\n  composeRenderProps,\n  FieldError,\n  Text,\n  useContextProps,\n} from 'react-aria-components';\nimport { Input } from '../input';\nimport { Label } from '../label';\nimport { TextFieldContext } from './context';\nimport styles from './styles.module.css';\nimport type { TextFieldProps } from './types';\n\n/**\n * TextField - A complete form field component with label, input, and validation\n *\n * Provides a comprehensive form field experience combining label, input, description,\n * and error message components. Handles validation states and accessibility\n * automatically while supporting extensive customization through styling props.\n *\n * @example\n * // Basic text field with label and required validation\n * <TextField label='Full Name' isRequired defaultValue='John Doe' />\n *\n * @example\n * // Text field with placeholder and description\n * <TextField\n *   label='Email Address'\n *   inputProps={{ placeholder: 'Enter your email address', type: 'email' }}\n *   description='We will never share your email with third parties'\n * />\n *\n * @example\n * // Text field with prefix for currency\n * <TextField\n *   label='Price'\n *   inputProps={{ placeholder: '0.00', type: 'number', prefix: '$' }}\n *   description='Enter the price in dollars'\n * />\n *\n * @example\n * // Text field with suffix for units\n * <TextField\n *   label='Weight'\n *   inputProps={{ placeholder: '0', type: 'number', suffix: 'kg' }}\n *   description='Enter the weight in kilograms'\n * />\n *\n * @example\n * // Text field with both prefix and suffix\n * <TextField\n *   label='Temperature'\n *   inputProps={{ placeholder: '0', type: 'number', prefix: '~', suffix: '°C' }}\n *   description='Approximate temperature in Celsius'\n * />\n *\n * @example\n * // Text field with error state\n * <TextField\n *   label='Username'\n *   isInvalid\n *   errorMessage='Username must be at least 3 characters long'\n *   inputProps={{ placeholder: 'Enter username' }}\n * />\n *\n * @example\n * // Small size text field with clearable input\n * <TextField\n *   label='Search'\n *   size='small'\n *   inputProps={{\n *     placeholder: 'Type to search...',\n *     isClearable: true,\n *     type: 'search'\n *   }}\n * />\n *\n * @example\n * // Disabled text field\n * <TextField\n *   label='Status'\n *   isDisabled\n *   defaultValue='Inactive'\n *   description='This field cannot be edited'\n * />\n *\n * @example\n * // Password field with validation\n * <TextField\n *   label='Password'\n *   isRequired\n *   inputProps={{\n *     type: 'password',\n *     placeholder: 'Enter a secure password',\n *     minLength: 8\n *   }}\n *   description='Password must be at least 8 characters'\n * />\n */\nexport function TextField({ ref, ...props }: TextFieldProps) {\n  [props, ref] = useContextProps(props, ref ?? null, TextFieldContext);\n\n  const {\n    classNames,\n    description: descriptionProp,\n    errorMessage: errorMessageProp,\n    inputProps,\n    label: labelProp,\n    size = 'medium',\n    isInvalid: isInvalidProp,\n    ...rest\n  } = props;\n  const errorMessage = errorMessageProp || null; // Protect against empty string\n  const isSmall = size === 'small';\n\n  return (\n    <AriaTextField\n      {...rest}\n      aria-label={labelProp}\n      ref={ref}\n      className={composeRenderProps(classNames?.field, (className) =>\n        clsx('group/text-field', styles.field, className),\n      )}\n      isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n      data-size={size}\n    >\n      {(\n        { isDisabled, isInvalid, isRequired }, // Rely on internal state, not props, since state could differ from props\n      ) => (\n        <>\n          {!!labelProp && !isSmall && (\n            <Label\n              className={clsx(styles.label, classNames?.label)}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n            >\n              {labelProp}\n            </Label>\n          )}\n          <Input\n            {...inputProps}\n            classNames={{\n              ...classNames?.input,\n              sizer: clsx(styles.input, classNames?.input?.sizer),\n            }}\n            disabled={isDisabled}\n            required={isRequired}\n            size={size}\n            isInvalid={isInvalid}\n          />\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        </>\n      )}\n    </AriaTextField>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkHA,SAAgB,UAAU,EAAE,KAAK,GAAG,SAAyB;AAC3D,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,iBAAiB;CAEpE,MAAM,EACJ,YACA,aAAa,iBACb,cAAc,kBACd,YACA,OAAO,WACP,OAAO,UACP,WAAW,eACX,GAAG,SACD;CACJ,MAAM,eAAe,oBAAoB;CACzC,MAAM,UAAU,SAAS;AAEzB,QACE,oBAACA;EACC,GAAI;EACJ,cAAY;EACP;EACL,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,oBAAoB,OAAO,OAAO,UAAU,CAClD;EACD,WAAW,kBAAkB,eAAe,OAAO;EACnD,aAAW;aAGT,EAAE,YAAY,WAAW,iBAEzB;GACG,CAAC,CAAC,aAAa,CAAC,WACf,oBAACC;IACC,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;IACpC;IACA;cAEX;KACK;GAEV,oBAACC;IACC,GAAI;IACJ,YAAY;KACV,GAAG,YAAY;KACf,OAAO,KAAK,OAAO,OAAO,YAAY,OAAO,MAAM;KACpD;IACD,UAAU;IACV,UAAU;IACJ;IACK;KACX;GACD,CAAC,CAAC,mBAAmB,EAAE,WAAW,cACjC,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;MACZ;GAES"}
+{"version":3,"file":"index.js","names":["AriaTextField","Label","Input"],"sources":["../../../src/components/text-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 {\n  TextField as AriaTextField,\n  composeRenderProps,\n  FieldError,\n  Text,\n  useContextProps,\n} from 'react-aria-components';\nimport { Input } from '../input';\nimport { Label } from '../label';\nimport { TextFieldContext } from './context';\nimport styles from './styles.module.css';\nimport type { TextFieldProps } from './types';\n\n/**\n * TextField - Single-line text input with label and validation\n *\n * Provides integrated label, description, and error message with automatic accessibility.\n *\n * @param props - {@link TextFieldProps}\n * @param props.ref - Ref to the field container element.\n * @param props.classNames - Custom CSS class names for field elements.\n * @param props.description - Helper text displayed below the input.\n * @param props.errorMessage - Error message displayed when validation fails.\n * @param props.inputProps - Props passed to the underlying Input element.\n * @param props.label - Label text for the field.\n * @param props.size - Size variant of the field.\n * @param props.isInvalid - Whether the field is in an invalid state.\n * @returns The rendered TextField component.\n *\n * @example\n * ```tsx\n * <TextField label=\"Email\" type=\"email\" onChange={setEmail} />\n * ```\n */\nexport function TextField({ ref, ...props }: TextFieldProps) {\n  [props, ref] = useContextProps(props, ref ?? null, TextFieldContext);\n\n  const {\n    classNames,\n    description: descriptionProp,\n    errorMessage: errorMessageProp,\n    inputProps,\n    label: labelProp,\n    size = 'medium',\n    isInvalid: isInvalidProp,\n    ...rest\n  } = props;\n  const errorMessage = errorMessageProp || null; // Protect against empty string\n  const isSmall = size === 'small';\n\n  return (\n    <AriaTextField\n      {...rest}\n      aria-label={labelProp}\n      ref={ref}\n      className={composeRenderProps(classNames?.field, (className) =>\n        clsx('group/text-field', styles.field, className),\n      )}\n      isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n      data-size={size}\n    >\n      {(\n        { isDisabled, isInvalid, isRequired }, // Rely on internal state, not props, since state could differ from props\n      ) => (\n        <>\n          {!!labelProp && !isSmall && (\n            <Label\n              className={clsx(styles.label, classNames?.label)}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n            >\n              {labelProp}\n            </Label>\n          )}\n          <Input\n            {...inputProps}\n            classNames={{\n              ...classNames?.input,\n              sizer: clsx(styles.input, classNames?.input?.sizer),\n            }}\n            disabled={isDisabled}\n            required={isRequired}\n            size={size}\n            isInvalid={isInvalid}\n          />\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        </>\n      )}\n    </AriaTextField>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,SAAgB,UAAU,EAAE,KAAK,GAAG,SAAyB;AAC3D,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,iBAAiB;CAEpE,MAAM,EACJ,YACA,aAAa,iBACb,cAAc,kBACd,YACA,OAAO,WACP,OAAO,UACP,WAAW,eACX,GAAG,SACD;CACJ,MAAM,eAAe,oBAAoB;CACzC,MAAM,UAAU,SAAS;AAEzB,QACE,oBAACA;EACC,GAAI;EACJ,cAAY;EACP;EACL,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,oBAAoB,OAAO,OAAO,UAAU,CAClD;EACD,WAAW,kBAAkB,eAAe,OAAO;EACnD,aAAW;aAGT,EAAE,YAAY,WAAW,iBAEzB;GACG,CAAC,CAAC,aAAa,CAAC,WACf,oBAACC;IACC,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;IACpC;IACA;cAEX;KACK;GAEV,oBAACC;IACC,GAAI;IACJ,YAAY;KACV,GAAG,YAAY;KACf,OAAO,KAAK,OAAO,OAAO,YAAY,OAAO,MAAM;KACpD;IACD,UAAU;IACV,UAAU;IACJ;IACK;KACX;GACD,CAAC,CAAC,mBAAmB,EAAE,WAAW,cACjC,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;MACZ;GAES"}

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

@@ -16,7 +16,11 @@ import { RefAttributes } from "react";
 import { FieldErrorProps, TextFieldProps as TextFieldProps$1 } from "react-aria-components";
 
 //#region src/components/text-field/types.d.ts
+/**
+ * Props for the TextField component.
+ */
 type TextFieldProps = Omit<TextFieldProps$1, 'children' | 'className' | 'type' | 'pattern'> & RefAttributes<HTMLDivElement> & {
+  /** Custom CSS class names for field elements. */
   classNames?: {
     field?: TextFieldProps$1['className'];
     label?: LabelProps$1['className'];
@@ -24,10 +28,15 @@ type TextFieldProps = Omit<TextFieldProps$1, 'children' | 'className' | 'type' |
     description?: string;
     error?: FieldErrorProps['className'];
   };
+  /** Label text for the field. */
   label?: string;
+  /** Props passed to the underlying Input element. */
   inputProps?: InputProps$1;
+  /** Helper text displayed below the input. */
   description?: string;
+  /** Error message displayed when validation fails. */
   errorMessage?: string;
+  /** Size variant of the field. */
   size?: 'medium' | 'small';
 };
 //#endregion

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

@@ -13,17 +13,35 @@
 import { TimeFieldProps as TimeFieldProps$1 } from "./types.js";
 import "client-only";
 import { TimeValue } from "react-aria-components";
-import * as react_jsx_runtime145 from "react/jsx-runtime";
+import * as react_jsx_runtime161 from "react/jsx-runtime";
 
 //#region src/components/time-field/index.d.ts
+
 /**
  * TimeField - Form input for time values
  *
- * A time input field with configurable granularity and size, built on React
- * Aria components and suitable for forms requiring time entry.
+ * Provides configurable granularity, 12/24-hour format, and automatic accessibility.
+ *
+ * @param props - {@link TimeFieldProps}
+ * @param props.classNames - Custom CSS class names for field elements.
+ * @param props.description - Helper text displayed below the input.
+ * @param props.errorMessage - Error message displayed when validation fails.
+ * @param props.granularity - The granularity of the time value (hour, minute, second).
+ * @param props.hourCycle - Whether to use 12 or 24 hour time format.
+ * @param props.inputProps - Props passed to the underlying DateInput element.
+ * @param props.label - Label text for the field.
+ * @param props.shouldForceLeadingZeros - Whether to force leading zeros in time segments.
+ * @param props.size - Size variant of the field.
+ * @param props.isDisabled - Whether the field is disabled.
+ * @param props.isInvalid - Whether the field is in an invalid state.
+ * @param props.isRequired - Whether the field is required.
+ * @param props.isReadOnly - Whether the field is read-only.
+ * @returns The rendered TimeField component.
  *
  * @example
- * <TimeField label="Time" granularity="second" />
+ * ```tsx
+ * <TimeField label="Start time" granularity="minute" onChange={setTime} />
+ * ```
  */
 declare function TimeField<T extends TimeValue>({
   classNames,
@@ -38,8 +56,9 @@ declare function TimeField<T extends TimeValue>({
   isDisabled,
   isInvalid: isInvalidProp,
   isRequired,
+  isReadOnly,
   ...rest
-}: TimeFieldProps$1<T>): react_jsx_runtime145.JSX.Element;
+}: TimeFieldProps$1<T>): react_jsx_runtime161.JSX.Element;
 //#endregion
 export { TimeField };
 //# sourceMappingURL=index.d.ts.map

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

@@ -19,20 +19,37 @@ import "client-only";
 import { clsx } from "@accelint/design-foundation/lib/utils";
 import { DateInput, DateSegment, FieldError, Text, TimeField as TimeField$1, composeRenderProps } from "react-aria-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Time } from "@accelint/icons";
+import Time from "@accelint/icons/time";
 import styles from "./styles.module.css";
 
 //#region src/components/time-field/index.tsx
 /**
 * TimeField - Form input for time values
 *
-* A time input field with configurable granularity and size, built on React
-* Aria components and suitable for forms requiring time entry.
+* Provides configurable granularity, 12/24-hour format, and automatic accessibility.
+*
+* @param props - {@link TimeFieldProps}
+* @param props.classNames - Custom CSS class names for field elements.
+* @param props.description - Helper text displayed below the input.
+* @param props.errorMessage - Error message displayed when validation fails.
+* @param props.granularity - The granularity of the time value (hour, minute, second).
+* @param props.hourCycle - Whether to use 12 or 24 hour time format.
+* @param props.inputProps - Props passed to the underlying DateInput element.
+* @param props.label - Label text for the field.
+* @param props.shouldForceLeadingZeros - Whether to force leading zeros in time segments.
+* @param props.size - Size variant of the field.
+* @param props.isDisabled - Whether the field is disabled.
+* @param props.isInvalid - Whether the field is in an invalid state.
+* @param props.isRequired - Whether the field is required.
+* @param props.isReadOnly - Whether the field is read-only.
+* @returns The rendered TimeField component.
 *
 * @example
-* <TimeField label="Time" granularity="second" />
+* ```tsx
+* <TimeField label="Start time" granularity="minute" onChange={setTime} />
+* ```
 */
-function TimeField({ classNames, description: descriptionProp, errorMessage: errorMessageProp, granularity = "second", hourCycle = 24, inputProps, label: labelProp, shouldForceLeadingZeros = true, size = "medium", isDisabled, isInvalid: isInvalidProp, isRequired, ...rest }) {
+function TimeField({ classNames, description: descriptionProp, errorMessage: errorMessageProp, granularity = "second", hourCycle = 24, inputProps, label: labelProp, shouldForceLeadingZeros = true, size = "medium", isDisabled, isInvalid: isInvalidProp, isRequired, isReadOnly = false, ...rest }) {
 	const errorMessage = errorMessageProp || null;
 	const isSmall = size === "small";
 	return /* @__PURE__ */ jsx(TimeField$1, {
@@ -44,6 +61,7 @@ function TimeField({ classNames, description: descriptionProp, errorMessage: err
 		isDisabled,
 		isInvalid: isInvalidProp || (errorMessage ? true : void 0),
 		isRequired,
+		isReadOnly,
 		"aria-label": labelProp,
 		"data-size": size,
 		children: ({ isDisabled: isDisabled$1 }) => /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -55,8 +73,9 @@ function TimeField({ classNames, description: descriptionProp, errorMessage: err
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: clsx(styles.control, classNames?.control),
+				"data-readonly": isReadOnly || null,
 				children: [
-					size === "medium" && /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Time, {}) }),
+					!isReadOnly && size === "medium" && /* @__PURE__ */ jsx(Icon, { children: /* @__PURE__ */ jsx(Time, {}) }),
 					/* @__PURE__ */ jsx(DateInput, {
 						...inputProps,
 						className: composeRenderProps(classNames?.input, (className) => clsx(styles.input, className)),

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["AriaTimeField","Label","isDisabled","AriaDateInput","AriaText"],"sources":["../../../src/components/time-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 { Time } from '@accelint/icons';\nimport {\n  DateInput as AriaDateInput,\n  Text as AriaText,\n  TimeField as AriaTimeField,\n  composeRenderProps,\n  DateSegment,\n  FieldError,\n  type TimeValue,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport styles from './styles.module.css';\nimport type { TimeFieldProps } from './types';\n\n/**\n * TimeField - Form input for time values\n *\n * A time input field with configurable granularity and size, built on React\n * Aria components and suitable for forms requiring time entry.\n *\n * @example\n * <TimeField label=\"Time\" granularity=\"second\" />\n */\nexport function TimeField<T extends TimeValue>({\n  classNames,\n  description: descriptionProp,\n  errorMessage: errorMessageProp,\n  granularity = 'second',\n  hourCycle = 24,\n  inputProps,\n  label: labelProp,\n  shouldForceLeadingZeros = true,\n  size = 'medium',\n  isDisabled,\n  isInvalid: isInvalidProp,\n  isRequired,\n  ...rest\n}: TimeFieldProps<T>) {\n  const errorMessage = errorMessageProp || null; // Protect against empty string\n  const isSmall = size === 'small';\n\n  return (\n    <AriaTimeField<T>\n      {...rest}\n      className={composeRenderProps(classNames?.field, (className) =>\n        clsx('group/time-field', styles.field, className),\n      )}\n      granularity={granularity}\n      hourCycle={hourCycle}\n      shouldForceLeadingZeros={shouldForceLeadingZeros}\n      isDisabled={isDisabled}\n      isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n      isRequired={isRequired}\n      aria-label={labelProp}\n      data-size={size}\n    >\n      {(\n        { isDisabled }, // Rely on internal state, not props, since state could differ from props\n      ) => (\n        <>\n          {!isSmall && labelProp && (\n            <Label\n              className={clsx(styles.label, classNames?.label)}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n            >\n              {labelProp}\n            </Label>\n          )}\n          <div className={clsx(styles.control, classNames?.control)}>\n            {size === 'medium' && (\n              <Icon>\n                <Time />\n              </Icon>\n            )}\n            <AriaDateInput\n              {...inputProps}\n              className={composeRenderProps(classNames?.input, (className) =>\n                clsx(styles.input, className),\n              )}\n            >\n              {(segmentProp) => (\n                <DateSegment\n                  segment={segmentProp}\n                  className={composeRenderProps(\n                    classNames?.segment,\n                    (className) => clsx(styles.segment, className),\n                  )}\n                />\n              )}\n            </AriaDateInput>\n            <span>Z</span>\n          </div>\n          {descriptionProp && !(isSmall || isInvalidProp) && !errorMessage && (\n            <AriaText\n              slot='description'\n              className={clsx(styles.description, classNames?.description)}\n            >\n              {descriptionProp}\n            </AriaText>\n          )}\n          <FieldError\n            className={composeRenderProps(classNames?.error, (className) =>\n              clsx(styles.error, className),\n            )}\n          >\n            {errorMessage}\n          </FieldError>\n        </>\n      )}\n    </AriaTimeField>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuCA,SAAgB,UAA+B,EAC7C,YACA,aAAa,iBACb,cAAc,kBACd,cAAc,UACd,YAAY,IACZ,YACA,OAAO,WACP,0BAA0B,MAC1B,OAAO,UACP,YACA,WAAW,eACX,YACA,GAAG,QACiB;CACpB,MAAM,eAAe,oBAAoB;CACzC,MAAM,UAAU,SAAS;AAEzB,QACE,oBAACA;EACC,GAAI;EACJ,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,oBAAoB,OAAO,OAAO,UAAU,CAClD;EACY;EACF;EACc;EACb;EACZ,WAAW,kBAAkB,eAAe,OAAO;EACvC;EACZ,cAAY;EACZ,aAAW;aAGT,EAAE,+BAEF;GACG,CAAC,WAAW,aACX,oBAACC;IACC,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;IAChD,YAAYC;IACA;cAEX;KACK;GAEV,qBAAC;IAAI,WAAW,KAAK,OAAO,SAAS,YAAY,QAAQ;;KACtD,SAAS,YACR,oBAAC,kBACC,oBAAC,SAAO,GACH;KAET,oBAACC;MACC,GAAI;MACJ,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;iBAEC,gBACA,oBAAC;OACC,SAAS;OACT,WAAW,mBACT,YAAY,UACX,cAAc,KAAK,OAAO,SAAS,UAAU,CAC/C;QACD;OAEU;KAChB,oBAAC,oBAAK,MAAQ;;KACV;GACL,mBAAmB,EAAE,WAAW,kBAAkB,CAAC,gBAClD,oBAACC;IACC,MAAK;IACL,WAAW,KAAK,OAAO,aAAa,YAAY,YAAY;cAE3D;KACQ;GAEb,oBAAC;IACC,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;cAEA;KACU;MACZ;GAES"}
+{"version":3,"file":"index.js","names":["AriaTimeField","Label","isDisabled","AriaDateInput","AriaText"],"sources":["../../../src/components/time-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 Time from '@accelint/icons/time';\nimport {\n  DateInput as AriaDateInput,\n  Text as AriaText,\n  TimeField as AriaTimeField,\n  composeRenderProps,\n  DateSegment,\n  FieldError,\n  type TimeValue,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport styles from './styles.module.css';\nimport type { TimeFieldProps } from './types';\n\n/**\n * TimeField - Form input for time values\n *\n * Provides configurable granularity, 12/24-hour format, and automatic accessibility.\n *\n * @param props - {@link TimeFieldProps}\n * @param props.classNames - Custom CSS class names for field elements.\n * @param props.description - Helper text displayed below the input.\n * @param props.errorMessage - Error message displayed when validation fails.\n * @param props.granularity - The granularity of the time value (hour, minute, second).\n * @param props.hourCycle - Whether to use 12 or 24 hour time format.\n * @param props.inputProps - Props passed to the underlying DateInput element.\n * @param props.label - Label text for the field.\n * @param props.shouldForceLeadingZeros - Whether to force leading zeros in time segments.\n * @param props.size - Size variant of the field.\n * @param props.isDisabled - Whether the field is disabled.\n * @param props.isInvalid - Whether the field is in an invalid state.\n * @param props.isRequired - Whether the field is required.\n * @param props.isReadOnly - Whether the field is read-only.\n * @returns The rendered TimeField component.\n *\n * @example\n * ```tsx\n * <TimeField label=\"Start time\" granularity=\"minute\" onChange={setTime} />\n * ```\n */\nexport function TimeField<T extends TimeValue>({\n  classNames,\n  description: descriptionProp,\n  errorMessage: errorMessageProp,\n  granularity = 'second',\n  hourCycle = 24,\n  inputProps,\n  label: labelProp,\n  shouldForceLeadingZeros = true,\n  size = 'medium',\n  isDisabled,\n  isInvalid: isInvalidProp,\n  isRequired,\n  isReadOnly = false,\n  ...rest\n}: TimeFieldProps<T>) {\n  const errorMessage = errorMessageProp || null; // Protect against empty string\n  const isSmall = size === 'small';\n\n  return (\n    <AriaTimeField<T>\n      {...rest}\n      className={composeRenderProps(classNames?.field, (className) =>\n        clsx('group/time-field', styles.field, className),\n      )}\n      granularity={granularity}\n      hourCycle={hourCycle}\n      shouldForceLeadingZeros={shouldForceLeadingZeros}\n      isDisabled={isDisabled}\n      isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n      isRequired={isRequired}\n      isReadOnly={isReadOnly}\n      aria-label={labelProp}\n      data-size={size}\n    >\n      {(\n        { isDisabled }, // Rely on internal state, not props, since state could differ from props\n      ) => (\n        <>\n          {!isSmall && labelProp && (\n            <Label\n              className={clsx(styles.label, classNames?.label)}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n            >\n              {labelProp}\n            </Label>\n          )}\n          <div\n            className={clsx(styles.control, classNames?.control)}\n            data-readonly={isReadOnly || null}\n          >\n            {!isReadOnly && size === 'medium' && (\n              <Icon>\n                <Time />\n              </Icon>\n            )}\n            <AriaDateInput\n              {...inputProps}\n              className={composeRenderProps(classNames?.input, (className) =>\n                clsx(styles.input, className),\n              )}\n            >\n              {(segmentProp) => (\n                <DateSegment\n                  segment={segmentProp}\n                  className={composeRenderProps(\n                    classNames?.segment,\n                    (className) => clsx(styles.segment, className),\n                  )}\n                />\n              )}\n            </AriaDateInput>\n            <span>Z</span>\n          </div>\n          {descriptionProp && !(isSmall || isInvalidProp) && !errorMessage && (\n            <AriaText\n              slot='description'\n              className={clsx(styles.description, classNames?.description)}\n            >\n              {descriptionProp}\n            </AriaText>\n          )}\n          <FieldError\n            className={composeRenderProps(classNames?.error, (className) =>\n              clsx(styles.error, className),\n            )}\n          >\n            {errorMessage}\n          </FieldError>\n        </>\n      )}\n    </AriaTimeField>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,SAAgB,UAA+B,EAC7C,YACA,aAAa,iBACb,cAAc,kBACd,cAAc,UACd,YAAY,IACZ,YACA,OAAO,WACP,0BAA0B,MAC1B,OAAO,UACP,YACA,WAAW,eACX,YACA,aAAa,OACb,GAAG,QACiB;CACpB,MAAM,eAAe,oBAAoB;CACzC,MAAM,UAAU,SAAS;AAEzB,QACE,oBAACA;EACC,GAAI;EACJ,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,oBAAoB,OAAO,OAAO,UAAU,CAClD;EACY;EACF;EACc;EACb;EACZ,WAAW,kBAAkB,eAAe,OAAO;EACvC;EACA;EACZ,cAAY;EACZ,aAAW;aAGT,EAAE,+BAEF;GACG,CAAC,WAAW,aACX,oBAACC;IACC,WAAW,KAAK,OAAO,OAAO,YAAY,MAAM;IAChD,YAAYC;IACA;cAEX;KACK;GAEV,qBAAC;IACC,WAAW,KAAK,OAAO,SAAS,YAAY,QAAQ;IACpD,iBAAe,cAAc;;KAE5B,CAAC,cAAc,SAAS,YACvB,oBAAC,kBACC,oBAAC,SAAO,GACH;KAET,oBAACC;MACC,GAAI;MACJ,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;iBAEC,gBACA,oBAAC;OACC,SAAS;OACT,WAAW,mBACT,YAAY,UACX,cAAc,KAAK,OAAO,SAAS,UAAU,CAC/C;QACD;OAEU;KAChB,oBAAC,oBAAK,MAAQ;;KACV;GACL,mBAAmB,EAAE,WAAW,kBAAkB,CAAC,gBAClD,oBAACC;IACC,MAAK;IACL,WAAW,KAAK,OAAO,aAAa,YAAY,YAAY;cAE3D;KACQ;GAEb,oBAAC;IACC,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;cAEA;KACU;MACZ;GAES"}

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

@@ -18,7 +18,7 @@
   }
 
   .control {
-    @apply gap-xs rounded-medium px-s py-xs font-display outline-interactive fg-primary-bold flex w-full items-center outline;
+    @apply gap-xs rounded-medium px-s py-xs font-display fg-primary-bold outline-interactive flex w-full items-center outline;
 
     @variant group-size-medium/time-field {
       @apply text-body-s;
@@ -35,7 +35,6 @@
     @variant focus-visible-within {
       @apply outline-accent-primary-bold;
     }
-
     @variant group-invalid/time-field {
       @apply outline-serious-bold;
     }
@@ -43,6 +42,10 @@
     @variant group-disabled/time-field {
       @apply fg-disabled outline-interactive-disabled;
     }
+
+    @variant read-only {
+      @apply px-0 outline-none;
+    }
   }
 
   .input {