@puzzle-ui/ui 0.4.0 → 0.5.1

package/dist/components/data-display/rating/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/data-display/rating/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState, type CSSProperties, type KeyboardEvent } from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\nimport { Icon } from \"@puzzle-ui/icons\";\n\nimport type { RatingProps, RatingSize } from \"./rating.types\";\n\nimport {\n  getNextRating,\n  getRatingStarState,\n  normalizeRating,\n} from \"./rating.utils\";\n\nimport \"./rating.css\";\n\nconst ICONS = {\n  full: \"ph:star-fill\",\n  half: \"ph:star-half-fill\",\n  empty: \"ph:star\",\n} as const;\n\nconst SIZE_MAP = {\n  sm: 16,\n  md: 20,\n  lg: 24,\n} as const;\n\nconst Rating = ({\n  value,\n  defaultValue = 0,\n  onValueChange,\n  max = 5,\n  precision = 0.5,\n  size = \"md\",\n  readOnly = false,\n  disabled = false,\n  color = \"var(--puzzle-color-warning, #FABC0A)\",\n  emptyColor = \"var(--puzzle-color-border)\",\n  className,\n  style,\n  \"aria-label\": ariaLabel = \"Rating\",\n  onKeyDown,\n  ...props\n}: RatingProps) => {\n  if (!Number.isInteger(max) || max < 1 || max > 10) {\n    throw new Error(\"Rating max must be an integer between 1 and 10.\");\n  }\n\n  const isControlled = value !== undefined;\n\n  const [internalValue, setInternalValue] = useState(() =>\n    normalizeRating(defaultValue, max, precision),\n  );\n\n  const currentValue = normalizeRating(\n    isControlled ? value : internalValue,\n    max,\n    precision,\n  );\n\n  const commitValue = (nextValue: number) => {\n    if (disabled || readOnly) {\n      return;\n    }\n\n    const next = normalizeRating(nextValue, max, precision);\n\n    if (next === currentValue) {\n      return;\n    }\n\n    if (!isControlled) {\n      setInternalValue(next);\n    }\n\n    onValueChange?.(next);\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n\n    if (event.defaultPrevented || disabled || readOnly) {\n      return;\n    }\n\n    const nextValue = getNextRating(currentValue, event.key, max, precision);\n\n    if (nextValue === undefined) {\n      return;\n    }\n\n    event.preventDefault();\n    commitValue(nextValue);\n  };\n\n  const classes = cn(\n    \"puzzle-rating\",\n    disabled && \"puzzle-rating-disabled\",\n    readOnly && \"puzzle-rating-readonly\",\n    className,\n  );\n\n  return (\n    <div\n      {...props}\n      className={classes}\n      style={\n        {\n          ...style,\n          \"--puzzle-rating-color\": color,\n          \"--puzzle-rating-empty-color\": emptyColor,\n        } as CSSProperties\n      }\n      role={readOnly ? \"img\" : \"slider\"}\n      tabIndex={disabled || readOnly ? undefined : 0}\n      aria-label={\n        readOnly\n          ? `${ariaLabel}: ${currentValue} out of ${max} stars`\n          : ariaLabel\n      }\n      aria-valuemin={readOnly ? undefined : 0}\n      aria-valuemax={readOnly ? undefined : max}\n      aria-valuenow={readOnly ? undefined : currentValue}\n      aria-valuetext={\n        readOnly ? undefined : `${currentValue} out of ${max} stars`\n      }\n      aria-disabled={disabled || undefined}\n      aria-readonly={readOnly || undefined}\n      onKeyDown={handleKeyDown}\n      data-size={size}\n      data-disabled={disabled || undefined}\n      data-readonly={readOnly || undefined}\n    >\n      {Array.from({ length: max }, (_, index) => {\n        const state = getRatingStarState(currentValue, index);\n\n        return (\n          <span\n            key={index}\n            className=\"puzzle-rating__star\"\n            data-state={state}\n            aria-hidden=\"true\"\n            onClick={(event) => {\n              const rect = event.currentTarget.getBoundingClientRect();\n\n              const isHalf =\n                precision === 0.5 && event.clientX < rect.left + rect.width / 2;\n\n              commitValue(index + (isHalf ? 0.5 : 1));\n            }}\n          >\n            <Icon\n              name={ICONS[state]}\n              size={SIZE_MAP[size]}\n              aria-hidden=\"true\"\n              focusable=\"false\"\n            />\n          </span>\n        );\n      })}\n    </div>\n  );\n};\n\nexport { Rating, type RatingProps, type RatingSize };\n"],"mappings":";;;;;;;;AAiBA,MAAM,QAAQ;CACZ,MAAM;CACN,MAAM;CACN,OAAO;AACT;AAEA,MAAM,WAAW;CACf,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAEA,MAAM,UAAU,EACd,OACA,eAAe,GACf,eACA,MAAM,GACN,YAAY,IACZ,OAAO,MACP,WAAW,OACX,WAAW,OACX,QAAQ,wCACR,aAAa,8BACb,WACA,OACA,cAAc,YAAY,UAC1B,WACA,GAAG,YACc;CACjB,IAAI,CAAC,OAAO,UAAU,GAAG,KAAK,MAAM,KAAK,MAAM,IAC7C,MAAM,IAAI,MAAM,iDAAiD;CAGnE,MAAM,eAAe,UAAU,KAAA;CAE/B,MAAM,CAAC,eAAe,oBAAoB,eACxC,gBAAgB,cAAc,KAAK,SAAS,CAC9C;CAEA,MAAM,eAAe,gBACnB,eAAe,QAAQ,eACvB,KACA,SACF;CAEA,MAAM,eAAe,cAAsB;EACzC,IAAI,YAAY,UACd;EAGF,MAAM,OAAO,gBAAgB,WAAW,KAAK,SAAS;EAEtD,IAAI,SAAS,cACX;EAGF,IAAI,CAAC,cACH,iBAAiB,IAAI;EAGvB,gBAAgB,IAAI;CACtB;CAEA,MAAM,iBAAiB,UAAyC;EAC9D,YAAY,KAAK;EAEjB,IAAI,MAAM,oBAAoB,YAAY,UACxC;EAGF,MAAM,YAAY,cAAc,cAAc,MAAM,KAAK,KAAK,SAAS;EAEvE,IAAI,cAAc,KAAA,GAChB;EAGF,MAAM,eAAe;EACrB,YAAY,SAAS;CACvB;CAEA,MAAM,UAAU,GACd,iBACA,YAAY,0BACZ,YAAY,0BACZ,SACF;CAEA,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,WAAW;EACX,OACE;GACE,GAAG;GACH,yBAAyB;GACzB,+BAA+B;EACjC;EAEF,MAAM,WAAW,QAAQ;EACzB,UAAU,YAAY,WAAW,KAAA,IAAY;EAC7C,cACE,WACI,GAAG,UAAU,IAAI,aAAa,UAAU,IAAI,UAC5C;EAEN,iBAAe,WAAW,KAAA,IAAY;EACtC,iBAAe,WAAW,KAAA,IAAY;EACtC,iBAAe,WAAW,KAAA,IAAY;EACtC,kBACE,WAAW,KAAA,IAAY,GAAG,aAAa,UAAU,IAAI;EAEvD,iBAAe,YAAY,KAAA;EAC3B,iBAAe,YAAY,KAAA;EAC3B,WAAW;EACX,aAAW;EACX,iBAAe,YAAY,KAAA;EAC3B,iBAAe,YAAY,KAAA;EAE1B,UAAA,MAAM,KAAK,EAAE,QAAQ,IAAI,IAAI,GAAG,UAAU;GACzC,MAAM,QAAQ,mBAAmB,cAAc,KAAK;GAEpD,OACE,oBAAC,QAAD;IAEE,WAAU;IACV,cAAY;IACZ,eAAY;IACZ,UAAU,UAAU;KAClB,MAAM,OAAO,MAAM,cAAc,sBAAsB;KAEvD,MAAM,SACJ,cAAc,MAAO,MAAM,UAAU,KAAK,OAAO,KAAK,QAAQ;KAEhE,YAAY,SAAS,SAAS,KAAM,EAAE;IACxC;IAEA,UAAA,oBAAC,MAAD;KACE,MAAM,MAAM;KACZ,MAAM,SAAS;KACf,eAAY;KACZ,WAAU;IACX,CAAA;GACG,GAnBC,KAmBD;EAEV,CAAC;CACE,CAAA;AAET"}

package/dist/components/data-display/rating/rating.css

@@ -0,0 +1,72 @@
+.puzzle-rating {
+  align-items: center;
+  gap: var(--puzzle-space-1, .25rem);
+  width: fit-content;
+  color: var(--puzzle-rating-color);
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+  direction: ltr;
+  display: inline-flex;
+}
+
+.puzzle-rating__star {
+  color: var(--puzzle-rating-empty-color);
+  user-select: none;
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  line-height: 1;
+  display: inline-flex;
+}
+
+.puzzle-rating__star[data-state="full"], .puzzle-rating__star[data-state="half"] {
+  color: var(--puzzle-rating-color);
+}
+
+.puzzle-rating__star svg {
+  display: block;
+}
+
+.puzzle-rating:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 3px;
+  border-radius: var(--puzzle-radius-sm, .25rem);
+}
+
+.puzzle-rating-disabled {
+  cursor: not-allowed;
+  opacity: .55;
+}
+
+.puzzle-rating-readonly {
+  cursor: default;
+}
+
+.puzzle-rating[data-size="sm"] {
+  gap: var(--puzzle-space-1, .25rem);
+}
+
+.puzzle-rating[data-size="lg"] {
+  gap: var(--puzzle-space-2, .5rem);
+}
+
+@media (forced-colors: active) {
+  .puzzle-rating__star {
+    color: graytext;
+  }
+
+  .puzzle-rating__star[data-state="full"], .puzzle-rating__star[data-state="half"] {
+    color: highlight;
+  }
+
+  .puzzle-rating:focus-visible {
+    outline-color: highlight;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-rating, .puzzle-rating__star {
+    transition: none;
+  }
+}

package/dist/components/data-display/rating/rating.types.d.cts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithRef } from "react";
+type RatingSize = "sm" | "md" | "lg";
+type RatingProps = Omit<ComponentPropsWithRef<"div">, "children" | "defaultValue" | "role" | "value"> & {
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  max?: number;
+  precision?: 0.5 | 1;
+  size?: RatingSize;
+  readOnly?: boolean;
+  disabled?: boolean;
+  color?: string;
+  emptyColor?: string;
+};
+export type { RatingProps, RatingSize };

package/dist/components/data-display/rating/rating.types.d.ts

@@ -0,0 +1,15 @@
+import { ComponentPropsWithRef } from "react";
+type RatingSize = "sm" | "md" | "lg";
+type RatingProps = Omit<ComponentPropsWithRef<"div">, "children" | "defaultValue" | "role" | "value"> & {
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  max?: number;
+  precision?: 0.5 | 1;
+  size?: RatingSize;
+  readOnly?: boolean;
+  disabled?: boolean;
+  color?: string;
+  emptyColor?: string;
+};
+export type { RatingProps, RatingSize };

package/dist/components/data-display/rating/rating.utils.cjs

@@ -0,0 +1,27 @@
+// src/components/data-display/rating/rating.utils.ts
+const normalizeRating = (value, max, precision) => {
+	if (!Number.isFinite(value)) return 0;
+	return Math.round(Math.min(max, Math.max(0, value)) / precision) * precision;
+};
+const getRatingStarState = (value, index) => {
+	const remainder = value - index;
+	if (remainder >= 1) return "full";
+	if (remainder >= .5) return "half";
+	return "empty";
+};
+const getNextRating = (value, key, max, precision) => {
+	switch (key) {
+		case "ArrowRight":
+		case "ArrowUp": return normalizeRating(value + precision, max, precision);
+		case "ArrowLeft":
+		case "ArrowDown": return normalizeRating(value - precision, max, precision);
+		case "Home": return 0;
+		case "End": return max;
+		default: return;
+	}
+};
+exports.getNextRating = getNextRating;
+exports.getRatingStarState = getRatingStarState;
+exports.normalizeRating = normalizeRating;
+
+//# sourceMappingURL=rating.utils.cjs.map

package/dist/components/data-display/rating/rating.utils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating.utils.cjs","names":[],"sources":["../../../../src/components/data-display/rating/rating.utils.ts"],"sourcesContent":["const normalizeRating = (value: number, max: number, precision: 0.5 | 1) => {\n  if (!Number.isFinite(value)) {\n    return 0;\n  }\n\n  const clamped = Math.min(max, Math.max(0, value));\n\n  return Math.round(clamped / precision) * precision;\n};\n\nconst getRatingStarState = (value: number, index: number) => {\n  const remainder = value - index;\n\n  if (remainder >= 1) {\n    return \"full\" as const;\n  }\n\n  if (remainder >= 0.5) {\n    return \"half\" as const;\n  }\n\n  return \"empty\" as const;\n};\n\nconst getNextRating = (\n  value: number,\n  key: string,\n  max: number,\n  precision: 0.5 | 1,\n) => {\n  switch (key) {\n    case \"ArrowRight\":\n    case \"ArrowUp\":\n      return normalizeRating(value + precision, max, precision);\n\n    case \"ArrowLeft\":\n    case \"ArrowDown\":\n      return normalizeRating(value - precision, max, precision);\n\n    case \"Home\":\n      return 0;\n\n    case \"End\":\n      return max;\n\n    default:\n      return undefined;\n  }\n};\n\nexport { normalizeRating, getRatingStarState, getNextRating };\n"],"mappings":";AAAA,MAAM,mBAAmB,OAAe,KAAa,cAAuB;CAC1E,IAAI,CAAC,OAAO,SAAS,KAAK,GACxB,OAAO;CAKT,OAAO,KAAK,MAFI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAEvB,IAAI,SAAS,IAAI;AAC3C;AAEA,MAAM,sBAAsB,OAAe,UAAkB;CAC3D,MAAM,YAAY,QAAQ;CAE1B,IAAI,aAAa,GACf,OAAO;CAGT,IAAI,aAAa,IACf,OAAO;CAGT,OAAO;AACT;AAEA,MAAM,iBACJ,OACA,KACA,KACA,cACG;CACH,QAAQ,KAAR;EACE,KAAK;EACL,KAAK,WACH,OAAO,gBAAgB,QAAQ,WAAW,KAAK,SAAS;EAE1D,KAAK;EACL,KAAK,aACH,OAAO,gBAAgB,QAAQ,WAAW,KAAK,SAAS;EAE1D,KAAK,QACH,OAAO;EAET,KAAK,OACH,OAAO;EAET,SACE;CACJ;AACF"}

package/dist/components/data-display/rating/rating.utils.js

@@ -0,0 +1,25 @@
+// src/components/data-display/rating/rating.utils.ts
+const normalizeRating = (value, max, precision) => {
+	if (!Number.isFinite(value)) return 0;
+	return Math.round(Math.min(max, Math.max(0, value)) / precision) * precision;
+};
+const getRatingStarState = (value, index) => {
+	const remainder = value - index;
+	if (remainder >= 1) return "full";
+	if (remainder >= .5) return "half";
+	return "empty";
+};
+const getNextRating = (value, key, max, precision) => {
+	switch (key) {
+		case "ArrowRight":
+		case "ArrowUp": return normalizeRating(value + precision, max, precision);
+		case "ArrowLeft":
+		case "ArrowDown": return normalizeRating(value - precision, max, precision);
+		case "Home": return 0;
+		case "End": return max;
+		default: return;
+	}
+};
+export { getNextRating, getRatingStarState, normalizeRating };
+
+//# sourceMappingURL=rating.utils.js.map

package/dist/components/data-display/rating/rating.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rating.utils.js","names":[],"sources":["../../../../src/components/data-display/rating/rating.utils.ts"],"sourcesContent":["const normalizeRating = (value: number, max: number, precision: 0.5 | 1) => {\n  if (!Number.isFinite(value)) {\n    return 0;\n  }\n\n  const clamped = Math.min(max, Math.max(0, value));\n\n  return Math.round(clamped / precision) * precision;\n};\n\nconst getRatingStarState = (value: number, index: number) => {\n  const remainder = value - index;\n\n  if (remainder >= 1) {\n    return \"full\" as const;\n  }\n\n  if (remainder >= 0.5) {\n    return \"half\" as const;\n  }\n\n  return \"empty\" as const;\n};\n\nconst getNextRating = (\n  value: number,\n  key: string,\n  max: number,\n  precision: 0.5 | 1,\n) => {\n  switch (key) {\n    case \"ArrowRight\":\n    case \"ArrowUp\":\n      return normalizeRating(value + precision, max, precision);\n\n    case \"ArrowLeft\":\n    case \"ArrowDown\":\n      return normalizeRating(value - precision, max, precision);\n\n    case \"Home\":\n      return 0;\n\n    case \"End\":\n      return max;\n\n    default:\n      return undefined;\n  }\n};\n\nexport { normalizeRating, getRatingStarState, getNextRating };\n"],"mappings":";AAAA,MAAM,mBAAmB,OAAe,KAAa,cAAuB;CAC1E,IAAI,CAAC,OAAO,SAAS,KAAK,GACxB,OAAO;CAKT,OAAO,KAAK,MAFI,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAEvB,IAAI,SAAS,IAAI;AAC3C;AAEA,MAAM,sBAAsB,OAAe,UAAkB;CAC3D,MAAM,YAAY,QAAQ;CAE1B,IAAI,aAAa,GACf,OAAO;CAGT,IAAI,aAAa,IACf,OAAO;CAGT,OAAO;AACT;AAEA,MAAM,iBACJ,OACA,KACA,KACA,cACG;CACH,QAAQ,KAAR;EACE,KAAK;EACL,KAAK,WACH,OAAO,gBAAgB,QAAQ,WAAW,KAAK,SAAS;EAE1D,KAAK;EACL,KAAK,aACH,OAAO,gBAAgB,QAAQ,WAAW,KAAK,SAAS;EAE1D,KAAK,QACH,OAAO;EAET,KAAK,OACH,OAAO;EAET,SACE;CACJ;AACF"}

package/dist/components/forms/checkbox/checkbox.css

@@ -64,19 +64,11 @@
 
 .puzzle-checkbox .puzzle-checkbox__check, .puzzle-checkbox .puzzle-checkbox__mixed {
   transform-origin: center;
-  transform: scale(.8);
-}
-
-.puzzle-checkbox--checked .puzzle-checkbox__check {
-  fill: currentColor;
-  display: block;
-}
-
-.puzzle-checkbox--checked .puzzle-checkbox__mixed, .puzzle-checkbox--indeterminate .puzzle-checkbox__indicator .puzzle-checkbox__check {
   display: none;
+  transform: scale(.8);
 }
 
-.puzzle-checkbox--indeterminate .puzzle-checkbox__indicator .puzzle-checkbox__mixed {
+.puzzle-checkbox__control input:checked:not(:indeterminate) + .puzzle-checkbox__indicator .puzzle-checkbox__check, .puzzle-checkbox__control input:indeterminate + .puzzle-checkbox__indicator .puzzle-checkbox__mixed {
   fill: currentColor;
   display: block;
 }

package/dist/components/forms/input-group/input-group.d.cts

@@ -1,5 +1,7 @@
 import { InputGroupAddonProps, InputGroupProps } from "./input-group.types.cjs";
-declare const InputGroup: (({ className, ...props }: InputGroupProps) => import("react").JSX.Element) & {
-  Addon: ({ align, className, ...props }: InputGroupAddonProps) => import("react").JSX.Element;
+declare const InputGroupAddon: ({ align, className, ...props }: InputGroupAddonProps) => import("react").JSX.Element;
+declare const InputGroupRoot: ({ className, ...props }: InputGroupProps) => import("react").JSX.Element;
+declare const InputGroup: typeof InputGroupRoot & {
+  Addon: typeof InputGroupAddon;
 };
 export { InputGroup };

package/dist/components/forms/input-group/input-group.d.ts

@@ -1,5 +1,7 @@
 import { InputGroupAddonProps, InputGroupProps } from "./input-group.types.js";
-declare const InputGroup: (({ className, ...props }: InputGroupProps) => import("react").JSX.Element) & {
-  Addon: ({ align, className, ...props }: InputGroupAddonProps) => import("react").JSX.Element;
+declare const InputGroupAddon: ({ align, className, ...props }: InputGroupAddonProps) => import("react").JSX.Element;
+declare const InputGroupRoot: ({ className, ...props }: InputGroupProps) => import("react").JSX.Element;
+declare const InputGroup: typeof InputGroupRoot & {
+  Addon: typeof InputGroupAddon;
 };
 export { InputGroup };

package/dist/components/forms/radio-group/index.d.cts

@@ -1,5 +1,6 @@
 import { RadioGroupOrientation, RadioGroupProps, RadioGroupSize, RadioProps } from "./radio-group.types.cjs";
 import { ReactElement } from "react";
 declare const Radio: ({ value, label, children, description, disabled, className, style, id, ref, onChange, onFocus, onKeyDown, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...inputProps }: RadioProps) => import("react").JSX.Element;
-declare const RadioGroup: ({ value, defaultValue, onValueChange, name, form, label, description, error, invalid, required, disabled, orientation, size, dir, loop, children, id, className, style, role, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, ...rootProps }: RadioGroupProps) => ReactElement;
+declare const RadioGroupRoot: ({ value, defaultValue, onValueChange, name, form, label, description, error, invalid, required, disabled, orientation, size, dir, loop, children, id, className, style, role, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, ...rootProps }: RadioGroupProps) => ReactElement;
+declare const RadioGroup: typeof RadioGroupRoot;
 export { Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RadioProps };

package/dist/components/forms/radio-group/index.d.ts

@@ -1,5 +1,6 @@
 import { RadioGroupOrientation, RadioGroupProps, RadioGroupSize, RadioProps } from "./radio-group.types.js";
 import { ReactElement } from "react";
 declare const Radio: ({ value, label, children, description, disabled, className, style, id, ref, onChange, onFocus, onKeyDown, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...inputProps }: RadioProps) => import("react").JSX.Element;
-declare const RadioGroup: ({ value, defaultValue, onValueChange, name, form, label, description, error, invalid, required, disabled, orientation, size, dir, loop, children, id, className, style, role, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, ...rootProps }: RadioGroupProps) => ReactElement;
+declare const RadioGroupRoot: ({ value, defaultValue, onValueChange, name, form, label, description, error, invalid, required, disabled, orientation, size, dir, loop, children, id, className, style, role, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, ...rootProps }: RadioGroupProps) => ReactElement;
+declare const RadioGroup: typeof RadioGroupRoot;
 export { Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RadioProps };

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":"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"}