@tribepad/themis 1.0.0 → 1.0.2

package/dist/chunk-2HIUTHMU.mjs

@@ -1,234 +0,0 @@
-import { cn } from './chunk-E2KQFV3O.mjs';
-import { forwardRef } from 'react';
-import { TimeField as TimeField$1, Label, DateInput, DateSegment, Text, FieldError } from 'react-aria-components';
-import { z } from 'zod';
-import { cva } from 'class-variance-authority';
-import { jsxs, jsx } from 'react/jsx-runtime';
-export { Time, parseTime } from '@internationalized/date';
-
-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=chunk-2HIUTHMU.mjs.map
-//# sourceMappingURL=chunk-2HIUTHMU.mjs.map

package/dist/chunk-2HIUTHMU.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/elements/TimeField/TimeField.types.ts","../src/elements/TimeField/TimeField.tsx"],"names":["AriaTimeField","AriaLabel","AriaDateInput","AriaDateSegment","AriaText","AriaFieldError"],"mappings":"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","file":"chunk-2HIUTHMU.mjs","sourcesContent":["/**\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"]}