@demokit-ui/demokit 0.1.0

package/dist/kit/components/form/datefield/datefield.js

@@ -0,0 +1,74 @@
+import { jsx as i } from "react/jsx-runtime";
+import { cn as r } from "../../../../lib/utils.js";
+import { inputVariants as o } from "../input/input.js";
+import { DateField as l, composeRenderProps as n, DateInput as s, DateSegment as u, TimeField as c } from "react-aria-components";
+function x({ className: t, children: e, ...a }) {
+  return /* @__PURE__ */ i(
+    l,
+    {
+      className: n(t, (d) => r(d)),
+      "data-slot": "datefield",
+      ...a,
+      children: e
+    }
+  );
+}
+function w({ className: t, children: e, ...a }) {
+  return /* @__PURE__ */ i(
+    c,
+    {
+      className: n(t, (d) => r(d)),
+      "data-slot": "datefield",
+      ...a,
+      children: e
+    }
+  );
+}
+function f({ className: t, ...e }) {
+  return /* @__PURE__ */ i(
+    u,
+    {
+      className: n(
+        t,
+        (a) => r(
+          `
+            text-foreground inline-flex rounded px-0.5 caret-transparent outline-hidden data-[type=literal]:text-muted-foreground/70 data-[type=literal]:px-0
+            data-placeholder:text-muted-foreground/70
+            data-invalid:data-focused:bg-destructive data-invalid:data-placeholder:text-destructive data-invalid:text-destructive data-invalid:data-focused:data-placeholder:text-destructive-foreground data-invalid:data-focused:text-destructive-foreground 
+            data-focused:bg-accent data-focused:data-placeholder:text-foreground data-focused:text-foreground             
+            data-disabled:cursor-not-allowed data-disabled:opacity-50
+          `,
+          a
+        )
+      ),
+      ...e,
+      "data-invalid": !0
+    }
+  );
+}
+const p = `
+  relative inline-flex items-center overflow-hidden whitespace-nowrap
+  data-focus-within:ring-ring/30 data-focus-within:border-ring data-focus-within:outline-none data-focus-within:ring-[3px] 
+  data-focus-within:has-aria-invalid:ring-destructive/20 data-focus-within:has-aria-invalid:border-destructive
+`;
+function D({ className: t, variant: e = "md", ...a }) {
+  return /* @__PURE__ */ i(
+    s,
+    {
+      "data-slot": "input",
+      className: n(
+        t,
+        (d) => r(o({ variant: e }), p, d)
+      ),
+      ...a,
+      children: (d) => /* @__PURE__ */ i(f, { segment: d })
+    }
+  );
+}
+export {
+  x as DateField,
+  D as DateInput,
+  f as DateSegment,
+  w as TimeField,
+  p as dateInputStyles
+};

package/dist/kit/components/form/file-upload/file-upload.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+export type FileMetadata = {
+    name: string;
+    size: number;
+    type: string;
+    url: string;
+    id: string;
+};
+export type FileWithPreview = {
+    file: File | FileMetadata;
+    id: string;
+    preview?: string;
+};
+export type FileUploadOptions = {
+    maxFiles?: number;
+    maxSize?: number;
+    accept?: string;
+    multiple?: boolean;
+    initialFiles?: FileMetadata[];
+    onFilesChange?: (files: FileWithPreview[]) => void;
+    onFilesAdded?: (addedFiles: FileWithPreview[]) => void;
+};
+export type FileUploadState = {
+    files: FileWithPreview[];
+    isDragging: boolean;
+    errors: string[];
+};
+export type FileUploadActions = {
+    addFiles: (files: FileList | File[]) => void;
+    removeFile: (id: string) => void;
+    clearFiles: () => void;
+    clearErrors: () => void;
+    handleDragEnter: (event: React.DragEvent<HTMLElement>) => void;
+    handleDragLeave: (event: React.DragEvent<HTMLElement>) => void;
+    handleDragOver: (event: React.DragEvent<HTMLElement>) => void;
+    handleDrop: (event: React.DragEvent<HTMLElement>) => void;
+    handleFileChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    openFileDialog: () => void;
+    getInputProps: (props?: React.InputHTMLAttributes<HTMLInputElement>) => React.InputHTMLAttributes<HTMLInputElement> & {
+        ref: React.Ref<HTMLInputElement>;
+    };
+};
+export type FileUploadProps = Omit<React.ComponentProps<'div'>, 'children'> & FileUploadOptions & {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    browseLabel?: React.ReactNode;
+    disabled?: boolean;
+    showFileList?: boolean;
+    dropzoneClassName?: string;
+    listClassName?: string;
+    errorClassName?: string;
+};
+export declare function useFileUpload(options?: FileUploadOptions): [FileUploadState, FileUploadActions];
+declare function FileUpload({ maxFiles, maxSize, accept, multiple, initialFiles, onFilesChange, onFilesAdded, label, description, browseLabel, disabled, showFileList, className, dropzoneClassName, listClassName, errorClassName, ...props }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
+export declare function formatBytes(bytes: number, decimals?: number): string;
+export { FileUpload };

package/dist/kit/components/form/file-upload/file-upload.js

@@ -0,0 +1,338 @@
+import { jsxs as h, jsx as o } from "react/jsx-runtime";
+import * as l from "react";
+import { RiUpload2Line as q, RiFileTextLine as G, RiCloseLine as Y } from "@remixicon/react";
+import { cn as E } from "../../../../lib/utils.js";
+import { Button as j } from "../button/button.js";
+function C(t) {
+  return typeof File < "u" && t instanceof File;
+}
+function w(t) {
+  return t.name;
+}
+function A(t) {
+  return t.size;
+}
+function H(t) {
+  return C(t) ? t.type || "" : t.type;
+}
+function J(t) {
+  const c = w(t), f = c.includes(".") ? c.split(".").pop() : "";
+  return f ? `.${f}` : "";
+}
+function W(t, c) {
+  return `File "${w(t)}" ${c}.`;
+}
+function Q(t = {}) {
+  const {
+    maxFiles: c = 1 / 0,
+    maxSize: f = 1 / 0,
+    accept: g = "*",
+    multiple: u = !1,
+    initialFiles: b = [],
+    onFilesChange: x,
+    onFilesAdded: z
+  } = t, [y, m] = l.useState({
+    files: b.map((e) => ({
+      file: e,
+      id: e.id,
+      preview: e.url
+    })),
+    isDragging: !1,
+    errors: []
+  }), i = l.useRef(null), $ = l.useCallback(
+    (e) => {
+      if (A(e) > f)
+        return W(e, `exceeds the maximum size of ${I(f)}`);
+      if (g !== "*") {
+        const s = g.split(",").map((d) => d.trim()), n = H(e), p = J(e);
+        if (!s.some((d) => {
+          if (d.startsWith("."))
+            return p.toLowerCase() === d.toLowerCase();
+          if (d.endsWith("/*")) {
+            const a = d.split("/")[0];
+            return n.startsWith(`${a}/`);
+          }
+          return n === d;
+        }))
+          return W(e, "is not an accepted file type");
+      }
+      return null;
+    },
+    [g, f]
+  ), L = l.useCallback((e) => C(e) ? URL.createObjectURL(e) : e.url, []), R = l.useCallback((e) => C(e) ? `${e.name}-${Date.now()}-${Math.random().toString(36).slice(2, 9)}` : e.id, []), D = l.useCallback(() => {
+    m((e) => {
+      e.files.forEach((n) => {
+        n.preview && C(n.file) && URL.revokeObjectURL(n.preview);
+      }), i.current && (i.current.value = "");
+      const s = [];
+      return x?.(s), {
+        ...e,
+        files: s,
+        errors: []
+      };
+    });
+  }, [x]), v = l.useCallback(
+    (e) => {
+      if (!e || e.length === 0) return;
+      const s = Array.from(e), n = [];
+      if (m((r) => ({ ...r, errors: [] })), u || D(), u && c !== 1 / 0 && y.files.length + s.length > c) {
+        n.push(`You can only upload a maximum of ${c} files.`), m((r) => ({ ...r, errors: n }));
+        return;
+      }
+      const p = [];
+      s.forEach((r) => {
+        if (u && y.files.some(
+          (K) => w(K.file) === r.name && A(K.file) === r.size
+        ))
+          return;
+        const d = $(r);
+        if (d) {
+          n.push(d);
+          return;
+        }
+        p.push({
+          file: r,
+          id: R(r),
+          preview: L(r)
+        });
+      }), p.length > 0 ? (z?.(p), m((r) => {
+        const d = u ? [...r.files, ...p] : p;
+        return x?.(d), {
+          ...r,
+          files: d,
+          errors: n
+        };
+      })) : n.length > 0 && m((r) => ({
+        ...r,
+        errors: n
+      })), i.current && (i.current.value = "");
+    },
+    [
+      D,
+      L,
+      R,
+      c,
+      u,
+      z,
+      x,
+      y.files,
+      $
+    ]
+  ), U = l.useCallback(
+    (e) => {
+      m((s) => {
+        const n = s.files.find((r) => r.id === e);
+        n?.preview && C(n.file) && URL.revokeObjectURL(n.preview);
+        const p = s.files.filter((r) => r.id !== e);
+        return x?.(p), {
+          ...s,
+          files: p,
+          errors: []
+        };
+      });
+    },
+    [x]
+  ), k = l.useCallback(() => {
+    m((e) => ({
+      ...e,
+      errors: []
+    }));
+  }, []), T = l.useCallback((e) => {
+    e.preventDefault(), e.stopPropagation(), m((s) => ({ ...s, isDragging: !0 }));
+  }, []), F = l.useCallback((e) => {
+    e.preventDefault(), e.stopPropagation(), !e.currentTarget.contains(e.relatedTarget) && m((s) => ({ ...s, isDragging: !1 }));
+  }, []), B = l.useCallback((e) => {
+    e.preventDefault(), e.stopPropagation();
+  }, []), P = l.useCallback(
+    (e) => {
+      e.preventDefault(), e.stopPropagation(), m((s) => ({ ...s, isDragging: !1 })), !i.current?.disabled && e.dataTransfer.files?.length > 0 && v(u ? e.dataTransfer.files : [e.dataTransfer.files[0]]);
+    },
+    [v, u]
+  ), N = l.useCallback(
+    (e) => {
+      e.target.files?.length && v(e.target.files);
+    },
+    [v]
+  ), M = l.useCallback(() => {
+    i.current?.click();
+  }, []), O = l.useCallback(
+    (e = {}) => ({
+      ...e,
+      type: "file",
+      onChange: N,
+      accept: e.accept ?? g,
+      multiple: e.multiple ?? u,
+      ref: i
+    }),
+    [g, N, u]
+  );
+  return [
+    y,
+    {
+      addFiles: v,
+      removeFile: U,
+      clearFiles: D,
+      clearErrors: k,
+      handleDragEnter: T,
+      handleDragLeave: F,
+      handleDragOver: B,
+      handleDrop: P,
+      handleFileChange: N,
+      openFileDialog: M,
+      getInputProps: O
+    }
+  ];
+}
+function _({
+  maxFiles: t = 5,
+  maxSize: c = 10 * 1024 * 1024,
+  accept: f = "*",
+  multiple: g = !0,
+  initialFiles: u,
+  onFilesChange: b,
+  onFilesAdded: x,
+  label: z = "点击或拖拽文件到此处",
+  description: y,
+  browseLabel: m = "选择文件",
+  disabled: i = !1,
+  showFileList: $ = !0,
+  className: L,
+  dropzoneClassName: R,
+  listClassName: D,
+  errorClassName: v,
+  ...U
+}) {
+  const [
+    { files: k, isDragging: T, errors: F },
+    {
+      removeFile: B,
+      clearFiles: P,
+      clearErrors: N,
+      handleDragEnter: M,
+      handleDragLeave: O,
+      handleDragOver: e,
+      handleDrop: s,
+      openFileDialog: n,
+      getInputProps: p
+    }
+  ] = Q({
+    maxFiles: t,
+    maxSize: c,
+    accept: f,
+    multiple: g,
+    initialFiles: u,
+    onFilesChange: b,
+    onFilesAdded: x
+  }), r = y ?? `支持 ${g ? `最多 ${t} 个文件` : "单个文件"}，单文件不超过 ${I(c)}。`;
+  function d(a) {
+    i || (a.key === "Enter" || a.key === " ") && (a.preventDefault(), n());
+  }
+  return /* @__PURE__ */ h("div", { "data-slot": "file-upload", className: E("space-y-3", L), ...U, children: [
+    /* @__PURE__ */ h(
+      "div",
+      {
+        role: "button",
+        tabIndex: i ? -1 : 0,
+        "aria-disabled": i,
+        "data-dragging": T || void 0,
+        "data-slot": "file-upload-dropzone",
+        onClick: i ? void 0 : n,
+        onKeyDown: d,
+        onDragEnter: i ? void 0 : M,
+        onDragLeave: i ? void 0 : O,
+        onDragOver: i ? void 0 : e,
+        onDrop: i ? void 0 : s,
+        className: E(
+          "flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed px-6 py-10 text-center transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30",
+          T ? "border-primary bg-primary/5" : "border-border hover:border-primary/40",
+          i && "cursor-not-allowed opacity-60 hover:border-border",
+          R
+        ),
+        children: [
+          /* @__PURE__ */ o("div", { className: "mb-3 flex size-10 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ o(q, { className: "size-5" }) }),
+          /* @__PURE__ */ o("div", { className: "text-sm font-medium text-foreground", children: z }),
+          r && /* @__PURE__ */ o("div", { className: "mt-1 max-w-md text-xs text-muted-foreground", children: r }),
+          /* @__PURE__ */ o(
+            j,
+            {
+              type: "button",
+              size: "sm",
+              variant: "outline",
+              className: "mt-4",
+              disabled: i,
+              onClick: (a) => {
+                a.stopPropagation(), n();
+              },
+              children: m
+            }
+          ),
+          /* @__PURE__ */ o("input", { ...p({ accept: f, multiple: g, disabled: i, className: "sr-only" }) })
+        ]
+      }
+    ),
+    F.length > 0 && /* @__PURE__ */ h(
+      "div",
+      {
+        "data-slot": "file-upload-errors",
+        className: E("rounded-lg border border-destructive/20 bg-destructive/5 p-3", v),
+        children: [
+          /* @__PURE__ */ h("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ h("div", { className: "text-xs font-medium text-destructive", children: [
+              F.length,
+              " 个错误"
+            ] }),
+            /* @__PURE__ */ o(j, { size: "sm", variant: "ghost", onClick: N, children: "清除" })
+          ] }),
+          /* @__PURE__ */ o("ul", { className: "mt-1.5 space-y-1 text-xs text-destructive", children: F.map((a) => /* @__PURE__ */ o("li", { children: a }, a)) })
+        ]
+      }
+    ),
+    $ && k.length > 0 && /* @__PURE__ */ h(
+      "div",
+      {
+        "data-slot": "file-upload-list",
+        className: E("overflow-hidden rounded-lg border border-border bg-card", D),
+        children: [
+          /* @__PURE__ */ h("div", { className: "flex items-center justify-between gap-3 border-b border-border px-3 py-2", children: [
+            /* @__PURE__ */ h("div", { className: "text-xs font-medium text-foreground", children: [
+              "已选 ",
+              k.length,
+              " 个文件"
+            ] }),
+            /* @__PURE__ */ o(j, { size: "sm", variant: "ghost", onClick: P, children: "全部清除" })
+          ] }),
+          /* @__PURE__ */ o("ul", { className: "divide-y divide-border", children: k.map((a) => /* @__PURE__ */ h("li", { className: "flex items-center gap-3 px-3 py-2 text-sm", children: [
+            /* @__PURE__ */ o("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground", children: /* @__PURE__ */ o(G, { className: "size-4" }) }),
+            /* @__PURE__ */ h("span", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ o("span", { className: "block truncate font-medium text-foreground", children: w(a.file) }),
+              /* @__PURE__ */ o("span", { className: "block text-xs text-muted-foreground", children: I(A(a.file)) })
+            ] }),
+            /* @__PURE__ */ o(
+              j,
+              {
+                type: "button",
+                size: "sm",
+                mode: "icon",
+                variant: "ghost",
+                "aria-label": `移除 ${w(a.file)}`,
+                onClick: () => B(a.id),
+                children: /* @__PURE__ */ o(Y, { className: "size-4" })
+              }
+            )
+          ] }, a.id)) })
+        ]
+      }
+    )
+  ] });
+}
+function I(t, c = 2) {
+  if (t === 0) return "0 Bytes";
+  const f = 1024, g = c < 0 ? 0 : c, u = ["Bytes", "KB", "MB", "GB", "TB"], b = Math.min(Math.floor(Math.log(t) / Math.log(f)), u.length - 1);
+  return `${Number.parseFloat((t / Math.pow(f, b)).toFixed(g))} ${u[b]}`;
+}
+export {
+  _ as FileUpload,
+  I as formatBytes,
+  Q as useFileUpload
+};

package/dist/kit/components/form/form/form.d.ts

@@ -0,0 +1,24 @@
+import { Slot } from '@radix-ui/react-slot';
+import { Label as LabelPrimitive } from 'radix-ui';
+import { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+import * as React from 'react';
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import('react-hook-form').FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import('react-hook-form').FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare function FormItem({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+declare function FormLabel({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function FormControl({ ...props }: React.ComponentProps<typeof Slot>): import("react/jsx-runtime").JSX.Element;
+declare function FormDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element | null;
+declare function FormMessage({ className, children, ...props }: React.HTMLAttributes<HTMLParagraphElement>): import("react/jsx-runtime").JSX.Element | null;
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/kit/components/form/form/form.js

@@ -0,0 +1,86 @@
+import { jsx as n } from "react/jsx-runtime";
+import * as s from "react";
+import { cn as d } from "../../../../lib/utils.js";
+import { Label as f } from "../label/label.js";
+import { Slot as u } from "@radix-ui/react-slot";
+import { FormProvider as F, Controller as x, useFormContext as I } from "react-hook-form";
+const h = F, c = s.createContext({}), $ = ({
+  ...t
+}) => /* @__PURE__ */ n(c.Provider, { value: { name: t.name }, children: /* @__PURE__ */ n(x, { ...t }) }), a = () => {
+  const t = s.useContext(c), e = s.useContext(l), { getFieldState: o, formState: r } = I(), i = o(t.name, r);
+  if (!t)
+    throw new Error("useFormField should be used within <FormField>");
+  const { id: m } = e;
+  return {
+    id: m,
+    name: t.name,
+    formItemId: `${m}-form-item`,
+    formDescriptionId: `${m}-form-item-description`,
+    formMessageId: `${m}-form-item-message`,
+    ...i
+  };
+}, l = s.createContext({});
+function S({ className: t, ...e }) {
+  const o = s.useId(), { error: r } = a();
+  return /* @__PURE__ */ n(l.Provider, { value: { id: o }, children: /* @__PURE__ */ n("div", { "data-slot": "form-item", className: d("flex flex-col gap-2.5", t), "data-invalid": !!r, ...e }) });
+}
+function D({ className: t, ...e }) {
+  const { formItemId: o } = a();
+  return /* @__PURE__ */ n(
+    f,
+    {
+      "data-slot": "form-label",
+      className: d("font-medium text-foreground", t),
+      htmlFor: o,
+      ...e
+    }
+  );
+}
+function M({ ...t }) {
+  const { error: e, formItemId: o, formDescriptionId: r, formMessageId: i } = a();
+  return /* @__PURE__ */ n(
+    u,
+    {
+      "data-slot": "form-control",
+      id: o,
+      "aria-describedby": e ? `${r} ${i}` : `${r}`,
+      "aria-invalid": !!e,
+      ...t
+    }
+  );
+}
+function N({ className: t, ...e }) {
+  const { formDescriptionId: o, error: r } = a();
+  return r ? null : /* @__PURE__ */ n(
+    "div",
+    {
+      "data-slot": "form-description",
+      id: o,
+      className: d("text-xs text-muted-foreground -mt-0.5", t),
+      ...e
+    }
+  );
+}
+function w({ className: t, children: e, ...o }) {
+  const { error: r, formMessageId: i } = a(), m = r ? String(r?.message) : e;
+  return m ? /* @__PURE__ */ n(
+    "div",
+    {
+      "data-slot": "form-message",
+      id: i,
+      className: d("-mt-0.5 text-xs font-normal text-destructive", t),
+      ...o,
+      children: m
+    }
+  ) : null;
+}
+export {
+  h as Form,
+  M as FormControl,
+  N as FormDescription,
+  $ as FormField,
+  S as FormItem,
+  D as FormLabel,
+  w as FormMessage,
+  a as useFormField
+};

package/dist/kit/components/form/input/input.d.ts

@@ -0,0 +1,22 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const inputVariants: (props?: ({
+    variant?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const inputAddonVariants: (props?: ({
+    variant?: "sm" | "md" | "lg" | null | undefined;
+    mode?: "default" | "icon" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const inputGroupVariants: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const inputWrapperVariants: (props?: ({
+    variant?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function Input({ className, type, variant, ...props }: React.ComponentProps<'input'> & VariantProps<typeof inputVariants>): import("react/jsx-runtime").JSX.Element;
+declare function InputAddon({ className, variant, mode, ...props }: React.ComponentProps<'div'> & VariantProps<typeof inputAddonVariants>): import("react/jsx-runtime").JSX.Element;
+declare function InputGroup({ className, ...props }: React.ComponentProps<'div'> & VariantProps<typeof inputGroupVariants>): import("react/jsx-runtime").JSX.Element;
+declare function InputWrapper({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof inputWrapperVariants>): import("react/jsx-runtime").JSX.Element;
+declare function NativeDateInput({ className, wrapperClassName, iconClassName, variant, ...props }: Omit<React.ComponentProps<'input'>, 'type'> & VariantProps<typeof inputVariants> & {
+    wrapperClassName?: string;
+    iconClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export { Input, InputAddon, InputGroup, InputWrapper, NativeDateInput, inputVariants, inputAddonVariants };