impact-nova 2.0.9 → 2.1.0-alpha.2

package/dist/components/forms/file-upload/file-upload.js

@@ -0,0 +1,298 @@
+import { jsx as e, jsxs as c, Fragment as k } from "react/jsx-runtime";
+import * as n from "react";
+import { cn as f } from "../../../lib/utils.js";
+import { Cross as T, Eye as I, Delete as L, Document as B } from "impact-nova-icons";
+import { FileUpload as M, Text as A, Csv as E, Excel as O } from "../../ui/local-raster-icons/rasterIcons.js";
+import { Tooltip as U, TooltipTrigger as C, TooltipContent as D } from "../../feedback/tooltip/tooltip.js";
+import { useImpactNovaI18n as z } from "../../../i18n/use-impact-nova-i18n.js";
+const R = n.createContext(void 0), j = () => {
+  const a = n.useContext(R);
+  if (!a)
+    throw new Error("useFileUpload must be used within a FileUpload component");
+  return a;
+}, S = n.forwardRef(
+  ({
+    className: a,
+    children: t,
+    onFilesChange: l,
+    maxFiles: r = 1,
+    accept: d = [],
+    disabled: m = !1,
+    value: u = [],
+    ...p
+  }, b) => {
+    const [h, x] = n.useState(u);
+    n.useEffect(() => {
+      x(u);
+    }, [u]);
+    const g = (o) => {
+      if (m) return;
+      let s = o;
+      d.length > 0 && (s = s.filter((y) => {
+        const w = y.name.split(".").pop()?.toLowerCase();
+        return w && d.includes(w);
+      }));
+      const v = r - h.length;
+      if (v <= 0) return;
+      const F = s.slice(0, v);
+      if (F.length > 0) {
+        const y = [...h, ...F];
+        x(y), l?.(y);
+      }
+    }, N = (o) => {
+      if (m) return;
+      const s = h.filter((v) => v !== o);
+      x(s), l?.(s);
+    };
+    return /* @__PURE__ */ e(
+      R.Provider,
+      {
+        value: { files: h, addFiles: g, removeFile: N, maxFiles: r, accept: d, disabled: m },
+        children: /* @__PURE__ */ e(
+          "div",
+          {
+            ref: b,
+            className: f("w-full max-w-[550px]", a),
+            "data-component": "file-upload",
+            "data-disabled": m || void 0,
+            ...p,
+            children: t
+          }
+        )
+      }
+    );
+  }
+);
+S.displayName = "FileUpload";
+const P = n.forwardRef(({ className: a, children: t, ...l }, r) => /* @__PURE__ */ e(
+  "div",
+  {
+    ref: r,
+    className: f(
+      "flex flex-col gap-4 p-4 min-h-[274px] bg-canvas-elevated rounded-2xl shadow-elevation-header",
+      a
+    ),
+    ...l,
+    children: t
+  }
+));
+P.displayName = "FileUploadContent";
+const H = n.forwardRef(({ className: a, children: t, ...l }, r) => /* @__PURE__ */ e(
+  "div",
+  {
+    ref: r,
+    className: f("flex justify-between items-center w-full", a),
+    ...l,
+    children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-[2px] w-full", children: t })
+  }
+));
+H.displayName = "FileUploadHeader";
+const Z = n.forwardRef(({ className: a, children: t, ...l }, r) => /* @__PURE__ */ e(
+  "h3",
+  {
+    ref: r,
+    className: f("text-base font-extrabold text-content leading-6", a),
+    ...l,
+    children: t
+  }
+));
+Z.displayName = "FileUploadTitle";
+const $ = n.forwardRef(({ className: a, children: t, ...l }, r) => /* @__PURE__ */ e(
+  "p",
+  {
+    ref: r,
+    className: f(
+      "text-sm font-medium text-navigation-muted leading-5",
+      a
+    ),
+    ...l,
+    children: t
+  }
+));
+$.displayName = "FileUploadDescription";
+const G = n.forwardRef(({ className: a, ...t }, l) => {
+  const { t: r } = z(), d = r("aria.close");
+  return /* @__PURE__ */ c(U, { children: [
+    /* @__PURE__ */ e(C, { asChild: !0, children: /* @__PURE__ */ e(
+      "button",
+      {
+        ref: l,
+        className: f(
+          "text-content-tertiary hover:text-content transition-colors",
+          a
+        ),
+        type: "button",
+        "aria-label": d,
+        ...t,
+        children: /* @__PURE__ */ e(T, { size: 16 })
+      }
+    ) }),
+    /* @__PURE__ */ e(D, { side: "top", variant: "tertiary", children: d })
+  ] });
+});
+G.displayName = "FileUploadClose";
+const K = n.forwardRef(({ className: a, label: t, subLabel: l, ...r }, d) => {
+  const { addFiles: m, accept: u, disabled: p, files: b, maxFiles: h } = j(), [x, g] = n.useState(!1), N = n.useRef(null);
+  if (b.length >= h)
+    return null;
+  const o = (i) => {
+    i.preventDefault(), p || g(!0);
+  }, s = (i) => {
+    i.preventDefault(), g(!1);
+  }, v = (i) => {
+    i.preventDefault(), g(!1), !p && i.dataTransfer.files?.length && m(Array.from(i.dataTransfer.files));
+  }, F = () => {
+    p || N.current?.click();
+  }, y = (i) => {
+    i.target.files?.length && (m(Array.from(i.target.files)), i.target.value = "");
+  }, w = u.length > 0 ? u.map((i) => `.${i}`).join(",") : void 0;
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      ref: d,
+      onClick: F,
+      onDragOver: o,
+      onDragLeave: s,
+      onDrop: v,
+      className: f(
+        "relative flex flex-col items-center justify-end p-4 pt-6 pb-6 gap-2 h-[148px] rounded-lg border border-dashed border-stroke-accent bg-transparent cursor-pointer transition-colors",
+        x && "border-brand bg-brand/5",
+        p && "opacity-50 cursor-not-allowed",
+        a
+      ),
+      "data-component": "file-upload-dropzone",
+      "data-state": x ? "drag-over" : "idle",
+      ...r,
+      children: [
+        /* @__PURE__ */ e(
+          "input",
+          {
+            ref: N,
+            type: "file",
+            multiple: !0,
+            className: "hidden",
+            accept: w,
+            onChange: y,
+            disabled: p
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "absolute top-[24px] left-1/2 -translate-x-1/2 pointer-events-none", children: /* @__PURE__ */ e(M, { size: 56 }) }),
+        /* @__PURE__ */ c("div", { className: "text-center space-y-1 z-10 mt-auto", children: [
+          /* @__PURE__ */ e("p", { className: "text-sm font-medium text-content leading-5", children: t || /* @__PURE__ */ c(k, { children: [
+            "Drag your files here or",
+            " ",
+            /* @__PURE__ */ e("span", { className: "text-brand text-sm font-medium hover:underline", children: "Choose File" })
+          ] }) }),
+          l && /* @__PURE__ */ e("p", { className: "text-xs font-medium text-navigation-muted", children: l })
+        ] })
+      ]
+    }
+  );
+});
+K.displayName = "FileUploadDropZone";
+const V = n.forwardRef(({ className: a, children: t, ...l }, r) => /* @__PURE__ */ e("div", { ref: r, className: f("flex flex-col gap-3", a), ...l, children: t }));
+V.displayName = "FileUploadList";
+const q = n.forwardRef(
+  ({ className: a, file: t, onRemove: l, onView: r, onClick: d, ...m }, u) => {
+    const { t: p } = z(), { removeFile: b, disabled: h } = j(), x = (o) => {
+      o.stopPropagation(), l ? l() : b(t);
+    }, g = (o) => {
+      if (o === 0) return "0 B";
+      const s = 1024, v = ["B", "KB", "MB", "GB"], F = Math.floor(Math.log(o) / Math.log(s));
+      return parseFloat((o / Math.pow(s, F)).toFixed(2)) + " " + v[F];
+    }, N = (o) => {
+      switch (o.split(".").pop()?.toLowerCase()) {
+        case "xls":
+        case "xlsx":
+          return /* @__PURE__ */ e(O, { size: 36 });
+        case "csv":
+          return /* @__PURE__ */ e(E, { size: 36 });
+        case "txt":
+          return /* @__PURE__ */ e(A, { size: 36 });
+        default:
+          return /* @__PURE__ */ e(B, { size: 36, className: "text-content-icon" });
+      }
+    };
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        ref: u,
+        onClick: d,
+        className: f(
+          "flex flex-col justify-between items-stretch gap-2 p-4 border border-stroke-hairline rounded-xl bg-canvas-elevated",
+          d && "cursor-pointer",
+          a
+        ),
+        "data-component": "file-upload-item",
+        "data-file-name": t.name,
+        "data-file-size": t.size,
+        ...m,
+        children: /* @__PURE__ */ c("div", { className: "flex justify-between items-center gap-2 z-10", children: [
+          /* @__PURE__ */ c("div", { className: "flex gap-2 min-w-0", children: [
+            /* @__PURE__ */ e("div", { className: "w-9 h-9 shrink-0", children: N(t.name) }),
+            /* @__PURE__ */ c("div", { className: "flex flex-col justify-between gap-[2px] min-w-0", children: [
+              /* @__PURE__ */ c(U, { children: [
+                /* @__PURE__ */ e(C, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "text-xs font-bold text-content leading-[18px] line-clamp-1 break-all cursor-default", children: t.name }) }),
+                /* @__PURE__ */ e(D, { side: "top", variant: "tertiary", children: t.name })
+              ] }),
+              /* @__PURE__ */ e("span", { className: "text-xs font-medium text-content-muted leading-[16px]", children: g(t.size) })
+            ] })
+          ] }),
+          /* @__PURE__ */ c("div", { className: "flex items-center gap-4 shrink-0", children: [
+            r && /* @__PURE__ */ c(U, { children: [
+              /* @__PURE__ */ e(C, { asChild: !0, children: /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: (o) => {
+                    o.stopPropagation(), r();
+                  },
+                  className: "flex items-center justify-center text-content-tertiary hover:text-content transition-colors",
+                  type: "button",
+                  "aria-label": "View file data",
+                  children: /* @__PURE__ */ e(I, { size: 18 })
+                }
+              ) }),
+              /* @__PURE__ */ e(D, { side: "top", variant: "tertiary", children: "View" })
+            ] }),
+            !h && /* @__PURE__ */ c(U, { children: [
+              /* @__PURE__ */ e(C, { asChild: !0, children: /* @__PURE__ */ e(
+                "button",
+                {
+                  onClick: x,
+                  className: "flex items-center justify-center text-content-tertiary hover:text-destructive transition-colors",
+                  type: "button",
+                  "aria-label": p("aria.removeFile"),
+                  children: /* @__PURE__ */ e(L, { size: 14 })
+                }
+              ) }),
+              /* @__PURE__ */ e(D, { side: "top", variant: "tertiary", children: p("aria.removeFile") })
+            ] })
+          ] })
+        ] })
+      }
+    );
+  }
+);
+q.displayName = "FileUploadItem";
+const J = n.forwardRef(({ className: a, children: t, ...l }, r) => /* @__PURE__ */ e(
+  "div",
+  {
+    ref: r,
+    className: f("flex items-center justify-end gap-4 mt-auto", a),
+    ...l,
+    children: t
+  }
+));
+J.displayName = "FileUploadFooter";
+export {
+  S as FileUpload,
+  G as FileUploadClose,
+  P as FileUploadContent,
+  $ as FileUploadDescription,
+  K as FileUploadDropZone,
+  J as FileUploadFooter,
+  H as FileUploadHeader,
+  q as FileUploadItem,
+  V as FileUploadList,
+  Z as FileUploadTitle
+};

package/dist/components/forms/file-upload/file-upload.types.d.ts

@@ -0,0 +1,26 @@
+import type * as React from "react";
+export interface FileUploadProps extends React.HTMLAttributes<HTMLDivElement> {
+    onFilesChange?: (files: File[]) => void;
+    maxFiles?: number;
+    accept?: string[];
+    disabled?: boolean;
+    value?: File[];
+}
+export interface FileUploadContextValue {
+    files: File[];
+    addFiles: (newFiles: File[]) => void;
+    removeFile: (fileToRemove: File) => void;
+    maxFiles: number;
+    accept: string[];
+    disabled: boolean;
+}
+export interface FileUploadDropZoneProps extends React.HTMLAttributes<HTMLDivElement> {
+    label?: string;
+    subLabel?: string;
+}
+export interface FileUploadItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    file: File;
+    onRemove?: () => void;
+    onView?: () => void;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+}

package/dist/components/forms/file-upload/index.d.ts

@@ -0,0 +1,2 @@
+export { FileUpload, FileUploadContent, FileUploadHeader, FileUploadTitle, FileUploadDescription, FileUploadClose, FileUploadDropZone, FileUploadList, FileUploadItem, FileUploadFooter, } from './file-upload';
+export type { FileUploadContextValue, FileUploadDropZoneProps, FileUploadItemProps, FileUploadProps, } from './file-upload.types';

package/dist/components/forms/file-upload/index.js

@@ -0,0 +1,13 @@
+import { FileUpload as o, FileUploadClose as i, FileUploadContent as p, FileUploadDescription as a, FileUploadDropZone as d, FileUploadFooter as F, FileUploadHeader as U, FileUploadItem as t, FileUploadList as r, FileUploadTitle as n } from "./file-upload.js";
+export {
+  o as FileUpload,
+  i as FileUploadClose,
+  p as FileUploadContent,
+  a as FileUploadDescription,
+  d as FileUploadDropZone,
+  F as FileUploadFooter,
+  U as FileUploadHeader,
+  t as FileUploadItem,
+  r as FileUploadList,
+  n as FileUploadTitle
+};

package/dist/components/forms/input/index.d.ts

@@ -0,0 +1,3 @@
+export { Input } from './input';
+export type { InputProps } from './input.types';
+export { inputVariants } from './input.variants';

package/dist/components/forms/input/index.js

@@ -0,0 +1,6 @@
+import { Input as o } from "./input.js";
+import { inputVariants as n } from "./input.variants.js";
+export {
+  o as Input,
+  n as inputVariants
+};

package/dist/components/forms/input/input.d.ts

@@ -0,0 +1,3 @@
+import { InputProps } from './input.types';
+declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
+export { Input };

package/dist/components/forms/input/input.js

@@ -0,0 +1,114 @@
+import { jsx as o, jsxs as w } from "react/jsx-runtime";
+import { createComponent as C } from "../../../lib/primitives/create-component.js";
+import { useFieldChrome as B } from "../../../lib/primitives/use-field-chrome.js";
+import { cn as r } from "../../../lib/utils.js";
+import { inputVariants as I } from "./input.variants.js";
+const V = C(
+  "Input",
+  ({
+    className: v,
+    type: f,
+    label: i,
+    helperText: a,
+    helperTextPosition: d = "absolute",
+    labelOrientation: b,
+    error: h,
+    isError: x,
+    size: y,
+    disabled: e,
+    prefix: l,
+    suffix: c,
+    prefixClick: s,
+    suffixClick: m,
+    id: g,
+    ...u
+  }, N) => {
+    const t = h ?? x, j = !!(i || a || t), n = B({
+      label: i,
+      helperText: a,
+      helperTextPosition: d,
+      labelOrientation: b,
+      error: t,
+      required: u.required === !0 ? !0 : void 0,
+      disabled: e ?? void 0,
+      id: g
+    }), p = /* @__PURE__ */ o(
+      "div",
+      {
+        className: r(
+          a && d === "absolute" && "relative"
+        ),
+        children: /* @__PURE__ */ w(
+          "div",
+          {
+            "data-component": "input-border",
+            className: r(
+              I({
+                size: y,
+                error: !!t,
+                disabled: !!e,
+                className: v
+              }),
+              "bg-canvas",
+              e && "bg-disabled-surface"
+            ),
+            children: [
+              l ? /* @__PURE__ */ o(
+                "div",
+                {
+                  onClick: s,
+                  className: r(
+                    "flex shrink-0 items-center justify-center text-content-muted pointer-events-auto",
+                    s && "cursor-pointer"
+                  ),
+                  children: l
+                }
+              ) : null,
+              /* @__PURE__ */ o(
+                "input",
+                {
+                  type: f,
+                  id: n.controlId,
+                  className: r(
+                    "flex h-full w-full bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-content-empty disabled:cursor-not-allowed disabled:opacity-50",
+                    e && "opacity-100 text-disabled-foreground placeholder:text-disabled-foreground"
+                  ),
+                  ref: N,
+                  disabled: !!e,
+                  "data-form-control": "input",
+                  "aria-invalid": n.controlAria["aria-invalid"],
+                  "aria-describedby": n.controlAria["aria-describedby"],
+                  ...u
+                }
+              ),
+              c ? /* @__PURE__ */ o(
+                "div",
+                {
+                  onClick: m,
+                  className: r(
+                    "flex shrink-0 items-center justify-center text-content-muted pointer-events-auto",
+                    m && "cursor-pointer"
+                  ),
+                  children: c
+                }
+              ) : null
+            ]
+          }
+        )
+      }
+    );
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        className: "flex w-full flex-col gap-[6px]",
+        "data-component": "input",
+        "data-disabled": e || void 0,
+        "data-invalid": t || void 0,
+        children: j ? n.wrapControl(p) : p
+      }
+    );
+  }
+);
+export {
+  V as Input
+};

package/dist/components/forms/input/input.types.d.ts

@@ -0,0 +1,12 @@
+import { VariantProps } from 'class-variance-authority';
+import { FieldControlProps } from '../../../lib/primitives/field.types';
+import { inputVariants } from './input.variants';
+import type * as React from "react";
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "prefix" | "disabled" | keyof FieldControlProps>, Omit<FieldControlProps, "disabled" | "size" | "error">, VariantProps<typeof inputVariants> {
+    /** @deprecated Use `error` */
+    isError?: boolean;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    prefixClick?: React.MouseEventHandler<HTMLDivElement>;
+    suffixClick?: React.MouseEventHandler<HTMLDivElement>;
+}

package/dist/components/forms/input/input.variants.d.ts

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

package/dist/components/forms/input/input.variants.js

@@ -0,0 +1,29 @@
+import { cva as e } from "class-variance-authority";
+const t = e(
+  "flex w-full items-center gap-1 rounded-md border bg-transparent px-3 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-content-muted focus-within:outline-none focus-within:border-brand hover:border-brand disabled:cursor-not-allowed disabled:bg-disabled-surface disabled:text-disabled-foreground disabled:border-stroke",
+  {
+    variants: {
+      error: {
+        true: "border-destructive hover:border-destructive",
+        false: "border-field"
+      },
+      size: {
+        default: "h-8",
+        sm: "h-6",
+        md: "h-[28px]",
+        lg: "h-10"
+      },
+      disabled: {
+        true: "pointer-events-none opacity-100 bg-disabled-surface border-stroke text-disabled-foreground hover:border-stroke",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      error: !1
+    }
+  }
+);
+export {
+  t as inputVariants
+};

package/dist/components/forms/label/index.d.ts

@@ -0,0 +1,2 @@
+export { Label } from './label';
+export type { LabelProps } from './label.types';

package/dist/components/forms/label/index.js

@@ -0,0 +1,4 @@
+import { Label as r } from "./label.js";
+export {
+  r as Label
+};

package/dist/components/forms/label/label.d.ts

@@ -0,0 +1,3 @@
+import { LabelProps } from './label.types';
+declare const Label: import('react').ForwardRefExoticComponent<LabelProps & import('react').RefAttributes<HTMLLabelElement>>;
+export { Label };

package/dist/components/forms/label/label.js

@@ -0,0 +1,21 @@
+import { jsx as t } from "react/jsx-runtime";
+import { createComponent as l } from "../../../lib/primitives/create-component.js";
+import { cn as m } from "../../../lib/utils.js";
+const d = l(
+  "Label",
+  ({ className: e, ...o }, a) => /* @__PURE__ */ t(
+    "label",
+    {
+      ref: a,
+      "data-component": "label",
+      className: m(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        e
+      ),
+      ...o
+    }
+  )
+);
+export {
+  d as Label
+};

package/dist/components/forms/label/label.types.d.ts

@@ -0,0 +1,2 @@
+import { LabelHTMLAttributes } from 'react';
+export type LabelProps = LabelHTMLAttributes<HTMLLabelElement>;

package/dist/components/forms/prompt/index.d.ts

@@ -0,0 +1,3 @@
+export { Prompt, PromptClose } from './prompt';
+export type { PromptProps } from './prompt.types';
+export { promptVariants } from './prompt.variants';

package/dist/components/forms/prompt/index.js

@@ -0,0 +1,7 @@
+import { Prompt as p, PromptClose as t } from "./prompt.js";
+import { promptVariants as e } from "./prompt.variants.js";
+export {
+  p as Prompt,
+  t as PromptClose,
+  e as promptVariants
+};

package/dist/components/forms/prompt/prompt.d.ts

@@ -0,0 +1,5 @@
+import { PromptProps } from './prompt.types';
+import * as React from "react";
+declare const PromptClose: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+declare const Prompt: React.ForwardRefExoticComponent<PromptProps & React.RefAttributes<HTMLDivElement>>;
+export { Prompt, PromptClose };