@wallarm-org/design-system 0.11.0 → 0.12.0

package/dist/components/DateRangeInput/types.d.ts

@@ -0,0 +1,38 @@
+import type { FC } from 'react';
+import type { DateValue } from '@react-aria/datepicker';
+import type { RangeValue } from '@react-types/shared';
+import type { SvgIconProps } from '../../icons';
+export interface DateRangeBaseProps {
+    /** Optional icon component to display at the start of the input */
+    icon?: FC<SvgIconProps>;
+    /** Whether the input has an error state. Shows error styling when true */
+    error?: boolean;
+    /** Whether the input is disabled. Prevents user interaction when true */
+    disabled?: boolean;
+    /** Whether the input is read-only. Displays value but prevents editing */
+    readOnly?: boolean;
+    /** Placeholder text to show when no value is selected */
+    placeholder?: string;
+    /** Show dropdown for time selection with arrow navigation */
+    showTimeDropdown?: boolean;
+    /** Time interval in minutes for dropdown options. Default: 30 */
+    timeStep?: number;
+}
+export interface DateRangeInputProps extends DateRangeBaseProps {
+    /** Controlled value - range with start and end dates */
+    value?: RangeValue<DateValue> | null;
+    /** Default value for uncontrolled mode */
+    defaultValue?: RangeValue<DateValue> | null;
+    /** Callback fired when the range value changes */
+    onChange?: (value: RangeValue<DateValue> | null) => void;
+    /**
+     * Determines the smallest unit of time that can be edited.
+     * - 'day': Date only (default)
+     * - 'hour': Date with hours
+     * - 'minute': Date with hours and minutes
+     * - 'second': Date with hours, minutes, and seconds
+     */
+    granularity?: 'day' | 'hour' | 'minute' | 'second';
+    /** Hour cycle for time display: 12-hour or 24-hour format */
+    hourCycle?: 12 | 24;
+}

package/dist/components/DropdownMenu/DropdownMenuInput.js

@@ -1,8 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Search } from "../../icons/index.js";
-import { InputGroup } from "../InputGroup/InputGroup.js";
-import { InputGroupAddon } from "../InputGroup/InputGroupAddon.js";
-import { InputGroupInput } from "../InputGroup/InputGroupInput.js";
+import { Input } from "../Input/index.js";
+import { InputGroup, InputGroupAddon } from "../InputGroup/index.js";
 const DropdownMenuInput = (props)=>/*#__PURE__*/ jsx("div", {
         className: "mb-4",
         children: /*#__PURE__*/ jsxs(InputGroup, {
@@ -10,7 +9,7 @@ const DropdownMenuInput = (props)=>/*#__PURE__*/ jsx("div", {
                 /*#__PURE__*/ jsx(InputGroupAddon, {
                     children: /*#__PURE__*/ jsx(Search, {})
                 }),
-                /*#__PURE__*/ jsx(InputGroupInput, {
+                /*#__PURE__*/ jsx(Input, {
                     type: "text",
                     ...props
                 })

package/dist/components/Flex/Flex.d.ts

@@ -7,7 +7,7 @@ declare const flexVariants: (props?: ({
     align?: "end" | "baseline" | "start" | "center" | "stretch" | null | undefined;
     justify?: "end" | "start" | "center" | "between" | "around" | "evenly" | null | undefined;
     wrap?: "reverse" | "wrap" | "nowrap" | null | undefined;
-    gap?: 1 | 2 | 4 | 6 | 8 | 12 | 16 | 24 | 28 | 20 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
+    gap?: 1 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
     grow?: boolean | null | undefined;
     shrink?: boolean | null | undefined;
     fullWidth?: boolean | null | undefined;

package/dist/components/Input/Input.js

@@ -3,7 +3,7 @@ import { useFieldContext } from "@ark-ui/react/field";
 import { mergeProps } from "@ark-ui/react/utils";
 import { cn } from "../../utils/cn.js";
 import { inputVariants } from "./classes.js";
-const Input = ({ className, error = false, disabled = false, ...props })=>{
+const Input = ({ className, error = false, disabled = false, ref, ...props })=>{
     const field = useFieldContext();
     const mergedProps = mergeProps(field?.getInputProps(), props);
     return /*#__PURE__*/ jsx("input", {
@@ -14,7 +14,9 @@ const Input = ({ className, error = false, disabled = false, ...props })=>{
         }), className),
         disabled: disabled,
         "aria-invalid": Boolean(error),
-        "aria-disabled": disabled
+        "aria-disabled": disabled,
+        ref: ref,
+        "data-slot": "input"
     });
 };
 Input.displayName = 'Input';

package/dist/components/Input/classes.js

@@ -1,18 +1,10 @@
 import { cva } from "class-variance-authority";
-const inputVariants = cva([
-    'flex w-full px-12 rounded-8 border bg-component-input-bg',
-    'font-sans text-sm text-text-primary placeholder:text-text-secondary',
-    'shadow-xs transition-[color,border,box-shadow]',
-    'focus-visible:outline-none focus-visible:ring-3',
-    'disabled:cursor-not-allowed disabled:opacity-50'
-], {
+import { cn } from "../../utils/cn.js";
+const inputVariants = cva(cn('flex w-full px-12 rounded-8 border bg-component-input-bg', 'font-sans text-sm text-text-primary placeholder:text-text-secondary', 'shadow-xs transition-[color,border,box-shadow]', 'focus-visible:outline-none focus-visible:ring-3', 'disabled:aria-disabled:cursor-not-allowed disabled:aria-disabled:opacity-50'), {
     variants: {
         error: {
-            true: 'border-border-strong-danger hover:not-disabled:border-border-strong-danger hover:not-disabled:outline-none hover:not-disabled:ring-3 hover:not-disabled:ring-focus-destructive-hover focus-visible:ring-focus-destructive',
-            false: [
-                'border-border-primary hover:not-disabled:border-component-border-input-hover',
-                'focus-visible:not-disabled:border-border-strong-primary focus-visible:ring-focus-primary'
-            ]
+            true: cn('border-border-strong-danger', 'hover:not-disabled:border-border-strong-danger', 'hover:not-disabled:outline-none', 'hover:not-disabled:ring-3', 'hover:not-disabled:ring-focus-destructive-hover', 'focus-visible:ring-focus-destructive'),
+            false: cn('border-border-primary', 'hover:not-disabled:border-component-border-input-hover', 'focus-visible:not-disabled:border-border-strong-primary', 'focus-visible:ring-focus-primary')
         }
     }
 });

package/dist/components/InputGroup/InputGroup.js

@@ -7,7 +7,7 @@ const InputGroup = ({ 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(Test
             "data-slot": "input-group",
             "data-testid": testId,
             role: "group",
-            className: cn('group/input-group', 'w-full h-36 has-[>textarea]:h-auto', 'flex items-center border rounded-8 bg-component-input-bg relative', 'border border-border-primary outline-none shadow-xs transition-[color,border,box-shadow]', 'has-[[data-slot=input-group-control]:not(:disabled):not(:focus-visible)]:hover:border-component-border-input-hover', 'focus-visible:ring-focus-primary', 'has-[[data-slot=input-group-control]:focus-visible]:ring-3', 'has-[[data-slot=input-group-control]:focus-visible]:ring-focus-primary', 'has-[[data-slot=input-group-control]:focus-visible]:border-border-strong-primary', 'has-[[data-slot][aria-invalid=true]]:border-border-strong-danger', 'has-[[data-slot][aria-invalid=true]]:ring-focus-destructive', 'has-[[data-slot][aria-invalid=true]:not(:disabled)]:hover:border-border-strong-danger', 'has-[[data-slot][aria-invalid=true]:not(:disabled)]:hover:ring-3', 'has-[[data-slot][aria-invalid=true]:not(:disabled)]:hover:ring-focus-destructive-hover', 'has-[[data-slot][aria-invalid=true]:not(:disabled)]:[&>input]:hover:ring-0', 'has-[[data-slot=input-group-control]:disabled]:opacity-50', 'has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed'),
+            className: cn('group/input-group', 'w-full h-36 has-[>textarea]:h-auto', 'flex items-center border rounded-8 bg-component-input-bg relative', '**:data-[slot=input]:flex-1', '**:data-[slot=input]:rounded-none', '**:data-[slot=input]:border-0', '**:data-[slot=input]:bg-transparent', '**:data-[slot=input]:shadow-none', '**:data-[slot=input]:focus-visible:ring-0', '**:data-[slot=input]:focus-within:ring-0', 'border border-border-primary outline-none shadow-xs transition-[color,border,box-shadow]', 'has-[[data-slot=input]:not(:disabled):not([aria-disabled=true]):not(:focus-visible)]:hover:border-component-border-input-hover', 'focus-visible:ring-focus-primary', 'has-[[data-slot=input]:focus-visible]:ring-3', 'has-[[data-slot=input]:focus-visible]:ring-focus-primary', 'has-[[data-slot=input]:focus-visible]:border-border-strong-primary', 'focus-within:ring-focus-primary', 'has-[[data-slot=input]:focus-within]:ring-3', 'has-[[data-slot=input]:focus-within]:ring-focus-primary', 'has-[[data-slot=input]:focus-within]:border-border-strong-primary', 'has-[[data-slot][aria-invalid=true]]:border-border-strong-danger', 'has-[[data-slot][aria-invalid=true]]:ring-focus-destructive', 'has-[[data-slot][aria-invalid=true]:not(:disabled):not([aria-disabled=true])]:hover:border-border-strong-danger', 'has-[[data-slot][aria-invalid=true]:not(:disabled):not([aria-disabled=true])]:hover:ring-3', 'has-[[data-slot][aria-invalid=true]:not(:disabled):not([aria-disabled=true])]:hover:ring-focus-destructive-hover', 'has-[[data-slot][aria-invalid=true]:not(:disabled):not([aria-disabled=true])]:*:data-[slot=input]:hover:ring-0', 'has-[[data-slot=input]:disabled]:opacity-50', 'has-[[data-slot=input][aria-disabled=true]]:opacity-50', 'has-[[data-slot=input]:disabled]:cursor-not-allowed', 'has-[[data-slot=input][aria-disabled=true]]:cursor-not-allowed'),
             ...props
         })
     });

package/dist/components/InputGroup/InputGroupAddon.js

@@ -21,7 +21,7 @@ const inputGroupAddonVariants = cva(cn([
         },
         variant: {
             outline: 'px-12 bg-states-primary-default-alt border-border-primary',
-            ghost: '[&:not(:has([data-scope=select]))+input]:px-0'
+            ghost: '[&:not(:has([data-scope=select]))+[data-slot=input]]:px-0'
         }
     },
     defaultVariants: {

package/dist/components/InputGroup/InputGroupInput.d.ts

@@ -1,4 +1 @@
-import type { FC } from 'react';
-import { type InputProps } from '../Input';
-export type InputGroupInputProps = InputProps;
-export declare const InputGroupInput: FC<InputGroupInputProps>;
+export {};

package/dist/components/InputGroup/InputGroupInput.js

@@ -1,15 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { cn } from "../../utils/cn.js";
-import { useTestId } from "../../utils/testId.js";
-import { Input } from "../Input/index.js";
-const InputGroupInput = (props)=>{
-    const testId = useTestId('input');
-    return /*#__PURE__*/ jsx(Input, {
-        ...props,
-        className: cn('flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0'),
-        "data-slot": "input-group-control",
-        "data-testid": testId
-    });
-};
-InputGroupInput.displayName = 'InputGroupInput';
-export { InputGroupInput };

package/dist/components/InputGroup/index.d.ts

@@ -1,4 +1,3 @@
 export { InputGroup } from './InputGroup';
 export { InputGroupAddon } from './InputGroupAddon';
-export { InputGroupInput } from './InputGroupInput';
 export { InputGroupText } from './InputGroupText';

package/dist/components/InputGroup/index.js

@@ -1,5 +1,4 @@
 import { InputGroup } from "./InputGroup.js";
 import { InputGroupAddon } from "./InputGroupAddon.js";
-import { InputGroupInput } from "./InputGroupInput.js";
 import { InputGroupText } from "./InputGroupText.js";
-export { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText };
+export { InputGroup, InputGroupAddon, InputGroupText };

package/dist/components/SegmentedControl/SegmentedControlSeparator.d.ts

@@ -2,7 +2,7 @@ import type { ComponentRef, FC, Ref } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import { Separator, type SeparatorProps } from '../Separator';
 declare const segmentedControlSeparatorVariants: (props?: ({
-    mx?: 1 | 2 | 4 | 6 | 8 | 12 | 16 | 24 | 28 | 20 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
+    mx?: 1 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SegmentedControlSeparatorVariants = VariantProps<typeof segmentedControlSeparatorVariants>;
 /**

package/dist/components/Select/SelectSearchInput.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Search } from "../../icons/index.js";
 import { useTestId } from "../../utils/testId.js";
-import { InputGroup, InputGroupAddon, InputGroupInput } from "../InputGroup/index.js";
+import { Input } from "../Input/index.js";
+import { InputGroup, InputGroupAddon } from "../InputGroup/index.js";
 const SelectSearchInput = ({ value, onChange })=>{
     const testId = useTestId('search-input');
     const handleChange = (event)=>{
@@ -13,7 +14,7 @@ const SelectSearchInput = ({ value, onChange })=>{
             /*#__PURE__*/ jsx(InputGroupAddon, {
                 children: /*#__PURE__*/ jsx(Search, {})
             }),
-            /*#__PURE__*/ jsx(InputGroupInput, {
+            /*#__PURE__*/ jsx(Input, {
                 placeholder: "Search",
                 value: value,
                 onChange: handleChange

package/dist/components/Separator/Separator.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from 'class-variance-authority';
 import type { TestableProps } from '../../utils/testId';
 declare const separatorVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
-    spacing?: 1 | 2 | 4 | 6 | 8 | 12 | 16 | 24 | 28 | 20 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
+    spacing?: 1 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type SeparatorProps = ComponentPropsWithoutRef<'div'> & VariantProps<typeof separatorVariants> & TestableProps & {
     ref?: Ref<HTMLDivElement>;

package/dist/components/Stack/Stack.d.ts

@@ -10,7 +10,7 @@ declare const stackVariants: (props?: ({
     fullWidth?: boolean | null | undefined;
     flexGrow?: boolean | null | undefined;
     flexShrink?: boolean | null | undefined;
-    gap?: 0 | 1 | 2 | 4 | 6 | 8 | 12 | 16 | 24 | 28 | 20 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
+    gap?: 0 | 1 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 56 | 64 | 80 | 96 | 112 | 128 | 144 | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type StackNativeProps = Omit<HTMLAttributes<HTMLDivElement>, 'className'>;
 type StackVariantProps = VariantProps<typeof stackVariants>;

package/dist/components/TemporalCore/TemporalClear.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+interface TemporalClearProps {
+    disabled?: boolean;
+    onClick: () => void;
+}
+export declare const TemporalClear: FC<TemporalClearProps>;
+export {};

package/dist/components/TemporalCore/TemporalClear.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { X } from "../../icons/index.js";
+import { Button } from "../Button/index.js";
+const TemporalClear = ({ onClick, disabled = false })=>/*#__PURE__*/ jsx(Button, {
+        variant: "ghost",
+        color: "neutral",
+        size: "small",
+        onClick: onClick,
+        disabled: disabled,
+        children: /*#__PURE__*/ jsx(X, {})
+    });
+export { TemporalClear };

package/dist/components/TemporalCore/TemporalPlaceholder.d.ts

@@ -0,0 +1,10 @@
+import type { FC } from 'react';
+export interface TemporalPlaceholderProps {
+    text: string;
+    className?: string;
+}
+/**
+ * Placeholder component for temporal inputs (date/time) when no value is selected.
+ * Shows gray text that disappears when the input is focused.
+ */
+export declare const TemporalPlaceholder: FC<TemporalPlaceholderProps>;

package/dist/components/TemporalCore/TemporalPlaceholder.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+const TemporalPlaceholder = ({ text, className })=>/*#__PURE__*/ jsx("span", {
+        className: cn('pointer-events-none absolute inset-0 flex items-center px-1', 'text-text-secondary font-sans text-sm', 'select-none whitespace-nowrap', className),
+        "aria-hidden": "true",
+        children: text
+    });
+export { TemporalPlaceholder };

package/dist/components/TemporalCore/TemporalSegment.d.ts

@@ -0,0 +1,12 @@
+import { type FC } from 'react';
+import type { DateFieldState, DateSegment } from '@react-stately/datepicker';
+interface TemporalSegmentProps {
+    segment: DateSegment;
+    state: DateFieldState;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Override the displayed text (from TemporalSegmentGroup normalization). */
+    displayOverride?: string;
+}
+export declare const TemporalSegment: FC<TemporalSegmentProps>;
+export {};

package/dist/components/TemporalCore/TemporalSegment.js

@@ -0,0 +1,55 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useDateSegment } from "@react-aria/datepicker";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+import { getMonthSegmentText } from "./utils.js";
+const segmentVariants = cva(cn('relative outline-none text-left', 'font-sans text-sm transition-all', 'focus:bg-bg-fill-brand focus:text-text-primary-alt', 'focus:outline-none'), {
+    variants: {
+        isPlaceholder: {
+            true: 'text-text-secondary',
+            false: 'text-text-primary'
+        },
+        disabled: {
+            true: 'cursor-not-allowed opacity-50',
+            false: 'hover:bg-states-primary-default-alt cursor-text'
+        },
+        type: {
+            literal: 'text-text-primary select-none hover:bg-transparent focus:bg-transparent',
+            editable: 'px-1'
+        }
+    },
+    defaultVariants: {
+        type: 'editable',
+        isPlaceholder: false,
+        disabled: false
+    }
+});
+const TemporalSegment = ({ segment, state, disabled = false, readOnly = false, displayOverride })=>{
+    const ref = useRef(null);
+    const { segmentProps } = useDateSegment(segment, state, ref);
+    const isLiteral = 'literal' === segment.type;
+    const isEditable = segment.isEditable && !readOnly;
+    if (isLiteral) return /*#__PURE__*/ jsx("span", {
+        className: segmentVariants({
+            type: 'literal',
+            disabled
+        }),
+        "aria-hidden": "true",
+        children: displayOverride ?? segment.text
+    });
+    const displayText = displayOverride ?? ('month' !== segment.type || null == segment.value || segment.isPlaceholder ? segment.text : getMonthSegmentText(segment.value, segment.placeholder));
+    return /*#__PURE__*/ jsx("span", {
+        ...segmentProps,
+        ref: ref,
+        className: segmentVariants({
+            type: isEditable ? 'editable' : 'literal',
+            isPlaceholder: segment.isPlaceholder,
+            disabled: disabled || !isEditable
+        }),
+        "data-segment": segment.type,
+        "data-placeholder": segment.isPlaceholder || void 0,
+        children: displayText
+    });
+};
+export { TemporalSegment };

package/dist/components/TemporalCore/TemporalSegmentGroup.d.ts

@@ -0,0 +1,10 @@
+import type { DateFieldState, TimeFieldState } from '@react-stately/datepicker';
+import type { GroupDOMAttributes } from '@react-types/shared';
+export interface TemporalSegmentGroupProps extends GroupDOMAttributes {
+    state: DateFieldState | TimeFieldState;
+    disabled?: boolean;
+    readOnly?: boolean;
+    className?: string;
+    segmentKeyPrefix?: string;
+}
+export declare const TemporalSegmentGroup: import("react").ForwardRefExoticComponent<TemporalSegmentGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/TemporalCore/TemporalSegmentGroup.js

@@ -0,0 +1,96 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utils/cn.js";
+import { TemporalSegment } from "./TemporalSegment.js";
+const literalVariants = cva('relative outline-none text-left font-sans text-sm text-text-primary select-none', {
+    variants: {
+        disabled: {
+            true: 'cursor-not-allowed opacity-50',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        disabled: false
+    }
+});
+const Literal = ({ text, disabled })=>/*#__PURE__*/ jsx("span", {
+        className: literalVariants({
+            disabled
+        }),
+        "aria-hidden": "true",
+        children: text
+    });
+function buildParts(segments, state, disabled, readOnly, keyPrefix = '') {
+    const day = segments.find((s)=>'day' === s.type);
+    const month = segments.find((s)=>'month' === s.type);
+    const year = segments.find((s)=>'year' === s.type);
+    const hasDateParts = !!(day || month || year);
+    if (!hasDateParts) return segments.map((seg, i)=>/*#__PURE__*/ jsx(TemporalSegment, {
+            segment: seg,
+            state: state,
+            disabled: disabled,
+            readOnly: readOnly
+        }, `${keyPrefix}${seg.type}_${i}`));
+    const hourIdx = segments.findIndex((s)=>'hour' === s.type);
+    const timeSegments = hourIdx >= 0 ? segments.slice(hourIdx) : [];
+    const parts = [];
+    if (day) {
+        const dayOverride = day.isPlaceholder || 2 !== day.text.length || '0' !== day.text[0] ? void 0 : day.text.slice(1);
+        parts.push(/*#__PURE__*/ jsx(TemporalSegment, {
+            segment: day,
+            state: state,
+            disabled: disabled,
+            readOnly: readOnly,
+            displayOverride: dayOverride
+        }, `${keyPrefix}day`));
+    }
+    if (month) {
+        parts.push(/*#__PURE__*/ jsx(Literal, {
+            text: " ",
+            disabled: disabled
+        }, `${keyPrefix}sep-dm`));
+        parts.push(/*#__PURE__*/ jsx(TemporalSegment, {
+            segment: month,
+            state: state,
+            disabled: disabled,
+            readOnly: readOnly
+        }, `${keyPrefix}month`));
+    }
+    if (year) {
+        parts.push(/*#__PURE__*/ jsx(Literal, {
+            text: ", ",
+            disabled: disabled
+        }, `${keyPrefix}sep-my`));
+        parts.push(/*#__PURE__*/ jsx(TemporalSegment, {
+            segment: year,
+            state: state,
+            disabled: disabled,
+            readOnly: readOnly
+        }, `${keyPrefix}year`));
+    }
+    if (timeSegments.length > 0) {
+        parts.push(/*#__PURE__*/ jsx(Literal, {
+            text: " ",
+            disabled: disabled
+        }, `${keyPrefix}sep-dt`));
+        timeSegments.forEach((seg, i)=>parts.push(/*#__PURE__*/ jsx(TemporalSegment, {
+                segment: seg,
+                state: state,
+                disabled: disabled,
+                readOnly: readOnly
+            }, `${keyPrefix}time_${seg.type}_${i}`)));
+    }
+    return parts;
+}
+const TemporalSegmentGroup = /*#__PURE__*/ forwardRef(({ state, disabled, readOnly, className, segmentKeyPrefix = '', ...props }, ref)=>{
+    const parts = buildParts(state.segments, state, disabled, readOnly, segmentKeyPrefix);
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        ref: ref,
+        className: cn('flex items-center gap-0.5', className),
+        children: parts
+    });
+});
+TemporalSegmentGroup.displayName = 'TemporalSegmentGroup';
+export { TemporalSegmentGroup };

package/dist/components/TemporalCore/TimeDropdown.d.ts

@@ -0,0 +1,24 @@
+import { type KeyboardEvent } from 'react';
+import type { TimeValue } from '@react-aria/datepicker';
+export interface TimeDropdownProps {
+    /** Whether dropdown is visible */
+    isOpen: boolean;
+    /** Time step in minutes (default: 30) */
+    timeStep?: number;
+    /** Current selected time value */
+    value?: TimeValue | null;
+    /** Hour cycle for time display: 12-hour (AM/PM) or 24-hour format */
+    hourCycle?: 12 | 24;
+    /** Callback when time is selected */
+    onSelect: (time: TimeValue) => void;
+    /** Callback when dropdown should close */
+    onClose: () => void;
+}
+export interface TimeDropdownHandle {
+    handleKeyDown: (e: KeyboardEvent) => void;
+}
+/**
+ * Time dropdown component with keyboard navigation.
+ * Stops event propagation to prevent interference with parent components.
+ */
+export declare const TimeDropdown: import("react").ForwardRefExoticComponent<TimeDropdownProps & import("react").RefAttributes<TimeDropdownHandle>>;