@crisp-ui-kit/crisp 0.8.0 → 0.9.0

package/dist/cjs/components/timepicker/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./timepicker"), exports);

package/dist/cjs/components/timepicker/timepicker.js

@@ -0,0 +1,54 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimePicker = TimePicker;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_time_picker_1 = require("@seed-design/react-time-picker");
+const wheelpicker_1 = require("../wheelpicker");
+const defaultLabels = {
+    period: "AM/PM",
+    hour: "Hour",
+    minute: "Minute",
+};
+/**
+ * An hour/minute wheel, driven by seed-design's headless engine so the column
+ * order, the 12- vs 24-hour split and the minute stepping are locale-correct by
+ * construction, and rendered with crisp's own `WheelPicker` so the pixels are
+ * the ones already measured for it.
+ */
+function TimePicker({ value, defaultValue, onValueChange, minuteStep, locale, disabled, labels, size = "medium", className, ...rest }) {
+    // The engine defaults `locale` to "ko-KR" — it is a Korean design system.
+    // crisp's other components are English-default, so the default is overridden
+    // here rather than inherited; a consumer's own `locale` still wins.
+    const api = (0, react_time_picker_1.useTimePicker)({
+        value,
+        defaultValue,
+        onValueChange,
+        minuteStep,
+        locale: locale ?? "en-US",
+        disabled,
+    });
+    const t = { ...defaultLabels, ...labels };
+    // `columnOrder` is locale-derived: en-US puts the period last ("3:30 PM"),
+    // ko-KR first, and a 24-hour locale omits it entirely.
+    const columns = api.columnOrder.map((type) => ({
+        key: type,
+        label: t[type],
+        options: api.columns[type].options.map((o) => ({
+            value: o.value,
+            label: o.label,
+        })),
+    }));
+    const selection = Object.fromEntries(api.columnOrder.map((type) => [type, api.columns[type].value]));
+    return ((0, jsx_runtime_1.jsx)("div", { ...rest, className: className, children: (0, jsx_runtime_1.jsx)(wheelpicker_1.WheelPicker, { columns: columns, value: selection, size: size, onValueChange: (next) => {
+                // Route each wheel back to its OWN column, so the engine keeps
+                // ownership of rounding, looping and the 12-to-24-hour mapping.
+                // Sending them all to one column silently makes the period wheel
+                // set the hour.
+                for (const type of api.columnOrder) {
+                    const v = next[type];
+                    if (v != null)
+                        api.columns[type].onValueChange(v);
+                }
+            } }) }));
+}

package/dist/cjs/index.js

@@ -61,6 +61,7 @@ __exportStar(require("./components/table"), exports);
 __exportStar(require("./components/tabletoolbar"), exports);
 __exportStar(require("./components/tabs"), exports);
 __exportStar(require("./components/textarea"), exports);
+__exportStar(require("./components/timepicker"), exports);
 __exportStar(require("./components/toast"), exports);
 __exportStar(require("./components/tooltip"), exports);
 __exportStar(require("./components/wheelpicker"), exports);

package/dist/esm/components/timepicker/index.js

@@ -0,0 +1 @@
+export * from "./timepicker.js";

package/dist/esm/components/timepicker/timepicker.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTimePicker, } from "@seed-design/react-time-picker";
+import { WheelPicker } from "../wheelpicker/index.js";
+const defaultLabels = {
+    period: "AM/PM",
+    hour: "Hour",
+    minute: "Minute",
+};
+/**
+ * An hour/minute wheel, driven by seed-design's headless engine so the column
+ * order, the 12- vs 24-hour split and the minute stepping are locale-correct by
+ * construction, and rendered with crisp's own `WheelPicker` so the pixels are
+ * the ones already measured for it.
+ */
+export function TimePicker({ value, defaultValue, onValueChange, minuteStep, locale, disabled, labels, size = "medium", className, ...rest }) {
+    // The engine defaults `locale` to "ko-KR" — it is a Korean design system.
+    // crisp's other components are English-default, so the default is overridden
+    // here rather than inherited; a consumer's own `locale` still wins.
+    const api = useTimePicker({
+        value,
+        defaultValue,
+        onValueChange,
+        minuteStep,
+        locale: locale ?? "en-US",
+        disabled,
+    });
+    const t = { ...defaultLabels, ...labels };
+    // `columnOrder` is locale-derived: en-US puts the period last ("3:30 PM"),
+    // ko-KR first, and a 24-hour locale omits it entirely.
+    const columns = api.columnOrder.map((type) => ({
+        key: type,
+        label: t[type],
+        options: api.columns[type].options.map((o) => ({
+            value: o.value,
+            label: o.label,
+        })),
+    }));
+    const selection = Object.fromEntries(api.columnOrder.map((type) => [type, api.columns[type].value]));
+    return (_jsx("div", { ...rest, className: className, children: _jsx(WheelPicker, { columns: columns, value: selection, size: size, onValueChange: (next) => {
+                // Route each wheel back to its OWN column, so the engine keeps
+                // ownership of rounding, looping and the 12-to-24-hour mapping.
+                // Sending them all to one column silently makes the period wheel
+                // set the hour.
+                for (const type of api.columnOrder) {
+                    const v = next[type];
+                    if (v != null)
+                        api.columns[type].onValueChange(v);
+                }
+            } }) }));
+}

package/dist/esm/index.js

@@ -45,6 +45,7 @@ export * from "./components/table/index.js";
 export * from "./components/tabletoolbar/index.js";
 export * from "./components/tabs/index.js";
 export * from "./components/textarea/index.js";
+export * from "./components/timepicker/index.js";
 export * from "./components/toast/index.js";
 export * from "./components/tooltip/index.js";
 export * from "./components/wheelpicker/index.js";

package/dist/types/components/timepicker/index.d.ts

@@ -0,0 +1 @@
+export * from "./timepicker";

package/dist/types/components/timepicker/timepicker.d.ts

@@ -0,0 +1,15 @@
+import { type MinuteStep, type TimePickerValue, type UseTimePickerProps } from "@seed-design/react-time-picker";
+import type * as React from "react";
+export type { MinuteStep, TimePickerValue };
+export type TimePickerProps = UseTimePickerProps & Omit<React.ComponentPropsWithoutRef<"div">, keyof UseTimePickerProps | "children"> & {
+    /** Accessible names for the wheels, so they can be translated. */
+    labels?: Partial<Record<"period" | "hour" | "minute", string>>;
+    size?: "small" | "medium";
+};
+/**
+ * An hour/minute wheel, driven by seed-design's headless engine so the column
+ * order, the 12- vs 24-hour split and the minute stepping are locale-correct by
+ * construction, and rendered with crisp's own `WheelPicker` so the pixels are
+ * the ones already measured for it.
+ */
+export declare function TimePicker({ value, defaultValue, onValueChange, minuteStep, locale, disabled, labels, size, className, ...rest }: TimePickerProps): React.JSX.Element;

package/dist/types/index.d.ts

@@ -41,6 +41,7 @@ export * from "./components/table";
 export * from "./components/tabletoolbar";
 export * from "./components/tabs";
 export * from "./components/textarea";
+export * from "./components/timepicker";
 export * from "./components/toast";
 export * from "./components/tooltip";
 export * from "./components/wheelpicker";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -247,6 +247,11 @@
       "import": "./dist/esm/components/textarea/index.js",
       "require": "./dist/cjs/components/textarea/index.js"
     },
+    "./timepicker": {
+      "types": "./dist/types/components/timepicker/index.d.ts",
+      "import": "./dist/esm/components/timepicker/index.js",
+      "require": "./dist/cjs/components/timepicker/index.js"
+    },
     "./toast": {
       "types": "./dist/types/components/toast/index.d.ts",
       "import": "./dist/esm/components/toast/index.js",
@@ -413,6 +418,7 @@
     "@seed-design/dom-utils": "^2.1.0",
     "@seed-design/react-date-picker": "1.2.0",
     "@seed-design/react-file-upload": "1.0.1",
+    "@seed-design/react-time-picker": "1.0.0",
     "@zag-js/combobox": "^1.43.3",
     "@zag-js/dialog": "^1.43.3",
     "@zag-js/react": "^1.43.3",