@accelint/design-toolkit 7.0.0 → 8.0.0

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

@@ -0,0 +1,194 @@
+import { RefAttributes, Dispatch, SetStateAction, KeyboardEvent } from 'react';
+import { TextFieldProps, LabelProps, FieldErrorProps } from 'react-aria-components';
+
+/**
+ * Supported coordinate systems for display and input
+ */
+type CoordinateSystem = 'dd' | 'ddm' | 'dms' | 'mgrs' | 'utm';
+/**
+ * Short labels for coordinate formats (used in popover)
+ */
+declare const COORDINATE_FORMAT_LABELS: Record<CoordinateSystem, string>;
+/**
+ * Full names for coordinate formats (used in popover titles/descriptions)
+ */
+declare const COORDINATE_FORMAT_NAMES: Record<CoordinateSystem, string>;
+/**
+ * All supported coordinate systems
+ * Use this constant instead of hardcoding the array in multiple places
+ */
+declare const COORDINATE_SYSTEMS: readonly CoordinateSystem[];
+/**
+ * Coordinate value in Decimal Degrees format (internal representation)
+ * All coordinate values are normalized to this format internally
+ */
+type CoordinateValue = {
+    lat: number;
+    lon: number;
+};
+/**
+ * Types of segments in a coordinate input
+ */
+type SegmentType = 'numeric' | 'directional' | 'literal' | 'alphanumeric';
+/**
+ * Configuration for a single coordinate segment
+ */
+type SegmentConfig = {
+    type: SegmentType;
+    /** Placeholder text shown when segment is empty */
+    placeholder?: string;
+    /** Maximum character length for the segment */
+    maxLength?: number;
+    /** Regex pattern for allowed characters */
+    allowedChars?: string;
+    /** Fixed value for literal segments (e.g., ", " or "º") */
+    value?: string;
+    /** Padding in CSS 'ch' units to add to the segment width (defaults to 0.5 if not specified) */
+    pad?: number;
+};
+/**
+ * Result of parsing a pasted coordinate string
+ */
+type ParsedCoordinateMatch = {
+    /** The coordinate system format that matched */
+    format: CoordinateSystem;
+    /** The coordinate value in DD format */
+    value: CoordinateValue;
+    /** Display string in the matched format */
+    displayString: string;
+};
+/**
+ * State shared with child components through context
+ */
+type CoordinateFieldState = {
+    segmentValues: string[];
+    format: CoordinateFieldProps['format'];
+    /**
+     * Current coordinate value in DD format
+     * - undefined: uncontrolled mode with no default value
+     * - null: controlled mode with empty/invalid value
+     * - CoordinateValue: valid coordinate
+     */
+    currentValue?: CoordinateValue | null;
+    /** Validation errors from @accelint/geo */
+    validationErrors: string[];
+    isDisabled: boolean;
+    isInvalid: boolean;
+    isRequired: boolean;
+    /** Size variant of the field */
+    size: CoordinateFieldProps['size'];
+    /** Function to register timeouts for cleanup on unmount */
+    registerTimeout: (timeoutId: NodeJS.Timeout) => void;
+};
+/**
+ * Props for the CoordinateSegment component
+ */
+type CoordinateSegmentProps = {
+    /** Current value of the segment */
+    value: string;
+    /** Callback when the segment value changes */
+    onChange: (value: string) => void;
+    /** Callback when the segment receives focus */
+    onFocus?: () => void;
+    /** Callback when the segment loses focus */
+    onBlur?: () => void;
+    /** Callback for keyboard events (used for navigation between segments) */
+    onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
+    /** Placeholder text to display when segment is empty */
+    placeholder?: string;
+    /** Maximum character length for the segment */
+    maxLength?: number;
+    /** Custom className for styling */
+    className?: string;
+    /** Whether the segment is disabled */
+    isDisabled?: boolean;
+    /** Regex pattern for allowed characters (e.g., "[0-9\\-\\.]" for numeric, "[NSEW]" for directional) */
+    allowedChars?: string;
+    /** Ref to the input element for programmatic focus management */
+    segmentRef?: React.RefObject<HTMLInputElement>;
+    /** Index of this segment in the parent field (for accessibility) */
+    segmentIndex?: number;
+    /** Total number of segments (for accessibility) */
+    totalSegments?: number;
+    /** Callback to trigger auto-advance to next segment */
+    onAutoAdvance?: () => void;
+    /** Callback to trigger auto-retreat to previous segment */
+    onAutoRetreat?: () => void;
+    /** Padding in CSS 'ch' units to add to the segment width (defaults to 0.5 if not specified) */
+    pad?: number;
+    /** Semantic accessibility label for the segment (e.g., "Latitude degrees") */
+    ariaLabel?: string;
+};
+/**
+ * Props for the CoordinateField component
+ *
+ * Extends AriaTextFieldProps to inherit standard form field props (id, isDisabled, isRequired, etc.)
+ */
+type CoordinateFieldProps = Omit<TextFieldProps, 'children' | 'className' | 'placeholder' | 'type' | 'pattern' | 'value' | 'defaultValue' | 'onChange' | 'name'> & RefAttributes<HTMLDivElement> & {
+    /**
+     * Custom class names for component slots
+     */
+    classNames?: {
+        field?: string;
+        label?: LabelProps['className'];
+        control?: string;
+        input?: string;
+        segment?: string;
+        description?: string;
+        error?: FieldErrorProps['className'];
+        formatButton?: string;
+    };
+    /**
+     * Label text displayed above the input (medium size only)
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the input
+     */
+    description?: string;
+    /**
+     * Error message to display when the field is invalid
+     */
+    errorMessage?: string;
+    /**
+     * Display format for coordinate input
+     * @default 'dd' (Decimal Degrees)
+     */
+    format?: CoordinateSystem;
+    /**
+     * Size variant of the field
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium';
+    /**
+     * Whether to show the format button for copying coordinates in different formats
+     * @default true
+     */
+    showFormatButton?: boolean;
+    /**
+     * Controlled value in Decimal Degrees format
+     * - undefined: uncontrolled mode
+     * - null: controlled mode with no/invalid value
+     * - CoordinateValue: controlled mode with valid value
+     */
+    value?: CoordinateValue | null;
+    /**
+     * Default uncontrolled value in Decimal Degrees format
+     */
+    defaultValue?: CoordinateValue;
+    /**
+     * Callback fired when the coordinate value changes
+     * @param value - The new coordinate value in DD format, or null if invalid
+     */
+    onChange?: Dispatch<SetStateAction<CoordinateValue | null>> | ((value: CoordinateValue | null) => void);
+    /**
+     * Callback fired when validation or paste errors occur
+     * @param message - Error message ("Invalid coordinate value" for validation errors, "Invalid coordinate format" for paste errors)
+     * @param context - Additional context about the error:
+     *   - Validation errors: `{ errors: string[], format: string, segments: string[] }`
+     *   - Paste errors: `{ pastedText: string }`
+     */
+    onError?: (message: string, context?: Record<string, unknown>) => void;
+};
+
+export { COORDINATE_FORMAT_LABELS, COORDINATE_FORMAT_NAMES, COORDINATE_SYSTEMS, type CoordinateFieldProps, type CoordinateFieldState, type CoordinateSegmentProps, type CoordinateSystem, type CoordinateValue, type ParsedCoordinateMatch, type SegmentConfig, type SegmentType };

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

@@ -0,0 +1,2 @@
+const e={dd:"DD",ddm:"DDM",dms:"DMS",mgrs:"MGRS",utm:"UTM"},t={dd:"Decimal Degrees",ddm:"Degrees Decimal Minutes",dms:"Degrees Minutes Seconds",mgrs:"Military Grid Reference System",utm:"Universal Transverse Mercator"},r=["dd","dms","ddm","mgrs","utm"];export{e as COORDINATE_FORMAT_LABELS,t as COORDINATE_FORMAT_NAMES,r as COORDINATE_SYSTEMS};//# sourceMappingURL=types.js.map
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/coordinate-field/types.ts"],"names":["COORDINATE_FORMAT_LABELS","COORDINATE_FORMAT_NAMES","COORDINATE_SYSTEMS"],"mappings":"AAgCO,MAAMA,CAAAA,CAA6D,CACxE,EAAA,CAAI,IAAA,CACJ,IAAK,KAAA,CACL,GAAA,CAAK,KAAA,CACL,IAAA,CAAM,MAAA,CACN,GAAA,CAAK,KACP,CAAA,CAKaC,EAA4D,CACvE,EAAA,CAAI,iBAAA,CACJ,GAAA,CAAK,yBAAA,CACL,GAAA,CAAK,yBAAA,CACL,IAAA,CAAM,iCACN,GAAA,CAAK,+BACP,CAAA,CAMaC,CAAAA,CAAkD,CAC7D,IAAA,CACA,KAAA,CACA,KAAA,CACA,OACA,KACF","file":"types.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 type {\n  Dispatch,\n  KeyboardEvent,\n  RefAttributes,\n  SetStateAction,\n} from 'react';\nimport type {\n  TextFieldProps as AriaTextFieldProps,\n  FieldErrorProps,\n  LabelProps,\n} from 'react-aria-components';\n\n/**\n * Supported coordinate systems for display and input\n */\nexport type CoordinateSystem = 'dd' | 'ddm' | 'dms' | 'mgrs' | 'utm';\n\n/**\n * Short labels for coordinate formats (used in popover)\n */\nexport const COORDINATE_FORMAT_LABELS: Record<CoordinateSystem, string> = {\n  dd: 'DD',\n  ddm: 'DDM',\n  dms: 'DMS',\n  mgrs: 'MGRS',\n  utm: 'UTM',\n};\n\n/**\n * Full names for coordinate formats (used in popover titles/descriptions)\n */\nexport const COORDINATE_FORMAT_NAMES: Record<CoordinateSystem, string> = {\n  dd: 'Decimal Degrees',\n  ddm: 'Degrees Decimal Minutes',\n  dms: 'Degrees Minutes Seconds',\n  mgrs: 'Military Grid Reference System',\n  utm: 'Universal Transverse Mercator',\n};\n\n/**\n * All supported coordinate systems\n * Use this constant instead of hardcoding the array in multiple places\n */\nexport const COORDINATE_SYSTEMS: readonly CoordinateSystem[] = [\n  'dd',\n  'dms',\n  'ddm',\n  'mgrs',\n  'utm',\n] as const;\n\n/**\n * Coordinate value in Decimal Degrees format (internal representation)\n * All coordinate values are normalized to this format internally\n */\nexport type CoordinateValue = {\n  lat: number; // Latitude in decimal degrees (-90 to 90)\n  lon: number; // Longitude in decimal degrees (-180 to 180)\n};\n\n/**\n * Types of segments in a coordinate input\n */\nexport type SegmentType =\n  | 'numeric'\n  | 'directional'\n  | 'literal'\n  | 'alphanumeric';\n\n/**\n * Configuration for a single coordinate segment\n */\nexport type SegmentConfig = {\n  type: SegmentType;\n  /** Placeholder text shown when segment is empty */\n  placeholder?: string;\n  /** Maximum character length for the segment */\n  maxLength?: number;\n  /** Regex pattern for allowed characters */\n  allowedChars?: string;\n  /** Fixed value for literal segments (e.g., \", \" or \"º\") */\n  value?: string;\n  /** Padding in CSS 'ch' units to add to the segment width (defaults to 0.5 if not specified) */\n  pad?: number;\n};\n\n/**\n * Result of parsing a pasted coordinate string\n */\nexport type ParsedCoordinateMatch = {\n  /** The coordinate system format that matched */\n  format: CoordinateSystem;\n  /** The coordinate value in DD format */\n  value: CoordinateValue;\n  /** Display string in the matched format */\n  displayString: string;\n};\n\n/**\n * State shared with child components through context\n */\nexport type CoordinateFieldState = {\n  segmentValues: string[];\n  format: CoordinateFieldProps['format'];\n  /**\n   * Current coordinate value in DD format\n   * - undefined: uncontrolled mode with no default value\n   * - null: controlled mode with empty/invalid value\n   * - CoordinateValue: valid coordinate\n   */\n  currentValue?: CoordinateValue | null;\n  /** Validation errors from @accelint/geo */\n  validationErrors: string[];\n  isDisabled: boolean;\n  isInvalid: boolean;\n  isRequired: boolean;\n  /** Size variant of the field */\n  size: CoordinateFieldProps['size'];\n  /** Function to register timeouts for cleanup on unmount */\n  registerTimeout: (timeoutId: NodeJS.Timeout) => void;\n};\n\n/**\n * Props for the CoordinateSegment component\n */\nexport type CoordinateSegmentProps = {\n  /** Current value of the segment */\n  value: string;\n  /** Callback when the segment value changes */\n  onChange: (value: string) => void;\n  /** Callback when the segment receives focus */\n  onFocus?: () => void;\n  /** Callback when the segment loses focus */\n  onBlur?: () => void;\n  /** Callback for keyboard events (used for navigation between segments) */\n  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;\n  /** Placeholder text to display when segment is empty */\n  placeholder?: string;\n  /** Maximum character length for the segment */\n  maxLength?: number;\n  /** Custom className for styling */\n  className?: string;\n  /** Whether the segment is disabled */\n  isDisabled?: boolean;\n  /** Regex pattern for allowed characters (e.g., \"[0-9\\\\-\\\\.]\" for numeric, \"[NSEW]\" for directional) */\n  allowedChars?: string;\n  /** Ref to the input element for programmatic focus management */\n  segmentRef?: React.RefObject<HTMLInputElement>;\n  /** Index of this segment in the parent field (for accessibility) */\n  segmentIndex?: number;\n  /** Total number of segments (for accessibility) */\n  totalSegments?: number;\n  /** Callback to trigger auto-advance to next segment */\n  onAutoAdvance?: () => void;\n  /** Callback to trigger auto-retreat to previous segment */\n  onAutoRetreat?: () => void;\n  /** Padding in CSS 'ch' units to add to the segment width (defaults to 0.5 if not specified) */\n  pad?: number;\n  /** Semantic accessibility label for the segment (e.g., \"Latitude degrees\") */\n  ariaLabel?: string;\n};\n\n/**\n * Props for the CoordinateField component\n *\n * Extends AriaTextFieldProps to inherit standard form field props (id, isDisabled, isRequired, etc.)\n */\nexport type CoordinateFieldProps = Omit<\n  AriaTextFieldProps,\n  | 'children'\n  | 'className'\n  | 'placeholder'\n  | 'type'\n  | 'pattern'\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  | 'name' // Not applicable to multi-segment fields\n> &\n  RefAttributes<HTMLDivElement> & {\n    /**\n     * Custom class names for component slots\n     */\n    classNames?: {\n      field?: string;\n      label?: LabelProps['className'];\n      control?: string;\n      input?: string;\n      segment?: string;\n      description?: string;\n      error?: FieldErrorProps['className'];\n      formatButton?: string;\n    };\n\n    /**\n     * Label text displayed above the input (medium size only)\n     */\n    label?: string;\n\n    /**\n     * Helper text displayed below the input\n     */\n    description?: string;\n\n    /**\n     * Error message to display when the field is invalid\n     */\n    errorMessage?: string;\n\n    /**\n     * Display format for coordinate input\n     * @default 'dd' (Decimal Degrees)\n     */\n    format?: CoordinateSystem;\n\n    /**\n     * Size variant of the field\n     * @default 'medium'\n     */\n    size?: 'small' | 'medium';\n\n    /**\n     * Whether to show the format button for copying coordinates in different formats\n     * @default true\n     */\n    showFormatButton?: boolean;\n\n    /**\n     * Controlled value in Decimal Degrees format\n     * - undefined: uncontrolled mode\n     * - null: controlled mode with no/invalid value\n     * - CoordinateValue: controlled mode with valid value\n     */\n    value?: CoordinateValue | null;\n\n    /**\n     * Default uncontrolled value in Decimal Degrees format\n     */\n    defaultValue?: CoordinateValue;\n\n    /**\n     * Callback fired when the coordinate value changes\n     * @param value - The new coordinate value in DD format, or null if invalid\n     */\n    onChange?:\n      | Dispatch<SetStateAction<CoordinateValue | null>>\n      | ((value: CoordinateValue | null) => void);\n\n    /**\n     * Callback fired when validation or paste errors occur\n     * @param message - Error message (\"Invalid coordinate value\" for validation errors, \"Invalid coordinate format\" for paste errors)\n     * @param context - Additional context about the error:\n     *   - Validation errors: `{ errors: string[], format: string, segments: string[] }`\n     *   - Paste errors: `{ pastedText: string }`\n     */\n    onError?: (message: string, context?: Record<string, unknown>) => void;\n  };\n"]}

package/dist/components/coordinate-field/width-utils.d.ts

@@ -0,0 +1,29 @@
+import { SegmentConfig } from './types.js';
+import 'react';
+import 'react-aria-components';
+
+/**
+ * Layout spacing constants for coordinate field width calculations.
+ * All values are in character widths (ch units) to ensure consistent sizing
+ * with monospace coordinate values.
+ */
+/** Gap spacing between segments (0.5rem = ~0.5ch per gap) */
+declare const SEGMENT_GAP_WIDTH = 0.5;
+/** Container padding (px-s = 0.5rem on each side = ~1ch total) */
+declare const CONTAINER_PADDING_WIDTH = 2;
+/** Format button width (icon button is roughly 2.5-3ch) */
+declare const FORMAT_BUTTON_WIDTH = 3.5;
+/** Gap between input and button (gap-m = 1rem = ~1ch) */
+declare const INPUT_BUTTON_GAP = 1.5;
+/**
+ * Calculates the maximum width needed for the coordinate field control container.
+ * This keeps the outlined container at a fixed width while segments animate.
+ *
+ * @param editableSegmentConfigs - Array of editable segment configurations
+ * @param segmentConfigs - Array of all segment configurations (including literals)
+ * @param showFormatButton - Whether the format button is displayed
+ * @returns The calculated width as a CSS string (e.g., "25ch")
+ */
+declare function calculateMaxControlWidth(editableSegmentConfigs: SegmentConfig[], segmentConfigs: SegmentConfig[], showFormatButton: boolean): string;
+
+export { CONTAINER_PADDING_WIDTH, FORMAT_BUTTON_WIDTH, INPUT_BUTTON_GAP, SEGMENT_GAP_WIDTH, calculateMaxControlWidth };

package/dist/components/coordinate-field/width-utils.js

@@ -0,0 +1,2 @@
+const s=.5,l=2,I=3.5,W=1.5;function u(T,e,o){const c=T.reduce((t,n)=>{const N=n.maxLength||0,d=n.pad??.5;return t+N+d},0),a=e.filter(t=>t.type==="literal").reduce((t,n)=>t+(n.value?.length||0),0),p=Math.max(0,e.length-1)*.5,r=2,i=o?3.5:0,_=o?1.5:0;return `${c+a+p+r+i+_}ch`}export{l as CONTAINER_PADDING_WIDTH,I as FORMAT_BUTTON_WIDTH,W as INPUT_BUTTON_GAP,s as SEGMENT_GAP_WIDTH,u as calculateMaxControlWidth};//# sourceMappingURL=width-utils.js.map
+//# sourceMappingURL=width-utils.js.map

package/dist/components/coordinate-field/width-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/coordinate-field/width-utils.ts"],"names":["SEGMENT_GAP_WIDTH","CONTAINER_PADDING_WIDTH","FORMAT_BUTTON_WIDTH","INPUT_BUTTON_GAP","calculateMaxControlWidth","editableSegmentConfigs","segmentConfigs","showFormatButton","segmentWidth","sum","config","maxLen","padding","literalWidth","c","gapWidth","paddingWidth","buttonWidth","inputButtonGap"],"mappings":"AAqBO,MAAMA,EAAoB,EAAA,CAGpBC,CAAAA,CAA0B,EAG1BC,CAAAA,CAAsB,GAAA,CAGtBC,EAAmB,IAWzB,SAASC,CAAAA,CACdC,CAAAA,CACAC,EACAC,CAAAA,CACQ,CAER,MAAMC,CAAAA,CAAeH,CAAAA,CAAuB,OAAO,CAACI,CAAAA,CAAKC,CAAAA,GAAW,CAClE,MAAMC,CAAAA,CAASD,CAAAA,CAAO,WAAa,CAAA,CAC7BE,CAAAA,CAAUF,EAAO,GAAA,EAAO,EAAA,CAC9B,OAAOD,CAAAA,CAAME,EAASC,CACxB,CAAA,CAAG,CAAC,CAAA,CAGEC,CAAAA,CAAeP,EAClB,MAAA,CAAQQ,CAAAA,EAAMA,CAAAA,CAAE,IAAA,GAAS,SAAS,CAAA,CAClC,MAAA,CAAO,CAACL,CAAAA,CAAKK,CAAAA,GAAML,GAAOK,CAAAA,CAAE,KAAA,EAAO,MAAA,EAAU,CAAA,CAAA,CAAI,CAAC,CAAA,CAK/CC,CAAAA,CADW,KAAK,GAAA,CAAI,CAAA,CAAGT,EAAe,MAAA,CAAS,CAAC,CAAA,CAC1B,EAAA,CAGtBU,EAAe,CAAA,CAGfC,CAAAA,CAAcV,EAAmB,GAAA,CAAsB,CAAA,CAGvDW,EAAiBX,CAAAA,CAAmB,GAAA,CAAmB,CAAA,CAE7D,OAAO,GAAGC,CAAAA,CAAeK,CAAAA,CAAeE,EAAWC,CAAAA,CAAeC,CAAAA,CAAcC,CAAc,CAAA,EAAA,CAChG","file":"width-utils.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 type { SegmentConfig } from './types';\n\n/**\n * Layout spacing constants for coordinate field width calculations.\n * All values are in character widths (ch units) to ensure consistent sizing\n * with monospace coordinate values.\n */\n\n/** Gap spacing between segments (0.5rem = ~0.5ch per gap) */\nexport const SEGMENT_GAP_WIDTH = 0.5;\n\n/** Container padding (px-s = 0.5rem on each side = ~1ch total) */\nexport const CONTAINER_PADDING_WIDTH = 2;\n\n/** Format button width (icon button is roughly 2.5-3ch) */\nexport const FORMAT_BUTTON_WIDTH = 3.5;\n\n/** Gap between input and button (gap-m = 1rem = ~1ch) */\nexport const INPUT_BUTTON_GAP = 1.5;\n\n/**\n * Calculates the maximum width needed for the coordinate field control container.\n * This keeps the outlined container at a fixed width while segments animate.\n *\n * @param editableSegmentConfigs - Array of editable segment configurations\n * @param segmentConfigs - Array of all segment configurations (including literals)\n * @param showFormatButton - Whether the format button is displayed\n * @returns The calculated width as a CSS string (e.g., \"25ch\")\n */\nexport function calculateMaxControlWidth(\n  editableSegmentConfigs: SegmentConfig[],\n  segmentConfigs: SegmentConfig[],\n  showFormatButton: boolean,\n): string {\n  // Sum all editable segment max widths with their padding\n  const segmentWidth = editableSegmentConfigs.reduce((sum, config) => {\n    const maxLen = config.maxLength || 0;\n    const padding = config.pad ?? 0.5;\n    return sum + maxLen + padding;\n  }, 0);\n\n  // Calculate width of literal characters (colons, spaces, etc.)\n  const literalWidth = segmentConfigs\n    .filter((c) => c.type === 'literal')\n    .reduce((sum, c) => sum + (c.value?.length || 0), 0);\n\n  // Add gap spacing between segments\n  // Number of gaps = number of segments - 1 (minimum 0)\n  const gapCount = Math.max(0, segmentConfigs.length - 1);\n  const gapWidth = gapCount * SEGMENT_GAP_WIDTH;\n\n  // Add container padding\n  const paddingWidth = CONTAINER_PADDING_WIDTH;\n\n  // Add format button width if shown\n  const buttonWidth = showFormatButton ? FORMAT_BUTTON_WIDTH : 0;\n\n  // Add gap between input and button if button is shown\n  const inputButtonGap = showFormatButton ? INPUT_BUTTON_GAP : 0;\n\n  return `${segmentWidth + literalWidth + gapWidth + paddingWidth + buttonWidth + inputButtonGap}ch`;\n}\n"]}

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

@@ -2,8 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DateValue } from '@internationalized/date';
 import { DateFieldProps } from './types.js';
 import 'react-aria-components';
-import 'tailwind-variants';
-import './styles.js';
 
 /**
  * DateField - A comprehensive date input component with segmented editing

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

@@ -1,4 +1,4 @@
 'use client';
 
-import {jsx,jsxs,Fragment}from'react/jsx-runtime';import v from'@accelint/icons/calendar';import'client-only';import {DateField,composeRenderProps,DateInput,DateSegment,Text,FieldError}from'react-aria-components';import {Icon}from'../icon/index.js';import {Label}from'../label/index.js';import {DateFieldStyles,DateFieldStylesDefaults}from'./styles.js';const{field:k,label:q,control:B,input:G,segment:Y,description:Z,error:w}=DateFieldStyles(),z=["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"];function $({classNames:i,description:s,errorMessage:F,inputProps:A,label:n,size:o="medium",shortMonth:t=DateFieldStylesDefaults.shortMonth,shouldForceLeadingZeros:b=true,isDisabled:y,isInvalid:m,isRequired:u,...N}){const c=F||null,p=o==="small";return jsx(DateField,{...N,className:composeRenderProps(i?.field,r=>k({className:r,shortMonth:t})),shouldForceLeadingZeros:b,isDisabled:y,isInvalid:m||(c?true:void 0),isRequired:u,"aria-label":n,"data-size":o,children:({isDisabled:r})=>jsxs(Fragment,{children:[!p&&n&&jsx(Label,{className:q({className:i?.label,shortMonth:t}),isDisabled:r,isRequired:u,children:n}),jsxs("div",{className:B({className:i?.control,shortMonth:t}),children:[o==="medium"&&jsx(Icon,{children:jsx(v,{})}),jsx(DateInput,{...A,className:composeRenderProps(i?.input,a=>G({className:a,shortMonth:t})),children:a=>a.type==="literal"?jsx(Fragment,{children:a.text===":"?":":null}):jsx(DateSegment,{className:composeRenderProps(i?.segment,d=>Y({className:d,shortMonth:t})),segment:a,children:({placeholder:d,text:T,value:I,isFocused:S,isPlaceholder:g})=>g?d:a.type==="month"&&t&&!S?z[(I??0)-1]:T})})]}),s&&(!(p||m)||r)&&jsx(Text,{className:Z({className:i?.description,shortMonth:t}),slot:"description",children:s}),jsx(FieldError,{className:composeRenderProps(i?.error,a=>w({className:a,shortMonth:t})),children:c})]})})}export{$ as DateField};//# sourceMappingURL=index.js.map
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import'client-only';import {clsx}from'@accelint/design-foundation/lib/utils';import h from'@accelint/icons/calendar';import {DateField,composeRenderProps,DateInput,DateSegment,Text,FieldError}from'react-aria-components';import {Icon}from'../icon/index.js';import {Label}from'../label/index.js';import r from'./styles.module.css';const V=["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"];function w({classNames:i,description:m,errorMessage:b,inputProps:y,label:n,size:d="medium",shortMonth:u=true,shouldForceLeadingZeros:T=true,isDisabled:x,isInvalid:p,isRequired:c,...I}){const f=b||null,D=d==="small";return jsx(DateField,{...I,className:composeRenderProps(i?.field,o=>clsx("group/date-field",r.field,o)),shouldForceLeadingZeros:T,isDisabled:x,isInvalid:p||(f?true:void 0),isRequired:c,"aria-label":n,"data-size":d,children:({isDisabled:o})=>jsxs(Fragment,{children:[!D&&n&&jsx(Label,{className:clsx(r.label,i?.label),isDisabled:o,isRequired:c,children:n}),jsxs("div",{className:clsx(r.control,i?.control),children:[d==="medium"&&jsx(Icon,{children:jsx(h,{})}),jsx(DateInput,{...y,className:composeRenderProps(i?.input,e=>clsx(r.input,e)),children:e=>e.type==="literal"?jsx(Fragment,{children:e.text===":"?":":null}):jsx(DateSegment,{className:composeRenderProps(i?.segment,s=>clsx(r.segment,e.type==="month"&&u&&r.shortMonth,s)),segment:e,children:({placeholder:s,text:g,value:v,isFocused:E,isPlaceholder:L})=>L?s:e.type==="month"&&u&&!E?V[(v??0)-1]:g})})]}),m&&(!(D||p)||o)&&jsx(Text,{className:clsx(r.description,i?.description),slot:"description",children:m}),jsx(FieldError,{className:composeRenderProps(i?.error,e=>clsx(r.error,e)),children:f})]})})}export{w 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":["control","input","description","DateFieldStyles","V","classNames","shortMonth","DateFieldStylesDefaults","O","shouldForceLeadingZeros","isInvalidProp","isRequired","isSmall","size","AriaDateField","rest","x","className","field","l","isDisabled","labelProp","Label","D","label","e","U","f","jsx","AriaDateInput","composeRenderProps","E","Fragment","segmentProp","DateSegment","R","placeholder","isFocused","months","descriptionProp","AriaText","error"],"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';\n\nimport Calendar from '@accelint/icons/calendar';\nimport type { DateValue } from '@internationalized/date';\nimport 'client-only';\nimport {\n  DateField as AriaDateField,\n  DateInput as AriaDateInput,\n  Text as AriaText,\n  composeRenderProps,\n  DateSegment,\n  FieldError,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport { DateFieldStyles, DateFieldStylesDefaults } from './styles';\nimport type { DateFieldProps } from './types';\n\nconst { field, label, control, input, segment, description, error } =\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\n/**\n * DateField - A comprehensive date input component with segmented editing\n *\n * Provides accessible date input functionality with separate segments for day,\n * month, and year. Includes calendar icon, validation states, and international\n * date format support with keyboard navigation between segments.\n *\n * @example\n * // Basic date field\n * <DateField label=\"Birth Date\" />\n *\n * @example\n * // Date field with validation\n * <DateField\n *   label=\"Event Date\"\n *   isRequired\n *   isInvalid={hasError}\n *   errorMessage=\"Please select a valid date\"\n * />\n *\n * @example\n * // Date field with custom formatting\n * <DateField\n *   label=\"Meeting Date\"\n *   shortMonth={false}\n *   placeholder=\"Select meeting date\"\n * />\n *\n * @example\n * // Compact date field\n * <DateField\n *   label=\"Due Date\"\n *   size=\"small\"\n *   description=\"When is this task due?\"\n * />\n *\n * @example\n * // Controlled date field\n * <DateField\n *   label=\"Selected Date\"\n *   value={selectedDate}\n *   onChange={setSelectedDate}\n * />\n */\nexport function DateField<T extends DateValue>({\n  classNames,\n  description: descriptionProp,\n  errorMessage: errorMessageProp,\n  inputProps,\n  label: labelProp,\n  size = 'medium',\n  shortMonth = DateFieldStylesDefaults.shortMonth,\n  shouldForceLeadingZeros = true,\n  isDisabled,\n  isInvalid: isInvalidProp,\n  isRequired,\n  ...rest\n}: DateFieldProps<T>) {\n  const errorMessage = errorMessageProp || null; // Protect against empty string\n  const isSmall = size === 'small';\n\n  return (\n    <AriaDateField<T>\n      {...rest}\n      className={composeRenderProps(classNames?.field, (className) =>\n        field({ className, shortMonth }),\n      )}\n      shouldForceLeadingZeros={shouldForceLeadingZeros}\n      isDisabled={isDisabled}\n      isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n      isRequired={isRequired}\n      aria-label={labelProp}\n      data-size={size}\n    >\n      {(\n        { isDisabled }, // Rely on internal state, not props, since state could differ from props\n      ) => (\n        <>\n          {!isSmall && labelProp && (\n            <Label\n              className={label({ className: classNames?.label, shortMonth })}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n            >\n              {labelProp}\n            </Label>\n          )}\n          <div\n            className={control({ className: classNames?.control, shortMonth })}\n          >\n            {size === 'medium' && (\n              <Icon>\n                <Calendar />\n              </Icon>\n            )}\n            <AriaDateInput\n              {...inputProps}\n              className={composeRenderProps(classNames?.input, (className) =>\n                input({\n                  className,\n                  shortMonth,\n                }),\n              )}\n            >\n              {(segmentProp) => {\n                // Remove extra space and punctuation from input display\n                if (segmentProp.type === 'literal') {\n                  return <>{segmentProp.text === ':' ? ':' : null}</>;\n                }\n\n                return (\n                  <DateSegment\n                    className={composeRenderProps(\n                      classNames?.segment,\n                      (className) => segment({ className, shortMonth }),\n                    )}\n                    segment={segmentProp}\n                  >\n                    {({\n                      placeholder,\n                      text,\n                      value,\n                      isFocused,\n                      isPlaceholder,\n                    }) => {\n                      if (isPlaceholder) {\n                        return placeholder;\n                      }\n\n                      return segmentProp.type === 'month' &&\n                        shortMonth &&\n                        !isFocused\n                        ? months[(value ?? 0) - 1]\n                        : text;\n                    }}\n                  </DateSegment>\n                );\n              }}\n            </AriaDateInput>\n          </div>\n          {descriptionProp && (!(isSmall || isInvalidProp) || isDisabled) && (\n            <AriaText\n              className={description({\n                className: classNames?.description,\n                shortMonth,\n              })}\n              slot='description'\n            >\n              {descriptionProp}\n            </AriaText>\n          )}\n          <FieldError\n            className={composeRenderProps(classNames?.error, (className) =>\n              error({ className, shortMonth }),\n            )}\n          >\n            {errorMessage}\n          </FieldError>\n        </>\n      )}\n    </AriaDateField>\n  );\n}\n"]}
+{"version":3,"sources":["../../../src/components/date-field/index.tsx"],"names":["labelProp","shortMonth","isSmall","size","jsx","AriaDateField","classNames","className","styles","isRequired","Fragment","Label","clsx","a","isDisabled","t","J","AriaDateInput","composeRenderProps","l","segmentProp","A","DateSegment","S","text","isFocused","isPlaceholder","placeholder","value","descriptionProp","isInvalidProp","AriaText","R","C","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';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport Calendar from '@accelint/icons/calendar';\nimport {\n  DateField as AriaDateField,\n  DateInput as AriaDateInput,\n  Text as AriaText,\n  composeRenderProps,\n  DateSegment,\n  FieldError,\n} from 'react-aria-components';\nimport { Icon } from '../icon';\nimport { Label } from '../label';\nimport styles from './styles.module.css';\nimport type { DateValue } from '@internationalized/date';\nimport type { DateFieldProps } from './types';\n\nconst months = [\n  'JAN',\n  'FEB',\n  'MAR',\n  'APR',\n  'MAY',\n  'JUN',\n  'JUL',\n  'AUG',\n  'SEP',\n  'OCT',\n  'NOV',\n  'DEC',\n];\n\n/**\n * DateField - A comprehensive date input component with segmented editing\n *\n * Provides accessible date input functionality with separate segments for day,\n * month, and year. Includes calendar icon, validation states, and international\n * date format support with keyboard navigation between segments.\n *\n * @example\n * // Basic date field\n * <DateField label=\"Birth Date\" />\n *\n * @example\n * // Date field with validation\n * <DateField\n *   label=\"Event Date\"\n *   isRequired\n *   isInvalid={hasError}\n *   errorMessage=\"Please select a valid date\"\n * />\n *\n * @example\n * // Date field with custom formatting\n * <DateField\n *   label=\"Meeting Date\"\n *   shortMonth={false}\n *   placeholder=\"Select meeting date\"\n * />\n *\n * @example\n * // Compact date field\n * <DateField\n *   label=\"Due Date\"\n *   size=\"small\"\n *   description=\"When is this task due?\"\n * />\n *\n * @example\n * // Controlled date field\n * <DateField\n *   label=\"Selected Date\"\n *   value={selectedDate}\n *   onChange={setSelectedDate}\n * />\n */\nexport function DateField<T extends DateValue>({\n  classNames,\n  description: descriptionProp,\n  errorMessage: errorMessageProp,\n  inputProps,\n  label: labelProp,\n  size = 'medium',\n  shortMonth = true,\n  shouldForceLeadingZeros = true,\n  isDisabled,\n  isInvalid: isInvalidProp,\n  isRequired,\n  ...rest\n}: DateFieldProps<T>) {\n  const errorMessage = errorMessageProp || null; // Protect against empty string\n  const isSmall = size === 'small';\n\n  return (\n    <AriaDateField<T>\n      {...rest}\n      className={composeRenderProps(classNames?.field, (className) =>\n        clsx('group/date-field', styles.field, className),\n      )}\n      shouldForceLeadingZeros={shouldForceLeadingZeros}\n      isDisabled={isDisabled}\n      isInvalid={isInvalidProp || (errorMessage ? true : undefined)} // Leave uncontrolled if possible to fallback to validation state\n      isRequired={isRequired}\n      aria-label={labelProp}\n      data-size={size}\n    >\n      {(\n        { isDisabled }, // Rely on internal state, not props, since state could differ from props\n      ) => (\n        <>\n          {!isSmall && labelProp && (\n            <Label\n              className={clsx(styles.label, classNames?.label)}\n              isDisabled={isDisabled}\n              isRequired={isRequired}\n            >\n              {labelProp}\n            </Label>\n          )}\n          <div className={clsx(styles.control, classNames?.control)}>\n            {size === 'medium' && (\n              <Icon>\n                <Calendar />\n              </Icon>\n            )}\n            <AriaDateInput\n              {...inputProps}\n              className={composeRenderProps(classNames?.input, (className) =>\n                clsx(styles.input, className),\n              )}\n            >\n              {(segmentProp) => {\n                // Remove extra space and punctuation from input display\n                if (segmentProp.type === 'literal') {\n                  return <>{segmentProp.text === ':' ? ':' : null}</>;\n                }\n\n                return (\n                  <DateSegment\n                    className={composeRenderProps(\n                      classNames?.segment,\n                      (className) =>\n                        clsx(\n                          styles.segment,\n                          segmentProp.type === 'month' &&\n                            shortMonth &&\n                            styles.shortMonth,\n                          className,\n                        ),\n                    )}\n                    segment={segmentProp}\n                  >\n                    {({\n                      placeholder,\n                      text,\n                      value,\n                      isFocused,\n                      isPlaceholder,\n                    }) => {\n                      if (isPlaceholder) {\n                        return placeholder;\n                      }\n\n                      return segmentProp.type === 'month' &&\n                        shortMonth &&\n                        !isFocused\n                        ? months[(value ?? 0) - 1]\n                        : text;\n                    }}\n                  </DateSegment>\n                );\n              }}\n            </AriaDateInput>\n          </div>\n          {descriptionProp && (!(isSmall || isInvalidProp) || isDisabled) && (\n            <AriaText\n              className={clsx(styles.description, classNames?.description)}\n              slot='description'\n            >\n              {descriptionProp}\n            </AriaText>\n          )}\n          <FieldError\n            className={composeRenderProps(classNames?.error, (className) =>\n              clsx(styles.error, className),\n            )}\n          >\n            {errorMessage}\n          </FieldError>\n        </>\n      )}\n    </AriaDateField>\n  );\n}\n"]}

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

@@ -0,0 +1,103 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@reference '../../index.module.css';
+
+@layer components.l1 {
+  .field {
+    @apply gap-xs flex w-fit flex-col;
+  }
+
+  .control {
+    @apply gap-xs rounded-medium px-s py-xs outline-interactive fg-primary-bold flex w-full items-center outline;
+
+    @variant placeholder {
+      @apply fg-primary-muted;
+    }
+
+    @variant hover {
+      @apply outline-interactive-hover;
+    }
+
+    @variant focus-visible-within {
+      @apply outline-accent-primary-bold;
+    }
+
+    @variant pressed {
+      @apply outline-interactive-pressed;
+    }
+
+    @variant group-invalid/date-field {
+      @apply outline-serious-bold;
+    }
+
+    @variant group-disabled/date-field {
+      @apply fg-disabled outline-interactive-disabled;
+    }
+  }
+
+  .input {
+    @apply gap-xs font-display flex;
+
+    @variant group-size-medium/date-field {
+      @apply text-body-s;
+    }
+
+    @variant group-size-small/date-field {
+      @apply text-body-xs;
+    }
+  }
+
+  .segment {
+    @apply text-right;
+
+    @variant placeholder-shown {
+      @apply fg-primary-muted;
+    }
+
+    @variant focus-visible {
+      @apply fg-a11y-on-accent bg-accent-primary-bold outline-none;
+    }
+
+    @variant type-month {
+      @variant group-size-medium/date-field {
+        width: calc(2ch + (2 * var(--typography-body-s-spacing)));
+      }
+
+      @variant group-size-small/date-field {
+        width: calc(2ch + (2 * var(--typography-body-xs-spacing)));
+      }
+
+      &.shortMonth {
+        @variant group-size-medium/date-field {
+          width: calc(3ch + (3 * var(--typography-body-s-spacing)));
+        }
+
+        @variant group-size-small/date-field {
+          width: calc(3ch + (3 * var(--typography-body-xs-spacing)));
+        }
+      }
+    }
+  }
+
+  .description {
+    @apply fg-primary-muted text-body-xs;
+
+    @variant group-disabled/date-field {
+      @apply fg-disabled;
+    }
+  }
+
+  .error {
+    @apply fg-serious-bold text-body-xs;
+  }
+}

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

@@ -1,8 +1,6 @@
 import { DateValue, DateFieldProps as DateFieldProps$1, LabelProps, DateInputProps, DateSegmentProps, FieldErrorProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
-import { DateFieldStyles } from './styles.js';
 
-type DateFieldProps<T extends DateValue> = Omit<DateFieldProps$1<T>, 'children' | 'className' | 'placeholder'> & VariantProps<typeof DateFieldStyles> & {
+type DateFieldProps<T extends DateValue> = Omit<DateFieldProps$1<T>, 'children' | 'className' | 'placeholder'> & {
     classNames?: {
         field?: DateFieldProps$1<T>['className'];
         label?: LabelProps['className'];

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

@@ -3,8 +3,6 @@ import * as react from 'react';
 import { ContextValue } from 'react-aria-components';
 import { ProviderProps } from '../../lib/types.js';
 import { DetailsListProps } 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;

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

@@ -2,8 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DetailsListProps } from './types.js';
 import 'react';
 import 'react-aria-components';
-import 'tailwind-variants';
-import './styles.js';
 
 /**
  * A semantic details list component for displaying metadata in key-value pairs.

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

@@ -1,2 +1,4 @@
-import {jsx}from'react/jsx-runtime';import'client-only';import {useContextProps,TextContext,DEFAULT_SLOT}from'react-aria-components';import {DetailsListContext}from'./context.js';import {DetailsListStyles,DetailsListStylesDefaults}from'./styles.js';const{list:L,label:p,value:N}=DetailsListStyles();function C({ref:e,...s}){[s,e]=useContextProps(s,e??null,DetailsListContext);const{children:i,classNames:t,align:l=DetailsListStylesDefaults.align,...o}=s;return jsx(TextContext,{value:{slots:{[DEFAULT_SLOT]:{},label:{className:p({className:t?.label,align:l})},value:{className:N({className:t?.value,align:l})}}},children:jsx("dl",{...o,className:L({className:t?.list,align:l}),children:i})})}export{C as DetailsList};//# sourceMappingURL=index.js.map
+'use client';
+
+import {jsx}from'react/jsx-runtime';import'client-only';import {clsx}from'@accelint/design-foundation/lib/utils';import {useContextProps,TextContext,DEFAULT_SLOT}from'react-aria-components';import {DetailsListContext}from'./context.js';import t from'./styles.module.css';function y({ref:i,...l}){[l,i]=useContextProps(l,i??null,DetailsListContext);const{children:m,classNames:s,align:o="justify",...r}=l;return jsx(TextContext,{value:{slots:{[DEFAULT_SLOT]:{},label:{className:clsx(t.label,t[o],s?.label)},value:{className:clsx(t.value,t[o],s?.value)}}},children:jsx("dl",{...r,className:clsx(t.list,s?.list),children:m})})}export{y as DetailsList};//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/details-list/index.tsx"],"names":["label","value","u","ref","props","useContextProps","r","DetailsListContext","c","align","DetailsListStylesDefaults","D","jsx","a","n","DEFAULT_SLOT","m"],"mappings":"yPAuBQ,KAAM,CAAA,IAAA,CAAAA,CAAAA,CAAO,KAAA,CAAAC,CAAM,CAAA,KA+BpB,CAAA,CAAA,CAAA,CAAAC,iBAAA,EAAA,CAAA,SAAuBC,CAAK,CAAA,CAAA,GAAS,CAAqB,CAC/D,CAACC,GAAU,CAAA,CAAIC,CAAAA,CAAgBD,CAAAA,CAAOD,CAAAA,CAAAA,CAAO,CAAAG,eAAA,CAAA,CAAA,CAAMC,CAAkB,EAErE,IAAA,CAAMC,kBACJ,CAAA,CAAA,KAAA,CAAA,QACA,CAAA,CAAA,CAAA,UACA,CAAAC,CAAAA,CAAQC,KAA0B,CAAA,CAAA,CAClCC,yBAAA,CAAA,KACEP,CAEJ,GAAA,CAAA,CAAA,CAAA,CACEQ,CAAAA,OACEC,GAAA,CAAAC,WAAO,CACL,CAAA,KAAO,CACL,CAACC,KAAgB,CACjB,CAAA,CAAAC,YAAA,EAAA,EAAS,CAAA,KAAA,CAAA,CAAA,SAAmB,CAAA,CAAA,CAAA,CAAA,SAAuB,CAAA,CAAO,EAAA,KAAM,CAAC,KACjE,CAAA,CAAA,CAAA,CAAO,CAAE,CAAA,KAAA,CAAA,CAAA,SAAmB,CAAA,CAAA,CAAA,CAAA,SAAuB,CAAA,CAAO,EAAA,KAAM,CAAC,KAIrE,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,QAAC,CAAIH,GAAA,CAAA,IAAS,CAAA,CAAA,GAAA,CAAA,CAAA,SAAkB,CAAA,CAAA,CAAA,CAAA,SAAuB,CAAM,CAAA,EAAA,IAAM,CAAC,KACjE,CAAA,CAAA,CAAA,CAAA,CAAA,QAIT,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'use client';\n\nimport 'client-only';\nimport {\n  DEFAULT_SLOT,\n  TextContext,\n  useContextProps,\n} from 'react-aria-components';\nimport { DetailsListContext } from './context';\nimport { DetailsListStyles, DetailsListStylesDefaults } from './styles';\nimport type { DetailsListProps } from './types';\n\nconst { list, label, value } = DetailsListStyles();\n\n/**\n * A semantic details list component for displaying metadata in key-value pairs.\n * Uses CSS Grid layout with labels in the first column and values in the second column.\n * Perfect for map object details, user profiles, or any structured information.\n *\n * @example\n * ```tsx\n * <DetailsList align=\"left\">\n *   <DetailsListLabel>Key</DetailsListLabel>\n *   <DetailsListValue>Value</DetailsListValue>\n *\n *   <DetailsListLabel>Ships</DetailsListLabel>\n *   <DetailsListValue>Millennium Falcon</DetailsListValue>\n *   <DetailsListValue>USS Enterprise NCC-1701</DetailsListValue>\n *   <DetailsListValue>Serenity</DetailsListValue>\n *\n *   <DetailsListLabel>Coordinates</DetailsListLabel>\n *   <DetailsListValue>\n *     <div>Great Pyramid of Giza: 29°58'44\" N 31°08'02\" E</div>\n *     <div>Machu Picchu: 13°09'47\" S 72°32'41\" W</div>\n *     <div>Colosseum: 41°53'24\" N 12°29'32\" E</div>\n *     <div>Taj Mahal: 27°10'30\" N 78°02'31\" E</div>\n *   </DetailsListValue>\n * </DetailsList>\n * ```\n * ## Child Component Behavior\n * - **DetailsListLabel**: Minimum of 1\n * - **DetailsListValue**: Minimum of 1\n */\nexport function DetailsList({ ref, ...props }: DetailsListProps) {\n  [props, ref] = useContextProps(props, ref ?? null, DetailsListContext);\n\n  const {\n    children,\n    classNames,\n    align = DetailsListStylesDefaults.align,\n    ...rest\n  } = props;\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}\n"]}
+{"version":3,"sources":["../../../src/components/details-list/index.tsx"],"names":["ref","props","useContextProps","DetailsListContext","p","a","u","n","e","classNames","rest"],"mappings":"+QAqDO,WAAuBA,CAAAA,GAAK,CAAGC,CAAM,CAAA,GACzCA,EAAOD,CAAG,CAAA,CAAIE,CAAAA,CAAgBD,CAAAA,CAAOD,CAAAA,eAAAA,CAAO,CAAA,CAAA,CAAA,EAAMG,IAEnD,CAAAC,kBAAA,CAAA,CAAM,KAAE,CAAA,QAAU,CAAA,CAAA,CAAA,UAAY,CAAA,CAAA,CAAA,KAAQ,CAAA,CAAA,CAAA,SAAmB,CAAA,GAEzD,YAEIC,GAAA,CAAAC,WAAA,CAAA,CAAA,KACE,CAAA,CAAA,KACe,CAAG,CAAC,CAAAC,YACjB,EAAA,EAAA,CAAA,KACE,CAAA,CAAA,SAAuB,CAAAC,IAAA,CAAA,CAAA,CAAA,KAAmB,CAAGC,CAAAA,CAAAA,CAAY,CAAA,CAAA,CAAA,EAAK,KAEhE,CAAA,CAAA,CAAA,KACE,CAAA,CAAA,SAAuB,CAAAD,IAAA,CAAA,CAAA,CAAA,KAAmB,CAAGC,CAAAA,CAAAA,CAAY,KAAK,KAKpE,CAAA,CAAA,CAAA,CAAA,CAAA,iBAAQC,CAAAA,CAAM,GAAA,CAAA,CAAA,SAAuB,CAAAF,IAAA,CAAA,CAAA,CAAMC,IAAY,CAAA,CAAA,EAAI,IACxD,CAAA,CAAA,QAEL,CAEJ,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'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport {\n  DEFAULT_SLOT,\n  TextContext,\n  useContextProps,\n} from 'react-aria-components';\nimport { DetailsListContext } from './context';\nimport styles from './styles.module.css';\nimport type { DetailsListProps } from './types';\n\n/**\n * A semantic details list component for displaying metadata in key-value pairs.\n * Uses CSS Grid layout with labels in the first column and values in the second column.\n * Perfect for map object details, user profiles, or any structured information.\n *\n * @example\n * ```tsx\n * <DetailsList align=\"left\">\n *   <DetailsListLabel>Key</DetailsListLabel>\n *   <DetailsListValue>Value</DetailsListValue>\n *\n *   <DetailsListLabel>Ships</DetailsListLabel>\n *   <DetailsListValue>Millennium Falcon</DetailsListValue>\n *   <DetailsListValue>USS Enterprise NCC-1701</DetailsListValue>\n *   <DetailsListValue>Serenity</DetailsListValue>\n *\n *   <DetailsListLabel>Coordinates</DetailsListLabel>\n *   <DetailsListValue>\n *     <div>Great Pyramid of Giza: 29°58'44\" N 31°08'02\" E</div>\n *     <div>Machu Picchu: 13°09'47\" S 72°32'41\" W</div>\n *     <div>Colosseum: 41°53'24\" N 12°29'32\" E</div>\n *     <div>Taj Mahal: 27°10'30\" N 78°02'31\" E</div>\n *   </DetailsListValue>\n * </DetailsList>\n * ```\n * ## Child Component Behavior\n * - **DetailsListLabel**: Minimum of 1\n * - **DetailsListValue**: Minimum of 1\n */\nexport function DetailsList({ ref, ...props }: DetailsListProps) {\n  [props, ref] = useContextProps(props, ref ?? null, DetailsListContext);\n\n  const { children, classNames, align = 'justify', ...rest } = props;\n\n  return (\n    <TextContext\n      value={{\n        slots: {\n          [DEFAULT_SLOT]: {},\n          label: {\n            className: clsx(styles.label, styles[align], classNames?.label),\n          },\n          value: {\n            className: clsx(styles.value, styles[align], classNames?.value),\n          },\n        },\n      }}\n    >\n      <dl {...rest} className={clsx(styles.list, classNames?.list)}>\n        {children}\n      </dl>\n    </TextContext>\n  );\n}\n"]}

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

@@ -2,8 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DetailsListLabelProps } from './types.js';
 import 'react';
 import 'react-aria-components';
-import 'tailwind-variants';
-import './styles.js';
 
 declare function DetailsListLabel(props: DetailsListLabelProps): react_jsx_runtime.JSX.Element;
 

package/dist/components/details-list/styles.module.css

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@reference '../../index.module.css';
+
+@layer components.l1 {
+  .list {
+    @apply gap-x-m font-display text-body-m grid;
+    grid-template-columns: auto 1fr;
+  }
+
+  .label {
+    @apply fg-primary-muted col-start-1;
+
+    &.left {
+      @apply text-left;
+    }
+
+    &.center {
+      @apply text-right;
+    }
+
+    &.justify {
+      @apply text-left;
+    }
+  }
+
+  .value {
+    @apply fg-primary-bold col-start-2;
+
+    &.left {
+      @apply text-left;
+    }
+
+    &.center {
+      @apply text-left;
+    }
+
+    &.justify {
+      @apply text-right;
+    }
+  }
+}

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

@@ -1,14 +1,13 @@
 import { ComponentPropsWithRef, RefAttributes } from 'react';
 import { TextProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
-import { DetailsListStyles } from './styles.js';
 
-type DetailsListProps = Omit<ComponentPropsWithRef<'dl'>, 'className'> & VariantProps<typeof DetailsListStyles> & {
+type DetailsListProps = Omit<ComponentPropsWithRef<'dl'>, 'className'> & {
     classNames?: {
         list?: string;
         label?: string;
         value?: string;
     };
+    align?: 'center' | 'justify' | 'left';
 };
 type DetailsListLabelProps = Omit<TextProps, 'elementType'> & RefAttributes<HTMLElement>;
 type DetailsListValueProps = Omit<TextProps, 'elementType'> & RefAttributes<HTMLElement>;

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

@@ -2,8 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DetailsListValueProps } from './types.js';
 import 'react';
 import 'react-aria-components';
-import 'tailwind-variants';
-import './styles.js';
 
 declare function DetailsListValue(props: DetailsListValueProps): react_jsx_runtime.JSX.Element;
 

package/dist/components/dialog/content.js

@@ -1,2 +1,4 @@
-import {jsx}from'react/jsx-runtime';import'client-only';import {DialogStyles}from'./styles.js';const{content:e}=DialogStyles();function m({children:o,className:t}){return jsx("div",{className:e({className:t}),children:o})}export{m as DialogContent};//# sourceMappingURL=content.js.map
+'use client';
+
+import {jsx}from'react/jsx-runtime';import'client-only';import {clsx}from'@accelint/design-foundation/lib/utils';import r from'./styles.module.css';function s({children:o,className:t}){return jsx("div",{className:clsx(r.content,t),children:o})}export{s as DialogContent};//# sourceMappingURL=content.js.map
 //# sourceMappingURL=content.js.map