@stamcat/craftsman 0.0.27-alpha.9 → 0.0.28

package/src/components/Text/AGENTS.md

@@ -0,0 +1,32 @@
+# Text — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Text } from "@stamcat/craftsman/Text";
+```
+
+Props:
+
+- Inherits all native HTML element props.
+- `as?: TextTags` — HTML tag to render (default: `"div"`)
+- `richText?: boolean` — when `true`, renders sanitized HTML from a string `children` value (always renders as `<div>`)
+- `type?: TextType` — overrides base type styling (e.g. `"display"`, `"heading"`)
+- `size?: TextSize` — overrides base size styling
+- `alignment?: "center" | "left" | "right"` — legacy text-align shorthand
+
+Behavior notes:
+
+- Uses global HTML5 tag declarations by default; `type` and `size` override base styling.
+- `richText` mode sanitizes HTML via DOMPurify. Always pass a string as `children` in this mode.
+- Prefer semantic HTML5 tags via `as` over using `type`/`size` overrides.
+
+Example:
+
+```tsx
+// Semantic heading
+<Text as="h2">Section Title</Text>
+
+// Sanitized rich text from a CMS
+<Text richText>{'<p><strong>Hello</strong> world</p>'}</Text>
+```

package/src/components/Text/Text.css

@@ -1 +1 @@
-@layer craftsman-base{h1{font-size:calc(var(--w-text) * 3.125);line-height:1.2}h2{font-size:calc(var(--w-text) * 2.625);font-weight:625;line-height:1.1}h3{font-size:calc(var(--w-text) * 1.625);line-height:1.1}h4{font-size:calc(var(--w-text) * 1.25);margin:calc(var(--w-gutter) * .5) 0;line-height:1.1}h5{font-size:var(--w-text);line-height:1.2}h6{font-size:calc(var(--w-text) * .875);font-weight:600;line-height:1.2}p{font-style:normal;font-size:var(--w-text);margin:0;line-height:1.5}small{font-size:calc(var(--w-text) * .75)}@media (width<=660px){h4{font-size:var(--w-text,14px)}p{font-size:calc(var(--w-text,14px) * .875)}}.text.display{font-size:calc(var(--w-text) * 1.625);line-height:1.1}.text.display.xlarge{font-size:calc(var(--w-text) * 3.125);line-height:1.2}.text.display.large{font-size:calc(var(--w-text) * 2.625);font-weight:625;line-height:1.1}.text.display.small{font-size:calc(var(--w-text) * 1.25);margin:calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.heading{font-size:calc(var(--w-text) * 1.625);line-height:1.1}.text.heading.xlarge{font-size:calc(var(--w-text) * 3.125);line-height:1.2}.text.heading.large,.text.xlarge{font-size:calc(var(--w-text) * 2.625);font-weight:625;line-height:1.1}.text.heading.medium{font-size:calc(var(--w-text) * 1.625);line-height:1.1}.text.heading.small{font-size:calc(var(--w-text) * 1.25);margin:calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.heading.xsmall{font-size:var(--w-text);line-height:1.2}.text.paragraph{font-style:normal;font-size:var(--w-text);margin:0;line-height:1.5}.text.paragraph.xlarge,.text.large{font-size:calc(var(--w-text) * 1.625);line-height:1.1}.text.paragraph.large{font-size:calc(var(--w-text) * 1.25);margin:calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.paragraph.medium,.text.medium{font-style:normal;font-size:var(--w-text);margin:0;line-height:1.5}.text.paragraph.small,.text.small{font-size:calc(var(--w-text) * .75)}.text.paragraph.xsmall,.text.xsmall{font-size:calc(var(--w-text) * .5)}.text.caption{font-size:calc(var(--w-text) * .75)}.text.center{text-align:center}.text.left{text-align:left}.text.right{text-align:right}}
+@layer craftsman-base{h1{font-size:calc(var(--w-text) * 3.125);margin:0 0 var(--w-gutter) 0;line-height:1.2}h2{font-size:calc(var(--w-text) * 2.625);margin:0 0 var(--w-gutter) 0;font-weight:625;line-height:1.1}h3{font-size:calc(var(--w-text) * 1.625);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}h4{font-size:calc(var(--w-text) * 1.25);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.1}h5{font-size:var(--w-text);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.2}h6{font-size:calc(var(--w-text) * .875);margin:0;font-weight:600;line-height:1.2}p{font-style:normal;font-size:var(--w-text);margin:0;line-height:1.5}small{font-size:calc(var(--w-text) * .75)}@media (width<=660px){h4{font-size:var(--w-text,14px)}p{font-size:calc(var(--w-text,14px) * .875)}}}@layer craftsman-component{.text.display{font-size:calc(var(--w-text) * 1.625);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}.text.display.xlarge{font-size:calc(var(--w-text) * 3.125);margin:0 0 var(--w-gutter) 0;line-height:1.2}.text.display.large{font-size:calc(var(--w-text) * 2.625);margin:0 0 var(--w-gutter) 0;font-weight:625;line-height:1.1}.text.display.small{font-size:calc(var(--w-text) * 1.25);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.heading{font-size:calc(var(--w-text) * 1.625);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}.text.heading.xlarge{font-size:calc(var(--w-text) * 3.125);margin:0 0 var(--w-gutter) 0;line-height:1.2}.text.heading.large,.text.xlarge{font-size:calc(var(--w-text) * 2.625);margin:0 0 var(--w-gutter) 0;font-weight:625;line-height:1.1}.text.heading.medium{font-size:calc(var(--w-text) * 1.625);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}.text.heading.small{font-size:calc(var(--w-text) * 1.25);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.heading.xsmall{font-size:var(--w-text);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.2}.text.paragraph{font-style:normal;font-size:var(--w-text);margin:0;line-height:1.5}.text.paragraph.xlarge,.text.large{font-size:calc(var(--w-text) * 1.625);margin:0 0 calc(var(--w-gutter) * .75) 0;line-height:1.1}.text.paragraph.large{font-size:calc(var(--w-text) * 1.25);margin:0 0 calc(var(--w-gutter) * .5) 0;line-height:1.1}.text.paragraph.medium,.text.medium{font-style:normal;font-size:var(--w-text);margin:0;line-height:1.5}.text.paragraph.small,.text.small{font-size:calc(var(--w-text) * .75)}.text.paragraph.xsmall,.text.xsmall{font-size:calc(var(--w-text) * .5)}.text.caption{font-size:calc(var(--w-text) * .75)}.text.center{text-align:center}.text.left{text-align:left}.text.right{text-align:right}}

package/src/components/Text/Text.scss

@@ -1,6 +1,6 @@
-@use "../../styles/utilities/functions" as u;
+@use "../../styles/utilities/_functions" as u;
 @use "../../styles/global/components/typography" as t;
-@layer craftsman-base {
+@layer craftsman-component {
     .text {
         // --- display ---
         &.display {

package/src/components/Textarea/AGENTS.md

@@ -0,0 +1,32 @@
+# Textarea — Agent Usage Notes
+
+Import:
+
+```tsx
+import { Textarea } from "@stamcat/craftsman/Textarea";
+```
+
+Props:
+
+- Inherits all native `<textarea>` props.
+- `label?: string | ReactNode`
+- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
+- `error?: string | boolean | ReactNode`
+- `required?: boolean`
+- `rows?: number`
+
+Behavior notes:
+
+- Shares the same `InputWrapper` as `Input` — label, error, and required behavior is identical.
+- `id` is auto-generated via `useId` if not provided.
+
+Example:
+
+```tsx
+<Textarea
+  label="Your Message"
+  placeholder="Type here"
+  rows={4}
+  required
+/>
+```

package/src/components/{Input → Textarea}/Textarea.d.ts

@@ -1,3 +1,3 @@
-import { LabeledInput } from './InputWrapper';
+import { LabeledInput } from '../Input/InputWrapper';
 export type TextareaProps = React.ComponentProps<"textarea"> & LabeledInput;
 export declare const Textarea: React.FC<TextareaProps>;

package/src/components/Textarea/Textarea.esm.js

@@ -0,0 +1,23 @@
+"use client";
+import { InputWrapper as e } from "../Input/InputWrapper.esm.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useId as n } from "react";
+//#region src/components/Textarea/Textarea.tsx
+var r = ({ labelPosition: r = "top", id: i, label: a, error: o, required: s, className: c, style: l, ...u }) => {
+	let d = n();
+	return /* @__PURE__ */ t(e, {
+		label: a,
+		className: c,
+		labelPosition: r,
+		error: o,
+		required: s,
+		style: l,
+		children: /* @__PURE__ */ t("textarea", {
+			id: i || d,
+			className: "input",
+			...u
+		})
+	});
+};
+//#endregion
+export { r as Textarea };

package/src/components/TimePicker/AGENTS.md

@@ -0,0 +1,42 @@
+# TimePicker — Agent Usage Notes
+
+Import:
+
+```tsx
+import { TimePicker } from "@stamcat/craftsman/TimePicker";
+```
+
+Props:
+
+- Extends `TimePickerProps` from `react-time-picker`, excluding its `locale` and `format` props.
+- `label?: string | ReactNode`
+- `labelPosition?: "top" | "left" | "bottom" | "right" | "inside" | "hidden"` (default: `"top"`)
+- `error?: string | boolean | ReactNode`
+- `required?: boolean`
+- `locale?: Intl.LocalesArgument`
+- `format?: 24 | 12`
+- `labels?: { hour?: string; minute?: string }`
+
+Behavior notes:
+
+- The component uses a custom wheel UI instead of the stock `react-time-picker` clock popup.
+- `value` is typically a time string such as `"09:30"`; pair it with `onChange` for interactive controlled usage.
+- If a `value` is provided without `onChange`, treat the picker as effectively read-only.
+- Focusing the input opens the wheel, and the trailing toggle button shows or hides it explicitly.
+- The trailing toggle button mirrors the field's `disabled` prop — when `disabled` is set, the toggle is disabled too.
+- Clicking outside the field and wheel closes the wheel.
+- `locale` defaults to the browser locale when omitted and affects time formatting and wheel labels.
+- When `name` is provided, the component renders a hidden input so forms can submit the selected string value.
+
+Example:
+
+```tsx
+const [time, setTime] = useState("09:30");
+
+<TimePicker
+  label="Appointment Time"
+  value={time}
+  onChange={(value) => setTime(value ?? "")}
+  format={24}
+/>
+```

package/src/components/TimePicker/TimePicker.css

@@ -0,0 +1 @@
+@layer craftsman-base{.react-time-picker__wrapper:focus{box-shadow:none;outline:0}.react-time-picker__wrapper{color:var(--text);border:1px solid var(--gray400);padding:calc(var(--w-gutter) * .5);background-color:var(--white);border-radius:6px}[type=number].react-time-picker__wrapper::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}[type=number].react-time-picker__wrapper{appearance:textfield}.react-time-picker__wrapper:disabled,.disabled.react-time-picker__wrapper{border-color:var(--gray200);background-color:var(--gray100)}}.react-time-picker,.react-time-picker *,.react-time-picker :before,.react-time-picker :after{box-sizing:border-box}@layer craftsman-component{.react-time-picker{display:inline-flex;position:relative}.react-time-picker--disabled{color:#6d6d6d;background-color:#f0f0f0}.react-time-picker__wrapper{flex-grow:1;flex-shrink:0;padding:6px 8px;display:flex}.react-time-picker__inputGroup{box-sizing:content-box;flex-grow:1;padding:0 2px}.react-time-picker__inputGroup__divider{white-space:pre;padding:1px 0}.react-time-picker__inputGroup__divider,.react-time-picker__inputGroup__leadingZero{font:inherit;display:inline-block}.react-time-picker__inputGroup__input{text-align:center;color:currentColor;min-width:calc(2ch + 1px);height:calc(100% - 2px);font:inherit;box-sizing:content-box;appearance:textfield;background:0 0;border:0;padding:1px;position:relative}[name=year].react-time-picker__inputGroup__input{min-width:calc(4ch + 2px)}.react-time-picker__inputGroup__input:disabled{background-color:unset}.react-time-picker__inputGroup__input::-webkit-outer-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input::-webkit-inner-spin-button{appearance:none;margin:0}.react-time-picker__inputGroup__input--hasLeadingZero{margin-left:-.54em;padding-left:calc(1px + .54em)}.react-time-picker__button{border:0;padding:4px 4px 4px 7px}.react-time-picker__button:hover{background:0 0}.react-time-picker__wrapper{padding:6px 24px 6px 8px}.react-time-picker__inputGroup__input:invalid{background:#ff00001a}.react-time-picker__inputGroup__amPm{font:inherit;appearance:menulist}.react-time-picker__button:enabled{cursor:pointer}.react-time-picker__button:enabled:hover .react-time-picker__button__icon,.react-time-picker__button:enabled:focus .react-time-picker__button__icon{stroke:#0078d7}.react-time-picker__button:disabled .react-time-picker__button__icon{stroke:#6d6d6d}.react-time-picker__button svg{display:inherit}.react-time-picker__clock{z-index:1;background-color:#fff;border:thin solid #a0a096;width:200px;max-width:100vw;height:200px;padding:25px}.react-time-picker__clock--closed,.timePicker .react-time-picker__clock{display:none}.timePicker .timePicker__field{position:relative}.timePicker .timePicker__field .input-view-toggle{padding:4px;line-height:1;position:absolute;top:50%;right:4px;transform:translateY(-50%)}.timePicker__display{background-color:var(--white);border:1px solid var(--gray400);z-index:1;border-radius:8px;height:160px;display:inline-flex;position:relative}.timePicker__display:before,.timePicker__display:after{content:"";z-index:1;pointer-events:none;height:calc(50% - 16px);display:block;position:absolute;left:0;right:0}.timePicker__display:before{border-bottom:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to top, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);top:-.5px}.timePicker__display:after{border-top:.5px solid rgba(var(--text-high-contrast-rgb-value), .3);background:linear-gradient(to bottom, rgba(var(--background-site-rgb-value), .65) 0%, rgba(var(--background-site-rgb-value), 1) 100%);bottom:-.5px}.timePicker__display .ios-picker{flex-direction:row;align-items:center;gap:6px;height:100%;padding:0 12px;font-size:16px;line-height:1;display:flex}.timePicker__display .ios-picker--disabled{pointer-events:none;opacity:.5}.timePicker__display .ios-picker__scene{touch-action:pan-x;align-items:center;min-width:30px;height:100%;display:flex;overflow:hidden}.timePicker__display .ios-picker__viewport{perspective:1000px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-webkit-tap-highlight-color:transparent;width:100%;height:32px}.timePicker__display .ios-picker__viewport--perspective-left{perspective-origin:calc(50% + 130px);transform:translate(27px)}.timePicker__display .ios-picker__viewport--perspective-right{perspective-origin:calc(50% - 130px);transform:translate(-27px)}.timePicker__display .ios-picker__viewport--perspective-center{perspective-origin:50%}.timePicker__display .ios-picker__container{width:100%;height:100%;transform-style:preserve-3d;will-change:transform}.timePicker__display .ios-picker__slide{text-align:center;backface-visibility:hidden;opacity:0;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.timePicker__display .ios-picker__label{white-space:nowrap;pointer-events:none;font-weight:700}}

package/src/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { TimePickerProps as ReactTimePickerProps } from 'react-time-picker';
+import { LabeledInput } from '../Input/InputWrapper';
+type TimePickerProps = Omit<ReactTimePickerProps, "locale" | "format"> & LabeledInput & {
+    locale?: Intl.LocalesArgument;
+    format?: 24 | 12;
+    labels?: {
+        hour?: string;
+        minute?: string;
+    };
+};
+export declare const TimePicker: React.FC<TimePickerProps>;
+export {};

package/src/components/TimePicker/TimePicker.scss

@@ -0,0 +1,226 @@
+@use "../../styles/utilities/_functions" as u;
+@use "../../styles/global/components/input";
+@use "../../styles/utilities/_placeholders";
+@use "../DatePicker/_DatePicker";
+
+@layer craftsman-component {
+    .react-time-picker,
+    .react-time-picker *,
+    .react-time-picker *:before,
+    .react-time-picker *:after {
+        @extend %border-box;
+    }
+
+    .react-time-picker {
+        @extend %date-picker-styles;
+        &--disabled {
+            @extend %date-picker-disabled;
+        }   
+        &__wrapper {
+            @extend %date-picker-wrapper;
+            padding: 6px 24px 6px 8px;
+        }  
+        &__inputGroup {
+            @extend %date-picker-input-group;
+        }   
+        &__inputGroup__divider {
+            @extend %date-picker-divider;
+        }
+        &__inputGroup__divider,
+        &__inputGroup__leadingZero {
+            @extend %date-picker-leading-zero-divider;
+        }
+        &__inputGroup__input {
+            @extend %date-picker-group-input;
+        }
+        &__inputGroup__input::-webkit-outer-spin-button,
+        &__inputGroup__input::-webkit-inner-spin-button {
+            @extend %date-picker-input-spinner;
+        }
+        &__inputGroup__input--hasLeadingZero {
+            @extend %date-picker-input-leading-zero;
+        }
+        &__button {
+            @extend %date-picker-button;
+        }
+    }
+
+    .react-time-picker__inputGroup__input:invalid {
+        background: rgba(255, 0, 0, 0.1);
+    }
+
+    .react-time-picker__inputGroup__amPm {
+        font: inherit;
+        -webkit-appearance: menulist;
+        -moz-appearance: menulist;
+        appearance: menulist;
+    }
+
+    .react-time-picker__button:enabled {
+        cursor: pointer;
+    }
+
+    .react-time-picker__button:enabled:hover .react-time-picker__button__icon,
+    .react-time-picker__button:enabled:focus .react-time-picker__button__icon {
+        stroke: #0078d7;
+    }
+
+    .react-time-picker__button:disabled .react-time-picker__button__icon {
+        stroke: #6d6d6d;
+    }
+
+    .react-time-picker__button svg {
+        display: inherit;
+    }
+
+    .react-time-picker__clock {
+        width: 200px;
+        height: 200px;
+        max-width: 100vw;
+        padding: 25px;
+        background-color: white;
+        border: thin solid #a0a096;
+        z-index: 1;
+    }
+
+    .react-time-picker__clock--closed {
+        display: none;
+    }
+
+    .timePicker {
+        // suppress the built-in clock popup — our custom wheel renders instead
+        .react-time-picker__clock {
+            display: none;
+        }
+
+        .timePicker__field {
+            position: relative;
+
+            .input-view-toggle {
+                position: absolute;
+                right: 4px;
+                top: 50%;
+                transform: translateY(-50%);
+                padding: 4px;
+                line-height: 1;
+            }
+        }
+
+        &__display {
+            position: relative;
+            display: inline-flex;
+            height: 160px;
+            background-color: #{u.color("white")};
+            border: 1px solid #{u.color("gray400")};
+            border-radius: 8px;
+            z-index: 1;
+            &:before,
+            &:after {
+                position: absolute;
+                left: 0;
+                right: 0;
+                content: "";
+                display: block;
+                height: calc(50% - 32px / 2);
+                z-index: 1;
+                pointer-events: none;
+            }
+
+            &:before {
+                top: -0.5px;
+                border-bottom: 0.5px solid rgba(var(--text-high-contrast-rgb-value), 0.3);
+                background: linear-gradient(
+                    to top,
+                    rgba(var(--background-site-rgb-value), 0.65) 0%,
+                    rgba(var(--background-site-rgb-value), 1) 100%
+                );
+            }
+
+            &:after {
+                bottom: -0.5px;
+                border-top: 0.5px solid rgba(var(--text-high-contrast-rgb-value), 0.3);
+                background: linear-gradient(
+                    to bottom,
+                    rgba(var(--background-site-rgb-value), 0.65) 0%,
+                    rgba(var(--background-site-rgb-value), 1) 100%
+                );
+            }
+
+            .ios-picker {
+                height: 100%;
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                gap: 6px;
+                padding: 0 12px;
+                line-height: 1;
+                font-size: 16px;
+
+                &--disabled {
+                    pointer-events: none;
+                    opacity: 0.5;
+                }
+            }
+
+            .ios-picker__scene {
+                min-width: 30px;
+                height: 100%;
+                overflow: hidden;
+                display: flex;
+                align-items: center;
+                touch-action: pan-x;
+            }
+
+            .ios-picker__viewport {
+                height: 32px;
+                width: 100%;
+                perspective: 1000px;
+                -webkit-user-select: none;
+                -moz-user-select: none;
+                -ms-user-select: none;
+                user-select: none;
+                -webkit-touch-callout: none;
+                -khtml-user-select: none;
+                -webkit-tap-highlight-color: transparent;
+            }
+
+            .ios-picker__viewport--perspective-left {
+                perspective-origin: calc(50% + 130px) 50%;
+                transform: translateX(27px);
+            }
+
+            .ios-picker__viewport--perspective-right {
+                perspective-origin: calc(50% - 130px) 50%;
+                transform: translateX(-27px);
+            }
+
+            .ios-picker__viewport--perspective-center {
+                perspective-origin: 50% 50%;
+            }
+
+            .ios-picker__container {
+                height: 100%;
+                width: 100%;
+                transform-style: preserve-3d;
+                will-change: transform;
+            }
+
+            .ios-picker__slide {
+                width: 100%;
+                height: 100%;
+                text-align: center;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                backface-visibility: hidden;
+                opacity: 0;
+            }
+
+            .ios-picker__label {
+                font-weight: 700;
+                white-space: nowrap;
+                pointer-events: none;
+            }
+        }
+    }
+}

package/src/components/TimePicker/TimePicker2.esm.js

@@ -0,0 +1,98 @@
+"use client";
+import { Button as e } from "../Button/Button.esm.js";
+import { InputWrapper as t } from "../Input/InputWrapper.esm.js";
+import './TimePicker.css';/* empty css               */
+import { resolveLocale as n } from "./utilities.esm.js";
+import { TimePickerDisplay as r } from "./TimePickerDisplay.esm.js";
+import { require_lib as i } from "../../../node_modules/react-device-detect/dist/lib.esm.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useEffect as s, useState as c } from "react";
+import { FaClock as l, FaRegClock as u, FaX as d } from "react-icons/fa6";
+import { autoUpdate as f, flip as p, offset as m, shift as h, useFloating as g } from "@floating-ui/react-dom";
+import { TimePicker as _ } from "react-time-picker";
+//#region src/components/TimePicker/TimePicker.tsx
+var v = i(), y = (i) => {
+	let { labels: y, locale: b, format: x, value: S, onChange: C, label: w, labelPosition: T, error: E, required: D, name: O, ...k } = i, [A, j] = c(null), [M, N] = c(null), { floatingStyles: P } = g({
+		placement: "bottom-start",
+		strategy: "absolute",
+		whileElementsMounted: f,
+		middleware: [
+			m(4),
+			p(),
+			h()
+		],
+		elements: {
+			reference: A,
+			floating: M
+		}
+	}), [F, I] = c(!1), L = n(b);
+	return s(() => {
+		if (!F) return;
+		let e = (e) => {
+			A?.contains(e.target) || M?.contains(e.target) || I(!1);
+		};
+		return document.addEventListener("pointerdown", e), () => {
+			document.removeEventListener("pointerdown", e);
+		};
+	}, [
+		F,
+		A,
+		M
+	]), /* @__PURE__ */ o("div", {
+		className: "timePicker",
+		ref: j,
+		onFocus: (e) => {
+			v.isMobile || e.target instanceof HTMLInputElement && I(!0);
+		},
+		onKeyDown: (e) => {
+			e.key === "Enter" && I(!1);
+		},
+		children: [
+			O && /* @__PURE__ */ a("input", {
+				type: "hidden",
+				name: O,
+				value: typeof S == "string" ? S : "",
+				readOnly: !0
+			}),
+			/* @__PURE__ */ a(t, {
+				label: w,
+				labelPosition: T,
+				error: E,
+				required: D,
+				children: /* @__PURE__ */ o("div", {
+					className: "timePicker__field",
+					children: [/* @__PURE__ */ a(_, {
+						...k,
+						value: S,
+						onChange: C,
+						locale: L,
+						required: D,
+						disableClock: !0,
+						clearIcon: /* @__PURE__ */ a(d, { size: 14 })
+					}), !v.isMobile && /* @__PURE__ */ a(e, {
+						type: "button",
+						variant: "text",
+						onClick: () => I((e) => !e),
+						"aria-label": F ? "Hide time picker" : "Show time picker",
+						"aria-pressed": F,
+						disabled: i.disabled,
+						className: "input-view-toggle",
+						children: a(F ? l : u, { size: 16 })
+					})]
+				})
+			}),
+			!v.isMobile && /* @__PURE__ */ a(r, {
+				value: S,
+				onChange: (e) => C?.(e),
+				locale: L,
+				labels: y,
+				format: x,
+				visible: F,
+				floatingRef: N,
+				style: P
+			})
+		]
+	});
+};
+//#endregion
+export { y as TimePicker };

package/src/components/TimePicker/TimePickerDisplay.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+type TimePickerDisplayProps = {
+    value?: unknown;
+    onChange?: (val: string) => void;
+    locale?: Intl.LocalesArgument;
+    format?: 24 | 12;
+    labels?: {
+        hour?: string;
+        minute?: string;
+    };
+    visible?: boolean;
+    floatingRef?: (node: HTMLElement | null) => void;
+    style?: React.CSSProperties;
+};
+export declare const TimePickerDisplay: React.FC<TimePickerDisplayProps>;
+export {};

package/src/components/TimePicker/TimePickerDisplay.esm.js

@@ -0,0 +1,54 @@
+import { getAmPmLabels as e, getUnitLabel as t, is24HourFormat as n, isEmpty as r } from "../../utilities/validations.esm.js";
+import { padTime as i, parseTimeString as a, resolveLocale as o, resolveTimeFormat as s, to24Hour as c } from "./utilities.esm.js";
+import { IosPickerItem as l } from "./TimePickerWheel.esm.js";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import "react";
+//#region src/components/TimePicker/TimePickerDisplay.tsx
+var f = (e, t) => e ? t : void 0, p = (p) => {
+	let { value: m, onChange: h, locale: g, format: _, labels: v, visible: y = !1, floatingRef: b, style: x } = p, S = o(g), [C, w] = a(m), T = !r(m), E = s(_, n(S)), D = +(E === 12), O = E === 12 ? e(S) : null, k = +(C >= 12), A = E === 12 ? (C % 12 + 11) % 12 : C;
+	return y ? /* @__PURE__ */ d("div", {
+		className: "timePicker__display",
+		ref: b,
+		style: x,
+		children: [
+			/* @__PURE__ */ u(l, {
+				slideCount: E,
+				perspective: "left",
+				loop: !0,
+				offset: D,
+				selectedIndex: f(T, A),
+				onSelect: (e) => {
+					let t = c(e + D, C >= 12, E === 12);
+					h?.(`${i(t)}:${i(w)}`);
+				},
+				label: t(S, "hour", v?.hour)
+			}),
+			/* @__PURE__ */ u(l, {
+				slideCount: 60,
+				perspective: "right",
+				loop: !0,
+				selectedIndex: f(T, w),
+				onSelect: (e) => {
+					h?.(`${i(C)}:${i(e)}`);
+				},
+				label: t(S, "minute", v?.minute)
+			}),
+			E === 12 && O && /* @__PURE__ */ u(l, {
+				slideCount: 2,
+				perspective: "center",
+				loop: !1,
+				slides: O,
+				selectedIndex: f(T, k),
+				onSelect: (e) => {
+					let t = e === 1;
+					if (t === C >= 12) return;
+					let n = t ? C + 12 : C - 12;
+					h?.(`${i(n)}:${i(w)}`);
+				},
+				label: ""
+			})
+		]
+	}) : null;
+};
+//#endregion
+export { p as TimePickerDisplay };

package/src/components/TimePicker/TimePickerWheel.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export type IosPickerItemProps = {
+    loop?: boolean;
+    label: string;
+    slideCount: number;
+    perspective: "left" | "right" | "center";
+    offset?: number;
+    slides?: React.ReactNode[];
+    selectedIndex?: number;
+    onSelect?: (index: number) => void;
+    disabled?: boolean;
+};
+export declare const IosPickerItem: (props: IosPickerItemProps) => React.JSX.Element;

package/src/components/TimePicker/TimePickerWheel.esm.js

@@ -0,0 +1,61 @@
+"use client";
+import "./constants.esm.js";
+import { inactivateEmblaTransform as e, setContainerStyles as t, setSlideStyles as n, snapOnPointerUp as r } from "./utilities.esm.js";
+import i from "clsx";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useCallback as s, useEffect as c, useLayoutEffect as l, useRef as u } from "react";
+import d from "embla-carousel-react";
+//#region src/components/TimePicker/TimePickerWheel.tsx
+var f = (f) => {
+	let { slideCount: p, perspective: m, label: h, loop: g = !1, offset: _ = 0, slides: v, selectedIndex: y, onSelect: b, disabled: x } = f, [S, C] = d({
+		loop: g,
+		axis: "y",
+		dragFree: !0,
+		containScroll: !1
+	}), w = u(null), T = u(b);
+	l(() => {
+		T.current = b;
+	});
+	let E = p * 20, D = g ? 0 : 20, O = s((e) => {
+		t(e, (p * 20 - D) * e.scrollProgress()), e.slideNodes().forEach((t, r) => {
+			n(e, r, g, p, E);
+		});
+	}, [
+		g,
+		p,
+		D,
+		E
+	]);
+	return c(() => {
+		if (!C) return () => {};
+		let t = (e) => T.current?.(e.selectedScrollSnap());
+		return C.on("pointerUp", r), C.on("scroll", O), C.on("reInit", e), C.on("reInit", O), C.on("select", t), e(C), O(C), () => {
+			C.off("pointerUp", r), C.off("scroll", O), C.off("reInit", e), C.off("reInit", O), C.off("select", t);
+		};
+	}, [C, O]), c(() => {
+		!C || y === void 0 || C.selectedScrollSnap() !== y && C.scrollTo(y);
+	}, [C, y]), /* @__PURE__ */ o("div", {
+		className: i("ios-picker", { "ios-picker--disabled": x }),
+		"aria-disabled": x,
+		children: [/* @__PURE__ */ a("div", {
+			className: "ios-picker__scene",
+			ref: w,
+			children: /* @__PURE__ */ a("div", {
+				className: `ios-picker__viewport ios-picker__viewport--perspective-${m}`,
+				ref: S,
+				children: /* @__PURE__ */ a("div", {
+					className: "ios-picker__container",
+					children: Array.from({ length: p }, (e, t) => /* @__PURE__ */ a("div", {
+						className: "ios-picker__slide",
+						children: v ? v[t] : t + _
+					}, t))
+				})
+			})
+		}), /* @__PURE__ */ a("div", {
+			className: "ios-picker__label",
+			children: h
+		})]
+	});
+};
+//#endregion
+export { f as IosPickerItem };

package/src/components/TimePicker/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const CIRCLE_DEGREES = 360;
+export declare const WHEEL_ITEM_SIZE = 32;
+export declare const WHEEL_ITEM_COUNT = 18;
+export declare const WHEEL_ITEMS_IN_VIEW = 4;
+export declare const WHEEL_ITEM_RADIUS: number;
+export declare const IN_VIEW_DEGREES: number;
+export declare const WHEEL_RADIUS: number;

package/src/components/TimePicker/constants.esm.js

@@ -0,0 +1,3 @@
+var e = Math.round(32 / 2 / Math.tan(Math.PI / 18));
+//#endregion
+export { e as WHEEL_RADIUS };