@puzzle-ui/ui 0.3.0 → 0.5.0

package/dist/components/forms/slider/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["useId","useState","cn"],"sources":["../../../../src/components/forms/slider/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useId,\n  useState,\n  type ChangeEvent,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport \"./slider.css\";\n\ntype SliderSize = \"sm\" | \"md\" | \"lg\";\n\ntype SliderMark = {\n  /** Numeric position of the mark. */\n  value: number;\n\n  /** Optional visible label below the mark. */\n  label?: ReactNode;\n};\n\ntype SliderProps = Omit<\n  ComponentPropsWithRef<\"input\">,\n  | \"type\"\n  | \"value\"\n  | \"defaultValue\"\n  | \"onChange\"\n  | \"min\"\n  | \"max\"\n  | \"step\"\n  | \"size\"\n  | \"className\"\n> & {\n  /** Controlled numeric value. */\n  value?: number;\n\n  /** Initial value for uncontrolled usage. Defaults to the range midpoint. */\n  defaultValue?: number;\n\n  /** Called whenever the selected value changes. */\n  onChange?: (value: number) => void;\n\n  /** Minimum selectable value. Defaults to 0. */\n  min?: number;\n\n  /** Maximum selectable value. Defaults to 100. */\n  max?: number;\n\n  /** Allowed increment. Use \"any\" to disable step rounding. */\n  step?: number | \"any\";\n\n  /** Visual size of the slider. */\n  size?: SliderSize;\n\n  /** Optional marks displayed below the track. */\n  marks?: readonly SliderMark[];\n\n  /** Displays the current value above the slider. */\n  showValue?: boolean;\n\n  /**\n   * Formats the visible value and supplies aria-valuetext.\n   * An explicitly supplied aria-valuetext takes precedence.\n   */\n  formatValue?: (value: number) => string;\n\n  /** Class applied to the outer slider element. */\n  className?: string;\n};\n\nconst getPrecision = (value: number) => {\n  const [coefficient, exponent = \"0\"] = String(value).toLowerCase().split(\"e\");\n\n  const decimals = coefficient.split(\".\")[1]?.length ?? 0;\n\n  return Math.min(12, Math.max(0, decimals - Number(exponent)));\n};\n\nconst normalizeSliderValue = (\n  value: number,\n  min: number,\n  max: number,\n  step: number | \"any\",\n) => {\n  if (max <= min) {\n    return min;\n  }\n\n  const boundedValue = Math.min(max, Math.max(min, value));\n\n  if (step === \"any\") {\n    return boundedValue;\n  }\n\n  const precision = Math.max(getPrecision(min), getPrecision(step));\n  const factor = 10 ** precision;\n\n  const steppedValue = min + Math.round((boundedValue - min) / step) * step;\n\n  return Math.min(\n    max,\n    Math.max(min, Math.round(steppedValue * factor) / factor),\n  );\n};\n\nconst Slider = ({\n  value,\n  defaultValue,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  size = \"md\",\n  marks,\n  showValue = false,\n  formatValue,\n  className,\n  id,\n  ref,\n  disabled = false,\n  style,\n  \"aria-invalid\": ariaInvalid,\n  \"aria-valuetext\": ariaValueText,\n  ...inputProps\n}: SliderProps) => {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n\n  const resolvedMin = Number.isFinite(min) ? min : 0;\n\n  const requestedMax = Number.isFinite(max) ? max : 100;\n  const resolvedMax = Math.max(resolvedMin, requestedMax);\n\n  const resolvedStep =\n    step === \"any\" ? \"any\" : Number.isFinite(step) && step > 0 ? step : 1;\n\n  const isControlled = value !== undefined;\n\n  const [internalValue, setInternalValue] = useState(() =>\n    normalizeSliderValue(\n      defaultValue ?? (resolvedMin + resolvedMax) / 2,\n      resolvedMin,\n      resolvedMax,\n      resolvedStep,\n    ),\n  );\n\n  const currentValue = normalizeSliderValue(\n    isControlled ? value : internalValue,\n    resolvedMin,\n    resolvedMax,\n    resolvedStep,\n  );\n\n  const progress =\n    resolvedMax > resolvedMin\n      ? ((currentValue - resolvedMin) / (resolvedMax - resolvedMin)) * 100\n      : 0;\n\n  const formattedValue = formatValue?.(currentValue);\n\n  const isInvalid = ariaInvalid === true || ariaInvalid === \"true\";\n\n  const resolvedMarks = (marks ?? [])\n    .filter(\n      (mark) =>\n        Number.isFinite(mark.value) &&\n        mark.value >= resolvedMin &&\n        mark.value <= resolvedMax,\n    )\n    .slice()\n    .sort((a, b) => a.value - b.value);\n\n  const hasMarkLabels = resolvedMarks.some((mark) => mark.label != null);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const nextValue = normalizeSliderValue(\n      event.currentTarget.valueAsNumber,\n      resolvedMin,\n      resolvedMax,\n      resolvedStep,\n    );\n\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n\n    onChange?.(nextValue);\n  };\n\n  return (\n    <div\n      className={cn(\"puzzle-slider\", className)}\n      data-size={size}\n      data-disabled={disabled || undefined}\n      data-invalid={isInvalid || undefined}\n    >\n      {showValue && (\n        <output htmlFor={inputId} className=\"puzzle-slider__value\">\n          {formattedValue ?? currentValue}\n        </output>\n      )}\n\n      <input\n        {...inputProps}\n        ref={ref}\n        id={inputId}\n        className=\"puzzle-slider__input\"\n        type=\"range\"\n        min={resolvedMin}\n        max={resolvedMax}\n        step={resolvedStep}\n        value={currentValue}\n        disabled={disabled}\n        aria-invalid={ariaInvalid}\n        aria-valuetext={ariaValueText ?? formattedValue}\n        style={\n          {\n            ...style,\n            \"--puzzle-slider-progress\": `${progress}%`,\n          } as CSSProperties\n        }\n        onChange={handleChange}\n      />\n\n      {resolvedMarks.length > 0 && (\n        <div\n          className=\"puzzle-slider__marks\"\n          data-has-labels={hasMarkLabels || undefined}\n        >\n          {resolvedMarks.map((mark, index) => {\n            const position =\n              resolvedMax > resolvedMin\n                ? ((mark.value - resolvedMin) / (resolvedMax - resolvedMin)) *\n                  100\n                : 0;\n\n            return (\n              <span\n                key={`${mark.value}-${index}`}\n                className=\"puzzle-slider__mark\"\n                data-edge={\n                  index === 0\n                    ? \"start\"\n                    : index === resolvedMarks.length - 1\n                      ? \"end\"\n                      : undefined\n                }\n                style={{\n                  insetInlineStart: `${position}%`,\n                }}\n              >\n                <span className=\"puzzle-slider__mark-tick\" aria-hidden=\"true\" />\n\n                {mark.label != null && (\n                  <span className=\"puzzle-slider__mark-label\">\n                    {mark.label}\n                  </span>\n                )}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport { Slider, type SliderProps, type SliderMark, type SliderSize };\n"],"mappings":"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"}
+{"version":3,"file":"index.cjs","names":["useId","useState","cn"],"sources":["../../../../src/components/forms/slider/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useId,\n  useState,\n  type ChangeEvent,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport \"./slider.css\";\n\ntype SliderSize = \"sm\" | \"md\" | \"lg\";\n\ntype SliderMark = {\n  /** Numeric position of the mark. */\n  value: number;\n\n  /** Optional visible label below the mark. */\n  label?: ReactNode;\n};\n\ntype SliderProps = Omit<\n  ComponentPropsWithRef<\"input\">,\n  | \"type\"\n  | \"value\"\n  | \"defaultValue\"\n  | \"onChange\"\n  | \"min\"\n  | \"max\"\n  | \"step\"\n  | \"size\"\n  | \"className\"\n> & {\n  /** Controlled numeric value. */\n  value?: number;\n\n  /** Initial value for uncontrolled usage. Defaults to the range midpoint. */\n  defaultValue?: number;\n\n  /** Called whenever the selected value changes. */\n  onChange?: (value: number) => void;\n\n  /** Minimum selectable value. Defaults to 0. */\n  min?: number;\n\n  /** Maximum selectable value. Defaults to 100. */\n  max?: number;\n\n  /** Allowed increment. Use \"any\" to disable step rounding. */\n  step?: number | \"any\";\n\n  /** Visual size of the slider. */\n  size?: SliderSize;\n\n  /** Optional marks displayed below the track. */\n  marks?: readonly SliderMark[];\n\n  /** Displays the current value above the slider. */\n  showValue?: boolean;\n\n  /**\n   * Formats the visible value and supplies aria-valuetext.\n   * An explicitly supplied aria-valuetext takes precedence.\n   */\n  formatValue?: (value: number) => string;\n\n  /** Class applied to the outer slider element. */\n  className?: string;\n};\n\nconst getPrecision = (value: number) => {\n  const [coefficient = \"\", exponent = \"0\"] = String(value).toLowerCase().split(\"e\");\n\n  const decimals = coefficient.split(\".\")[1]?.length ?? 0;\n\n  return Math.min(12, Math.max(0, decimals - Number(exponent)));\n};\n\nconst normalizeSliderValue = (\n  value: number,\n  min: number,\n  max: number,\n  step: number | \"any\",\n) => {\n  if (max <= min) {\n    return min;\n  }\n\n  const boundedValue = Math.min(max, Math.max(min, value));\n\n  if (step === \"any\") {\n    return boundedValue;\n  }\n\n  const precision = Math.max(getPrecision(min), getPrecision(step));\n  const factor = 10 ** precision;\n\n  const steppedValue = min + Math.round((boundedValue - min) / step) * step;\n\n  return Math.min(\n    max,\n    Math.max(min, Math.round(steppedValue * factor) / factor),\n  );\n};\n\nconst Slider = ({\n  value,\n  defaultValue,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  size = \"md\",\n  marks,\n  showValue = false,\n  formatValue,\n  className,\n  id,\n  ref,\n  disabled = false,\n  style,\n  \"aria-invalid\": ariaInvalid,\n  \"aria-valuetext\": ariaValueText,\n  ...inputProps\n}: SliderProps) => {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n\n  const resolvedMin = Number.isFinite(min) ? min : 0;\n\n  const requestedMax = Number.isFinite(max) ? max : 100;\n  const resolvedMax = Math.max(resolvedMin, requestedMax);\n\n  const resolvedStep =\n    step === \"any\" ? \"any\" : Number.isFinite(step) && step > 0 ? step : 1;\n\n  const isControlled = value !== undefined;\n\n  const [internalValue, setInternalValue] = useState(() =>\n    normalizeSliderValue(\n      defaultValue ?? (resolvedMin + resolvedMax) / 2,\n      resolvedMin,\n      resolvedMax,\n      resolvedStep,\n    ),\n  );\n\n  const currentValue = normalizeSliderValue(\n    isControlled ? value : internalValue,\n    resolvedMin,\n    resolvedMax,\n    resolvedStep,\n  );\n\n  const progress =\n    resolvedMax > resolvedMin\n      ? ((currentValue - resolvedMin) / (resolvedMax - resolvedMin)) * 100\n      : 0;\n\n  const formattedValue = formatValue?.(currentValue);\n\n  const isInvalid = ariaInvalid === true || ariaInvalid === \"true\";\n\n  const resolvedMarks = (marks ?? [])\n    .filter(\n      (mark) =>\n        Number.isFinite(mark.value) &&\n        mark.value >= resolvedMin &&\n        mark.value <= resolvedMax,\n    )\n    .slice()\n    .sort((a, b) => a.value - b.value);\n\n  const hasMarkLabels = resolvedMarks.some((mark) => mark.label != null);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const nextValue = normalizeSliderValue(\n      event.currentTarget.valueAsNumber,\n      resolvedMin,\n      resolvedMax,\n      resolvedStep,\n    );\n\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n\n    onChange?.(nextValue);\n  };\n\n  return (\n    <div\n      className={cn(\"puzzle-slider\", className)}\n      data-size={size}\n      data-disabled={disabled || undefined}\n      data-invalid={isInvalid || undefined}\n    >\n      {showValue && (\n        <output htmlFor={inputId} className=\"puzzle-slider__value\">\n          {formattedValue ?? currentValue}\n        </output>\n      )}\n\n      <input\n        {...inputProps}\n        ref={ref}\n        id={inputId}\n        className=\"puzzle-slider__input\"\n        type=\"range\"\n        min={resolvedMin}\n        max={resolvedMax}\n        step={resolvedStep}\n        value={currentValue}\n        disabled={disabled}\n        aria-invalid={ariaInvalid}\n        aria-valuetext={ariaValueText ?? formattedValue}\n        style={\n          {\n            ...style,\n            \"--puzzle-slider-progress\": `${progress}%`,\n          } as CSSProperties\n        }\n        onChange={handleChange}\n      />\n\n      {resolvedMarks.length > 0 && (\n        <div\n          className=\"puzzle-slider__marks\"\n          data-has-labels={hasMarkLabels || undefined}\n        >\n          {resolvedMarks.map((mark, index) => {\n            const position =\n              resolvedMax > resolvedMin\n                ? ((mark.value - resolvedMin) / (resolvedMax - resolvedMin)) *\n                  100\n                : 0;\n\n            return (\n              <span\n                key={`${mark.value}-${index}`}\n                className=\"puzzle-slider__mark\"\n                data-edge={\n                  index === 0\n                    ? \"start\"\n                    : index === resolvedMarks.length - 1\n                      ? \"end\"\n                      : undefined\n                }\n                style={{\n                  insetInlineStart: `${position}%`,\n                }}\n              >\n                <span className=\"puzzle-slider__mark-tick\" aria-hidden=\"true\" />\n\n                {mark.label != null && (\n                  <span className=\"puzzle-slider__mark-label\">\n                    {mark.label}\n                  </span>\n                )}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport { Slider, type SliderProps, type SliderMark, type SliderSize };\n"],"mappings":"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"}

package/dist/components/forms/slider/index.js

@@ -5,7 +5,7 @@ import { useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/forms/slider/index.tsx
 const getPrecision = (value) => {
-	const [coefficient, exponent = "0"] = String(value).toLowerCase().split("e");
+	const [coefficient = "", exponent = "0"] = String(value).toLowerCase().split("e");
 	const decimals = coefficient.split(".")[1]?.length ?? 0;
 	return Math.min(12, Math.max(0, decimals - Number(exponent)));
 };

package/dist/components/forms/slider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/forms/slider/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useId,\n  useState,\n  type ChangeEvent,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport \"./slider.css\";\n\ntype SliderSize = \"sm\" | \"md\" | \"lg\";\n\ntype SliderMark = {\n  /** Numeric position of the mark. */\n  value: number;\n\n  /** Optional visible label below the mark. */\n  label?: ReactNode;\n};\n\ntype SliderProps = Omit<\n  ComponentPropsWithRef<\"input\">,\n  | \"type\"\n  | \"value\"\n  | \"defaultValue\"\n  | \"onChange\"\n  | \"min\"\n  | \"max\"\n  | \"step\"\n  | \"size\"\n  | \"className\"\n> & {\n  /** Controlled numeric value. */\n  value?: number;\n\n  /** Initial value for uncontrolled usage. Defaults to the range midpoint. */\n  defaultValue?: number;\n\n  /** Called whenever the selected value changes. */\n  onChange?: (value: number) => void;\n\n  /** Minimum selectable value. Defaults to 0. */\n  min?: number;\n\n  /** Maximum selectable value. Defaults to 100. */\n  max?: number;\n\n  /** Allowed increment. Use \"any\" to disable step rounding. */\n  step?: number | \"any\";\n\n  /** Visual size of the slider. */\n  size?: SliderSize;\n\n  /** Optional marks displayed below the track. */\n  marks?: readonly SliderMark[];\n\n  /** Displays the current value above the slider. */\n  showValue?: boolean;\n\n  /**\n   * Formats the visible value and supplies aria-valuetext.\n   * An explicitly supplied aria-valuetext takes precedence.\n   */\n  formatValue?: (value: number) => string;\n\n  /** Class applied to the outer slider element. */\n  className?: string;\n};\n\nconst getPrecision = (value: number) => {\n  const [coefficient, exponent = \"0\"] = String(value).toLowerCase().split(\"e\");\n\n  const decimals = coefficient.split(\".\")[1]?.length ?? 0;\n\n  return Math.min(12, Math.max(0, decimals - Number(exponent)));\n};\n\nconst normalizeSliderValue = (\n  value: number,\n  min: number,\n  max: number,\n  step: number | \"any\",\n) => {\n  if (max <= min) {\n    return min;\n  }\n\n  const boundedValue = Math.min(max, Math.max(min, value));\n\n  if (step === \"any\") {\n    return boundedValue;\n  }\n\n  const precision = Math.max(getPrecision(min), getPrecision(step));\n  const factor = 10 ** precision;\n\n  const steppedValue = min + Math.round((boundedValue - min) / step) * step;\n\n  return Math.min(\n    max,\n    Math.max(min, Math.round(steppedValue * factor) / factor),\n  );\n};\n\nconst Slider = ({\n  value,\n  defaultValue,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  size = \"md\",\n  marks,\n  showValue = false,\n  formatValue,\n  className,\n  id,\n  ref,\n  disabled = false,\n  style,\n  \"aria-invalid\": ariaInvalid,\n  \"aria-valuetext\": ariaValueText,\n  ...inputProps\n}: SliderProps) => {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n\n  const resolvedMin = Number.isFinite(min) ? min : 0;\n\n  const requestedMax = Number.isFinite(max) ? max : 100;\n  const resolvedMax = Math.max(resolvedMin, requestedMax);\n\n  const resolvedStep =\n    step === \"any\" ? \"any\" : Number.isFinite(step) && step > 0 ? step : 1;\n\n  const isControlled = value !== undefined;\n\n  const [internalValue, setInternalValue] = useState(() =>\n    normalizeSliderValue(\n      defaultValue ?? (resolvedMin + resolvedMax) / 2,\n      resolvedMin,\n      resolvedMax,\n      resolvedStep,\n    ),\n  );\n\n  const currentValue = normalizeSliderValue(\n    isControlled ? value : internalValue,\n    resolvedMin,\n    resolvedMax,\n    resolvedStep,\n  );\n\n  const progress =\n    resolvedMax > resolvedMin\n      ? ((currentValue - resolvedMin) / (resolvedMax - resolvedMin)) * 100\n      : 0;\n\n  const formattedValue = formatValue?.(currentValue);\n\n  const isInvalid = ariaInvalid === true || ariaInvalid === \"true\";\n\n  const resolvedMarks = (marks ?? [])\n    .filter(\n      (mark) =>\n        Number.isFinite(mark.value) &&\n        mark.value >= resolvedMin &&\n        mark.value <= resolvedMax,\n    )\n    .slice()\n    .sort((a, b) => a.value - b.value);\n\n  const hasMarkLabels = resolvedMarks.some((mark) => mark.label != null);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const nextValue = normalizeSliderValue(\n      event.currentTarget.valueAsNumber,\n      resolvedMin,\n      resolvedMax,\n      resolvedStep,\n    );\n\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n\n    onChange?.(nextValue);\n  };\n\n  return (\n    <div\n      className={cn(\"puzzle-slider\", className)}\n      data-size={size}\n      data-disabled={disabled || undefined}\n      data-invalid={isInvalid || undefined}\n    >\n      {showValue && (\n        <output htmlFor={inputId} className=\"puzzle-slider__value\">\n          {formattedValue ?? currentValue}\n        </output>\n      )}\n\n      <input\n        {...inputProps}\n        ref={ref}\n        id={inputId}\n        className=\"puzzle-slider__input\"\n        type=\"range\"\n        min={resolvedMin}\n        max={resolvedMax}\n        step={resolvedStep}\n        value={currentValue}\n        disabled={disabled}\n        aria-invalid={ariaInvalid}\n        aria-valuetext={ariaValueText ?? formattedValue}\n        style={\n          {\n            ...style,\n            \"--puzzle-slider-progress\": `${progress}%`,\n          } as CSSProperties\n        }\n        onChange={handleChange}\n      />\n\n      {resolvedMarks.length > 0 && (\n        <div\n          className=\"puzzle-slider__marks\"\n          data-has-labels={hasMarkLabels || undefined}\n        >\n          {resolvedMarks.map((mark, index) => {\n            const position =\n              resolvedMax > resolvedMin\n                ? ((mark.value - resolvedMin) / (resolvedMax - resolvedMin)) *\n                  100\n                : 0;\n\n            return (\n              <span\n                key={`${mark.value}-${index}`}\n                className=\"puzzle-slider__mark\"\n                data-edge={\n                  index === 0\n                    ? \"start\"\n                    : index === resolvedMarks.length - 1\n                      ? \"end\"\n                      : undefined\n                }\n                style={{\n                  insetInlineStart: `${position}%`,\n                }}\n              >\n                <span className=\"puzzle-slider__mark-tick\" aria-hidden=\"true\" />\n\n                {mark.label != null && (\n                  <span className=\"puzzle-slider__mark-label\">\n                    {mark.label}\n                  </span>\n                )}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport { Slider, type SliderProps, type SliderMark, type SliderSize };\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/forms/slider/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useId,\n  useState,\n  type ChangeEvent,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport \"./slider.css\";\n\ntype SliderSize = \"sm\" | \"md\" | \"lg\";\n\ntype SliderMark = {\n  /** Numeric position of the mark. */\n  value: number;\n\n  /** Optional visible label below the mark. */\n  label?: ReactNode;\n};\n\ntype SliderProps = Omit<\n  ComponentPropsWithRef<\"input\">,\n  | \"type\"\n  | \"value\"\n  | \"defaultValue\"\n  | \"onChange\"\n  | \"min\"\n  | \"max\"\n  | \"step\"\n  | \"size\"\n  | \"className\"\n> & {\n  /** Controlled numeric value. */\n  value?: number;\n\n  /** Initial value for uncontrolled usage. Defaults to the range midpoint. */\n  defaultValue?: number;\n\n  /** Called whenever the selected value changes. */\n  onChange?: (value: number) => void;\n\n  /** Minimum selectable value. Defaults to 0. */\n  min?: number;\n\n  /** Maximum selectable value. Defaults to 100. */\n  max?: number;\n\n  /** Allowed increment. Use \"any\" to disable step rounding. */\n  step?: number | \"any\";\n\n  /** Visual size of the slider. */\n  size?: SliderSize;\n\n  /** Optional marks displayed below the track. */\n  marks?: readonly SliderMark[];\n\n  /** Displays the current value above the slider. */\n  showValue?: boolean;\n\n  /**\n   * Formats the visible value and supplies aria-valuetext.\n   * An explicitly supplied aria-valuetext takes precedence.\n   */\n  formatValue?: (value: number) => string;\n\n  /** Class applied to the outer slider element. */\n  className?: string;\n};\n\nconst getPrecision = (value: number) => {\n  const [coefficient = \"\", exponent = \"0\"] = String(value).toLowerCase().split(\"e\");\n\n  const decimals = coefficient.split(\".\")[1]?.length ?? 0;\n\n  return Math.min(12, Math.max(0, decimals - Number(exponent)));\n};\n\nconst normalizeSliderValue = (\n  value: number,\n  min: number,\n  max: number,\n  step: number | \"any\",\n) => {\n  if (max <= min) {\n    return min;\n  }\n\n  const boundedValue = Math.min(max, Math.max(min, value));\n\n  if (step === \"any\") {\n    return boundedValue;\n  }\n\n  const precision = Math.max(getPrecision(min), getPrecision(step));\n  const factor = 10 ** precision;\n\n  const steppedValue = min + Math.round((boundedValue - min) / step) * step;\n\n  return Math.min(\n    max,\n    Math.max(min, Math.round(steppedValue * factor) / factor),\n  );\n};\n\nconst Slider = ({\n  value,\n  defaultValue,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  size = \"md\",\n  marks,\n  showValue = false,\n  formatValue,\n  className,\n  id,\n  ref,\n  disabled = false,\n  style,\n  \"aria-invalid\": ariaInvalid,\n  \"aria-valuetext\": ariaValueText,\n  ...inputProps\n}: SliderProps) => {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n\n  const resolvedMin = Number.isFinite(min) ? min : 0;\n\n  const requestedMax = Number.isFinite(max) ? max : 100;\n  const resolvedMax = Math.max(resolvedMin, requestedMax);\n\n  const resolvedStep =\n    step === \"any\" ? \"any\" : Number.isFinite(step) && step > 0 ? step : 1;\n\n  const isControlled = value !== undefined;\n\n  const [internalValue, setInternalValue] = useState(() =>\n    normalizeSliderValue(\n      defaultValue ?? (resolvedMin + resolvedMax) / 2,\n      resolvedMin,\n      resolvedMax,\n      resolvedStep,\n    ),\n  );\n\n  const currentValue = normalizeSliderValue(\n    isControlled ? value : internalValue,\n    resolvedMin,\n    resolvedMax,\n    resolvedStep,\n  );\n\n  const progress =\n    resolvedMax > resolvedMin\n      ? ((currentValue - resolvedMin) / (resolvedMax - resolvedMin)) * 100\n      : 0;\n\n  const formattedValue = formatValue?.(currentValue);\n\n  const isInvalid = ariaInvalid === true || ariaInvalid === \"true\";\n\n  const resolvedMarks = (marks ?? [])\n    .filter(\n      (mark) =>\n        Number.isFinite(mark.value) &&\n        mark.value >= resolvedMin &&\n        mark.value <= resolvedMax,\n    )\n    .slice()\n    .sort((a, b) => a.value - b.value);\n\n  const hasMarkLabels = resolvedMarks.some((mark) => mark.label != null);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const nextValue = normalizeSliderValue(\n      event.currentTarget.valueAsNumber,\n      resolvedMin,\n      resolvedMax,\n      resolvedStep,\n    );\n\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n\n    onChange?.(nextValue);\n  };\n\n  return (\n    <div\n      className={cn(\"puzzle-slider\", className)}\n      data-size={size}\n      data-disabled={disabled || undefined}\n      data-invalid={isInvalid || undefined}\n    >\n      {showValue && (\n        <output htmlFor={inputId} className=\"puzzle-slider__value\">\n          {formattedValue ?? currentValue}\n        </output>\n      )}\n\n      <input\n        {...inputProps}\n        ref={ref}\n        id={inputId}\n        className=\"puzzle-slider__input\"\n        type=\"range\"\n        min={resolvedMin}\n        max={resolvedMax}\n        step={resolvedStep}\n        value={currentValue}\n        disabled={disabled}\n        aria-invalid={ariaInvalid}\n        aria-valuetext={ariaValueText ?? formattedValue}\n        style={\n          {\n            ...style,\n            \"--puzzle-slider-progress\": `${progress}%`,\n          } as CSSProperties\n        }\n        onChange={handleChange}\n      />\n\n      {resolvedMarks.length > 0 && (\n        <div\n          className=\"puzzle-slider__marks\"\n          data-has-labels={hasMarkLabels || undefined}\n        >\n          {resolvedMarks.map((mark, index) => {\n            const position =\n              resolvedMax > resolvedMin\n                ? ((mark.value - resolvedMin) / (resolvedMax - resolvedMin)) *\n                  100\n                : 0;\n\n            return (\n              <span\n                key={`${mark.value}-${index}`}\n                className=\"puzzle-slider__mark\"\n                data-edge={\n                  index === 0\n                    ? \"start\"\n                    : index === resolvedMarks.length - 1\n                      ? \"end\"\n                      : undefined\n                }\n                style={{\n                  insetInlineStart: `${position}%`,\n                }}\n              >\n                <span className=\"puzzle-slider__mark-tick\" aria-hidden=\"true\" />\n\n                {mark.label != null && (\n                  <span className=\"puzzle-slider__mark-label\">\n                    {mark.label}\n                  </span>\n                )}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport { Slider, type SliderProps, type SliderMark, type SliderSize };\n"],"mappings":"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"}

package/dist/components/forms/stepper/index.d.cts

@@ -42,7 +42,9 @@ type StepperProps = Omit<ComponentPropsWithoutRef<"ol">, "children"> & {
   linear?: boolean;
   children: ReactNode;
 };
-declare const Stepper: (({ activeStep, activeStepId, defaultActiveStep, defaultActiveStepId, onStepChange, onStepIdChange, orientation, clickable, linear, children, className, ...rootProps }: StepperProps) => import("react").JSX.Element) & {
-  Step: (_props: StepperStepProps) => null;
+declare const StepperStep: (_props: StepperStepProps) => null;
+declare const StepperRoot: ({ activeStep, activeStepId, defaultActiveStep, defaultActiveStepId, onStepChange, onStepIdChange, orientation, clickable, linear, children, className, ...rootProps }: StepperProps) => import("react").JSX.Element;
+declare const Stepper: typeof StepperRoot & {
+  Step: typeof StepperStep;
 };
 export { Stepper, type StepperOrientation, type StepperProps, type StepperStepProps };

package/dist/components/forms/stepper/index.d.ts

@@ -42,7 +42,9 @@ type StepperProps = Omit<ComponentPropsWithoutRef<"ol">, "children"> & {
   linear?: boolean;
   children: ReactNode;
 };
-declare const Stepper: (({ activeStep, activeStepId, defaultActiveStep, defaultActiveStepId, onStepChange, onStepIdChange, orientation, clickable, linear, children, className, ...rootProps }: StepperProps) => import("react").JSX.Element) & {
-  Step: (_props: StepperStepProps) => null;
+declare const StepperStep: (_props: StepperStepProps) => null;
+declare const StepperRoot: ({ activeStep, activeStepId, defaultActiveStep, defaultActiveStepId, onStepChange, onStepIdChange, orientation, clickable, linear, children, className, ...rootProps }: StepperProps) => import("react").JSX.Element;
+declare const Stepper: typeof StepperRoot & {
+  Step: typeof StepperStep;
 };
 export { Stepper, type StepperOrientation, type StepperProps, type StepperStepProps };

package/dist/components/forms/time-picker/index.cjs

@@ -0,0 +1,108 @@
+"use client";
+const require_time_picker_utils = require("./time-picker.utils.cjs");
+;/* empty css                  */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/forms/time-picker/index.tsx
+const TimePicker = ({ value, defaultValue, onChange, label, description, error, disabled = false, readOnly = false, required = false, name, form, minTime, maxTime, minuteStep = 1, showSeconds = false, secondStep = 1, size = "md", fullWidth = false, rootClassName, className, id, style, onBlur, onFocus, onInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...inputProps }) => {
+	const baseId = (0, react.useId)();
+	const inputId = id ?? `${baseId}-input`;
+	const labelId = `${baseId}-label`;
+	const descriptionId = `${baseId}-description`;
+	const errorId = `${baseId}-error`;
+	const isControlled = value !== void 0;
+	const selectedValue = require_time_picker_utils.normalizeTime(isControlled ? value : defaultValue, showSeconds);
+	const responsiveSize = (0, _puzzle_ui_core.resolveResponsiveValue)(size, "md");
+	const responsiveFullWidth = (0, _puzzle_ui_core.resolveResponsiveValue)(fullWidth, false);
+	const hasError = error !== void 0 && error !== null && error !== false;
+	const isInvalid = hasError || ariaInvalid !== void 0 && ariaInvalid !== false && ariaInvalid !== "false";
+	const resolvedAriaInvalid = isInvalid ? true : ariaInvalid;
+	const errorContent = error === true ? "Invalid time" : error;
+	const resolvedLabelledBy = ariaLabelledBy ?? (label != null ? labelId : void 0);
+	const resolvedDescribedBy = [
+		ariaDescribedBy,
+		description != null ? descriptionId : void 0,
+		hasError ? errorId : void 0
+	].filter(Boolean).join(" ") || void 0;
+	const isConfigurationInvalid = (0, react.useMemo)(() => {
+		const min = require_time_picker_utils.parseTime(minTime);
+		const max = require_time_picker_utils.parseTime(maxTime);
+		return minTime != null && min === null || maxTime != null && max === null || min !== null && max !== null && min > max || !Number.isInteger(minuteStep) || minuteStep < 1 || minuteStep > 60 || !Number.isInteger(secondStep) || secondStep < 1 || secondStep > 60;
+	}, [
+		minTime,
+		maxTime,
+		minuteStep,
+		secondStep
+	]);
+	const step = showSeconds ? secondStep : minuteStep * 60;
+	const handleChange = (event) => {
+		const nextValue = require_time_picker_utils.normalizeTime(event.currentTarget.value, showSeconds);
+		onChange?.(nextValue);
+	};
+	const inputValue = selectedValue ?? "";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _puzzle_ui_core.cn)("puzzle-time-picker", rootClassName),
+		"data-disabled": disabled ? "true" : void 0,
+		"data-readonly": readOnly ? "true" : void 0,
+		"data-invalid": isInvalid ? "true" : void 0,
+		"data-size-mobile": responsiveSize.mobile,
+		"data-size-tablet": responsiveSize.tablet,
+		"data-size-desktop": responsiveSize.desktop,
+		"data-full-width-mobile": String(responsiveFullWidth.mobile),
+		"data-full-width-tablet": String(responsiveFullWidth.tablet),
+		"data-full-width-desktop": String(responsiveFullWidth.desktop),
+		children: [
+			label != null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+				id: labelId,
+				className: "puzzle-time-picker__label",
+				htmlFor: inputId,
+				children: [label, required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "puzzle-time-picker__required",
+					"aria-hidden": "true",
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				...inputProps,
+				id: inputId,
+				type: "time",
+				name,
+				form,
+				value: isControlled ? inputValue : void 0,
+				defaultValue: !isControlled ? inputValue : void 0,
+				disabled: disabled || isConfigurationInvalid,
+				readOnly,
+				required,
+				min: minTime,
+				max: maxTime,
+				step,
+				style,
+				className: (0, _puzzle_ui_core.cn)("puzzle-time-picker__input", className),
+				onChange: handleChange,
+				onBlur,
+				onFocus,
+				onInvalid,
+				"aria-label": ariaLabel,
+				"aria-labelledby": resolvedLabelledBy,
+				"aria-describedby": resolvedDescribedBy,
+				"aria-invalid": resolvedAriaInvalid,
+				"aria-required": required || void 0
+			}),
+			description != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: descriptionId,
+				className: "puzzle-time-picker__description",
+				children: description
+			}),
+			hasError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: errorId,
+				className: "puzzle-time-picker__error",
+				role: "alert",
+				children: errorContent
+			})
+		]
+	});
+};
+exports.TimePicker = TimePicker;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/forms/time-picker/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useId","normalizeTime","resolveResponsiveValue","useMemo","parseTime","cn"],"sources":["../../../../src/components/forms/time-picker/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useId, useMemo, type ChangeEvent } from \"react\";\n\nimport { cn, resolveResponsiveValue } from \"@puzzle-ui/core\";\n\nimport { normalizeTime, parseTime } from \"./time-picker.utils\";\n\nimport type { TimePickerProps } from \"./time-picker.types\";\n\nimport \"./time-picker.css\";\n\nconst TimePicker = ({\n  value,\n  defaultValue,\n  onChange,\n  label,\n  description,\n  error,\n  disabled = false,\n  readOnly = false,\n  required = false,\n  name,\n  form,\n  minTime,\n  maxTime,\n  minuteStep = 1,\n  showSeconds = false,\n  secondStep = 1,\n  size = \"md\",\n  fullWidth = false,\n  rootClassName,\n  className,\n  id,\n  style,\n  onBlur,\n  onFocus,\n  onInvalid,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-invalid\": ariaInvalid,\n  ...inputProps\n}: TimePickerProps) => {\n  const baseId = useId();\n\n  const inputId = id ?? `${baseId}-input`;\n  const labelId = `${baseId}-label`;\n  const descriptionId = `${baseId}-description`;\n  const errorId = `${baseId}-error`;\n\n  const isControlled = value !== undefined;\n\n  const selectedValue = normalizeTime(\n    isControlled ? value : defaultValue,\n    showSeconds,\n  );\n\n  const responsiveSize = resolveResponsiveValue(size, \"md\");\n  const responsiveFullWidth = resolveResponsiveValue(fullWidth, false);\n\n  const hasError = error !== undefined && error !== null && error !== false;\n\n  const isAriaInvalid =\n    ariaInvalid !== undefined &&\n    ariaInvalid !== false &&\n    ariaInvalid !== \"false\";\n\n  const isInvalid = hasError || isAriaInvalid;\n\n  const resolvedAriaInvalid = isInvalid ? true : ariaInvalid;\n\n  const errorContent = error === true ? \"Invalid time\" : error;\n\n  const resolvedLabelledBy =\n    ariaLabelledBy ?? (label != null ? labelId : undefined);\n\n  const resolvedDescribedBy =\n    [\n      ariaDescribedBy,\n      description != null ? descriptionId : undefined,\n      hasError ? errorId : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \") || undefined;\n\n  const isConfigurationInvalid = useMemo(() => {\n    const min = parseTime(minTime);\n    const max = parseTime(maxTime);\n\n    return (\n      (minTime != null && min === null) ||\n      (maxTime != null && max === null) ||\n      (min !== null && max !== null && min > max) ||\n      !Number.isInteger(minuteStep) ||\n      minuteStep < 1 ||\n      minuteStep > 60 ||\n      !Number.isInteger(secondStep) ||\n      secondStep < 1 ||\n      secondStep > 60\n    );\n  }, [minTime, maxTime, minuteStep, secondStep]);\n\n  const step = showSeconds ? secondStep : minuteStep * 60;\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const nextValue = normalizeTime(event.currentTarget.value, showSeconds);\n\n    onChange?.(nextValue);\n  };\n\n  const inputValue = selectedValue ?? \"\";\n\n  return (\n    <div\n      className={cn(\"puzzle-time-picker\", rootClassName)}\n      data-disabled={disabled ? \"true\" : undefined}\n      data-readonly={readOnly ? \"true\" : undefined}\n      data-invalid={isInvalid ? \"true\" : undefined}\n      data-size-mobile={responsiveSize.mobile}\n      data-size-tablet={responsiveSize.tablet}\n      data-size-desktop={responsiveSize.desktop}\n      data-full-width-mobile={String(responsiveFullWidth.mobile)}\n      data-full-width-tablet={String(responsiveFullWidth.tablet)}\n      data-full-width-desktop={String(responsiveFullWidth.desktop)}\n    >\n      {label != null && (\n        <label\n          id={labelId}\n          className=\"puzzle-time-picker__label\"\n          htmlFor={inputId}\n        >\n          {label}\n          {required && (\n            <span className=\"puzzle-time-picker__required\" aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n\n      <input\n        {...inputProps}\n        id={inputId}\n        type=\"time\"\n        name={name}\n        form={form}\n        value={isControlled ? inputValue : undefined}\n        defaultValue={!isControlled ? inputValue : undefined}\n        disabled={disabled || isConfigurationInvalid}\n        readOnly={readOnly}\n        required={required}\n        min={minTime}\n        max={maxTime}\n        step={step}\n        style={style}\n        className={cn(\"puzzle-time-picker__input\", className)}\n        onChange={handleChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onInvalid={onInvalid}\n        aria-label={ariaLabel}\n        aria-labelledby={resolvedLabelledBy}\n        aria-describedby={resolvedDescribedBy}\n        aria-invalid={resolvedAriaInvalid}\n        aria-required={required || undefined}\n      />\n\n      {description != null && (\n        <div id={descriptionId} className=\"puzzle-time-picker__description\">\n          {description}\n        </div>\n      )}\n\n      {hasError && (\n        <div id={errorId} className=\"puzzle-time-picker__error\" role=\"alert\">\n          {errorContent}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport { TimePicker };\nexport type { TimePickerProps, TimePickerSize } from \"./time-picker.types\";\n"],"mappings":"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"}

package/dist/components/forms/time-picker/index.d.cts

@@ -0,0 +1,3 @@
+import { TimePickerProps, TimePickerSize } from "./time-picker.types.cjs";
+declare const TimePicker: ({ value, defaultValue, onChange, label, description, error, disabled, readOnly, required, name, form, minTime, maxTime, minuteStep, showSeconds, secondStep, size, fullWidth, rootClassName, className, id, style, onBlur, onFocus, onInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...inputProps }: TimePickerProps) => import("react").JSX.Element;
+export { TimePicker, type TimePickerProps, type TimePickerSize };

package/dist/components/forms/time-picker/index.d.ts

@@ -0,0 +1,3 @@
+import { TimePickerProps, TimePickerSize } from "./time-picker.types.js";
+declare const TimePicker: ({ value, defaultValue, onChange, label, description, error, disabled, readOnly, required, name, form, minTime, maxTime, minuteStep, showSeconds, secondStep, size, fullWidth, rootClassName, className, id, style, onBlur, onFocus, onInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...inputProps }: TimePickerProps) => import("react").JSX.Element;
+export { TimePicker, type TimePickerProps, type TimePickerSize };

package/dist/components/forms/time-picker/index.js

@@ -0,0 +1,108 @@
+"use client";
+import { normalizeTime, parseTime } from "./time-picker.utils.js";
+import "./time-picker.css";
+import { cn, resolveResponsiveValue } from "@puzzle-ui/core";
+import { useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/forms/time-picker/index.tsx
+const TimePicker = ({ value, defaultValue, onChange, label, description, error, disabled = false, readOnly = false, required = false, name, form, minTime, maxTime, minuteStep = 1, showSeconds = false, secondStep = 1, size = "md", fullWidth = false, rootClassName, className, id, style, onBlur, onFocus, onInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...inputProps }) => {
+	const baseId = useId();
+	const inputId = id ?? `${baseId}-input`;
+	const labelId = `${baseId}-label`;
+	const descriptionId = `${baseId}-description`;
+	const errorId = `${baseId}-error`;
+	const isControlled = value !== void 0;
+	const selectedValue = normalizeTime(isControlled ? value : defaultValue, showSeconds);
+	const responsiveSize = resolveResponsiveValue(size, "md");
+	const responsiveFullWidth = resolveResponsiveValue(fullWidth, false);
+	const hasError = error !== void 0 && error !== null && error !== false;
+	const isInvalid = hasError || ariaInvalid !== void 0 && ariaInvalid !== false && ariaInvalid !== "false";
+	const resolvedAriaInvalid = isInvalid ? true : ariaInvalid;
+	const errorContent = error === true ? "Invalid time" : error;
+	const resolvedLabelledBy = ariaLabelledBy ?? (label != null ? labelId : void 0);
+	const resolvedDescribedBy = [
+		ariaDescribedBy,
+		description != null ? descriptionId : void 0,
+		hasError ? errorId : void 0
+	].filter(Boolean).join(" ") || void 0;
+	const isConfigurationInvalid = useMemo(() => {
+		const min = parseTime(minTime);
+		const max = parseTime(maxTime);
+		return minTime != null && min === null || maxTime != null && max === null || min !== null && max !== null && min > max || !Number.isInteger(minuteStep) || minuteStep < 1 || minuteStep > 60 || !Number.isInteger(secondStep) || secondStep < 1 || secondStep > 60;
+	}, [
+		minTime,
+		maxTime,
+		minuteStep,
+		secondStep
+	]);
+	const step = showSeconds ? secondStep : minuteStep * 60;
+	const handleChange = (event) => {
+		const nextValue = normalizeTime(event.currentTarget.value, showSeconds);
+		onChange?.(nextValue);
+	};
+	const inputValue = selectedValue ?? "";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("puzzle-time-picker", rootClassName),
+		"data-disabled": disabled ? "true" : void 0,
+		"data-readonly": readOnly ? "true" : void 0,
+		"data-invalid": isInvalid ? "true" : void 0,
+		"data-size-mobile": responsiveSize.mobile,
+		"data-size-tablet": responsiveSize.tablet,
+		"data-size-desktop": responsiveSize.desktop,
+		"data-full-width-mobile": String(responsiveFullWidth.mobile),
+		"data-full-width-tablet": String(responsiveFullWidth.tablet),
+		"data-full-width-desktop": String(responsiveFullWidth.desktop),
+		children: [
+			label != null && /* @__PURE__ */ jsxs("label", {
+				id: labelId,
+				className: "puzzle-time-picker__label",
+				htmlFor: inputId,
+				children: [label, required && /* @__PURE__ */ jsx("span", {
+					className: "puzzle-time-picker__required",
+					"aria-hidden": "true",
+					children: "*"
+				})]
+			}),
+			/* @__PURE__ */ jsx("input", {
+				...inputProps,
+				id: inputId,
+				type: "time",
+				name,
+				form,
+				value: isControlled ? inputValue : void 0,
+				defaultValue: !isControlled ? inputValue : void 0,
+				disabled: disabled || isConfigurationInvalid,
+				readOnly,
+				required,
+				min: minTime,
+				max: maxTime,
+				step,
+				style,
+				className: cn("puzzle-time-picker__input", className),
+				onChange: handleChange,
+				onBlur,
+				onFocus,
+				onInvalid,
+				"aria-label": ariaLabel,
+				"aria-labelledby": resolvedLabelledBy,
+				"aria-describedby": resolvedDescribedBy,
+				"aria-invalid": resolvedAriaInvalid,
+				"aria-required": required || void 0
+			}),
+			description != null && /* @__PURE__ */ jsx("div", {
+				id: descriptionId,
+				className: "puzzle-time-picker__description",
+				children: description
+			}),
+			hasError && /* @__PURE__ */ jsx("div", {
+				id: errorId,
+				className: "puzzle-time-picker__error",
+				role: "alert",
+				children: errorContent
+			})
+		]
+	});
+};
+export { TimePicker };
+
+//# sourceMappingURL=index.js.map

package/dist/components/forms/time-picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/forms/time-picker/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useId, useMemo, type ChangeEvent } from \"react\";\n\nimport { cn, resolveResponsiveValue } from \"@puzzle-ui/core\";\n\nimport { normalizeTime, parseTime } from \"./time-picker.utils\";\n\nimport type { TimePickerProps } from \"./time-picker.types\";\n\nimport \"./time-picker.css\";\n\nconst TimePicker = ({\n  value,\n  defaultValue,\n  onChange,\n  label,\n  description,\n  error,\n  disabled = false,\n  readOnly = false,\n  required = false,\n  name,\n  form,\n  minTime,\n  maxTime,\n  minuteStep = 1,\n  showSeconds = false,\n  secondStep = 1,\n  size = \"md\",\n  fullWidth = false,\n  rootClassName,\n  className,\n  id,\n  style,\n  onBlur,\n  onFocus,\n  onInvalid,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-invalid\": ariaInvalid,\n  ...inputProps\n}: TimePickerProps) => {\n  const baseId = useId();\n\n  const inputId = id ?? `${baseId}-input`;\n  const labelId = `${baseId}-label`;\n  const descriptionId = `${baseId}-description`;\n  const errorId = `${baseId}-error`;\n\n  const isControlled = value !== undefined;\n\n  const selectedValue = normalizeTime(\n    isControlled ? value : defaultValue,\n    showSeconds,\n  );\n\n  const responsiveSize = resolveResponsiveValue(size, \"md\");\n  const responsiveFullWidth = resolveResponsiveValue(fullWidth, false);\n\n  const hasError = error !== undefined && error !== null && error !== false;\n\n  const isAriaInvalid =\n    ariaInvalid !== undefined &&\n    ariaInvalid !== false &&\n    ariaInvalid !== \"false\";\n\n  const isInvalid = hasError || isAriaInvalid;\n\n  const resolvedAriaInvalid = isInvalid ? true : ariaInvalid;\n\n  const errorContent = error === true ? \"Invalid time\" : error;\n\n  const resolvedLabelledBy =\n    ariaLabelledBy ?? (label != null ? labelId : undefined);\n\n  const resolvedDescribedBy =\n    [\n      ariaDescribedBy,\n      description != null ? descriptionId : undefined,\n      hasError ? errorId : undefined,\n    ]\n      .filter(Boolean)\n      .join(\" \") || undefined;\n\n  const isConfigurationInvalid = useMemo(() => {\n    const min = parseTime(minTime);\n    const max = parseTime(maxTime);\n\n    return (\n      (minTime != null && min === null) ||\n      (maxTime != null && max === null) ||\n      (min !== null && max !== null && min > max) ||\n      !Number.isInteger(minuteStep) ||\n      minuteStep < 1 ||\n      minuteStep > 60 ||\n      !Number.isInteger(secondStep) ||\n      secondStep < 1 ||\n      secondStep > 60\n    );\n  }, [minTime, maxTime, minuteStep, secondStep]);\n\n  const step = showSeconds ? secondStep : minuteStep * 60;\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const nextValue = normalizeTime(event.currentTarget.value, showSeconds);\n\n    onChange?.(nextValue);\n  };\n\n  const inputValue = selectedValue ?? \"\";\n\n  return (\n    <div\n      className={cn(\"puzzle-time-picker\", rootClassName)}\n      data-disabled={disabled ? \"true\" : undefined}\n      data-readonly={readOnly ? \"true\" : undefined}\n      data-invalid={isInvalid ? \"true\" : undefined}\n      data-size-mobile={responsiveSize.mobile}\n      data-size-tablet={responsiveSize.tablet}\n      data-size-desktop={responsiveSize.desktop}\n      data-full-width-mobile={String(responsiveFullWidth.mobile)}\n      data-full-width-tablet={String(responsiveFullWidth.tablet)}\n      data-full-width-desktop={String(responsiveFullWidth.desktop)}\n    >\n      {label != null && (\n        <label\n          id={labelId}\n          className=\"puzzle-time-picker__label\"\n          htmlFor={inputId}\n        >\n          {label}\n          {required && (\n            <span className=\"puzzle-time-picker__required\" aria-hidden=\"true\">\n              *\n            </span>\n          )}\n        </label>\n      )}\n\n      <input\n        {...inputProps}\n        id={inputId}\n        type=\"time\"\n        name={name}\n        form={form}\n        value={isControlled ? inputValue : undefined}\n        defaultValue={!isControlled ? inputValue : undefined}\n        disabled={disabled || isConfigurationInvalid}\n        readOnly={readOnly}\n        required={required}\n        min={minTime}\n        max={maxTime}\n        step={step}\n        style={style}\n        className={cn(\"puzzle-time-picker__input\", className)}\n        onChange={handleChange}\n        onBlur={onBlur}\n        onFocus={onFocus}\n        onInvalid={onInvalid}\n        aria-label={ariaLabel}\n        aria-labelledby={resolvedLabelledBy}\n        aria-describedby={resolvedDescribedBy}\n        aria-invalid={resolvedAriaInvalid}\n        aria-required={required || undefined}\n      />\n\n      {description != null && (\n        <div id={descriptionId} className=\"puzzle-time-picker__description\">\n          {description}\n        </div>\n      )}\n\n      {hasError && (\n        <div id={errorId} className=\"puzzle-time-picker__error\" role=\"alert\">\n          {errorContent}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport { TimePicker };\nexport type { TimePickerProps, TimePickerSize } from \"./time-picker.types\";\n"],"mappings":";;;;;;;AAYA,MAAM,cAAc,EAClB,OACA,cACA,UACA,OACA,aACA,OACA,WAAW,OACX,WAAW,OACX,WAAW,OACX,MACA,MACA,SACA,SACA,aAAa,GACb,cAAc,OACd,aAAa,GACb,OAAO,MACP,YAAY,OACZ,eACA,WACA,IACA,OACA,QACA,SACA,WACA,cAAc,WACd,mBAAmB,gBACnB,oBAAoB,iBACpB,gBAAgB,aAChB,GAAG,iBACkB;CACrB,MAAM,SAAS,MAAM;CAErB,MAAM,UAAU,MAAM,GAAG,OAAO;CAChC,MAAM,UAAU,GAAG,OAAO;CAC1B,MAAM,gBAAgB,GAAG,OAAO;CAChC,MAAM,UAAU,GAAG,OAAO;CAE1B,MAAM,eAAe,UAAU,KAAA;CAE/B,MAAM,gBAAgB,cACpB,eAAe,QAAQ,cACvB,WACF;CAEA,MAAM,iBAAiB,uBAAuB,MAAM,IAAI;CACxD,MAAM,sBAAsB,uBAAuB,WAAW,KAAK;CAEnE,MAAM,WAAW,UAAU,KAAA,KAAa,UAAU,QAAQ,UAAU;CAOpE,MAAM,YAAY,YAJhB,gBAAgB,KAAA,KAChB,gBAAgB,SAChB,gBAAgB;CAIlB,MAAM,sBAAsB,YAAY,OAAO;CAE/C,MAAM,eAAe,UAAU,OAAO,iBAAiB;CAEvD,MAAM,qBACJ,mBAAmB,SAAS,OAAO,UAAU,KAAA;CAE/C,MAAM,sBACJ;EACE;EACA,eAAe,OAAO,gBAAgB,KAAA;EACtC,WAAW,UAAU,KAAA;CACvB,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,KAAK,KAAA;CAElB,MAAM,yBAAyB,cAAc;EAC3C,MAAM,MAAM,UAAU,OAAO;EAC7B,MAAM,MAAM,UAAU,OAAO;EAE7B,OACG,WAAW,QAAQ,QAAQ,QAC3B,WAAW,QAAQ,QAAQ,QAC3B,QAAQ,QAAQ,QAAQ,QAAQ,MAAM,OACvC,CAAC,OAAO,UAAU,UAAU,KAC5B,aAAa,KACb,aAAa,MACb,CAAC,OAAO,UAAU,UAAU,KAC5B,aAAa,KACb,aAAa;CAEjB,GAAG;EAAC;EAAS;EAAS;EAAY;CAAU,CAAC;CAE7C,MAAM,OAAO,cAAc,aAAa,aAAa;CAErD,MAAM,gBAAgB,UAAyC;EAC7D,MAAM,YAAY,cAAc,MAAM,cAAc,OAAO,WAAW;EAEtE,WAAW,SAAS;CACtB;CAEA,MAAM,aAAa,iBAAiB;CAEpC,OACE,qBAAC,OAAD;EACE,WAAW,GAAG,sBAAsB,aAAa;EACjD,iBAAe,WAAW,SAAS,KAAA;EACnC,iBAAe,WAAW,SAAS,KAAA;EACnC,gBAAc,YAAY,SAAS,KAAA;EACnC,oBAAkB,eAAe;EACjC,oBAAkB,eAAe;EACjC,qBAAmB,eAAe;EAClC,0BAAwB,OAAO,oBAAoB,MAAM;EACzD,0BAAwB,OAAO,oBAAoB,MAAM;EACzD,2BAAyB,OAAO,oBAAoB,OAAO;EAV7D,UAAA;GAYG,SAAS,QACR,qBAAC,SAAD;IACE,IAAI;IACJ,WAAU;IACV,SAAS;IAHX,UAAA,CAKG,OACA,YACC,oBAAC,QAAD;KAAM,WAAU;KAA+B,eAAY;KAAO,UAAA;IAE5D,CAAA,CAEH;;GAGT,oBAAC,SAAD;IACE,GAAI;IACJ,IAAI;IACJ,MAAK;IACC;IACA;IACN,OAAO,eAAe,aAAa,KAAA;IACnC,cAAc,CAAC,eAAe,aAAa,KAAA;IAC3C,UAAU,YAAY;IACZ;IACA;IACV,KAAK;IACL,KAAK;IACC;IACC;IACP,WAAW,GAAG,6BAA6B,SAAS;IACpD,UAAU;IACF;IACC;IACE;IACX,cAAY;IACZ,mBAAiB;IACjB,oBAAkB;IAClB,gBAAc;IACd,iBAAe,YAAY,KAAA;GAC5B,CAAA;GAEA,eAAe,QACd,oBAAC,OAAD;IAAK,IAAI;IAAe,WAAU;IAC/B,UAAA;GACE,CAAA;GAGN,YACC,oBAAC,OAAD;IAAK,IAAI;IAAS,WAAU;IAA4B,MAAK;IAC1D,UAAA;GACE,CAAA;EAEJ;;AAET"}

package/dist/components/forms/time-picker/time-picker.css

@@ -0,0 +1,166 @@
+.puzzle-time-picker {
+  --puzzle-time-picker-height: 2.5rem;
+  --puzzle-time-picker-padding: var(--puzzle-space-3, .75rem);
+  --puzzle-time-picker-font-size: var(--puzzle-font-size-sm, .875rem);
+  gap: var(--puzzle-space-1, .25rem);
+  min-width: 0;
+  color: var(--puzzle-color-text);
+  flex-direction: column;
+  font-family: inherit;
+  display: inline-flex;
+}
+
+.puzzle-time-picker[data-size-mobile="sm"] {
+  --puzzle-time-picker-height: 2rem;
+  --puzzle-time-picker-padding: var(--puzzle-space-2, .5rem);
+  --puzzle-time-picker-font-size: var(--puzzle-font-size-xs, .75rem);
+}
+
+.puzzle-time-picker[data-size-mobile="md"] {
+  --puzzle-time-picker-height: 2.5rem;
+  --puzzle-time-picker-padding: var(--puzzle-space-3, .75rem);
+  --puzzle-time-picker-font-size: var(--puzzle-font-size-sm, .875rem);
+}
+
+.puzzle-time-picker[data-size-mobile="lg"] {
+  --puzzle-time-picker-height: 3rem;
+  --puzzle-time-picker-padding: var(--puzzle-space-4, 1rem);
+  --puzzle-time-picker-font-size: var(--puzzle-font-size-base, 1rem);
+}
+
+@media (width >= 768px) {
+  .puzzle-time-picker[data-size-tablet="sm"] {
+    --puzzle-time-picker-height: 2rem;
+    --puzzle-time-picker-padding: var(--puzzle-space-2, .5rem);
+    --puzzle-time-picker-font-size: var(--puzzle-font-size-xs, .75rem);
+  }
+
+  .puzzle-time-picker[data-size-tablet="md"] {
+    --puzzle-time-picker-height: 2.5rem;
+    --puzzle-time-picker-padding: var(--puzzle-space-3, .75rem);
+    --puzzle-time-picker-font-size: var(--puzzle-font-size-sm, .875rem);
+  }
+
+  .puzzle-time-picker[data-size-tablet="lg"] {
+    --puzzle-time-picker-height: 3rem;
+    --puzzle-time-picker-padding: var(--puzzle-space-4, 1rem);
+    --puzzle-time-picker-font-size: var(--puzzle-font-size-base, 1rem);
+  }
+
+  .puzzle-time-picker[data-full-width-tablet="true"] {
+    width: 100%;
+  }
+
+  .puzzle-time-picker[data-full-width-tablet="false"] {
+    width: auto;
+  }
+}
+
+@media (width >= 1024px) {
+  .puzzle-time-picker[data-size-desktop="sm"] {
+    --puzzle-time-picker-height: 2rem;
+    --puzzle-time-picker-padding: var(--puzzle-space-2, .5rem);
+    --puzzle-time-picker-font-size: var(--puzzle-font-size-xs, .75rem);
+  }
+
+  .puzzle-time-picker[data-size-desktop="md"] {
+    --puzzle-time-picker-height: 2.5rem;
+    --puzzle-time-picker-padding: var(--puzzle-space-3, .75rem);
+    --puzzle-time-picker-font-size: var(--puzzle-font-size-sm, .875rem);
+  }
+
+  .puzzle-time-picker[data-size-desktop="lg"] {
+    --puzzle-time-picker-height: 3rem;
+    --puzzle-time-picker-padding: var(--puzzle-space-4, 1rem);
+    --puzzle-time-picker-font-size: var(--puzzle-font-size-base, 1rem);
+  }
+
+  .puzzle-time-picker[data-full-width-desktop="true"] {
+    width: 100%;
+  }
+
+  .puzzle-time-picker[data-full-width-desktop="false"] {
+    width: auto;
+  }
+}
+
+.puzzle-time-picker[data-full-width-mobile="true"] {
+  width: 100%;
+}
+
+.puzzle-time-picker__label {
+  color: var(--puzzle-color-text);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  font-weight: var(--puzzle-font-weight-medium, 500);
+  line-height: var(--puzzle-font-line-height-body2, 1.4);
+  display: block;
+}
+
+.puzzle-time-picker__required {
+  color: var(--puzzle-color-danger);
+  margin-inline-start: .2em;
+}
+
+.puzzle-time-picker__input {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: var(--puzzle-time-picker-height);
+  padding-inline: var(--puzzle-time-picker-padding);
+  border: 1px solid var(--puzzle-color-border);
+  border-radius: var(--puzzle-radius-md, .5rem);
+  color: var(--puzzle-color-text);
+  background: var(--puzzle-color-surface);
+  font-family: inherit;
+  font-size: var(--puzzle-time-picker-font-size);
+  line-height: var(--puzzle-font-line-height-body2, 1.4);
+  transition: background-color var(--puzzle-duration-fast, .15s) ease,
+        border-color var(--puzzle-duration-fast, .15s) ease,
+        box-shadow var(--puzzle-duration-fast, .15s) ease;
+  display: block;
+}
+
+.puzzle-time-picker__input:hover:not(:disabled) {
+  border-color: var(--puzzle-color-border-strong, var(--puzzle-color-border));
+}
+
+.puzzle-time-picker__input:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 2px;
+  border-color: var(--puzzle-color-primary);
+}
+
+.puzzle-time-picker[data-invalid="true"] .puzzle-time-picker__input {
+  border-color: var(--puzzle-color-danger);
+}
+
+.puzzle-time-picker[data-invalid="true"] .puzzle-time-picker__input:focus-visible {
+  outline-color: var(--puzzle-color-danger);
+}
+
+.puzzle-time-picker__input:disabled {
+  opacity: .55;
+  cursor: not-allowed;
+}
+
+.puzzle-time-picker__input:read-only {
+  cursor: default;
+}
+
+.puzzle-time-picker__description {
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  line-height: var(--puzzle-font-line-height-body2, 1.4);
+}
+
+.puzzle-time-picker__error {
+  color: var(--puzzle-color-danger);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  line-height: var(--puzzle-font-line-height-body2, 1.4);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-time-picker__input {
+    transition: none;
+  }
+}

package/dist/components/forms/time-picker/time-picker.types.d.cts

@@ -0,0 +1,34 @@
+import { InputHTMLAttributes, ReactNode } from "react";
+import { ResponsiveValue } from "@puzzle-ui/core";
+type TimePickerSize = "sm" | "md" | "lg";
+type TimePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "value" | "defaultValue" | "onChange" | "size" | "min" | "max" | "step"> & {
+  /** Selected time in HH:mm or HH:mm:ss format. */
+  value?: string | null;
+  /** Initial selected time for uncontrolled usage. */
+  defaultValue?: string | null;
+  /** Called whenever the selected time changes. */
+  onChange?: (value: string | null) => void;
+  /** Visible field label. */
+  label?: ReactNode;
+  /** Supporting text displayed below the control. */
+  description?: ReactNode;
+  /** Validation error. Set to true to use the default message. */
+  error?: ReactNode | boolean;
+  /** Earliest selectable time, inclusive. */
+  minTime?: string;
+  /** Latest selectable time, inclusive. */
+  maxTime?: string;
+  /** Minute interval when seconds are hidden. */
+  minuteStep?: number;
+  /** Display seconds in the time input. */
+  showSeconds?: boolean;
+  /** Second interval when seconds are displayed. */
+  secondStep?: number;
+  /** Responsive input size. */
+  size?: ResponsiveValue<TimePickerSize>;
+  /** Responsive full-width layout. */
+  fullWidth?: ResponsiveValue<boolean>;
+  /** Additional class applied to the outer field. */
+  rootClassName?: string;
+};
+export type { TimePickerProps, TimePickerSize };

package/dist/components/forms/time-picker/time-picker.types.d.ts

@@ -0,0 +1,34 @@
+import { ResponsiveValue } from "@puzzle-ui/core";
+import { InputHTMLAttributes, ReactNode } from "react";
+type TimePickerSize = "sm" | "md" | "lg";
+type TimePickerProps = Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "type" | "value" | "defaultValue" | "onChange" | "size" | "min" | "max" | "step"> & {
+  /** Selected time in HH:mm or HH:mm:ss format. */
+  value?: string | null;
+  /** Initial selected time for uncontrolled usage. */
+  defaultValue?: string | null;
+  /** Called whenever the selected time changes. */
+  onChange?: (value: string | null) => void;
+  /** Visible field label. */
+  label?: ReactNode;
+  /** Supporting text displayed below the control. */
+  description?: ReactNode;
+  /** Validation error. Set to true to use the default message. */
+  error?: ReactNode | boolean;
+  /** Earliest selectable time, inclusive. */
+  minTime?: string;
+  /** Latest selectable time, inclusive. */
+  maxTime?: string;
+  /** Minute interval when seconds are hidden. */
+  minuteStep?: number;
+  /** Display seconds in the time input. */
+  showSeconds?: boolean;
+  /** Second interval when seconds are displayed. */
+  secondStep?: number;
+  /** Responsive input size. */
+  size?: ResponsiveValue<TimePickerSize>;
+  /** Responsive full-width layout. */
+  fullWidth?: ResponsiveValue<boolean>;
+  /** Additional class applied to the outer field. */
+  rootClassName?: string;
+};
+export type { TimePickerProps, TimePickerSize };