@tribepad/themis 1.0.0 → 1.0.1

package/dist/elements/TimeField/index.mjs

@@ -1,4 +1,240 @@
-export { Time, TimeField, TimeFieldPropsSchema, parseTime, timeFieldDescriptionVariants, timeFieldErrorVariants, timeFieldLabelVariants, timeFieldVariants, timeSegmentVariants } from '../../chunk-2HIUTHMU.mjs';
-import '../../chunk-E2KQFV3O.mjs';
+"use client";
+import { forwardRef } from 'react';
+import { TimeField as TimeField$1, Label, DateInput, DateSegment, Text, FieldError } from 'react-aria-components';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { z } from 'zod';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+export { Time, parseTime } from '@internationalized/date';
+
+// src/elements/TimeField/TimeField.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var TimeFieldPropsSchema = z.object({
+  // Value props
+  value: z.custom().optional(),
+  defaultValue: z.custom().optional(),
+  placeholderValue: z.custom().optional(),
+  // Granularity props
+  granularity: z.enum(["hour", "minute", "second"]).default("minute"),
+  hourCycle: z.union([z.literal(12), z.literal(24)]).optional(),
+  hideTimeZone: z.boolean().optional(),
+  shouldForceLeadingZeros: z.boolean().optional(),
+  // Constraint props
+  minValue: z.custom().optional(),
+  maxValue: z.custom().optional(),
+  // State props
+  isDisabled: z.boolean().optional(),
+  isReadOnly: z.boolean().optional(),
+  isRequired: z.boolean().optional(),
+  isInvalid: z.boolean().optional(),
+  // Validation props
+  /** Custom validation function that returns an error message or null */
+  validate: z.function().optional(),
+  validationBehavior: z.enum(["native", "aria"]).default("native"),
+  // Display props
+  label: z.string(),
+  description: z.string().optional(),
+  /** Error message string or render function */
+  errorMessage: z.union([z.string(), z.function()]).optional(),
+  // Form props
+  name: z.string().optional(),
+  // Variant props
+  size: z.enum(["sm", "default", "lg"]).default("default"),
+  // Event props
+  /** Called when the time value changes */
+  onChange: z.function().optional(),
+  /** Called when the field gains focus */
+  onFocus: z.function().optional(),
+  /** Called when the field loses focus */
+  onBlur: z.function().optional(),
+  /** Called when focus state changes */
+  onFocusChange: z.function().optional(),
+  // Standard props
+  className: z.string().optional(),
+  autoFocus: z.boolean().optional()
+});
+var timeFieldVariants = cva(
+  [
+    // Base styles
+    "inline-flex items-center rounded-md border",
+    "bg-[var(--content-background)] text-[var(--content-foreground)]",
+    "transition-colors duration-200",
+    // Focus within
+    "focus-within:ring-2 focus-within:ring-[var(--ring)] focus-within:ring-offset-2",
+    // Disabled
+    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-9 px-3 text-sm gap-0.5",
+        // 36px - AA only
+        default: "h-11 px-4 text-base gap-1",
+        // 44px - AAA
+        lg: "h-14 px-5 text-lg gap-1.5"
+        // 56px - AAA
+      },
+      isInvalid: {
+        true: "border-[var(--destructive)] focus-within:ring-[var(--destructive)]",
+        false: "border-[var(--input)] hover:border-[var(--input)]/80"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      isInvalid: false
+    }
+  }
+);
+var timeSegmentVariants = cva(
+  [
+    // Base styles
+    "tabular-nums rounded px-0.5",
+    // Focus
+    "focus:outline-none focus:bg-[var(--accent)] focus:text-[var(--accent-foreground)]",
+    // Placeholder
+    "data-[placeholder]:text-[var(--menu-muted)]",
+    // Literal segments (colons, spaces)
+    "data-[type=literal]:text-[var(--menu-muted)]",
+    // Disabled
+    "data-[disabled]:opacity-50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-sm min-w-[1.5ch]",
+        default: "text-base min-w-[2ch]",
+        lg: "text-lg min-w-[2ch]"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var timeFieldLabelVariants = cva(
+  [
+    "block font-medium text-[var(--content-foreground)]",
+    "mb-1.5",
+    // Required indicator
+    'data-[required]:after:content-["*"] data-[required]:after:ml-0.5',
+    "data-[required]:after:text-[var(--destructive)]"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-sm",
+        default: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var timeFieldDescriptionVariants = cva(
+  [
+    "text-[var(--menu-muted)]",
+    "mt-1"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var timeFieldErrorVariants = cva(
+  [
+    "flex items-center gap-1",
+    "text-[var(--destructive)]",
+    "mt-1"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var TimeField = forwardRef(
+  ({
+    // Display props
+    label,
+    description,
+    errorMessage,
+    // Variant props
+    size = "default",
+    // Standard props
+    className,
+    // All other props go to AriaTimeField
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      TimeField$1,
+      {
+        ref,
+        className: cn("group flex flex-col gap-1", className),
+        ...props,
+        children: [
+          label && /* @__PURE__ */ jsx(
+            Label,
+            {
+              className: cn(timeFieldLabelVariants({ size })),
+              "data-required": props.isRequired || void 0,
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            DateInput,
+            {
+              className: cn(
+                timeFieldVariants({
+                  size,
+                  isInvalid: props.isInvalid
+                }),
+                "w-fit"
+              ),
+              children: (segment) => /* @__PURE__ */ jsx(
+                DateSegment,
+                {
+                  segment,
+                  className: cn(timeSegmentVariants({ size }))
+                }
+              )
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            Text,
+            {
+              slot: "description",
+              className: cn(timeFieldDescriptionVariants({ size })),
+              children: description
+            }
+          ),
+          /* @__PURE__ */ jsx(FieldError, { className: cn(timeFieldErrorVariants({ size })), children: errorMessage })
+        ]
+      }
+    );
+  }
+);
+TimeField.displayName = "TimeField";
+
+export { TimeField, TimeFieldPropsSchema, timeFieldDescriptionVariants, timeFieldErrorVariants, timeFieldLabelVariants, timeFieldVariants, timeSegmentVariants };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map

package/dist/elements/TimeField/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs"}
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/elements/TimeField/TimeField.types.ts","../../../src/elements/TimeField/TimeField.tsx"],"names":["AriaTimeField","AriaLabel","AriaDateInput","AriaDateSegment","AriaText","AriaFieldError"],"mappings":"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","file":"index.mjs","sourcesContent":["/**\n * Class Name Utility\n * Merges Tailwind CSS classes with conflict resolution\n *\n * Combines clsx for conditional classes and tailwind-merge for deduplication\n *\n * @example\n * cn('px-2 py-1', 'px-4') // => 'py-1 px-4' (px-4 overrides px-2)\n * cn('text-red-500', condition && 'text-blue-500') // => conditional application\n */\n\nimport { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","/**\n * TimeField Component Types\n *\n * Zod schemas and TypeScript types for the TimeField component.\n * Includes CVA variant definitions for styling.\n *\n * Note: Zod schemas are used for contract tests and developer guardrails,\n * not runtime validation. This follows the established Themis pattern.\n *\n * @see {@link ../../docs/prd/timefield-prd.md} for full requirements\n */\n\nimport { z } from 'zod';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type {\n  TimeFieldProps as AriaTimeFieldProps,\n  TimeValue,\n} from 'react-aria-components';\n\n// ============================================================================\n// Time Value Types (re-exported for convenience)\n// ============================================================================\n\n/**\n * Union type for all time values supported by the TimeField.\n * - Time: Time only (no date, no timezone)\n * - CalendarDateTime: Date and time (no timezone)\n * - ZonedDateTime: Date, time, and timezone\n */\nexport type { TimeValue } from 'react-aria-components';\n\n// ============================================================================\n// Granularity Type\n// ============================================================================\n\n/**\n * Controls which time segments are displayed.\n * - 'hour': Hour only (+ AM/PM in 12-hour mode)\n * - 'minute': Hour + minute (default)\n * - 'second': Hour + minute + second\n *\n * Note: Millisecond granularity is intentionally excluded - no common UI use case.\n */\nexport type TimeGranularity = 'hour' | 'minute' | 'second';\n\n// ============================================================================\n// Size Variant Type\n// ============================================================================\n\n/**\n * Size variants for TimeField component.\n * - 'sm': Compact size (36px height) - AA compliant only, not AAA\n * - 'default': Standard size (44px height) - AAA compliant\n * - 'lg': Large size (56px height) - AAA compliant\n */\nexport type TimeFieldSize = 'sm' | 'default' | 'lg';\n\n// ============================================================================\n// Hour Cycle Type\n// ============================================================================\n\n/**\n * Hour cycle format.\n * - 12: 12-hour format with AM/PM\n * - 24: 24-hour format\n */\nexport type HourCycle = 12 | 24;\n\n// ============================================================================\n// Zod Schemas\n// ============================================================================\n\n/**\n * Zod schema for TimeField props validation.\n * Used for contract tests and developer guardrails, not runtime validation.\n */\nexport const TimeFieldPropsSchema = z.object({\n  // Value props\n  value: z.custom<TimeValue>().optional(),\n  defaultValue: z.custom<TimeValue>().optional(),\n  placeholderValue: z.custom<TimeValue>().optional(),\n\n  // Granularity props\n  granularity: z.enum(['hour', 'minute', 'second']).default('minute'),\n  hourCycle: z.union([z.literal(12), z.literal(24)]).optional(),\n  hideTimeZone: z.boolean().optional(),\n  shouldForceLeadingZeros: z.boolean().optional(),\n\n  // Constraint props\n  minValue: z.custom<TimeValue>().optional(),\n  maxValue: z.custom<TimeValue>().optional(),\n\n  // State props\n  isDisabled: z.boolean().optional(),\n  isReadOnly: z.boolean().optional(),\n  isRequired: z.boolean().optional(),\n  isInvalid: z.boolean().optional(),\n\n  // Validation props\n  /** Custom validation function that returns an error message or null */\n  validate: z.function().optional(),\n  validationBehavior: z.enum(['native', 'aria']).default('native'),\n\n  // Display props\n  label: z.string(),\n  description: z.string().optional(),\n  /** Error message string or render function */\n  errorMessage: z.union([z.string(), z.function()]).optional(),\n\n  // Form props\n  name: z.string().optional(),\n\n  // Variant props\n  size: z.enum(['sm', 'default', 'lg']).default('default'),\n\n  // Event props\n  /** Called when the time value changes */\n  onChange: z.function().optional(),\n  /** Called when the field gains focus */\n  onFocus: z.function().optional(),\n  /** Called when the field loses focus */\n  onBlur: z.function().optional(),\n  /** Called when focus state changes */\n  onFocusChange: z.function().optional(),\n\n  // Standard props\n  className: z.string().optional(),\n  autoFocus: z.boolean().optional(),\n});\n\n// ============================================================================\n// TypeScript Types\n// ============================================================================\n\n/**\n * Custom props added to TimeField (not from React Aria).\n */\nexport interface ThemisTimeFieldCustomProps {\n  /** Size variant: 'sm', 'default', or 'lg' */\n  size?: TimeFieldSize;\n  /** Field label */\n  label?: string;\n  /** Description text below the field */\n  description?: string;\n  /** Error message when field is invalid */\n  errorMessage?: string;\n}\n\n/**\n * Props for the TimeField component.\n * Uses React Aria's TimeFieldProps directly to ensure correct function types.\n */\nexport type TimeFieldProps = AriaTimeFieldProps<TimeValue> &\n  ThemisTimeFieldCustomProps;\n\n// ============================================================================\n// CVA Variants\n// ============================================================================\n\n/**\n * Variants for the TimeField input container.\n * Applies to the DateInput element wrapping time segments.\n *\n * Size notes:\n * - sm (36px): Desktop-only, AA compliant only (not AAA touch target)\n * - default (44px): AAA compliant, recommended for most use cases\n * - lg (56px): AAA compliant, enhanced touch targets\n */\nexport const timeFieldVariants = cva(\n  [\n    // Base styles\n    'inline-flex items-center rounded-md border',\n    'bg-[var(--content-background)] text-[var(--content-foreground)]',\n    'transition-colors duration-200',\n    // Focus within\n    'focus-within:ring-2 focus-within:ring-[var(--ring)] focus-within:ring-offset-2',\n    // Disabled\n    'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-9 px-3 text-sm gap-0.5', // 36px - AA only\n        default: 'h-11 px-4 text-base gap-1', // 44px - AAA\n        lg: 'h-14 px-5 text-lg gap-1.5', // 56px - AAA\n      },\n      isInvalid: {\n        true: 'border-[var(--destructive)] focus-within:ring-[var(--destructive)]',\n        false: 'border-[var(--input)] hover:border-[var(--input)]/80',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      isInvalid: false,\n    },\n  }\n);\n\n/**\n * Variants for individual time segment elements.\n * Each segment (hour, minute, second, dayPeriod) uses these styles.\n */\nexport const timeSegmentVariants = cva(\n  [\n    // Base styles\n    'tabular-nums rounded px-0.5',\n    // Focus\n    'focus:outline-none focus:bg-[var(--accent)] focus:text-[var(--accent-foreground)]',\n    // Placeholder\n    'data-[placeholder]:text-[var(--menu-muted)]',\n    // Literal segments (colons, spaces)\n    'data-[type=literal]:text-[var(--menu-muted)]',\n    // Disabled\n    'data-[disabled]:opacity-50',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'text-sm min-w-[1.5ch]',\n        default: 'text-base min-w-[2ch]',\n        lg: 'text-lg min-w-[2ch]',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n);\n\n/**\n * Variants for the TimeField label.\n */\nexport const timeFieldLabelVariants = cva(\n  [\n    'block font-medium text-[var(--content-foreground)]',\n    'mb-1.5',\n    // Required indicator\n    'data-[required]:after:content-[\"*\"] data-[required]:after:ml-0.5',\n    'data-[required]:after:text-[var(--destructive)]',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'text-sm',\n        default: 'text-sm',\n        lg: 'text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n);\n\n/**\n * Variants for the description text below the field.\n */\nexport const timeFieldDescriptionVariants = cva(\n  [\n    'text-[var(--menu-muted)]',\n    'mt-1',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'text-xs',\n        default: 'text-sm',\n        lg: 'text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n);\n\n/**\n * Variants for the error message display.\n */\nexport const timeFieldErrorVariants = cva(\n  [\n    'flex items-center gap-1',\n    'text-[var(--destructive)]',\n    'mt-1',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'text-xs',\n        default: 'text-sm',\n        lg: 'text-base',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  }\n);\n\n// ============================================================================\n// Variant Types (from CVA)\n// ============================================================================\n\n/**\n * Variant props for timeFieldVariants CVA function.\n */\nexport type TimeFieldVariantProps = VariantProps<typeof timeFieldVariants>;\n\n/**\n * Variant props for timeSegmentVariants CVA function.\n */\nexport type TimeSegmentVariantProps = VariantProps<typeof timeSegmentVariants>;\n","'use client';\n\n/**\n * TimeField Component\n *\n * A fully accessible time input component built on React Aria's TimeField primitive.\n * Provides keyboard-editable time segments for entering hours, minutes, and seconds.\n *\n * Features:\n * - WCAG 2.2 AAA compliant (default/lg sizes) / AA compliant (sm size)\n * - Configurable granularity (hour, minute, second)\n * - 12-hour and 24-hour format support\n * - Step increment support\n * - Min/max constraints with validation\n * - Form integration with hidden input\n * - Full keyboard navigation\n * - Screen reader accessible\n *\n * @see {@link ../../docs/prd/timefield-prd.md} for full requirements\n */\n\nimport { forwardRef, type ReactElement } from 'react';\nimport {\n  TimeField as AriaTimeField,\n  DateInput as AriaDateInput,\n  DateSegment as AriaDateSegment,\n  Label as AriaLabel,\n  Text as AriaText,\n  FieldError as AriaFieldError,\n} from 'react-aria-components';\nimport { cn } from '../../utils/cn';\nimport type { TimeFieldProps } from './TimeField.types';\nimport {\n  timeFieldVariants,\n  timeSegmentVariants,\n  timeFieldLabelVariants,\n  timeFieldDescriptionVariants,\n  timeFieldErrorVariants,\n} from './TimeField.types';\n\n// =============================================================================\n// TimeField Component\n// =============================================================================\n\n/**\n * TimeField component for time input with keyboard-editable segments.\n *\n * @example\n * ```tsx\n * import { TimeField, Time } from '@tribepad/themis/elements/TimeField';\n *\n * // Basic usage\n * <TimeField label=\"Meeting Time\" />\n *\n * // With default value\n * <TimeField\n *   label=\"Start Time\"\n *   defaultValue={new Time(14, 30)}\n * />\n *\n * // 12-hour format with step\n * <TimeField\n *   label=\"Appointment\"\n *   hourCycle={12}\n *   step={15}\n * />\n *\n * // With validation\n * <TimeField\n *   label=\"Office Hours\"\n *   minValue={new Time(9, 0)}\n *   maxValue={new Time(17, 0)}\n *   errorMessage=\"Please select a time within office hours\"\n * />\n * ```\n */\nexport const TimeField = forwardRef<HTMLDivElement, TimeFieldProps>(\n  (\n    {\n      // Display props\n      label,\n      description,\n      errorMessage,\n      // Variant props\n      size = 'default',\n      // Standard props\n      className,\n      // All other props go to AriaTimeField\n      ...props\n    },\n    ref\n  ): ReactElement => {\n    return (\n      <AriaTimeField\n        ref={ref}\n        className={cn('group flex flex-col gap-1', className)}\n        {...props}\n      >\n        {/* Label */}\n        {label && (\n          <AriaLabel\n            className={cn(timeFieldLabelVariants({ size }))}\n            data-required={props.isRequired || undefined}\n          >\n            {label}\n          </AriaLabel>\n        )}\n\n        {/* Time Input */}\n        <AriaDateInput\n          className={cn(\n            timeFieldVariants({\n              size,\n              isInvalid: props.isInvalid,\n            }),\n            'w-fit'\n          )}\n        >\n          {(segment) => (\n            <AriaDateSegment\n              segment={segment}\n              className={cn(timeSegmentVariants({ size }))}\n            />\n          )}\n        </AriaDateInput>\n\n        {/* Description */}\n        {description && (\n          <AriaText\n            slot=\"description\"\n            className={cn(timeFieldDescriptionVariants({ size }))}\n          >\n            {description}\n          </AriaText>\n        )}\n\n        {/* Error Message */}\n        <AriaFieldError className={cn(timeFieldErrorVariants({ size }))}>\n          {errorMessage}\n        </AriaFieldError>\n      </AriaTimeField>\n    );\n  }\n);\n\nTimeField.displayName = 'TimeField';\n"]}