@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.80

package/dist/components/TagSelect/components/Wrapper/Wrapper.js

@@ -1,135 +1,4 @@
-import "../Item/Item.js";
-import { List as j } from "../List/List.js";
-import { jsxs as g, jsx as i } from "react/jsx-runtime";
-import b, { forwardRef as w, useId as k, useImperativeHandle as T } from "react";
-import { Tag as P } from "../../../Tag/Tag.js";
-import { cn as l } from "../../../../utils/index.js";
-import { useTagSelect as C } from "../../hooks/useTagSelect.js";
-import { labelVariants as S, tagSelectVariants as z, wrapperVariants as R } from "../../TagSelect.variants.js";
-import { X as _ } from "../../../../x-4F_5p77m.js";
-import { P as p } from "../../../../index-N2OStZoU.js";
-import { useTagSelect as I } from "../../contexts/TagSelect.hook.js";
-function u() {
-  return u = Object.assign || function(e) {
-    for (var o = 1; o < arguments.length; o++) {
-      var t = arguments[o];
-      for (var r in t)
-        Object.prototype.hasOwnProperty.call(t, r) && (e[r] = t[r]);
-    }
-    return e;
-  }, u.apply(this, arguments);
-}
-function L(e, o) {
-  if (e == null) return {};
-  var t = W(e, o), r, n;
-  if (Object.getOwnPropertySymbols) {
-    var a = Object.getOwnPropertySymbols(e);
-    for (n = 0; n < a.length; n++)
-      r = a[n], !(o.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (t[r] = e[r]);
-  }
-  return t;
-}
-function W(e, o) {
-  if (e == null) return {};
-  var t = {}, r = Object.keys(e), n, a;
-  for (a = 0; a < r.length; a++)
-    n = r[a], !(o.indexOf(n) >= 0) && (t[n] = e[n]);
-  return t;
-}
-var d = w(function(e, o) {
-  var t = e.color, r = t === void 0 ? "currentColor" : t, n = e.size, a = n === void 0 ? 24 : n, c = L(e, ["color", "size"]);
-  return /* @__PURE__ */ b.createElement("svg", u({
-    ref: o,
-    xmlns: "http://www.w3.org/2000/svg",
-    width: a,
-    height: a,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: r,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, c), /* @__PURE__ */ b.createElement("polyline", {
-    points: "18 15 12 9 6 15"
-  }));
-});
-d.propTypes = {
-  color: p.string,
-  size: p.oneOfType([p.string, p.number])
-};
-d.displayName = "ChevronUp";
-const G = w(
-  ({
-    label: e,
-    labelClassName: o,
-    name: t,
-    placeholder: r = "Select a value...",
-    theme: n,
-    wrapperClassName: a
-  }, c) => {
-    const h = k(), { selectedTags: v, isOpen: m, onOpen: x, onRemoveTag: y, inputRef: f } = I(), { wrapperRef: O, handleOpen: N } = C();
-    return T(c, () => f.current, [f]), /* @__PURE__ */ g(
-      "div",
-      {
-        ref: O,
-        className: l(
-          R({
-            className: a
-          })
-        ),
-        "data-theme": n,
-        children: [
-          e ? /* @__PURE__ */ i(
-            "label",
-            {
-              htmlFor: t ?? h,
-              className: l(
-                S({
-                  className: o
-                })
-              ),
-              onClick: () => x(!0),
-              children: e
-            }
-          ) : null,
-          /* @__PURE__ */ g(
-            "div",
-            {
-              id: t ?? h,
-              className: l(z()),
-              role: "combobox",
-              onClick: N,
-              "aria-expanded": m,
-              children: [
-                v.length === 0 ? /* @__PURE__ */ i("span", { className: "text-base text-inherit select-none", children: r }) : /* @__PURE__ */ i("div", { className: "flex flex-wrap gap-1.5", children: v.map((s) => /* @__PURE__ */ i(
-                  P,
-                  {
-                    ...s,
-                    className: "select-none",
-                    rightIcon: /* @__PURE__ */ i(_, { className: "w-3 h-3", onClick: () => y(s) }),
-                    "data-value": s.label
-                  },
-                  s.id
-                )) }),
-                /* @__PURE__ */ i(
-                  d,
-                  {
-                    className: l(
-                      "w-4 h-4 text-inherit transition-all duration-50 shrink-0",
-                      m ? "rotate-0" : "rotate-180"
-                    )
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ i("input", { ref: f, type: "text", name: t, className: "hidden" }),
-          m ? /* @__PURE__ */ i(j, {}) : null
-        ]
-      }
-    );
-  }
-);
+import { t as p } from "../../../../Wrapper-CjUokv72.js";
 export {
-  G as Wrapper
+  p as Wrapper
 };

package/dist/components/TagSelect/components/Wrapper/Wrapper.types.d.ts

@@ -0,0 +1,7 @@
+import { ForwardedRef } from 'react';
+import { Theme } from '../../../../domain/theme';
+import { Props as TagSelectProps } from '../../TagSelect.types';
+export type WrapperProps = Omit<TagSelectProps, 'options' | 'multiselect'> & {
+    ref?: ForwardedRef<HTMLInputElement>;
+    theme?: Theme;
+};

package/dist/components/TagSelect/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Item/Item';
+export * from './List/List';
+export * from './Wrapper/Wrapper';

package/dist/components/TagSelect/components/index.js

@@ -1,8 +1,8 @@
-import { Item as e } from "./Item/Item.js";
-import { List as t } from "./List/List.js";
-import { Wrapper as f } from "./Wrapper/Wrapper.js";
+import { t as m } from "../../../Wrapper-CjUokv72.js";
+import { Item as t } from "./Item/Item.js";
+import { List as i } from "./List/List.js";
 export {
-  e as Item,
-  t as List,
-  f as Wrapper
+  t as Item,
+  i as List,
+  m as Wrapper
 };

package/dist/components/TagSelect/contexts/TagSelect.context.d.ts

@@ -0,0 +1,2 @@
+import { State } from './TagSelect.types';
+export declare const TagSelectContext: import('react').Context<State>;

package/dist/components/TagSelect/contexts/TagSelect.context.js

@@ -1,5 +1,5 @@
 import { createContext as e } from "react";
-const t = {
+var t = {
   tags: [],
   selectedTags: [],
   isOpen: !1,

package/dist/components/TagSelect/contexts/TagSelect.hook.d.ts

@@ -0,0 +1 @@
+export declare const useTagSelect: () => import('./TagSelect.types').State;

package/dist/components/TagSelect/contexts/TagSelect.hook.js

@@ -1,11 +1,10 @@
-import { useContext as t } from "react";
-import { TagSelectContext as o } from "./TagSelect.context.js";
-const c = () => {
-  const e = t(o);
-  if (!e)
-    throw new Error("useTagSelect must be used within a TagSelectProvider");
+import { TagSelectContext as t } from "./TagSelect.context.js";
+import { useContext as r } from "react";
+var a = () => {
+  const e = r(t);
+  if (!e) throw new Error("useTagSelect must be used within a TagSelectProvider");
   return e;
 };
 export {
-  c as useTagSelect
+  a as useTagSelect
 };

package/dist/components/TagSelect/contexts/TagSelect.provider.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { TagSelectProviderProps } from './TagSelect.types';
+export declare const TagSelectProvider: FC<TagSelectProviderProps>;

package/dist/components/TagSelect/contexts/TagSelect.provider.js

@@ -1,68 +1,52 @@
-import { jsx as I } from "react/jsx-runtime";
-import { useRef as R, useState as T, useCallback as l } from "react";
-import { TagSelectContext as x } from "./TagSelect.context.js";
-import { useToggle as w } from "../../../hooks/useToggle.js";
-const k = ({
-  children: m,
-  defaultOptions: n = [],
-  multiselect: d = !0
-}) => {
-  const i = R(null), [p, a] = w(!1), [S, g] = T(n), [r, u] = T([]), o = l((t) => {
+import { useToggle as I } from "../../../hooks/useToggle.js";
+import { TagSelectContext as R } from "./TagSelect.context.js";
+import { useCallback as l, useRef as x, useState as T } from "react";
+import { jsx as w } from "react/jsx-runtime";
+var k = ({ children: m, defaultOptions: n = [], multiselect: d = !0 }) => {
+  const i = x(null), [p, c] = I(!1), [S, g] = T(n), [a, u] = T([]), o = l((t) => {
     if (i.current) {
-      const s = t.map(({ id: c, label: e }) => ({
-        id: c,
+      const s = t.map(({ id: r, label: e }) => ({
+        id: r,
         value: e
       }));
       i.current.value = JSON.stringify(s);
     }
-  }, []), f = l(
-    (t) => {
-      const s = [...d ? r : [], t];
-      u(s);
-      const c = s.map((e) => e.id);
-      g(() => d ? n.filter(
-        (e) => !c.includes(e.id)
-      ) : n.map((e) => ({
-        ...e,
-        isSelected: c.includes(e.id)
-      }))), o(s), a(!1);
+  }, []), f = l((t) => {
+    const s = [...d ? a : [], t];
+    u(s);
+    const r = s.map((e) => e.id);
+    g(() => d ? n.filter((e) => !r.includes(e.id)) : n.map((e) => ({
+      ...e,
+      isSelected: r.includes(e.id)
+    }))), o(s), c(!1);
+  }, [
+    n,
+    o,
+    d,
+    a,
+    c
+  ]), v = l((t) => {
+    const s = a.filter((e) => e.id !== t.id);
+    u(s);
+    const r = s.map((e) => e.id);
+    g(() => n.filter((e) => !r.includes(e.id))), o(s);
+  }, [
+    n,
+    o,
+    a
+  ]), h = l((t) => c(t), [c]);
+  return /* @__PURE__ */ w(R.Provider, {
+    value: {
+      tags: S,
+      selectedTags: a,
+      isOpen: p,
+      inputRef: i,
+      onSelectTag: f,
+      onRemoveTag: v,
+      onOpen: h
     },
-    [
-      n,
-      o,
-      d,
-      r,
-      a
-    ]
-  ), v = l(
-    (t) => {
-      const s = r.filter((e) => e.id !== t.id);
-      u(s);
-      const c = s.map((e) => e.id);
-      g(
-        () => n.filter((e) => !c.includes(e.id))
-      ), o(s);
-    },
-    [n, o, r]
-  ), h = l(
-    (t) => a(t),
-    [a]
-  );
-  return /* @__PURE__ */ I(
-    x.Provider,
-    {
-      value: {
-        tags: S,
-        selectedTags: r,
-        isOpen: p,
-        inputRef: i,
-        onSelectTag: f,
-        onRemoveTag: v,
-        onOpen: h
-      },
-      children: m
-    }
-  );
+    children: m
+  });
 };
 export {
   k as TagSelectProvider

package/dist/components/TagSelect/contexts/TagSelect.types.d.ts

@@ -0,0 +1,15 @@
+import { PropsWithChildren, RefObject } from 'react';
+import { Props as TagProps } from '../../Tag/Tag.types';
+export type State = {
+    tags: TagProps[];
+    selectedTags: TagProps[];
+    isOpen: boolean;
+    inputRef: RefObject<HTMLInputElement | null> | null;
+    onSelectTag: (tag: TagProps) => void;
+    onRemoveTag: (tag: TagProps) => void;
+    onOpen: (value?: boolean) => void;
+};
+export type TagSelectProviderProps = PropsWithChildren & {
+    defaultOptions?: TagProps[];
+    multiselect?: boolean;
+};

package/dist/components/TagSelect/contexts/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TagSelect.hook';
+export * from './TagSelect.provider';

package/dist/components/TagSelect/contexts/index.js

@@ -1,6 +1,6 @@
-import { useTagSelect as o } from "./TagSelect.hook.js";
-import { TagSelectProvider as a } from "./TagSelect.provider.js";
+import { useTagSelect as r } from "./TagSelect.hook.js";
+import { TagSelectProvider as t } from "./TagSelect.provider.js";
 export {
-  a as TagSelectProvider,
-  o as useTagSelect
+  t as TagSelectProvider,
+  r as useTagSelect
 };

package/dist/components/TagSelect/hooks/useTagSelect.d.ts

@@ -0,0 +1,4 @@
+export declare const useTagSelect: () => {
+    wrapperRef: import('react').RefObject<HTMLDivElement | null>;
+    handleOpen: (event: React.MouseEvent<HTMLElement>) => void;
+};

package/dist/components/TagSelect/hooks/useTagSelect.js

@@ -1,32 +1,23 @@
-import { useRef as l, useEffect as c, useCallback as u } from "react";
-import { useTagSelect as i } from "../contexts/TagSelect.hook.js";
-const g = () => {
-  const n = l(null), { onOpen: e } = i();
-  c(() => {
-    const t = new AbortController(), s = (a) => {
+import { useTagSelect as o } from "../contexts/TagSelect.hook.js";
+import { useCallback as l, useEffect as c, useRef as u } from "react";
+var f = () => {
+  const n = u(null), { onOpen: e } = o();
+  return c(() => {
+    const t = new AbortController(), r = (a) => {
       a.key === "Escape" && e(!1);
-    }, o = (a) => {
+    }, s = (a) => {
       n.current?.contains(a.target) || e(!1);
     };
-    return document.addEventListener("keydown", s, {
-      signal: t.signal
-    }), document.addEventListener("mousedown", o, {
-      signal: t.signal
-    }), () => {
+    return document.addEventListener("keydown", r, { signal: t.signal }), document.addEventListener("mousedown", s, { signal: t.signal }), () => {
       t.abort();
     };
-  }, [e, n]);
-  const r = u(
-    (t) => {
-      t.target?.closest("[data-value]") || e(!0);
-    },
-    [e]
-  );
-  return {
+  }, [e, n]), {
     wrapperRef: n,
-    handleOpen: r
+    handleOpen: l((t) => {
+      t.target?.closest("[data-value]") || e(!0);
+    }, [e])
   };
 };
 export {
-  g as useTagSelect
+  f as useTagSelect
 };

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

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { Props } from './TextArea.types';
+/**
+ * A multiline text input component with optional label.
+ *
+ * @example
+ * ```tsx
+ * // Basic textarea
+ * <TextArea label="Description" placeholder="Enter description..." />
+ *
+ * // Textarea with more rows
+ * <TextArea label="Notes" rows={5} />
+ *
+ * // Controlled textarea
+ * <TextArea
+ *   label="Comments"
+ *   value={comments}
+ *   onChange={(e) => setComments(e.target.value)}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-textarea--docs Storybook}
+ */
+export declare const TextArea: FC<Props>;

package/dist/components/TextArea/TextArea.js

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

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

@@ -0,0 +1,30 @@
+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 Props 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;
+}
+/** @deprecated Use Props instead */
+export type TextAreaProps = Props;

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/TextArea/TextArea.variants.js

@@ -1,5 +1,5 @@
-import { c as r } from "../../index-D29mdTf5.js";
-const o = r([
+import { t as r } from "../../dist-DtEbXv47.js";
+var i = r([
   "border",
   "border-gray-200",
   "disabled:cursor-not-allowed",
@@ -16,5 +16,5 @@ const o = r([
   "focus:ring-kubefirst-primary"
 ]);
 export {
-  o as textAreaVariants
+  i as textAreaVariants
 };

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

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { Props } 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<Props>;
+export { TimePicker };

package/dist/components/TimePicker/TimePicker.js

@@ -1,8 +1,17 @@
+import { TimePickerProvider as c } from "./contexts/time-picker.provider.js";
+import { Wrapper as a } from "./components/Wrapper/Wrapper.js";
 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";
+var s = ({ format: e = "12", mode: i = "select", showList: m = !0, time: o, onChange: t, ...p }) => /* @__PURE__ */ r(c, {
+  format: e,
+  time: o,
+  onChange: t,
+  children: /* @__PURE__ */ r(a, {
+    mode: i,
+    showList: m,
+    ...p
+  })
+});
+s.displayName = "KonstructTimePicker";
 export {
-  p as TimePicker
+  s as TimePicker
 };

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

@@ -0,0 +1,55 @@
+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 Props = 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';
+};
+/** @deprecated Use Props instead */
+export type TimePickerProps = Props;

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;