@mzc-fe/design-system 0.0.8 → 0.0.9-rc.0

package/dist/components/accordion/accordion.js

@@ -0,0 +1,52 @@
+import { jsx as o, jsxs as a } from "react/jsx-runtime";
+import "react";
+import * as r from "@radix-ui/react-accordion";
+import { ChevronDownIcon as s } from "lucide-react";
+import { cn as i } from "../../lib/utils.js";
+function f({ ...e }) {
+  return /* @__PURE__ */ o(r.Root, { "data-slot": "accordion", ...e });
+}
+function u({ className: e, ...t }) {
+  return /* @__PURE__ */ o(
+    r.Item,
+    {
+      "data-slot": "accordion-item",
+      className: i("border-border border-b last:border-b-0", e),
+      ...t
+    }
+  );
+}
+function p({ className: e, children: t, ...n }) {
+  return /* @__PURE__ */ o(r.Header, { className: "flex", children: /* @__PURE__ */ a(
+    r.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: i(
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        e
+      ),
+      ...n,
+      children: [
+        t,
+        /* @__PURE__ */ o(s, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+      ]
+    }
+  ) });
+}
+function b({ className: e, children: t, ...n }) {
+  return /* @__PURE__ */ o(
+    r.Content,
+    {
+      "data-slot": "accordion-content",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      ...n,
+      children: /* @__PURE__ */ o("div", { className: i("pt-0 pb-4", e), children: t })
+    }
+  );
+}
+export {
+  f as Accordion,
+  b as AccordionContent,
+  u as AccordionItem,
+  p as AccordionTrigger
+};

package/dist/components/alert/alert.js

@@ -0,0 +1,56 @@
+import { jsx as e } from "react/jsx-runtime";
+import "react";
+import { cva as i } from "class-variance-authority";
+import { cn as a } from "../../lib/utils.js";
+const l = i(
+  [
+    "relative w-full grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr]",
+    "px-4 py-3 gap-y-0.5 has-[>svg]:gap-x-3",
+    "border-border border rounded-lg",
+    "text-sm",
+    "items-start",
+    "[&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function g({ className: t, variant: r, ...s }) {
+  return /* @__PURE__ */ e("div", { "data-slot": "alert", role: "alert", className: a(l({ variant: r }), t), ...s });
+}
+function u({ className: t, ...r }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "alert-title",
+      className: a("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", t),
+      ...r
+    }
+  );
+}
+function m({ className: t, ...r }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "alert-description",
+      className: a(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        t
+      ),
+      ...r
+    }
+  );
+}
+export {
+  g as Alert,
+  m as AlertDescription,
+  u as AlertTitle
+};

package/dist/components/alert-dialog/alert-dialog.js

@@ -0,0 +1,107 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import "react";
+import * as o from "@radix-ui/react-alert-dialog";
+import { cn as l } from "../../lib/utils.js";
+import { buttonVariants as r } from "../button/button.js";
+function m({ ...t }) {
+  return /* @__PURE__ */ e(o.Root, { "data-slot": "alert-dialog", ...t });
+}
+function f({ ...t }) {
+  return /* @__PURE__ */ e(o.Trigger, { "data-slot": "alert-dialog-trigger", ...t });
+}
+function n({ ...t }) {
+  return /* @__PURE__ */ e(o.Portal, { "data-slot": "alert-dialog-portal", ...t });
+}
+function s({ className: t, ...a }) {
+  return /* @__PURE__ */ e(
+    o.Overlay,
+    {
+      "data-slot": "alert-dialog-overlay",
+      className: l(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        t
+      ),
+      ...a
+    }
+  );
+}
+function p({ className: t, ...a }) {
+  return /* @__PURE__ */ i(n, { children: [
+    /* @__PURE__ */ e(s, {}),
+    /* @__PURE__ */ e(
+      o.Content,
+      {
+        "data-slot": "alert-dialog-content",
+        className: l(
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 sm:max-w-lg",
+          "bg-background border-border rounded-lg border p-6 shadow-lg",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 duration-200",
+          t
+        ),
+        ...a
+      }
+    )
+  ] });
+}
+function x({ className: t, ...a }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "alert-dialog-header",
+      className: l("flex flex-col gap-2 text-center sm:text-left", t),
+      ...a
+    }
+  );
+}
+function A({ className: t, ...a }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      "data-slot": "alert-dialog-footer",
+      className: l("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", t),
+      ...a
+    }
+  );
+}
+function D({ className: t, ...a }) {
+  return /* @__PURE__ */ e(
+    o.Title,
+    {
+      "data-slot": "alert-dialog-title",
+      className: l("text-lg font-semibold", t),
+      ...a
+    }
+  );
+}
+function b({
+  className: t,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    o.Description,
+    {
+      "data-slot": "alert-dialog-description",
+      className: l("text-muted-foreground text-sm", t),
+      ...a
+    }
+  );
+}
+function v({ className: t, ...a }) {
+  return /* @__PURE__ */ e(o.Action, { className: l(r(), t), ...a });
+}
+function N({ className: t, ...a }) {
+  return /* @__PURE__ */ e(o.Cancel, { className: l(r({ variant: "outline" }), t), ...a });
+}
+export {
+  m as AlertDialog,
+  v as AlertDialogAction,
+  N as AlertDialogCancel,
+  p as AlertDialogContent,
+  b as AlertDialogDescription,
+  A as AlertDialogFooter,
+  x as AlertDialogHeader,
+  s as AlertDialogOverlay,
+  n as AlertDialogPortal,
+  D as AlertDialogTitle,
+  f as AlertDialogTrigger
+};

package/dist/components/aspect-ratio/aspect-ratio.js

@@ -0,0 +1,10 @@
+import { jsx as o } from "react/jsx-runtime";
+import * as i from "@radix-ui/react-aspect-ratio";
+function a({
+  ...t
+}) {
+  return /* @__PURE__ */ o(i.Root, { "data-slot": "aspect-ratio", ...t });
+}
+export {
+  a as AspectRatio
+};

package/dist/components/avatar/avatar.js

@@ -0,0 +1,54 @@
+import { jsx as e } from "react/jsx-runtime";
+import "react";
+import * as r from "@radix-ui/react-avatar";
+import { cn as l } from "../../lib/utils.js";
+function m({
+  className: a,
+  ...t
+}) {
+  return /* @__PURE__ */ e(
+    r.Root,
+    {
+      "data-slot": "avatar",
+      className: l(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        a
+      ),
+      ...t
+    }
+  );
+}
+function n({
+  className: a,
+  ...t
+}) {
+  return /* @__PURE__ */ e(
+    r.Image,
+    {
+      "data-slot": "avatar-image",
+      className: l("aspect-square size-full", a),
+      ...t
+    }
+  );
+}
+function f({
+  className: a,
+  ...t
+}) {
+  return /* @__PURE__ */ e(
+    r.Fallback,
+    {
+      "data-slot": "avatar-fallback",
+      className: l(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        a
+      ),
+      ...t
+    }
+  );
+}
+export {
+  m as Avatar,
+  f as AvatarFallback,
+  n as AvatarImage
+};

package/dist/components/badge/badge.js

@@ -0,0 +1,41 @@
+import { jsx as a } from "react/jsx-runtime";
+import "react";
+import { Slot as o } from "@radix-ui/react-slot";
+import { cva as n } from "class-variance-authority";
+import { cn as s } from "../../lib/utils.js";
+const d = n(
+  [
+    "inline-flex items-center justify-center px-2 py-0.5 w-fit shrink-0 gap-1 overflow-hidden",
+    "text-xs font-medium whitespace-nowrap",
+    "rounded-full border border-border",
+    "transition-[color,box-shadow]",
+    "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+    "dark:aria-invalid:ring-destructive/40",
+    "[&>svg]:size-3 [&>svg]:pointer-events-none"
+  ],
+  {
+    variants: {
+      variant: {
+        default: ["border-transparent bg-primary text-primary-foreground", "[a&]:hover:bg-primary/90"],
+        secondary: ["border-transparent bg-secondary text-secondary-foreground", "[a&]:hover:bg-secondary/90"],
+        destructive: [
+          "border-transparent bg-destructive text-white",
+          "[a&]:hover:bg-destructive/90",
+          "focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60"
+        ],
+        outline: ["text-foreground", "[a&]:hover:bg-accent [a&]:hover:text-accent-foreground"]
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function l({ className: r, variant: e, asChild: t = !1, ...i }) {
+  return /* @__PURE__ */ a(t ? o : "span", { "data-slot": "badge", className: s(d({ variant: e }), r), ...i });
+}
+export {
+  l as Badge,
+  d as badgeVariants
+};

package/dist/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,103 @@
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import "react";
+import { Slot as s } from "@radix-ui/react-slot";
+import { ChevronRight as i, MoreHorizontal as l } from "lucide-react";
+import { cn as t } from "../../lib/utils.js";
+function f({ ...r }) {
+  return /* @__PURE__ */ a("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...r });
+}
+function g({ className: r, ...e }) {
+  return /* @__PURE__ */ a(
+    "ol",
+    {
+      "data-slot": "breadcrumb-list",
+      className: t(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        r
+      ),
+      ...e
+    }
+  );
+}
+function x({ className: r, ...e }) {
+  return /* @__PURE__ */ a(
+    "li",
+    {
+      "data-slot": "breadcrumb-item",
+      className: t("inline-flex items-center gap-1.5", r),
+      ...e
+    }
+  );
+}
+function h({
+  asChild: r,
+  className: e,
+  ...n
+}) {
+  return /* @__PURE__ */ a(
+    r ? s : "a",
+    {
+      "data-slot": "breadcrumb-link",
+      className: t("hover:text-foreground transition-colors", e),
+      ...n
+    }
+  );
+}
+function N({ className: r, ...e }) {
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      "data-slot": "breadcrumb-page",
+      role: "link",
+      "aria-disabled": "true",
+      "aria-current": "page",
+      className: t("text-foreground font-normal", r),
+      ...e
+    }
+  );
+}
+function B({
+  children: r,
+  className: e,
+  ...n
+}) {
+  return /* @__PURE__ */ a(
+    "li",
+    {
+      "data-slot": "breadcrumb-separator",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: t("[&>svg]:size-3.5", e),
+      ...n,
+      children: r ?? /* @__PURE__ */ a(i, {})
+    }
+  );
+}
+function k({
+  className: r,
+  ...e
+}) {
+  return /* @__PURE__ */ o(
+    "span",
+    {
+      "data-slot": "breadcrumb-ellipsis",
+      role: "presentation",
+      "aria-hidden": "true",
+      className: t("flex size-9 items-center justify-center", r),
+      ...e,
+      children: [
+        /* @__PURE__ */ a(l, { className: "size-4" }),
+        /* @__PURE__ */ a("span", { className: "sr-only", children: "More" })
+      ]
+    }
+  );
+}
+export {
+  f as Breadcrumb,
+  k as BreadcrumbEllipsis,
+  x as BreadcrumbItem,
+  h as BreadcrumbLink,
+  g as BreadcrumbList,
+  N as BreadcrumbPage,
+  B as BreadcrumbSeparator
+};

package/dist/components/button/button.js

@@ -0,0 +1,72 @@
+import { jsx as o } from "react/jsx-runtime";
+import "react";
+import { Slot as a } from "@radix-ui/react-slot";
+import { cva as s } from "class-variance-authority";
+import { cn as d } from "../../lib/utils.js";
+const u = s(
+  [
+    "inline-flex items-center justify-center gap-2 shrink-0 rounded-md",
+    "whitespace-nowrap text-sm font-medium",
+    "transition-all",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
+    "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+    "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+    "dark:aria-invalid:ring-destructive/40"
+  ],
+  {
+    variants: {
+      variant: {
+        default: ["bg-primary text-primary-foreground", "hover:bg-primary/90"],
+        destructive: [
+          "bg-destructive text-white",
+          "hover:bg-destructive/90",
+          "focus-visible:ring-destructive/20",
+          "dark:focus-visible:ring-destructive/40 dark:bg-destructive/60"
+        ],
+        outline: [
+          "border border-border bg-background shadow-xs",
+          "hover:bg-accent hover:text-accent-foreground",
+          "dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
+        ],
+        secondary: ["bg-secondary text-secondary-foreground", "hover:bg-secondary/80"],
+        ghost: ["hover:bg-accent hover:text-accent-foreground", "dark:hover:bg-accent/50"],
+        link: ["text-primary underline-offset-4", "hover:underline"]
+      },
+      size: {
+        default: ["h-9 px-4 py-2", "has-[>svg]:px-3"],
+        sm: ["h-8 rounded-md gap-1.5 px-3", "has-[>svg]:px-2.5"],
+        lg: ["h-10 rounded-md px-6", "has-[>svg]:px-4"],
+        icon: ["size-9"],
+        "icon-sm": ["size-8"],
+        "icon-lg": ["size-10"]
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function f({
+  className: t,
+  variant: e = "default",
+  size: r = "default",
+  asChild: i = !1,
+  ...n
+}) {
+  return /* @__PURE__ */ o(
+    i ? a : "button",
+    {
+      "data-slot": "button",
+      "data-variant": e,
+      "data-size": r,
+      className: d(u({ variant: e, size: r, className: t })),
+      ...n
+    }
+  );
+}
+export {
+  f as Button,
+  u as buttonVariants
+};

package/dist/components/button-group/button-group.js

@@ -0,0 +1,75 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Slot as a } from "@radix-ui/react-slot";
+import { cva as i } from "class-variance-authority";
+import { cn as n } from "../../lib/utils.js";
+import { Separator as s } from "../separator/separator.js";
+const l = i(
+  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
+  {
+    variants: {
+      orientation: {
+        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none"
+      }
+    },
+    defaultVariants: {
+      orientation: "horizontal"
+    }
+  }
+);
+function h({
+  className: o,
+  orientation: t,
+  ...r
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      role: "group",
+      "data-slot": "button-group",
+      "data-orientation": t,
+      className: n(l({ orientation: t }), o),
+      ...r
+    }
+  );
+}
+function g({
+  className: o,
+  asChild: t = !1,
+  ...r
+}) {
+  return /* @__PURE__ */ e(
+    t ? a : "div",
+    {
+      className: n(
+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        o
+      ),
+      ...r
+    }
+  );
+}
+function v({
+  className: o,
+  orientation: t = "vertical",
+  ...r
+}) {
+  return /* @__PURE__ */ e(
+    s,
+    {
+      "data-slot": "button-group-separator",
+      orientation: t,
+      className: n(
+        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
+        o
+      ),
+      ...r
+    }
+  );
+}
+export {
+  h as ButtonGroup,
+  v as ButtonGroupSeparator,
+  g as ButtonGroupText,
+  l as buttonGroupVariants
+};