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

package/dist/chunk-2SUZS6GZ.js

@@ -0,0 +1,227 @@
+import { Avatar, AvatarImage, AvatarFallback } from './chunk-U7TPJMGY.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import { Check, Trash2, X } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var notificationVariants = cva(
+  "relative flex gap-[var(--notification-root-gap)] p-[var(--notification-root-padding)] transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "",
+        info: "",
+        success: "",
+        warning: "",
+        error: ""
+      },
+      read: {
+        true: "bg-[color:var(--notification-bg-read)]",
+        false: "bg-[color:var(--notification-bg-unread)]"
+      },
+      interactive: {
+        true: "cursor-pointer hover:bg-[color:var(--notification-bg-hover)] focus-visible:bg-[color:var(--notification-bg-hover)] focus-visible:outline-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      read: false,
+      interactive: false
+    }
+  }
+);
+var unreadDotVariants = cva(
+  "shrink-0 size-[var(--notification-dot-size)] rounded-full",
+  {
+    variants: {
+      variant: {
+        default: "bg-[color:var(--notification-dot-color-default)]",
+        info: "bg-[color:var(--notification-dot-color-info)]",
+        success: "bg-[color:var(--notification-dot-color-success)]",
+        warning: "bg-[color:var(--notification-dot-color-warning)]",
+        error: "bg-[color:var(--notification-dot-color-error)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function formatTimestamp(timestamp) {
+  if (!timestamp) return "";
+  if (typeof timestamp === "string") return timestamp;
+  return timestamp.toLocaleString();
+}
+function Notification({
+  className,
+  variant = "default",
+  title,
+  description,
+  timestamp,
+  read = false,
+  icon,
+  avatar,
+  avatarSrc,
+  avatarFallback,
+  onClick,
+  onMarkAsRead,
+  onDelete,
+  actions,
+  ...props
+}) {
+  const isInteractive = Boolean(onClick);
+  const formattedTimestamp = formatTimestamp(timestamp);
+  const showAvatar = Boolean(avatar ?? avatarSrc ?? avatarFallback);
+  const showActions = Boolean(onMarkAsRead ?? onDelete ?? actions);
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (isInteractive && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      onClick?.();
+    }
+    if (event.key === "Delete" && onDelete) {
+      event.preventDefault();
+      onDelete();
+    }
+  };
+  const handleMarkAsRead = (event) => {
+    event.stopPropagation();
+    onMarkAsRead?.();
+  };
+  const handleDelete = (event) => {
+    event.stopPropagation();
+    onDelete?.();
+  };
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: cn(
+        notificationVariants({ variant, read, interactive: isInteractive }),
+        className
+      ),
+      "aria-label": `${read ? "" : "Unread: "}${title}${description ? `. ${description}` : ""}${formattedTimestamp ? `. ${formattedTimestamp}` : ""}`,
+      "data-slot": "notification",
+      "data-unread": !read,
+      "data-variant": variant,
+      role: "article",
+      tabIndex: isInteractive ? 0 : void 0,
+      onClick: isInteractive ? handleClick : void 0,
+      onKeyDown: handleKeyDown,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", "data-slot": "notification-media", children: icon ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "flex size-10 items-center justify-center",
+            children: icon
+          }
+        ) : showAvatar ? avatar ?? /* @__PURE__ */ jsxs(Avatar, { size: "sm", children: [
+          avatarSrc && /* @__PURE__ */ jsx(AvatarImage, { alt: "", src: avatarSrc }),
+          /* @__PURE__ */ jsx(AvatarFallback, { children: avatarFallback })
+        ] }) : null }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", "data-slot": "notification-content", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-[var(--notification-dot-gap)]", children: [
+              !read && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: cn(unreadDotVariants({ variant })),
+                  "data-slot": "notification-unread-dot"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "text-foreground line-clamp-2 min-w-0 text-sm font-medium",
+                  "data-slot": "notification-title",
+                  children: title
+                }
+              )
+            ] }),
+            formattedTimestamp && /* @__PURE__ */ jsx(
+              "time",
+              {
+                className: "text-muted-foreground shrink-0 text-2xs font-semibold",
+                "data-slot": "notification-timestamp",
+                dateTime: timestamp instanceof Date ? timestamp.toISOString() : void 0,
+                children: formattedTimestamp
+              }
+            )
+          ] }),
+          description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-muted-foreground mt-0.5 line-clamp-2 text-xs",
+              "data-slot": "notification-description",
+              children: description
+            }
+          ),
+          actions && /* @__PURE__ */ jsx("div", { className: "mt-2", "data-slot": "notification-actions", children: actions })
+        ] }),
+        showActions && !actions && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex shrink-0 items-center gap-1",
+            "data-slot": "notification-action-buttons",
+            children: [
+              onMarkAsRead && !read && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "aria-label": "Mark as read",
+                  className: "text-muted-foreground hover:text-foreground hover:bg-accent rounded-md p-1.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  "data-slot": "notification-mark-read",
+                  type: "button",
+                  onClick: handleMarkAsRead,
+                  children: /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "size-4" })
+                }
+              ),
+              onDelete && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "aria-label": "Delete notification",
+                  className: "text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-md p-1.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  "data-slot": "notification-delete",
+                  type: "button",
+                  onClick: handleDelete,
+                  children: /* @__PURE__ */ jsx(Trash2, { "aria-hidden": "true", className: "size-4" })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function NotificationDismissButton({
+  className,
+  onClick,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn(
+        "text-muted-foreground hover:text-foreground rounded-md p-1 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className
+      ),
+      "aria-label": "Dismiss",
+      "data-slot": "notification-dismiss",
+      type: "button",
+      onClick,
+      ...props,
+      children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
+    }
+  );
+}
+
+export { Notification, NotificationDismissButton, notificationVariants, unreadDotVariants };
+//# sourceMappingURL=chunk-2SUZS6GZ.js.map
+//# sourceMappingURL=chunk-2SUZS6GZ.js.map

package/dist/chunk-2SUZS6GZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/Notification/Notification.variants.ts","../src/components/feedback/Notification/Notification.tsx"],"names":[],"mappings":"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","file":"chunk-2SUZS6GZ.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * Notification variant styles using CVA\n * Individual notification items for lists, dropdowns, or feeds\n */\nexport const notificationVariants = cva(\n  \"relative flex gap-[var(--notification-root-gap)] p-[var(--notification-root-padding)] transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        info: \"\",\n        success: \"\",\n        warning: \"\",\n        error: \"\",\n      },\n      read: {\n        true: \"bg-[color:var(--notification-bg-read)]\",\n        false: \"bg-[color:var(--notification-bg-unread)]\",\n      },\n      interactive: {\n        true: \"cursor-pointer hover:bg-[color:var(--notification-bg-hover)] focus-visible:bg-[color:var(--notification-bg-hover)] focus-visible:outline-none\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      read: false,\n      interactive: false,\n    },\n  }\n)\n\n/**\n * Unread indicator dot styles\n */\nexport const unreadDotVariants = cva(\n  \"shrink-0 size-[var(--notification-dot-size)] rounded-full\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-[color:var(--notification-dot-color-default)]\",\n        info: \"bg-[color:var(--notification-dot-color-info)]\",\n        success: \"bg-[color:var(--notification-dot-color-success)]\",\n        warning: \"bg-[color:var(--notification-dot-color-warning)]\",\n        error: \"bg-[color:var(--notification-dot-color-error)]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n","import type { NotificationProps, NotificationVariant } from \"./Notification.types\"\n\nimport { Check, Trash2, X } from \"lucide-react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"../../primitives/Avatar\"\nimport { notificationVariants, unreadDotVariants } from \"./Notification.variants\"\n\n/**\n * Format a timestamp into a relative or absolute string\n */\nfunction formatTimestamp(timestamp: Date | string | undefined): string {\n  if (!timestamp) return \"\"\n  if (typeof timestamp === \"string\") return timestamp\n  return timestamp.toLocaleString()\n}\n\n/**\n * Notification component for individual notification items\n *\n * Used in lists, dropdowns, or feeds. Unlike Toast which is temporary\n * and global, Notification is persistent and associated with the user.\n *\n * @example\n * ```tsx\n * <Notification\n *   title=\"Nova mensagem\"\n *   description=\"Voce recebeu uma nova mensagem de Maria.\"\n *   timestamp=\"5 min atras\"\n * />\n * ```\n */\nfunction Notification({\n  className,\n  variant = \"default\",\n  title,\n  description,\n  timestamp,\n  read = false,\n  icon,\n  avatar,\n  avatarSrc,\n  avatarFallback,\n  onClick,\n  onMarkAsRead,\n  onDelete,\n  actions,\n  ...props\n}: NotificationProps) {\n  const isInteractive = Boolean(onClick)\n  const formattedTimestamp = formatTimestamp(timestamp)\n  const showAvatar = Boolean(avatar ?? avatarSrc ?? avatarFallback)\n  const showActions = Boolean(onMarkAsRead ?? onDelete ?? actions)\n\n  const handleClick = () => {\n    if (onClick) {\n      onClick()\n    }\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    if (isInteractive && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault()\n      onClick?.()\n    }\n    if (event.key === \"Delete\" && onDelete) {\n      event.preventDefault()\n      onDelete()\n    }\n  }\n\n  const handleMarkAsRead = (event: React.MouseEvent) => {\n    event.stopPropagation()\n    onMarkAsRead?.()\n  }\n\n  const handleDelete = (event: React.MouseEvent) => {\n    event.stopPropagation()\n    onDelete?.()\n  }\n\n  return (\n    <article\n      className={cn(\n        notificationVariants({ variant, read, interactive: isInteractive }),\n        className\n      )}\n      aria-label={`${read ? \"\" : \"Unread: \"}${title}${description ? `. ${description}` : \"\"}${formattedTimestamp ? `. ${formattedTimestamp}` : \"\"}`}\n      data-slot=\"notification\"\n      data-unread={!read}\n      data-variant={variant}\n      role=\"article\"\n      tabIndex={isInteractive ? 0 : undefined}\n      onClick={isInteractive ? handleClick : undefined}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {/* Icon or Avatar */}\n      <div className=\"flex-shrink-0\" data-slot=\"notification-media\">\n        {icon ? (\n          <div\n            aria-hidden=\"true\"\n            className=\"flex size-10 items-center justify-center\"\n          >\n            {icon}\n          </div>\n        ) : showAvatar ? (\n          avatar ?? (\n            <Avatar size=\"sm\">\n              {avatarSrc && (\n                <AvatarImage alt=\"\" src={avatarSrc} />\n              )}\n              <AvatarFallback>{avatarFallback}</AvatarFallback>\n            </Avatar>\n          )\n        ) : null}\n      </div>\n\n      {/* Content */}\n      <div className=\"min-w-0 flex-1\" data-slot=\"notification-content\">\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex min-w-0 items-center gap-[var(--notification-dot-gap)]\">\n            {!read && (\n              <span\n                aria-hidden=\"true\"\n                className={cn(unreadDotVariants({ variant }))}\n                data-slot=\"notification-unread-dot\"\n              />\n            )}\n            <p\n              className=\"text-foreground line-clamp-2 min-w-0 text-sm font-medium\"\n              data-slot=\"notification-title\"\n            >\n              {title}\n            </p>\n          </div>\n          {formattedTimestamp && (\n            <time\n              className=\"text-muted-foreground shrink-0 text-2xs font-semibold\"\n              data-slot=\"notification-timestamp\"\n              dateTime={timestamp instanceof Date ? timestamp.toISOString() : undefined}\n            >\n              {formattedTimestamp}\n            </time>\n          )}\n        </div>\n        {description && (\n          <p\n            className=\"text-muted-foreground mt-0.5 line-clamp-2 text-xs\"\n            data-slot=\"notification-description\"\n          >\n            {description}\n          </p>\n        )}\n        {actions && (\n          <div className=\"mt-2\" data-slot=\"notification-actions\">\n            {actions}\n          </div>\n        )}\n      </div>\n\n      {/* Built-in action buttons */}\n      {showActions && !actions && (\n        <div\n          className=\"flex shrink-0 items-center gap-1\"\n          data-slot=\"notification-action-buttons\"\n        >\n          {onMarkAsRead && !read && (\n            <button\n              aria-label=\"Mark as read\"\n              className=\"text-muted-foreground hover:text-foreground hover:bg-accent rounded-md p-1.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n              data-slot=\"notification-mark-read\"\n              type=\"button\"\n              onClick={handleMarkAsRead}\n            >\n              <Check aria-hidden=\"true\" className=\"size-4\" />\n            </button>\n          )}\n          {onDelete && (\n            <button\n              aria-label=\"Delete notification\"\n              className=\"text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-md p-1.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n              data-slot=\"notification-delete\"\n              type=\"button\"\n              onClick={handleDelete}\n            >\n              <Trash2 aria-hidden=\"true\" className=\"size-4\" />\n            </button>\n          )}\n        </div>\n      )}\n    </article>\n  )\n}\n\n/**\n * NotificationDismissButton for use within custom actions\n */\nfunction NotificationDismissButton({\n  className,\n  onClick,\n  ...props\n}: React.ComponentPropsWithoutRef<\"button\">) {\n  return (\n    <button\n      className={cn(\n        \"text-muted-foreground hover:text-foreground rounded-md p-1 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n        className\n      )}\n      aria-label=\"Dismiss\"\n      data-slot=\"notification-dismiss\"\n      type=\"button\"\n      onClick={onClick}\n      {...props}\n    >\n      <X aria-hidden=\"true\" className=\"size-4\" />\n    </button>\n  )\n}\n\nexport { Notification, NotificationDismissButton, notificationVariants, unreadDotVariants }\nexport type { NotificationProps, NotificationVariant }\n"]}

package/dist/chunk-2XNMKALT.js

@@ -0,0 +1,152 @@
+import { cn } from './chunk-RVAYDRMA.js';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var toggleVariants = cva(
+  "inline-flex items-center justify-center gap-[var(--toggle-root-gap)] font-[var(--toggle-root-font-weight)] border-[length:var(--toggle-root-border-width)] transition-all duration-150 hover:bg-[color:var(--toggle-variant-default-bg-hover)] hover:text-[color:var(--toggle-variant-default-color-hover)] hover:shadow-sm active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[color:var(--toggle-variant-default-bg-on)] data-[state=on]:text-[color:var(--toggle-variant-default-color-on)] data-[state=on]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:z-10 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-[color:var(--toggle-variant-default-bg-default)] text-[color:var(--toggle-variant-default-color-default)] border-[color:var(--toggle-variant-default-border)]",
+        outline: "border-[color:var(--toggle-variant-outline-border)] bg-[color:var(--toggle-variant-outline-bg-default)] text-[color:var(--toggle-variant-outline-color-default)] hover:bg-[color:var(--toggle-variant-outline-bg-hover)] hover:text-[color:var(--toggle-variant-outline-color-hover)] data-[state=on]:bg-[color:var(--toggle-variant-outline-bg-on)] data-[state=on]:text-[color:var(--toggle-variant-outline-color-on)]"
+      },
+      size: {
+        default: "h-[var(--toggle-size-default-height)] px-[var(--toggle-size-default-padding-x)] min-w-[var(--toggle-size-default-min-width)] [&_svg]:size-[var(--toggle-icon-size-default)]",
+        sm: "h-[var(--toggle-size-sm-height)] px-[var(--toggle-size-sm-padding-x)] min-w-[var(--toggle-size-sm-min-width)] [&_svg]:size-[var(--toggle-icon-size-sm)]",
+        md: "h-[var(--toggle-size-md-height)] px-[var(--toggle-size-md-padding-x)] min-w-[var(--toggle-size-md-min-width)] [&_svg]:size-[var(--toggle-icon-size-md)]",
+        lg: "h-[var(--toggle-size-lg-height)] px-[var(--toggle-size-lg-padding-x)] min-w-[var(--toggle-size-lg-min-width)] [&_svg]:size-[var(--toggle-icon-size-lg)]"
+      },
+      /**
+       * The shape of the toggle button
+       */
+      shape: {
+        pill: "rounded-[var(--toggle-root-border-radius-pill)]",
+        rounded: "rounded-[var(--toggle-root-border-radius-rounded)]"
+      },
+      /**
+       * Whether the item is connected to adjacent items (spacing=0)
+       */
+      connected: {
+        true: "rounded-none first:rounded-l-[var(--toggle-root-border-radius-pill)] last:rounded-r-[var(--toggle-root-border-radius-pill)]",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "outline",
+        connected: true,
+        className: "border-l-0 first:border-l"
+      },
+      {
+        shape: "rounded",
+        connected: true,
+        className: "first:rounded-l-[var(--toggle-root-border-radius-rounded)] last:rounded-r-[var(--toggle-root-border-radius-rounded)]"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      shape: "rounded",
+      connected: false
+    }
+  }
+);
+var ToggleGroupContext = React.createContext({});
+function Toggle({
+  className,
+  variant,
+  size,
+  shape,
+  icon,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    TogglePrimitive.Root,
+    {
+      className: cn(toggleVariants({ variant, size, shape, className })),
+      "data-slot": "toggle",
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", "data-slot": "toggle-icon", children: icon }),
+        children
+      ]
+    }
+  );
+}
+var spacingVariants = {
+  0: "gap-0",
+  1: "gap-1",
+  2: "gap-2",
+  3: "gap-3",
+  4: "gap-4"
+};
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  shape,
+  spacing = 1,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(ToggleGroupContext, { value: { variant, size, shape, spacing }, children: /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Root,
+    {
+      className: cn(
+        "group/toggle-group inline-flex items-center",
+        spacingVariants[spacing],
+        className
+      ),
+      "data-slot": "toggle-group",
+      "data-spacing": spacing,
+      ...props,
+      children
+    }
+  ) });
+}
+function ToggleItem({
+  className,
+  variant,
+  size,
+  shape,
+  icon,
+  children,
+  ...props
+}) {
+  const context = React.use(ToggleGroupContext);
+  const resolvedVariant = variant ?? context.variant;
+  const resolvedSize = size ?? context.size;
+  const resolvedShape = shape ?? context.shape;
+  const resolvedSpacing = context.spacing ?? 1;
+  const isConnected = resolvedSpacing === 0;
+  return /* @__PURE__ */ jsxs(
+    ToggleGroupPrimitive.Item,
+    {
+      className: cn(
+        toggleVariants({
+          variant: resolvedVariant,
+          size: resolvedSize,
+          shape: resolvedShape,
+          connected: isConnected,
+          className
+        })
+      ),
+      "data-slot": "toggle-item",
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", "data-slot": "toggle-icon", children: icon }),
+        children
+      ]
+    }
+  );
+}
+Toggle.Group = ToggleGroup;
+Toggle.Item = ToggleItem;
+
+export { Toggle, ToggleGroup, ToggleItem, toggleVariants };
+//# sourceMappingURL=chunk-2XNMKALT.js.map
+//# sourceMappingURL=chunk-2XNMKALT.js.map

package/dist/chunk-2XNMKALT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/Toggle/Toggle.tsx"],"names":[],"mappings":"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","file":"chunk-2XNMKALT.js","sourcesContent":["\"use client\"\n\nimport type { ToggleGroupProps, ToggleItemProps, ToggleProps } from \"./Toggle.types\"\n\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-[var(--toggle-root-gap)] font-[var(--toggle-root-font-weight)] border-[length:var(--toggle-root-border-width)] transition-all duration-150 hover:bg-[color:var(--toggle-variant-default-bg-hover)] hover:text-[color:var(--toggle-variant-default-color-hover)] hover:shadow-sm active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[color:var(--toggle-variant-default-bg-on)] data-[state=on]:text-[color:var(--toggle-variant-default-color-on)] data-[state=on]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 focus-visible:z-10 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-[color:var(--toggle-variant-default-bg-default)] text-[color:var(--toggle-variant-default-color-default)] border-[color:var(--toggle-variant-default-border)]\",\n        outline:\n          \"border-[color:var(--toggle-variant-outline-border)] bg-[color:var(--toggle-variant-outline-bg-default)] text-[color:var(--toggle-variant-outline-color-default)] hover:bg-[color:var(--toggle-variant-outline-bg-hover)] hover:text-[color:var(--toggle-variant-outline-color-hover)] data-[state=on]:bg-[color:var(--toggle-variant-outline-bg-on)] data-[state=on]:text-[color:var(--toggle-variant-outline-color-on)]\",\n      },\n      size: {\n        default: \"h-[var(--toggle-size-default-height)] px-[var(--toggle-size-default-padding-x)] min-w-[var(--toggle-size-default-min-width)] [&_svg]:size-[var(--toggle-icon-size-default)]\",\n        sm: \"h-[var(--toggle-size-sm-height)] px-[var(--toggle-size-sm-padding-x)] min-w-[var(--toggle-size-sm-min-width)] [&_svg]:size-[var(--toggle-icon-size-sm)]\",\n        md: \"h-[var(--toggle-size-md-height)] px-[var(--toggle-size-md-padding-x)] min-w-[var(--toggle-size-md-min-width)] [&_svg]:size-[var(--toggle-icon-size-md)]\",\n        lg: \"h-[var(--toggle-size-lg-height)] px-[var(--toggle-size-lg-padding-x)] min-w-[var(--toggle-size-lg-min-width)] [&_svg]:size-[var(--toggle-icon-size-lg)]\",\n      },\n      /**\n       * The shape of the toggle button\n       */\n      shape: {\n        pill: \"rounded-[var(--toggle-root-border-radius-pill)]\",\n        rounded: \"rounded-[var(--toggle-root-border-radius-rounded)]\",\n      },\n      /**\n       * Whether the item is connected to adjacent items (spacing=0)\n       */\n      connected: {\n        true: \"rounded-none first:rounded-l-[var(--toggle-root-border-radius-pill)] last:rounded-r-[var(--toggle-root-border-radius-pill)]\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        variant: \"outline\",\n        connected: true,\n        className: \"border-l-0 first:border-l\",\n      },\n      {\n        shape: \"rounded\",\n        connected: true,\n        className: \"first:rounded-l-[var(--toggle-root-border-radius-rounded)] last:rounded-r-[var(--toggle-root-border-radius-rounded)]\",\n      },\n    ],\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      shape: \"rounded\",\n      connected: false,\n    },\n  }\n)\n\n// Context for sharing group props with items\nconst ToggleGroupContext = React.createContext<{\n  shape?: ToggleProps[\"shape\"]\n  size?: ToggleProps[\"size\"]\n  spacing?: ToggleGroupProps[\"spacing\"]\n  variant?: ToggleProps[\"variant\"]\n}>({})\n\nfunction Toggle({\n  className,\n  variant,\n  size,\n  shape,\n  icon,\n  children,\n  ...props\n}: ToggleProps) {\n  return (\n    <TogglePrimitive.Root\n      className={cn(toggleVariants({ variant, size, shape, className }))}\n      data-slot=\"toggle\"\n      {...props}\n    >\n      {icon && (\n        <span className=\"shrink-0\" data-slot=\"toggle-icon\">\n          {icon}\n        </span>\n      )}\n      {children}\n    </TogglePrimitive.Root>\n  )\n}\n\nconst spacingVariants = {\n  0: \"gap-0\",\n  1: \"gap-1\",\n  2: \"gap-2\",\n  3: \"gap-3\",\n  4: \"gap-4\",\n}\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  shape,\n  spacing = 1,\n  children,\n  ...props\n}: ToggleGroupProps) {\n  return (\n    <ToggleGroupContext value={{ variant, size, shape, spacing }}>\n      <ToggleGroupPrimitive.Root\n        className={cn(\n          \"group/toggle-group inline-flex items-center\",\n          spacingVariants[spacing],\n          className\n        )}\n        data-slot=\"toggle-group\"\n        data-spacing={spacing}\n        {...props}\n      >\n        {children}\n      </ToggleGroupPrimitive.Root>\n    </ToggleGroupContext>\n  )\n}\n\nfunction ToggleItem({\n  className,\n  variant,\n  size,\n  shape,\n  icon,\n  children,\n  ...props\n}: ToggleItemProps) {\n  const context = React.use(ToggleGroupContext)\n  const resolvedVariant = variant ?? context.variant\n  const resolvedSize = size ?? context.size\n  const resolvedShape = shape ?? context.shape\n  const resolvedSpacing = context.spacing ?? 1\n  const isConnected = resolvedSpacing === 0\n\n  return (\n    <ToggleGroupPrimitive.Item\n      className={cn(\n        toggleVariants({\n          variant: resolvedVariant,\n          size: resolvedSize,\n          shape: resolvedShape,\n          connected: isConnected,\n          className,\n        })\n      )}\n      data-slot=\"toggle-item\"\n      {...props}\n    >\n      {icon && (\n        <span className=\"shrink-0\" data-slot=\"toggle-icon\">\n          {icon}\n        </span>\n      )}\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nToggle.Group = ToggleGroup\nToggle.Item = ToggleItem\n\nexport { Toggle, ToggleGroup, ToggleItem, toggleVariants }"]}

package/dist/chunk-345S7BBL.js

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=chunk-345S7BBL.js.map
+//# sourceMappingURL=chunk-345S7BBL.js.map

package/dist/chunk-345S7BBL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-345S7BBL.js"}

package/dist/chunk-3MOBFZJM.js

@@ -0,0 +1,222 @@
+import { SkeletonLoader } from './chunk-NGX3ITG4.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var dashboardCardVariants = cva(
+  // Base styles (always applied)
+  [
+    "flex flex-col justify-between",
+    "rounded-2xl border bg-card text-card-foreground",
+    "transition-colors duration-200"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "border-border shadow-sm",
+        ghost: "border-transparent bg-transparent shadow-none",
+        outline: "border-border bg-transparent",
+        elevated: "border-border shadow-md"
+      },
+      size: {
+        sm: "p-4",
+        md: "p-6",
+        lg: "p-8"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var dashboardCardHeaderVariants = cva([
+  "flex items-center justify-between gap-2"
+]);
+var dashboardCardTitleVariants = cva([
+  "text-sm font-bold text-foreground"
+]);
+var dashboardCardValueVariants = cva([
+  "mt-2 flex items-baseline gap-2"
+]);
+var dashboardCardValueTextVariants = cva([
+  "text-xl font-semibold text-foreground tabular-nums"
+]);
+var dashboardCardValueDescriptionVariants = cva([
+  "text-sm text-muted-foreground"
+]);
+var dashboardCardContentVariants = cva(["mt-4"]);
+var dashboardCardFooterVariants = cva([
+  "mt-6 text-xs text-muted-foreground"
+]);
+var dashboardCardCtaLinkVariants = cva([
+  "text-primary hover:text-primary/80 hover:underline"
+]);
+function DashboardCardHeader({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(dashboardCardHeaderVariants(), className),
+      "data-slot": "dashboard-card-header",
+      ...props,
+      children
+    }
+  );
+}
+function DashboardCardTitle({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "h3",
+    {
+      className: cn(dashboardCardTitleVariants(), className),
+      "data-slot": "dashboard-card-title",
+      ...props,
+      children
+    }
+  );
+}
+function DashboardCardValue({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(dashboardCardValueVariants(), className),
+      "data-slot": "dashboard-card-value",
+      ...props,
+      children
+    }
+  );
+}
+function DashboardCardContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(dashboardCardContentVariants(), className),
+      "data-slot": "dashboard-card-content",
+      ...props,
+      children
+    }
+  );
+}
+function DashboardCardFooter({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(dashboardCardFooterVariants(), className),
+      "data-slot": "dashboard-card-footer",
+      ...props,
+      children
+    }
+  );
+}
+function DashboardCard({
+  title,
+  badge,
+  value,
+  valueDescription,
+  icon,
+  ctaText,
+  ctaLink,
+  ctaDescription,
+  loading = false,
+  variant,
+  size,
+  className,
+  children,
+  ...props
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(dashboardCardVariants({ variant, size }), className),
+        "data-slot": "dashboard-card",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cn(dashboardCardHeaderVariants()), children: [
+            /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-4 w-24" }),
+            /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-5 w-12" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: cn(dashboardCardValueVariants()), children: /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-7 w-32" }) }),
+          /* @__PURE__ */ jsx("div", { className: cn(dashboardCardContentVariants()), children: /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-32 w-full" }) })
+        ]
+      }
+    );
+  }
+  const hasSimpleProps = title || value;
+  if (!hasSimpleProps && children) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(dashboardCardVariants({ variant, size }), className),
+        "data-slot": "dashboard-card",
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(dashboardCardVariants({ variant, size }), className),
+      "data-slot": "dashboard-card",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          (title || badge || icon) && /* @__PURE__ */ jsxs("div", { className: cn(dashboardCardHeaderVariants()), children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              title && /* @__PURE__ */ jsx("h3", { className: cn(dashboardCardTitleVariants()), children: title }),
+              badge
+            ] }),
+            icon && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "text-muted-foreground",
+                "data-slot": "dashboard-card-icon",
+                children: icon
+              }
+            )
+          ] }),
+          value && /* @__PURE__ */ jsxs("div", { className: cn(dashboardCardValueVariants()), children: [
+            /* @__PURE__ */ jsx("span", { className: cn(dashboardCardValueTextVariants()), children: value }),
+            valueDescription && /* @__PURE__ */ jsx("span", { className: cn(dashboardCardValueDescriptionVariants()), children: valueDescription })
+          ] }),
+          children && /* @__PURE__ */ jsx("div", { className: cn(dashboardCardContentVariants()), children })
+        ] }),
+        (ctaText || ctaDescription) && /* @__PURE__ */ jsxs("div", { className: cn(dashboardCardFooterVariants()), children: [
+          ctaDescription,
+          " ",
+          ctaText && ctaLink && /* @__PURE__ */ jsx("a", { className: cn(dashboardCardCtaLinkVariants()), href: ctaLink, children: ctaText })
+        ] })
+      ]
+    }
+  );
+}
+DashboardCard.Header = DashboardCardHeader;
+DashboardCard.Title = DashboardCardTitle;
+DashboardCard.Value = DashboardCardValue;
+DashboardCard.Content = DashboardCardContent;
+DashboardCard.Footer = DashboardCardFooter;
+DashboardCard.displayName = "DashboardCard";
+
+export { DashboardCard, DashboardCardContent, DashboardCardFooter, DashboardCardHeader, DashboardCardTitle, DashboardCardValue, dashboardCardContentVariants, dashboardCardFooterVariants, dashboardCardHeaderVariants, dashboardCardTitleVariants, dashboardCardValueVariants, dashboardCardVariants };
+//# sourceMappingURL=chunk-3MOBFZJM.js.map
+//# sourceMappingURL=chunk-3MOBFZJM.js.map