@konstructio/ui 0.0.2

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

@@ -0,0 +1,11 @@
+export declare const sliderVariants: (props?: ({
+    theme?: "kubefirst" | "konstruct" | "colony" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const trackVariants: (props?: ({
+    theme?: "kubefirst" | "konstruct" | "colony" | null | undefined;
+    size?: "sm" | "lg" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const thumbVariants: (props?: ({
+    theme?: "kubefirst" | "konstruct" | "colony" | null | undefined;
+    size?: "sm" | "lg" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Slider/Slider.variants.js

@@ -0,0 +1,69 @@
+import { c as e } from "../../index-BwYCDOHZ.js";
+const r = e(
+  ["relative", "flex", "items-center", "w-full"],
+  {
+    variants: {
+      theme: {
+        kubefirst: "",
+        konstruct: "",
+        colony: ""
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+), s = e(["relative", "flex-grow", "rounded-full"], {
+  variants: {
+    theme: {
+      kubefirst: ["bg-kubefirst-purple-dark"],
+      konstruct: ["bg-orange-500"],
+      colony: ["bg-red-500"]
+    },
+    size: {
+      sm: ["h-1"],
+      md: ["h-2"],
+      lg: ["h-3"]
+    }
+  },
+  defaultVariants: {
+    theme: "kubefirst",
+    size: "md"
+  }
+}), a = e(
+  [
+    "block",
+    "w-5",
+    "h-5",
+    "rounded-full",
+    "cursor-pointer",
+    "focus-visible:outline-none",
+    "shadow-md",
+    "bg-white",
+    "border",
+    "border-gray-300"
+  ],
+  {
+    variants: {
+      theme: {
+        kubefirst: "",
+        konstruct: "",
+        colony: ""
+      },
+      size: {
+        sm: ["w-5", "h-5"],
+        md: ["w-6", "h-6"],
+        lg: ["w-7", "h-7"]
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst",
+      size: "md"
+    }
+  }
+);
+export {
+  r as sliderVariants,
+  a as thumbVariants,
+  s as trackVariants
+};

package/dist/components/Switch/Switch.d.ts

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

package/dist/components/Switch/Switch.js

@@ -0,0 +1,176 @@
+import { jsxs as x, jsx as l } from "react/jsx-runtime";
+import * as h from "react";
+import { forwardRef as I, useState as _, useRef as H, useId as A, useImperativeHandle as M, useEffect as $, useCallback as j } from "react";
+import { c as z, a as B, d as q } from "../../index-8vgf-x5i.js";
+import { u as F } from "../../index-CCavb-1K.js";
+import { u as O, a as V } from "../../index-BxeV34ij.js";
+import { P } from "../../index-BJ7FQg17.js";
+import { cn as D } from "../../utils/index.js";
+import "../../contexts/theme.context.js";
+import { useTheme as L } from "../../contexts/theme.hook.js";
+import "../../js.cookie-OLEfuq_g.js";
+import { switchVariants as U, thumbVariants as W } from "./Switch.variants.js";
+var k = "Switch", [X, ue] = z(k), [G, J] = X(k), g = h.forwardRef(
+  (e, r) => {
+    const {
+      __scopeSwitch: t,
+      name: s,
+      checked: c,
+      defaultChecked: p,
+      required: n,
+      disabled: a,
+      value: i = "on",
+      onCheckedChange: m,
+      form: o,
+      ...u
+    } = e, [d, b] = h.useState(null), v = F(r, (C) => b(C)), f = h.useRef(!1), w = d ? o || !!d.closest("form") : !0, [S = !1, E] = B({
+      prop: c,
+      defaultProp: p,
+      onChange: m
+    });
+    return /* @__PURE__ */ x(G, { scope: t, checked: S, disabled: a, children: [
+      /* @__PURE__ */ l(
+        P.button,
+        {
+          type: "button",
+          role: "switch",
+          "aria-checked": S,
+          "aria-required": n,
+          "data-state": N(S),
+          "data-disabled": a ? "" : void 0,
+          disabled: a,
+          value: i,
+          ...u,
+          ref: v,
+          onClick: q(e.onClick, (C) => {
+            E((T) => !T), w && (f.current = C.isPropagationStopped(), f.current || C.stopPropagation());
+          })
+        }
+      ),
+      w && /* @__PURE__ */ l(
+        K,
+        {
+          control: d,
+          bubbles: !f.current,
+          name: s,
+          value: i,
+          checked: S,
+          required: n,
+          disabled: a,
+          form: o,
+          style: { transform: "translateX(-100%)" }
+        }
+      )
+    ] });
+  }
+);
+g.displayName = k;
+var R = "SwitchThumb", y = h.forwardRef(
+  (e, r) => {
+    const { __scopeSwitch: t, ...s } = e, c = J(R, t);
+    return /* @__PURE__ */ l(
+      P.span,
+      {
+        "data-state": N(c.checked),
+        "data-disabled": c.disabled ? "" : void 0,
+        ...s,
+        ref: r
+      }
+    );
+  }
+);
+y.displayName = R;
+var K = (e) => {
+  const { control: r, checked: t, bubbles: s = !0, ...c } = e, p = h.useRef(null), n = O(t), a = V(r);
+  return h.useEffect(() => {
+    const i = p.current, m = window.HTMLInputElement.prototype, u = Object.getOwnPropertyDescriptor(m, "checked").set;
+    if (n !== t && u) {
+      const d = new Event("click", { bubbles: s });
+      u.call(i, t), i.dispatchEvent(d);
+    }
+  }, [n, t, s]), /* @__PURE__ */ l(
+    "input",
+    {
+      type: "checkbox",
+      "aria-hidden": !0,
+      defaultChecked: t,
+      ...c,
+      tabIndex: -1,
+      ref: p,
+      style: {
+        ...e.style,
+        ...a,
+        position: "absolute",
+        pointerEvents: "none",
+        opacity: 0,
+        margin: 0
+      }
+    }
+  );
+};
+function N(e) {
+  return e ? "checked" : "unchecked";
+}
+var Q = g, Y = y;
+const de = I(
+  ({
+    name: e,
+    defaultChecked: r,
+    alignment: t = "horizontal",
+    theme: s,
+    thumbClassName: c,
+    className: p,
+    label: n
+  }, a) => {
+    const [i, m] = _(r ?? !1), o = H(null), u = A(), { theme: d } = L(), b = s ?? d, v = e ? `${u}-${e}` : u;
+    M(a, () => o.current, [o]), $(() => {
+      o.current && (o.current.value = `${i}`);
+    }, [i]);
+    const f = j(
+      (w) => m(w),
+      []
+    );
+    return /* @__PURE__ */ x(
+      "div",
+      {
+        className: D(
+          "w-full flex gap-3",
+          t === "vertical" ? "flex-col" : "flex-row"
+        ),
+        children: [
+          n ? /* @__PURE__ */ l(
+            "label",
+            {
+              className: "text-base",
+              htmlFor: v,
+              style: { paddingRight: 15 },
+              children: n
+            }
+          ) : null,
+          /* @__PURE__ */ l(
+            Q,
+            {
+              id: v,
+              defaultChecked: r,
+              onCheckedChange: f,
+              className: U({ theme: b, className: p }),
+              children: /* @__PURE__ */ l(
+                Y,
+                {
+                  className: W({
+                    theme: b,
+                    className: c
+                  })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ l("input", { ref: o, name: e, type: "text", className: "hidden" })
+        ]
+      }
+    );
+  }
+);
+export {
+  de as Switch
+};

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

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+import { switchVariants } from './Switch.variants';
+export interface SwitchProps extends VariantProps<typeof switchVariants> {
+    alignment?: 'horizontal' | 'vertical';
+    className?: string;
+    defaultChecked?: boolean;
+    label?: string;
+    name?: string;
+    thumbClassName?: string;
+}

package/dist/components/Switch/Switch.types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,6 @@
+export declare const switchVariants: (props?: ({
+    theme?: "kubefirst" | "konstruct" | "colony" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const thumbVariants: (props?: ({
+    theme?: "kubefirst" | "konstruct" | "colony" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Switch/Switch.variants.js

@@ -0,0 +1,58 @@
+import { c as t } from "../../index-BwYCDOHZ.js";
+const e = t(
+  [
+    "w-12",
+    "h-7",
+    "flex",
+    "items-center",
+    "rounded-full",
+    "shadow",
+    "focus:shadow-md",
+    "data-[state=unchecked]:bg-zinc-200",
+    "transition-all",
+    "delay-10",
+    "duration-250"
+  ],
+  {
+    variants: {
+      theme: {
+        konstruct: "bg-orange-600",
+        kubefirst: "bg-kubefirst-purple-light",
+        colony: "bg-red-600"
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+), r = t(
+  [
+    "block",
+    "w-6",
+    "h-6",
+    "bg-white",
+    "rounded-full",
+    "shadow-md",
+    "transition-all",
+    "translate-x-1",
+    "data-[state=checked]:translate-x-5",
+    "delay-10",
+    "duration-300"
+  ],
+  {
+    variants: {
+      theme: {
+        konstruct: "",
+        kubefirst: "",
+        colony: ""
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+);
+export {
+  e as switchVariants,
+  r as thumbVariants
+};

package/dist/components/Tag/Tag.d.ts

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

package/dist/components/Tag/Tag.js

@@ -0,0 +1,6 @@
+import { jsx as a } from "react/jsx-runtime";
+import { tagVariants as i } from "./Tag.variants.js";
+const m = ({ label: r, color: t }) => /* @__PURE__ */ a("div", { className: i({ color: t }), children: /* @__PURE__ */ a("span", { className: "text-inherit", children: r }) });
+export {
+  m as Tag
+};

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

@@ -0,0 +1,4 @@
+export type TagProps = {
+    label: string;
+    color?: 'gray' | 'cyan' | 'gold' | 'green' | 'light blue' | 'lime' | 'pink' | 'purple' | 'emerald' | 'fuscia' | 'indigo' | 'light-orange' | 'dark-sky-blue' | 'mistery';
+};

package/dist/components/Tag/Tag.types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,3 @@
+export declare const tagVariants: (props?: ({
+    color?: "default" | "gray" | "cyan" | "gold" | "green" | "light blue" | "lime" | "pink" | "purple" | "emerald" | "fuscia" | "indigo" | "light-orange" | "dark-sky-blue" | "mistery" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Tag/Tag.variants.js

@@ -0,0 +1,31 @@
+import { c as e } from "../../index-BwYCDOHZ.js";
+const f = e(
+  ["px-2", "py-1", "rounded-md", "w-max", "text-xs"],
+  {
+    variants: {
+      color: {
+        gray: ["bg-[#f4f4f5]", "text-[#71717a]"],
+        cyan: ["bg-[#ecfeff]", "text-[#0e7490]"],
+        gold: ["bg-[#fef9c3]", "text-[#a16207]"],
+        green: ["bg-[#dcfce7]", "text-[#15803d]"],
+        "light blue": ["bg-[#e0f2fe]", "text-[#0369a1]"],
+        lime: ["bg-[#ecfccb]", "text-[#4d7c0f]"],
+        pink: ["bg-[#fce7f3]", "text-[#be185d]"],
+        purple: ["bg-[#ede9fe]", "text-[#6d28d9]"],
+        emerald: ["bg-[#ecfdf5]", "text-[#047857]"],
+        fuscia: ["bg-[#fdf4ff]", "text-[#a21caf]"],
+        indigo: ["bg-[#e0e7ff]", "text-[#4338ca]"],
+        "light-orange": ["bg-[#fef3c7]", "text-[#d97706]"],
+        "dark-sky-blue": ["bg-[#dbeafe]", "text-[#1d4ed8]"],
+        mistery: ["bg-[#1e2235]", "text-[#81e2b4]"],
+        default: ["bg-transparent", "text-[#71717A]"]
+      }
+    },
+    defaultVariants: {
+      color: "default"
+    }
+  }
+);
+export {
+  f as tagVariants
+};

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

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

package/dist/components/TagSelect/TagSelect.js

@@ -0,0 +1,75 @@
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { forwardRef as g, useId as w, useRef as C, useImperativeHandle as T, useEffect as R } from "react";
+import "../../contexts/theme.context.js";
+import { useTheme as S } from "../../contexts/theme.hook.js";
+import "../../js.cookie-OLEfuq_g.js";
+import { cn as u } from "../../utils/index.js";
+import { Tag as d } from "../Tag/Tag.js";
+import { useTagSelect as k } from "./hooks/useTagSelect.js";
+import { tagSelectVariants as I, tagListVariants as V, tagItemVariants as j } from "./TagSelect.variants.js";
+import { C as y } from "../../chevron-up-Cmu1oXfj.js";
+const B = g(({ label: n, name: r, options: f, placeholder: h = "Select a value...", theme: l }, x) => {
+  const s = w(), { theme: o } = S(), t = C(null), {
+    isOpen: a,
+    selectedTag: c,
+    value: m,
+    wrapperRef: b,
+    handleClickTag: N,
+    handleOpenDropdown: v
+  } = k();
+  return T(x, () => t.current, [t]), R(() => {
+    t.current && (t.current.value = m);
+  }, [m]), /* @__PURE__ */ p("div", { ref: b, className: "flex flex-col w-full relative", children: [
+    n ? /* @__PURE__ */ e("label", { className: "m-2 cursor-pointer", htmlFor: r ?? s, children: n }) : null,
+    /* @__PURE__ */ p(
+      "div",
+      {
+        id: r ?? s,
+        className: I({ theme: l ?? o }),
+        role: "combobox",
+        onClick: v,
+        "aria-expanded": a,
+        children: [
+          c ? /* @__PURE__ */ e(d, { ...c }) : /* @__PURE__ */ e("span", { className: "text-base text-inherit", children: h }),
+          /* @__PURE__ */ e(
+            y,
+            {
+              className: u(
+                "w-4 h-4 text-inherit transition-all duration-50",
+                a ? "rotate-0" : "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e("input", { ref: t, type: "text", name: r, className: "hidden" }),
+    a ? /* @__PURE__ */ e(
+      "ul",
+      {
+        role: "listbox",
+        className: u(V({ theme: l ?? o })),
+        children: f.map((i) => /* @__PURE__ */ e(
+          "li",
+          {
+            className: j({ theme: l ?? o }),
+            role: "option",
+            children: /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                role: "button",
+                className: "m-0 p-0 w-full",
+                onClick: () => N(i),
+                children: /* @__PURE__ */ e(d, { label: i.label, color: i.color })
+              }
+            )
+          }
+        ))
+      }
+    ) : null
+  ] });
+});
+export {
+  B as TagSelect
+};

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

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+import { TagProps } from '../Tag/Tag.types';
+import { tagSelectVariants } from './TagSelect.variants';
+export interface TagSelectProps extends VariantProps<typeof tagSelectVariants> {
+    label?: string;
+    options: TagProps[];
+    name?: string;
+    placeholder?: string;
+}

package/dist/components/TagSelect/TagSelect.types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,9 @@
+export declare const tagSelectVariants: (props?: ({
+    theme?: "kubefirst" | "konstruct" | "colony" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const tagListVariants: (props?: ({
+    theme?: "kubefirst" | "konstruct" | "colony" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const tagItemVariants: (props?: ({
+    theme?: "kubefirst" | "konstruct" | "colony" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/TagSelect/TagSelect.variants.js

@@ -0,0 +1,83 @@
+import { c as e } from "../../index-BwYCDOHZ.js";
+const t = e(
+  [
+    "border",
+    "cursor-pointer",
+    "duration-250",
+    "ease-in-out",
+    "flex",
+    "items-center",
+    "justify-between",
+    "px-3",
+    "py-1",
+    "rounded-md",
+    "transition-all",
+    "w-full"
+  ],
+  {
+    variants: {
+      theme: {
+        colony: ["aria-expanded:border-red-400", "aria-expanded:text-red-400"],
+        konstruct: [
+          "aria-expanded:border-orange-400",
+          "aria-expanded:text-orange-400"
+        ],
+        kubefirst: [
+          "aria-expanded:border-kubefirst-purple-light",
+          "aria-expanded:text-kubefirst-purple-dark"
+        ]
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+), a = e(
+  [
+    "absolute",
+    "bg-white",
+    "border",
+    "duration-100",
+    "ease-in-out",
+    "flex",
+    "flex-col",
+    "mt-1",
+    "rounded-md",
+    "shadow-sm",
+    "top-full",
+    "transition-all",
+    "w-full",
+    "z-10"
+  ],
+  {
+    variants: {
+      theme: {
+        colony: ["border-red-400"],
+        konstruct: ["border-orange-400"],
+        kubefirst: ["border-kubefirst-purple-light"]
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+), o = e(
+  ["cursor-pointer", "py-1", "px-2", "last:mb-2", "first:mt-2", "h-full"],
+  {
+    variants: {
+      theme: {
+        colony: "hover:bg-red-100",
+        konstruct: "hover:bg-orange-100",
+        kubefirst: "hover:bg-purple-100"
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+);
+export {
+  o as tagItemVariants,
+  a as tagListVariants,
+  t as tagSelectVariants
+};

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

@@ -0,0 +1,9 @@
+import { TagProps } from '../../Tag/Tag.types';
+export declare const useTagSelect: () => {
+    isOpen: boolean;
+    selectedTag: TagProps | null;
+    value: string;
+    wrapperRef: import('react').RefObject<HTMLDivElement>;
+    handleClickTag: (tag: TagProps) => void;
+    handleOpenDropdown: () => void;
+};

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

@@ -0,0 +1,39 @@
+import { useRef as b, useState as o, useEffect as k, useCallback as a } from "react";
+import { useToggle as w } from "../../../hooks/useToggle.js";
+const C = () => {
+  const t = b(null), [r, e] = w(!1), [c, d] = o(null), [u, i] = o("");
+  k(() => {
+    const n = new AbortController(), p = (s) => {
+      s.key === "Escape" && e(!1);
+    }, m = (s) => {
+      var l;
+      (l = t.current) != null && l.contains(s.target) || e(!1);
+    };
+    return document.addEventListener("keydown", p, {
+      signal: n.signal
+    }), document.addEventListener("mousedown", m, {
+      signal: n.signal
+    }), () => {
+      n.abort();
+    };
+  }, [e, t]);
+  const f = a(() => {
+    e();
+  }, [e]), g = a(
+    (n) => {
+      d(n), e(!1), i(n.label);
+    },
+    [e]
+  );
+  return {
+    isOpen: r,
+    selectedTag: c,
+    value: u,
+    wrapperRef: t,
+    handleClickTag: g,
+    handleOpenDropdown: f
+  };
+};
+export {
+  C as useTagSelect
+};

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

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

package/dist/components/TextArea/TextArea.js

@@ -0,0 +1,34 @@
+import { jsxs as h, jsx as a } from "react/jsx-runtime";
+import { forwardRef as v, useId as N, useState as T, useCallback as j } from "react";
+import { textAreaVariants as A } from "./TextArea.variants.js";
+import "../../contexts/theme.context.js";
+import { useTheme as I } from "../../contexts/theme.hook.js";
+import "../../js.cookie-OLEfuq_g.js";
+const S = v(
+  ({ initialValue: m, label: t, name: o, placeholder: l, rows: c = 3, theme: i, onChange: e }, u) => {
+    const r = N(), { theme: d } = I(), s = o ? `${r}-name` : r, [p, x] = T(m ?? ""), f = j(
+      (n) => {
+        x(n.target.value), e == null || e();
+      },
+      [e]
+    );
+    return /* @__PURE__ */ h("div", { className: "flex flex-col gap-2", children: [
+      t ? /* @__PURE__ */ a("label", { htmlFor: s, className: "cursor-pointer", children: t }) : null,
+      /* @__PURE__ */ a(
+        "textarea",
+        {
+          id: s,
+          ref: u,
+          className: A({ theme: i ?? d }),
+          rows: c,
+          placeholder: l,
+          value: p,
+          onChange: f
+        }
+      )
+    ] });
+  }
+);
+export {
+  S as TextArea
+};