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

package/dist/components/Input/Input.js

@@ -1,207 +1,288 @@
-import { jsxs as m, jsx as s } from "react/jsx-runtime";
-import l, { forwardRef as x, useId as _, useRef as I, useState as W } from "react";
-import { cn as u } from "../../utils/index.js";
-import { inputVariants as $ } from "./Input.variants.js";
-import { SearchIcon as L } from "../../assets/icons/components/Search.js";
-import { Warning as T } from "../../assets/icons/components/Warning.js";
-import { P as i } from "../../index-N2OStZoU.js";
-function h() {
-  return h = Object.assign || function(t) {
-    for (var n = 1; n < arguments.length; n++) {
-      var a = arguments[n];
-      for (var e in a)
-        Object.prototype.hasOwnProperty.call(a, e) && (t[e] = a[e]);
+import { jsxs as u, jsx as s } from "react/jsx-runtime";
+import p, { forwardRef as y, useId as W, useRef as $, useState as T } from "react";
+import { cn as i } from "../../utils/index.js";
+import { inputVariants as S } from "./Input.variants.js";
+import { Typography as d } from "../Typography/Typography.js";
+import { SearchIcon as C } from "../../assets/icons/components/Search.js";
+import { WarningIcon as M } from "../../assets/icons/components/Warning.js";
+import { P as l } from "../../index-BOE_3f_Z.js";
+function g() {
+  return g = Object.assign || function(t) {
+    for (var r = 1; r < arguments.length; r++) {
+      var n = arguments[r];
+      for (var e in n)
+        Object.prototype.hasOwnProperty.call(n, e) && (t[e] = n[e]);
     }
     return t;
-  }, h.apply(this, arguments);
+  }, g.apply(this, arguments);
 }
-function S(t, n) {
+function R(t, r) {
   if (t == null) return {};
-  var a = C(t, n), e, r;
+  var n = A(t, r), e, o;
   if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(t);
-    for (r = 0; r < o.length; r++)
-      e = o[r], !(n.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (a[e] = t[e]);
+    var a = Object.getOwnPropertySymbols(t);
+    for (o = 0; o < a.length; o++)
+      e = a[o], !(r.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (n[e] = t[e]);
   }
-  return a;
+  return n;
 }
-function C(t, n) {
+function A(t, r) {
   if (t == null) return {};
-  var a = {}, e = Object.keys(t), r, o;
-  for (o = 0; o < e.length; o++)
-    r = e[o], !(n.indexOf(r) >= 0) && (a[r] = t[r]);
-  return a;
+  var n = {}, e = Object.keys(t), o, a;
+  for (a = 0; a < e.length; a++)
+    o = e[a], !(r.indexOf(o) >= 0) && (n[o] = t[o]);
+  return n;
 }
-var v = x(function(t, n) {
-  var a = t.color, e = a === void 0 ? "currentColor" : a, r = t.size, o = r === void 0 ? 24 : r, c = S(t, ["color", "size"]);
-  return /* @__PURE__ */ l.createElement("svg", h({
-    ref: n,
+var x = y(function(t, r) {
+  var n = t.color, e = n === void 0 ? "currentColor" : n, o = t.size, a = o === void 0 ? 24 : o, c = R(t, ["color", "size"]);
+  return /* @__PURE__ */ p.createElement("svg", g({
+    ref: r,
     xmlns: "http://www.w3.org/2000/svg",
-    width: o,
-    height: o,
+    width: a,
+    height: a,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: e,
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, c), /* @__PURE__ */ l.createElement("path", {
+  }, c), /* @__PURE__ */ p.createElement("path", {
     d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
-  }), /* @__PURE__ */ l.createElement("line", {
+  }), /* @__PURE__ */ p.createElement("line", {
     x1: "1",
     y1: "1",
     x2: "23",
     y2: "23"
   }));
 });
-v.propTypes = {
-  color: i.string,
-  size: i.oneOfType([i.string, i.number])
+x.propTypes = {
+  color: l.string,
+  size: l.oneOfType([l.string, l.number])
 };
-v.displayName = "EyeOff";
-function g() {
-  return g = Object.assign || function(t) {
-    for (var n = 1; n < arguments.length; n++) {
-      var a = arguments[n];
-      for (var e in a)
-        Object.prototype.hasOwnProperty.call(a, e) && (t[e] = a[e]);
+x.displayName = "EyeOff";
+function v() {
+  return v = Object.assign || function(t) {
+    for (var r = 1; r < arguments.length; r++) {
+      var n = arguments[r];
+      for (var e in n)
+        Object.prototype.hasOwnProperty.call(n, e) && (t[e] = n[e]);
     }
     return t;
-  }, g.apply(this, arguments);
+  }, v.apply(this, arguments);
 }
-function M(t, n) {
+function B(t, r) {
   if (t == null) return {};
-  var a = R(t, n), e, r;
+  var n = D(t, r), e, o;
   if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(t);
-    for (r = 0; r < o.length; r++)
-      e = o[r], !(n.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (a[e] = t[e]);
+    var a = Object.getOwnPropertySymbols(t);
+    for (o = 0; o < a.length; o++)
+      e = a[o], !(r.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (n[e] = t[e]);
   }
-  return a;
+  return n;
 }
-function R(t, n) {
+function D(t, r) {
   if (t == null) return {};
-  var a = {}, e = Object.keys(t), r, o;
-  for (o = 0; o < e.length; o++)
-    r = e[o], !(n.indexOf(r) >= 0) && (a[r] = t[r]);
-  return a;
+  var n = {}, e = Object.keys(t), o, a;
+  for (a = 0; a < e.length; a++)
+    o = e[a], !(r.indexOf(o) >= 0) && (n[o] = t[o]);
+  return n;
 }
-var y = x(function(t, n) {
-  var a = t.color, e = a === void 0 ? "currentColor" : a, r = t.size, o = r === void 0 ? 24 : r, c = M(t, ["color", "size"]);
-  return /* @__PURE__ */ l.createElement("svg", g({
-    ref: n,
+var w = y(function(t, r) {
+  var n = t.color, e = n === void 0 ? "currentColor" : n, o = t.size, a = o === void 0 ? 24 : o, c = B(t, ["color", "size"]);
+  return /* @__PURE__ */ p.createElement("svg", v({
+    ref: r,
     xmlns: "http://www.w3.org/2000/svg",
-    width: o,
-    height: o,
+    width: a,
+    height: a,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: e,
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, c), /* @__PURE__ */ l.createElement("path", {
+  }, c), /* @__PURE__ */ p.createElement("path", {
     d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
-  }), /* @__PURE__ */ l.createElement("circle", {
+  }), /* @__PURE__ */ p.createElement("circle", {
     cx: "12",
     cy: "12",
     r: "3"
   }));
 });
-y.propTypes = {
-  color: i.string,
-  size: i.oneOfType([i.string, i.number])
+w.propTypes = {
+  color: l.string,
+  size: l.oneOfType([l.string, l.number])
 };
-y.displayName = "Eye";
-const A = x(
+w.displayName = "Eye";
+const F = y(
   ({
     className: t,
-    error: n,
-    isRequired: a = !1,
-    isSearch: e = !1,
-    label: r,
-    labelClassName: o,
-    name: c,
-    theme: O,
+    error: r,
+    helperText: n,
+    helperTextClassName: e,
+    isRequired: o = !1,
+    isSearch: a = !1,
+    label: c,
+    labelAction: O,
+    labelClassName: j,
+    labelWrapperClassName: k,
+    name: N,
+    theme: P,
     type: f = "text",
-    helperText: w,
-    helperTextClassName: j,
-    ...k
-  }, N) => {
-    const b = _(), P = I(f === "password"), [d, E] = W(() => f !== "password"), p = typeof n == "string" && n.length >= 0, z = d ? y : v;
-    return /* @__PURE__ */ m("div", { className: "flex flex-col gap-2 w-full relative", "data-theme": O, children: [
-      r ? /* @__PURE__ */ m(
-        "label",
+    ...E
+  }, z) => {
+    const b = W(), I = $(f === "password"), [h, _] = T(() => f !== "password"), m = typeof r == "string" && r.length >= 0, L = h ? w : x;
+    return /* @__PURE__ */ u("div", { className: "flex flex-col gap-2 w-full relative", "data-theme": P, children: [
+      c ? /* @__PURE__ */ u(
+        "div",
         {
-          htmlFor: b,
-          className: u(
-            "cursor-pointer text-slate-500 flex gap-1 text-sm font-medium dark:text-slate-50 kubefirst-dark:text-slate-50",
-            o
+          className: i(
+            "flex items-center justify-between",
+            k
           ),
           children: [
-            r,
-            " ",
-            a && /* @__PURE__ */ s("span", { className: "text-red-600 text-xs mt-0.5", children: "*" })
+            /* @__PURE__ */ u(
+              d,
+              {
+                component: "label",
+                variant: "labelLarge",
+                htmlFor: b,
+                className: i(
+                  "cursor-pointer",
+                  "flex",
+                  "gap-1",
+                  "text-sm",
+                  "font-medium",
+                  j
+                ),
+                children: [
+                  c,
+                  " ",
+                  o && /* @__PURE__ */ s(
+                    d,
+                    {
+                      component: "span",
+                      className: i(
+                        "text-red-600",
+                        "dark:text-red-500",
+                        "text-xs",
+                        "mt-0.5"
+                      ),
+                      children: "*"
+                    }
+                  )
+                ]
+              }
+            ),
+            O
           ]
         }
       ) : null,
-      /* @__PURE__ */ m("div", { className: "relative", children: [
-        e ? /* @__PURE__ */ s(
+      /* @__PURE__ */ u("div", { className: "relative", children: [
+        a ? /* @__PURE__ */ s(
           "i",
           {
-            className: u(
-              "absolute left-2.5 top-1/2 -translate-y-[50%] text-slate-400",
+            className: i(
+              "absolute",
+              "left-2.5",
+              "top-1/2",
+              "-translate-y-[50%]",
+              "text-slate-400",
+              "dark:text-metal-400",
               {
-                "text-red-700": p
+                "text-red-700": m
               }
             ),
-            children: /* @__PURE__ */ s(L, { className: "w-5 h-5" })
+            children: /* @__PURE__ */ s(C, { className: "w-5 h-5" })
           }
         ) : null,
         /* @__PURE__ */ s(
           "input",
           {
-            id: r ? b : void 0,
-            ref: N,
-            name: c,
-            type: d ? P.current ? "text" : f : "password",
-            "data-error": p,
-            className: u(
-              $({
+            id: c ? b : void 0,
+            ref: z,
+            name: N,
+            type: h ? I.current ? "text" : f : "password",
+            "data-error": m,
+            className: i(
+              S({
                 className: t,
-                variant: p ? "error" : "default"
+                variant: m ? "error" : "default"
               }),
               {
-                "pr-10": f === "password" || p,
-                "pl-8": e
+                "pr-10": f === "password" || m,
+                "pl-8": a
               }
             ),
-            ...k
+            ...E
           }
         ),
-        p ? /* @__PURE__ */ s("i", { className: "absolute right-3 text-red-700 dark:text-red-500 top-1/2 -translate-y-[50%]", children: /* @__PURE__ */ s(T, { className: "w-5 h-5" }) }) : null,
-        f === "password" && !n ? /* @__PURE__ */ s("i", { className: "absolute right-3 text-slate-400 top-1/2 -translate-y-[50%]", children: /* @__PURE__ */ s(
-          z,
+        m ? /* @__PURE__ */ s(
+          "i",
+          {
+            className: i(
+              "-translate-y-[50%]",
+              "absolute",
+              "right-3",
+              "text-red-700",
+              "top-1/2",
+              "dark:text-red-500"
+            ),
+            children: /* @__PURE__ */ s(M, { className: "w-5 h-5" })
+          }
+        ) : null,
+        f === "password" && !r ? /* @__PURE__ */ s(
+          "i",
           {
-            className: "w-5 h-5 cursor-pointer",
-            onClick: () => E(!d)
+            className: i(
+              "-translate-y-[50%]",
+              "absolute",
+              "right-3",
+              "text-slate-400",
+              "top-1/2"
+            ),
+            children: /* @__PURE__ */ s(
+              L,
+              {
+                className: "w-5 h-5 cursor-pointer",
+                onClick: () => _(!h)
+              }
+            )
           }
-        ) }) : null
+        ) : null
       ] }),
-      n ? /* @__PURE__ */ s("span", { className: "text-xs text-red-700 dark:text-red-500", children: n }) : null,
-      !n && w ? /* @__PURE__ */ s(
-        "span",
+      r ? /* @__PURE__ */ s(
+        d,
+        {
+          component: "span",
+          className: i(
+            "text-xs",
+            "tracking-normal",
+            "text-red-700",
+            "dark:text-red-400"
+          ),
+          children: r
+        }
+      ) : null,
+      !r && n ? /* @__PURE__ */ s(
+        d,
         {
-          className: u(
-            "text-xs text-slate-600 dark:text-slate-200 kubefirst-dark:text-slate-200",
-            j
+          component: "span",
+          variant: "body1",
+          className: i(
+            "text-xs",
+            "text-slate-600",
+            "dark:text-slate-200",
+            "select-none",
+            "tracking-normal",
+            e
           ),
-          children: w
+          children: n
         }
       ) : null
     ] });
   }
 );
-A.displayName = "KonstructInput";
+F.displayName = "KonstructInput";
 export {
-  A as Input
+  F as Input
 };

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

@@ -0,0 +1,36 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+import { inputVariants } from './Input.variants';
+/**
+ * Props for the Input component.
+ *
+ * @example
+ * ```tsx
+ * <Input label="Email" placeholder="Enter email" />
+ * <Input label="Password" type="password" isRequired />
+ * <Input error="Invalid email" helperText="We'll never share your email" />
+ * ```
+ */
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
+    /** Error message to display below the input */
+    error?: string;
+    /** Helper text displayed below the input when no error */
+    helperText?: string;
+    /** Additional CSS classes for the helper text */
+    helperTextClassName?: string;
+    /** Show required indicator (*) next to label */
+    isRequired?: boolean;
+    /** Show search icon inside the input */
+    isSearch?: boolean;
+    /** Label text or element displayed above the input */
+    label?: string | ReactNode;
+    /** Custom element rendered on the right side of the label (e.g. icon, button) */
+    labelAction?: ReactNode;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Additional CSS classes for the label wrapper container */
+    labelWrapperClassName?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+}

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

@@ -0,0 +1,3 @@
+export declare const inputVariants: (props?: ({
+    variant?: "error" | "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Input/Input.variants.js

@@ -1,45 +1,50 @@
-import { c as r } from "../../index-D29mdTf5.js";
-const a = r(
+import { c as e } from "../../index-D29mdTf5.js";
+const r = e(
   [
     "bg-white",
-    "border-gray-300",
     "border",
-    "disabled:bg-gray-50",
+    "border-gray-300",
+    "caret-text-slate-800",
     "disabled:cursor-not-allowed",
     "disabled:text-slate-500",
     "flex",
+    "focus-visible:border-transparent",
     "focus-visible:outline-none",
     "focus-visible:ring-1",
     "h-10",
-    "placeholder:text-slate-400",
     "px-2.5",
     "py-2",
     "rounded",
     "text-slate-800",
     "text-sm",
-    "w-full",
     "transition-all",
+    "w-full",
+    "disabled:bg-gray-50",
+    "placeholder:text-slate-400",
     "data-[error=false]:dark:focus:ring-aurora-500",
     "data-[error=false]:focus:ring-aurora-500",
-    "data-[error=false]:kubefirst:focus:ring-kubefirst-primary",
-    "dark:bg-slate-800",
-    "dark:border-slate-600",
-    "dark:disabled:bg-slate-900",
+    "dark:bg-metal-800",
+    "dark:border-metal-700",
+    "dark:caret-text-metal-50",
+    "dark:disabled:bg-metal-900",
+    "dark:disabled:placeholder:text-metal-400",
+    "dark:disabled:text-metal-400",
     "dark:disabled:text-slate-400",
+    "dark:placeholder:text-metal-300",
     "dark:text-slate-50",
-    "dark:text-white",
-    "kubefirst-dark:bg-slate-800",
-    "kubefirst-dark:border-slate-600",
-    "kubefirst-dark:disabled:bg-slate-900",
-    "kubefirst-dark:disabled:text-slate-400",
-    "kubefirst-dark:text-slate-50",
-    "kubefirst-dark:text-white"
+    "dark:text-white"
   ],
   {
     variants: {
       variant: {
         default: "",
-        error: "border-red-600 kubefirst-dark:border-red-500 dark:border-red-500 dark:border-red-500 pr-8 focus-visible:ring-transparent"
+        error: [
+          "pr-8",
+          "border-red-600",
+          "focus-visible:border-red-600",
+          "focus-visible:ring-transparent",
+          "dark:border-red-500"
+        ]
       }
     },
     defaultVariants: {
@@ -48,5 +53,5 @@ const a = r(
   }
 );
 export {
-  a as inputVariants
+  r as inputVariants
 };

package/dist/components/Loading/Loading.d.ts

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { LoadingProps } from './Loading.types';
+/**
+ * A spinning loading indicator.
+ *
+ * @example
+ * ```tsx
+ * // Default loading spinner
+ * <Loading />
+ *
+ * // Custom size
+ * <Loading className="w-8 h-8" />
+ *
+ * // In a button
+ * <Button disabled>
+ *   <Loading className="w-4 h-4 mr-2" />
+ *   Loading...
+ * </Button>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-loading--docs Storybook}
+ */
+declare const Loading: FC<LoadingProps>;
+export { Loading };

package/dist/components/Loading/Loading.js

@@ -1,13 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
 import { cn as c } from "../../utils/index.js";
 import { loadingVariants as i } from "./Loading.variants.js";
-import { c as t } from "../../createLucideIcon-D2CN7Ma9.js";
-/**
-* @license lucide-react v0.545.0 - ISC
-*
-* This source code is licensed under the ISC license.
-* See the LICENSE file in the root directory of this source tree.
-*/
+import { c as t } from "../../createLucideIcon-CP-mMPfa.js";
 const d = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]], m = t("loader-circle", d), n = ({ className: o, theme: a, ...r }) => /* @__PURE__ */ e(
   m,
   {

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

@@ -0,0 +1,17 @@
+import { VariantProps } from 'class-variance-authority';
+import { InputHTMLAttributes } from 'react';
+import { Theme } from '../../domain/theme';
+import { loadingVariants } from './Loading.variants';
+/**
+ * Props for the Loading component.
+ *
+ * @example
+ * ```tsx
+ * <Loading />
+ * <Loading className="w-8 h-8" />
+ * ```
+ */
+export type LoadingProps = InputHTMLAttributes<SVGSVGElement> & VariantProps<typeof loadingVariants> & {
+    /** Theme override for this component */
+    theme?: Theme;
+};

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

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

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import { ChildProps, Props } from './Modal.types';
+/**
+ * A modal dialog component with Header, Body, and Footer sub-components.
+ * Supports keyboard navigation (Escape to close) and portals to document.body.
+ *
+ * @example
+ * ```tsx
+ * const [isOpen, setIsOpen] = useState(false);
+ *
+ * <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+ *
+ * <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <Modal.Header>Confirm Action</Modal.Header>
+ *   <Modal.Body>
+ *     Are you sure you want to proceed?
+ *   </Modal.Body>
+ *   <Modal.Footer>
+ *     <Button variant="secondary" onClick={() => setIsOpen(false)}>
+ *       Cancel
+ *     </Button>
+ *     <Button onClick={handleConfirm}>Confirm</Button>
+ *   </Modal.Footer>
+ * </Modal>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-modal--docs Storybook}
+ */
+declare const Modal: FC<Props> & {
+    Header: FC<ChildProps>;
+    Body: FC<ChildProps>;
+    Footer: FC<ChildProps>;
+};
+export { Modal };

package/dist/components/Modal/Modal.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
 import "react-dom";
-import { M as d } from "../../Modal-B8jrP02v.js";
+import { M as d } from "../../Modal-BGcucTHv.js";
 import "./components/Header/Header.js";
 import "./components/Body/Body.js";
 import "./components/Footer/Footer.js";