@konstructio/ui 0.1.2-alpha.7 → 0.1.2-alpha.71

package/dist/components/TextArea/TextArea.js

@@ -1,36 +1,37 @@
-import { jsxs as f, jsx as o } from "react/jsx-runtime";
-import { forwardRef as x, useId as u } from "react";
-import { cn as h } from "../../utils/index.js";
-import { textAreaVariants as p } from "./TextArea.variants.js";
-const I = x(
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import { forwardRef as u, useId as p } from "react";
+import { cn as m } from "../../utils/index.js";
+import { textAreaVariants as v } from "./TextArea.variants.js";
+const g = u(
   ({
-    initialValue: m,
-    label: e,
-    name: l,
-    placeholder: s,
-    rows: c = 3,
-    theme: i,
-    className: n,
-    ...r
-  }, d) => {
-    const t = u(), a = l ? `${t}-name` : t;
-    return /* @__PURE__ */ f("div", { className: "flex flex-col gap-2", "data-theme": i, children: [
-      e ? /* @__PURE__ */ o("label", { htmlFor: a, className: "cursor-pointer", children: e }) : null,
-      /* @__PURE__ */ o(
+    initialValue: o,
+    label: r,
+    labelWrapperClassName: s,
+    name: c,
+    placeholder: i,
+    rows: n = 3,
+    theme: d,
+    className: f,
+    ...a
+  }, x) => {
+    const t = p(), l = c ? `${t}-name` : t;
+    return /* @__PURE__ */ h("div", { className: "flex flex-col gap-2", "data-theme": d, children: [
+      r ? /* @__PURE__ */ e("div", { className: m(s), children: /* @__PURE__ */ e("label", { htmlFor: l, className: "cursor-pointer", children: r }) }) : null,
+      /* @__PURE__ */ e(
         "textarea",
         {
-          id: a,
-          ref: d,
-          className: h(p({ className: n })),
-          rows: c,
-          placeholder: s,
-          value: m ?? r.value,
-          ...r
+          id: l,
+          ref: x,
+          className: m(v({ className: f })),
+          rows: n,
+          placeholder: i,
+          value: o ?? a.value,
+          ...a
         }
       )
     ] });
   }
 );
 export {
-  I as TextArea
+  g as TextArea
 };

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

@@ -0,0 +1,28 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+import { textAreaVariants } from './TextArea.variants';
+/**
+ * Props for the TextArea component.
+ *
+ * @example
+ * ```tsx
+ * <TextArea label="Description" placeholder="Enter description..." />
+ * <TextArea label="Notes" rows={5} />
+ * <TextArea name="bio" initialValue="Default text" />
+ * ```
+ */
+export interface TextAreaProps extends InputHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textAreaVariants> {
+    /** Number of visible text rows (default: 3) */
+    rows?: number;
+    /** Label displayed above the textarea */
+    label?: string | ReactNode;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
+    /** Form field name */
+    name?: string;
+    /** Initial/default value */
+    initialValue?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+}

package/dist/components/TextArea/TextArea.variants.d.ts

@@ -0,0 +1 @@
+export declare const textAreaVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/TimePicker/TimePicker.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { TimePickerProps } from './TimePicker.types';
+/**
+ * A scrollable time picker component with 12 or 24 hour format support.
+ * Features smooth scroll navigation through hours, minutes, and AM/PM options.
+ *
+ * @example
+ * ```tsx
+ * <TimePicker
+ *   label="Start Time"
+ *   name="startTime"
+ *   format="12"
+ *   time={selectedTime}
+ *   scrollBehavior="smooth"
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-timepicker--docs Storybook}
+ */
+declare const TimePicker: FC<TimePickerProps>;
+export { TimePicker };

package/dist/components/TimePicker/TimePicker.js

@@ -1,8 +1,15 @@
 import { jsx as r } from "react/jsx-runtime";
-import { TimePickerProvider as m } from "./contexts/time-picker.provider.js";
-import { Wrapper as o } from "./components/Wrapper/Wrapper.js";
-const p = ({ format: i = "12", ...e }) => /* @__PURE__ */ r(m, { format: i, children: /* @__PURE__ */ r(o, { ...e }) });
-p.displayName = "TimePicker";
+import { TimePickerProvider as p } from "./contexts/time-picker.provider.js";
+import { Wrapper as s } from "./components/Wrapper/Wrapper.js";
+const P = ({
+  format: e = "12",
+  mode: i = "select",
+  showList: m = !0,
+  time: o,
+  onChange: t,
+  ...c
+}) => /* @__PURE__ */ r(p, { format: e, time: o, onChange: t, children: /* @__PURE__ */ r(s, { mode: i, showList: m, ...c }) });
+P.displayName = "KonstructTimePicker";
 export {
-  p as TimePicker
+  P as TimePicker
 };

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

@@ -0,0 +1,53 @@
+import { VariantProps } from 'class-variance-authority';
+import { timePickerVariants } from './TimePicker.variants';
+/**
+ * Props for the TimePicker component.
+ * A scrollable time picker with support for 12 and 24 hour formats.
+ *
+ * @example
+ * ```tsx
+ * <TimePicker
+ *   label="Meeting Time"
+ *   name="meetingTime"
+ *   format="12"
+ *   time={new Date()}
+ *   isRequired
+ * />
+ * ```
+ */
+export type TimePickerProps = VariantProps<typeof timePickerVariants> & {
+    /** Time format: '12' for AM/PM or '24' for military time */
+    format?: '12' | '24';
+    /** Input mode: 'select' for dropdown only, 'input' for typing */
+    mode?: 'select' | 'input';
+    /** Whether to show the dropdown list (default: true) */
+    showList?: boolean;
+    /** Scroll behavior when navigating times */
+    scrollBehavior?: 'smooth' | 'auto';
+    /** Currently selected time */
+    time?: Date;
+    /** Form field name */
+    name?: string;
+    /** Label displayed above the picker */
+    label?: string;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Additional CSS classes for the scrollable list */
+    listClassName?: string;
+    /** Additional CSS classes for list items */
+    listItemClassName?: string;
+    /** Additional CSS classes for list item buttons */
+    listItemButtonClassName?: string;
+    /** Callback when time changes */
+    onChange?: (time: Date) => void;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Error message to display (overrides internal validation error) */
+    error?: string;
+    /** Placeholder text for input mode */
+    placeholder?: string;
+    /** Direction to open the dropdown list (default: 'bottom') */
+    listPosition?: 'top' | 'bottom';
+};

package/dist/components/TimePicker/TimePicker.variants.d.ts

@@ -0,0 +1,4 @@
+export declare const timePickerVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const ulVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const liVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const buttonVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/TimePicker/TimePicker.variants.js

@@ -1,46 +1,57 @@
-import { c as r } from "../../index-D29mdTf5.js";
-const t = r([
+import { c as t } from "../../index-D29mdTf5.js";
+const r = t([
   "border",
   "rounded",
-  "p-[0.625rem]",
+  "p-2.5",
   "w-full",
   "flex",
   "items-center",
   "justify-between",
+  "bg-white",
   "border-gray-300",
+  "dark:border-metal-700",
+  "dark:bg-metal-800",
   "cursor-pointer",
   "transition-all",
   "transition-duration-100",
   "data-[open=true]:border-aurora-500",
-  "text-sm"
-]), o = r([
+  "text-sm",
+  "text-slate-800",
+  "dark:text-slate-50"
+]), e = t([
   "snap-y",
   "snap-mandatory",
   "overflow-y-scroll",
   "scrollbar-none",
   "flex",
-  "flex-col"
-]), n = r([
-  "w-[60px]",
-  "h-[40px]",
+  "flex-col",
+  "dark:text-metal-50"
+]), o = t([
+  "w-15",
+  "h-10",
   "snap-start",
   "rounded",
   "transition-all",
   "transition-duration-100",
-  "focus-within:outline-2",
+  "outline-none",
   "border-2",
   "border-transparent",
-  "outline-none",
   "hover:bg-gray-100",
-  "hover:border-2",
-  "hover:border-white",
+  "focus-within:bg-gray-100",
   "data-[active=true]:bg-blue-600",
-  "data-[active=true]:hover:border-blue-200",
   "data-[active=true]:text-white",
   "data-[active=true]:font-medium",
-  "focus-visible:border-blue-200",
-  "focus-within:border-blue-200"
-]), a = r([
+  "data-[active=true]:hover:border-blue-200",
+  "data-[active=true]:focus-within:bg-blue-600",
+  "data-[active=true]:focus-within:border-blue-200",
+  "dark:data-[active=true]:bg-aurora-500",
+  "dark:data-[active=true]:text-metal-900",
+  "dark:data-[active=true]:hover:border-aurora-50",
+  "dark:data-[active=true]:focus-within:bg-aurora-500",
+  "dark:data-[active=true]:focus-within:border-aurora-50",
+  "dark:hover:bg-metal-700",
+  "dark:focus-within:bg-metal-700"
+]), i = t([
   "flex",
   "items-center",
   "justify-center",
@@ -50,12 +61,11 @@ const t = r([
   "px-6",
   "py-3",
   "outline-none",
-  "focus:border-blue-200",
   "text-sm"
 ]);
 export {
-  a as buttonVariants,
-  n as liVariants,
-  t as timePickerVariants,
-  o as ulVariants
+  i as buttonVariants,
+  o as liVariants,
+  r as timePickerVariants,
+  e as ulVariants
 };

package/dist/components/TimePicker/components/HoursList/HoursList.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { HourListProps } from './HoursList.types';
+declare const HoursList: FC<HourListProps>;
+export { HoursList };

package/dist/components/TimePicker/components/HoursList/HoursList.js

@@ -1,88 +1,125 @@
-import { jsx as a } from "react/jsx-runtime";
-import { useRef as p, useCallback as v, useEffect as y } from "react";
-import { cn as o } from "../../../../utils/index.js";
-import { buttonVariants as b, liVariants as d, ulVariants as h } from "../../TimePicker.variants.js";
-import { useTimePickerContext as k } from "../../contexts/time-picker.hook.js";
-const H = ({ hours: l, scrollBehavior: i }) => {
-  const n = p(null), u = p(!0), { format: c, onSelectHour: m } = k(), s = c === "12" && l >= 12 ? l - 12 : l, f = v(
-    (r, t) => {
-      r.currentTarget?.blur(), m(t);
+import { jsx as i } from "react/jsx-runtime";
+import { useRef as k, useCallback as d, useEffect as H } from "react";
+import { cn as l } from "../../../../utils/index.js";
+import { buttonVariants as A, liVariants as v, ulVariants as D } from "../../TimePicker.variants.js";
+import { useTimePickerContext as S } from "../../contexts/time-picker.hook.js";
+const h = ({ hours: a, scrollBehavior: f }) => {
+  const c = k(null), N = k(a), { format: n, isTyping: p, onSelectHour: u } = S(), b = n === "12" && a >= 12 ? a - 12 : a, m = n === "12" ? 12 : 24, y = d(
+    (e, t) => {
+      e.currentTarget?.blur(), u(t);
     },
-    [m]
+    [u]
+  ), w = d(
+    (e, t) => {
+      const o = c.current?.querySelectorAll("button");
+      if (!o) return;
+      let r = t;
+      if (e.key === "ArrowDown" || e.key === "Tab" && !e.shiftKey)
+        e.preventDefault(), r = (t + 1) % m;
+      else if (e.key === "ArrowUp" || e.key === "Tab" && e.shiftKey)
+        e.preventDefault(), r = (t - 1 + m) % m;
+      else if (e.key === "Enter") {
+        e.preventDefault();
+        const s = n === "12" ? t + 1 : t;
+        u(s), document.querySelector('[aria-label="minutes"]')?.querySelector(
+          'li[data-active="true"] button'
+        )?.focus();
+        return;
+      }
+      r !== t && o[r]?.focus();
+    },
+    [n, m, u]
   );
-  if (y(() => {
-    if (u.current) {
-      const r = n.current, t = s === 0 && c === "12" ? 12 : s;
-      r && r.querySelector(
-        `[data-value="${`0${t}`.slice(-2)}"]`
-      )?.scrollIntoView({
-        behavior: i,
-        block: "center"
-      }), u.current = !1;
-    }
-  }, [c, s, i]), c === "12") {
-    const r = s === 0 ? 12 : s;
-    return /* @__PURE__ */ a(
+  if (H(() => {
+    const e = c.current, t = N.current, o = n === "12" && t >= 12 ? t - 12 : t, r = o === 0 && n === "12" ? 12 : o;
+    e && e.querySelector(
+      `[data-value="${`0${r}`.slice(-2)}"]`
+    )?.scrollIntoView({
+      behavior: f,
+      block: "center"
+    });
+  }, [n, f]), H(() => {
+    if (!p) return;
+    const e = c.current, t = n === "12" && a >= 12 ? a - 12 : a, o = t === 0 && n === "12" ? 12 : t;
+    e && e.querySelector(
+      `[data-value="${`0${o}`.slice(-2)}"]`
+    )?.scrollIntoView({
+      behavior: "instant",
+      block: "center"
+    });
+  }, [a, n, p]), n === "12") {
+    const e = b === 0 ? 12 : b;
+    return /* @__PURE__ */ i(
       "ul",
       {
-        ref: n,
-        className: o(h()),
+        ref: c,
+        className: l(D()),
         "aria-label": "hours",
         role: "listbox",
-        children: Array.from({ length: 12 }, (t, e) => /* @__PURE__ */ a(
+        children: Array.from({ length: 12 }, (t, o) => {
+          const r = e - 1 === o;
+          return /* @__PURE__ */ i(
+            "li",
+            {
+              className: l(v()),
+              "data-value": `0${o + 1}`.slice(-2),
+              "data-active": r,
+              role: "presentation",
+              children: /* @__PURE__ */ i(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  tabIndex: r ? 0 : -1,
+                  className: l(A()),
+                  onClick: (s) => y(s, o + 1),
+                  onKeyDown: (s) => w(s, o),
+                  children: o + 1
+                }
+              )
+            },
+            o
+          );
+        })
+      }
+    );
+  }
+  return /* @__PURE__ */ i(
+    "ul",
+    {
+      ref: c,
+      className: l(D()),
+      "aria-label": "hours",
+      role: "listbox",
+      children: Array.from({ length: 24 }, (e, t) => {
+        const o = a === t;
+        return /* @__PURE__ */ i(
           "li",
           {
-            className: o(d()),
-            "data-value": `0${e + 1}`.slice(-2),
-            "data-active": r - 1 === e,
+            className: l(v()),
+            "data-value": `0${t}`.slice(-2),
+            "data-active": o,
             role: "presentation",
-            children: /* @__PURE__ */ a(
+            children: /* @__PURE__ */ i(
               "button",
               {
                 type: "button",
                 role: "option",
-                className: o(b()),
-                onClick: (N) => f(N, e + 1),
-                children: e + 1
+                tabIndex: o ? 0 : -1,
+                className: l(A()),
+                onClick: (r) => y(r, t),
+                onKeyDown: (r) => w(r, t),
+                children: t
               }
             )
           },
-          e
-        ))
-      }
-    );
-  }
-  return /* @__PURE__ */ a(
-    "ul",
-    {
-      ref: n,
-      className: o(h()),
-      "aria-label": "hours",
-      role: "listbox",
-      children: Array.from({ length: 24 }, (r, t) => /* @__PURE__ */ a(
-        "li",
-        {
-          className: o(d()),
-          "data-value": `0${t}`.slice(-2),
-          "data-active": l === t,
-          role: "presentation",
-          children: /* @__PURE__ */ a(
-            "button",
-            {
-              type: "button",
-              role: "option",
-              className: o(b()),
-              onClick: (e) => f(e, t),
-              children: t
-            }
-          )
-        },
-        t
-      ))
+          t
+        );
+      })
     }
   );
 };
-H.displayName = "HoursList";
+h.displayName = "HoursList";
 export {
-  H as HoursList
+  h as HoursList
 };

package/dist/components/TimePicker/components/HoursList/HoursList.types.d.ts

@@ -0,0 +1,8 @@
+import { TimePickerProps } from '../../TimePicker.types';
+export type HourListProps = {
+    hours: number;
+    scrollBehavior?: TimePickerProps['scrollBehavior'];
+    listClassName?: TimePickerProps['listClassName'];
+    listItemClassName?: TimePickerProps['listItemClassName'];
+    listItemButtonClassName?: TimePickerProps['listItemButtonClassName'];
+};

package/dist/components/TimePicker/components/MeridianList/MeridianList.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { MeridianListProps } from './MeridianList.types';
+declare const MeridianList: FC<MeridianListProps>;
+export { MeridianList };

package/dist/components/TimePicker/components/MeridianList/MeridianList.js

@@ -1,57 +1,81 @@
-import { jsxs as f, jsx as r } from "react/jsx-runtime";
-import { useCallback as b } from "react";
+import { jsxs as N, jsx as o } from "react/jsx-runtime";
+import { useRef as A, useCallback as p } from "react";
 import { cn as t } from "../../../../utils/index.js";
-import { buttonVariants as n, liVariants as c } from "../../TimePicker.variants.js";
-import { useTimePickerContext as N } from "../../contexts/time-picker.hook.js";
-const x = ({
-  listClassName: s,
-  listItemClassName: a,
-  listItemButtonClassName: i
+import { buttonVariants as b, liVariants as y } from "../../TimePicker.variants.js";
+import { useTimePickerContext as D } from "../../contexts/time-picker.hook.js";
+const M = ({
+  listClassName: k,
+  listItemClassName: n,
+  listItemButtonClassName: c,
+  onClose: f
 }) => {
-  const { format: m, isAM: l, onSelectAM: p, onSelectPM: u } = N(), o = b(
-    (e, d) => {
-      e.currentTarget?.blur(), d();
+  const u = A(null), { format: w, isAM: r, onSelectAM: s, onSelectPM: i } = D(), m = p(
+    (e, a) => {
+      e.currentTarget?.blur(), a();
     },
     []
+  ), d = p(
+    (e, a) => {
+      const l = u.current?.querySelectorAll("button");
+      if (!l) return;
+      const x = e.key === "Tab" && !e.shiftKey, h = e.key === "Tab" && e.shiftKey;
+      e.key === "ArrowDown" || e.key === "ArrowUp" || x || h ? (e.preventDefault(), a ? l[1]?.focus() : l[0]?.focus()) : e.key === "Enter" && (e.preventDefault(), a ? s() : i(), f?.());
+    },
+    [s, i, f]
   );
-  return m === "24" ? null : /* @__PURE__ */ f(
+  return w === "24" ? null : /* @__PURE__ */ N(
     "ul",
     {
-      className: t("flex items-center justify-center flex-col", s),
+      ref: u,
+      className: t("flex items-center justify-center flex-col", k),
       "aria-label": "meridian",
       role: "listbox",
       children: [
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ o(
           "li",
           {
-            className: t(c({ className: a })),
-            "data-active": l,
+            className: t(y({ className: n })),
+            "data-active": r,
             role: "presentation",
-            children: /* @__PURE__ */ r(
+            children: /* @__PURE__ */ o(
               "button",
               {
                 type: "button",
                 role: "option",
-                className: t(n({ className: i })),
-                onClick: (e) => o(e, p),
+                tabIndex: r ? 0 : -1,
+                className: t(
+                  b({ className: c }),
+                  {
+                    "dark:text-slate-50": !r
+                  }
+                ),
+                onClick: (e) => m(e, s),
+                onKeyDown: (e) => d(e, !0),
                 children: "AM"
               }
             )
           }
         ),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ o(
           "li",
           {
-            className: t(c({ className: a })),
-            "data-active": !l,
+            className: t(y({ className: n })),
+            "data-active": !r,
             role: "presentation",
-            children: /* @__PURE__ */ r(
+            children: /* @__PURE__ */ o(
               "button",
               {
                 type: "button",
                 role: "option",
-                className: t(n({ className: i })),
-                onClick: (e) => o(e, u),
+                tabIndex: r ? -1 : 0,
+                className: t(
+                  b({ className: c }),
+                  {
+                    "dark:text-slate-50": r
+                  }
+                ),
+                onClick: (e) => m(e, i),
+                onKeyDown: (e) => d(e, !1),
                 children: "PM"
               }
             )
@@ -61,7 +85,7 @@ const x = ({
     }
   );
 };
-x.displayName = "MeridianList";
+M.displayName = "MeridianList";
 export {
-  x as MeridianList
+  M as MeridianList
 };

package/dist/components/TimePicker/components/MeridianList/MeridianList.types.d.ts

@@ -0,0 +1,7 @@
+import { TimePickerProps } from '../../TimePicker.types';
+export type MeridianListProps = {
+    listClassName?: TimePickerProps['listClassName'];
+    listItemClassName?: TimePickerProps['listItemClassName'];
+    listItemButtonClassName?: TimePickerProps['listItemButtonClassName'];
+    onClose?: () => void;
+};

package/dist/components/TimePicker/components/MinutesList/MinutesList.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { MinutesLitProps } from './MinutesList.types';
+declare const MinutesList: FC<MinutesLitProps>;
+export { MinutesList };