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

package/dist/components/ImageUpload/ImageUpload.d.ts

@@ -0,0 +1,25 @@
+import { ImageUploadProps } from './ImageUpload.types';
+/**
+ * A file input component for uploading images with preview and validation.
+ * Supports drag states, file type validation, size limits, and upload progress.
+ *
+ * @example
+ * ```tsx
+ * <ImageUpload
+ *   label="Profile Picture"
+ *   name="avatar"
+ *   accept="image/png,image/jpeg"
+ *   maxSize={5 * 1024 * 1024}
+ *   uploadButtonText="Choose image"
+ *   onChange={(e) => console.log(e.target.files?.[0])}
+ *   onRemove={() => setAvatar(null)}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-imageupload--docs Storybook}
+ */
+declare const ImageUpload: {
+    ({ className, error, fileName, fileSize, fileUrl, helperText, isRequired, label, labelClassName, labelWrapperClassName, name, onChange, onRemove, status, theme, uploadButtonText, accept, maxSize, }: ImageUploadProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { ImageUpload };

package/dist/components/ImageUpload/ImageUpload.js

@@ -0,0 +1,223 @@
+import { jsxs as l, jsx as e, Fragment as j } from "react/jsx-runtime";
+import { useId as te, useRef as D, useState as g, useEffect as ae } from "react";
+import { Button as F } from "../Button/Button.js";
+import { cn as c } from "../../utils/index.js";
+import { labelVariants as re, inputFieldVariants as le, inputContainerVariants as ie, helperTextVariants as se, imageUploadVariants as ne } from "./ImageUpload.variants.js";
+import { LoaderIcon as ce } from "../../assets/icons/components/Loader.js";
+import { PhotoLibraryIcon as oe } from "../../assets/icons/components/PhotoLibrary.js";
+import { WarningIcon as de } from "../../assets/icons/components/Warning.js";
+import { X as P } from "../../x-B9bYxG31.js";
+var t = /* @__PURE__ */ ((s) => (s.Default = "default", s.Uploading = "uploading", s.Complete = "complete", s.Error = "error", s))(t || {});
+const me = ({
+  className: s,
+  error: b,
+  fileName: T,
+  fileSize: z,
+  fileUrl: E,
+  helperText: R = "Logo should be 32 x 32 pixels with transparent background (larger images will be downscaled proportionally to fit). Accepted file type is SVG, PNG, JPEG. Max file size is 5MB.",
+  isRequired: S = !1,
+  label: p = "Item logo",
+  labelClassName: L,
+  labelWrapperClassName: A,
+  name: H,
+  onChange: N,
+  onRemove: J,
+  status: k = t.Default,
+  theme: u,
+  uploadButtonText: K = "Upload logo",
+  accept: M = "image/svg+xml,image/png,image/jpeg,image/jpg",
+  maxSize: W = 5 * 1024 * 1024
+}) => {
+  const U = te(), f = D(null), n = D(null), [$, o] = g(k), [X, B] = g(E), [q, C] = g(T), [O, G] = g(z);
+  ae(() => () => {
+    n.current && clearTimeout(n.current);
+  }, []);
+  const a = k !== t.Default ? k : $, v = E ?? X, d = T ?? q, h = z ?? O, x = !!b || a === t.Error, Q = (i) => {
+    const r = i.target.files?.[0];
+    if (!r) return;
+    if (!M.split(",").map((m) => m.trim()).some((m) => {
+      if (m.includes("*")) {
+        const ee = m.split("/")[0];
+        return r.type.startsWith(ee);
+      }
+      return r.type === m;
+    })) {
+      o(t.Error), N?.(i);
+      return;
+    }
+    if (r.size > W) {
+      o(t.Error), N?.(i);
+      return;
+    }
+    o(t.Uploading), C(r.name), G(Z(r.size));
+    const y = new FileReader();
+    y.onloadend = () => {
+      B(y.result), n.current = setTimeout(() => {
+        o(t.Complete);
+      }, 500);
+    }, y.readAsDataURL(r), N?.(i);
+  }, I = () => {
+    n.current && (clearTimeout(n.current), n.current = null), B(void 0), C(void 0), G(void 0), o(t.Default), f.current && (f.current.value = ""), J?.();
+  }, Y = () => {
+    f.current?.click();
+  }, Z = (i) => {
+    if (i === 0) return "0 Bytes";
+    const r = 1024, V = ["Bytes", "KB", "MB", "GB"], w = Math.floor(Math.log(i) / Math.log(r));
+    return `${parseFloat((i / Math.pow(r, w)).toFixed(2))}${V[w]}`;
+  }, _ = b || (x ? "Invalid file format. Accepted file type is SVG, PNG, JPEG. Max file size is 5MB." : R || "Logo should be 32 x 32 pixels with transparent background (larger images will be downscaled proportionally to fit). Accepted file type is SVG, PNG, JPEG. Max file size is 5MB.");
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: c(
+        ne({
+          status: a,
+          className: s
+        })
+      ),
+      "data-theme": u,
+      children: [
+        p && /* @__PURE__ */ e("div", { className: c(A), children: /* @__PURE__ */ l(
+          "label",
+          {
+            htmlFor: U,
+            className: c(
+              re({
+                className: L
+              }),
+              "cursor-pointer"
+            ),
+            children: [
+              p,
+              S && /* @__PURE__ */ e("span", { className: "text-red-600 dark:text-red-500 text-xs mt-0.5", children: "*" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: c(
+              ie({
+                status: a
+              })
+            ),
+            children: [
+              /* @__PURE__ */ l(
+                "div",
+                {
+                  className: c(
+                    le({
+                      status: a
+                    }),
+                    {
+                      "justify-between": x,
+                      "justify-start": !x
+                    }
+                  ),
+                  children: [
+                    a === t.Uploading && /* @__PURE__ */ l(j, { children: [
+                      /* @__PURE__ */ e(
+                        ce,
+                        {
+                          size: 20,
+                          className: "shrink-0 animate-spin text-metal-400"
+                        }
+                      ),
+                      d && /* @__PURE__ */ l("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
+                        /* @__PURE__ */ e("p", { className: "text-sm leading-5 truncate w-full text-slate-800 dark:text-metal-50", children: d }),
+                        h && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-slate-600 dark:text-metal-300 tracking-[0.15px]", children: h })
+                      ] })
+                    ] }),
+                    a === t.Complete && v && /* @__PURE__ */ l(j, { children: [
+                      /* @__PURE__ */ e("div", { className: "w-8 h-8 shrink-0 relative", children: /* @__PURE__ */ e(
+                        "img",
+                        {
+                          src: v,
+                          alt: d || "Uploaded image",
+                          className: "w-full h-full object-contain"
+                        }
+                      ) }),
+                      d && /* @__PURE__ */ l("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
+                        /* @__PURE__ */ e("p", { className: "text-sm leading-5 truncate w-full text-slate-800 dark:text-slate-50 kubefirst-dark:text-slate-50", children: d }),
+                        h && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-slate-600 dark:text-slate-400 kubefirst-dark:text-slate-400 tracking-[0.15px]", children: h })
+                      ] })
+                    ] }),
+                    (a === t.Default || a === t.Error && !v) && /* @__PURE__ */ e("div", { className: "w-8 h-8 shrink-0 flex items-center justify-center", children: /* @__PURE__ */ e(oe, { className: "w-8 h-8 text-slate-400 dark:text-slate-500 kubefirst-dark:text-slate-500" }) }),
+                    x && /* @__PURE__ */ e("div", { className: "shrink-0", children: /* @__PURE__ */ e(de, { className: "w-5 h-5 text-red-700 dark:text-red-500 kubefirst-dark:text-red-500" }) })
+                  ]
+                }
+              ),
+              (a === t.Default || a === t.Error) && /* @__PURE__ */ e(
+                F,
+                {
+                  variant: "secondary",
+                  onClick: Y,
+                  theme: u,
+                  className: "h-10 px-4 py-2 shrink-0",
+                  children: K
+                }
+              ),
+              a === t.Uploading && /* @__PURE__ */ e(
+                F,
+                {
+                  variant: "secondary",
+                  shape: "circle",
+                  size: "medium",
+                  onClick: I,
+                  theme: u,
+                  className: "shrink-0",
+                  "aria-label": "Cancel upload",
+                  children: /* @__PURE__ */ e(P, { className: "w-6 h-6" })
+                }
+              ),
+              a === t.Complete && /* @__PURE__ */ e(
+                F,
+                {
+                  variant: "secondary",
+                  shape: "circle",
+                  size: "medium",
+                  onClick: I,
+                  theme: u,
+                  className: "shrink-0",
+                  "aria-label": "Remove file",
+                  children: /* @__PURE__ */ e(P, { className: "w-6 h-6" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ l("div", { className: "flex w-full gap-2", children: [
+          /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ e(
+            "p",
+            {
+              className: c(
+                se({
+                  status: a
+                })
+              ),
+              children: _
+            }
+          ) }),
+          (a === t.Default || a === t.Error) && /* @__PURE__ */ e("div", { className: "shrink-0 w-29" }),
+          a === t.Uploading && /* @__PURE__ */ e("div", { className: "shrink-0 w-10" })
+        ] }),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            ref: f,
+            id: U,
+            type: "file",
+            name: H,
+            accept: M,
+            onChange: Q,
+            className: "hidden",
+            "aria-label": typeof p == "string" ? p : "File upload"
+          }
+        )
+      ]
+    }
+  );
+};
+me.displayName = "KonstructImageUpload";
+export {
+  me as ImageUpload
+};

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

@@ -0,0 +1,69 @@
+import { VariantProps } from 'class-variance-authority';
+import { ChangeEvent, ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
+import { imageUploadVariants } from './ImageUpload.variants';
+/**
+ * Upload status states for the ImageUpload component.
+ */
+export declare enum ImageUploadStatus {
+    Default = "default",
+    Uploading = "uploading",
+    Complete = "complete",
+    Error = "error"
+}
+export type ImageUploadStatusType = ImageUploadStatus;
+/**
+ * Props for the ImageUpload component.
+ * A file input for uploading images with preview, validation, and status states.
+ *
+ * @example
+ * ```tsx
+ * <ImageUpload
+ *   label="Logo"
+ *   name="logo"
+ *   accept="image/png,image/svg+xml"
+ *   maxSize={2 * 1024 * 1024}
+ *   onChange={(e) => handleUpload(e.target.files?.[0])}
+ *   onRemove={() => setLogo(null)}
+ *   isRequired
+ * />
+ * ```
+ */
+export interface ImageUploadProps extends Omit<VariantProps<typeof imageUploadVariants>, 'status'> {
+    /** Additional CSS classes */
+    className?: string;
+    /** Error message to display */
+    error?: string;
+    /** Name of the uploaded file */
+    fileName?: string;
+    /** Formatted size of the uploaded file */
+    fileSize?: string;
+    /** URL or data URL of the uploaded file for preview */
+    fileUrl?: string;
+    /** Helper text displayed below the input */
+    helperText?: string;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Label displayed above the input */
+    label?: string | ReactNode;
+    /** Additional CSS classes for the label */
+    labelClassName?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
+    /** Form field name */
+    name?: string;
+    /** Callback fired when a file is selected */
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    /** Callback fired when the uploaded file is removed */
+    onRemove?: () => void;
+    /** Current upload status */
+    status?: ImageUploadStatusType;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Text displayed on the upload button */
+    uploadButtonText?: string;
+    /** Accepted file MIME types (comma-separated) */
+    accept?: string;
+    /** Maximum file size in bytes */
+    maxSize?: number;
+}

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

@@ -0,0 +1,13 @@
+export declare const imageUploadVariants: (props?: ({
+    status?: "error" | "default" | "uploading" | "complete" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const inputContainerVariants: (props?: ({
+    status?: "error" | "default" | "uploading" | "complete" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const inputFieldVariants: (props?: ({
+    status?: "error" | "default" | "uploading" | "complete" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const labelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const helperTextVariants: (props?: ({
+    status?: "error" | "default" | "uploading" | "complete" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/ImageUpload/ImageUpload.variants.js

@@ -0,0 +1,109 @@
+import { c as t } from "../../index-D29mdTf5.js";
+const a = t(
+  ["flex", "flex-col", "gap-2", "w-full"],
+  {
+    variants: {
+      status: {
+        default: "",
+        uploading: "",
+        complete: "",
+        error: ""
+      }
+    },
+    defaultVariants: {
+      status: "default"
+    }
+  }
+), r = t(
+  ["flex", "gap-2", "h-15", "items-center", "w-full"],
+  {
+    variants: {
+      status: {
+        default: "",
+        uploading: "",
+        complete: "",
+        error: ""
+      }
+    },
+    defaultVariants: {
+      status: "default"
+    }
+  }
+), s = t(
+  [
+    "flex",
+    "gap-4",
+    "grow",
+    "h-full",
+    "items-center",
+    "px-4",
+    "py-2",
+    "rounded",
+    "border",
+    "bg-white",
+    "border-gray-300",
+    "dark:bg-metal-800",
+    "dark:border-metal-700",
+    "kubefirst-dark:bg-slate-800",
+    "kubefirst-dark:border-slate-600"
+  ],
+  {
+    variants: {
+      status: {
+        default: "",
+        uploading: "",
+        complete: "",
+        error: [
+          "border-red-600",
+          "dark:border-red-500",
+          "kubefirst-dark:border-red-500"
+        ]
+      }
+    },
+    defaultVariants: {
+      status: "default"
+    }
+  }
+), l = t([
+  "flex",
+  "gap-1",
+  "items-center",
+  "text-sm",
+  "font-medium",
+  "leading-5",
+  "text-slate-500",
+  "dark:text-slate-50",
+  "kubefirst-dark:text-slate-50"
+]), d = t(
+  [
+    "text-xs",
+    "leading-5",
+    "text-slate-600",
+    "dark:text-slate-200",
+    "kubefirst-dark:text-slate-200"
+  ],
+  {
+    variants: {
+      status: {
+        default: "",
+        uploading: "",
+        complete: "",
+        error: [
+          "text-red-700",
+          "dark:text-red-400",
+          "kubefirst-dark:text-red-500"
+        ]
+      }
+    },
+    defaultVariants: {
+      status: "default"
+    }
+  }
+);
+export {
+  d as helperTextVariants,
+  a as imageUploadVariants,
+  r as inputContainerVariants,
+  s as inputFieldVariants,
+  l as labelVariants
+};

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

@@ -0,0 +1,35 @@
+import { InputProps } from './Input.types';
+/**
+ * A text input component with label, error handling, and helper text support.
+ * Includes built-in password visibility toggle and search icon variant.
+ *
+ * @example
+ * ```tsx
+ * // Basic input with label
+ * <Input label="Email" placeholder="Enter your email" />
+ *
+ * // Required input with helper text
+ * <Input
+ *   label="Username"
+ *   isRequired
+ *   helperText="Choose a unique username"
+ * />
+ *
+ * // Input with error state
+ * <Input
+ *   label="Email"
+ *   value={email}
+ *   error="Please enter a valid email address"
+ * />
+ *
+ * // Password input (auto show/hide toggle)
+ * <Input label="Password" type="password" />
+ *
+ * // Search input with icon
+ * <Input placeholder="Search..." isSearch />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-input--docs Storybook}
+ */
+declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
+export { Input };