@blurrow/ui 0.1.0 → 0.2.1

package/dist/TagInput.js

@@ -0,0 +1,169 @@
+"use client";
+
+// ../../components/ui/TagInput.tsx
+import { useState, useRef, useEffect, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TagInput({
+  value,
+  defaultValue = [],
+  onChange,
+  placeholder = "add a tag\u2026",
+  label,
+  hint,
+  maxTags,
+  fullWidth = false,
+  className = ""
+}) {
+  const [internal, setInternal] = useState(defaultValue);
+  const [input, setInput] = useState("");
+  const [animTags, setAnimTags] = useState(
+    () => (value ?? defaultValue).map((t) => ({ text: t, state: "visible" }))
+  );
+  const inputRef = useRef(null);
+  const uid = useId();
+  const prevValueRef = useRef(value ?? defaultValue);
+  const tags = value !== void 0 ? value : internal;
+  useEffect(() => {
+    const prev = prevValueRef.current;
+    const next = tags;
+    const added = next.filter((t) => !prev.includes(t));
+    const removed = prev.filter((t) => !next.includes(t));
+    if (added.length === 0 && removed.length === 0) return;
+    setAnimTags((current) => {
+      const updated = current.map(
+        (at) => removed.includes(at.text) ? { ...at, state: "exiting" } : at
+      );
+      added.forEach((t) => {
+        if (!updated.find((at) => at.text === t)) {
+          updated.push({ text: t, state: "entering" });
+        }
+      });
+      return updated;
+    });
+    if (added.length > 0) {
+      requestAnimationFrame(() => {
+        setAnimTags(
+          (current) => current.map(
+            (at) => at.state === "entering" ? { ...at, state: "visible" } : at
+          )
+        );
+      });
+    }
+    if (removed.length > 0) {
+      setTimeout(() => {
+        setAnimTags((current) => current.filter((at) => at.state !== "exiting"));
+      }, 180);
+    }
+    prevValueRef.current = next;
+  }, [tags]);
+  const update = (next) => {
+    setInternal(next);
+    onChange?.(next);
+  };
+  const addTag = (raw) => {
+    const tag = raw.trim();
+    if (!tag || tags.includes(tag)) return;
+    if (maxTags && tags.length >= maxTags) return;
+    update([...tags, tag]);
+    setInput("");
+  };
+  const removeTag = (index) => {
+    const tagText = tags[index];
+    if (!tagText) return;
+    setAnimTags(
+      (current) => current.map(
+        (at) => at.text === tagText ? { ...at, state: "exiting" } : at
+      )
+    );
+    setTimeout(() => {
+      update(tags.filter((_, i) => i !== index));
+    }, 180);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      addTag(input);
+    }
+    if (e.key === "Backspace" && !input && tags.length > 0) {
+      removeTag(tags.length - 1);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: ["flex flex-col gap-1.5", fullWidth ? "w-full" : ""].join(" "), children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: `${uid}-input`, className: "text-[12.5px] font-medium text-ink-label tracking-[-0.005em]", children: label }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        onClick: () => inputRef.current?.focus(),
+        className: [
+          "flex flex-wrap items-center gap-1.5 rounded-xl px-3 py-2.5",
+          "transition-[box-shadow,background] duration-200 ease-out cursor-text",
+          "[background:var(--field)] [box-shadow:var(--field-shadow)]",
+          "hover:[background:var(--field-hover)] hover:[box-shadow:var(--field-shadow-hover)]",
+          "focus-within:[background:var(--field-focus)] focus-within:[box-shadow:var(--field-shadow-focus)]",
+          fullWidth ? "w-full" : "",
+          className
+        ].filter(Boolean).join(" "),
+        children: [
+          animTags.map((at) => /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: [
+                "inline-flex items-center gap-1 pl-2 pr-1 py-0.5 rounded-[7px] text-[11.5px] font-medium text-ink-label select-none",
+                "transition-all duration-180 ease-[cubic-bezier(0.34,1.4,0.64,1)]",
+                at.state === "entering" ? "opacity-0 scale-75" : "",
+                at.state === "visible" ? "opacity-100 scale-100" : "",
+                at.state === "exiting" ? "opacity-0 scale-75" : ""
+              ].join(" "),
+              style: {
+                /* Tags are small raised faces sitting in the sunken field */
+                background: "var(--face)",
+                boxShadow: "var(--face-shadow)"
+              },
+              children: [
+                at.text,
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      const idx = tags.indexOf(at.text);
+                      if (idx !== -1) removeTag(idx);
+                    },
+                    "aria-label": `Remove ${at.text}`,
+                    className: "w-4 h-4 inline-flex items-center justify-center rounded-[5px] text-ink-faint hover:text-ink hover:bg-ink/[0.06] cursor-pointer transition-colors",
+                    children: /* @__PURE__ */ jsx("svg", { width: "8", height: "8", fill: "none", stroke: "currentColor", strokeWidth: "2.5", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
+                  }
+                )
+              ]
+            },
+            at.text
+          )),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              id: `${uid}-input`,
+              type: "text",
+              value: input,
+              onChange: (e) => setInput(e.target.value),
+              onKeyDown: handleKeyDown,
+              onBlur: () => {
+                if (input) addTag(input);
+              },
+              placeholder: tags.length === 0 ? placeholder : "",
+              "aria-label": label ? void 0 : placeholder,
+              "aria-describedby": hint ? `${uid}-hint` : void 0,
+              className: "flex-1 min-w-[80px] bg-transparent text-[13.5px] text-ink placeholder:text-ink-faint outline-none py-0.5"
+            }
+          )
+        ]
+      }
+    ),
+    hint && /* @__PURE__ */ jsx("p", { id: `${uid}-hint`, className: "text-[11.5px] text-ink-muted mt-0.5", children: hint })
+  ] });
+}
+export {
+  TagInput
+};
+//# sourceMappingURL=TagInput.js.map

package/dist/TagInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/TagInput.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useRef, useEffect, useId } from \"react\";\n\ninterface TagInputProps {\n  value?: string[];\n  defaultValue?: string[];\n  onChange?: (tags: string[]) => void;\n  placeholder?: string;\n  label?: string;\n  hint?: string;\n  maxTags?: number;\n  fullWidth?: boolean;\n  className?: string;\n}\n\ninterface AnimatedTag {\n  text: string;\n  state: \"entering\" | \"visible\" | \"exiting\";\n}\n\nexport function TagInput({\n  value,\n  defaultValue = [],\n  onChange,\n  placeholder = \"add a tag…\",\n  label,\n  hint,\n  maxTags,\n  fullWidth = false,\n  className = \"\",\n}: TagInputProps) {\n  const [internal, setInternal] = useState<string[]>(defaultValue);\n  const [input, setInput] = useState(\"\");\n  const [animTags, setAnimTags] = useState<AnimatedTag[]>(() =>\n    (value ?? defaultValue).map((t) => ({ text: t, state: \"visible\" as const }))\n  );\n  const inputRef = useRef<HTMLInputElement>(null);\n  const uid = useId();\n  const prevValueRef = useRef<string[]>(value ?? defaultValue);\n\n  const tags = value !== undefined ? value : internal;\n\n  useEffect(() => {\n    const prev = prevValueRef.current;\n    const next = tags;\n\n    const added = next.filter((t) => !prev.includes(t));\n    const removed = prev.filter((t) => !next.includes(t));\n\n    if (added.length === 0 && removed.length === 0) return;\n\n    setAnimTags((current) => {\n      const updated = current.map((at) =>\n        removed.includes(at.text) ? { ...at, state: \"exiting\" as const } : at\n      );\n      added.forEach((t) => {\n        if (!updated.find((at) => at.text === t)) {\n          updated.push({ text: t, state: \"entering\" });\n        }\n      });\n      return updated;\n    });\n\n    if (added.length > 0) {\n      requestAnimationFrame(() => {\n        setAnimTags((current) =>\n          current.map((at) =>\n            at.state === \"entering\" ? { ...at, state: \"visible\" } : at\n          )\n        );\n      });\n    }\n\n    if (removed.length > 0) {\n      setTimeout(() => {\n        setAnimTags((current) => current.filter((at) => at.state !== \"exiting\"));\n      }, 180);\n    }\n\n    prevValueRef.current = next;\n  }, [tags]);\n\n  const update = (next: string[]) => {\n    setInternal(next);\n    onChange?.(next);\n  };\n\n  const addTag = (raw: string) => {\n    const tag = raw.trim();\n    if (!tag || tags.includes(tag)) return;\n    if (maxTags && tags.length >= maxTags) return;\n    update([...tags, tag]);\n    setInput(\"\");\n  };\n\n  const removeTag = (index: number) => {\n    const tagText = tags[index];\n    if (!tagText) return;\n    setAnimTags((current) =>\n      current.map((at) =>\n        at.text === tagText ? { ...at, state: \"exiting\" as const } : at\n      )\n    );\n    setTimeout(() => {\n      update(tags.filter((_, i) => i !== index));\n    }, 180);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === \"Enter\" || e.key === \",\") {\n      e.preventDefault();\n      addTag(input);\n    }\n    if (e.key === \"Backspace\" && !input && tags.length > 0) {\n      removeTag(tags.length - 1);\n    }\n  };\n\n  return (\n    <div className={[\"flex flex-col gap-1.5\", fullWidth ? \"w-full\" : \"\"].join(\" \")}>\n      {label && (\n        <label htmlFor={`${uid}-input`} className=\"text-[12.5px] font-medium text-ink-label tracking-[-0.005em]\">\n          {label}\n        </label>\n      )}\n      <div\n        onClick={() => inputRef.current?.focus()}\n        className={[\n          \"flex flex-wrap items-center gap-1.5 rounded-xl px-3 py-2.5\",\n          \"transition-[box-shadow,background] duration-200 ease-out cursor-text\",\n          \"[background:var(--field)] [box-shadow:var(--field-shadow)]\",\n          \"hover:[background:var(--field-hover)] hover:[box-shadow:var(--field-shadow-hover)]\",\n          \"focus-within:[background:var(--field-focus)] focus-within:[box-shadow:var(--field-shadow-focus)]\",\n          fullWidth ? \"w-full\" : \"\",\n          className,\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n      >\n        {animTags.map((at) => (\n          <span\n            key={at.text}\n            className={[\n              \"inline-flex items-center gap-1 pl-2 pr-1 py-0.5 rounded-[7px] text-[11.5px] font-medium text-ink-label select-none\",\n              \"transition-all duration-180 ease-[cubic-bezier(0.34,1.4,0.64,1)]\",\n              at.state === \"entering\" ? \"opacity-0 scale-75\" : \"\",\n              at.state === \"visible\" ? \"opacity-100 scale-100\" : \"\",\n              at.state === \"exiting\" ? \"opacity-0 scale-75\" : \"\",\n            ].join(\" \")}\n            style={{\n              /* Tags are small raised faces sitting in the sunken field */\n              background: \"var(--face)\",\n              boxShadow: \"var(--face-shadow)\",\n            }}\n          >\n            {at.text}\n            <button\n              type=\"button\"\n              onClick={(e) => {\n                e.stopPropagation();\n                const idx = tags.indexOf(at.text);\n                if (idx !== -1) removeTag(idx);\n              }}\n              aria-label={`Remove ${at.text}`}\n              className=\"w-4 h-4 inline-flex items-center justify-center rounded-[5px] text-ink-faint hover:text-ink hover:bg-ink/[0.06] cursor-pointer transition-colors\"\n            >\n              <svg width=\"8\" height=\"8\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" viewBox=\"0 0 24 24\">\n                <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n              </svg>\n            </button>\n          </span>\n        ))}\n        <input\n          ref={inputRef}\n          id={`${uid}-input`}\n          type=\"text\"\n          value={input}\n          onChange={(e) => setInput(e.target.value)}\n          onKeyDown={handleKeyDown}\n          onBlur={() => { if (input) addTag(input); }}\n          placeholder={tags.length === 0 ? placeholder : \"\"}\n          aria-label={label ? undefined : placeholder}\n          aria-describedby={hint ? `${uid}-hint` : undefined}\n          className=\"flex-1 min-w-[80px] bg-transparent text-[13.5px] text-ink placeholder:text-ink-faint outline-none py-0.5\"\n        />\n      </div>\n      {hint && <p id={`${uid}-hint`} className=\"text-[11.5px] text-ink-muted mt-0.5\">{hint}</p>}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/Textarea.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    hint?: string;
+    error?: string;
+    fullWidth?: boolean;
+    autoResize?: boolean;
+}
+declare function Textarea({ label, hint, error, fullWidth, autoResize, className, id, rows, onChange, ...rest }: TextareaProps): react_jsx_runtime.JSX.Element;
+
+export { Textarea };

package/dist/Textarea.js

@@ -0,0 +1,74 @@
+"use client";
+
+// ../../components/ui/Textarea.tsx
+import { useRef, useCallback, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Textarea({
+  label,
+  hint,
+  error,
+  fullWidth = false,
+  autoResize = false,
+  className = "",
+  id,
+  rows = 3,
+  onChange,
+  ...rest
+}) {
+  const textareaId = id ?? label?.toLowerCase().replace(/\s+/g, "-");
+  const messageId = textareaId && (error || hint) ? `${textareaId}-message` : void 0;
+  const ref = useRef(null);
+  const resize = useCallback(() => {
+    if (!autoResize || !ref.current) return;
+    ref.current.style.height = "auto";
+    ref.current.style.height = ref.current.scrollHeight + "px";
+  }, [autoResize]);
+  useEffect(() => {
+    resize();
+  }, [resize]);
+  const handleChange = (e) => {
+    resize();
+    onChange?.(e);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: ["group/field flex flex-col gap-1.5", fullWidth ? "w-full" : ""].join(" "), children: [
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: textareaId,
+        className: "text-[12.5px] font-medium text-ink-label tracking-[-0.005em] transition-colors duration-200 group-focus-within/field:text-ink-strong",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        id: textareaId,
+        rows,
+        onChange: handleChange,
+        className: [
+          "field rounded-xl px-4 py-3 text-[13.5px] text-ink resize-none scroll-thin",
+          "placeholder:text-ink-faint placeholder:transition-colors placeholder:duration-200 focus:placeholder:text-ink-ghost",
+          "disabled:opacity-40 disabled:cursor-not-allowed",
+          fullWidth ? "w-full" : "",
+          className
+        ].filter(Boolean).join(" "),
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": messageId,
+        ...rest
+      }
+    ),
+    error && /* @__PURE__ */ jsxs("p", { id: messageId, role: "alert", className: "text-[11.5px] text-danger font-medium flex items-center gap-1 mt-0.5", children: [
+      /* @__PURE__ */ jsxs("svg", { width: "11", height: "11", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("path", { strokeLinecap: "round", d: "M12 8v4m0 4h.01" })
+      ] }),
+      error
+    ] }),
+    hint && !error && /* @__PURE__ */ jsx("p", { id: messageId, className: "text-[11.5px] text-ink-muted mt-0.5", children: hint })
+  ] });
+}
+export {
+  Textarea
+};
+//# sourceMappingURL=Textarea.js.map

package/dist/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useRef, useCallback, useEffect } from \"react\";\n\ninterface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  label?: string;\n  hint?: string;\n  error?: string;\n  fullWidth?: boolean;\n  autoResize?: boolean;\n}\n\nexport function Textarea({\n  label,\n  hint,\n  error,\n  fullWidth = false,\n  autoResize = false,\n  className = \"\",\n  id,\n  rows = 3,\n  onChange,\n  ...rest\n}: TextareaProps) {\n  const textareaId = id ?? label?.toLowerCase().replace(/\\s+/g, \"-\");\n  const messageId = textareaId && (error || hint) ? `${textareaId}-message` : undefined;\n  const ref = useRef<HTMLTextAreaElement>(null);\n\n  const resize = useCallback(() => {\n    if (!autoResize || !ref.current) return;\n    ref.current.style.height = \"auto\";\n    ref.current.style.height = ref.current.scrollHeight + \"px\";\n  }, [autoResize]);\n\n  useEffect(() => { resize(); }, [resize]);\n\n  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    resize();\n    onChange?.(e);\n  };\n\n  return (\n    <div className={[\"group/field flex flex-col gap-1.5\", fullWidth ? \"w-full\" : \"\"].join(\" \")}>\n      {label && (\n        <label\n          htmlFor={textareaId}\n          className=\"text-[12.5px] font-medium text-ink-label tracking-[-0.005em] transition-colors duration-200 group-focus-within/field:text-ink-strong\"\n        >\n          {label}\n        </label>\n      )}\n      <textarea\n        ref={ref}\n        id={textareaId}\n        rows={rows}\n        onChange={handleChange}\n        className={[\n          \"field rounded-xl px-4 py-3 text-[13.5px] text-ink resize-none scroll-thin\",\n          \"placeholder:text-ink-faint placeholder:transition-colors placeholder:duration-200 focus:placeholder:text-ink-ghost\",\n          \"disabled:opacity-40 disabled:cursor-not-allowed\",\n          fullWidth ? \"w-full\" : \"\",\n          className,\n        ]\n          .filter(Boolean)\n          .join(\" \")}\n        aria-invalid={error ? true : undefined}\n        aria-describedby={messageId}\n        {...rest}\n      />\n      {error && (\n        <p id={messageId} role=\"alert\" className=\"text-[11.5px] text-danger font-medium flex items-center gap-1 mt-0.5\">\n          <svg width=\"11\" height=\"11\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\">\n            <circle cx=\"12\" cy=\"12\" r=\"10\" />\n            <path strokeLinecap=\"round\" d=\"M12 8v4m0 4h.01\" />\n          </svg>\n          {error}\n        </p>\n      )}\n      {hint && !error && (\n        <p id={messageId} className=\"text-[11.5px] text-ink-muted mt-0.5\">{hint}</p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;AAEA,SAAgB,QAAQ,aAAa,iBAAiB;AA0C9C,cA2BE,YA3BF;AAhCD,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,YAAY;AAAA,EACZ;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAkB;AAChB,QAAM,aAAa,MAAM,OAAO,YAAY,EAAE,QAAQ,QAAQ,GAAG;AACjE,QAAM,YAAY,eAAe,SAAS,QAAQ,GAAG,UAAU,aAAa;AAC5E,QAAM,MAAM,OAA4B,IAAI;AAE5C,QAAM,SAAS,YAAY,MAAM;AAC/B,QAAI,CAAC,cAAc,CAAC,IAAI,QAAS;AACjC,QAAI,QAAQ,MAAM,SAAS;AAC3B,QAAI,QAAQ,MAAM,SAAS,IAAI,QAAQ,eAAe;AAAA,EACxD,GAAG,CAAC,UAAU,CAAC;AAEf,YAAU,MAAM;AAAE,WAAO;AAAA,EAAG,GAAG,CAAC,MAAM,CAAC;AAEvC,QAAM,eAAe,CAAC,MAA8C;AAClE,WAAO;AACP,eAAW,CAAC;AAAA,EACd;AAEA,SACE,qBAAC,SAAI,WAAW,CAAC,qCAAqC,YAAY,WAAW,EAAE,EAAE,KAAK,GAAG,GACtF;AAAA,aACC;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAU;AAAA,QAET;AAAA;AAAA,IACH;AAAA,IAEF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI;AAAA,QACJ;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA,YAAY,WAAW;AAAA,UACvB;AAAA,QACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,QACX,gBAAc,QAAQ,OAAO;AAAA,QAC7B,oBAAkB;AAAA,QACjB,GAAG;AAAA;AAAA,IACN;AAAA,IACC,SACC,qBAAC,OAAE,IAAI,WAAW,MAAK,SAAQ,WAAU,wEACvC;AAAA,2BAAC,SAAI,OAAM,MAAK,QAAO,MAAK,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,SAAQ,aACpF;AAAA,4BAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,QAC/B,oBAAC,UAAK,eAAc,SAAQ,GAAE,mBAAkB;AAAA,SAClD;AAAA,MACC;AAAA,OACH;AAAA,IAED,QAAQ,CAAC,SACR,oBAAC,OAAE,IAAI,WAAW,WAAU,uCAAuC,gBAAK;AAAA,KAE5E;AAEJ;","names":[]}

package/dist/TimePicker.d.ts

@@ -0,0 +1,28 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface TimePickerProps {
+    /** 24-hour "HH:mm", like "14:30" */
+    value?: string | null;
+    defaultValue?: string | null;
+    onChange?: (time: string | null) => void;
+    /** Minutes between choices in the minute column */
+    step?: number;
+    /** Show 1–12 with am / pm instead of 0–23 */
+    hour12?: boolean;
+    /** Earliest and latest times, as "HH:mm" */
+    min?: string;
+    max?: string;
+    label?: string;
+    hint?: string;
+    error?: string;
+    placeholder?: string;
+    clearable?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    name?: string;
+    className?: string;
+}
+declare function formatTime(t: string, hour12: boolean): string;
+declare function TimePicker({ value, defaultValue, onChange, step, hour12, min, max, label, hint, error, placeholder, clearable, disabled, fullWidth, name, className, }: TimePickerProps): react_jsx_runtime.JSX.Element;
+
+export { TimePicker, formatTime };

package/dist/TimePicker.js

@@ -0,0 +1,264 @@
+"use client";
+
+// ../../components/ui/TimePicker.tsx
+import { useId, useRef, useState } from "react";
+import { ClearKey } from "./DatePicker.js";
+import { Portal } from "./Floating.js";
+import { FieldLabel, FieldMessage } from "./FieldMessage.js";
+import { useFloatingPanel } from "./useFloatingPanel.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var pad = (n) => String(n).padStart(2, "0");
+var toMinutes = (t) => {
+  if (!t) return null;
+  const m = /^(\d{1,2}):(\d{2})$/.exec(t);
+  return m ? Number(m[1]) * 60 + Number(m[2]) : null;
+};
+var fromMinutes = (m) => `${pad(Math.floor(m / 60))}:${pad(m % 60)}`;
+function formatTime(t, hour12) {
+  const m = toMinutes(t);
+  if (m === null) return t;
+  const h = Math.floor(m / 60);
+  return hour12 ? `${h % 12 || 12}:${pad(m % 60)} ${h < 12 ? "am" : "pm"}` : fromMinutes(m);
+}
+function TimePicker({
+  value,
+  defaultValue = null,
+  onChange,
+  step = 15,
+  hour12 = false,
+  min,
+  max,
+  label,
+  hint,
+  error,
+  placeholder = "pick a time",
+  clearable = false,
+  disabled = false,
+  fullWidth = false,
+  name,
+  className = ""
+}) {
+  const uid = useId();
+  const ref = useRef(null);
+  const buttonRef = useRef(null);
+  const [internal, setInternal] = useState(defaultValue);
+  const current = value !== void 0 ? value : internal;
+  const total = toMinutes(current);
+  const { open, mounted, toggle, close, setFloating, panelStyle } = useFloatingPanel(ref, {
+    onEscape: () => buttonRef.current?.focus()
+  });
+  const messageId = error || hint ? `${uid}-message` : void 0;
+  const lo = toMinutes(min) ?? 0;
+  const hi = toMinutes(max) ?? 24 * 60 - 1;
+  const hour = total === null ? null : Math.floor(total / 60);
+  const minute = total === null ? null : total % 60;
+  const set = (t) => {
+    setInternal(t);
+    onChange?.(t);
+  };
+  const choose = (h, m) => {
+    let t = h * 60 + m;
+    if (t < lo) t = lo;
+    if (t > hi) t = hi;
+    set(fromMinutes(t));
+  };
+  const hours = hour12 ? Array.from({ length: 12 }, (_, i) => i === 0 ? 12 : i) : Array.from({ length: 24 }, (_, i) => i);
+  const minutes = Array.from({ length: Math.ceil(60 / step) }, (_, i) => i * step).filter((m) => m < 60);
+  const isPm = hour !== null && hour >= 12;
+  const to24 = (h12, pm) => h12 % 12 + (pm ? 12 : 0);
+  const hourOff = (h24) => h24 * 60 + 59 < lo || h24 * 60 > hi;
+  const minuteOff = (m) => hour !== null && (hour * 60 + m < lo || hour * 60 + m > hi);
+  const columns = [
+    {
+      id: "hour",
+      label: "hour",
+      cells: hours.map((h) => {
+        const h24 = hour12 ? to24(h, isPm) : h;
+        return {
+          key: `h${h}`,
+          label: hour12 ? String(h) : pad(h),
+          selected: hour === h24,
+          off: hourOff(h24),
+          pick: () => choose(h24, minute ?? 0)
+        };
+      })
+    },
+    {
+      id: "minute",
+      label: "minute",
+      cells: minutes.map((m) => ({
+        key: `m${m}`,
+        label: pad(m),
+        selected: minute === m,
+        off: minuteOff(m),
+        pick: () => {
+          choose(hour ?? Math.floor(lo / 60), m);
+          close();
+          buttonRef.current?.focus();
+        }
+      }))
+    }
+  ];
+  if (hour12) {
+    columns.push({
+      id: "period",
+      label: "am or pm",
+      cells: ["am", "pm"].map((p) => {
+        const pm = p === "pm";
+        const h24 = to24(hour === null ? 12 : hour % 12 || 12, pm);
+        return {
+          key: p,
+          label: p,
+          selected: hour !== null && isPm === pm,
+          off: pm ? hi < 12 * 60 : lo >= 12 * 60,
+          pick: () => choose(h24, minute ?? 0)
+        };
+      })
+    });
+  }
+  const colRefs = useRef({});
+  const attachColumn = (id) => (el) => {
+    colRefs.current[id] = el;
+    const sel = el?.querySelector('[aria-selected="true"]');
+    if (!el || el.dataset.scrolled) return;
+    el.dataset.scrolled = "1";
+    if (sel) el.scrollTop = sel.offsetTop - el.clientHeight / 2 + sel.offsetHeight / 2;
+    if (id === "hour") el.focus({ preventScroll: true });
+  };
+  const onColumnKey = (ci) => (e) => {
+    const col = columns[ci];
+    const enabled = col.cells.map((c, i) => c.off ? -1 : i).filter((i) => i >= 0);
+    const at = col.cells.findIndex((c) => c.selected);
+    const pos = enabled.indexOf(at);
+    const focusCol = (n) => colRefs.current[columns[Math.max(0, Math.min(columns.length - 1, n))].id]?.focus();
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const d = e.key === "ArrowDown" ? 1 : -1;
+      const next = enabled[pos < 0 ? 0 : (pos + d + enabled.length) % enabled.length];
+      if (col.id === "minute") choose(hour ?? Math.floor(lo / 60), minutes[next]);
+      else col.cells[next]?.pick();
+      requestAnimationFrame(
+        () => colRefs.current[col.id]?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: "nearest" })
+      );
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      focusCol(ci + 1);
+    } else if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      focusCol(ci - 1);
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      close();
+      buttonRef.current?.focus();
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: ["group/field flex flex-col gap-1.5", fullWidth ? "w-full" : ""].join(" "), children: [
+    label && /* @__PURE__ */ jsx(FieldLabel, { id: `${uid}-label`, children: label }),
+    /* @__PURE__ */ jsxs("div", { ref, className: ["relative", fullWidth ? "w-full" : "inline-block w-44", className].join(" "), children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: buttonRef,
+          type: "button",
+          disabled,
+          onClick: toggle,
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          "aria-labelledby": label ? `${uid}-label ${uid}-value` : void 0,
+          "aria-invalid": error ? true : void 0,
+          "aria-describedby": messageId,
+          "data-open": open || void 0,
+          className: [
+            "field group/time relative isolate flex w-full cursor-pointer items-center gap-2.5 rounded-xl py-3 pl-3.5 text-left text-[13.5px]",
+            clearable && current ? "pr-10" : "pr-4",
+            "focus:outline-none disabled:opacity-40 disabled:pointer-events-none"
+          ].join(" "),
+          children: [
+            /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                "aria-hidden": true,
+                width: "15",
+                height: "15",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                viewBox: "0 0 24 24",
+                className: [
+                  "shrink-0 transition-[color,transform] duration-300 ease-[var(--ease-spring)]",
+                  open ? "scale-110 text-ink-soft" : "text-ink-faint group-hover/time:text-ink-body"
+                ].join(" "),
+                children: [
+                  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+                  /* @__PURE__ */ jsx("path", { d: "M12 7v5l3 2" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { id: `${uid}-value`, className: ["tabular-nums", current ? "font-medium text-ink" : "text-ink-faint"].join(" "), children: current ? formatTime(current, hour12) : placeholder })
+          ]
+        }
+      ),
+      clearable && current && !disabled && /* @__PURE__ */ jsx(
+        ClearKey,
+        {
+          label: "clear time",
+          onClear: () => {
+            set(null);
+            buttonRef.current?.focus();
+          }
+        }
+      ),
+      name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: current ?? "" })
+    ] }),
+    mounted && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setFloating,
+        role: "dialog",
+        "aria-label": label ? `choose ${label}` : "choose a time",
+        className: "rounded-[16px] p-1.5",
+        style: panelStyle,
+        children: /* @__PURE__ */ jsx("div", { className: "flex gap-1 rounded-[11px] bg-panel-face p-1.5", style: { boxShadow: "var(--panel-face-shadow)" }, children: columns.map((col, ci) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: attachColumn(col.id),
+            role: "listbox",
+            "aria-label": col.label,
+            tabIndex: 0,
+            onKeyDown: onColumnKey(ci),
+            className: "flex max-h-56 w-14 flex-col gap-0.5 overflow-y-auto rounded-[9px] p-0.5 scroll-thin outline-none focus-visible:ring-2 focus-visible:ring-ink",
+            style: { scrollbarWidth: "none" },
+            children: col.cells.map((c) => /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "option",
+                "aria-selected": c.selected,
+                "aria-disabled": c.off || void 0,
+                onClick: () => !c.off && c.pick(),
+                className: [
+                  "grid h-8 shrink-0 place-items-center rounded-[8px] text-[13px] tabular-nums transition-colors duration-100",
+                  c.off ? "cursor-not-allowed text-ink-ghost" : c.selected ? "cursor-pointer font-semibold text-ink-inverse" : "cursor-pointer text-ink-body hover:bg-surface-active hover:text-ink"
+                ].join(" "),
+                style: c.selected && !c.off ? {
+                  background: "var(--face-inverse)",
+                  boxShadow: "var(--face-inverse-shadow)",
+                  textShadow: "var(--emboss-inverse)"
+                } : void 0,
+                children: c.label
+              },
+              c.key
+            ))
+          },
+          col.id
+        )) })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(FieldMessage, { id: messageId, error, hint })
+  ] });
+}
+export {
+  TimePicker,
+  formatTime
+};
+//# sourceMappingURL=TimePicker.js.map

package/dist/TimePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/TimePicker.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useId, useRef, useState } from \"react\";\nimport { ClearKey } from \"./DatePicker\";\nimport { Portal } from \"./Floating\";\nimport { FieldLabel, FieldMessage } from \"./FieldMessage\";\nimport { useFloatingPanel } from \"./useFloatingPanel\";\n\ninterface TimePickerProps {\n  /** 24-hour \"HH:mm\", like \"14:30\" */\n  value?: string | null;\n  defaultValue?: string | null;\n  onChange?: (time: string | null) => void;\n  /** Minutes between choices in the minute column */\n  step?: number;\n  /** Show 1–12 with am / pm instead of 0–23 */\n  hour12?: boolean;\n  /** Earliest and latest times, as \"HH:mm\" */\n  min?: string;\n  max?: string;\n  label?: string;\n  hint?: string;\n  error?: string;\n  placeholder?: string;\n  clearable?: boolean;\n  disabled?: boolean;\n  fullWidth?: boolean;\n  name?: string;\n  className?: string;\n}\n\nconst pad = (n: number) => String(n).padStart(2, \"0\");\nconst toMinutes = (t?: string | null) => {\n  if (!t) return null;\n  const m = /^(\\d{1,2}):(\\d{2})$/.exec(t);\n  return m ? Number(m[1]) * 60 + Number(m[2]) : null;\n};\nconst fromMinutes = (m: number) => `${pad(Math.floor(m / 60))}:${pad(m % 60)}`;\n\nexport function formatTime(t: string, hour12: boolean) {\n  const m = toMinutes(t);\n  if (m === null) return t;\n  const h = Math.floor(m / 60);\n  return hour12 ? `${h % 12 || 12}:${pad(m % 60)} ${h < 12 ? \"am\" : \"pm\"}` : fromMinutes(m);\n}\n\ntype Column = \"hour\" | \"minute\" | \"period\";\n\n/* A field that opens a panel of columns: hours, minutes and, for a\n   12-hour clock, am / pm. The chosen cell in each is a raised key in the\n   inverse material. Arrows move within a column and between columns;\n   Enter or picking a minute closes it.                              */\nexport function TimePicker({\n  value,\n  defaultValue = null,\n  onChange,\n  step = 15,\n  hour12 = false,\n  min,\n  max,\n  label,\n  hint,\n  error,\n  placeholder = \"pick a time\",\n  clearable = false,\n  disabled = false,\n  fullWidth = false,\n  name,\n  className = \"\",\n}: TimePickerProps) {\n  const uid = useId();\n  const ref = useRef<HTMLDivElement>(null);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const [internal, setInternal] = useState<string | null>(defaultValue);\n  const current = value !== undefined ? value : internal;\n  const total = toMinutes(current);\n  const { open, mounted, toggle, close, setFloating, panelStyle } = useFloatingPanel(ref, {\n    onEscape: () => buttonRef.current?.focus(),\n  });\n  const messageId = error || hint ? `${uid}-message` : undefined;\n\n  const lo = toMinutes(min) ?? 0;\n  const hi = toMinutes(max) ?? 24 * 60 - 1;\n  const hour = total === null ? null : Math.floor(total / 60);\n  const minute = total === null ? null : total % 60;\n\n  const set = (t: string | null) => {\n    setInternal(t);\n    onChange?.(t);\n  };\n\n  /* Picks a time, nudging the minutes into range when the hour changes */\n  const choose = (h: number, m: number) => {\n    let t = h * 60 + m;\n    if (t < lo) t = lo;\n    if (t > hi) t = hi;\n    set(fromMinutes(t));\n  };\n\n  const hours = hour12 ? Array.from({ length: 12 }, (_, i) => (i === 0 ? 12 : i)) : Array.from({ length: 24 }, (_, i) => i);\n  const minutes = Array.from({ length: Math.ceil(60 / step) }, (_, i) => i * step).filter((m) => m < 60);\n  const isPm = hour !== null && hour >= 12;\n  const to24 = (h12: number, pm: boolean) => (h12 % 12) + (pm ? 12 : 0);\n\n  const hourOff = (h24: number) => h24 * 60 + 59 < lo || h24 * 60 > hi;\n  const minuteOff = (m: number) => hour !== null && (hour * 60 + m < lo || hour * 60 + m > hi);\n\n  type Cell = { key: string; label: string; selected: boolean; off: boolean; pick: () => void };\n  const columns: { id: Column; label: string; cells: Cell[] }[] = [\n    {\n      id: \"hour\",\n      label: \"hour\",\n      cells: hours.map((h) => {\n        const h24 = hour12 ? to24(h, isPm) : h;\n        return {\n          key: `h${h}`,\n          label: hour12 ? String(h) : pad(h),\n          selected: hour === h24,\n          off: hourOff(h24),\n          pick: () => choose(h24, minute ?? 0),\n        };\n      }),\n    },\n    {\n      id: \"minute\",\n      label: \"minute\",\n      cells: minutes.map((m) => ({\n        key: `m${m}`,\n        label: pad(m),\n        selected: minute === m,\n        off: minuteOff(m),\n        pick: () => {\n          choose(hour ?? Math.floor(lo / 60), m);\n          close();\n          buttonRef.current?.focus();\n        },\n      })),\n    },\n  ];\n  if (hour12) {\n    columns.push({\n      id: \"period\",\n      label: \"am or pm\",\n      cells: ([\"am\", \"pm\"] as const).map((p) => {\n        const pm = p === \"pm\";\n        const h24 = to24(hour === null ? 12 : hour % 12 || 12, pm);\n        return {\n          key: p,\n          label: p,\n          selected: hour !== null && isPm === pm,\n          off: pm ? hi < 12 * 60 : lo >= 12 * 60,\n          pick: () => choose(h24, minute ?? 0),\n        };\n      }),\n    });\n  }\n\n  const colRefs = useRef<Record<string, HTMLDivElement | null>>({});\n\n  /* Each column scrolls its chosen cell into the middle when it mounts */\n  const attachColumn = (id: Column) => (el: HTMLDivElement | null) => {\n    colRefs.current[id] = el;\n    const sel = el?.querySelector<HTMLElement>('[aria-selected=\"true\"]');\n    if (!el || el.dataset.scrolled) return;\n    el.dataset.scrolled = \"1\";\n    if (sel) el.scrollTop = sel.offsetTop - el.clientHeight / 2 + sel.offsetHeight / 2;\n    // The panel lives at the end of <body>, so focus goes to it rather than waiting for Tab\n    if (id === \"hour\") el.focus({ preventScroll: true });\n  };\n\n  const onColumnKey = (ci: number) => (e: React.KeyboardEvent) => {\n    const col = columns[ci];\n    const enabled = col.cells.map((c, i) => (c.off ? -1 : i)).filter((i) => i >= 0);\n    const at = col.cells.findIndex((c) => c.selected);\n    const pos = enabled.indexOf(at);\n    const focusCol = (n: number) =>\n      colRefs.current[columns[Math.max(0, Math.min(columns.length - 1, n))].id]?.focus();\n    if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n      e.preventDefault();\n      const d = e.key === \"ArrowDown\" ? 1 : -1;\n      const next = enabled[pos < 0 ? 0 : (pos + d + enabled.length) % enabled.length];\n      // the minute column closes on pick; from the keyboard, just move\n      if (col.id === \"minute\") choose(hour ?? Math.floor(lo / 60), minutes[next]);\n      else col.cells[next]?.pick();\n      requestAnimationFrame(() =>\n        colRefs.current[col.id]?.querySelector('[aria-selected=\"true\"]')?.scrollIntoView({ block: \"nearest\" }),\n      );\n    } else if (e.key === \"ArrowRight\") {\n      e.preventDefault();\n      focusCol(ci + 1);\n    } else if (e.key === \"ArrowLeft\") {\n      e.preventDefault();\n      focusCol(ci - 1);\n    } else if (e.key === \"Enter\") {\n      e.preventDefault();\n      close();\n      buttonRef.current?.focus();\n    }\n  };\n\n  return (\n    <div className={[\"group/field flex flex-col gap-1.5\", fullWidth ? \"w-full\" : \"\"].join(\" \")}>\n      {label && <FieldLabel id={`${uid}-label`}>{label}</FieldLabel>}\n      <div ref={ref} className={[\"relative\", fullWidth ? \"w-full\" : \"inline-block w-44\", className].join(\" \")}>\n        {/* The field's error styling keys off aria-invalid, as Input's does */}\n        {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}\n        <button\n          ref={buttonRef}\n          type=\"button\"\n          disabled={disabled}\n          onClick={toggle}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open}\n          aria-labelledby={label ? `${uid}-label ${uid}-value` : undefined}\n          aria-invalid={error ? true : undefined}\n          aria-describedby={messageId}\n          data-open={open || undefined}\n          className={[\n            \"field group/time relative isolate flex w-full cursor-pointer items-center gap-2.5 rounded-xl py-3 pl-3.5 text-left text-[13.5px]\",\n            clearable && current ? \"pr-10\" : \"pr-4\",\n            \"focus:outline-none disabled:opacity-40 disabled:pointer-events-none\",\n          ].join(\" \")}\n        >\n          <svg\n            aria-hidden\n            width=\"15\"\n            height=\"15\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            viewBox=\"0 0 24 24\"\n            className={[\n              \"shrink-0 transition-[color,transform] duration-300 ease-[var(--ease-spring)]\",\n              open ? \"scale-110 text-ink-soft\" : \"text-ink-faint group-hover/time:text-ink-body\",\n            ].join(\" \")}\n          >\n            <circle cx=\"12\" cy=\"12\" r=\"9\" />\n            <path d=\"M12 7v5l3 2\" />\n          </svg>\n          <span id={`${uid}-value`} className={[\"tabular-nums\", current ? \"font-medium text-ink\" : \"text-ink-faint\"].join(\" \")}>\n            {current ? formatTime(current, hour12) : placeholder}\n          </span>\n        </button>\n        {clearable && current && !disabled && (\n          <ClearKey\n            label=\"clear time\"\n            onClear={() => {\n              set(null);\n              buttonRef.current?.focus();\n            }}\n          />\n        )}\n        {name && <input type=\"hidden\" name={name} value={current ?? \"\"} />}\n      </div>\n\n      {mounted && (\n        <Portal>\n          <div\n            ref={setFloating}\n            role=\"dialog\"\n            aria-label={label ? `choose ${label}` : \"choose a time\"}\n            className=\"rounded-[16px] p-1.5\"\n            style={panelStyle}\n          >\n            <div className=\"flex gap-1 rounded-[11px] bg-panel-face p-1.5\" style={{ boxShadow: \"var(--panel-face-shadow)\" }}>\n              {columns.map((col, ci) => (\n                <div\n                  key={col.id}\n                  ref={attachColumn(col.id)}\n                  role=\"listbox\"\n                  aria-label={col.label}\n                  tabIndex={0}\n                  onKeyDown={onColumnKey(ci)}\n                  className=\"flex max-h-56 w-14 flex-col gap-0.5 overflow-y-auto rounded-[9px] p-0.5 scroll-thin outline-none focus-visible:ring-2 focus-visible:ring-ink\"\n                  style={{ scrollbarWidth: \"none\" }}\n                >\n                  {col.cells.map((c) => (\n                    <div\n                      key={c.key}\n                      role=\"option\"\n                      aria-selected={c.selected}\n                      aria-disabled={c.off || undefined}\n                      onClick={() => !c.off && c.pick()}\n                      className={[\n                        \"grid h-8 shrink-0 place-items-center rounded-[8px] text-[13px] tabular-nums transition-colors duration-100\",\n                        c.off\n                          ? \"cursor-not-allowed text-ink-ghost\"\n                          : c.selected\n                            ? \"cursor-pointer font-semibold text-ink-inverse\"\n                            : \"cursor-pointer text-ink-body hover:bg-surface-active hover:text-ink\",\n                      ].join(\" \")}\n                      style={\n                        c.selected && !c.off\n                          ? {\n                              background: \"var(--face-inverse)\",\n                              boxShadow: \"var(--face-inverse-shadow)\",\n                              textShadow: \"var(--emboss-inverse)\",\n                            }\n                          : undefined\n                      }\n                    >\n                      {c.label}\n                    </div>\n                  ))}\n                </div>\n              ))}\n            </div>\n          </div>\n        </Portal>\n      )}\n      <FieldMessage id={messageId} error={error} hint={hint} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/Timeline.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type TimelineVariant = "default" | "success" | "warning" | "accent";
+interface TimelineItem {
+    key: string;
+    title: string;
+    description?: string;
+    date?: string;
+    icon?: React.ReactNode;
+    variant?: TimelineVariant;
+}
+interface TimelineProps {
+    items: TimelineItem[];
+    className?: string;
+}
+declare function Timeline({ items, className }: TimelineProps): react_jsx_runtime.JSX.Element;
+
+export { Timeline };