@sableui/react 0.6.2 → 0.7.1

package/dist/components/fieldset/fieldset.js

@@ -0,0 +1,80 @@
+// src/components/fieldset/fieldset.tsx
+import { Fieldset as Base } from "@base-ui/react/fieldset";
+import { cn } from "../../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+function Fieldset({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Root,
+    {
+      className: cn(
+        // min-w-0: a native <fieldset> defaults to min-inline-size: min-content
+        // and would refuse to shrink below its widest control. overflow-hidden
+        // keeps the footer's wash inside the rounded corners.
+        // Publishes its surface like Card, so wells, stepper discs and
+        // interactive rows inside derive from the card, not the page.
+        "min-w-0 overflow-hidden rounded-lg border border-border bg-card text-card-foreground shadow-sm [--sable-surface-bg:var(--card)]",
+        // No opacity of its own: a disabled fieldset disables every control
+        // in it, and each already dims to 50% — dimming here as well stacked
+        // to ~30%, against 50% everywhere else in the system.
+        className
+      ),
+      ...props
+    }
+  );
+}
+Fieldset.displayName = "Fieldset";
+function FieldsetLegend({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Legend,
+    {
+      className: cn("px-6 pt-6 text-title-lg text-foreground", className),
+      ...props
+    }
+  );
+}
+FieldsetLegend.displayName = "FieldsetLegend";
+function FieldsetDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      "data-slot": "fieldset-description",
+      className: cn("px-6 text-body-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+FieldsetDescription.displayName = "FieldsetDescription";
+function FieldsetContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-4 px-6 py-4 last:pb-6", className), ...props });
+}
+FieldsetContent.displayName = "FieldsetContent";
+function FieldsetFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex justify-end gap-2 border-t border-border bg-muted/30 px-6 py-4",
+        "[[data-slot=fieldset-description]+&]:mt-6",
+        className
+      ),
+      ...props
+    }
+  );
+}
+FieldsetFooter.displayName = "FieldsetFooter";
+export {
+  Fieldset,
+  FieldsetContent,
+  FieldsetDescription,
+  FieldsetFooter,
+  FieldsetLegend
+};

package/dist/components/fieldset/fieldset.meta.js

@@ -0,0 +1,160 @@
+// src/components/fieldset/fieldset.meta.ts
+var fieldsetMeta = {
+  name: "Fieldset",
+  summary: "Form section panel (Card-like bordered surface) over Base UI Fieldset, with Legend/Description/Content/Footer parts.",
+  status: "stable",
+  keywords: [
+    "fieldset",
+    "form group",
+    "legend",
+    "fields"
+  ],
+  usage: {
+    description: "Use Fieldset to group related controls under a shared label or explanation.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use it for grouped form sections such as contact details, preferences, or permissions."
+      },
+      {
+        guidance: "do",
+        description: "Keep the legend meaningful so assistive tech and agents understand the group purpose."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use Fieldset as a generic spacing wrapper outside forms."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use a Legend that is really a heading. A legend names the group's question for assistive technology; using it as a section title puts a question mark where the outline should be."
+      }
+    ],
+    anatomy: [
+      {
+        name: "Fieldset",
+        required: true,
+        description: "The bordered group: a native <fieldset> whose disabled state reaches every control inside it."
+      },
+      {
+        name: "Legend",
+        required: true,
+        description: "FieldsetLegend: the question the group's controls answer, announced before each of them."
+      },
+      {
+        name: "Description",
+        required: false,
+        description: "FieldsetDescription: muted copy under the legend."
+      },
+      {
+        name: "Content",
+        required: true,
+        description: "FieldsetContent: the stacked body, one Field per control."
+      },
+      {
+        name: "Footer",
+        required: false,
+        description: "FieldsetFooter: the group's actions on a muted wash."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "Form",
+      "Label"
+    ]
+  },
+  props: [
+    {
+      name: "disabled",
+      type: "boolean",
+      description: "Disables the whole group. Renders <fieldset disabled> (native control disabling) and surfaces data-[disabled] for dimming."
+    },
+    {
+      name: "render",
+      type: "ReactElement | function",
+      description: "Base UI render prop to replace or compose the underlying element."
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "Merged onto each part via cn() for one-off overrides."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "FieldsetLegend",
+      type: "ComponentPropsWithRef<typeof Fieldset.Legend>",
+      description: "The group's name \u2014 the question its controls answer. Base UI renders it as a <div> wired to the <fieldset> through aria-labelledby, so a screen reader announces it before each control in the group. This is the whole reason to reach for Fieldset."
+    },
+    {
+      name: "FieldsetDescription",
+      type: 'ComponentPropsWithRef<"p">',
+      description: "Muted supporting copy under the legend."
+    },
+    {
+      name: "FieldsetContent",
+      type: 'ComponentPropsWithRef<"div">',
+      description: "The stacked body holding one Field per control."
+    },
+    {
+      name: "FieldsetFooter",
+      type: 'ComponentPropsWithRef<"div">',
+      description: "Optional right-aligned action bar on a muted wash."
+    }
+  ],
+  tokensUsed: [
+    "card",
+    "card-foreground",
+    "border",
+    "foreground",
+    "muted-foreground",
+    "muted"
+  ],
+  a11y: [
+    "Base.Root renders a native <fieldset>; Base.Legend renders an auto-associated label, so screen readers announce the group name.",
+    "disabled propagates as native <fieldset disabled>, disabling all contained controls.",
+    "Wrap each control inside FieldsetContent in a Field, which wires its own label, description and error to the control."
+  ],
+  examples: [
+    {
+      label: "A grouped question",
+      code: `<Fieldset>
+	<FieldsetLegend>Notify me about</FieldsetLegend>
+	<FieldsetDescription>Pick what reaches your inbox.</FieldsetDescription>
+	<FieldsetContent>
+		<Field label="Mentions" orientation="horizontal"><Checkbox defaultChecked /></Field>
+		<Field label="Replies" orientation="horizontal"><Checkbox /></Field>
+		<Field label="Direct messages" orientation="horizontal"><Checkbox /></Field>
+	</FieldsetContent>
+	<FieldsetFooter>
+		<Button>Save preferences</Button>
+	</FieldsetFooter>
+</Fieldset>`
+    },
+    {
+      label: "Why a fieldset, and when it is wrong",
+      code: `// Fieldset groups inputs that are ONE question with multiple parts, and gives
+// the group a single accessible name \u2014 which is the part you cannot do with a
+// div and a heading.
+
+<Fieldset>
+  <FieldsetLegend>Digest frequency</FieldsetLegend>
+  <FieldsetContent>
+    <RadioGroup defaultValue="weekly">
+      <Field label="Daily" orientation="horizontal"><Radio value="daily" /></Field>
+      <Field label="Weekly" orientation="horizontal"><Radio value="weekly" /></Field>
+    </RadioGroup>
+  </FieldsetContent>
+</Fieldset>
+
+// \u2713 Required for radio groups: without a fieldset the options have no shared
+//   name, so a screen reader announces "Weekly, radio" with no question.
+// \u2717 Not for visual grouping of unrelated fields. Use PanelSection on a panel or
+//   a Card section on a page; a legend that is really a heading lies to
+//   assistive technology about the form's structure.`
+    }
+  ]
+};
+export {
+  fieldsetMeta
+};

package/dist/components/fieldset/index.js

@@ -0,0 +1,17 @@
+// src/components/fieldset/index.ts
+import {
+  Fieldset,
+  FieldsetLegend,
+  FieldsetDescription,
+  FieldsetContent,
+  FieldsetFooter
+} from "./fieldset.js";
+import { fieldsetMeta } from "./fieldset.meta.js";
+export {
+  Fieldset,
+  FieldsetContent,
+  FieldsetDescription,
+  FieldsetFooter,
+  FieldsetLegend,
+  fieldsetMeta
+};

package/dist/components/file-dropzone/file-dropzone.js

@@ -0,0 +1,193 @@
+// src/components/file-dropzone/file-dropzone.tsx
+import {
+  useId,
+  useRef,
+  useState
+} from "react";
+import { Icon } from "../../icon/index.js";
+import { cn } from "../../lib/cn.js";
+import { useTypeTier } from "../../lib/density.js";
+import { fileDropzoneVariants } from "./file-dropzone.variants.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function matchesAccept(file, accept) {
+  if (!accept) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return accept.split(",").map((t) => t.trim().toLowerCase()).filter(Boolean).some((rule) => {
+    if (rule.startsWith(".")) return name.endsWith(rule);
+    if (rule.endsWith("/*")) return type.startsWith(rule.slice(0, -1));
+    return type === rule;
+  });
+}
+function formatFileSize(bytes) {
+  const units = ["B", "KB", "MB", "GB"];
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit++;
+  }
+  const rounded = value >= 10 || unit === 0 ? Math.round(value) : Math.round(value * 10) / 10;
+  return `${rounded} ${units[unit]}`;
+}
+function hasFiles(event) {
+  return Array.from(event.dataTransfer?.types ?? []).includes("Files");
+}
+function FileDropzone({
+  accept,
+  maxSize,
+  multiple = false,
+  maxFiles,
+  disabled = false,
+  required,
+  onFilesAccepted,
+  onFilesRejected,
+  label,
+  description,
+  acceptLabel,
+  formatError,
+  icon = "arrow-up",
+  size = "md",
+  id,
+  className,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  ...props
+}) {
+  const generatedId = useId();
+  const buttonId = id ?? generatedId;
+  const errId = `${buttonId}-errors`;
+  const inputRef = useRef(null);
+  const depth = useRef(0);
+  const [dragging, setDragging] = useState(false);
+  const [errors, setErrors] = useState([]);
+  const tier = useTypeTier();
+  const messageFor = (r) => {
+    if (formatError) return formatError(r);
+    const name = `\u201C${r.file.name}\u201D`;
+    switch (r.code) {
+      case "file-invalid-type":
+        return acceptLabel ? `${name} isn't a supported type. Use ${acceptLabel} instead.` : `${name} isn't a supported type. Choose a different file.`;
+      case "file-too-large":
+        return `${name} is larger than ${formatFileSize(maxSize ?? 0)}. Choose a smaller file.`;
+      case "too-many-files":
+        return multiple ? `${name} wasn't added. Add up to ${maxFiles} files at a time.` : `${name} wasn't added. Add one file at a time.`;
+    }
+  };
+  const take = (files) => {
+    if (disabled || files.length === 0) return;
+    const limit = multiple ? maxFiles ?? Number.POSITIVE_INFINITY : 1;
+    const accepted = [];
+    const rejected = [];
+    for (const file of files) {
+      const code = !matchesAccept(file, accept) ? "file-invalid-type" : maxSize != null && file.size > maxSize ? "file-too-large" : accepted.length >= limit ? "too-many-files" : null;
+      if (code) rejected.push({ file, code, message: messageFor({ file, code }) });
+      else accepted.push(file);
+    }
+    setErrors(rejected.map((r) => r.message));
+    if (accepted.length) onFilesAccepted?.(accepted);
+    if (rejected.length) onFilesRejected?.(rejected);
+  };
+  const endDrag = () => {
+    depth.current = 0;
+    setDragging(false);
+  };
+  const invalid = errors.length > 0 || ariaInvalid === true || ariaInvalid === "true";
+  const describedBy = [ariaDescribedBy, errors.length ? errId : null].filter(Boolean).join(" ") || void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex w-full flex-col", className),
+      onDragEnter: (e) => {
+        if (!hasFiles(e)) return;
+        e.preventDefault();
+        depth.current++;
+        if (!disabled) setDragging(true);
+      },
+      onDragOver: (e) => {
+        if (!hasFiles(e)) return;
+        e.preventDefault();
+        e.dataTransfer.dropEffect = disabled ? "none" : "copy";
+      },
+      onDragLeave: (e) => {
+        if (!hasFiles(e)) return;
+        depth.current = Math.max(0, depth.current - 1);
+        if (depth.current === 0) setDragging(false);
+      },
+      onDrop: (e) => {
+        e.preventDefault();
+        endDrag();
+        take(Array.from(e.dataTransfer?.files ?? []));
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            id: buttonId,
+            disabled,
+            "data-dragging": dragging ? "" : void 0,
+            "data-invalid": invalid ? "" : void 0,
+            "aria-invalid": invalid || void 0,
+            "aria-describedby": describedBy,
+            onClick: () => inputRef.current?.click(),
+            className: fileDropzoneVariants({ size }),
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: cn(
+                    "flex size-(--control-md) shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground motion-interactive",
+                    "group-data-[dragging]:-translate-y-0.5 group-data-[dragging]:bg-primary group-data-[dragging]:text-primary-foreground"
+                  ),
+                  children: /* @__PURE__ */ jsx(Icon, { name: icon, className: "text-lg" })
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [
+                /* @__PURE__ */ jsx("span", { className: tier.control, children: label ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  multiple ? "Drop files here or " : "Drop a file here or ",
+                  /* @__PURE__ */ jsx("span", { className: "text-primary underline underline-offset-2", children: "browse" })
+                ] }) }),
+                description ? /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", tier.supporting), children: description }) : null
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept,
+            multiple,
+            disabled,
+            required,
+            tabIndex: -1,
+            "aria-hidden": "true",
+            className: "sr-only",
+            onChange: (e) => {
+              take(Array.from(e.currentTarget.files ?? []));
+              e.currentTarget.value = "";
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: errId,
+            role: "status",
+            className: cn("text-destructive not-empty:pt-2", tier.supporting),
+            children: errors.length === 1 ? /* @__PURE__ */ jsx("p", { children: errors[0] }) : errors.length > 1 ? /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-0.5", children: errors.map((message, i) => /* @__PURE__ */ jsx("li", { children: message }, `${i}-${message}`)) }) : null
+          }
+        )
+      ]
+    }
+  );
+}
+FileDropzone.displayName = "FileDropzone";
+export {
+  FileDropzone,
+  formatFileSize
+};

package/dist/components/file-dropzone/file-dropzone.meta.js

@@ -0,0 +1,210 @@
+// src/components/file-dropzone/file-dropzone.meta.ts
+var fileDropzoneMeta = {
+  name: "FileDropzone",
+  summary: "Drag-and-drop target and file picker in one keyboard-operable button. Checks accept, maxSize and maxFiles on every selection, announces each rejection with how to fix it, and hands accepted files to you to list as Attachments.",
+  status: "stable",
+  keywords: [
+    "file upload",
+    "dropzone",
+    "drag and drop",
+    "file picker",
+    "upload",
+    "attach file",
+    "file input",
+    "import"
+  ],
+  usage: {
+    description: "Use FileDropzone where adding files is the main job of a section \u2014 an upload step, an import screen, a document request. It gives the drag gesture a visible target and the same action a button for everyone who does not drag. It holds no list: render accepted files as Attachments beneath it, where progress, retry and remove belong.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: 'State the constraints in `description` ("PNG or PDF, up to 10 MB") and give `acceptLabel` the same words, so a rejection repeats the rule the user already read.'
+      },
+      {
+        guidance: "do",
+        description: 'Pair it with a list of Attachment rows that you own. Once files are added, switch to `size="sm"` so the target stays available without pushing the list below the fold.'
+      },
+      {
+        guidance: "do",
+        description: 'Cap the total by passing `maxFiles={limit - files.length}`; the dropzone only sees one selection at a time. When none remain, set `disabled` and say why in `description` ("Remove one to add another").'
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it for an incidental attach action inside a composer or a toolbar. A paperclip Button that opens the picker is the right weight there; ChatComposer already has one."
+      },
+      {
+        guidance: "dont",
+        description: "Do not rely on `accept` alone to protect the server. The dropzone's checks are for the user's benefit; validate type and size again where the file is received."
+      },
+      {
+        guidance: "dont",
+        description: 'Do not silently drop rejected files. The zone announces each one, but if you also discard files later (a server-side limit), say so on the Attachment with `status="error"` and a fix.'
+      }
+    ],
+    anatomy: [
+      {
+        name: "Zone",
+        required: true,
+        description: "A full-width button with a dashed border. Click, Enter or Space opens the picker; it is also the drop target."
+      },
+      {
+        name: "Icon",
+        required: false,
+        description: "A decorative mark that lifts while a file is dragged over the zone."
+      },
+      {
+        name: "Label and description",
+        required: true,
+        description: "The call to action and the constraints. Together they form the button's accessible name."
+      },
+      {
+        name: "Status",
+        required: true,
+        description: "A role=status region, present from the first render, that lists each rejected file and how to fix it."
+      }
+    ]
+  },
+  related: {
+    components: ["Attachment", "Input", "Button", "Progress"]
+  },
+  props: [
+    {
+      name: "accept",
+      type: "string",
+      description: "Native accept syntax \u2014 `.pdf`, `application/pdf`, `image/*`, comma-separated. Enforced on drop and on pick."
+    },
+    {
+      name: "maxSize",
+      type: "number",
+      description: "Largest accepted file, in bytes."
+    },
+    {
+      name: "multiple",
+      type: "boolean",
+      default: "false",
+      description: "Accept more than one file per selection."
+    },
+    {
+      name: "maxFiles",
+      type: "number",
+      description: "Most files accepted from one selection when `multiple`. Pass the remaining capacity to cap a total."
+    },
+    {
+      name: "onFilesAccepted",
+      type: "(files: File[]) => void",
+      description: "Files that passed every check, in selection order."
+    },
+    {
+      name: "onFilesRejected",
+      type: "(rejections: FileRejection[]) => void",
+      description: "Files that failed, each with `code` (file-invalid-type, file-too-large, too-many-files) and the announced `message`."
+    },
+    {
+      name: "label",
+      type: "ReactNode",
+      default: '"Drop a file here or browse"',
+      description: "The visible call to action. Pluralised automatically when `multiple`."
+    },
+    {
+      name: "description",
+      type: "ReactNode",
+      description: "The constraints in words, shown under the label."
+    },
+    {
+      name: "acceptLabel",
+      type: "string",
+      description: 'How the accepted types complete "Use \u2026 instead" in an error ("PNG or PDF", "an image or PDF"). Without it a type error can only say "Choose a different file".'
+    },
+    {
+      name: "formatError",
+      type: "(rejection) => string",
+      description: "Replace the rejection copy, e.g. to localize it."
+    },
+    {
+      name: "icon",
+      type: "string",
+      default: '"arrow-up"',
+      description: "Semantic icon name."
+    },
+    {
+      name: "size",
+      type: '"md" | "sm"',
+      default: '"md"',
+      description: "`md` is the empty-section target; `sm` is a single-row strip above an existing list."
+    },
+    {
+      name: "disabled / required / id / aria-invalid",
+      type: "\u2014",
+      description: "Standard form-control props. `id` lands on the button, so `<Field>` labels it; `aria-invalid` draws the destructive border."
+    }
+  ],
+  variants: {
+    size: ["md", "sm"]
+  },
+  tokensUsed: [
+    "card",
+    "foreground",
+    "muted",
+    "muted-foreground",
+    "border-strong",
+    "primary",
+    "primary-foreground",
+    "accent",
+    "accent-foreground",
+    "ring",
+    "destructive"
+  ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Zone",
+      why: "The zone is the section's content, present from the start. An entrance would only delay the drop target someone is already dragging toward."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Zone",
+      why: 'Hover strengthens the border to primary, which confirms the whole dashed area \u2014 not just the word "browse" \u2014 is the click target.'
+    },
+    {
+      slot: "transition",
+      recipe: "motion-interactive",
+      part: "Icon",
+      why: "When a file crosses into the zone the icon fills and lifts and the surface tints. That is the only signal that releasing here will work; without it users drop on the page and the browser opens the file instead."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Zone",
+      why: "The zone hands files off immediately and never uploads. Transfer progress belongs on each Attachment, where it can be per-file and retryable."
+    }
+  ],
+  a11y: [
+    "The zone is a native button: Enter or Space opens the system picker, so dragging is never the only way in.",
+    "Rejections render into a role=status region that exists from the first render, and the button's aria-describedby points at it while it has content, so the reason is still read when focus returns.",
+    'Every error names the file and says how to fix it ("Choose a smaller file"), rather than only what failed.',
+    "The underlying file input is visually hidden and removed from the tab order; the button is the single focus stop."
+  ],
+  examples: [
+    {
+      label: "Images and PDFs",
+      code: '<FileDropzone accept="image/*,.pdf" acceptLabel="an image or PDF" maxSize={10 * 1024 * 1024} multiple description="Images or PDFs, up to 10 MB each" onFilesAccepted={(files) => console.log(files)} />'
+    },
+    {
+      label: "With an Attachment list",
+      code: `<div className="flex flex-col gap-3">
+	<FileDropzone size="sm" multiple description="Up to 5 files" onFilesAccepted={(files) => console.log(files)} />
+	<Attachment name="contract.pdf" meta="2.4 MB \xB7 PDF" />
+	<Attachment name="site-photo.jpg" meta="Uploading\u2026" status="uploading" progress={42} />
+</div>`
+    },
+    {
+      label: "In a field",
+      code: '<Field label="Proof of address" description="A bill or statement from the last 3 months."><FileDropzone accept=".pdf" acceptLabel="a PDF" maxSize={5 * 1024 * 1024} description="PDF, up to 5 MB" /></Field>'
+    }
+  ]
+};
+export {
+  fileDropzoneMeta
+};

package/dist/components/file-dropzone/file-dropzone.variants.js

@@ -0,0 +1,26 @@
+// src/components/file-dropzone/file-dropzone.variants.ts
+import { cva } from "class-variance-authority";
+var fileDropzoneVariants = cva(
+  [
+    "group flex w-full flex-col items-center justify-center gap-2 rounded-md border border-dashed border-border-strong bg-card text-center text-foreground motion-interactive",
+    "hover:border-primary hover:bg-muted",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+    "data-[dragging]:border-primary data-[dragging]:bg-accent data-[dragging]:text-accent-foreground",
+    "data-[invalid]:border-destructive",
+    "disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:border-border-strong disabled:hover:bg-card"
+  ],
+  {
+    variants: {
+      size: {
+        md: "px-6 py-8",
+        sm: "flex-row justify-start gap-3 px-4 py-3 text-start"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+export {
+  fileDropzoneVariants
+};