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

package/dist/chunk-N5YGAESZ.js

@@ -0,0 +1,198 @@
+import { SkeletonLoader } from './chunk-NGX3ITG4.js';
+import { Badge } from './chunk-HNQX6ZG7.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var chartCardVariants = cva(
+  "rounded-[var(--chart-card-radius)] bg-[color:var(--chart-card-bg)] px-[var(--chart-card-padding-x)] pt-[var(--chart-card-padding-top)] pb-[var(--chart-card-padding-bottom)] text-[color:var(--chart-card-fg)] transition",
+  {
+    variants: {
+      variant: {
+        default: "",
+        outlined: "border border-[color:var(--chart-card-border)]",
+        elevated: "shadow-sm"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var chartCardHeaderVariants = cva(
+  "flex items-center justify-between gap-x-2"
+);
+var chartCardTitleVariants = cva(
+  "text-[length:var(--chart-card-title-size)] font-[var(--chart-card-title-weight)] leading-[var(--chart-card-title-line-height)] text-[color:var(--chart-card-title-color)]"
+);
+var chartCardValueContainerVariants = cva(
+  "mt-2 flex items-baseline justify-between"
+);
+var chartCardValueVariants = cva(
+  "text-[length:var(--chart-card-value-size)] text-[color:var(--chart-card-value-color)]"
+);
+var chartCardPreviousValueVariants = cva(
+  "text-sm text-[color:var(--chart-card-previous-color)]"
+);
+var chartCardChartVariants = cva(
+  "mt-[var(--chart-card-gap)] h-[var(--chart-card-chart-height)] [&>*]:h-full"
+);
+var defaultFormatter = (value) => String(value);
+function getBadgeColor(value) {
+  if (value > 0) {
+    return "success";
+  } else if (value < 0) {
+    if (value < -50) {
+      return "warning";
+    }
+    return "destructive";
+  }
+  return "muted";
+}
+function formatPercentage(value) {
+  const sign = value > 0 ? "+" : "";
+  return `${sign}${(value * 100).toFixed(1)}%`;
+}
+function ChartCard({
+  badge,
+  chart,
+  chartHeight,
+  className,
+  comparisonPeriod = "no-comparison",
+  data,
+  emptyMessage,
+  featuredIcon,
+  footer,
+  headerAction,
+  isThumbnail = false,
+  loading = false,
+  tabs,
+  title,
+  valueFormatter = defaultFormatter,
+  variant,
+  ...props
+}) {
+  const isEmpty = !loading && data.length === 0;
+  const totalValue = React.useMemo(() => {
+    return data.reduce((acc, item) => acc + (item.value ?? 0), 0);
+  }, [data]);
+  const totalPreviousValue = React.useMemo(() => {
+    return data.reduce((acc, item) => acc + (item.previousValue ?? 0), 0);
+  }, [data]);
+  const evolution = React.useMemo(() => {
+    if (comparisonPeriod === "no-comparison" || totalPreviousValue === 0) {
+      return 0;
+    }
+    return (totalValue - totalPreviousValue) / totalPreviousValue;
+  }, [comparisonPeriod, totalPreviousValue, totalValue]);
+  const showComparison = comparisonPeriod !== "no-comparison";
+  const titleLead = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+    featuredIcon && /* @__PURE__ */ jsx("span", { "data-slot": "chart-card-featured-icon", children: featuredIcon }),
+    /* @__PURE__ */ jsx("h3", { className: cn(chartCardTitleVariants()), "data-slot": "chart-card-title", children: title })
+  ] });
+  if (isEmpty) {
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        "aria-label": `${title}: empty`,
+        className: cn(chartCardVariants({ variant }), className),
+        "data-empty": "true",
+        "data-slot": "chart-card",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cn(chartCardHeaderVariants()), "data-slot": "chart-card-header", children: [
+            titleLead,
+            headerAction && /* @__PURE__ */ jsx("span", { "data-slot": "chart-card-header-action", children: headerAction })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                chartCardChartVariants(),
+                chartHeight,
+                "flex items-center justify-center text-[length:var(--chart-card-empty-state-caption-size)] text-[color:var(--chart-card-empty-state-caption-color)]"
+              ),
+              "data-slot": "chart-card-empty",
+              children: emptyMessage ?? "No data available"
+            }
+          )
+        ]
+      }
+    );
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsxs(
+      "article",
+      {
+        "aria-busy": "true",
+        className: cn(chartCardVariants({ variant }), className),
+        "data-slot": "chart-card",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cn(chartCardHeaderVariants()), "data-slot": "chart-card-header", children: [
+            /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-4 w-24" }),
+            /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-5 w-12" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(chartCardValueContainerVariants()),
+              "data-slot": "chart-card-value",
+              children: /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-7 w-32" })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: cn(chartCardChartVariants(), chartHeight), children: /* @__PURE__ */ jsx(SkeletonLoader, { className: "h-full w-full" }) })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      "aria-label": `${title}: ${valueFormatter(totalValue)}`,
+      className: cn(chartCardVariants({ variant }), className),
+      "data-slot": "chart-card",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: cn(chartCardHeaderVariants()), "data-slot": "chart-card-header", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-x-2", children: [
+            featuredIcon && /* @__PURE__ */ jsx("span", { "data-slot": "chart-card-featured-icon", children: featuredIcon }),
+            /* @__PURE__ */ jsx("h3", { className: cn(chartCardTitleVariants()), "data-slot": "chart-card-title", children: title }),
+            showComparison && (badge ?? /* @__PURE__ */ jsx(Badge, { color: getBadgeColor(evolution), size: "sm", children: formatPercentage(evolution) }))
+          ] }),
+          headerAction && /* @__PURE__ */ jsx("span", { "data-slot": "chart-card-header-action", children: headerAction })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(chartCardValueContainerVariants()),
+            "data-slot": "chart-card-value",
+            children: [
+              /* @__PURE__ */ jsx("p", { className: cn(chartCardValueVariants()), children: valueFormatter(totalValue) }),
+              showComparison && /* @__PURE__ */ jsxs("p", { className: cn(chartCardPreviousValueVariants()), children: [
+                "from ",
+                valueFormatter(totalPreviousValue)
+              ] })
+            ]
+          }
+        ),
+        tabs && /* @__PURE__ */ jsx("div", { className: "mt-[var(--chart-card-gap)]", "data-slot": "chart-card-tabs", children: tabs }),
+        !isThumbnail && chart && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(chartCardChartVariants(), chartHeight),
+            "data-slot": "chart-card-chart",
+            children: chart
+          }
+        ),
+        footer && /* @__PURE__ */ jsx("div", { className: "mt-[var(--chart-card-gap)]", "data-slot": "chart-card-footer", children: footer })
+      ]
+    }
+  );
+}
+ChartCard.displayName = "ChartCard";
+
+export { ChartCard, chartCardChartVariants, chartCardHeaderVariants, chartCardPreviousValueVariants, chartCardTitleVariants, chartCardValueContainerVariants, chartCardValueVariants, chartCardVariants };
+//# sourceMappingURL=chunk-N5YGAESZ.js.map
+//# sourceMappingURL=chunk-N5YGAESZ.js.map

package/dist/chunk-N5YGAESZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/ChartCard/ChartCard.variants.ts","../src/components/data-display/ChartCard/ChartCard.tsx"],"names":[],"mappings":"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","file":"chunk-N5YGAESZ.js","sourcesContent":["// ChartCard/ChartCard.variants.ts\nimport { cva } from \"class-variance-authority\"\n\n/**\n * ChartCard container variants.\n *\n * Consumes the `--chart-card-*` component tokens (DES-1253). The Figma container\n * is flat — background + radius + asymmetric padding, no border or shadow — so the\n * base styles render that container and `outlined` / `elevated` are code-only\n * extensions (documented in the README) layered on top.\n */\nexport const chartCardVariants = cva(\n  \"rounded-[var(--chart-card-radius)] bg-[color:var(--chart-card-bg)] px-[var(--chart-card-padding-x)] pt-[var(--chart-card-padding-top)] pb-[var(--chart-card-padding-bottom)] text-[color:var(--chart-card-fg)] transition\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        outlined: \"border border-[color:var(--chart-card-border)]\",\n        elevated: \"shadow-sm\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\n/**\n * ChartCard header (Title Row) — leading group (featured icon + title + badge)\n * and an optional trailing overflow action.\n */\nexport const chartCardHeaderVariants = cva(\n  \"flex items-center justify-between gap-x-2\"\n)\n\n/**\n * ChartCard title — Figma Heading/H5 (18px / 24px / SemiBold), tokenised.\n */\nexport const chartCardTitleVariants = cva(\n  \"text-[length:var(--chart-card-title-size)] font-[var(--chart-card-title-weight)] leading-[var(--chart-card-title-line-height)] text-[color:var(--chart-card-title-color)]\"\n)\n\n/**\n * ChartCard value container.\n */\nexport const chartCardValueContainerVariants = cva(\n  \"mt-2 flex items-baseline justify-between\"\n)\n\n/**\n * ChartCard KPI value text — tokenised size + color.\n */\nexport const chartCardValueVariants = cva(\n  \"text-[length:var(--chart-card-value-size)] text-[color:var(--chart-card-value-color)]\"\n)\n\n/**\n * ChartCard previous-value caption.\n */\nexport const chartCardPreviousValueVariants = cva(\n  \"text-sm text-[color:var(--chart-card-previous-color)]\"\n)\n\n/**\n * ChartCard chart-slot wrapper — 24px row gap + tokenised area height\n * (`--chart-card-chart-height`). The injected chart fills the area via\n * `[&>*]:h-full`; the `chartHeight` prop overrides the height.\n */\nexport const chartCardChartVariants = cva(\n  \"mt-[var(--chart-card-gap)] h-[var(--chart-card-chart-height)] [&>*]:h-full\"\n)\n","// ChartCard/ChartCard.tsx\n\"use client\"\n\nimport type { ChartCardProps, ChartCardValueFormatter } from \"./ChartCard.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Badge } from \"../../primitives/Badge\"\nimport { SkeletonLoader } from \"../../primitives/SkeletonLoader\"\nimport {\n  chartCardChartVariants,\n  chartCardHeaderVariants,\n  chartCardPreviousValueVariants,\n  chartCardTitleVariants,\n  chartCardValueContainerVariants,\n  chartCardValueVariants,\n  chartCardVariants,\n} from \"./ChartCard.variants\"\n\n/**\n * Default value formatter (returns value as string)\n */\nconst defaultFormatter: ChartCardValueFormatter = (value) => String(value)\n\n/**\n * Get badge color based on evolution percentage\n */\nfunction getBadgeColor(value: number): \"destructive\" | \"muted\" | \"success\" | \"warning\" {\n  if (value > 0) {\n    return \"success\"\n  } else if (value < 0) {\n    if (value < -50) {\n      return \"warning\"\n    }\n    return \"destructive\"\n  }\n  return \"muted\"\n}\n\n/**\n * Format percentage for display\n */\nfunction formatPercentage(value: number): string {\n  const sign = value > 0 ? \"+\" : \"\"\n  return `${sign}${(value * 100).toFixed(1)}%`\n}\n\n/**\n * ChartCard - Dashboard KPI widget with a chart-agnostic slot.\n *\n * Renders a KPI value with an auto evolution badge and optional comparison\n * period. The chart itself is **injected by the consumer** via the `chart`\n * slot — ChartCard ships no default chart (DES-1253). The Title Row exposes\n * `featuredIcon` + `headerAction` (overflow) slots, with optional `tabs` and\n * `footer` composition slots below.\n *\n * @example\n * ```tsx\n * const data = [\n *   { formattedDate: \"01/01\", value: 1000, previousValue: 900 },\n *   { formattedDate: \"02/01\", value: 1200, previousValue: 1100 },\n * ]\n *\n * <ChartCard\n *   title=\"Revenue\"\n *   data={data}\n *   comparisonPeriod=\"previous-year\"\n *   valueFormatter={(v) => `$${v.toLocaleString()}`}\n *   chart={\n *     <LineChart\n *       className=\"h-full\"\n *       data={data}\n *       config={{ value: { label: \"Current\" } }}\n *       series={[\"value\"]}\n *     />\n *   }\n * />\n * ```\n */\nfunction ChartCard({\n  badge,\n  chart,\n  chartHeight,\n  className,\n  comparisonPeriod = \"no-comparison\",\n  data,\n  emptyMessage,\n  featuredIcon,\n  footer,\n  headerAction,\n  isThumbnail = false,\n  loading = false,\n  tabs,\n  title,\n  valueFormatter = defaultFormatter,\n  variant,\n  ...props\n}: ChartCardProps) {\n  const isEmpty = !loading && data.length === 0\n\n  // Calculate totals\n  const totalValue = React.useMemo(() => {\n    return data.reduce((acc, item) => acc + (item.value ?? 0), 0)\n  }, [data])\n\n  const totalPreviousValue = React.useMemo(() => {\n    return data.reduce((acc, item) => acc + (item.previousValue ?? 0), 0)\n  }, [data])\n\n  // Calculate evolution percentage\n  const evolution = React.useMemo(() => {\n    if (comparisonPeriod === \"no-comparison\" || totalPreviousValue === 0) {\n      return 0\n    }\n    return (totalValue - totalPreviousValue) / totalPreviousValue\n  }, [comparisonPeriod, totalPreviousValue, totalValue])\n\n  // Show comparison UI elements\n  const showComparison = comparisonPeriod !== \"no-comparison\"\n\n  // Title Row leading slots (featured icon + title), shared across states.\n  const titleLead = (\n    <div className=\"flex items-center gap-x-2\">\n      {featuredIcon && (\n        <span data-slot=\"chart-card-featured-icon\">{featuredIcon}</span>\n      )}\n      <h3 className={cn(chartCardTitleVariants())} data-slot=\"chart-card-title\">\n        {title}\n      </h3>\n    </div>\n  )\n\n  // Empty state (DES-1254 item 3 — Figma Empty State)\n  if (isEmpty) {\n    return (\n      <article\n        aria-label={`${title}: empty`}\n        className={cn(chartCardVariants({ variant }), className)}\n        data-empty=\"true\"\n        data-slot=\"chart-card\"\n        {...props}\n      >\n        <div className={cn(chartCardHeaderVariants())} data-slot=\"chart-card-header\">\n          {titleLead}\n          {headerAction && (\n            <span data-slot=\"chart-card-header-action\">{headerAction}</span>\n          )}\n        </div>\n        <div\n          className={cn(\n            chartCardChartVariants(),\n            chartHeight,\n            \"flex items-center justify-center text-[length:var(--chart-card-empty-state-caption-size)] text-[color:var(--chart-card-empty-state-caption-color)]\"\n          )}\n          data-slot=\"chart-card-empty\"\n        >\n          {emptyMessage ?? \"No data available\"}\n        </div>\n      </article>\n    )\n  }\n\n  // Loading state\n  if (loading) {\n    return (\n      <article\n        aria-busy=\"true\"\n        className={cn(chartCardVariants({ variant }), className)}\n        data-slot=\"chart-card\"\n        {...props}\n      >\n        <div className={cn(chartCardHeaderVariants())} data-slot=\"chart-card-header\">\n          <SkeletonLoader className=\"h-4 w-24\" />\n          <SkeletonLoader className=\"h-5 w-12\" />\n        </div>\n        <div\n          className={cn(chartCardValueContainerVariants())}\n          data-slot=\"chart-card-value\"\n        >\n          <SkeletonLoader className=\"h-7 w-32\" />\n        </div>\n        <div className={cn(chartCardChartVariants(), chartHeight)}>\n          <SkeletonLoader className=\"h-full w-full\" />\n        </div>\n      </article>\n    )\n  }\n\n  return (\n    <article\n      aria-label={`${title}: ${valueFormatter(totalValue)}`}\n      className={cn(chartCardVariants({ variant }), className)}\n      data-slot=\"chart-card\"\n      {...props}\n    >\n      {/* Title Row — featured icon + title + badge / overflow action */}\n      <div className={cn(chartCardHeaderVariants())} data-slot=\"chart-card-header\">\n        <div className=\"flex items-center gap-x-2\">\n          {featuredIcon && (\n            <span data-slot=\"chart-card-featured-icon\">{featuredIcon}</span>\n          )}\n          <h3 className={cn(chartCardTitleVariants())} data-slot=\"chart-card-title\">\n            {title}\n          </h3>\n          {showComparison && (\n            badge ?? (\n              <Badge color={getBadgeColor(evolution)} size=\"sm\">\n                {formatPercentage(evolution)}\n              </Badge>\n            )\n          )}\n        </div>\n        {headerAction && (\n          <span data-slot=\"chart-card-header-action\">{headerAction}</span>\n        )}\n      </div>\n\n      {/* Value display */}\n      <div\n        className={cn(chartCardValueContainerVariants())}\n        data-slot=\"chart-card-value\"\n      >\n        <p className={cn(chartCardValueVariants())}>\n          {valueFormatter(totalValue)}\n        </p>\n        {showComparison && (\n          <p className={cn(chartCardPreviousValueVariants())}>\n            from {valueFormatter(totalPreviousValue)}\n          </p>\n        )}\n      </div>\n\n      {/* Tabs row slot (Figma showTabs) */}\n      {tabs && (\n        <div className=\"mt-[var(--chart-card-gap)]\" data-slot=\"chart-card-tabs\">\n          {tabs}\n        </div>\n      )}\n\n      {/* Chart slot — injected by the consumer (chart-agnostic) */}\n      {!isThumbnail && chart && (\n        <div\n          className={cn(chartCardChartVariants(), chartHeight)}\n          data-slot=\"chart-card-chart\"\n        >\n          {chart}\n        </div>\n      )}\n\n      {/* Card Footer slot (Figma showCardFooter — trend + total) */}\n      {footer && (\n        <div className=\"mt-[var(--chart-card-gap)]\" data-slot=\"chart-card-footer\">\n          {footer}\n        </div>\n      )}\n    </article>\n  )\n}\n\nChartCard.displayName = \"ChartCard\"\n\nexport { ChartCard }\n"]}

package/dist/chunk-N7VMQWM3.js

@@ -0,0 +1,200 @@
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSeparator, DropdownMenuLabel, DropdownMenuGroup, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, DropdownMenuItem } from './chunk-6G5QK3SU.js';
+import { Avatar, AvatarImage, AvatarFallback } from './chunk-U7TPJMGY.js';
+import { Badge } from './chunk-HNQX6ZG7.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import { ChevronsUpDown, Check } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var MAX_NAVIGATION_DEPTH = 3;
+function getCurrentAccount(accounts) {
+  for (const account of accounts) {
+    if (account.isCurrent) {
+      return account;
+    }
+    const currentChild = getCurrentAccount(account.children ?? []);
+    if (currentChild) {
+      return currentChild;
+    }
+  }
+  return void 0;
+}
+function AccountSwitchItemContent({
+  account,
+  isCurrent
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    account.logo ?? /* @__PURE__ */ jsxs(Avatar, { size: "xs", children: [
+      account.avatarSrc && /* @__PURE__ */ jsx(AvatarImage, { alt: account.name, src: account.avatarSrc }),
+      /* @__PURE__ */ jsx(AvatarFallback, { children: account.avatarFallback ?? account.name.charAt(0) })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: account.name }),
+    account.plan && /* @__PURE__ */ jsx(
+      Badge,
+      {
+        color: account.plan === "PRO" ? "primary" : "muted",
+        size: "sm",
+        type: "pill-color",
+        children: account.plan
+      }
+    ),
+    isCurrent && /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "size-3.5 text-primary" })
+  ] });
+}
+function AccountSwitch({
+  className,
+  accounts,
+  triggerShape = "pill",
+  placement = "sidebar",
+  compact = false,
+  header,
+  footer,
+  onSelect,
+  ...props
+}) {
+  const currentAccount = getCurrentAccount(accounts) ?? accounts[0];
+  const contentAlign = placement === "header" ? "end" : "start";
+  const handleSelect = (account) => {
+    if (!account.disabled && account.id !== currentAccount?.id) {
+      onSelect?.(account);
+    }
+  };
+  const renderAccountItem = (account, depth) => {
+    const children = depth < MAX_NAVIGATION_DEPTH ? account.children ?? [] : [];
+    const hasChildren = children.length > 0;
+    const isCurrent = account.id === currentAccount?.id;
+    const stateProps = {
+      "aria-current": isCurrent ? "true" : void 0,
+      "data-selected": isCurrent ? "true" : void 0
+    };
+    if (hasChildren) {
+      return /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+        /* @__PURE__ */ jsx(
+          DropdownMenuSubTrigger,
+          {
+            className: cn(
+              "flex min-w-0 items-center gap-2",
+              isCurrent && "bg-accent text-accent-foreground"
+            ),
+            "data-account-switch-level": depth,
+            disabled: account.disabled,
+            ...stateProps,
+            children: /* @__PURE__ */ jsx(AccountSwitchItemContent, { account, isCurrent })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          DropdownMenuSubContent,
+          {
+            className: "min-w-[var(--account-switch-content-min-width)]",
+            "data-account-switch-level": depth + 1,
+            children: /* @__PURE__ */ jsx(DropdownMenuGroup, { children: children.map(
+              (childAccount) => renderAccountItem(childAccount, depth + 1)
+            ) })
+          }
+        )
+      ] }, account.id);
+    }
+    return /* @__PURE__ */ jsx(
+      DropdownMenuItem,
+      {
+        className: cn(
+          "flex min-w-0 items-center gap-2",
+          isCurrent && "bg-accent text-accent-foreground"
+        ),
+        "data-account-switch-level": depth,
+        disabled: account.disabled,
+        onClick: () => {
+          handleSelect(account);
+        },
+        ...stateProps,
+        children: /* @__PURE__ */ jsx(AccountSwitchItemContent, { account, isCurrent })
+      },
+      account.id
+    );
+  };
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        className: cn(
+          "inline-flex min-w-0 items-center gap-2 h-[var(--input-size-md-h)] border transition-colors hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
+          triggerShape === "pill" ? ["rounded-full bg-card text-card-foreground", compact ? "p-1.5" : "pl-1.5 pr-3"] : [
+            // Figma 1138:2522 "Input" — bg background, border input, radius md;
+            // inside an icon-collapsed sidebar only the logo remains (2418:9772)
+            "rounded-[var(--radius-md)] bg-background text-foreground",
+            compact ? "px-2" : "px-3",
+            "border-[color:var(--input-border-default)]",
+            "group-data-[collapsible=icon]:px-2"
+          ],
+          className
+        ),
+        "data-compact": compact ? "" : void 0,
+        "data-placement": placement,
+        "data-slot": "account-switch-trigger",
+        type: "button",
+        ...props,
+        children: [
+          currentAccount && /* @__PURE__ */ jsxs(Fragment, { children: [
+            currentAccount.logo ?? /* @__PURE__ */ jsxs(Avatar, { size: "xs", children: [
+              currentAccount.avatarSrc && /* @__PURE__ */ jsx(
+                AvatarImage,
+                {
+                  alt: currentAccount.name,
+                  src: currentAccount.avatarSrc
+                }
+              ),
+              /* @__PURE__ */ jsx(AvatarFallback, { children: currentAccount.avatarFallback ?? currentAccount.name.charAt(0) })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "truncate max-w-[var(--account-switch-name-max-width)]",
+                  // Figma 1138:2523 — rect/sidebar name is 16px regular muted-foreground
+                  triggerShape === "pill" ? "text-sm font-medium" : "text-base font-normal text-muted-foreground group-data-[collapsible=icon]:hidden",
+                  compact && "hidden"
+                ),
+                children: currentAccount.name
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            ChevronsUpDown,
+            {
+              className: cn(
+                "text-muted-foreground shrink-0 ml-auto",
+                triggerShape === "pill" ? "size-3.5" : "size-4 group-data-[collapsible=icon]:hidden",
+                compact && "hidden"
+              ),
+              "aria-hidden": "true"
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        align: contentAlign,
+        className: "min-w-[var(--account-switch-content-min-width)]",
+        "data-placement": placement,
+        "data-slot": "account-switch-content",
+        children: [
+          header && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5", children: header }),
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+          ] }),
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider", children: "Contas" }),
+          /* @__PURE__ */ jsx(DropdownMenuGroup, { children: accounts.map((account) => renderAccountItem(account, 1)) }),
+          footer && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            footer
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+export { AccountSwitch };
+//# sourceMappingURL=chunk-N7VMQWM3.js.map
+//# sourceMappingURL=chunk-N7VMQWM3.js.map

package/dist/chunk-N7VMQWM3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/AccountSwitch/AccountSwitch.tsx"],"names":[],"mappings":"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","file":"chunk-N7VMQWM3.js","sourcesContent":["\"use client\";\n\nimport type {\n  AccountSwitchAccount,\n  AccountSwitchProps,\n} from \"./AccountSwitch.types\";\n\nimport { Check, ChevronsUpDown } from \"lucide-react\";\n\nimport { cn } from \"../../../lib/utils\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"../../primitives/Avatar\";\nimport { Badge } from \"../../primitives/Badge\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"../DropdownMenu\";\n\nconst MAX_NAVIGATION_DEPTH = 3;\n\nfunction getCurrentAccount(\n  accounts: AccountSwitchAccount[],\n): AccountSwitchAccount | undefined {\n  for (const account of accounts) {\n    if (account.isCurrent) {\n      return account;\n    }\n\n    const currentChild = getCurrentAccount(account.children ?? []);\n    if (currentChild) {\n      return currentChild;\n    }\n  }\n\n  return undefined;\n}\n\nfunction AccountSwitchItemContent({\n  account,\n  isCurrent,\n}: {\n  account: AccountSwitchAccount;\n  isCurrent: boolean;\n}) {\n  return (\n    <>\n      {account.logo ?? (\n        <Avatar size=\"xs\">\n          {account.avatarSrc && (\n            <AvatarImage alt={account.name} src={account.avatarSrc} />\n          )}\n          <AvatarFallback>\n            {account.avatarFallback ?? account.name.charAt(0)}\n          </AvatarFallback>\n        </Avatar>\n      )}\n      <span className=\"min-w-0 flex-1 truncate\">{account.name}</span>\n      {account.plan && (\n        <Badge\n          color={account.plan === \"PRO\" ? \"primary\" : \"muted\"}\n          size=\"sm\"\n          type=\"pill-color\"\n        >\n          {account.plan}\n        </Badge>\n      )}\n      {isCurrent && (\n        <Check aria-hidden=\"true\" className=\"size-3.5 text-primary\" />\n      )}\n    </>\n  );\n}\n\nfunction AccountSwitch({\n  className,\n  accounts,\n  triggerShape = \"pill\",\n  placement = \"sidebar\",\n  compact = false,\n  header,\n  footer,\n  onSelect,\n  ...props\n}: AccountSwitchProps) {\n  const currentAccount = getCurrentAccount(accounts) ?? accounts[0];\n  const contentAlign = placement === \"header\" ? \"end\" : \"start\";\n\n  const handleSelect = (account: AccountSwitchAccount) => {\n    if (!account.disabled && account.id !== currentAccount?.id) {\n      onSelect?.(account);\n    }\n  };\n\n  const renderAccountItem = (account: AccountSwitchAccount, depth: number) => {\n    const children =\n      depth < MAX_NAVIGATION_DEPTH ? (account.children ?? []) : [];\n    const hasChildren = children.length > 0;\n    const isCurrent = account.id === currentAccount?.id;\n    const stateProps = {\n      \"aria-current\": isCurrent ? (\"true\" as const) : undefined,\n      \"data-selected\": isCurrent ? \"true\" : undefined,\n    };\n\n    if (hasChildren) {\n      return (\n        <DropdownMenuSub key={account.id}>\n          <DropdownMenuSubTrigger\n            className={cn(\n              \"flex min-w-0 items-center gap-2\",\n              isCurrent && \"bg-accent text-accent-foreground\",\n            )}\n            data-account-switch-level={depth}\n            disabled={account.disabled}\n            {...stateProps}\n          >\n            <AccountSwitchItemContent account={account} isCurrent={isCurrent} />\n          </DropdownMenuSubTrigger>\n          <DropdownMenuSubContent\n            className=\"min-w-[var(--account-switch-content-min-width)]\"\n            data-account-switch-level={depth + 1}\n          >\n            <DropdownMenuGroup>\n              {children.map((childAccount) =>\n                renderAccountItem(childAccount, depth + 1),\n              )}\n            </DropdownMenuGroup>\n          </DropdownMenuSubContent>\n        </DropdownMenuSub>\n      );\n    }\n\n    return (\n      <DropdownMenuItem\n        key={account.id}\n        className={cn(\n          \"flex min-w-0 items-center gap-2\",\n          isCurrent && \"bg-accent text-accent-foreground\",\n        )}\n        data-account-switch-level={depth}\n        disabled={account.disabled}\n        onClick={() => {\n          handleSelect(account);\n        }}\n        {...stateProps}\n      >\n        <AccountSwitchItemContent account={account} isCurrent={isCurrent} />\n      </DropdownMenuItem>\n    );\n  };\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        <button\n          className={cn(\n            \"inline-flex min-w-0 items-center gap-2 h-[var(--input-size-md-h)] border transition-colors hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none\",\n            triggerShape === \"pill\"\n              ? [\"rounded-full bg-card text-card-foreground\", compact ? \"p-1.5\" : \"pl-1.5 pr-3\"]\n              : [\n                  // Figma 1138:2522 \"Input\" — bg background, border input, radius md;\n                  // inside an icon-collapsed sidebar only the logo remains (2418:9772)\n                  \"rounded-[var(--radius-md)] bg-background text-foreground\",\n                  compact ? \"px-2\" : \"px-3\",\n                  \"border-[color:var(--input-border-default)]\",\n                  \"group-data-[collapsible=icon]:px-2\",\n                ],\n            className,\n          )}\n          data-compact={compact ? \"\" : undefined}\n          data-placement={placement}\n          data-slot=\"account-switch-trigger\"\n          type=\"button\"\n          {...props}\n        >\n          {currentAccount && (\n            <>\n              {currentAccount.logo ?? (\n                <Avatar size=\"xs\">\n                  {currentAccount.avatarSrc && (\n                    <AvatarImage\n                      alt={currentAccount.name}\n                      src={currentAccount.avatarSrc}\n                    />\n                  )}\n                  <AvatarFallback>\n                    {currentAccount.avatarFallback ??\n                      currentAccount.name.charAt(0)}\n                  </AvatarFallback>\n                </Avatar>\n              )}\n              <span\n                className={cn(\n                  \"truncate max-w-[var(--account-switch-name-max-width)]\",\n                  // Figma 1138:2523 — rect/sidebar name is 16px regular muted-foreground\n                  triggerShape === \"pill\"\n                    ? \"text-sm font-medium\"\n                    : \"text-base font-normal text-muted-foreground group-data-[collapsible=icon]:hidden\",\n                  compact && \"hidden\",\n                )}\n              >\n                {currentAccount.name}\n              </span>\n            </>\n          )}\n          <ChevronsUpDown\n            className={cn(\n              \"text-muted-foreground shrink-0 ml-auto\",\n              triggerShape === \"pill\"\n                ? \"size-3.5\"\n                : \"size-4 group-data-[collapsible=icon]:hidden\",\n              compact && \"hidden\",\n            )}\n            aria-hidden=\"true\"\n          />\n        </button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent\n        align={contentAlign}\n        className=\"min-w-[var(--account-switch-content-min-width)]\"\n        data-placement={placement}\n        data-slot=\"account-switch-content\"\n      >\n        {header && (\n          <>\n            <div className=\"px-2 py-1.5\">{header}</div>\n            <DropdownMenuSeparator />\n          </>\n        )}\n        <DropdownMenuLabel className=\"text-xs font-medium text-muted-foreground uppercase tracking-wider\">\n          Contas\n        </DropdownMenuLabel>\n        <DropdownMenuGroup>\n          {accounts.map((account) => renderAccountItem(account, 1))}\n        </DropdownMenuGroup>\n        {footer && (\n          <>\n            <DropdownMenuSeparator />\n            {footer}\n          </>\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\nexport { AccountSwitch };\n"]}