@accelint/design-toolkit 2.4.3 → 2.5.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/index.d.ts

@@ -1,16 +1,17 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as cva_types from 'cva/types';
-import { ComboBoxProps as ComboBoxProps$1, VirtualizerProps, ListLayoutOptions, ListBoxSectionProps } from 'react-aria-components';
-import { VariantProps } from 'cva';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
 import { ReactNode } from 'react';
-import { IOptionsItem, OptionsItem } from '../options-item/index.js';
+import { ComboBoxProps as ComboBoxProps$1, VirtualizerProps, ListLayoutOptions } from 'react-aria-components';
+import { OptionsDataItem } from '../options/types.js';
+import '../icon/types.js';
 
 declare const textFieldStyles: (props?: ({
     isDisabled?: boolean | null | undefined;
     isInvalid?: boolean | null | undefined;
     size?: "small" | "medium" | null | undefined;
-} & cva_types.ClassProp) | undefined) => string;
-interface ComboBoxProps<T extends IOptionsItem> extends Omit<VariantProps<typeof textFieldStyles>, 'isDisabled' | 'isInvalid' | 'isReadOnly'>, Omit<ComboBoxProps$1<T>, 'children'>, Pick<VirtualizerProps<ListLayoutOptions>, 'layoutOptions'> {
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ComboBoxProps<T extends OptionsDataItem> extends Omit<VariantProps<typeof textFieldStyles>, 'isDisabled' | 'isInvalid' | 'isReadOnly'>, Omit<ComboBoxProps$1<T>, 'children'>, Pick<VirtualizerProps<ListLayoutOptions>, 'layoutOptions'> {
     className?: string;
     children: ReactNode | ((item: T) => ReactNode);
     description?: string;
@@ -18,15 +19,9 @@ interface ComboBoxProps<T extends IOptionsItem> extends Omit<VariantProps<typeof
     label?: string;
     placeholder?: string;
 }
-declare function ComboBox<T extends IOptionsItem>({ children, className, description, errorMessage, isDisabled, isInvalid, isReadOnly, label, placeholder, layoutOptions, size, ...props }: ComboBoxProps<T>): react_jsx_runtime.JSX.Element;
+declare function ComboBox<T extends OptionsDataItem>({ children, className, description, errorMessage, isDisabled, isInvalid, isReadOnly, label, placeholder, layoutOptions, size, ...props }: ComboBoxProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace ComboBox {
     var displayName: string;
-    var Item: typeof OptionsItem;
-    var Section: typeof ComboBoxSection;
 }
-interface ComboBoxSectionProps<T extends IOptionsItem> extends ListBoxSectionProps<T> {
-    header?: string;
-}
-declare function ComboBoxSection<T extends IOptionsItem>({ children, header, items, }: ComboBoxSectionProps<T>): react_jsx_runtime.JSX.Element;
 
-export { ComboBox, type ComboBoxProps, ComboBoxSection };
+export { ComboBox, type ComboBoxProps };

package/dist/components/combobox/index.js

@@ -1,2 +1,2 @@
-import'client-only';import {ComboBox,Button,Text,Popover,Virtualizer,ListLayout,ListBoxSection,Header,Collection,Input}from'react-aria-components';import {cn}from'./../../lib/utils.js';import {ChevronDown}from'@accelint/icons';import {cva}from'cva';import {Icon}from'../icon/index.js';import {Label}from'../label/index.js';import {Options}from'../options/index.js';import {OptionsItem}from'../options-item/index.js';import {jsx,jsxs,Fragment}from'react/jsx-runtime';var q=cva(["block w-full rounded-medium py-xs pr-[32px] pl-s font-display outline outline-interactive","not-disabled:read-only:rounded-none not-disabled:read-only:p-0 not-disabled:read-only:outline-transparent not-disabled:read-only:hover:outline-transparent not-disabled:read-only:focus:outline-transparent"],{variants:{isDisabled:{true:"text-disabled outline-interactive-disabled placeholder:text-disabled",false:"text-default-light placeholder:text-default-dark hover:outline-interactive-hover focus:outline-highlight"},isInvalid:{true:"outline-serious"},size:{medium:"text-body-s",small:"text-body-xs"}},compoundVariants:[{isDisabled:true,isInvalid:true,className:"outline-interactive-disabled"}],defaultVariants:{size:"medium"}}),f=({className:t,isReadOnly:o=false,size:i="medium",...l})=>jsx(Input,{...l,className:({isDisabled:s,isInvalid:a})=>cn(q({isDisabled:s,isInvalid:a,size:i,className:t}))});f.displayName="ComboBox.Input";function n({children:t,className:o,description:i,errorMessage:l,isDisabled:s,isInvalid:a,isReadOnly:r,label:u,placeholder:A,layoutOptions:h,size:c="medium",...x}){let b=c==="small",B=!(b||a)||s,I=a&&!s&&!r,P=!b&&u;return jsx(ComboBox,{...x,isDisabled:s,isInvalid:a,isReadOnly:r,className:"flex flex-col gap-xs",children:({isDisabled:d,isOpen:g})=>jsxs(Fragment,{children:[P&&jsx(Label,{className:"empty:hidden",isDisabled:d,isRequired:x.isRequired,children:u}),jsxs("div",{className:"relative flex items-center",children:[jsx(f,{className:o,isReadOnly:r,placeholder:A,size:c}),jsx(Button,{className:cn(["fg-default-light absolute right-xs transform",d&&"fg-disabled",g&&"rotate-180",r&&"hidden"]),children:jsx(Icon,{className:"block",size:"large",children:jsx(ChevronDown,{})})})]}),B&&jsx(Text,{className:cn(["fg-default-dark text-body-xs empty:hidden",d&&"fg-disabled"]),slot:"description",children:i}),I&&jsx(Text,{className:"fg-serious text-body-xs empty:hidden",slot:"errorMessage",children:l}),jsx(Popover,{className:"w-(--trigger-width)",children:jsx(Virtualizer,{layout:ListLayout,layoutOptions:h,children:jsx(Options,{children:t})})})]})})}n.displayName="ComboBox";n.Item=OptionsItem;function M({children:t,header:o,items:i}){return jsxs(ListBoxSection,{id:o,className:"col-span-2 mt-s grid grid-cols-[auto_1fr] border-default-dark border-t first:border-none",children:[jsx(Header,{className:"col-span-2 m-xs my-s text-default-dark text-header-xs",children:o}),jsx(Collection,{items:i,children:t})]})}n.displayName="ComboBox.Section";n.Section=M;export{n as ComboBox,M as ComboBoxSection};//# sourceMappingURL=index.js.map
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import'client-only';import {cn}from'./../../lib/utils.js';import {ChevronDown}from'@accelint/icons';import {cva}from'class-variance-authority';import {ComboBox,Button,Text,Popover,Virtualizer,ListLayout,Input}from'react-aria-components';import {Icon}from'../icon/index.js';import {Label}from'../label/index.js';import {Options}from'../options/index.js';const S=cva(["block w-full rounded-medium py-xs pr-[32px] pl-s font-display outline outline-interactive","not-disabled:read-only:rounded-none not-disabled:read-only:p-0 not-disabled:read-only:outline-transparent not-disabled:read-only:hover:outline-transparent not-disabled:read-only:focus:outline-transparent"],{variants:{isDisabled:{true:"text-disabled outline-interactive-disabled placeholder:text-disabled",false:"text-default-light placeholder:text-default-dark hover:outline-interactive-hover focus:outline-highlight"},isInvalid:{true:"outline-serious"},size:{medium:"text-body-s",small:"text-body-xs"}},compoundVariants:[{isDisabled:true,isInvalid:true,className:"outline-interactive-disabled"}],defaultVariants:{size:"medium"}}),y=({className:a,isReadOnly:d=false,size:s="medium",...r})=>jsx(Input,{...r,className:({isDisabled:e,isInvalid:o})=>cn(S({isDisabled:e,isInvalid:o,size:s,className:a}))});y.displayName="ComboBox.Input";function D({children:a,className:d,description:s,errorMessage:r,isDisabled:e,isInvalid:o,isReadOnly:i,label:p,placeholder:b,layoutOptions:h,size:m="medium",...u}){const c=m==="small",A=!(c||o)||e,g=o&&!e&&!i,P=!c&&p;return jsx(ComboBox,{...u,isDisabled:e,isInvalid:o,isReadOnly:i,className:"flex flex-col gap-xs",children:({isDisabled:l,isOpen:v})=>jsxs(Fragment,{children:[P&&jsx(Label,{className:"empty:hidden",isDisabled:l,isRequired:u.isRequired,children:p}),jsxs("div",{className:"relative flex items-center",children:[jsx(y,{className:d,isReadOnly:i,placeholder:b,size:m}),jsx(Button,{className:cn(["fg-default-light absolute right-xs transform",l&&"fg-disabled",v&&"rotate-180",i&&"hidden"]),children:jsx(Icon,{size:"small",children:jsx(ChevronDown,{})})})]}),A&&jsx(Text,{className:cn(["fg-default-dark text-body-xs empty:hidden",l&&"fg-disabled"]),slot:"description",children:s}),g&&jsx(Text,{className:"fg-serious text-body-xs empty:hidden",slot:"errorMessage",children:r}),jsx(Popover,{className:"w-(--trigger-width)",children:jsx(Virtualizer,{layout:ListLayout,layoutOptions:h,children:jsx(Options,{children:a})})})]})})}D.displayName="ComboBox";export{D as ComboBox};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/combobox/index.tsx"],"names":["w","className","isReadOnly","size","AriaInput","props","isDisabled","isInvalid","p","ComboBox","children","isSmall","shouldShowDescription","shouldShowError","shouldShowLabel","label","jsx","AriaComboBox","e","N","m","E","AriaButton","L","cn","Icon","ChevronDown","k","AriaText","description","y","errorMessage","AriaVirtualizer","AriaListLayout","T","Options","F","ComboBoxSection","jsxs","AriaListBoxSection","S","C","header","items","O"],"mappings":"kdA2CI,IAAA,CAAA,CAAAA,GAAA,CAAA,CAAA,2FACA,CAAA,6MAGA,CAAU,CACR,CAAA,QAAA,CAAA,CAAY,UACJ,CAAA,CAAA,IAAA,CAAA,uLAIR,CAAW,CACT,SAAM,CAAA,CAAA,IAAA,CAAA,uBAGE,CAAA,CAAA,MAAA,CAAA,qDAMR,CAAA,CAAA,CAAY,UACZ,CAAA,IAAW,CAAA,cACA,CAAA,SAAA,CAAA,8BAGf,CAAA,CAAA,CAAA,eACQ,CAAA,CAAA,IAGZ,CAAA,QASE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAAC,UACA,CAAA,CAAA,CAAAC,UACAC,CAAAA,CAAO,YACP,CAAA,CAAA,QAGGC,CAAAA,GACE,CAAA,CAAGC,kBACO,CAAC,YAAEC,UAAY,CAAA,CAAAC,CAAU,SAG9B,CAAA,CAAA,CAAA,GAAAC,EAAA,CAAA,CAAA,CAAA,CAAAF,UACA,CAAA,CAAAC,CAAAA,SAEA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAAN,CACF,SAMJ,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,4BAiBUQ,CAAiC,SAC/C,CAAAC,CAAAA,CACA,UAAAT,CAAAA,SACA,CAAA,CAAA,CAAA,WACA,CAAA,CAAA,CAAA,eACAK,UACA,CAAA,CAAAC,UACA,CAAA,CAAA,CAAAL,UAEA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,WACA,CAAA,CAAA,CAAA,aACO,CAAA,CAAA,CAAA,IAAA,CACP,UAEA,CAAMS,MAAmB,CAAA,IAAA,CAAA,CAAA,CACnBC,UAAqCL,CAAcD,CAAAA,CACnDO,EAAkBN,CAAAA,EAAa,CAACD,GAAc,CAACJ,CAAAA,CAC/CY,EAAkB,EAACH,CAAAA,CAAWI,EAEpC,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CACEC,EAACC,EAAA,OAECC,GAAA,CAAAC,QAAA,CAAA,CAAA,GAAA,CAAA,CAAYb,YACDC,CAAAA,SACX,CAAA,CAAA,CAAYL,UACZ,CAAA,CAAU,CAAA,SAAA,CAAA,sBAER,CAAE,QAAA,CAAA,CAAA,CAAAI,UAAmB,SAElB,CAAA,CAAA,CAAA,GAAAc,IAAA,CAAAC,QAAA,CAAAP,CAAAA,uBAEa,CAAA,SAAA,CAAA,cACV,CAAYR,UACZ,CAAA,CAAA,CAAYD,aAEX,UAAAU,CACH,QAED,CAAA,CAAA,CAAI,CAAA,CAAAK,IAAA,CAAA,KAAA,CAAU,uCACbJ,CAAAA,QACE,CAAA,CAAAE,GAAA,CAAA,CAAA,CAAWjB,UACX,CAAA,CAAA,CAAYC,wBAGd,CACAc,CAAAA,CAACM,IACC,CAAA,CAAA,CAAA,CAAA,CAAAJ,GAAA,CAAAK,MAAA,CAAWC,UACT,CAAAhB,EAAA,CAAA,CAAA,8CACc,CAAA,CAAA,EAAA,6BAEA,CAChB,CAAC,EAED,QAAA,CAAAQ,EAACS,kBAAe,CAAA,SAAQ,CAAA,YACtB,CAAA,OAAAT,CAACU,QAEL,CAAAR,GAAA,CACFS,WAAA,CACCf,EAAAA,CACCI,CAAAA,CAACY,CAAAA,CAAA,CACC,eAAWJ,CAAAA,yDAEK,CAAA,CAAA,EAAA,kCAIfK,CACH,SAGC,CACC,CAAA,CAAA,CAAA,CAAA,EAAAX,GAAA,CAAAY,IAAA,CAAU,iDACL,CAAA,IAAA,CAAA,cAEJC,CACH,yBAEqB,CAAA,SAAA,CAAA,sBACpBC,YACSC,CAAAA,WACR,CAAA,CAAA,MAAA,CAAAC,UAAA,CAAA,aAEA,CAAAlB,CAAAA,CAACmB,QAAS,CAAAjB,GAAA,CAAAkB,OAAA1B,EAAS,QAGzB,CAEJ,CAEJ,CACAD,EAAS,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,WAAc,CAEvBA,kBAOgB4B,WAAAA,CAAwC,UACtD3B,CAAAA,CACA,SACA,CAAA,CAAA,OAC0B,CAC1B,CAAA,KAAA,CACE4B,EAACC,CAAAA,CAAA,OAECnB,IAAA,CAAAoB,cAAA,CAAA,CAAA,EAAA,CAAA,CAAU,CAAA,SAAA,CAAA,0FAEVxB,CAAAA,QAAY,CAAA,CAAAE,GAAA,CAAAuB,MAAA,CAAU,CAAA,SAAA,CAAA,uDACnBC,CACH,aAC8BC,GAAAA,CAAQC,UAAA,CAAA,CAAA,KAAA,CAAAlC,EAAS,QAI5C,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,WAAc,CAAA,kBACJ2B,CAAAA,CAAAA,CAAAA,OAAAA,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\n'use client';\nimport 'client-only';\nimport {\n  Button as AriaButton,\n  ComboBox as AriaComboBox,\n  type ComboBoxProps as AriaComboBoxProps,\n  Header as AriaHeader,\n  Input as AriaInput,\n  type InputProps as AriaInputProps,\n  Collection as AriaListBoxCollection,\n  ListBoxSection as AriaListBoxSection,\n  type ListBoxSectionProps as AriaListBoxSectionProps,\n  ListLayout as AriaListLayout,\n  type ListLayoutOptions as AriaListLayoutOptions,\n  Popover as AriaPopover,\n  Text as AriaText,\n  Virtualizer as AriaVirtualizer,\n  type VirtualizerProps as AriaVirtualizerProps,\n} from 'react-aria-components';\n\nimport { cn } from '@/lib/utils';\nimport { ChevronDown } from '@accelint/icons';\nimport { type VariantProps, cva } from 'cva';\nimport type { ReactNode } from 'react';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { Options } from '../options';\nimport { type IOptionsItem, OptionsItem } from '../options-item';\n\nconst textFieldStyles = cva(\n  [\n    'block w-full rounded-medium py-xs pr-[32px] pl-s font-display outline outline-interactive',\n    'not-disabled:read-only:rounded-none not-disabled:read-only:p-0 not-disabled:read-only:outline-transparent not-disabled:read-only:hover:outline-transparent not-disabled:read-only:focus:outline-transparent',\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 hover:outline-interactive-hover focus:outline-highlight',\n      },\n      isInvalid: {\n        true: 'outline-serious',\n      },\n      size: {\n        medium: 'text-body-s',\n        small: 'text-body-xs',\n      },\n    },\n    compoundVariants: [\n      {\n        isDisabled: true,\n        isInvalid: true,\n        className: 'outline-interactive-disabled',\n      },\n    ],\n    defaultVariants: {\n      size: 'medium',\n    },\n  },\n);\n\ninterface InputProps\n  extends VariantProps<typeof textFieldStyles>,\n    Omit<AriaInputProps, 'size'> {\n  isReadOnly?: boolean;\n}\n\nconst Input = ({\n  className,\n  isReadOnly = false,\n  size = 'medium',\n  ...props\n}: InputProps) => {\n  return (\n    <AriaInput\n      {...props}\n      className={({ isDisabled, isInvalid }) =>\n        cn(\n          textFieldStyles({\n            isDisabled,\n            isInvalid,\n            size,\n            className,\n          }),\n        )\n      }\n    />\n  );\n};\nInput.displayName = 'ComboBox.Input';\n\nexport interface ComboBoxProps<T extends IOptionsItem>\n  extends Omit<\n      VariantProps<typeof textFieldStyles>,\n      'isDisabled' | 'isInvalid' | 'isReadOnly'\n    >,\n    Omit<AriaComboBoxProps<T>, 'children'>,\n    Pick<AriaVirtualizerProps<AriaListLayoutOptions>, 'layoutOptions'> {\n  className?: string;\n  children: ReactNode | ((item: T) => ReactNode);\n  description?: string;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n}\n\nexport function ComboBox<T extends IOptionsItem>({\n  children,\n  className,\n  description,\n  errorMessage,\n  isDisabled,\n  isInvalid,\n  isReadOnly,\n  label,\n  placeholder,\n  layoutOptions,\n  size = 'medium',\n  ...props\n}: ComboBoxProps<T>) {\n  const isSmall = size === 'small';\n  const shouldShowDescription = !(isSmall || isInvalid) || isDisabled;\n  const shouldShowError = isInvalid && !isDisabled && !isReadOnly;\n  const shouldShowLabel = !isSmall && label;\n\n  return (\n    <AriaComboBox<T>\n      {...props}\n      isDisabled={isDisabled}\n      isInvalid={isInvalid}\n      isReadOnly={isReadOnly}\n      className='flex flex-col gap-xs'\n    >\n      {({ isDisabled, isOpen }) => (\n        <>\n          {shouldShowLabel && (\n            <Label\n              className='empty:hidden'\n              isDisabled={isDisabled}\n              isRequired={props.isRequired}\n            >\n              {label}\n            </Label>\n          )}\n          <div className='relative flex items-center'>\n            <Input\n              className={className}\n              isReadOnly={isReadOnly}\n              placeholder={placeholder}\n              size={size}\n            />\n            <AriaButton\n              className={cn([\n                'fg-default-light absolute right-xs transform',\n                isDisabled && 'fg-disabled',\n                isOpen && 'rotate-180',\n                isReadOnly && 'hidden',\n              ])}\n            >\n              <Icon className='block' size='large'>\n                <ChevronDown />\n              </Icon>\n            </AriaButton>\n          </div>\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            <AriaText\n              className='fg-serious text-body-xs empty:hidden'\n              slot='errorMessage'\n            >\n              {errorMessage}\n            </AriaText>\n          )}\n          <AriaPopover className='w-(--trigger-width)'>\n            <AriaVirtualizer\n              layout={AriaListLayout}\n              layoutOptions={layoutOptions}\n            >\n              <Options>{children}</Options>\n            </AriaVirtualizer>\n          </AriaPopover>\n        </>\n      )}\n    </AriaComboBox>\n  );\n}\nComboBox.displayName = 'ComboBox';\n\nComboBox.Item = OptionsItem;\n\ninterface ComboBoxSectionProps<T extends IOptionsItem>\n  extends AriaListBoxSectionProps<T> {\n  header?: string;\n}\n\nexport function ComboBoxSection<T extends IOptionsItem>({\n  children,\n  header,\n  items,\n}: ComboBoxSectionProps<T>) {\n  return (\n    <AriaListBoxSection\n      id={header}\n      className='col-span-2 mt-s grid grid-cols-[auto_1fr] border-default-dark border-t first:border-none'\n    >\n      <AriaHeader className='col-span-2 m-xs my-s text-default-dark text-header-xs'>\n        {header}\n      </AriaHeader>\n      <AriaListBoxCollection items={items}>{children}</AriaListBoxCollection>\n    </AriaListBoxSection>\n  );\n}\nComboBox.displayName = 'ComboBox.Section';\nComboBox.Section = ComboBoxSection;\n"]}
+{"version":3,"sources":["../../../src/components/combobox/index.tsx"],"names":["N","isReadOnly","size","jsx","t","L","isInvalid","cn","n","Input","ComboBox","errorMessage","isDisabled","layoutOptions","shouldShowDescription","isSmall","shouldShowError","label","AriaComboBox","props","B","shouldShowLabel","jsxs","f","placeholder","AriaButton","O","Icon","ChevronDown","I","x","AriaText","V","Options","C","children","R"],"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 { cn } from '@/lib/utils';\nimport { ChevronDown } from '@accelint/icons';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport type { ReactNode } from 'react';\nimport {\n  Button as AriaButton,\n  ComboBox as AriaComboBox,\n  type ComboBoxProps as AriaComboBoxProps,\n  Input as AriaInput,\n  type InputProps as AriaInputProps,\n  ListLayout as AriaListLayout,\n  type ListLayoutOptions as AriaListLayoutOptions,\n  Popover as AriaPopover,\n  Text as AriaText,\n  Virtualizer as AriaVirtualizer,\n  type VirtualizerProps as AriaVirtualizerProps,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { Options } from '../options';\nimport type { OptionsDataItem } from '../options/types';\n\nconst textFieldStyles = cva(\n  [\n    'block w-full rounded-medium py-xs pr-[32px] pl-s font-display outline outline-interactive',\n    'not-disabled:read-only:rounded-none not-disabled:read-only:p-0 not-disabled:read-only:outline-transparent not-disabled:read-only:hover:outline-transparent not-disabled:read-only:focus:outline-transparent',\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 hover:outline-interactive-hover focus:outline-highlight',\n      },\n      isInvalid: {\n        true: 'outline-serious',\n      },\n      size: {\n        medium: 'text-body-s',\n        small: 'text-body-xs',\n      },\n    },\n    compoundVariants: [\n      {\n        isDisabled: true,\n        isInvalid: true,\n        className: 'outline-interactive-disabled',\n      },\n    ],\n    defaultVariants: {\n      size: 'medium',\n    },\n  },\n);\n\ninterface InputProps\n  extends VariantProps<typeof textFieldStyles>,\n    Omit<AriaInputProps, 'size'> {\n  isReadOnly?: boolean;\n}\n\nconst Input = ({\n  className,\n  isReadOnly = false,\n  size = 'medium',\n  ...props\n}: InputProps) => {\n  return (\n    <AriaInput\n      {...props}\n      className={({ isDisabled, isInvalid }) =>\n        cn(\n          textFieldStyles({\n            isDisabled,\n            isInvalid,\n            size,\n            className,\n          }),\n        )\n      }\n    />\n  );\n};\nInput.displayName = 'ComboBox.Input';\n\nexport interface ComboBoxProps<T extends OptionsDataItem>\n  extends Omit<\n      VariantProps<typeof textFieldStyles>,\n      'isDisabled' | 'isInvalid' | 'isReadOnly'\n    >,\n    Omit<AriaComboBoxProps<T>, 'children'>,\n    Pick<AriaVirtualizerProps<AriaListLayoutOptions>, 'layoutOptions'> {\n  className?: string;\n  children: ReactNode | ((item: T) => ReactNode);\n  description?: string;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n}\n\nexport function ComboBox<T extends OptionsDataItem>({\n  children,\n  className,\n  description,\n  errorMessage,\n  isDisabled,\n  isInvalid,\n  isReadOnly,\n  label,\n  placeholder,\n  layoutOptions,\n  size = 'medium',\n  ...props\n}: ComboBoxProps<T>) {\n  const isSmall = size === 'small';\n  const shouldShowDescription = !(isSmall || isInvalid) || isDisabled;\n  const shouldShowError = isInvalid && !isDisabled && !isReadOnly;\n  const shouldShowLabel = !isSmall && label;\n\n  return (\n    <AriaComboBox<T>\n      {...props}\n      isDisabled={isDisabled}\n      isInvalid={isInvalid}\n      isReadOnly={isReadOnly}\n      className='flex flex-col gap-xs'\n    >\n      {({ isDisabled, isOpen }) => (\n        <>\n          {shouldShowLabel && (\n            <Label\n              className='empty:hidden'\n              isDisabled={isDisabled}\n              isRequired={props.isRequired}\n            >\n              {label}\n            </Label>\n          )}\n          <div className='relative flex items-center'>\n            <Input\n              className={className}\n              isReadOnly={isReadOnly}\n              placeholder={placeholder}\n              size={size}\n            />\n            <AriaButton\n              className={cn([\n                'fg-default-light absolute right-xs transform',\n                isDisabled && 'fg-disabled',\n                isOpen && 'rotate-180',\n                isReadOnly && 'hidden',\n              ])}\n            >\n              <Icon size='small'>\n                <ChevronDown />\n              </Icon>\n            </AriaButton>\n          </div>\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            <AriaText\n              className='fg-serious text-body-xs empty:hidden'\n              slot='errorMessage'\n            >\n              {errorMessage}\n            </AriaText>\n          )}\n          <AriaPopover className='w-(--trigger-width)'>\n            <AriaVirtualizer\n              layout={AriaListLayout}\n              layoutOptions={layoutOptions}\n            >\n              <Options>{children}</Options>\n            </AriaVirtualizer>\n          </AriaPopover>\n        </>\n      )}\n    </AriaComboBox>\n  );\n}\nComboBox.displayName = 'ComboBox';\n"]}

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":"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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 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"]}