@accelint/design-toolkit 2.4.3 → 2.6.0

package/dist/components/color-picker/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/color-picker/index.tsx"],"names":["value","parseColor","P","useMemo","parseColorFromProp","props","useControlledState","defaultValue","color","ref","colorFromProps","propColor","n","locale","map","useContext","ColorMapContext","m","useEffect","p","key","jsx","AriaListBoxItem","a","S","createContext","h","useContextProps","ColorSwatchPickerContext","v","state","useColorPickerState","colorMap","w","u","x","ColorPicker"],"mappings":"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","file":"index.js","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';\nimport { cn } from '@/lib/utils';\nimport { useControlledState } from '@react-stately/utils';\nimport 'client-only';\nimport {\n  type ForwardedRef,\n  type ReactNode,\n  createContext,\n  useContext,\n  useEffect,\n  useMemo,\n} from 'react';\nimport {\n  ColorSwatch as AriaColorSwatch,\n  ColorSwatchContext as AriaColorSwatchContext,\n  type ColorSwatchPickerItemProps as AriaColorSwatchPickerItemProps,\n  type ColorSwatchPickerProps as AriaColorSwatchPickerProps,\n  ListBox as AriaListBox,\n  ListBoxItem as AriaListBoxItem,\n  type Color,\n  ColorSwatchPickerContext,\n  parseColor,\n  useContextProps,\n  useLocale,\n} from 'react-aria-components';\n\ninterface ColorPickerState {\n  /** The current color value of the color picker. */\n  color: Color | null;\n  /** Sets the current color value of the color picker. */\n  setColor(color: Color | null): void;\n}\n\nconst parseColorFromProp = (value?: Color | string) => {\n  if (typeof value === 'string') {\n    try {\n      return parseColor(value);\n    } catch {\n      return undefined;\n    }\n  }\n  return value;\n};\n\nexport function useColorPickerState(\n  props: AriaColorSwatchPickerProps,\n): ColorPickerState {\n  const value = useMemo(() => parseColorFromProp(props.value), [props.value]);\n\n  const defaultValue = useMemo(\n    () => parseColorFromProp(props.defaultValue || '#000000'),\n    [props.defaultValue],\n  );\n  const [color, setColor] = useControlledState(\n    value || null,\n    defaultValue as Color,\n    props.onChange,\n  );\n\n  return {\n    color,\n    setColor(color) {\n      setColor(color);\n    },\n  };\n}\n\n/**\n * Renders a single color swatch item for use within a color picker list.\n *\n * This component manages the registration of its color value in a shared color map context,\n * and provides the color value to its children via context. It also handles accessibility\n * and styling for selection and focus states.\n\n *\n * @remarks\n * - The component registers its color in a shared `ColorMapContext` on mount and removes it on unmount.\n * - The color is parsed and memoized for performance.\n * - The swatch item is rendered as an accessible list box item.\n */\nfunction ColorSwatchPickerItem({\n  ref = null,\n  color: colorFromProps,\n  ...props\n}: Omit<AriaColorSwatchPickerItemProps, 'style'> & {\n  children: ReactNode;\n  ref?: ForwardedRef<HTMLDivElement>;\n}) {\n  const propColor = colorFromProps || '#0000';\n  const color = useMemo(\n    () => (typeof propColor === 'string' ? parseColor(propColor) : propColor),\n    [propColor],\n  );\n  const { locale } = useLocale();\n  const map = useContext(ColorMapContext);\n\n  // Register the color in the map context on mount and remove it on unmount.\n  // This allows the color picker to manage its own state and selection.\n  // The key is the color's hex representation, ensuring uniqueness.\n  // The color is also provided to the context for use by children components.\n  // This is useful for rendering the swatch or any related UI elements.\n  useEffect(() => {\n    const key = color.toString('hexa');\n    map?.set(key, color);\n    return () => {\n      map?.delete(key);\n    };\n  }, [color, map]);\n\n  return (\n    <AriaListBoxItem\n      {...props}\n      ref={ref}\n      id={color.toString('hexa')}\n      textValue={color.getColorName(locale)}\n      className='w-fit outline-none outline outline-offset-1 hover:outline-interactive-hover hover:outline-solid focus:outline-interactive-hover focus:outline-solid data-selected:outline-highlight data-selected:outline-solid'\n    >\n      <AriaColorSwatchContext.Provider value={{ color }}>\n        {props.children}\n      </AriaColorSwatchContext.Provider>\n    </AriaListBoxItem>\n  );\n}\n\nconst ColorMapContext = createContext<Map<string, Color> | null>(null);\n\nexport interface ColorPickerProps extends AriaColorSwatchPickerProps {\n  options: AriaColorSwatchPickerItemProps['color'][];\n  ref?: ForwardedRef<HTMLDivElement>;\n}\n\ninterface ColorSwatchPickerProps extends Omit<ColorPickerProps, 'options'> {\n  children?: ReactNode;\n}\n\nfunction ColorSwatchPicker({\n  ref = null,\n  className,\n  children,\n  ...props\n}: ColorSwatchPickerProps) {\n  [props, ref] = useContextProps(props, ref, ColorSwatchPickerContext);\n  const state = useColorPickerState(props);\n  const colorMap = useMemo(() => new Map(), []);\n  return (\n    <AriaListBox\n      className={cn('flex flex-wrap gap-s', className)}\n      style={props.style}\n      layout={props.layout || 'grid'}\n      selectionMode='single'\n      selectedKeys={state.color ? [state.color.toString('hexa')] : undefined}\n      onSelectionChange={(keys) => {\n        // single select, 'all' cannot occur.\n        if (keys !== 'all') {\n          if (keys.size > 0) {\n            state.setColor(colorMap.get([...keys][0]));\n          } else {\n            // If no keys are selected, we can set the color to null or a default value\n            state.setColor(null);\n          }\n        }\n      }}\n      {...props}\n    >\n      <ColorMapContext.Provider value={colorMap}>\n        {children}\n      </ColorMapContext.Provider>\n    </AriaListBox>\n  );\n}\n\nexport function ColorPicker({\n  options,\n  className,\n  ...props\n}: ColorPickerProps) {\n  return (\n    <ColorSwatchPicker\n      className={cn('flex flex-wrap gap-s', className)}\n      {...props}\n    >\n      {options.map((color) => (\n        <ColorSwatchPickerItem key={color.toString()} color={color}>\n          <AriaColorSwatch className='h-[16px] w-[16px]' />\n        </ColorSwatchPickerItem>\n      ))}\n    </ColorSwatchPicker>\n  );\n}\nColorPicker.displayName = 'ColorPicker';\n"]}
+{"version":3,"sources":["../../../src/components/color-picker/index.tsx"],"names":["ColorPickerStyles","k","rest","c","m","classNames","picker","color","jsx","ColorSwatchPickerItem","item","ColorSwatch","l","swatch","ColorPicker"],"mappings":"oNAuBQ,CAAA,MAAQ,CAAA,CAAA,CAAA,IAAM,CAAA,CAAA,CAAA,MAAWA,CAAAA,CAAkB,EA0C5CC,iBAAA,EAAA,CAAA,SAAuB,CAAA,CAAA,CAAA,UAAY,CAAA,CAAA,CAAA,KAAO,CAAA,CAAGC,CAAK,GACvD,CAAA,CAAA,CAAA,CAAA,OACGC,GACE,CAAAC,iBAAA,CAAGF,IACJ,CAAA,CAAA,SAA8BG,CAAAA,kBAAY,CAAA,CAAA,EAAA,MACxCC,CAAAA,CAAO,EAAE,CAAA,CAAA,CAAA,SACX,CAAA,CAEC,YAAM,CAAA,CAAA,CAAKC,GACVC,CAAAA,CAACC,EAAAN,GAEC,iCAA8BE,CAAAA,kBAAY,CAAA,CAAA,EAAA,IACxCK,CAAAA,CAAK,cACP,CAAA,CACA,CAAA,CAAA,CAAA,CAAA,gBAECC,CAAAR,GACC,CAAAS,WAAA,CAAA,CAAA,SAA8BP,CAAAA,kBAAY,UACxCQ,CAAAA,CAAO,EAAE,CAAA,CAAA,CAAA,SACX,CAAA,CACF,CAAA,CAAA,CAVKN,CAAAA,CAAM,CAAA,CAAA,CAAA,CAAA,QAAS,CAAA,MAa1B,CAEJ,CACAO,CAAAA,CAAY,CAAA,CAAA,CAAA,CAAA,WAAc,CAAA,aAAA","file":"index.js","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 {\n  ColorSwatch,\n  ColorSwatchPicker,\n  ColorSwatchPickerItem,\n  composeRenderProps,\n} from 'react-aria-components';\nimport { ColorPickerStyles } from './styles';\nimport type { ColorPickerProps } from './types';\n\nconst { picker, item, swatch } = ColorPickerStyles();\n\n/**\n * A color picker component that renders a grid of color swatches for selection.\n *\n * This component provides a simple interface for users to select from a predefined\n * set of colors. It renders each color as an interactive swatch that can be clicked\n * to select that color. The component supports keyboard navigation, accessibility\n * features, and fine-grained styling control through the classNames prop.\n *\n * @param items - Array of color values to display as selectable swatches\n * @param classNames - Object containing CSS class names for fine-grained styling control\n * @param classNames.picker - CSS class name for the main picker container\n * @param classNames.item - CSS class name for individual swatch items\n * @param classNames.swatch - CSS class name for the color swatch elements\n *\n * @example\n * ```tsx\n * const colors = [\n *   '#ff0000',\n *   '#00ff00',\n *   '#0000ff',\n * ];\n *\n * <ColorPicker\n *   options={colors}\n *   value={'#ff0000'}\n *   onChange={(color) => console.log('Selected:', color)}\n *   classNames={{\n *     picker: 'gap-4',\n *     item: 'rounded-lg',\n *     swatch: 'w-8 h-8'\n *   }}\n * />\n * ```\n *\n * @remarks\n * - Colors can be provided as Color objects or color strings\n * - The component automatically handles color parsing and validation\n * - Supports all accessibility features from react-aria-components\n * - Uses a grid layout by default but can be customized via the layout prop\n */\nexport function ColorPicker({ classNames, items, ...rest }: ColorPickerProps) {\n  return (\n    <ColorSwatchPicker\n      {...rest}\n      className={composeRenderProps(classNames?.picker, (className) =>\n        picker({ className }),\n      )}\n    >\n      {items.map((color) => (\n        <ColorSwatchPickerItem\n          key={color.toString('hexa')}\n          className={composeRenderProps(classNames?.item, (className) =>\n            item({ className }),\n          )}\n          color={color}\n        >\n          <ColorSwatch\n            className={composeRenderProps(classNames?.swatch, (className) =>\n              swatch({ className }),\n            )}\n          />\n        </ColorSwatchPickerItem>\n      ))}\n    </ColorSwatchPicker>\n  );\n}\nColorPicker.displayName = 'ColorPicker';\n"]}

package/dist/components/color-picker/styles.d.ts

@@ -0,0 +1,42 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_merge from 'tailwind-merge';
+
+declare const ColorPickerStyles: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            picker?: tailwind_merge.ClassNameValue;
+            swatch?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_merge.ClassNameValue | {
+            picker?: tailwind_merge.ClassNameValue;
+            swatch?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    picker: string;
+    item: string[];
+    swatch: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            picker?: tailwind_merge.ClassNameValue;
+            swatch?: tailwind_merge.ClassNameValue;
+            item?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    picker: string;
+    item: string[];
+    swatch: string;
+}, tailwind_variants.TVReturnType<unknown, {
+    picker: string;
+    item: string[];
+    swatch: string;
+}, undefined, unknown, unknown, undefined>>;
+
+export { ColorPickerStyles };

package/dist/components/color-picker/styles.js

@@ -0,0 +1,2 @@
+import {tv}from'./../../lib/utils.js';const i=tv({slots:{picker:"flex flex-wrap gap-s",item:["w-fit cursor-pointer outline outline-transparent","focus:outline-interactive-hover","hover:outline-interactive-hover","selected:outline-highlight"],swatch:"size-l"}});export{i as ColorPickerStyles};//# sourceMappingURL=styles.js.map
+//# sourceMappingURL=styles.js.map

package/dist/components/color-picker/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/color-picker/styles.ts"],"names":["e"],"mappings":"6CAeS,CACLA,EAAA,CAAA,CAAA,6FAGE,CAAA,iCACA,CAAA,8DAGM,CAAA,CAAA,MAEZ,CAAC,QAAA,CAAA,CAAA","file":"styles.js","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 { tv } from '@/lib/utils';\n\nexport const ColorPickerStyles = tv({\n  slots: {\n    picker: 'flex flex-wrap gap-s',\n    item: [\n      'w-fit cursor-pointer outline outline-transparent',\n      'focus:outline-interactive-hover',\n      'hover:outline-interactive-hover',\n      'selected:outline-highlight',\n    ],\n    swatch: 'size-l',\n  },\n});\n"]}

package/dist/components/color-picker/types.d.ts

@@ -0,0 +1,13 @@
+import { RefAttributes } from 'react';
+import { ColorSwatchPickerProps, ColorSwatchPickerItemProps, ColorSwatchProps } from 'react-aria-components';
+
+type ColorPickerProps = Omit<ColorSwatchPickerProps, 'children' | 'layout'> & RefAttributes<HTMLDivElement> & {
+    classNames?: {
+        picker?: ColorSwatchPickerProps['className'];
+        item?: ColorSwatchPickerItemProps['className'];
+        swatch?: ColorSwatchProps['className'];
+    };
+    items: ColorSwatchPickerItemProps['color'][];
+};
+
+export type { ColorPickerProps };

package/dist/components/color-picker/types.js

@@ -0,0 +1,2 @@
+//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

package/dist/components/color-picker/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"types.js"}

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

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ContextValue } from 'react-aria-components';
+import { OptionsDataItem } from '../options/types.js';
+import { ComboBoxFieldProps } from './types.js';
+import '../icon/types.js';
+import '../button/types.js';
+import 'tailwind-variants';
+import '../button/styles.js';
+import 'tailwind-merge';
+
+declare const ComboBoxFieldContext: react.Context<ContextValue<ComboBoxFieldProps<any>, HTMLDivElement>>;
+declare function ComboBoxField<T extends OptionsDataItem>({ ref, ...props }: ComboBoxFieldProps<T>): react_jsx_runtime.JSX.Element;
+declare namespace ComboBoxField {
+    var displayName: string;
+}
+
+export { ComboBoxField, ComboBoxFieldContext };

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

@@ -0,0 +1,2 @@
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import'client-only';import {ChevronDown}from'@accelint/icons';import {createContext}from'react';import {useContextProps,ComboBox,composeRenderProps,Input,Button,Text,FieldError,Popover,Virtualizer,ListLayout}from'react-aria-components';import {Icon}from'../icon/index.js';import {Label}from'../label/index.js';import {Options}from'../options/index.js';import {ComboBoxStyles}from'./styles.js';const {field:q,label:w,control:H,input:A,trigger:G,description:J,error:K,popover:Q}=ComboBoxStyles(),c=createContext(null);function W({ref:t,...i}){[i,t]=useContextProps(i,t??null,c);const{children:x,classNames:e,description:a,errorMessage:b,inputProps:P,label:n,layoutOptions:v,menuTrigger:C="focus",size:m="medium",isInvalid:f,...y}=i,p=b||null,d=m==="small";return jsx(ComboBox,{...y,ref:t,className:composeRenderProps(e?.field,l=>q({className:l})),menuTrigger:C,isInvalid:f||(p?true:void 0),"data-size":m,children:({isDisabled:l,isInvalid:B,isRequired:N})=>jsxs(Fragment,{children:[!!n&&!d&&jsx(Label,{className:w({className:e?.label}),isDisabled:l,isRequired:N,children:n}),jsxs("div",{className:H({className:e?.control}),children:[jsx(Input,{...P,className:composeRenderProps(e?.input,r=>A({className:r}))}),jsx(Button,{className:composeRenderProps(e?.trigger,r=>G({className:r})),children:jsx(Icon,{size:"small",children:jsx(ChevronDown,{})})})]}),!!a&&!(d||B)&&jsx(Text,{className:J({className:e?.description}),slot:"description",children:a}),jsx(FieldError,{className:composeRenderProps(e?.error,r=>K({className:r})),children:p}),jsx(Popover,{className:composeRenderProps(e?.popover,r=>Q({className:r})),children:jsx(Virtualizer,{layout:ListLayout,layoutOptions:v,children:jsx(Options,{children:x})})})]})})}W.displayName="ComboBox";export{W as ComboBoxField,c as ComboBoxFieldContext};//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/combobox-field/index.tsx"],"names":["input","trigger","description","error","ComboBoxStyles","ComboBoxFieldProvider","k","children","props","ComboBoxFieldContext","labelProp","isInvalidProp","errorMessageProp","size","jsx","ComboBox","rest","ref","composeRenderProps","o","I","className","s","menuTrigger","errorMessage","isInvalid","Fragment","u","X","label","classNames","R","isDisabled","isRequired","control","D","Button","T","Icon","h","descriptionProp","g","M","FieldError","O","popover","z","L","S"],"mappings":"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","file":"index.js","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 type { ProviderProps } from '@/lib/types';\nimport { ChevronDown } from '@accelint/icons';\nimport { createContext } from 'react';\nimport {\n  Button,\n  ComboBox,\n  type ContextValue,\n  FieldError,\n  Input,\n  ListLayout,\n  Popover,\n  Text,\n  Virtualizer,\n  composeRenderProps,\n  useContextProps,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { Options } from '../options';\nimport type { OptionsDataItem } from '../options/types';\nimport { ComboBoxStyles } from './styles';\nimport type { ComboBoxFieldProps } from './types';\n\nconst { field, label, control, input, trigger, description, error, popover } =\n  ComboBoxStyles();\n\nexport const ComboBoxFieldContext =\n  // biome-ignore lint/suspicious/noExplicitAny: Setting a type would restrict it beyond what the component allows to extend to\n  createContext<ContextValue<ComboBoxFieldProps<any>, HTMLDivElement>>(null);\n\nfunction ComboBoxFieldProvider<T extends OptionsDataItem>({\n  children,\n  ...props\n}: ProviderProps<ComboBoxFieldProps<T>>) {\n  return (\n    <ComboBoxFieldContext.Provider value={props}>\n      {children}\n    </ComboBoxFieldContext.Provider>\n  );\n}\nComboBoxFieldProvider.displayName = 'ComboBoxField.Provider';\n\nexport function ComboBoxField<T extends OptionsDataItem>({\n  ref,\n  ...props\n}: ComboBoxFieldProps<T>) {\n  [props, ref] = useContextProps(props, ref ?? null, ComboBoxFieldContext);\n\n  const {\n    children,\n    classNames,\n    description: descriptionProp,\n    errorMessage: errorMessageProp,\n    inputProps,\n    label: labelProp,\n    layoutOptions,\n    menuTrigger = 'focus',\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    <ComboBox<T>\n      {...rest}\n      ref={ref}\n      className={composeRenderProps(classNames?.field, (className) =>\n        field({ className }),\n      )}\n      menuTrigger={menuTrigger}\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={label({ className: classNames?.label })}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n            >\n              {labelProp}\n            </Label>\n          )}\n          <div className={control({ className: classNames?.control })}>\n            <Input\n              {...inputProps}\n              className={composeRenderProps(classNames?.input, (className) =>\n                input({ className }),\n              )}\n            />\n            <Button\n              className={composeRenderProps(classNames?.trigger, (className) =>\n                trigger({ className }),\n              )}\n            >\n              <Icon size='small'>\n                <ChevronDown />\n              </Icon>\n            </Button>\n          </div>\n          {!!descriptionProp && !(isSmall || isInvalid) && (\n            <Text\n              className={description({\n                className: classNames?.description,\n              })}\n              slot='description'\n            >\n              {descriptionProp}\n            </Text>\n          )}\n          <FieldError\n            className={composeRenderProps(classNames?.error, (className) =>\n              error({ className }),\n            )}\n          >\n            {errorMessage}\n          </FieldError>\n          <Popover\n            className={composeRenderProps(classNames?.popover, (className) =>\n              popover({ className }),\n            )}\n          >\n            <Virtualizer layout={ListLayout} layoutOptions={layoutOptions}>\n              <Options>{children}</Options>\n            </Virtualizer>\n          </Popover>\n        </>\n      )}\n    </ComboBox>\n  );\n}\nComboBoxField.displayName = 'ComboBox';\n"]}

package/dist/components/combobox-field/styles.d.ts

@@ -0,0 +1,72 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_merge from 'tailwind-merge';
+
+declare const ComboBoxStyles: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            input?: tailwind_merge.ClassNameValue;
+            label?: tailwind_merge.ClassNameValue;
+            popover?: tailwind_merge.ClassNameValue;
+            trigger?: tailwind_merge.ClassNameValue;
+            error?: tailwind_merge.ClassNameValue;
+            control?: tailwind_merge.ClassNameValue;
+            description?: tailwind_merge.ClassNameValue;
+            field?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_merge.ClassNameValue | {
+            input?: tailwind_merge.ClassNameValue;
+            label?: tailwind_merge.ClassNameValue;
+            popover?: tailwind_merge.ClassNameValue;
+            trigger?: tailwind_merge.ClassNameValue;
+            error?: tailwind_merge.ClassNameValue;
+            control?: tailwind_merge.ClassNameValue;
+            description?: tailwind_merge.ClassNameValue;
+            field?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    field: string;
+    label: string;
+    control: string[];
+    input: string[];
+    trigger: string[];
+    description: string[];
+    error: string;
+    popover: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            input?: tailwind_merge.ClassNameValue;
+            label?: tailwind_merge.ClassNameValue;
+            popover?: tailwind_merge.ClassNameValue;
+            trigger?: tailwind_merge.ClassNameValue;
+            error?: tailwind_merge.ClassNameValue;
+            control?: tailwind_merge.ClassNameValue;
+            description?: tailwind_merge.ClassNameValue;
+            field?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    field: string;
+    label: string;
+    control: string[];
+    input: string[];
+    trigger: string[];
+    description: string[];
+    error: string;
+    popover: string;
+}, tailwind_variants.TVReturnType<unknown, {
+    field: string;
+    label: string;
+    control: string[];
+    input: string[];
+    trigger: string[];
+    description: string[];
+    error: string;
+    popover: string;
+}, undefined, unknown, unknown, undefined>>;
+
+export { ComboBoxStyles };

package/dist/components/combobox-field/styles.js

@@ -0,0 +1,2 @@
+import {tv}from'tailwind-variants';const i=tv({slots:{field:"group/combobox-field flex flex-col gap-xs",label:"",control:["flex items-center rounded-medium px-s py-xs outline","group-enabled/combobox-field:fg-default-light group-enabled:combobox-field:outline-interactive","group-enabled/combobox-field:placeholder:fg-default-dark","group-enabled/combobox-field:focus-within:outline-highlight","group-enabled/combobox-field:hover:outline-interactive-hover","group-enabled/combobox-field:group-invalid/combobox-field:outline-serious","group-disabled/combobox-field:fg-disabled group-disabled/combobox-field:outline-interactive-disabled"],input:["font-display outline-none","group-size-medium/combobox-field:text-body-s","group-size-small/combobox-field:text-body-xs"],trigger:["fg-default-light","group-open/combobox-field:rotate-180 group-open/combobox-field:transform","group-disabled/combobox-field:fg-disabled"],description:["fg-default-dark text-body-xs","group-disabled/combobox-field:fg-disabled"],error:"fg-serious text-body-xs",popover:"-ml-s min-w-[calc(var(--trigger-width)+(var(--spacing-s)*2))]"}});export{i as ComboBoxStyles};//# sourceMappingURL=styles.js.map
+//# sourceMappingURL=styles.js.map

package/dist/components/combobox-field/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/combobox-field/styles.ts"],"names":["ComboBoxStyles","tv"],"mappings":"mCAcO,MAAMA,EAAiBC,EAAAA,CAAG,CAC/B,MAAO,CACL,KAAA,CAAO,4CACP,KAAA,CAAO,EAAA,CACP,QAAS,CACP,qDAAA,CACA,iGACA,0DAAA,CACA,6DAAA,CACA,+DACA,2EAAA,CACA,sGACF,EACA,KAAA,CAAO,CACL,4BACA,8CAAA,CACA,8CACF,EACA,OAAA,CAAS,CACP,mBACA,0EAAA,CACA,2CACF,EACA,WAAA,CAAa,CACX,+BACA,2CACF,CAAA,CACA,MAAO,yBAAA,CACP,OAAA,CAAS,+DACX,CACF,CAAC","file":"styles.js","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 { tv } from 'tailwind-variants';\n\nexport const ComboBoxStyles = tv({\n  slots: {\n    field: 'group/combobox-field flex flex-col gap-xs',\n    label: '',\n    control: [\n      'flex items-center rounded-medium px-s py-xs outline',\n      'group-enabled/combobox-field:fg-default-light group-enabled:combobox-field:outline-interactive',\n      'group-enabled/combobox-field:placeholder:fg-default-dark',\n      'group-enabled/combobox-field:focus-within:outline-highlight',\n      'group-enabled/combobox-field:hover:outline-interactive-hover',\n      'group-enabled/combobox-field:group-invalid/combobox-field:outline-serious',\n      'group-disabled/combobox-field:fg-disabled group-disabled/combobox-field:outline-interactive-disabled',\n    ],\n    input: [\n      'font-display outline-none',\n      'group-size-medium/combobox-field:text-body-s',\n      'group-size-small/combobox-field:text-body-xs',\n    ],\n    trigger: [\n      'fg-default-light',\n      'group-open/combobox-field:rotate-180 group-open/combobox-field:transform',\n      'group-disabled/combobox-field:fg-disabled',\n    ],\n    description: [\n      'fg-default-dark text-body-xs',\n      'group-disabled/combobox-field:fg-disabled',\n    ],\n    error: 'fg-serious text-body-xs',\n    popover: '-ml-s min-w-[calc(var(--trigger-width)+(var(--spacing-s)*2))]',\n  },\n});\n"]}

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

@@ -0,0 +1,28 @@
+import { RefAttributes } from 'react';
+import { ComboBoxProps, VirtualizerProps, ListLayoutOptions, LabelProps, InputProps, FieldErrorProps, PopoverProps } from 'react-aria-components';
+import { ButtonProps } from '../button/types.js';
+import { OptionsDataItem, OptionsProps } from '../options/types.js';
+import 'tailwind-variants';
+import '../button/styles.js';
+import 'tailwind-merge';
+import '../icon/types.js';
+
+type ComboBoxFieldProps<T extends OptionsDataItem> = Omit<ComboBoxProps<T>, 'children' | 'className'> & Pick<VirtualizerProps<ListLayoutOptions>, 'layoutOptions'> & Pick<OptionsProps<T>, 'children'> & RefAttributes<HTMLDivElement> & {
+    classNames?: {
+        field?: ComboBoxProps<T>['className'];
+        label?: LabelProps['className'];
+        control?: string;
+        input?: InputProps['className'];
+        trigger?: ButtonProps['className'];
+        description?: string;
+        error?: FieldErrorProps['className'];
+        popover?: PopoverProps['className'];
+    };
+    label?: string;
+    inputProps?: Omit<InputProps, 'className'>;
+    description?: string;
+    errorMessage?: string;
+    size?: 'small' | 'medium';
+};
+
+export type { ComboBoxFieldProps };

package/dist/components/combobox-field/types.js

@@ -0,0 +1,2 @@
+//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

package/dist/components/combobox-field/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"types.js"}

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

@@ -1,28 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as cva_types from 'cva/types';
 import { DateValue } from '@internationalized/date';
-import { VariantProps } from 'cva';
-import { DateFieldProps as DateFieldProps$1, DateInputProps } from 'react-aria-components';
+import { DateFieldProps } from './types.js';
+import 'react';
+import 'react-aria-components';
+import 'tailwind-variants';
+import './styles.js';
+import 'tailwind-merge';
 
-declare const dateFieldStyles: (props?: ({
-    isDisabled?: boolean | null | undefined;
-    isInvalid?: boolean | null | undefined;
-    isReadOnly?: boolean | null | undefined;
-    size?: "small" | "medium" | null | undefined;
-} & cva_types.ClassProp) | undefined) => string;
-interface DateFieldProps<T extends DateValue> extends Omit<VariantProps<typeof dateFieldStyles>, 'isDisabled' | 'isInvalid' | 'isReadOnly'>, Omit<DateFieldProps$1<T>, 'className' | 'style'>, // Exclude className to avoid conflict with cva
-Omit<DateInputProps, 'className' | 'children' | 'style'> {
-    isDisabled?: boolean;
-    isInvalid?: boolean;
-    isReadOnly?: boolean;
-    size?: 'small' | 'medium';
-    className?: string;
-    description?: string;
-    errorMessage?: string;
-    label?: string;
-    placeholder?: string;
-    shortMonth?: boolean;
-}
-declare function DateField<T extends DateValue>({ className, description, errorMessage, isDisabled, isInvalid, isReadOnly, label, placeholder, slot, size, shortMonth, ...props }: DateFieldProps<T>): react_jsx_runtime.JSX.Element;
+declare function DateField<T extends DateValue>({ classNames, description: descriptionProp, errorMessage: errorMessageProp, isDisabled, isInvalid: isInvalidProp, isReadOnly, label, placeholder, slot, size, shortMonth, isRequired, ...props }: DateFieldProps<T>): react_jsx_runtime.JSX.Element;
 
-export { DateField, type DateFieldProps };
+export { DateField };

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

@@ -1,2 +1,2 @@
-import {cn}from'./../../lib/utils.js';import y from'@accelint/icons/calendar';import'client-only';import {cva}from'cva';import {DateField,Text,FieldError,DateInput,DateSegment}from'react-aria-components';import {Icon}from'../icon/index.js';import {Label}from'../label/index.js';import {jsxs,jsx,Fragment}from'react/jsx-runtime';var I=["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"],R=({value:e,isFocused:o,isPlaceholder:i,placeholder:t,isReadOnly:s,shortMonth:l})=>{if(i)return t;let r=`${e}`;return !s&&o?r=r.padStart(2,"0"):l&&(r=I[(e??0)-1]),r},T=({segment:e,shortMonth:o,...i})=>e.type==="literal"&&e.text!==":"?jsx(Fragment,{}):jsx(DateSegment,{segment:e,className:"focus:bg-highlight focus:text-inverse-light focus:outline-none",...i,children:e.type==="month"?t=>jsx(R,{...t,shortMonth:o}):e.text}),O=cva(["flex w-full gap-xs rounded-medium px-s py-xs font-display outline outline-interactive"],{variants:{isDisabled:{true:"text-disabled outline-interactive-disabled placeholder:text-disabled",false:"text-default-light placeholder:text-default-dark focus-within:outline-highlight hover:outline-interactive-hover"},isInvalid:{true:"outline-serious"},isReadOnly:{true:"rounded-none p-0 outline-none"},size:{medium:["text-body-s","pl-[32px]"],small:"text-body-xs"}},compoundVariants:[{isDisabled:true,isInvalid:true,className:"outline-interactive-disabled"},{isDisabled:false,size:"medium"}],defaultVariants:{size:"medium"}}),V=({className:e,ref:o=null,size:i="medium",isReadOnly:t,...s})=>jsxs("div",{className:"relative flex",children:[i==="medium"?jsx(Icon,{className:cn(["-translate-y-1/2 absolute top-1/2 left-s",s.isDisabled?"text-disabled":"text-default-light"]),children:jsx(y,{})}):null,jsx(DateInput,{...s,className:({isDisabled:l,isInvalid:r})=>cn(O({isDisabled:l,isInvalid:r,isReadOnly:t,size:i,className:e}))})]});function q({className:e,description:o,errorMessage:i,isDisabled:t,isInvalid:s,isReadOnly:l,label:r,placeholder:E,slot:c,size:d="medium",shortMonth:f=true,...m}){let p=d==="small",D=o&&(!(p||s)||t),h=i&&s&&!t&&!l;return jsxs(DateField,{...m,isDisabled:t,isInvalid:s,isReadOnly:l,slot:c,className:"flex flex-col gap-xs",children:[!p&&jsx(Label,{className:"empty:hidden",isDisabled:t,isRequired:m.isRequired,children:r}),jsx(V,{className:e,isDisabled:t,size:d,isReadOnly:l,isInvalid:s,children:x=>jsx(T,{segment:x,shortMonth:f})}),D&&jsx(Text,{className:cn(["fg-default-dark text-body-xs empty:hidden",t&&"fg-disabled"]),slot:"description",children:o}),h&&jsx(FieldError,{className:"fg-serious text-body-xs empty:hidden",children:i})]})}export{q as DateField};//# sourceMappingURL=index.js.map
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import'client-only';import A from'@accelint/icons/calendar';import {DateField,composeRenderProps,Text,FieldError,DateInput,DateSegment}from'react-aria-components';import {Icon}from'../icon/index.js';import {Label}from'../label/index.js';import {DateFieldStyles}from'./styles.js';const{field:v,dateInput:E,dateInputContainer:C,icon:L,descriptionText:V,error:J,dateSegment:O}=DateFieldStyles(),U=["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"],k=({value:e,isFocused:r,isPlaceholder:a,placeholder:n,isReadOnly:i,shortMonth:l})=>{if(a)return n;let o=`${e}`;return !i&&r?o=o.padStart(2,"0"):l&&(o=U[(e??0)-1]),o},q=({segment:e,shortMonth:r,...a})=>e.type==="literal"&&e.text!==":"?jsx(Fragment,{}):jsx(DateSegment,{segment:e,className:O({}),...a,children:e.type==="month"?n=>jsx(k,{...n,shortMonth:r}):e.text}),z=({className:e,ref:r=null,size:a,...n})=>jsxs("div",{className:C({}),children:[a==="medium"?jsx(Icon,{className:L({}),children:jsx(A,{})}):null,jsx(DateInput,{...n,className:composeRenderProps(e,i=>E({className:i})),"data-size":a})]});function Q({classNames:e,description:r,errorMessage:a,isDisabled:n,isInvalid:i,isReadOnly:l,label:o,placeholder:B,slot:S,size:p="medium",shortMonth:g=true,isRequired:F,...h}){const D=a||null,u=p==="small";return jsx(DateField,{...h,isDisabled:n,isInvalid:i||(D?true:void 0),isReadOnly:l,slot:S,className:composeRenderProps(e?.field,s=>v({className:s})),children:({isDisabled:s,isInvalid:y})=>jsxs(Fragment,{children:[!u&&o&&jsx(Label,{className:e?.label,isDisabled:s,isRequired:F,children:o}),jsx(z,{className:e?.input,size:p,isInvalid:y,children:m=>jsx(q,{segment:m,shortMonth:g})}),r&&(!(u||i)||s)&&jsx(Text,{className:V({}),slot:"description",children:r}),jsx(FieldError,{className:composeRenderProps(e?.error,m=>J({className:m})),children:D})]})})}export{Q as DateField};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/date-field/index.tsx"],"names":["value","isPlaceholder","placeholder","isReadOnly","displayValue","months","FormattedDateSegment","segment","Fragment","jsx","DateSegment","a","F","renderProps","dateFieldStyles","cva","g","jsxs","u","v","n","AriaDateInput","props","P","DateField","label","slot","size","isSmall","shouldShowDescription","isInvalid","isDisabled","shouldShowError","errorMessage","AriaDateField","b","Label","AriaText","S","description","FieldError"],"mappings":"4UAoCE,CAAA,CAAA,CAAA,KACA,CAAA,KACA,CAAA,KACA,CAAA,KACA,CAAA,KACA,CAAA,WAEA,CAAA,KACA,CAAA,WAEA,CAAA,MAGuB,KACvB,CAAA,CAAA,CAAAA,CAAAA,CACA,CAAA,KAAA,CAAA,CAAA,CAAA,yBAEA,CAAA,CAAA,CAAA,WACA,CAAA,CAAA,CAAA,uBAGA,CAAIC,CAAAA,CACF,GAAA,CAAA,GAAOC,EAGT,SAA0CF,IAE1C,MAAI,CAACG,CAAAA,CAAAA,OACYC,CAAa,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAS,WAErCA,GAAeC,CAAAA,CAAQL,IAAS,CAAA,CAAK,CAAC,CAAA,CAAA,CAGjCI,EACT,CAOME,EAAuB,CAAC,CAC5B,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAAC,QACA,CAAA,CAAA,CAAA,UAEF,CAAA,CACMA,IAAQ,CAAA,CAAA,GAAS,CAAA,CAAA,IAAA,GAAA,SAAqB,EAAS,CAAA,CAAA,IAC1CC,GAAA,GAIPC,CAAAA,GAACC,CAAAA,QAAA,CACC,EAAA,CAAA,CAAAC,GAAA,CAAAC,WAAA,CAASL,CAAAA,OACT,CAAA,CAAA,CAAA,gFAGCA,QAAQ,CAAS,SACbM,OACoB,CAAA,CAAA,EAAGA,GAAa,mBAE7B,CAAA,CAAA,CACd,CAAA,CAIEC,EAAkBC,IAEpB,CAAA,CAAA,CAAA,CAAA,CAAAC,GAAA,CAAA,CAAA,uFAGA,CAAA,CAAA,CAAU,QACR,CAAA,CAAA,UACQ,CAAA,CAAA,IAAA,CAAA,8LAIR,CAAA,CAAA,SACQ,CAAA,CAAA,IAAA,CAAA,mEAMN,CAAA,CAAA,IAAQ,CAAC,CAAA,MAAA,CAAA,CAAA,aAAe,CAAA,iEAOxB,CAAA,IAAA,CAAA,SACA,CAAA,IAAA,CAAA,SAAW,CAAA,8BAGX,CAAA,CAAA,CAAA,UACM,CAAA,KAAA,CAAA,IACR,CACF,QACA,CAAA,CAAA,CAAA,eACQ,CAAA,CAAA,IACR,CACF,QAUA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,SACM,CAAA,CAAA,CAAA,UACC,CAAA,IAAA,CAAA,CAAA,CACP,mBAEF,CAAA,CAEIC,CAAAA,QAAKC,IAAA,CAAA,KAAA,CAAA,CAAA,SAAU,CAAA,eACZ,CAAA,QAAS,CAAA,CAAA,CAAA,GACRT,QACE,CAAAE,GAAA,CAAAQ,IAAA,CAAA,CAAA,SACE,CAAAC,EAAA,CAAA,CAAA,0CACM,CAAA,CAAA,CAAA,UAAa,CAAA,eAAkB,CAAA,oBAGvC,CAAA,CAAA,CAAAX,QACF,CAAAE,GACE,CAAA,CAAA,CAAA,EACJF,EAACY,CAAAA,CAAA,IACKC,CAAAA,GACJ,CAAAC,SAAA,CAAA,CAAA,GAAA,CAAA,CAAA,SAAc,CAAA,CAAA,CAAA,sBAEVT,CAAgB,CACd,CAAA,GAAAM,EAAA,CAAA,CAAA,CAAA,CAAA,UACA,CAAA,CAAA,CAAA,uBAGA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,SAKV,CAAA,CAuBG,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAASI,SACd,CAAA,CAAA,CAAA,uBAEA,CAAA,CAAA,CAAA,YACA,CAAA,CAAA,CAAA,UACA,CAAA,CAAA,CAAA,SACA,CAAA,CAAA,CAAA,UACAC,CAAAA,CACA,CAAA,KAAA,CAAA,CAAA,CAAA,WACAC,CACA,MAAAC,CAAO,CAAA,CAAA,IAAA,CAAA,CAAA,CACP,QAAA,CAAA,UACGL,CACL,CAAA,CAAsB,QACdM,CAAUD,CAAAA,CAAAA,CAAAA,UACVE,OACcD,CAAAA,CAAAA,CAAWE,CAAAA,GAAcC,GACvCC,EACJC,CAAAA,CAAAA,IAA6B,CAACF,CAAAA,CAAAA,CAAc,EAAC5B,CAE/C,EAAA,CAAA,CAAA,EAAA,CACEc,CAAAA,CAACiB,WAEC,CAAAC,SAAA,CAAA,CAAA,GAAA,CAAA,CAAA,sBAEA,CAAA,CAAA,CAAA,UACMT,CACN,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,SAAW,CAAA,sBAEV,CAAA,QACEU,CAAA,CACC,wBAAU,CAAA,cACV,CAAA,UACA,CAAA,CAAA,CAAA,UAAkB,CAAA,CAAA,CAAA,UAEjB,CAAAX,QAIJ,CACC,oBACA,CAAA,CAAA,CAAA,UACME,CACN,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,UACA,CAAA,CAAA,CAAA,YAEEpB,QACsB,CAAA,CAAA,EAAAI,GAAA,CAAA,CAAA,CAASJ,QAAS,CAAA,CAAA,CAAA,UAG3CsB,CACCpB,CAAAA,CAAC4B,EAAA,CACC,CAAA,CAAA,EAAA1B,GAAA,CAAA2B,IAAA,CAAA,CAAA,SACE,CAAAlB,EAAA,CAAA,CAAA,2CACc,CAAA,CAAA,EAAA,aAEX,CAAA,CAAA,CAAA,IAAA,CAAA,aAEJ,CAAAmB,SAIFC,CAAAA,CAAA,CAAW,6BAAU,CAAA,sCACnB,CAAAP,QAKX,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA","file":"index.js","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';\nimport { cn } from '@/lib/utils';\nimport Calendar from '@accelint/icons/calendar';\nimport type { DateValue } from '@internationalized/date';\nimport type { DateSegment as TDateSegment } from '@react-stately/datepicker';\nimport 'client-only';\nimport { type VariantProps, cva } from 'cva';\nimport type { ForwardedRef } from 'react';\nimport {\n  DateField as AriaDateField,\n  type DateFieldProps as AriaDateFieldProps,\n  DateInput as AriaDateInput,\n  type DateInputProps as AriaDateInputProps,\n  type DateSegmentProps as AriaDateSegmentProps,\n  Text as AriaText,\n  DateSegment,\n  type DateSegmentRenderProps,\n  FieldError,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\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\nconst MonthDateSegment = ({\n  value,\n  isFocused,\n  isPlaceholder,\n  placeholder,\n  isReadOnly,\n  shortMonth,\n}: DateSegmentRenderProps & { shortMonth?: boolean }) => {\n  if (isPlaceholder) {\n    return placeholder;\n  }\n\n  let displayValue: string | undefined = `${value}`;\n\n  if (!isReadOnly && isFocused) {\n    displayValue = displayValue.padStart(2, '0');\n  } else if (shortMonth) {\n    displayValue = months[(value ?? 0) - 1];\n  }\n\n  return displayValue;\n};\n\ninterface FormattedDateSegmentProps extends AriaDateSegmentProps {\n  segment: TDateSegment;\n  shortMonth?: boolean;\n}\n\nconst FormattedDateSegment = ({\n  segment,\n  shortMonth,\n  ...props\n}: FormattedDateSegmentProps) => {\n  if (segment.type === 'literal' && segment.text !== ':') {\n    return <></>;\n  }\n\n  return (\n    <DateSegment\n      segment={segment}\n      className='focus:bg-highlight focus:text-inverse-light focus:outline-none' // Ensure caret color is visible, RAC sets the style prop and it is not overridable. Thanks for that.\n      {...props}\n    >\n      {segment.type === 'month'\n        ? (renderProps) => (\n            <MonthDateSegment {...renderProps} shortMonth={shortMonth} />\n          )\n        : segment.text}\n    </DateSegment>\n  );\n};\n\nconst dateFieldStyles = cva(\n  [\n    'flex w-full gap-xs rounded-medium px-s py-xs font-display outline outline-interactive',\n  ],\n  {\n    variants: {\n      isDisabled: {\n        true: 'text-disabled outline-interactive-disabled placeholder:text-disabled',\n        false:\n          'text-default-light placeholder:text-default-dark focus-within:outline-highlight hover:outline-interactive-hover',\n      },\n      isInvalid: {\n        true: 'outline-serious',\n      },\n      isReadOnly: {\n        true: 'rounded-none p-0 outline-none',\n      },\n      size: {\n        medium: ['text-body-s', 'pl-[32px]'],\n        small: 'text-body-xs',\n      },\n    },\n    compoundVariants: [\n      {\n        isDisabled: true,\n        isInvalid: true,\n        className: 'outline-interactive-disabled',\n      },\n      {\n        isDisabled: false,\n        size: 'medium',\n      },\n    ],\n    defaultVariants: {\n      size: 'medium',\n    },\n  },\n);\n\ninterface DateInputProps\n  extends VariantProps<typeof dateFieldStyles>,\n    Omit<AriaDateInputProps, 'size'> {\n  ref?: ForwardedRef<HTMLDivElement>;\n}\n\nconst DateInput = ({\n  className,\n  ref = null,\n  size = 'medium',\n  isReadOnly,\n  ...props\n}: DateInputProps) => {\n  return (\n    <div className='relative flex'>\n      {size === 'medium' ? (\n        <Icon\n          className={cn([\n            '-translate-y-1/2 absolute top-1/2 left-s',\n            props.isDisabled ? 'text-disabled' : 'text-default-light',\n          ])}\n        >\n          <Calendar />\n        </Icon>\n      ) : null}\n      <AriaDateInput\n        {...props}\n        className={({ isDisabled, isInvalid }) =>\n          cn(\n            dateFieldStyles({\n              isDisabled,\n              isInvalid,\n              isReadOnly: isReadOnly,\n              size,\n              className,\n            }),\n          )\n        }\n      />\n    </div>\n  );\n};\n\nexport interface DateFieldProps<T extends DateValue>\n  extends Omit<\n      VariantProps<typeof dateFieldStyles>,\n      'isDisabled' | 'isInvalid' | 'isReadOnly'\n    >,\n    Omit<AriaDateFieldProps<T>, 'className' | 'style'>, // Exclude className to avoid conflict with cva\n    Omit<AriaDateInputProps, 'className' | 'children' | 'style'> {\n  isDisabled?: boolean;\n  isInvalid?: boolean;\n  isReadOnly?: boolean;\n  size?: 'small' | 'medium';\n  className?: string;\n  description?: string;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  shortMonth?: boolean;\n}\n\nexport function DateField<T extends DateValue>({\n  className,\n  description,\n  errorMessage,\n  isDisabled,\n  isInvalid,\n  isReadOnly,\n  label,\n  placeholder,\n  slot,\n  size = 'medium',\n  shortMonth = true,\n  ...props\n}: DateFieldProps<T>) {\n  const isSmall = size === 'small';\n  const shouldShowDescription =\n    description && (!(isSmall || isInvalid) || isDisabled);\n  const shouldShowError =\n    errorMessage && isInvalid && !isDisabled && !isReadOnly;\n\n  return (\n    <AriaDateField<T>\n      {...props}\n      isDisabled={isDisabled}\n      isInvalid={isInvalid}\n      isReadOnly={isReadOnly}\n      slot={slot}\n      className={'flex flex-col gap-xs'}\n    >\n      {!isSmall && (\n        <Label\n          className='empty:hidden'\n          isDisabled={isDisabled}\n          isRequired={props.isRequired}\n        >\n          {label}\n        </Label>\n      )}\n\n      <DateInput\n        className={className}\n        isDisabled={isDisabled}\n        size={size}\n        isReadOnly={isReadOnly}\n        isInvalid={isInvalid}\n      >\n        {(segment) => (\n          <FormattedDateSegment segment={segment} shortMonth={shortMonth} />\n        )}\n      </DateInput>\n      {shouldShowDescription && (\n        <AriaText\n          className={cn([\n            'fg-default-dark text-body-xs empty:hidden',\n            isDisabled && 'fg-disabled',\n          ])}\n          slot='description'\n        >\n          {description}\n        </AriaText>\n      )}\n      {shouldShowError && (\n        <FieldError className='fg-serious text-body-xs empty:hidden'>\n          {errorMessage}\n        </FieldError>\n      )}\n    </AriaDateField>\n  );\n}\n"]}
+{"version":3,"sources":["../../../src/components/date-field/index.tsx"],"names":["dateInput","descriptionText","error","DateFieldStyles","R","value","isFocused","shortMonth","displayValue","isReadOnly","months","FormattedDateSegment","segment","jsx","DateSegment","t","c","dateSegment","DateInput","className","ref","props","jsxs","dateInputContainer","f","icon","d","classNames","isInvalidProp","isSmall","size","AriaDateField","field","isDisabled","isInvalid","label","Label","b","isRequired","AriaText","T","descriptionProp","errorMessage"],"mappings":"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","file":"index.js","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';\nimport 'client-only';\nimport Calendar from '@accelint/icons/calendar';\nimport type { DateValue } from '@internationalized/date';\nimport type { DateSegment as TDateSegment } from '@react-stately/datepicker';\nimport {\n  DateField as AriaDateField,\n  DateInput as AriaDateInput,\n  type DateSegmentProps as AriaDateSegmentProps,\n  Text as AriaText,\n  DateSegment,\n  type DateSegmentRenderProps,\n  FieldError,\n  composeRenderProps,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { DateFieldStyles } from './styles';\nimport type { DateFieldProps, DateInputProps } from './types';\n\nconst {\n  field,\n  dateInput,\n  dateInputContainer,\n  icon,\n  descriptionText,\n  error,\n  dateSegment,\n} = DateFieldStyles();\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\nconst MonthDateSegment = ({\n  value,\n  isFocused,\n  isPlaceholder,\n  placeholder,\n  isReadOnly,\n  shortMonth,\n}: DateSegmentRenderProps & { shortMonth?: boolean }) => {\n  if (isPlaceholder) {\n    return placeholder;\n  }\n\n  let displayValue: string | undefined = `${value}`;\n\n  if (!isReadOnly && isFocused) {\n    displayValue = displayValue.padStart(2, '0');\n  } else if (shortMonth) {\n    displayValue = months[(value ?? 0) - 1];\n  }\n\n  return displayValue;\n};\n\ninterface FormattedDateSegmentProps extends AriaDateSegmentProps {\n  segment: TDateSegment;\n  shortMonth?: boolean;\n}\n\nconst FormattedDateSegment = ({\n  segment,\n  shortMonth,\n  ...props\n}: FormattedDateSegmentProps) => {\n  if (segment.type === 'literal' && segment.text !== ':') {\n    return <></>;\n  }\n\n  return (\n    <DateSegment segment={segment} className={dateSegment({})} {...props}>\n      {segment.type === 'month'\n        ? (renderProps) => (\n            <MonthDateSegment {...renderProps} shortMonth={shortMonth} />\n          )\n        : segment.text}\n    </DateSegment>\n  );\n};\n\nconst DateInput = ({\n  className,\n  ref = null,\n  size,\n  ...props\n}: DateInputProps) => {\n  return (\n    <div className={dateInputContainer({})}>\n      {size === 'medium' ? (\n        <Icon className={icon({})}>\n          <Calendar />\n        </Icon>\n      ) : null}\n      <AriaDateInput\n        {...props}\n        className={composeRenderProps(className, (className) =>\n          dateInput({\n            className,\n          }),\n        )}\n        data-size={size}\n      />\n    </div>\n  );\n};\n\nexport function DateField<T extends DateValue>({\n  classNames,\n  description: descriptionProp,\n  errorMessage: errorMessageProp,\n  isDisabled,\n  isInvalid: isInvalidProp,\n  isReadOnly,\n  label,\n  placeholder,\n  slot,\n  size = 'medium',\n  shortMonth = true,\n  isRequired,\n  ...props\n}: DateFieldProps<T>) {\n  const errorMessage = errorMessageProp || null; // Protect against empty string\n  const isSmall = size === 'small';\n\n  return (\n    <AriaDateField<T>\n      {...props}\n      isDisabled={isDisabled}\n      isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n      isReadOnly={isReadOnly}\n      slot={slot}\n      className={composeRenderProps(classNames?.field, (className) =>\n        field({ className }),\n      )}\n    >\n      {(\n        { isDisabled, isInvalid }, // Rely on internal state, not props, since state could differ from props\n      ) => (\n        <>\n          {!isSmall && label && (\n            <Label\n              className={classNames?.label}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n            >\n              {label}\n            </Label>\n          )}\n          <DateInput\n            className={classNames?.input}\n            size={size}\n            isInvalid={isInvalid}\n          >\n            {(segment) => (\n              <FormattedDateSegment segment={segment} shortMonth={shortMonth} />\n            )}\n          </DateInput>\n          {descriptionProp && (!(isSmall || isInvalidProp) || isDisabled) && (\n            <AriaText className={descriptionText({})} slot='description'>\n              {descriptionProp}\n            </AriaText>\n          )}\n          <FieldError\n            className={composeRenderProps(classNames?.error, (className) =>\n              error({ className }),\n            )}\n          >\n            {errorMessage}\n          </FieldError>\n        </>\n      )}\n    </AriaDateField>\n  );\n}\n"]}

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

@@ -0,0 +1,69 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as tailwind_merge from 'tailwind-merge';
+
+declare const DateFieldStylesDefault: {
+    readonly size: "medium";
+};
+declare const DateFieldStyles: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            icon?: tailwind_merge.ClassNameValue;
+            error?: tailwind_merge.ClassNameValue;
+            field?: tailwind_merge.ClassNameValue;
+            dateInputContainer?: tailwind_merge.ClassNameValue;
+            dateSegment?: tailwind_merge.ClassNameValue;
+            dateInput?: tailwind_merge.ClassNameValue;
+            descriptionText?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_merge.ClassNameValue | {
+            icon?: tailwind_merge.ClassNameValue;
+            error?: tailwind_merge.ClassNameValue;
+            field?: tailwind_merge.ClassNameValue;
+            dateInputContainer?: tailwind_merge.ClassNameValue;
+            dateSegment?: tailwind_merge.ClassNameValue;
+            dateInput?: tailwind_merge.ClassNameValue;
+            descriptionText?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    field: string;
+    dateInput: string[];
+    dateInputContainer: string;
+    icon: string[];
+    descriptionText: string[];
+    error: string;
+    dateSegment: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_merge.ClassNameValue | {
+            icon?: tailwind_merge.ClassNameValue;
+            error?: tailwind_merge.ClassNameValue;
+            field?: tailwind_merge.ClassNameValue;
+            dateInputContainer?: tailwind_merge.ClassNameValue;
+            dateSegment?: tailwind_merge.ClassNameValue;
+            dateInput?: tailwind_merge.ClassNameValue;
+            descriptionText?: tailwind_merge.ClassNameValue;
+        };
+    };
+} | {}, {
+    field: string;
+    dateInput: string[];
+    dateInputContainer: string;
+    icon: string[];
+    descriptionText: string[];
+    error: string;
+    dateSegment: string;
+}, tailwind_variants.TVReturnType<unknown, {
+    field: string;
+    dateInput: string[];
+    dateInputContainer: string;
+    icon: string[];
+    descriptionText: string[];
+    error: string;
+    dateSegment: string;
+}, undefined, unknown, unknown, undefined>>;
+
+export { DateFieldStyles, DateFieldStylesDefault };

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

@@ -0,0 +1,2 @@
+import {tv}from'tailwind-variants';const t={size:"medium"},d=tv({slots:{field:"group/date-field flex flex-col gap-xs",dateInput:["group/date-field flex w-full gap-xs rounded-medium px-s py-xs font-display outline outline-interactive","disabled:text-disabled disabled:outline-interactive-disabled disabled:placeholder:text-disabled","text-default-light placeholder:text-default-dark focus-within:outline-highlight hover:outline-interactive-hover","invalid:outline-serious","size-medium:pl-[32px] size-medium:text-body-s","size-small:text-body-xs"],dateInputContainer:"relative flex",icon:["-translate-y-1/2 absolute top-1/2 left-s text-default-light","group-disabled/date-field:text-disabled"],descriptionText:["fg-default-dark text-body-xs empty:hidden","group-disabled/date-field:fg-disabled"],error:"fg-serious text-body-xs empty:hidden",dateSegment:"focus:bg-highlight focus:text-inverse-light focus:outline-none"},defaultVariants:t});export{d as DateFieldStyles,t as DateFieldStylesDefault};//# sourceMappingURL=styles.js.map
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/date-field/styles.ts"],"names":["DateFieldStylesDefault","DateFieldStyles","tv"],"mappings":"mCAcO,MAAMA,EAAyB,CACpC,IAAA,CAAM,QACR,CAAA,CAEaC,CAAAA,CAAkBC,GAAG,CAChC,KAAA,CAAO,CACL,KAAA,CAAO,uCAAA,CACP,UAAW,CACT,wGAAA,CACA,kGACA,iHAAA,CACA,yBAAA,CACA,gDACA,yBACF,CAAA,CACA,mBAAoB,eAAA,CACpB,IAAA,CAAM,CACJ,6DAAA,CACA,yCACF,EACA,eAAA,CAAiB,CACf,4CACA,uCACF,CAAA,CACA,MAAO,sCAAA,CACP,WAAA,CACE,gEACJ,CAAA,CACA,eAAA,CAAiBF,CACnB,CAAC","file":"styles.js","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 { tv } from 'tailwind-variants';\n\nexport const DateFieldStylesDefault = {\n  size: 'medium',\n} as const;\n\nexport const DateFieldStyles = tv({\n  slots: {\n    field: 'group/date-field flex flex-col gap-xs',\n    dateInput: [\n      'group/date-field flex w-full gap-xs rounded-medium px-s py-xs font-display outline outline-interactive',\n      'disabled:text-disabled disabled:outline-interactive-disabled disabled:placeholder:text-disabled',\n      'text-default-light placeholder:text-default-dark focus-within:outline-highlight hover:outline-interactive-hover',\n      'invalid:outline-serious',\n      'size-medium:pl-[32px] size-medium:text-body-s',\n      'size-small:text-body-xs',\n    ],\n    dateInputContainer: 'relative flex',\n    icon: [\n      '-translate-y-1/2 absolute top-1/2 left-s text-default-light',\n      'group-disabled/date-field:text-disabled',\n    ],\n    descriptionText: [\n      'fg-default-dark text-body-xs empty:hidden',\n      'group-disabled/date-field:fg-disabled',\n    ],\n    error: 'fg-serious text-body-xs empty:hidden',\n    dateSegment:\n      'focus:bg-highlight focus:text-inverse-light focus:outline-none',\n  },\n  defaultVariants: DateFieldStylesDefault,\n});\n"]}

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

@@ -0,0 +1,29 @@
+import { ForwardedRef } from 'react';
+import { DateValue, DateFieldProps as DateFieldProps$1, DateInputProps as DateInputProps$1, LabelProps, FieldErrorProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+import { DateFieldStyles } from './styles.js';
+import 'tailwind-merge';
+
+interface DateInputProps extends VariantProps<typeof DateFieldStyles>, Omit<DateInputProps$1, 'size'> {
+    ref?: ForwardedRef<HTMLDivElement>;
+    size?: 'small' | 'medium';
+    isInvalid?: boolean;
+}
+interface DateFieldProps<T extends DateValue> extends VariantProps<typeof DateFieldStyles>, Omit<DateFieldProps$1<T>, 'style' | 'className'>, Omit<DateInputProps$1, 'children' | 'style'> {
+    classNames?: {
+        field?: DateFieldProps$1<T>['className'];
+        label?: LabelProps['className'];
+        input?: DateInputProps['className'];
+        description?: string;
+        error?: FieldErrorProps['className'];
+    };
+    size?: 'small' | 'medium';
+    description?: string;
+    errorMessage?: string;
+    label?: string;
+    placeholder?: string;
+    shortMonth?: boolean;
+    isRequired?: boolean;
+}
+
+export type { DateFieldProps, DateInputProps };

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

@@ -0,0 +1,2 @@
+//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"types.js"}

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

@@ -0,0 +1,59 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ProviderProps } from '../../lib/types.js';
+import { ContextValue } from 'react-aria-components';
+import { DetailsListProps, DetailsListLabelProps, DetailsListValueProps } from './types.js';
+import 'tailwind-variants';
+import './styles.js';
+
+declare const DetailsListContext: react.Context<ContextValue<DetailsListProps, HTMLDListElement>>;
+declare function DetailsListProvider({ children, ...props }: ProviderProps<DetailsListProps>): react_jsx_runtime.JSX.Element;
+declare namespace DetailsListProvider {
+    var displayName: string;
+}
+declare function DetailsListLabel(props: DetailsListLabelProps): react_jsx_runtime.JSX.Element;
+declare namespace DetailsListLabel {
+    var displayName: string;
+}
+declare function DetailsListValue(props: DetailsListValueProps): react_jsx_runtime.JSX.Element;
+declare namespace DetailsListValue {
+    var displayName: string;
+}
+/**
+ * A semantic details list component for displaying metadata in key-value pairs.
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <DetailsList align="left">
+ *   <DetailsList.Label>Key</DetailsList.Label>
+ *   <DetailsList.Value>Value</DetailsList.Value>
+ *
+ *   <DetailsList.Label>Ships</DetailsList.Label>
+ *   <DetailsList.Value>Millennium Falcon</DetailsList.Value>
+ *   <DetailsList.Value>USS Enterprise NCC-1701</DetailsList.Value>
+ *   <DetailsList.Value>Serenity</DetailsList.Value>
+ *
+ *   <DetailsList.Label>Coordinates</DetailsList.Label>
+ *   <DetailsList.Value>
+ *     <div>Great Pyramid of Giza: 29°58'44" N 31°08'02" E</div>
+ *     <div>Machu Picchu: 13°09'47" S 72°32'41" W</div>
+ *     <div>Colosseum: 41°53'24" N 12°29'32" E</div>
+ *     <div>Taj Mahal: 27°10'30" N 78°02'31" E</div>
+ *   </DetailsList.Value>
+ * </DetailsList>
+ * ```
+ * ## Child Component Behavior
+ * - **DetailsList.Label**: Minimum of 1
+ * - **DetailsList.Value**: Minimum of 1
+ */
+declare function DetailsList({ ref, ...props }: DetailsListProps): react_jsx_runtime.JSX.Element;
+declare namespace DetailsList {
+    var displayName: string;
+    var Provider: typeof DetailsListProvider;
+    var Label: typeof DetailsListLabel;
+    var Value: typeof DetailsListValue;
+}
+
+export { DetailsList, DetailsListContext };

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

@@ -0,0 +1,2 @@
+import {jsx}from'react/jsx-runtime';import'client-only';import {containsExactChildren}from'./../../lib/react.js';import {createContext}from'react';import {useContextProps,TextContext,DEFAULT_SLOT,Text}from'react-aria-components';import {DetailsListStyles,DetailsListStylesDefaults}from'./styles.js';const {list:N,label:b,value:f}=DetailsListStyles(),n=createContext(null);function m({children:e,...s}){return jsx(n.Provider,{value:s,children:e})}m.displayName="DetailsListProvider.Provider";function L(e){return jsx(Text,{...e,elementType:"dt",slot:"label"})}L.displayName="DetailsList.Label";function p(e){return jsx(Text,{...e,elementType:"dd",slot:"value"})}p.displayName="DetailsList.Value";function t({ref:e,...s}){[s,e]=useContextProps(s,e??null,n);const{children:o,classNames:i,align:a=DetailsListStylesDefaults.align,...u}=s;return containsExactChildren({children:o,componentName:t.displayName,restrictions:[[t.Label,{min:1}],[t.Value,{min:1}]]}),jsx(TextContext,{value:{slots:{[DEFAULT_SLOT]:{},label:{className:b({className:i?.label,align:a})},value:{className:f({className:i?.value,align:a})}}},children:jsx("dl",{...u,className:N({className:i?.list,align:a}),children:o})})}t.displayName="DetailsList",t.Provider=m,t.Label=L,t.Value=p;export{t as DetailsList,n as DetailsListContext};//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/details-list/index.tsx"],"names":["label","value","DetailsListContext","y","props","jsx","l","DetailsListProvider","Text","r","useContextProps","ref","v","classNames","rest","D","DetailsList","TextContext","P","d","align","children","DetailsListValue"],"mappings":"2SA+Bc,MAAAA,CAAAA,IAAO,CAAA,CAAA,CAAAC,KAA4B,CAAA,CAEpCC,CAAAA,KACqD,CAAA,CAAI,CAAA,CAEtEC,wCACE,EAAA,SACA,CAAA,CAAA,CAAGC,QAEH,CAAA,CAAA,CACEC,GAACH,CAAmB,CAAA,CAAA,CAAA,OAASI,GAAA,CAAA,CAAA,CAAA,QAC1B,CAAA,CAAA,KACH,CAEJ,CACAC,CAAAA,QAAoB,CAAA,CAAA,CAAA,CAAA,CAAc,CAAA,CAAA,WAAA,CAAA,8BAEsB,CACtD,SAAQC,CAAAA,CAAA,CAAM,CAAA,CAAA,OAAUF,GAAA,CAAAG,IAAA,CAAA,CAAA,GAAY,CAAA,CAAA,WAAU,CAAA,IAAQ,CACxD,IACiB,CAAA,OAAA,CAAA,CAAA,CAAc,CAAA,CAAA,WAAA,CAAA,mBAEyB,CACtD,SAAQD,CAAAA,CAAA,CAAM,CAAA,CAAA,OAAUF,GAAA,CAAAG,IAAA,CAAA,CAAA,GAAY,CAAA,CAAA,WAAU,CAAA,IAAQ,CACxD,IACiB,CAAA,OAAA,CAAA,CAAA,CAAc,iCA+BD,CAAA,SAAc,CAAqB,CAC/D,CAACL,GAAU,CAAA,CAAIM,CAAAA,GAAuBC,CAAAA,CAAAA,CAAO,CAAA,CAAA,CAAA,CAAA,CAAMT,CAAkB,CAAAU,eAErE,CAAA,CAAA,CAAA,CAAA,EACE,IAAA,CAAA,CAAA,CAAA,CAAA,KACA,CAAA,QAAAC,CAAAA,CACA,CAAA,UAAkC,CAAA,CAAA,CAAA,KAC/BC,CACL,CAAA,CAAIV,yBAAAA,CAEJ,KAAA,CAAA,GAAsB,CACpB,CAAA,CAAA,CAAA,CAAA,OACAW,qBAAA,CAAA,CAAA,QAAA,CAAA,CAAA,CAAeC,aAAY,CAC3B,CAAA,CAAA,WAAc,CACZ,YAAsB,CAAA,CAAK,CAAE,CAAC,CAAA,KACjB,CAAA,CAAA,GAAO,CAAE,CAAA,CAAA,CAAA,CAAK,CAAE,CAAC,CAChC,KAIAX,CAACY,CAAAA,GACC,CAAA,CAAA,CAAA,CAAA,CAAO,CACL,CAAA,CAAAX,GAAA,CAAAY,WAAA,CAAO,CACL,KAAiB,CAAA,CACjB,MAAO,CAAE,CAAAC,YAAA,EAAA,EAAA,CAAA,KAAiB,CAAE,CAAA,SAAWN,CAAAA,CAAAA,CAAY,CAAA,SAAO,CAAA,CAAAO,EAAO,KACjE,CAAA,gBAA0B,CAAE,CAAA,SAAWP,CAAAA,CAAAA,CAAY,CAAA,SAAO,CAAA,CAAAO,EAAO,KAIrE,CAAA,KAAA,CAAA,CAAA,CAAAf,CAAAA,CAAC,WAAa,CAAAC,GAAA,CAAA,IAAA,CAAA,CAAA,GAAgB,CAAE,CAAA,SAAWO,CAAAA,CAAAA,CAAY,CAAA,SAAM,CAAAO,CAAM,EAAC,IACjE,CAAA,KAAAC,CAAAA,CACH,EACF,CAEJ,QACY,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAc,CAAA,CAAA,WAAA,CAC1BL,aACAA,CAAAA,CAAY,CAAA,QACZA,CAAY,CAAA,CAAA,CAAA,CAAA,KAAQM,CAAAA,CAAAA,CAAAA,CAAAA,CAAAA,KAAAA,CAAAA,CAAAA","file":"index.js","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 { containsExactChildren } from '@/lib/react';\nimport type { ProviderProps } from '@/lib/types';\nimport { createContext } from 'react';\nimport {\n  type ContextValue,\n  DEFAULT_SLOT,\n  Text,\n  TextContext,\n  useContextProps,\n} from 'react-aria-components';\nimport { DetailsListStyles, DetailsListStylesDefaults } from './styles';\nimport type {\n  DetailsListLabelProps,\n  DetailsListProps,\n  DetailsListValueProps,\n} from './types';\n\nconst { list, label, value } = DetailsListStyles();\n\nexport const DetailsListContext =\n  createContext<ContextValue<DetailsListProps, HTMLDListElement>>(null);\n\nfunction DetailsListProvider({\n  children,\n  ...props\n}: ProviderProps<DetailsListProps>) {\n  return (\n    <DetailsListContext.Provider value={props}>\n      {children}\n    </DetailsListContext.Provider>\n  );\n}\nDetailsListProvider.displayName = 'DetailsListProvider.Provider';\n\nfunction DetailsListLabel(props: DetailsListLabelProps) {\n  return <Text {...props} elementType='dt' slot='label' />;\n}\nDetailsListLabel.displayName = 'DetailsList.Label';\n\nfunction DetailsListValue(props: DetailsListValueProps) {\n  return <Text {...props} elementType='dd' slot='value' />;\n}\nDetailsListValue.displayName = 'DetailsList.Value';\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 *   <DetailsList.Label>Key</DetailsList.Label>\n *   <DetailsList.Value>Value</DetailsList.Value>\n *\n *   <DetailsList.Label>Ships</DetailsList.Label>\n *   <DetailsList.Value>Millennium Falcon</DetailsList.Value>\n *   <DetailsList.Value>USS Enterprise NCC-1701</DetailsList.Value>\n *   <DetailsList.Value>Serenity</DetailsList.Value>\n *\n *   <DetailsList.Label>Coordinates</DetailsList.Label>\n *   <DetailsList.Value>\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 *   </DetailsList.Value>\n * </DetailsList>\n * ```\n * ## Child Component Behavior\n * - **DetailsList.Label**: Minimum of 1\n * - **DetailsList.Value**: Minimum of 1\n */\nexport function DetailsList({ ref, ...props }: DetailsListProps) {\n  [props, ref] = useContextProps(props, ref ?? null, DetailsListContext);\n\n  const {\n    children,\n    classNames,\n    align = DetailsListStylesDefaults.align,\n    ...rest\n  } = props;\n\n  containsExactChildren({\n    children,\n    componentName: DetailsList.displayName,\n    restrictions: [\n      [DetailsList.Label, { min: 1 }],\n      [DetailsList.Value, { min: 1 }],\n    ],\n  });\n\n  return (\n    <TextContext\n      value={{\n        slots: {\n          [DEFAULT_SLOT]: {},\n          label: { className: label({ className: classNames?.label, align }) },\n          value: { className: value({ className: classNames?.value, align }) },\n        },\n      }}\n    >\n      <dl {...rest} className={list({ className: classNames?.list, align })}>\n        {children}\n      </dl>\n    </TextContext>\n  );\n}\nDetailsList.displayName = 'DetailsList';\nDetailsList.Provider = DetailsListProvider;\nDetailsList.Label = DetailsListLabel;\nDetailsList.Value = DetailsListValue;\n"]}