@accelint/design-toolkit 9.3.0 → 9.4.1

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

@@ -18,16 +18,16 @@
   }
 
   .control {
-    @apply fg-primary-bold gap-m rounded-medium px-s py-xs font-display outline-interactive flex w-full items-center outline;
+    @apply fg-primary-bold gap-m rounded-medium pl-s pr-xs py-xs font-display outline-interactive flex w-full items-center outline;
 
     min-width: var(--min-width, unset);
 
     @variant group-size-medium/coordinate-field {
-      @apply text-body-m;
+      @apply text-body-s;
     }
 
     @variant group-size-small/coordinate-field {
-      @apply text-body-s;
+      @apply text-body-xs;
     }
 
     @variant group-disabled/coordinate-field {
@@ -64,7 +64,7 @@
   }
 
   .segment {
-    @apply shrink-0 text-right transition-[width] duration-150 ease-in-out outline-none;
+    @apply shrink-0 text-right uppercase transition-[width] duration-150 ease-in-out outline-none;
 
     @variant placeholder-shown {
       @apply fg-primary-muted;
@@ -143,6 +143,10 @@
 }
 
 @layer components.l2 {
+  .formatButton {
+    @apply py-0;
+  }
+
   .formatOptions {
     @apply mb-m gap-xs flex flex-col;
   }
@@ -162,4 +166,8 @@
   .popoverTitle {
     @apply fg-primary-muted text-header-s;
   }
+
+  .hiddenTrigger {
+    @apply hidden;
+  }
 }

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

@@ -12,7 +12,7 @@
 
 import { DateFieldProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime71 from "react/jsx-runtime";
+import * as react_jsx_runtime51 from "react/jsx-runtime";
 import { DateValue } from "@internationalized/date";
 
 //#region src/components/date-field/index.d.ts
@@ -24,11 +24,29 @@ import { DateValue } from "@internationalized/date";
  * month, and year. Includes calendar icon, validation states, and international
  * date format support with keyboard navigation between segments.
  *
+ * @param props - The date field props.
+ * @param props.classNames - Custom class names for sub-elements.
+ * @param props.description - Helper text displayed below the field.
+ * @param props.errorMessage - Error message displayed when invalid.
+ * @param props.inputProps - Additional props for the date input element.
+ * @param props.label - Label text displayed above the field.
+ * @param props.size - Size variant of the field.
+ * @param props.shortMonth - When true, displays 3-letter month abbreviation when not editing.
+ * @param props.shouldForceLeadingZeros - Whether to force leading zeros in segments.
+ * @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 date field component.
+ *
  * @example
+ * ```tsx
  * // Basic date field
  * <DateField label="Birth Date" />
+ * ```
  *
  * @example
+ * ```tsx
  * // Date field with validation
  * <DateField
  *   label="Event Date"
@@ -36,30 +54,37 @@ import { DateValue } from "@internationalized/date";
  *   isInvalid={hasError}
  *   errorMessage="Please select a valid date"
  * />
+ * ```
  *
  * @example
+ * ```tsx
  * // Date field with custom formatting
  * <DateField
  *   label="Meeting Date"
  *   shortMonth={false}
  *   placeholder="Select meeting date"
  * />
+ * ```
  *
  * @example
+ * ```tsx
  * // Compact date field
  * <DateField
  *   label="Due Date"
  *   size="small"
  *   description="When is this task due?"
  * />
+ * ```
  *
  * @example
+ * ```tsx
  * // Controlled date field
  * <DateField
  *   label="Selected Date"
  *   value={selectedDate}
  *   onChange={setSelectedDate}
  * />
+ * ```
  */
 declare function DateField<T extends DateValue>({
   classNames,
@@ -75,7 +100,7 @@ declare function DateField<T extends DateValue>({
   isRequired,
   isReadOnly,
   ...rest
-}: DateFieldProps<T>): react_jsx_runtime71.JSX.Element;
+}: DateFieldProps<T>): react_jsx_runtime51.JSX.Element;
 //#endregion
 export { DateField };
 //# sourceMappingURL=index.d.ts.map

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

@@ -44,11 +44,29 @@ const months = [
 * month, and year. Includes calendar icon, validation states, and international
 * date format support with keyboard navigation between segments.
 *
+* @param props - The date field props.
+* @param props.classNames - Custom class names for sub-elements.
+* @param props.description - Helper text displayed below the field.
+* @param props.errorMessage - Error message displayed when invalid.
+* @param props.inputProps - Additional props for the date input element.
+* @param props.label - Label text displayed above the field.
+* @param props.size - Size variant of the field.
+* @param props.shortMonth - When true, displays 3-letter month abbreviation when not editing.
+* @param props.shouldForceLeadingZeros - Whether to force leading zeros in segments.
+* @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 date field component.
+*
 * @example
+* ```tsx
 * // Basic date field
 * <DateField label="Birth Date" />
+* ```
 *
 * @example
+* ```tsx
 * // Date field with validation
 * <DateField
 *   label="Event Date"
@@ -56,30 +74,37 @@ const months = [
 *   isInvalid={hasError}
 *   errorMessage="Please select a valid date"
 * />
+* ```
 *
 * @example
+* ```tsx
 * // Date field with custom formatting
 * <DateField
 *   label="Meeting Date"
 *   shortMonth={false}
 *   placeholder="Select meeting date"
 * />
+* ```
 *
 * @example
+* ```tsx
 * // Compact date field
 * <DateField
 *   label="Due Date"
 *   size="small"
 *   description="When is this task due?"
 * />
+* ```
 *
 * @example
+* ```tsx
 * // Controlled date field
 * <DateField
 *   label="Selected Date"
 *   value={selectedDate}
 *   onChange={setSelectedDate}
 * />
+* ```
 */
 function DateField({ classNames, description: descriptionProp, errorMessage: errorMessageProp, inputProps, label: labelProp, size = "medium", shortMonth = true, shouldForceLeadingZeros = true, isDisabled, isInvalid: isInvalidProp, isRequired, isReadOnly = false, ...rest }) {
 	const errorMessage = errorMessageProp || null;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["AriaDateField","Label","isDisabled","AriaDateInput","AriaText"],"sources":["../../../src/components/date-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 Calendar from '@accelint/icons/calendar';\nimport {\n  DateField as AriaDateField,\n  DateInput as AriaDateInput,\n  Text as AriaText,\n  composeRenderProps,\n  DateSegment,\n  FieldError,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport styles from './styles.module.css';\nimport type { DateValue } from '@internationalized/date';\nimport type { DateFieldProps } from './types';\n\nconst months = [\n  'JAN',\n  'FEB',\n  'MAR',\n  'APR',\n  'MAY',\n  'JUN',\n  'JUL',\n  'AUG',\n  'SEP',\n  'OCT',\n  'NOV',\n  'DEC',\n];\n\n/**\n * DateField - A comprehensive date input component with segmented editing\n *\n * Provides accessible date input functionality with separate segments for day,\n * month, and year. Includes calendar icon, validation states, and international\n * date format support with keyboard navigation between segments.\n *\n * @example\n * // Basic date field\n * <DateField label=\"Birth Date\" />\n *\n * @example\n * // Date field with validation\n * <DateField\n *   label=\"Event Date\"\n *   isRequired\n *   isInvalid={hasError}\n *   errorMessage=\"Please select a valid date\"\n * />\n *\n * @example\n * // Date field with custom formatting\n * <DateField\n *   label=\"Meeting Date\"\n *   shortMonth={false}\n *   placeholder=\"Select meeting date\"\n * />\n *\n * @example\n * // Compact date field\n * <DateField\n *   label=\"Due Date\"\n *   size=\"small\"\n *   description=\"When is this task due?\"\n * />\n *\n * @example\n * // Controlled date field\n * <DateField\n *   label=\"Selected Date\"\n *   value={selectedDate}\n *   onChange={setSelectedDate}\n * />\n */\nexport function DateField<T extends DateValue>({\n  classNames,\n  description: descriptionProp,\n  errorMessage: errorMessageProp,\n  inputProps,\n  label: labelProp,\n  size = 'medium',\n  shortMonth = true,\n  shouldForceLeadingZeros = true,\n  isDisabled,\n  isInvalid: isInvalidProp,\n  isRequired,\n  isReadOnly = false,\n  ...rest\n}: DateFieldProps<T>) {\n  const errorMessage = errorMessageProp || null; // Protect against empty string\n  const isSmall = size === 'small';\n\n  return (\n    <AriaDateField<T>\n      {...rest}\n      className={composeRenderProps(classNames?.field, (className) =>\n        clsx('group/date-field', styles.field, className),\n      )}\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                <Calendar />\n              </Icon>\n            )}\n            <AriaDateInput\n              {...inputProps}\n              className={composeRenderProps(classNames?.input, (className) =>\n                clsx(styles.input, className),\n              )}\n            >\n              {(segmentProp) => {\n                // Remove extra space and punctuation from input display\n                if (segmentProp.type === 'literal') {\n                  return <>{segmentProp.text === ':' ? ':' : null}</>;\n                }\n\n                return (\n                  <DateSegment\n                    className={composeRenderProps(\n                      classNames?.segment,\n                      (className) =>\n                        clsx(\n                          styles.segment,\n                          segmentProp.type === 'month' &&\n                            shortMonth &&\n                            styles.shortMonth,\n                          className,\n                        ),\n                    )}\n                    segment={segmentProp}\n                  >\n                    {({\n                      placeholder,\n                      text,\n                      value,\n                      isFocused,\n                      isPlaceholder,\n                    }) => {\n                      if (isPlaceholder) {\n                        return placeholder;\n                      }\n\n                      return segmentProp.type === 'month' &&\n                        shortMonth &&\n                        !isFocused\n                        ? months[(value ?? 0) - 1]\n                        : text;\n                    }}\n                  </DateSegment>\n                );\n              }}\n            </AriaDateInput>\n          </div>\n          {descriptionProp && (!(isSmall || isInvalidProp) || isDisabled) && (\n            <AriaText\n              className={clsx(styles.description, classNames?.description)}\n              slot='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    </AriaDateField>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,SAAS;CACb;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CD,SAAgB,UAA+B,EAC7C,YACA,aAAa,iBACb,cAAc,kBACd,YACA,OAAO,WACP,OAAO,UACP,aAAa,MACb,0BAA0B,MAC1B,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;EACwB;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;eAE5B,CAAC,cAAc,SAAS,YACvB,oBAAC,kBACC,oBAAC,aAAW,GACP,EAET,oBAACC;KACC,GAAI;KACJ,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;gBAEC,gBAAgB;AAEhB,UAAI,YAAY,SAAS,UACvB,QAAO,0CAAG,YAAY,SAAS,MAAM,MAAM,OAAQ;AAGrD,aACE,oBAAC;OACC,WAAW,mBACT,YAAY,UACX,cACC,KACE,OAAO,SACP,YAAY,SAAS,WACnB,cACA,OAAO,YACT,UACD,CACJ;OACD,SAAS;kBAEP,EACA,aACA,MACA,OACA,WACA,oBACI;AACJ,YAAI,cACF,QAAO;AAGT,eAAO,YAAY,SAAS,WAC1B,cACA,CAAC,YACC,QAAQ,SAAS,KAAK,KACtB;;QAEM;;MAGJ;KACZ;GACL,oBAAoB,EAAE,WAAW,kBAAkBD,iBAClD,oBAACE;IACC,WAAW,KAAK,OAAO,aAAa,YAAY,YAAY;IAC5D,MAAK;cAEJ;KACQ;GAEb,oBAAC;IACC,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;cAEA;KACU;MACZ;GAES"}
+{"version":3,"file":"index.js","names":["AriaDateField","Label","isDisabled","AriaDateInput","AriaText"],"sources":["../../../src/components/date-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 Calendar from '@accelint/icons/calendar';\nimport {\n  DateField as AriaDateField,\n  DateInput as AriaDateInput,\n  Text as AriaText,\n  composeRenderProps,\n  DateSegment,\n  FieldError,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport styles from './styles.module.css';\nimport type { DateValue } from '@internationalized/date';\nimport type { DateFieldProps } from './types';\n\nconst months = [\n  'JAN',\n  'FEB',\n  'MAR',\n  'APR',\n  'MAY',\n  'JUN',\n  'JUL',\n  'AUG',\n  'SEP',\n  'OCT',\n  'NOV',\n  'DEC',\n];\n\n/**\n * DateField - A comprehensive date input component with segmented editing\n *\n * Provides accessible date input functionality with separate segments for day,\n * month, and year. Includes calendar icon, validation states, and international\n * date format support with keyboard navigation between segments.\n *\n * @param props - The date field props.\n * @param props.classNames - Custom class names for sub-elements.\n * @param props.description - Helper text displayed below the field.\n * @param props.errorMessage - Error message displayed when invalid.\n * @param props.inputProps - Additional props for the date input element.\n * @param props.label - Label text displayed above the field.\n * @param props.size - Size variant of the field.\n * @param props.shortMonth - When true, displays 3-letter month abbreviation when not editing.\n * @param props.shouldForceLeadingZeros - Whether to force leading zeros in segments.\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 date field component.\n *\n * @example\n * ```tsx\n * // Basic date field\n * <DateField label=\"Birth Date\" />\n * ```\n *\n * @example\n * ```tsx\n * // Date field with validation\n * <DateField\n *   label=\"Event Date\"\n *   isRequired\n *   isInvalid={hasError}\n *   errorMessage=\"Please select a valid date\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Date field with custom formatting\n * <DateField\n *   label=\"Meeting Date\"\n *   shortMonth={false}\n *   placeholder=\"Select meeting date\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Compact date field\n * <DateField\n *   label=\"Due Date\"\n *   size=\"small\"\n *   description=\"When is this task due?\"\n * />\n * ```\n *\n * @example\n * ```tsx\n * // Controlled date field\n * <DateField\n *   label=\"Selected Date\"\n *   value={selectedDate}\n *   onChange={setSelectedDate}\n * />\n * ```\n */\nexport function DateField<T extends DateValue>({\n  classNames,\n  description: descriptionProp,\n  errorMessage: errorMessageProp,\n  inputProps,\n  label: labelProp,\n  size = 'medium',\n  shortMonth = true,\n  shouldForceLeadingZeros = true,\n  isDisabled,\n  isInvalid: isInvalidProp,\n  isRequired,\n  isReadOnly = false,\n  ...rest\n}: DateFieldProps<T>) {\n  const errorMessage = errorMessageProp || null; // Protect against empty string\n  const isSmall = size === 'small';\n\n  return (\n    <AriaDateField<T>\n      {...rest}\n      className={composeRenderProps(classNames?.field, (className) =>\n        clsx('group/date-field', styles.field, className),\n      )}\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                <Calendar />\n              </Icon>\n            )}\n            <AriaDateInput\n              {...inputProps}\n              className={composeRenderProps(classNames?.input, (className) =>\n                clsx(styles.input, className),\n              )}\n            >\n              {(segmentProp) => {\n                // Remove extra space and punctuation from input display\n                if (segmentProp.type === 'literal') {\n                  return <>{segmentProp.text === ':' ? ':' : null}</>;\n                }\n\n                return (\n                  <DateSegment\n                    className={composeRenderProps(\n                      classNames?.segment,\n                      (className) =>\n                        clsx(\n                          styles.segment,\n                          segmentProp.type === 'month' &&\n                            shortMonth &&\n                            styles.shortMonth,\n                          className,\n                        ),\n                    )}\n                    segment={segmentProp}\n                  >\n                    {({\n                      placeholder,\n                      text,\n                      value,\n                      isFocused,\n                      isPlaceholder,\n                    }) => {\n                      if (isPlaceholder) {\n                        return placeholder;\n                      }\n\n                      return segmentProp.type === 'month' &&\n                        shortMonth &&\n                        !isFocused\n                        ? months[(value ?? 0) - 1]\n                        : text;\n                    }}\n                  </DateSegment>\n                );\n              }}\n            </AriaDateInput>\n          </div>\n          {descriptionProp && (!(isSmall || isInvalidProp) || isDisabled) && (\n            <AriaText\n              className={clsx(styles.description, classNames?.description)}\n              slot='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    </AriaDateField>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAM,SAAS;CACb;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuED,SAAgB,UAA+B,EAC7C,YACA,aAAa,iBACb,cAAc,kBACd,YACA,OAAO,WACP,OAAO,UACP,aAAa,MACb,0BAA0B,MAC1B,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;EACwB;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;eAE5B,CAAC,cAAc,SAAS,YACvB,oBAAC,kBACC,oBAAC,aAAW,GACP,EAET,oBAACC;KACC,GAAI;KACJ,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;gBAEC,gBAAgB;AAEhB,UAAI,YAAY,SAAS,UACvB,QAAO,0CAAG,YAAY,SAAS,MAAM,MAAM,OAAQ;AAGrD,aACE,oBAAC;OACC,WAAW,mBACT,YAAY,UACX,cACC,KACE,OAAO,SACP,YAAY,SAAS,WACnB,cACA,OAAO,YACT,UACD,CACJ;OACD,SAAS;kBAEP,EACA,aACA,MACA,OACA,WACA,oBACI;AACJ,YAAI,cACF,QAAO;AAGT,eAAO,YAAY,SAAS,WAC1B,cACA,CAAC,YACC,QAAQ,SAAS,KAAK,KACtB;;QAEM;;MAGJ;KACZ;GACL,oBAAoB,EAAE,WAAW,kBAAkBD,iBAClD,oBAACE;IACC,WAAW,KAAK,OAAO,aAAa,YAAY,YAAY;IAC5D,MAAK;cAEJ;KACQ;GAEb,oBAAC;IACC,WAAW,mBAAmB,YAAY,QAAQ,cAChD,KAAK,OAAO,OAAO,UAAU,CAC9B;cAEA;KACU;MACZ;GAES"}

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

@@ -13,24 +13,40 @@
 import { DateFieldProps as DateFieldProps$1, DateInputProps, DateSegmentProps, DateValue, FieldErrorProps, LabelProps } from "react-aria-components";
 
 //#region src/components/date-field/types.d.ts
+/**
+ * Props for the DateField component.
+ *
+ * Extends AriaDateFieldProps with custom styling, labels, and size variants.
+ */
 type DateFieldProps<T extends DateValue> = Omit<DateFieldProps$1<T>, 'children' | 'className' | 'placeholder'> & {
+  /** Custom class names for sub-elements. */
   classNames?: {
+    /** Class name for the field container. */
     field?: DateFieldProps$1<T>['className'];
+    /** Class name for the label. */
     label?: LabelProps['className'];
+    /** Class name for the control wrapper. */
     control?: string;
+    /** Class name for the date input. */
     input?: DateInputProps['className'];
+    /** Class name for individual date segments. */
     segment?: DateSegmentProps['className'];
+    /** Class name for the description text. */
     description?: string;
+    /** Class name for the error message. */
     error?: FieldErrorProps['className'];
   };
+  /** Label text displayed above the field. */
   label?: string;
+  /** Helper text displayed below the field. */
   description?: string;
+  /** Error message displayed when invalid. */
   errorMessage?: string;
+  /** Additional props passed to the date input element. */
   inputProps?: Omit<DateInputProps, 'children' | 'className'>;
-  /**
-   * When true, will convert month value to 3 letter abbreviation when not editing
-   */
+  /** When true, will convert month value to 3 letter abbreviation when not editing. */
   shortMonth?: boolean;
+  /** Size variant of the field. */
   size?: 'small' | 'medium';
 };
 //#endregion

package/dist/components/deferred-collection/index.d.ts

@@ -11,7 +11,7 @@
  */
 
 import { DeferredCollectionProps } from "./types.js";
-import * as react_jsx_runtime74 from "react/jsx-runtime";
+import * as react_jsx_runtime52 from "react/jsx-runtime";
 
 //#region src/components/deferred-collection/index.d.ts
 
@@ -22,7 +22,14 @@ import * as react_jsx_runtime74 from "react/jsx-runtime";
  * virtualization begins. This component defers the collection render by a few
  * animation frames, allowing a fallback to display first.
  *
+ * @param props - The deferred collection props.
+ * @param props.children - Content to render once ready (ReactNode or function returning ReactNode).
+ * @param props.fallback - Fallback element to show while deferring render.
+ * @param props.deferFrames - Number of animation frames to defer before rendering.
+ * @returns The deferred collection component with fallback or children.
+ *
  * @example
+ * ```tsx
  * <DeferredCollection fallback={<LoadingState />}>
  *   {() => (
  *     <Virtualizer>
@@ -32,12 +39,13 @@ import * as react_jsx_runtime74 from "react/jsx-runtime";
  *     </Virtualizer>
  *   )}
  * </DeferredCollection>
+ * ```
  */
 declare function DeferredCollection({
   children,
   fallback,
   deferFrames
-}: DeferredCollectionProps): react_jsx_runtime74.JSX.Element;
+}: DeferredCollectionProps): react_jsx_runtime52.JSX.Element;
 //#endregion
 export { DeferredCollection, type DeferredCollectionProps };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/deferred-collection/index.js

@@ -22,7 +22,14 @@ import { Fragment, jsx } from "react/jsx-runtime";
 * virtualization begins. This component defers the collection render by a few
 * animation frames, allowing a fallback to display first.
 *
+* @param props - The deferred collection props.
+* @param props.children - Content to render once ready (ReactNode or function returning ReactNode).
+* @param props.fallback - Fallback element to show while deferring render.
+* @param props.deferFrames - Number of animation frames to defer before rendering.
+* @returns The deferred collection component with fallback or children.
+*
 * @example
+* ```tsx
 * <DeferredCollection fallback={<LoadingState />}>
 *   {() => (
 *     <Virtualizer>
@@ -32,6 +39,7 @@ import { Fragment, jsx } from "react/jsx-runtime";
 *     </Virtualizer>
 *   )}
 * </DeferredCollection>
+* ```
 */
 function DeferredCollection({ children, fallback, deferFrames }) {
 	const { isReady } = useFrameDelay({ frames: deferFrames });

package/dist/components/deferred-collection/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/deferred-collection/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\nimport { useFrameDelay } from '../../hooks/use-frame-delay';\nimport type { DeferredCollectionProps } from './types';\n\n/**\n * DeferredCollection - Defers rendering of large collections to prevent UI freezes.\n *\n * React Aria's collection system processes ALL items synchronously before\n * virtualization begins. This component defers the collection render by a few\n * animation frames, allowing a fallback to display first.\n *\n * @example\n * <DeferredCollection fallback={<LoadingState />}>\n *   {() => (\n *     <Virtualizer>\n *       <ListBox items={items}>\n *         {(item) => <ListBoxItem>{item.name}</ListBoxItem>}\n *       </ListBox>\n *     </Virtualizer>\n *   )}\n * </DeferredCollection>\n */\nexport function DeferredCollection({\n  children,\n  fallback,\n  deferFrames,\n}: DeferredCollectionProps) {\n  const { isReady } = useFrameDelay({ frames: deferFrames });\n\n  if (isReady) {\n    return <>{typeof children === 'function' ? children() : children}</>;\n  }\n\n  return <>{fallback}</>;\n}\n\nexport type { DeferredCollectionProps } from './types';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,SAAgB,mBAAmB,EACjC,UACA,UACA,eAC0B;CAC1B,MAAM,EAAE,YAAY,cAAc,EAAE,QAAQ,aAAa,CAAC;AAE1D,KAAI,QACF,QAAO,0CAAG,OAAO,aAAa,aAAa,UAAU,GAAG,WAAY;AAGtE,QAAO,0CAAG,WAAY"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/deferred-collection/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\nimport { useFrameDelay } from '../../hooks/use-frame-delay';\nimport type { DeferredCollectionProps } from './types';\n\n/**\n * DeferredCollection - Defers rendering of large collections to prevent UI freezes.\n *\n * React Aria's collection system processes ALL items synchronously before\n * virtualization begins. This component defers the collection render by a few\n * animation frames, allowing a fallback to display first.\n *\n * @param props - The deferred collection props.\n * @param props.children - Content to render once ready (ReactNode or function returning ReactNode).\n * @param props.fallback - Fallback element to show while deferring render.\n * @param props.deferFrames - Number of animation frames to defer before rendering.\n * @returns The deferred collection component with fallback or children.\n *\n * @example\n * ```tsx\n * <DeferredCollection fallback={<LoadingState />}>\n *   {() => (\n *     <Virtualizer>\n *       <ListBox items={items}>\n *         {(item) => <ListBoxItem>{item.name}</ListBoxItem>}\n *       </ListBox>\n *     </Virtualizer>\n *   )}\n * </DeferredCollection>\n * ```\n */\nexport function DeferredCollection({\n  children,\n  fallback,\n  deferFrames,\n}: DeferredCollectionProps) {\n  const { isReady } = useFrameDelay({ frames: deferFrames });\n\n  if (isReady) {\n    return <>{typeof children === 'function' ? children() : children}</>;\n  }\n\n  return <>{fallback}</>;\n}\n\nexport type { DeferredCollectionProps } from './types';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,SAAgB,mBAAmB,EACjC,UACA,UACA,eAC0B;CAC1B,MAAM,EAAE,YAAY,cAAc,EAAE,QAAQ,aAAa,CAAC;AAE1D,KAAI,QACF,QAAO,0CAAG,OAAO,aAAa,aAAa,UAAU,GAAG,WAAY;AAGtE,QAAO,0CAAG,WAAY"}

package/dist/components/deferred-collection/types.d.ts

@@ -13,12 +13,15 @@
 import { ReactNode } from "react";
 
 //#region src/components/deferred-collection/types.d.ts
+/**
+ * Props for the DeferredCollection component.
+ */
 interface DeferredCollectionProps {
-  /** The content to render once ready - can be ReactNode or a function returning ReactNode for deferred creation */
+  /** The content to render once ready - can be ReactNode or a function returning ReactNode for deferred creation. */
   children: ReactNode | (() => ReactNode);
-  /** Fallback element to show while deferring render */
+  /** Fallback element to show while deferring render. */
   fallback?: ReactNode;
-  /** Number of animation frames to defer before rendering (default: 2) */
+  /** Number of animation frames to defer before rendering (default: 2). */
   deferFrames?: number;
 }
 //#endregion

package/dist/components/details-list/context.d.ts

@@ -13,16 +13,37 @@
 import { ProviderProps } from "../../lib/types.js";
 import { DetailsListProps } from "./types.js";
 import "client-only";
-import * as react26 from "react";
+import * as react15 from "react";
 import { ContextValue } from "react-aria-components";
-import * as react_jsx_runtime77 from "react/jsx-runtime";
+import * as react_jsx_runtime53 from "react/jsx-runtime";
 
 //#region src/components/details-list/context.d.ts
-declare const DetailsListContext: react26.Context<ContextValue<DetailsListProps, HTMLDListElement>>;
+/**
+ * Context for sharing DetailsList props across component tree.
+ */
+declare const DetailsListContext: react15.Context<ContextValue<DetailsListProps, HTMLDListElement>>;
+/**
+ * DetailsListProvider - Context provider for setting default DetailsList props.
+ *
+ * Use this to configure shared alignment and classNames across multiple
+ * DetailsList components in your application.
+ *
+ * @param props - The provider props.
+ * @param props.children - Child components that will receive the details list context.
+ * @returns The details list context provider wrapping children.
+ *
+ * @example
+ * ```tsx
+ * <DetailsListProvider align="left">
+ *   <DetailsList>...</DetailsList>
+ *   <DetailsList>...</DetailsList>
+ * </DetailsListProvider>
+ * ```
+ */
 declare function DetailsListProvider({
   children,
   ...props
-}: ProviderProps<DetailsListProps>): react_jsx_runtime77.JSX.Element;
+}: ProviderProps<DetailsListProps>): react_jsx_runtime53.JSX.Element;
 //#endregion
 export { DetailsListContext, DetailsListProvider };
 //# sourceMappingURL=context.d.ts.map

package/dist/components/details-list/context.js

@@ -18,7 +18,28 @@ import { createContext } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/details-list/context.tsx
+/**
+* Context for sharing DetailsList props across component tree.
+*/
 const DetailsListContext = createContext(null);
+/**
+* DetailsListProvider - Context provider for setting default DetailsList props.
+*
+* Use this to configure shared alignment and classNames across multiple
+* DetailsList components in your application.
+*
+* @param props - The provider props.
+* @param props.children - Child components that will receive the details list context.
+* @returns The details list context provider wrapping children.
+*
+* @example
+* ```tsx
+* <DetailsListProvider align="left">
+*   <DetailsList>...</DetailsList>
+*   <DetailsList>...</DetailsList>
+* </DetailsListProvider>
+* ```
+*/
 function DetailsListProvider({ children, ...props }) {
 	return /* @__PURE__ */ jsx(DetailsListContext.Provider, {
 		value: props,

package/dist/components/details-list/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/details-list/context.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { createContext } from 'react';\nimport type { ContextValue } from 'react-aria-components';\nimport type { ProviderProps } from '@/lib/types';\nimport type { DetailsListProps } from './types';\n\nexport const DetailsListContext =\n  createContext<ContextValue<DetailsListProps, HTMLDListElement>>(null);\n\nexport function DetailsListProvider({\n  children,\n  ...props\n}: ProviderProps<DetailsListProps>) {\n  return (\n    <DetailsListContext.Provider value={props}>\n      {children}\n    </DetailsListContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,MAAa,qBACX,cAAgE,KAAK;AAEvE,SAAgB,oBAAoB,EAClC,UACA,GAAG,SAC+B;AAClC,QACE,oBAAC,mBAAmB;EAAS,OAAO;EACjC;GAC2B"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../src/components/details-list/context.tsx"],"sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n'use client';\n\nimport 'client-only';\nimport { createContext } from 'react';\nimport type { ContextValue } from 'react-aria-components';\nimport type { ProviderProps } from '@/lib/types';\nimport type { DetailsListProps } from './types';\n\n/**\n * Context for sharing DetailsList props across component tree.\n */\nexport const DetailsListContext =\n  createContext<ContextValue<DetailsListProps, HTMLDListElement>>(null);\n\n/**\n * DetailsListProvider - Context provider for setting default DetailsList props.\n *\n * Use this to configure shared alignment and classNames across multiple\n * DetailsList components in your application.\n *\n * @param props - The provider props.\n * @param props.children - Child components that will receive the details list context.\n * @returns The details list context provider wrapping children.\n *\n * @example\n * ```tsx\n * <DetailsListProvider align=\"left\">\n *   <DetailsList>...</DetailsList>\n *   <DetailsList>...</DetailsList>\n * </DetailsListProvider>\n * ```\n */\nexport function DetailsListProvider({\n  children,\n  ...props\n}: ProviderProps<DetailsListProps>) {\n  return (\n    <DetailsListContext.Provider value={props}>\n      {children}\n    </DetailsListContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsBA,MAAa,qBACX,cAAgE,KAAK;;;;;;;;;;;;;;;;;;;AAoBvE,SAAgB,oBAAoB,EAClC,UACA,GAAG,SAC+B;AAClC,QACE,oBAAC,mBAAmB;EAAS,OAAO;EACjC;GAC2B"}

package/dist/components/details-list/index.d.ts

@@ -12,7 +12,7 @@
 
 import { DetailsListProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime79 from "react/jsx-runtime";
+import * as react_jsx_runtime55 from "react/jsx-runtime";
 
 //#region src/components/details-list/index.d.ts
 
@@ -21,6 +21,13 @@ import * as react_jsx_runtime79 from "react/jsx-runtime";
  * Uses CSS Grid layout with labels in the first column and values in the second column.
  * Perfect for map object details, user profiles, or any structured information.
  *
+ * @param props - The details list props.
+ * @param props.ref - Reference to the list element.
+ * @param props.children - Label and value child components.
+ * @param props.classNames - Custom class names for sub-elements.
+ * @param props.align - Text alignment for list items.
+ * @returns The details list component.
+ *
  * @example
  * ```tsx
  * <DetailsList align="left">
@@ -48,7 +55,7 @@ import * as react_jsx_runtime79 from "react/jsx-runtime";
 declare function DetailsList({
   ref,
   ...props
-}: DetailsListProps): react_jsx_runtime79.JSX.Element;
+}: DetailsListProps): react_jsx_runtime55.JSX.Element;
 //#endregion
 export { DetailsList };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/details-list/index.js

@@ -26,6 +26,13 @@ import styles from "./styles.module.css";
 * Uses CSS Grid layout with labels in the first column and values in the second column.
 * Perfect for map object details, user profiles, or any structured information.
 *
+* @param props - The details list props.
+* @param props.ref - Reference to the list element.
+* @param props.children - Label and value child components.
+* @param props.classNames - Custom class names for sub-elements.
+* @param props.align - Text alignment for list items.
+* @returns The details list component.
+*
 * @example
 * ```tsx
 * <DetailsList align="left">

package/dist/components/details-list/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/details-list/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  DEFAULT_SLOT,\n  TextContext,\n  useContextProps,\n} from 'react-aria-components';\nimport { DetailsListContext } from './context';\nimport styles from './styles.module.css';\nimport type { DetailsListProps } from './types';\n\n/**\n * A semantic details list component for displaying metadata in key-value pairs.\n * Uses CSS Grid layout with labels in the first column and values in the second column.\n * Perfect for map object details, user profiles, or any structured information.\n *\n * @example\n * ```tsx\n * <DetailsList align=\"left\">\n *   <DetailsListLabel>Key</DetailsListLabel>\n *   <DetailsListValue>Value</DetailsListValue>\n *\n *   <DetailsListLabel>Ships</DetailsListLabel>\n *   <DetailsListValue>Millennium Falcon</DetailsListValue>\n *   <DetailsListValue>USS Enterprise NCC-1701</DetailsListValue>\n *   <DetailsListValue>Serenity</DetailsListValue>\n *\n *   <DetailsListLabel>Coordinates</DetailsListLabel>\n *   <DetailsListValue>\n *     <div>Great Pyramid of Giza: 29°58'44\" N 31°08'02\" E</div>\n *     <div>Machu Picchu: 13°09'47\" S 72°32'41\" W</div>\n *     <div>Colosseum: 41°53'24\" N 12°29'32\" E</div>\n *     <div>Taj Mahal: 27°10'30\" N 78°02'31\" E</div>\n *   </DetailsListValue>\n * </DetailsList>\n * ```\n * ## Child Component Behavior\n * - **DetailsListLabel**: Minimum of 1\n * - **DetailsListValue**: Minimum of 1\n */\nexport function DetailsList({ ref, ...props }: DetailsListProps) {\n  [props, ref] = useContextProps(props, ref ?? null, DetailsListContext);\n\n  const { children, classNames, align = 'justify', ...rest } = props;\n\n  return (\n    <TextContext\n      value={{\n        slots: {\n          [DEFAULT_SLOT]: {},\n          label: {\n            className: clsx(styles.label, styles[align], classNames?.label),\n          },\n          value: {\n            className: clsx(styles.value, styles[align], classNames?.value),\n          },\n        },\n      }}\n    >\n      <dl {...rest} className={clsx(styles.list, classNames?.list)}>\n        {children}\n      </dl>\n    </TextContext>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,SAAgB,YAAY,EAAE,KAAK,GAAG,SAA2B;AAC/D,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,mBAAmB;CAEtE,MAAM,EAAE,UAAU,YAAY,QAAQ,WAAW,GAAG,SAAS;AAE7D,QACE,oBAAC;EACC,OAAO,EACL,OAAO;IACJ,eAAe,EAAE;GAClB,OAAO,EACL,WAAW,KAAK,OAAO,OAAO,OAAO,QAAQ,YAAY,MAAM,EAChE;GACD,OAAO,EACL,WAAW,KAAK,OAAO,OAAO,OAAO,QAAQ,YAAY,MAAM,EAChE;GACF,EACF;YAED,oBAAC;GAAG,GAAI;GAAM,WAAW,KAAK,OAAO,MAAM,YAAY,KAAK;GACzD;IACE;GACO"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/details-list/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  DEFAULT_SLOT,\n  TextContext,\n  useContextProps,\n} from 'react-aria-components';\nimport { DetailsListContext } from './context';\nimport styles from './styles.module.css';\nimport type { DetailsListProps } from './types';\n\n/**\n * A semantic details list component for displaying metadata in key-value pairs.\n * Uses CSS Grid layout with labels in the first column and values in the second column.\n * Perfect for map object details, user profiles, or any structured information.\n *\n * @param props - The details list props.\n * @param props.ref - Reference to the list element.\n * @param props.children - Label and value child components.\n * @param props.classNames - Custom class names for sub-elements.\n * @param props.align - Text alignment for list items.\n * @returns The details list component.\n *\n * @example\n * ```tsx\n * <DetailsList align=\"left\">\n *   <DetailsListLabel>Key</DetailsListLabel>\n *   <DetailsListValue>Value</DetailsListValue>\n *\n *   <DetailsListLabel>Ships</DetailsListLabel>\n *   <DetailsListValue>Millennium Falcon</DetailsListValue>\n *   <DetailsListValue>USS Enterprise NCC-1701</DetailsListValue>\n *   <DetailsListValue>Serenity</DetailsListValue>\n *\n *   <DetailsListLabel>Coordinates</DetailsListLabel>\n *   <DetailsListValue>\n *     <div>Great Pyramid of Giza: 29°58'44\" N 31°08'02\" E</div>\n *     <div>Machu Picchu: 13°09'47\" S 72°32'41\" W</div>\n *     <div>Colosseum: 41°53'24\" N 12°29'32\" E</div>\n *     <div>Taj Mahal: 27°10'30\" N 78°02'31\" E</div>\n *   </DetailsListValue>\n * </DetailsList>\n * ```\n * ## Child Component Behavior\n * - **DetailsListLabel**: Minimum of 1\n * - **DetailsListValue**: Minimum of 1\n */\nexport function DetailsList({ ref, ...props }: DetailsListProps) {\n  [props, ref] = useContextProps(props, ref ?? null, DetailsListContext);\n\n  const { children, classNames, align = 'justify', ...rest } = props;\n\n  return (\n    <TextContext\n      value={{\n        slots: {\n          [DEFAULT_SLOT]: {},\n          label: {\n            className: clsx(styles.label, styles[align], classNames?.label),\n          },\n          value: {\n            className: clsx(styles.value, styles[align], classNames?.value),\n          },\n        },\n      }}\n    >\n      <dl {...rest} className={clsx(styles.list, classNames?.list)}>\n        {children}\n      </dl>\n    </TextContext>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4DA,SAAgB,YAAY,EAAE,KAAK,GAAG,SAA2B;AAC/D,EAAC,OAAO,OAAO,gBAAgB,OAAO,OAAO,MAAM,mBAAmB;CAEtE,MAAM,EAAE,UAAU,YAAY,QAAQ,WAAW,GAAG,SAAS;AAE7D,QACE,oBAAC;EACC,OAAO,EACL,OAAO;IACJ,eAAe,EAAE;GAClB,OAAO,EACL,WAAW,KAAK,OAAO,OAAO,OAAO,QAAQ,YAAY,MAAM,EAChE;GACD,OAAO,EACL,WAAW,KAAK,OAAO,OAAO,OAAO,QAAQ,YAAY,MAAM,EAChE;GACF,EACF;YAED,oBAAC;GAAG,GAAI;GAAM,WAAW,KAAK,OAAO,MAAM,YAAY,KAAK;GACzD;IACE;GACO"}

package/dist/components/details-list/label.d.ts

@@ -12,10 +12,26 @@
 
 import { DetailsListLabelProps } from "./types.js";
 import "client-only";
-import * as react_jsx_runtime81 from "react/jsx-runtime";
+import * as react_jsx_runtime54 from "react/jsx-runtime";
 
 //#region src/components/details-list/label.d.ts
-declare function DetailsListLabel(props: DetailsListLabelProps): react_jsx_runtime81.JSX.Element;
+/**
+ * DetailsListLabel - Label component for DetailsList key/term.
+ *
+ * Renders as a `<dt>` element within the DetailsList grid.
+ *
+ * @param props - The details list label props.
+ * @returns The details list label component.
+ *
+ * @example
+ * ```tsx
+ * <DetailsList>
+ *   <DetailsListLabel>Name</DetailsListLabel>
+ *   <DetailsListValue>John Doe</DetailsListValue>
+ * </DetailsList>
+ * ```
+ */
+declare function DetailsListLabel(props: DetailsListLabelProps): react_jsx_runtime54.JSX.Element;
 //#endregion
 export { DetailsListLabel };
 //# sourceMappingURL=label.d.ts.map

package/dist/components/details-list/label.js

@@ -18,6 +18,22 @@ import { Text } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/details-list/label.tsx
+/**
+* DetailsListLabel - Label component for DetailsList key/term.
+*
+* Renders as a `<dt>` element within the DetailsList grid.
+*
+* @param props - The details list label props.
+* @returns The details list label component.
+*
+* @example
+* ```tsx
+* <DetailsList>
+*   <DetailsListLabel>Name</DetailsListLabel>
+*   <DetailsListValue>John Doe</DetailsListValue>
+* </DetailsList>
+* ```
+*/
 function DetailsListLabel(props) {
 	return /* @__PURE__ */ jsx(Text, {
 		...props,

package/dist/components/details-list/label.js.map

@@ -1 +1 @@
-{"version":3,"file":"label.js","names":[],"sources":["../../../src/components/details-list/label.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 { Text } from 'react-aria-components';\nimport type { DetailsListLabelProps } from './types';\n\nexport function DetailsListLabel(props: DetailsListLabelProps) {\n  return <Text {...props} elementType='dt' slot='label' />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAiBA,SAAgB,iBAAiB,OAA8B;AAC7D,QAAO,oBAAC;EAAK,GAAI;EAAO,aAAY;EAAK,MAAK;GAAU"}
+{"version":3,"file":"label.js","names":[],"sources":["../../../src/components/details-list/label.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 { Text } from 'react-aria-components';\nimport type { DetailsListLabelProps } from './types';\n\n/**\n * DetailsListLabel - Label component for DetailsList key/term.\n *\n * Renders as a `<dt>` element within the DetailsList grid.\n *\n * @param props - The details list label props.\n * @returns The details list label component.\n *\n * @example\n * ```tsx\n * <DetailsList>\n *   <DetailsListLabel>Name</DetailsListLabel>\n *   <DetailsListValue>John Doe</DetailsListValue>\n * </DetailsList>\n * ```\n */\nexport function DetailsListLabel(props: DetailsListLabelProps) {\n  return <Text {...props} elementType='dt' slot='label' />;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,SAAgB,iBAAiB,OAA8B;AAC7D,QAAO,oBAAC;EAAK,GAAI;EAAO,aAAY;EAAK,MAAK;GAAU"}

package/dist/components/details-list/types.d.ts

@@ -14,15 +14,29 @@ import { ComponentPropsWithRef, RefAttributes } from "react";
 import { TextProps } from "react-aria-components";
 
 //#region src/components/details-list/types.d.ts
+/**
+ * Props for the DetailsList component.
+ */
 type DetailsListProps = Omit<ComponentPropsWithRef<'dl'>, 'className'> & {
+  /** Custom class names for sub-elements. */
   classNames?: {
+    /** Class name for the list container. */
     list?: string;
+    /** Class name for label elements. */
     label?: string;
+    /** Class name for value elements. */
     value?: string;
   };
+  /** Text alignment for list items. */
   align?: 'center' | 'justify' | 'left';
 };
+/**
+ * Props for the DetailsListLabel component.
+ */
 type DetailsListLabelProps = Omit<TextProps, 'elementType'> & RefAttributes<HTMLElement>;
+/**
+ * Props for the DetailsListValue component.
+ */
 type DetailsListValueProps = Omit<TextProps, 'elementType'> & RefAttributes<HTMLElement>;
 //#endregion
 export { DetailsListLabelProps, DetailsListProps, DetailsListValueProps };