Time Input

1'use client';
2 
3import { type VariantProps, cva } from 'class-variance-authority';
4import * as React from 'react';
5 
6import { Icon } from '@/components/ui/icon';
7import { IconShell } from '@/components/ui/icon-shell';
8import { inputVariantStyles } from '@/components/ui/input';
9import { cn } from '@/lib/utils';
10 
11// ============================================================================
12// TYPES
13// ============================================================================
14 
15type TimeInputSize = 'sm' | 'default' | 'lg';
16type TimeInputVariant = 'default' | 'inline';
17type ValidationState = 'error' | 'warning' | 'success';
18 
19// ============================================================================
20// CVA — TimeInputRoot
21// ============================================================================
22 
23const defaultFocusStyles = [
24  'has-[:focus-visible]:bg-stateslayer-overlay-active-inverse',
25  'has-[:focus-visible]:ring-stroke-status-focus',
26  'has-[:focus-visible]:shadow-elevation-0',
27  'data-[open=true]:bg-stateslayer-overlay-active-inverse',
28  'data-[open=true]:ring-stroke-status-focus',
29  'data-[open=true]:shadow-elevation-0',
30] as const;
31 
32const inlineFocusStyles = [
33  'has-[:focus-visible]:border-b-stroke-status-focus',
34  'has-[:focus-visible]:ring-0',
35  'has-[:focus-visible]:shadow-elevation-0',
36  'data-[open=true]:border-b-stroke-status-focus',
37  'data-[open=true]:ring-0',
38  'data-[open=true]:shadow-elevation-0',
39] as const;
40 
41const defaultValidationStyles = [
42  'data-[validation=error]:border data-[validation=error]:border-stroke-status-error data-[validation=error]:ring-0',
43  'data-[validation=warning]:border data-[validation=warning]:border-stroke-status-warning data-[validation=warning]:ring-0',
44  'data-[validation=success]:border data-[validation=success]:border-stroke-status-success data-[validation=success]:ring-0',
45] as const;
46 
47const inlineValidationStyles = [
48  'data-[validation=error]:border-b-stroke-status-error data-[validation=error]:ring-0',
49  'data-[validation=warning]:border-b-stroke-status-warning data-[validation=warning]:ring-0',
50  'data-[validation=success]:border-b-stroke-status-success data-[validation=success]:ring-0',
51] as const;
52 
53const timeInputFocusRingWidth = {
54  sm: 'has-[:focus-visible]:ring-[1px] data-[open=true]:ring-[1px]',
55  default: 'has-[:focus-visible]:ring-[1px] data-[open=true]:ring-[1px]',
56  lg: 'has-[:focus-visible]:ring-[2px] data-[open=true]:ring-[2px]',
57} as const;
58 
59// … truncated