@etus/ui 0.4.0-beta.2 → 0.4.0-beta.3

package/dist/chunk-K45MMHLA.js

@@ -0,0 +1,258 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { Check } from 'lucide-react';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var cardVariants = cva(
+  [
+    "group/card relative bg-[color:var(--card-root-background)] text-[color:var(--card-root-foreground)] flex flex-col gap-[var(--card-root-gap)] rounded-[var(--card-root-radius)] py-[var(--card-root-padding-y)] overflow-hidden"
+  ],
+  {
+    variants: {
+      /**
+       * Visual variant of the card
+       * - default: Card with border and subtle shadow
+       * - elevated: Card with pronounced shadow for emphasis
+       * - outlined: Card with border only, no shadow
+       * - ghost: Card without border or shadow, transparent background
+       * - selectable: Card optimized for multi-select grids (checkbox + pin overlays on <Card.Media>)
+       */
+      variant: {
+        default: "border-[length:var(--card-root-border-width)] border-[color:var(--border)] shadow-[var(--card-root-shadow-sm)]",
+        elevated: "border-[length:var(--card-root-border-width)] border-[color:var(--border)] shadow-[var(--card-root-shadow-lg)] hover:shadow-[var(--card-root-shadow-xl)] transition-shadow",
+        outlined: "border-[length:calc(var(--card-root-border-width)*2)] border-[color:var(--border)] shadow-none",
+        ghost: "border-none shadow-none bg-transparent",
+        selectable: [
+          "border border-[color:var(--border)] cursor-pointer",
+          "transition-[border-color,box-shadow,transform]",
+          "hover:border-[color:var(--neutral-300)] hover:shadow-md hover:-translate-y-px",
+          "dark:hover:border-[color:var(--neutral-600)]",
+          "motion-reduce:transform-none motion-reduce:transition-none",
+          "data-[active=true]:border-[color:var(--primary)] data-[active=true]:ring-[3px] data-[active=true]:ring-[color:var(--primary)]/20",
+          "data-[selected=true]:border-[color:var(--primary)] data-[selected=true]:ring-2 data-[selected=true]:ring-[color:var(--primary)]/20"
+        ].join(" ")
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var cardMediaVariants = cva(
+  [
+    "relative -mx-px -mt-px overflow-hidden border-b border-[color:var(--border)]",
+    "[&_img]:size-full [&_img]:object-cover"
+  ],
+  {
+    variants: {
+      aspect: {
+        square: "aspect-square",
+        video: "aspect-video",
+        portrait: "aspect-[3/4]",
+        wide: "aspect-[4/3]",
+        auto: ""
+      }
+    },
+    defaultVariants: {
+      aspect: "auto"
+    }
+  }
+);
+var cardHeaderVariants = cva([
+  "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-[var(--card-header-gap)] px-[var(--card-header-padding-x)]",
+  "has-data-[slot=card-action]:grid-cols-[1fr_auto]",
+  "[.border-b]:pb-[var(--card-header-padding-bottom)]"
+]);
+var cardTitleVariants = cva([
+  "leading-tight [font-weight:var(--card-title-weight)]"
+]);
+var cardDescriptionVariants = cva([
+  "text-[color:var(--card-description-color)] text-[length:var(--card-description-text-size)]"
+]);
+var cardActionVariants = cva([
+  "col-start-2 row-span-2 row-start-1 self-start justify-self-end"
+]);
+var cardContentVariants = cva([
+  "px-[var(--card-content-padding-x)]"
+]);
+var cardFooterVariants = cva([
+  "flex items-center px-[var(--card-footer-padding-x)]",
+  "[.border-t]:pt-[var(--card-footer-padding-top)]"
+]);
+function Card({
+  className,
+  variant,
+  selected = false,
+  pinned = false,
+  onToggleSelect,
+  onTogglePin,
+  selectableProps,
+  "data-id": dataId,
+  children,
+  ...props
+}) {
+  const isSelectable = variant === "selectable";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(cardVariants({ variant }), className),
+      "data-active": void 0,
+      "data-id": dataId,
+      "data-pinned": isSelectable && pinned ? "true" : void 0,
+      "data-selected": isSelectable && selected ? "true" : void 0,
+      "data-slot": "card",
+      "data-variant": variant ?? "default",
+      ...props,
+      children: [
+        children,
+        isSelectable && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: cn(
+                "absolute top-2 left-2 z-[2] grid place-items-center w-[18px] h-[18px] rounded-sm cursor-pointer transition-[opacity,background-color,border-color]",
+                "border bg-white/[0.92] border-neutral-300",
+                selected ? "opacity-100 bg-[color:var(--brand-primary-500,var(--primary))] border-[color:var(--brand-primary-500,var(--primary))] text-[color:var(--brand-primary-900,var(--primary-foreground))]" : "opacity-0 text-transparent group-hover/card:opacity-100"
+              ),
+              "aria-label": selectableProps?.checkboxLabel ?? "Selecionar",
+              "aria-pressed": selected,
+              "data-checked": selected || void 0,
+              "data-slot": "card-select-checkbox",
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                const next = !selected;
+                onToggleSelect?.(
+                  next,
+                  {
+                    ...dataId ? { id: dataId } : {},
+                    next,
+                    timestamp: Date.now()
+                  },
+                  e
+                );
+              },
+              children: /* @__PURE__ */ jsx(Check, { size: 11, strokeWidth: 3 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: cn(
+                "absolute top-1.5 right-1.5 z-[2] grid place-items-center w-[22px] h-[22px] rounded-full cursor-pointer transition-opacity",
+                pinned ? "opacity-100 bg-white/95 text-[#eab308] dark:bg-black/55" : "opacity-0 bg-white/[0.82] text-neutral-500 dark:bg-black/45 dark:text-neutral-300 group-hover/card:opacity-100"
+              ),
+              "aria-label": selectableProps?.pinLabel ?? "Fixar",
+              "aria-pressed": pinned,
+              "data-pinned": pinned || void 0,
+              "data-slot": "card-pin",
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                const next = !pinned;
+                onTogglePin?.(
+                  next,
+                  {
+                    ...dataId ? { id: dataId } : {},
+                    next,
+                    timestamp: Date.now()
+                  },
+                  e
+                );
+              },
+              children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  fill: pinned ? "currentColor" : "none",
+                  height: "11",
+                  stroke: "currentColor",
+                  strokeLinejoin: "round",
+                  strokeWidth: "1.6",
+                  viewBox: "0 0 16 16",
+                  width: "11",
+                  children: /* @__PURE__ */ jsx("path", { d: "m8 1.5 1.95 4.18 4.55.5-3.4 3.13.94 4.5L8 11.5l-4.04 2.31.94-4.5L1.5 6.18l4.55-.5z" })
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function CardMedia({ className, aspect, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(cardMediaVariants({ aspect }), className),
+      "data-aspect": aspect,
+      "data-slot": "card-media",
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(cardHeaderVariants(), className),
+      "data-slot": "card-header",
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(cardTitleVariants(), className),
+      "data-slot": "card-title",
+      ...props
+    }
+  );
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(cardDescriptionVariants(), className),
+      "data-slot": "card-description",
+      ...props
+    }
+  );
+}
+function CardAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(cardActionVariants(), className),
+      "data-slot": "card-action",
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(cardContentVariants(), className),
+      "data-slot": "card-content",
+      ...props
+    }
+  );
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(cardFooterVariants(), className),
+      "data-slot": "card-footer",
+      ...props
+    }
+  );
+}
+
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, CardTitle, cardActionVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardMediaVariants, cardTitleVariants, cardVariants };
+//# sourceMappingURL=chunk-K45MMHLA.js.map
+//# sourceMappingURL=chunk-K45MMHLA.js.map

package/dist/chunk-K45MMHLA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Card/Card.variants.ts","../src/components/layout/Card/Card.tsx"],"names":[],"mappings":"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","file":"chunk-K45MMHLA.js","sourcesContent":["// Card/Card.variants.ts\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Card variant styles\n * Container component for grouping related content\n */\nexport const cardVariants = cva(\n  [\n    \"group/card relative bg-[color:var(--card-root-background)] text-[color:var(--card-root-foreground)] flex flex-col gap-[var(--card-root-gap)] rounded-[var(--card-root-radius)] py-[var(--card-root-padding-y)] overflow-hidden\",\n  ],\n  {\n    variants: {\n      /**\n       * Visual variant of the card\n       * - default: Card with border and subtle shadow\n       * - elevated: Card with pronounced shadow for emphasis\n       * - outlined: Card with border only, no shadow\n       * - ghost: Card without border or shadow, transparent background\n       * - selectable: Card optimized for multi-select grids (checkbox + pin overlays on <Card.Media>)\n       */\n      variant: {\n        default: \"border-[length:var(--card-root-border-width)] border-[color:var(--border)] shadow-[var(--card-root-shadow-sm)]\",\n        elevated: \"border-[length:var(--card-root-border-width)] border-[color:var(--border)] shadow-[var(--card-root-shadow-lg)] hover:shadow-[var(--card-root-shadow-xl)] transition-shadow\",\n        outlined: \"border-[length:calc(var(--card-root-border-width)*2)] border-[color:var(--border)] shadow-none\",\n        ghost: \"border-none shadow-none bg-transparent\",\n        selectable: [\n          \"border border-[color:var(--border)] cursor-pointer\",\n          \"transition-[border-color,box-shadow,transform]\",\n          \"hover:border-[color:var(--neutral-300)] hover:shadow-md hover:-translate-y-px\",\n          \"dark:hover:border-[color:var(--neutral-600)]\",\n          \"motion-reduce:transform-none motion-reduce:transition-none\",\n          \"data-[active=true]:border-[color:var(--primary)] data-[active=true]:ring-[3px] data-[active=true]:ring-[color:var(--primary)]/20\",\n          \"data-[selected=true]:border-[color:var(--primary)] data-[selected=true]:ring-2 data-[selected=true]:ring-[color:var(--primary)]/20\",\n        ].join(\" \"),\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\n/**\n * CardMedia variant styles\n * Full-bleed media slot at the top of the card. Aspect ratio controls the shape.\n * Bleeds to the card edges (overflow:hidden on Card root + zero padding here).\n */\nexport const cardMediaVariants = cva(\n  [\n    \"relative -mx-px -mt-px overflow-hidden border-b border-[color:var(--border)]\",\n    \"[&_img]:size-full [&_img]:object-cover\",\n  ],\n  {\n    variants: {\n      aspect: {\n        square: \"aspect-square\",\n        video: \"aspect-video\",\n        portrait: \"aspect-[3/4]\",\n        wide: \"aspect-[4/3]\",\n        auto: \"\",\n      },\n    },\n    defaultVariants: {\n      aspect: \"auto\",\n    },\n  },\n)\n\n/**\n * CardHeader variant styles\n * Header section with grid layout for title and actions\n */\nexport const cardHeaderVariants = cva([\n  \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-[var(--card-header-gap)] px-[var(--card-header-padding-x)]\",\n  \"has-data-[slot=card-action]:grid-cols-[1fr_auto]\",\n  \"[.border-b]:pb-[var(--card-header-padding-bottom)]\",\n])\n\n/**\n * CardTitle variant styles\n * Title text styling\n */\nexport const cardTitleVariants = cva([\n  \"leading-tight [font-weight:var(--card-title-weight)]\",\n])\n\n/**\n * CardDescription variant styles\n * Description/subtitle text styling\n */\nexport const cardDescriptionVariants = cva([\n  \"text-[color:var(--card-description-color)] text-[length:var(--card-description-text-size)]\",\n])\n\n/**\n * CardAction variant styles\n * Action area positioned in the header grid\n */\nexport const cardActionVariants = cva([\n  \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n])\n\n/**\n * CardContent variant styles\n * Main content area\n */\nexport const cardContentVariants = cva([\n  \"px-[var(--card-content-padding-x)]\",\n])\n\n/**\n * CardFooter variant styles\n * Footer section for actions or additional info\n */\nexport const cardFooterVariants = cva([\n  \"flex items-center px-[var(--card-footer-padding-x)]\",\n  \"[.border-t]:pt-[var(--card-footer-padding-top)]\",\n])\n\nexport type CardVariantProps = VariantProps<typeof cardVariants>\n","import type {\n  CardActionProps,\n  CardContentProps,\n  CardDescriptionProps,\n  CardFooterProps,\n  CardHeaderProps,\n  CardMediaProps,\n  CardProps,\n  CardSelectablePayload,\n  CardTitleProps,\n} from \"./Card.types\"\n\nimport { Check } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  cardActionVariants,\n  cardContentVariants,\n  cardDescriptionVariants,\n  cardFooterVariants,\n  cardHeaderVariants,\n  cardMediaVariants,\n  cardTitleVariants,\n  cardVariants,\n} from \"./Card.variants\"\n\nfunction Card({\n  className,\n  variant,\n  selected = false,\n  pinned = false,\n  onToggleSelect,\n  onTogglePin,\n  selectableProps,\n  \"data-id\": dataId,\n  children,\n  ...props\n}: CardProps & { \"data-id\"?: string }) {\n  const isSelectable = variant === \"selectable\"\n\n  return (\n    <div\n      className={cn(cardVariants({ variant }), className)}\n      data-active={undefined}\n      data-id={dataId}\n      data-pinned={isSelectable && pinned ? \"true\" : undefined}\n      data-selected={isSelectable && selected ? \"true\" : undefined}\n      data-slot=\"card\"\n      data-variant={variant ?? \"default\"}\n      {...props}\n    >\n      {children}\n      {isSelectable && (\n        <>\n          <button\n            className={cn(\n              \"absolute top-2 left-2 z-[2] grid place-items-center w-[18px] h-[18px] rounded-sm cursor-pointer transition-[opacity,background-color,border-color]\",\n              \"border bg-white/[0.92] border-neutral-300\",\n              selected\n                ? \"opacity-100 bg-[color:var(--brand-primary-500,var(--primary))] border-[color:var(--brand-primary-500,var(--primary))] text-[color:var(--brand-primary-900,var(--primary-foreground))]\"\n                : \"opacity-0 text-transparent group-hover/card:opacity-100\",\n            )}\n            aria-label={selectableProps?.checkboxLabel ?? \"Selecionar\"}\n            aria-pressed={selected}\n            data-checked={selected || undefined}\n            data-slot=\"card-select-checkbox\"\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation()\n              const next = !selected\n              onToggleSelect?.(\n                next,\n                {\n                  ...(dataId ? { id: dataId } : {}),\n                  next,\n                  timestamp: Date.now(),\n                } satisfies CardSelectablePayload,\n                e,\n              )\n            }}\n          >\n            <Check size={11} strokeWidth={3} />\n          </button>\n          <button\n            className={cn(\n              \"absolute top-1.5 right-1.5 z-[2] grid place-items-center w-[22px] h-[22px] rounded-full cursor-pointer transition-opacity\",\n              pinned\n                ? \"opacity-100 bg-white/95 text-[#eab308] dark:bg-black/55\"\n                : \"opacity-0 bg-white/[0.82] text-neutral-500 dark:bg-black/45 dark:text-neutral-300 group-hover/card:opacity-100\",\n            )}\n            aria-label={selectableProps?.pinLabel ?? \"Fixar\"}\n            aria-pressed={pinned}\n            data-pinned={pinned || undefined}\n            data-slot=\"card-pin\"\n            type=\"button\"\n            onClick={(e) => {\n              e.stopPropagation()\n              const next = !pinned\n              onTogglePin?.(\n                next,\n                {\n                  ...(dataId ? { id: dataId } : {}),\n                  next,\n                  timestamp: Date.now(),\n                } satisfies CardSelectablePayload,\n                e,\n              )\n            }}\n          >\n            <svg\n              fill={pinned ? \"currentColor\" : \"none\"}\n              height=\"11\"\n              stroke=\"currentColor\"\n              strokeLinejoin=\"round\"\n              strokeWidth=\"1.6\"\n              viewBox=\"0 0 16 16\"\n              width=\"11\"\n            >\n              <path d=\"m8 1.5 1.95 4.18 4.55.5-3.4 3.13.94 4.5L8 11.5l-4.04 2.31.94-4.5L1.5 6.18l4.55-.5z\" />\n            </svg>\n          </button>\n        </>\n      )}\n    </div>\n  )\n}\n\nfunction CardMedia({ className, aspect, ...props }: CardMediaProps) {\n  return (\n    <div\n      className={cn(cardMediaVariants({ aspect }), className)}\n      data-aspect={aspect}\n      data-slot=\"card-media\"\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: CardHeaderProps) {\n  return (\n    <div\n      className={cn(cardHeaderVariants(), className)}\n      data-slot=\"card-header\"\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: CardTitleProps) {\n  return (\n    <div\n      className={cn(cardTitleVariants(), className)}\n      data-slot=\"card-title\"\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: CardDescriptionProps) {\n  return (\n    <div\n      className={cn(cardDescriptionVariants(), className)}\n      data-slot=\"card-description\"\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: CardActionProps) {\n  return (\n    <div\n      className={cn(cardActionVariants(), className)}\n      data-slot=\"card-action\"\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: CardContentProps) {\n  return (\n    <div\n      className={cn(cardContentVariants(), className)}\n      data-slot=\"card-content\"\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: CardFooterProps) {\n  return (\n    <div\n      className={cn(cardFooterVariants(), className)}\n      data-slot=\"card-footer\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardMedia,\n  CardTitle,\n}\n"]}

package/dist/chunk-KNH7JW6E.js

@@ -0,0 +1,142 @@
+import { buttonVariants } from './chunk-RPV77BCQ.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function AlertDialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+}
+function AlertDialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
+}
+function AlertDialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Overlay,
+    {
+      className: cn(
+        "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-[color:var(--modal-overlay-bg)]",
+        className
+      ),
+      "data-slot": "alert-dialog-overlay",
+      ...props
+    }
+  );
+}
+function AlertDialogContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      AlertDialogPrimitive.Content,
+      {
+        className: cn(
+          "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 fixed top-[50%] left-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] duration-200",
+          "bg-[color:var(--modal-content-bg)] rounded-[var(--modal-content-radius)] border-[color:var(--modal-content-border)] shadow-[var(--modal-content-shadow)] gap-[var(--modal-content-gap)] p-[var(--modal-content-padding)] max-w-[var(--modal-content-max-width)]",
+          className
+        ),
+        "data-slot": "alert-dialog-content",
+        ...props
+      }
+    )
+  ] });
+}
+function AlertDialogHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-col gap-[var(--modal-header-gap)] text-center sm:text-left", className),
+      "data-slot": "alert-dialog-header",
+      ...props
+    }
+  );
+}
+function AlertDialogFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex flex-col-reverse gap-[var(--modal-footer-gap)] sm:flex-row sm:justify-end",
+        className
+      ),
+      "data-slot": "alert-dialog-footer",
+      ...props
+    }
+  );
+}
+function AlertDialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Title,
+    {
+      className: cn("text-lg font-semibold", className),
+      "data-slot": "alert-dialog-title",
+      ...props
+    }
+  );
+}
+function AlertDialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Description,
+    {
+      className: cn("text-muted-foreground text-sm", className),
+      "data-slot": "alert-dialog-description",
+      ...props
+    }
+  );
+}
+function AlertDialogAction({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Action,
+    {
+      className: cn(buttonVariants(), className),
+      "data-slot": "alert-dialog-action",
+      ...props
+    }
+  );
+}
+function AlertDialogCancel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Cancel,
+    {
+      className: cn(buttonVariants({ variant: "outline" }), className),
+      "data-slot": "alert-dialog-cancel",
+      ...props
+    }
+  );
+}
+
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };
+//# sourceMappingURL=chunk-KNH7JW6E.js.map
+//# sourceMappingURL=chunk-KNH7JW6E.js.map

package/dist/chunk-KNH7JW6E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"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","file":"chunk-KNH7JW6E.js","sourcesContent":["\"use client\"\n\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { buttonVariants } from \"../../primitives/Button\"\n\nfunction AlertDialog({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {\n  return <AlertDialogPrimitive.Root data-slot=\"alert-dialog\" {...props} />\n}\n\nfunction AlertDialogTrigger({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal({\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      className={cn(\n        \"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-[color:var(--modal-overlay-bg)]\",\n        className\n      )}\n      data-slot=\"alert-dialog-overlay\"\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        className={cn(\n          \"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 fixed top-[50%] left-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] duration-200\",\n          \"bg-[color:var(--modal-content-bg)] rounded-[var(--modal-content-radius)] border-[color:var(--modal-content-border)] shadow-[var(--modal-content-shadow)] gap-[var(--modal-content-gap)] p-[var(--modal-content-padding)] max-w-[var(--modal-content-max-width)]\",\n          className\n        )}\n        data-slot=\"alert-dialog-content\"\n        {...props}\n      />\n    </AlertDialogPortal>\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-[var(--modal-header-gap)] text-center sm:text-left\", className)}\n      data-slot=\"alert-dialog-header\"\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"flex flex-col-reverse gap-[var(--modal-footer-gap)] sm:flex-row sm:justify-end\",\n        className\n      )}\n      data-slot=\"alert-dialog-footer\"\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      className={cn(\"text-lg font-semibold\", className)}\n      data-slot=\"alert-dialog-title\"\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"alert-dialog-description\"\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogAction({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {\n  return (\n    <AlertDialogPrimitive.Action\n      className={cn(buttonVariants(), className)}\n      data-slot=\"alert-dialog-action\"\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogCancel({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {\n  return (\n    <AlertDialogPrimitive.Cancel\n      className={cn(buttonVariants({ variant: \"outline\" }), className)}\n      data-slot=\"alert-dialog-cancel\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n"]}