@evinvest/uikit 0.30.0 → 0.31.0

package/dist/components/account-list.js

@@ -0,0 +1,128 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  ACCOUNT_LIST_BASE,
+  ACCOUNT_LIST_ITEM_ACTIONS,
+  ACCOUNT_LIST_ITEM_AVATAR,
+  ACCOUNT_LIST_ITEM_AVATAR_FALLBACK,
+  ACCOUNT_LIST_ITEM_BADGES,
+  ACCOUNT_LIST_ITEM_BASE,
+  ACCOUNT_LIST_ITEM_CHECK,
+  ACCOUNT_LIST_ITEM_CHECK_HIDDEN,
+  ACCOUNT_LIST_ITEM_CHECKED,
+  ACCOUNT_LIST_ITEM_DISABLED,
+  ACCOUNT_LIST_ITEM_FIGURE,
+  ACCOUNT_LIST_ITEM_HANDLE,
+  ACCOUNT_LIST_ITEM_NAME,
+  ACCOUNT_LIST_ITEM_RADIO,
+  ACCOUNT_LIST_ITEM_TEXT,
+  ACCOUNT_LIST_ITEM_UNCHECKED
+} from "../generated/account-list.js";
+import { cn } from "../lib/cn.js";
+import { useControllableState } from "../primitives/use-controllable-state.js";
+import { Avatar, AvatarFallback } from "./avatar.js";
+import { UiIcon } from "./ui-icons.js";
+const AccountListContext = React.createContext(null);
+function AccountList({
+  value,
+  defaultValue = "",
+  onValueChange,
+  className,
+  onKeyDown,
+  ...props
+}) {
+  const [current, setValue] = useControllableState({
+    ...value !== void 0 ? { value } : {},
+    defaultValue,
+    ...onValueChange ? { onChange: onValueChange } : {}
+  });
+  const move = (e) => {
+    const forward = e.key === "ArrowDown" || e.key === "ArrowRight";
+    const back = e.key === "ArrowUp" || e.key === "ArrowLeft";
+    if (!forward && !back) return;
+    const radios = Array.from(
+      e.currentTarget.querySelectorAll('[role="radio"]:not(:disabled)')
+    );
+    const at = radios.indexOf(document.activeElement);
+    if (at < 0) return;
+    e.preventDefault();
+    const next = radios[(at + (forward ? 1 : -1) + radios.length) % radios.length];
+    next?.focus();
+    next?.click();
+  };
+  return /* @__PURE__ */ jsx(AccountListContext.Provider, { value: { value: current, setValue }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "data-slot": "account-list",
+      className: cn(ACCOUNT_LIST_BASE, className),
+      onKeyDown: (e) => {
+        onKeyDown?.(e);
+        if (!e.defaultPrevented) move(e);
+      },
+      ...props
+    }
+  ) });
+}
+function AccountListItem({
+  value,
+  name,
+  handle,
+  avatar,
+  badges,
+  figure,
+  actions,
+  disabled,
+  className,
+  ...props
+}) {
+  const ctx = React.useContext(AccountListContext);
+  if (!ctx) throw new Error("AccountListItem must be used within <AccountList>");
+  const checked = ctx.value === value;
+  const initial = typeof name === "string" ? name.trim().charAt(0).toUpperCase() : "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "account-list-item",
+      "data-state": checked ? "checked" : "unchecked",
+      className: cn(
+        ACCOUNT_LIST_ITEM_BASE,
+        checked ? ACCOUNT_LIST_ITEM_CHECKED : ACCOUNT_LIST_ITEM_UNCHECKED,
+        disabled && ACCOUNT_LIST_ITEM_DISABLED,
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": checked,
+            disabled,
+            tabIndex: checked || ctx.value === "" ? 0 : -1,
+            onClick: () => ctx.setValue(value),
+            className: ACCOUNT_LIST_ITEM_RADIO,
+            children: [
+              avatar ?? /* @__PURE__ */ jsx(Avatar, { className: ACCOUNT_LIST_ITEM_AVATAR, children: /* @__PURE__ */ jsx(AvatarFallback, { className: ACCOUNT_LIST_ITEM_AVATAR_FALLBACK, children: initial }) }),
+              /* @__PURE__ */ jsxs("span", { className: ACCOUNT_LIST_ITEM_TEXT, children: [
+                /* @__PURE__ */ jsx("span", { className: ACCOUNT_LIST_ITEM_NAME, children: name }),
+                handle != null && /* @__PURE__ */ jsx("span", { className: ACCOUNT_LIST_ITEM_HANDLE, children: handle })
+              ] }),
+              badges != null && /* @__PURE__ */ jsx("span", { className: ACCOUNT_LIST_ITEM_BADGES, children: badges }),
+              figure != null && /* @__PURE__ */ jsx("span", { className: ACCOUNT_LIST_ITEM_FIGURE, children: figure }),
+              /* @__PURE__ */ jsx("span", { className: cn(ACCOUNT_LIST_ITEM_CHECK, !checked && ACCOUNT_LIST_ITEM_CHECK_HIDDEN), "aria-hidden": true, children: /* @__PURE__ */ jsx(UiIcon, { name: "check" }) })
+            ]
+          }
+        ),
+        actions != null && /* @__PURE__ */ jsx("div", { className: ACCOUNT_LIST_ITEM_ACTIONS, children: actions })
+      ]
+    }
+  );
+}
+export {
+  AccountList,
+  AccountListItem
+};
+//# sourceMappingURL=account-list.js.map

package/dist/components/account-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/account-list.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  ACCOUNT_LIST_BASE,\n  ACCOUNT_LIST_ITEM_ACTIONS,\n  ACCOUNT_LIST_ITEM_AVATAR,\n  ACCOUNT_LIST_ITEM_AVATAR_FALLBACK,\n  ACCOUNT_LIST_ITEM_BADGES,\n  ACCOUNT_LIST_ITEM_BASE,\n  ACCOUNT_LIST_ITEM_CHECK,\n  ACCOUNT_LIST_ITEM_CHECK_HIDDEN,\n  ACCOUNT_LIST_ITEM_CHECKED,\n  ACCOUNT_LIST_ITEM_DISABLED,\n  ACCOUNT_LIST_ITEM_FIGURE,\n  ACCOUNT_LIST_ITEM_HANDLE,\n  ACCOUNT_LIST_ITEM_NAME,\n  ACCOUNT_LIST_ITEM_RADIO,\n  ACCOUNT_LIST_ITEM_TEXT,\n  ACCOUNT_LIST_ITEM_UNCHECKED,\n} from \"../generated/account-list\";\nimport { cn } from \"../lib/cn\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { Avatar, AvatarFallback } from \"./avatar\";\nimport { UiIcon } from \"./ui-icons\";\n\ninterface AccountListContextValue {\n  value: string;\n  setValue: (next: string) => void;\n}\n\nconst AccountListContext = React.createContext<AccountListContextValue | null>(null);\n\nexport interface AccountListProps extends Omit<React.ComponentProps<\"div\">, \"onChange\" | \"defaultValue\"> {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /** Accessible name of the group, e.g. \"Accounts\". */\n  \"aria-label\": string;\n}\n\n/**\n * Pick the account you act as: one is current, arrows move and select\n * (radio-group semantics), so the current account is the only tab stop.\n */\nexport function AccountList({\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  className,\n  onKeyDown,\n  ...props\n}: AccountListProps) {\n  const [current, setValue] = useControllableState<string>({\n    ...(value !== undefined ? { value } : {}),\n    defaultValue,\n    ...(onValueChange ? { onChange: onValueChange } : {}),\n  });\n\n  const move = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    const forward = e.key === \"ArrowDown\" || e.key === \"ArrowRight\";\n    const back = e.key === \"ArrowUp\" || e.key === \"ArrowLeft\";\n    if (!forward && !back) return;\n    const radios = Array.from(\n      e.currentTarget.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]:not(:disabled)'),\n    );\n    const at = radios.indexOf(document.activeElement as HTMLButtonElement);\n    if (at < 0) return;\n    e.preventDefault();\n    const next = radios[(at + (forward ? 1 : -1) + radios.length) % radios.length];\n    next?.focus();\n    next?.click();\n  };\n\n  return (\n    <AccountListContext.Provider value={{ value: current, setValue }}>\n      <div\n        role=\"radiogroup\"\n        data-slot=\"account-list\"\n        className={cn(ACCOUNT_LIST_BASE, className)}\n        onKeyDown={(e) => {\n          onKeyDown?.(e);\n          if (!e.defaultPrevented) move(e);\n        }}\n        {...props}\n      />\n    </AccountListContext.Provider>\n  );\n}\n\nexport interface AccountListItemProps extends Omit<React.ComponentProps<\"div\">, \"value\" | \"title\"> {\n  value: string;\n  name: React.ReactNode;\n  /** A line under the name: handle, email. */\n  handle?: React.ReactNode;\n  /** Replaces the initial-in-a-square default. */\n  avatar?: React.ReactNode;\n  /** Role badges after the name block. */\n  badges?: React.ReactNode;\n  /** A figure at the end, set in the serif face: a balance. */\n  figure?: React.ReactNode;\n  /** Controls beside the row (a menu button); they cannot live inside the radio. */\n  actions?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport function AccountListItem({\n  value,\n  name,\n  handle,\n  avatar,\n  badges,\n  figure,\n  actions,\n  disabled,\n  className,\n  ...props\n}: AccountListItemProps) {\n  const ctx = React.useContext(AccountListContext);\n  if (!ctx) throw new Error(\"AccountListItem must be used within <AccountList>\");\n  const checked = ctx.value === value;\n  const initial = typeof name === \"string\" ? name.trim().charAt(0).toUpperCase() : \"\";\n  return (\n    <div\n      data-slot=\"account-list-item\"\n      data-state={checked ? \"checked\" : \"unchecked\"}\n      className={cn(\n        ACCOUNT_LIST_ITEM_BASE,\n        checked ? ACCOUNT_LIST_ITEM_CHECKED : ACCOUNT_LIST_ITEM_UNCHECKED,\n        disabled && ACCOUNT_LIST_ITEM_DISABLED,\n        className,\n      )}\n      {...props}\n    >\n      <button\n        type=\"button\"\n        role=\"radio\"\n        aria-checked={checked}\n        disabled={disabled}\n        // Until one is chosen every radio is a tab stop, or the group could not be entered.\n        tabIndex={checked || ctx.value === \"\" ? 0 : -1}\n        onClick={() => ctx.setValue(value)}\n        className={ACCOUNT_LIST_ITEM_RADIO}\n      >\n        {avatar ?? (\n          <Avatar className={ACCOUNT_LIST_ITEM_AVATAR}>\n            <AvatarFallback className={ACCOUNT_LIST_ITEM_AVATAR_FALLBACK}>{initial}</AvatarFallback>\n          </Avatar>\n        )}\n        <span className={ACCOUNT_LIST_ITEM_TEXT}>\n          <span className={ACCOUNT_LIST_ITEM_NAME}>{name}</span>\n          {handle != null && <span className={ACCOUNT_LIST_ITEM_HANDLE}>{handle}</span>}\n        </span>\n        {badges != null && <span className={ACCOUNT_LIST_ITEM_BADGES}>{badges}</span>}\n        {figure != null && <span className={ACCOUNT_LIST_ITEM_FIGURE}>{figure}</span>}\n        <span className={cn(ACCOUNT_LIST_ITEM_CHECK, !checked && ACCOUNT_LIST_ITEM_CHECK_HIDDEN)} aria-hidden>\n          <UiIcon name=\"check\" />\n        </span>\n      </button>\n      {actions != null && <div className={ACCOUNT_LIST_ITEM_ACTIONS}>{actions}</div>}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/account-menu-profile.js

@@ -0,0 +1,114 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../lib/cn.js";
+import { Avatar, AvatarFallback } from "./avatar.js";
+import { Badge } from "./badge.js";
+import {
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger
+} from "./dropdown-menu.js";
+import { Switch } from "./switch.js";
+import { UiIcon } from "./ui-icons.js";
+function ProfileTabs({
+  tabs,
+  value,
+  onChange,
+  label = "Sections"
+}) {
+  const move = (e, index) => {
+    const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
+    if (step === 0) return;
+    e.stopPropagation();
+    e.preventDefault();
+    const target = (index + step + tabs.length) % tabs.length;
+    const next = tabs[target];
+    if (!next) return;
+    onChange(next.id);
+    e.currentTarget.parentElement?.querySelectorAll('[role="menuitemradio"]')[target]?.focus();
+  };
+  return /* @__PURE__ */ jsx("div", { role: "group", "aria-label": label, "data-slot": "account-menu-tabs", className: "flex border-b border-border-subtle", children: tabs.map((t, i) => {
+    const selected = t.id === value;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "menuitemradio",
+        "aria-checked": selected,
+        tabIndex: -1,
+        onClick: () => onChange(t.id),
+        onKeyDown: (e) => move(e, i),
+        className: cn(
+          "-mb-px h-8 flex-1 border-b px-3 text-body font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          selected ? "border-primary text-ink" : "border-transparent text-ink-mid hover:text-ink"
+        ),
+        children: t.label
+      },
+      t.id
+    );
+  }) });
+}
+function ProfileCard({
+  name,
+  plan,
+  initials,
+  onOpen
+}) {
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Avatar, { className: "size-14 shrink-0 rounded-full", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "font-serif text-h2 font-light text-ink", children: initials.slice(0, 1) }) }),
+    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate text-body font-medium text-ink", children: name }),
+      plan && /* @__PURE__ */ jsx("span", { className: "text-caption text-ink-soft", children: plan })
+    ] }),
+    onOpen && /* @__PURE__ */ jsx(UiIcon, { name: "chevron-right", className: "size-4 text-ink-soft" })
+  ] });
+  if (!onOpen) {
+    return /* @__PURE__ */ jsx("div", { "data-slot": "account-menu-card", className: "flex w-full items-center gap-2.5 p-2", children: content });
+  }
+  return /* @__PURE__ */ jsx(DropdownMenuItem, { "data-slot": "account-menu-card", className: "h-auto gap-2.5 p-2", onClick: onOpen, children: content });
+}
+function ProfileSettingRows({ profile }) {
+  const { language, darkTheme, colorTheme, icons } = profile;
+  if (!language && !darkTheme && !colorTheme) return null;
+  const currentColor = colorTheme?.options.find((o) => o.id === colorTheme.value)?.label;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+    language && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => language.onSelect?.(), children: [
+      icons?.language,
+      /* @__PURE__ */ jsx("span", { className: "flex-1", children: language.label }),
+      /* @__PURE__ */ jsx(Badge, { children: language.value })
+    ] }),
+    darkTheme && /* @__PURE__ */ jsxs(
+      DropdownMenuItem,
+      {
+        role: "menuitemcheckbox",
+        "aria-checked": darkTheme.checked,
+        onClick: () => darkTheme.onCheckedChange(!darkTheme.checked),
+        children: [
+          icons?.darkTheme,
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children: darkTheme.label }),
+          /* @__PURE__ */ jsx(Switch, { checked: darkTheme.checked, tabIndex: -1, "aria-hidden": true, className: "pointer-events-none" })
+        ]
+      }
+    ),
+    colorTheme && /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+      /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [
+        icons?.colorTheme,
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children: colorTheme.label }),
+        currentColor && /* @__PURE__ */ jsx("span", { className: "text-body-s text-ink-soft", children: currentColor })
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, { value: colorTheme.value, onValueChange: colorTheme.onValueChange, children: colorTheme.options.map((o) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: o.id, children: o.label }, o.id)) }) })
+    ] })
+  ] });
+}
+export {
+  ProfileCard,
+  ProfileSettingRows,
+  ProfileTabs
+};
+//# sourceMappingURL=account-menu-profile.js.map

package/dist/components/account-menu-profile.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/account-menu-profile.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Avatar, AvatarFallback } from \"./avatar\";\nimport { Badge } from \"./badge\";\nimport {\n  DropdownMenuItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n} from \"./dropdown-menu\";\nimport { Switch } from \"./switch\";\nimport { UiIcon } from \"./ui-icons\";\n\nexport interface AccountMenuTab {\n  id: string;\n  label: React.ReactNode;\n  /** Shown instead of the menu body when this tab is current; the first tab is always the menu itself. */\n  content?: React.ReactNode;\n}\n\nexport interface AccountMenuProfile {\n  /** Under the name on the profile card, e.g. \"Free\". */\n  plan?: string;\n  /** Makes the card a menu item that runs this and closes the menu, e.g. to open the account settings. */\n  onOpenProfile?: () => void;\n  tabs?: readonly AccountMenuTab[];\n  /** Names the tab row for assistive tech. Default `\"Sections\"`. */\n  tabsLabel?: string;\n  /** Current tab id (controlled). */\n  tab?: string;\n  onTabChange?: (id: string) => void;\n  /** A row with a short value badge on the right (\"EN\"); picking it runs `onSelect`. */\n  language?: { label: string; value: string; onSelect?: () => void };\n  /** A row with a switch; the menu closes after a toggle. */\n  darkTheme?: { label: string; checked: boolean; onCheckedChange: (checked: boolean) => void };\n  /** A submenu of radio options; the current one's label shows on the row. */\n  colorTheme?: {\n    label: string;\n    value: string;\n    options: readonly { id: string; label: string }[];\n    onValueChange: (id: string) => void;\n  };\n  /** Glyphs for the rows, so the kit carries no icon set. */\n  icons?: { language?: React.ReactNode; darkTheme?: React.ReactNode; colorTheme?: React.ReactNode };\n}\n\n/**\n * The tabs are `menuitemradio` items in a group, not a tablist: a menu may only\n * hold items, and this way the menu's own arrow-key roving reaches them.\n * Selecting one does not close the menu.\n */\nexport function ProfileTabs({\n  tabs,\n  value,\n  onChange,\n  label = \"Sections\",\n}: {\n  tabs: readonly AccountMenuTab[];\n  value: string;\n  onChange: (id: string) => void;\n  label?: string | undefined;\n}) {\n  const move = (e: React.KeyboardEvent<HTMLButtonElement>, index: number) => {\n    const step = e.key === \"ArrowRight\" ? 1 : e.key === \"ArrowLeft\" ? -1 : 0;\n    if (step === 0) return;\n    // Up and Down belong to the menu; Left and Right stay in the row.\n    e.stopPropagation();\n    e.preventDefault();\n    const target = (index + step + tabs.length) % tabs.length;\n    const next = tabs[target];\n    if (!next) return;\n    onChange(next.id);\n    e.currentTarget.parentElement?.querySelectorAll<HTMLElement>('[role=\"menuitemradio\"]')[target]?.focus();\n  };\n  return (\n    <div role=\"group\" aria-label={label} data-slot=\"account-menu-tabs\" className=\"flex border-b border-border-subtle\">\n      {tabs.map((t, i) => {\n        const selected = t.id === value;\n        return (\n          <button\n            key={t.id}\n            type=\"button\"\n            role=\"menuitemradio\"\n            aria-checked={selected}\n            tabIndex={-1}\n            onClick={() => onChange(t.id)}\n            onKeyDown={(e) => move(e, i)}\n            className={cn(\n              \"-mb-px h-8 flex-1 border-b px-3 text-body font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n              selected ? \"border-primary text-ink\" : \"border-transparent text-ink-mid hover:text-ink\",\n            )}\n          >\n            {t.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nexport function ProfileCard({\n  name,\n  plan,\n  initials,\n  onOpen,\n}: {\n  name: string;\n  plan?: string | undefined;\n  initials: string;\n  onOpen?: (() => void) | undefined;\n}) {\n  const content = (\n    <>\n      <Avatar className=\"size-14 shrink-0 rounded-full\">\n        <AvatarFallback className=\"font-serif text-h2 font-light text-ink\">{initials.slice(0, 1)}</AvatarFallback>\n      </Avatar>\n      <span className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <span className=\"truncate text-body font-medium text-ink\">{name}</span>\n        {plan && <span className=\"text-caption text-ink-soft\">{plan}</span>}\n      </span>\n      {onOpen && <UiIcon name=\"chevron-right\" className=\"size-4 text-ink-soft\" />}\n    </>\n  );\n  if (!onOpen) {\n    return (\n      <div data-slot=\"account-menu-card\" className=\"flex w-full items-center gap-2.5 p-2\">\n        {content}\n      </div>\n    );\n  }\n  // A real menu item: it joins the arrow-key order and closes the menu, so a dialog opened from it is not left under the menu.\n  return (\n    <DropdownMenuItem data-slot=\"account-menu-card\" className=\"h-auto gap-2.5 p-2\" onClick={onOpen}>\n      {content}\n    </DropdownMenuItem>\n  );\n}\n\nexport function ProfileSettingRows({ profile }: { profile: AccountMenuProfile }) {\n  const { language, darkTheme, colorTheme, icons } = profile;\n  if (!language && !darkTheme && !colorTheme) return null;\n  const currentColor = colorTheme?.options.find((o) => o.id === colorTheme.value)?.label;\n  return (\n    <>\n      <DropdownMenuSeparator />\n      {language && (\n        <DropdownMenuItem onClick={() => language.onSelect?.()}>\n          {icons?.language}\n          <span className=\"flex-1\">{language.label}</span>\n          <Badge>{language.value}</Badge>\n        </DropdownMenuItem>\n      )}\n      {darkTheme && (\n        <DropdownMenuItem\n          role=\"menuitemcheckbox\"\n          aria-checked={darkTheme.checked}\n          onClick={() => darkTheme.onCheckedChange(!darkTheme.checked)}\n        >\n          {icons?.darkTheme}\n          <span className=\"flex-1\">{darkTheme.label}</span>\n          {/* Presentational: the row is the control, so the switch stays out of the tab order. */}\n          <Switch checked={darkTheme.checked} tabIndex={-1} aria-hidden className=\"pointer-events-none\" />\n        </DropdownMenuItem>\n      )}\n      {colorTheme && (\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>\n            {icons?.colorTheme}\n            <span className=\"flex-1\">{colorTheme.label}</span>\n            {currentColor && <span className=\"text-body-s text-ink-soft\">{currentColor}</span>}\n          </DropdownMenuSubTrigger>\n          <DropdownMenuSubContent>\n            <DropdownMenuRadioGroup value={colorTheme.value} onValueChange={colorTheme.onValueChange}>\n              {colorTheme.options.map((o) => (\n                <DropdownMenuRadioItem key={o.id} value={o.id}>\n                  {o.label}\n                </DropdownMenuRadioItem>\n              ))}\n            </DropdownMenuRadioGroup>\n          </DropdownMenuSubContent>\n        </DropdownMenuSub>\n      )}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/account-menu.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "../lib/cn.js";
 import { Avatar, AvatarFallback } from "./avatar.js";
@@ -12,6 +12,12 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger
 } from "./dropdown-menu.js";
+import { useControllableState } from "../primitives/use-controllable-state.js";
+import {
+  ProfileCard,
+  ProfileSettingRows,
+  ProfileTabs
+} from "./account-menu-profile.js";
 const initials = (account) => {
   const words = account.name?.trim().split(/\s+/).filter(Boolean) ?? [];
   const letters = words.length > 0 ? words.slice(0, 2).map((w) => Array.from(w)[0]) : [Array.from(account.email)[0]];
@@ -25,9 +31,17 @@ function AccountMenu({
   onSignOut,
   linkComponent,
   labels = {},
+  profile,
   className
 }) {
   const Link = linkComponent ?? "a";
+  const tabs = profile?.tabs ?? [];
+  const [tab, setTab] = useControllableState({
+    ...profile?.tab !== void 0 ? { value: profile.tab } : {},
+    defaultValue: tabs[0]?.id ?? "",
+    ...profile?.onTabChange ? { onChange: profile.onTabChange } : {}
+  });
+  const otherTab = tabs.length > 0 && tab !== tabs[0]?.id ? tabs.find((t) => t.id === tab) : void 0;
   return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsx(
       DropdownMenuTrigger,
@@ -38,29 +52,42 @@ function AccountMenu({
         children: /* @__PURE__ */ jsx(Avatar, { children: /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs font-medium text-ink", children: initials(account) }) })
       }
     ),
-    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: "w-64", children: [
-      /* @__PURE__ */ jsxs(DropdownMenuLabel, { className: "flex flex-col", children: [
-        account.name && /* @__PURE__ */ jsx("span", { className: "truncate text-ink", children: account.name }),
-        /* @__PURE__ */ jsx("span", { className: "truncate font-normal text-ink-soft", children: account.email })
-      ] }),
-      manageHref && /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsx("a", { href: manageHref, children: labels.manage ?? "Manage account" }) }),
-      groups.map((group) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: profile ? "w-75" : "w-64", children: [
+      tabs.length > 0 && /* @__PURE__ */ jsx(ProfileTabs, { tabs, value: tab, onChange: setTab, label: profile?.tabsLabel }),
+      otherTab ? otherTab.content : /* @__PURE__ */ jsxs(Fragment, { children: [
+        profile ? /* @__PURE__ */ jsx(
+          ProfileCard,
+          {
+            name: account.name || account.email,
+            plan: profile.plan,
+            initials: initials(account),
+            onOpen: profile.onOpenProfile
+          }
+        ) : /* @__PURE__ */ jsxs(DropdownMenuLabel, { className: "flex flex-col", children: [
+          account.name && /* @__PURE__ */ jsx("span", { className: "truncate text-ink", children: account.name }),
+          /* @__PURE__ */ jsx("span", { className: "truncate font-normal text-ink-soft", children: account.email })
+        ] }),
+        profile && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+        manageHref && /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsx("a", { href: manageHref, children: labels.manage ?? "Manage account" }) }),
+        groups.map((group) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+            group.label && /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs text-ink-soft", children: group.label }),
+            group.items.map((item) => {
+              const Item = item.external ? "a" : Link;
+              const Icon = item.icon;
+              return /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs(Item, { href: item.href, children: [
+                Icon && /* @__PURE__ */ jsx(Icon, { className: "size-4" }),
+                item.label
+              ] }) }, item.id);
+            })
+          ] })
+        ] }, group.id)),
+        profile && /* @__PURE__ */ jsx(ProfileSettingRows, { profile }),
         /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-        /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
-          group.label && /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-xs text-ink-soft", children: group.label }),
-          group.items.map((item) => {
-            const Item = item.external ? "a" : Link;
-            const Icon = item.icon;
-            return /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs(Item, { href: item.href, children: [
-              Icon && /* @__PURE__ */ jsx(Icon, { className: "size-4" }),
-              item.label
-            ] }) }, item.id);
-          })
-        ] })
-      ] }, group.id)),
-      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-      /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsx("a", { href: switchHref, children: labels.switchAccount ?? "Switch account" }) }),
-      /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: onSignOut, children: labels.signOut ?? "Sign out" })
+        /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsx("a", { href: switchHref, children: labels.switchAccount ?? "Switch account" }) }),
+        /* @__PURE__ */ jsx(DropdownMenuItem, { variant: profile ? "destructive" : "neutral", onClick: onSignOut, children: labels.signOut ?? "Sign out" })
+      ] })
     ] })
   ] });
 }

package/dist/components/account-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/account-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Avatar, AvatarFallback } from \"./avatar\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu\";\nimport type { NavGroup } from \"./nav-model\";\n\nexport interface AccountMenuLabels {\n  /** Accessible name of the trigger. Default `\"Account\"`. */\n  trigger?: string;\n  /** Default `\"Manage account\"`. */\n  manage?: string;\n  /** Default `\"Switch account\"`. */\n  switchAccount?: string;\n  /** Default `\"Sign out\"`. */\n  signOut?: string;\n}\n\nexport interface AccountMenuProps {\n  account: { name?: string | null | undefined; email: string };\n  /** The account center, on the identity provider's origin; no item without it. */\n  manageHref?: string | undefined;\n  /** A full page load to the sign-in that offers the account chooser. */\n  switchHref: string;\n  /** The service's own entries, between the account center and switching. Draws `label`, `icon`, `external`. */\n  groups?: readonly NavGroup[];\n  onSignOut: () => void;\n  linkComponent?: React.ElementType;\n  labels?: AccountMenuLabels;\n  className?: string;\n}\n\nconst initials = (account: AccountMenuProps[\"account\"]) => {\n  const words = account.name?.trim().split(/\\s+/).filter(Boolean) ?? [];\n  const letters = words.length > 0 ? words.slice(0, 2).map(w => Array.from(w)[0]) : [Array.from(account.email)[0]];\n  return letters.join(\"\").toUpperCase();\n};\n\n/**\n * Who is signed in, top right. The order is fixed — the account, the account\n * center, the service's groups, switching, signing out — so every service's\n * menu reads the same; a service adds groups and nothing else.\n */\nexport function AccountMenu({\n  account,\n  manageHref,\n  switchHref,\n  groups = [],\n  onSignOut,\n  linkComponent,\n  labels = {},\n  className,\n}: AccountMenuProps) {\n  const Link = linkComponent ?? \"a\";\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        data-slot=\"account-menu-trigger\"\n        aria-label={labels.trigger ?? \"Account\"}\n        className={cn(\"rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring\", className)}\n      >\n        <Avatar>\n          <AvatarFallback className=\"text-xs font-medium text-ink\">{initials(account)}</AvatarFallback>\n        </Avatar>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-64\">\n        <DropdownMenuLabel className=\"flex flex-col\">\n          {account.name && <span className=\"truncate text-ink\">{account.name}</span>}\n          <span className=\"truncate font-normal text-ink-soft\">{account.email}</span>\n        </DropdownMenuLabel>\n        {manageHref && (\n          <DropdownMenuItem asChild>\n            <a href={manageHref}>{labels.manage ?? \"Manage account\"}</a>\n          </DropdownMenuItem>\n        )}\n        {groups.map(group => (\n          <React.Fragment key={group.id}>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              {group.label && <DropdownMenuLabel className=\"text-xs text-ink-soft\">{group.label}</DropdownMenuLabel>}\n              {group.items.map(item => {\n                const Item = item.external ? \"a\" : Link;\n                const Icon = item.icon;\n                return (\n                  <DropdownMenuItem key={item.id} asChild>\n                    <Item href={item.href}>\n                      {Icon && <Icon className=\"size-4\" />}\n                      {item.label}\n                    </Item>\n                  </DropdownMenuItem>\n                );\n              })}\n            </DropdownMenuGroup>\n          </React.Fragment>\n        ))}\n        <DropdownMenuSeparator />\n        <DropdownMenuItem asChild>\n          <a href={switchHref}>{labels.switchAccount ?? \"Switch account\"}</a>\n        </DropdownMenuItem>\n        <DropdownMenuItem onClick={onSignOut}>{labels.signOut ?? \"Sign out\"}</DropdownMenuItem>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":";AAuEU,cAIF,YAJE;AArEV,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,QAAQ,sBAAsB;AACvC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AA4BP,MAAM,WAAW,CAAC,YAAyC;AACzD,QAAM,QAAQ,QAAQ,MAAM,KAAK,EAAE,MAAM,KAAK,EAAE,OAAO,OAAO,KAAK,CAAC;AACpE,QAAM,UAAU,MAAM,SAAS,IAAI,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,OAAK,MAAM,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,KAAK,EAAE,CAAC,CAAC;AAC/G,SAAO,QAAQ,KAAK,EAAE,EAAE,YAAY;AACtC;AAOO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AACF,GAAqB;AACnB,QAAM,OAAO,iBAAiB;AAC9B,SACE,qBAAC,gBACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,cAAY,OAAO,WAAW;AAAA,QAC9B,WAAW,GAAG,0EAA0E,SAAS;AAAA,QAEjG,8BAAC,UACC,8BAAC,kBAAe,WAAU,gCAAgC,mBAAS,OAAO,GAAE,GAC9E;AAAA;AAAA,IACF;AAAA,IACA,qBAAC,uBAAoB,OAAM,OAAM,WAAU,QACzC;AAAA,2BAAC,qBAAkB,WAAU,iBAC1B;AAAA,gBAAQ,QAAQ,oBAAC,UAAK,WAAU,qBAAqB,kBAAQ,MAAK;AAAA,QACnE,oBAAC,UAAK,WAAU,sCAAsC,kBAAQ,OAAM;AAAA,SACtE;AAAA,MACC,cACC,oBAAC,oBAAiB,SAAO,MACvB,8BAAC,OAAE,MAAM,YAAa,iBAAO,UAAU,kBAAiB,GAC1D;AAAA,MAED,OAAO,IAAI,WACV,qBAAC,MAAM,UAAN,EACC;AAAA,4BAAC,yBAAsB;AAAA,QACvB,qBAAC,qBACE;AAAA,gBAAM,SAAS,oBAAC,qBAAkB,WAAU,yBAAyB,gBAAM,OAAM;AAAA,UACjF,MAAM,MAAM,IAAI,UAAQ;AACvB,kBAAM,OAAO,KAAK,WAAW,MAAM;AACnC,kBAAM,OAAO,KAAK;AAClB,mBACE,oBAAC,oBAA+B,SAAO,MACrC,+BAAC,QAAK,MAAM,KAAK,MACd;AAAA,sBAAQ,oBAAC,QAAK,WAAU,UAAS;AAAA,cACjC,KAAK;AAAA,eACR,KAJqB,KAAK,EAK5B;AAAA,UAEJ,CAAC;AAAA,WACH;AAAA,WAhBmB,MAAM,EAiB3B,CACD;AAAA,MACD,oBAAC,yBAAsB;AAAA,MACvB,oBAAC,oBAAiB,SAAO,MACvB,8BAAC,OAAE,MAAM,YAAa,iBAAO,iBAAiB,kBAAiB,GACjE;AAAA,MACA,oBAAC,oBAAiB,SAAS,WAAY,iBAAO,WAAW,YAAW;AAAA,OACtE;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/account-menu.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Avatar, AvatarFallback } from \"./avatar\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"./dropdown-menu\";\nimport type { NavGroup } from \"./nav-model\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport {\n  ProfileCard,\n  ProfileSettingRows,\n  ProfileTabs,\n  type AccountMenuProfile,\n  type AccountMenuTab,\n} from \"./account-menu-profile\";\n\nexport type { AccountMenuProfile, AccountMenuTab };\n\nexport interface AccountMenuLabels {\n  /** Accessible name of the trigger. Default `\"Account\"`. */\n  trigger?: string;\n  /** Default `\"Manage account\"`. */\n  manage?: string;\n  /** Default `\"Switch account\"`. */\n  switchAccount?: string;\n  /** Default `\"Sign out\"`. */\n  signOut?: string;\n}\n\nexport interface AccountMenuProps {\n  account: { name?: string | null | undefined; email: string };\n  /** The account center, on the identity provider's origin; no item without it. */\n  manageHref?: string | undefined;\n  /** A full page load to the sign-in that offers the account chooser. */\n  switchHref: string;\n  /** The service's own entries, between the account center and switching. Draws `label`, `icon`, `external`. */\n  groups?: readonly NavGroup[];\n  onSignOut: () => void;\n  linkComponent?: React.ElementType;\n  labels?: AccountMenuLabels;\n  /**\n   * The wide profile form: tabs, a profile card, language and theme rows. Absent,\n   * the menu is the compact one it always was.\n   */\n  profile?: AccountMenuProfile;\n  className?: string;\n}\n\nconst initials = (account: AccountMenuProps[\"account\"]) => {\n  const words = account.name?.trim().split(/\\s+/).filter(Boolean) ?? [];\n  const letters = words.length > 0 ? words.slice(0, 2).map(w => Array.from(w)[0]) : [Array.from(account.email)[0]];\n  return letters.join(\"\").toUpperCase();\n};\n\n/**\n * Who is signed in, top right. The order is fixed — the account, the account\n * center, the service's groups, switching, signing out — so every service's\n * menu reads the same; a service adds groups and nothing else.\n */\nexport function AccountMenu({\n  account,\n  manageHref,\n  switchHref,\n  groups = [],\n  onSignOut,\n  linkComponent,\n  labels = {},\n  profile,\n  className,\n}: AccountMenuProps) {\n  const Link = linkComponent ?? \"a\";\n  const tabs = profile?.tabs ?? [];\n  const [tab, setTab] = useControllableState<string>({\n    ...(profile?.tab !== undefined ? { value: profile.tab } : {}),\n    defaultValue: tabs[0]?.id ?? \"\",\n    ...(profile?.onTabChange ? { onChange: profile.onTabChange } : {}),\n  });\n  const otherTab = tabs.length > 0 && tab !== tabs[0]?.id ? tabs.find((t) => t.id === tab) : undefined;\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger\n        data-slot=\"account-menu-trigger\"\n        aria-label={labels.trigger ?? \"Account\"}\n        className={cn(\"rounded-full outline-none focus-visible:ring-2 focus-visible:ring-ring\", className)}\n      >\n        <Avatar>\n          <AvatarFallback className=\"text-xs font-medium text-ink\">{initials(account)}</AvatarFallback>\n        </Avatar>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className={profile ? \"w-75\" : \"w-64\"}>\n        {tabs.length > 0 && <ProfileTabs tabs={tabs} value={tab} onChange={setTab} label={profile?.tabsLabel} />}\n        {otherTab ? (\n          otherTab.content\n        ) : (\n          <>\n        {profile ? (\n          <ProfileCard\n            name={account.name || account.email}\n            plan={profile.plan}\n            initials={initials(account)}\n            onOpen={profile.onOpenProfile}\n          />\n        ) : (\n          <DropdownMenuLabel className=\"flex flex-col\">\n            {account.name && <span className=\"truncate text-ink\">{account.name}</span>}\n            <span className=\"truncate font-normal text-ink-soft\">{account.email}</span>\n          </DropdownMenuLabel>\n        )}\n        {profile && <DropdownMenuSeparator />}\n        {manageHref && (\n          <DropdownMenuItem asChild>\n            <a href={manageHref}>{labels.manage ?? \"Manage account\"}</a>\n          </DropdownMenuItem>\n        )}\n        {groups.map(group => (\n          <React.Fragment key={group.id}>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              {group.label && <DropdownMenuLabel className=\"text-xs text-ink-soft\">{group.label}</DropdownMenuLabel>}\n              {group.items.map(item => {\n                const Item = item.external ? \"a\" : Link;\n                const Icon = item.icon;\n                return (\n                  <DropdownMenuItem key={item.id} asChild>\n                    <Item href={item.href}>\n                      {Icon && <Icon className=\"size-4\" />}\n                      {item.label}\n                    </Item>\n                  </DropdownMenuItem>\n                );\n              })}\n            </DropdownMenuGroup>\n          </React.Fragment>\n        ))}\n        {profile && <ProfileSettingRows profile={profile} />}\n        <DropdownMenuSeparator />\n        <DropdownMenuItem asChild>\n          <a href={switchHref}>{labels.switchAccount ?? \"Switch account\"}</a>\n        </DropdownMenuItem>\n        <DropdownMenuItem variant={profile ? \"destructive\" : \"neutral\"} onClick={onSignOut}>\n          {labels.signOut ?? \"Sign out\"}\n        </DropdownMenuItem>\n          </>\n        )}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/account-settings-dialog.js

@@ -0,0 +1,84 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  ACCOUNT_SETTINGS_DIALOG_CLOSE,
+  ACCOUNT_SETTINGS_DIALOG_CONTENT,
+  ACCOUNT_SETTINGS_DIALOG_DESCRIPTION,
+  ACCOUNT_SETTINGS_DIALOG_ENTRY,
+  ACCOUNT_SETTINGS_DIALOG_FOOTER,
+  ACCOUNT_SETTINGS_DIALOG_HEADING,
+  ACCOUNT_SETTINGS_DIALOG_LIST,
+  ACCOUNT_SETTINGS_DIALOG_PANE,
+  ACCOUNT_SETTINGS_DIALOG_PANEL,
+  ACCOUNT_SETTINGS_DIALOG_SIDEBAR,
+  ACCOUNT_SETTINGS_DIALOG_TABS,
+  ACCOUNT_SETTINGS_DIALOG_TITLE
+} from "../generated/account-settings-dialog.js";
+import { cn } from "../lib/cn.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle } from "./dialog.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs.js";
+import { IconButton } from "./icon-button.js";
+import { UiIcon } from "./ui-icons.js";
+function AccountSettingsDialog({
+  open,
+  defaultOpen,
+  onOpenChange,
+  title,
+  description,
+  sections,
+  value,
+  defaultValue,
+  onValueChange,
+  sidebarFooter,
+  labels = {},
+  className
+}) {
+  const first = sections[0]?.id ?? "";
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      ...open !== void 0 ? { open } : {},
+      ...defaultOpen !== void 0 ? { defaultOpen } : {},
+      ...onOpenChange ? { onOpenChange } : {},
+      children: /* @__PURE__ */ jsxs(
+        DialogContent,
+        {
+          showCloseButton: false,
+          className: cn(ACCOUNT_SETTINGS_DIALOG_CONTENT, className),
+          children: [
+            /* @__PURE__ */ jsxs(
+              Tabs,
+              {
+                orientation: "vertical",
+                ...value !== void 0 ? { value } : { defaultValue: defaultValue ?? first },
+                ...onValueChange ? { onValueChange } : {},
+                className: ACCOUNT_SETTINGS_DIALOG_TABS,
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: ACCOUNT_SETTINGS_DIALOG_SIDEBAR, children: [
+                    /* @__PURE__ */ jsx(TabsList, { className: ACCOUNT_SETTINGS_DIALOG_LIST, children: sections.map((s) => /* @__PURE__ */ jsxs(TabsTrigger, { value: s.id, className: ACCOUNT_SETTINGS_DIALOG_ENTRY, children: [
+                      s.icon,
+                      s.label
+                    ] }, s.id)) }),
+                    sidebarFooter != null && /* @__PURE__ */ jsx("div", { className: ACCOUNT_SETTINGS_DIALOG_FOOTER, children: sidebarFooter })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { className: ACCOUNT_SETTINGS_DIALOG_PANE, children: [
+                    /* @__PURE__ */ jsxs("div", { className: ACCOUNT_SETTINGS_DIALOG_HEADING, children: [
+                      /* @__PURE__ */ jsx(DialogTitle, { className: ACCOUNT_SETTINGS_DIALOG_TITLE, children: title }),
+                      description != null && /* @__PURE__ */ jsx(DialogDescription, { className: ACCOUNT_SETTINGS_DIALOG_DESCRIPTION, children: description })
+                    ] }),
+                    sections.map((s) => /* @__PURE__ */ jsx(TabsContent, { value: s.id, className: ACCOUNT_SETTINGS_DIALOG_PANEL, children: s.content }, s.id))
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { "aria-label": labels.close ?? "Close", className: ACCOUNT_SETTINGS_DIALOG_CLOSE, children: /* @__PURE__ */ jsx(UiIcon, { name: "x" }) }) })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  AccountSettingsDialog
+};
+//# sourceMappingURL=account-settings-dialog.js.map

package/dist/components/account-settings-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/account-settings-dialog.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  ACCOUNT_SETTINGS_DIALOG_CLOSE,\n  ACCOUNT_SETTINGS_DIALOG_CONTENT,\n  ACCOUNT_SETTINGS_DIALOG_DESCRIPTION,\n  ACCOUNT_SETTINGS_DIALOG_ENTRY,\n  ACCOUNT_SETTINGS_DIALOG_FOOTER,\n  ACCOUNT_SETTINGS_DIALOG_HEADING,\n  ACCOUNT_SETTINGS_DIALOG_LIST,\n  ACCOUNT_SETTINGS_DIALOG_PANE,\n  ACCOUNT_SETTINGS_DIALOG_PANEL,\n  ACCOUNT_SETTINGS_DIALOG_SIDEBAR,\n  ACCOUNT_SETTINGS_DIALOG_TABS,\n  ACCOUNT_SETTINGS_DIALOG_TITLE,\n} from \"../generated/account-settings-dialog\";\nimport { cn } from \"../lib/cn\";\nimport { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle } from \"./dialog\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"./tabs\";\nimport { IconButton } from \"./icon-button\";\nimport { UiIcon } from \"./ui-icons\";\n\nexport interface AccountSettingsSection {\n  id: string;\n  label: React.ReactNode;\n  icon?: React.ReactNode;\n  content: React.ReactNode;\n}\n\nexport interface AccountSettingsDialogLabels {\n  /** The close button. Default `\"Close\"`. */\n  close?: string;\n}\n\nexport interface AccountSettingsDialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** The heading of the content pane. */\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** One sidebar entry each; the active one's `content` fills the pane. */\n  sections: readonly AccountSettingsSection[];\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (id: string) => void;\n  /** Pinned under the sidebar entries: sign out, language. */\n  sidebarFooter?: React.ReactNode;\n  labels?: AccountSettingsDialogLabels;\n  className?: string;\n}\n\n/**\n * The account modal: a vertical tab rail on the left, the active section on\n * the right. Sections are the caller's, so Profile and Security (or any other)\n * are built from `SettingsSection` and `SettingsRow` inside `content`.\n */\nexport function AccountSettingsDialog({\n  open,\n  defaultOpen,\n  onOpenChange,\n  title,\n  description,\n  sections,\n  value,\n  defaultValue,\n  onValueChange,\n  sidebarFooter,\n  labels = {},\n  className,\n}: AccountSettingsDialogProps) {\n  const first = sections[0]?.id ?? \"\";\n  return (\n    <Dialog\n      {...(open !== undefined ? { open } : {})}\n      {...(defaultOpen !== undefined ? { defaultOpen } : {})}\n      {...(onOpenChange ? { onOpenChange } : {})}\n    >\n      <DialogContent\n        showCloseButton={false}\n        className={cn(ACCOUNT_SETTINGS_DIALOG_CONTENT, className)}\n      >\n        <Tabs\n          orientation=\"vertical\"\n          {...(value !== undefined ? { value } : { defaultValue: defaultValue ?? first })}\n          {...(onValueChange ? { onValueChange } : {})}\n          className={ACCOUNT_SETTINGS_DIALOG_TABS}\n        >\n          <div className={ACCOUNT_SETTINGS_DIALOG_SIDEBAR}>\n            <TabsList className={ACCOUNT_SETTINGS_DIALOG_LIST}>\n              {sections.map((s) => (\n                <TabsTrigger key={s.id} value={s.id} className={ACCOUNT_SETTINGS_DIALOG_ENTRY}>\n                  {s.icon}\n                  {s.label}\n                </TabsTrigger>\n              ))}\n            </TabsList>\n            {sidebarFooter != null && (\n              <div className={ACCOUNT_SETTINGS_DIALOG_FOOTER}>{sidebarFooter}</div>\n            )}\n          </div>\n          <div className={ACCOUNT_SETTINGS_DIALOG_PANE}>\n            <div className={ACCOUNT_SETTINGS_DIALOG_HEADING}>\n              <DialogTitle className={ACCOUNT_SETTINGS_DIALOG_TITLE}>{title}</DialogTitle>\n              {description != null && (\n                <DialogDescription className={ACCOUNT_SETTINGS_DIALOG_DESCRIPTION}>{description}</DialogDescription>\n              )}\n            </div>\n            {sections.map((s) => (\n              <TabsContent key={s.id} value={s.id} className={ACCOUNT_SETTINGS_DIALOG_PANEL}>\n                {s.content}\n              </TabsContent>\n            ))}\n          </div>\n        </Tabs>\n        <DialogClose asChild>\n          <IconButton aria-label={labels.close ?? \"Close\"} className={ACCOUNT_SETTINGS_DIALOG_CLOSE}>\n            <UiIcon name=\"x\" />\n          </IconButton>\n        </DialogClose>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"AAwFY,cAEI,YAFJ;AAxFZ,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AACnB,SAAS,QAAQ,aAAa,eAAe,mBAAmB,mBAAmB;AACnF,SAAS,MAAM,aAAa,UAAU,mBAAmB;AACzD,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAqChB,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AACF,GAA+B;AAC7B,QAAM,QAAQ,SAAS,CAAC,GAAG,MAAM;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAI,SAAS,SAAY,EAAE,KAAK,IAAI,CAAC;AAAA,MACrC,GAAI,gBAAgB,SAAY,EAAE,YAAY,IAAI,CAAC;AAAA,MACnD,GAAI,eAAe,EAAE,aAAa,IAAI,CAAC;AAAA,MAExC;AAAA,QAAC;AAAA;AAAA,UACC,iBAAiB;AAAA,UACjB,WAAW,GAAG,iCAAiC,SAAS;AAAA,UAExD;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,aAAY;AAAA,gBACX,GAAI,UAAU,SAAY,EAAE,MAAM,IAAI,EAAE,cAAc,gBAAgB,MAAM;AAAA,gBAC5E,GAAI,gBAAgB,EAAE,cAAc,IAAI,CAAC;AAAA,gBAC1C,WAAW;AAAA,gBAEX;AAAA,uCAAC,SAAI,WAAW,iCACd;AAAA,wCAAC,YAAS,WAAW,8BAClB,mBAAS,IAAI,CAAC,MACb,qBAAC,eAAuB,OAAO,EAAE,IAAI,WAAW,+BAC7C;AAAA,wBAAE;AAAA,sBACF,EAAE;AAAA,yBAFa,EAAE,EAGpB,CACD,GACH;AAAA,oBACC,iBAAiB,QAChB,oBAAC,SAAI,WAAW,gCAAiC,yBAAc;AAAA,qBAEnE;AAAA,kBACA,qBAAC,SAAI,WAAW,8BACd;AAAA,yCAAC,SAAI,WAAW,iCACd;AAAA,0CAAC,eAAY,WAAW,+BAAgC,iBAAM;AAAA,sBAC7D,eAAe,QACd,oBAAC,qBAAkB,WAAW,qCAAsC,uBAAY;AAAA,uBAEpF;AAAA,oBACC,SAAS,IAAI,CAAC,MACb,oBAAC,eAAuB,OAAO,EAAE,IAAI,WAAW,+BAC7C,YAAE,WADa,EAAE,EAEpB,CACD;AAAA,qBACH;AAAA;AAAA;AAAA,YACF;AAAA,YACA,oBAAC,eAAY,SAAO,MAClB,8BAAC,cAAW,cAAY,OAAO,SAAS,SAAS,WAAW,+BAC1D,8BAAC,UAAO,MAAK,KAAI,GACnB,GACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/alert-dialog.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "../lib/cn.js";
 import { buttonVariants } from "./button.js";
 import { useControllableState } from "../primitives/use-controllable-state.js";
-import { DismissableLayerScope, useDismissableLayer } from "../primitives/dismissable-layer.js";
+import { DismissableLayerScope, useDismissableLayer, useModalScrimStyle } from "../primitives/dismissable-layer.js";
 import { useFocusScope } from "../primitives/focus-scope.js";
 import { usePresence } from "../primitives/presence.js";
 import { mergeRefs } from "../primitives/merge-refs.js";
@@ -72,9 +72,10 @@ function AlertDialogContent({ className, children, ...props }) {
     exclude: [triggerRef],
     modal: true
   });
+  const scrimStyle = useModalScrimStyle(dismissRef);
   if (!isPresent) return null;
   return /* @__PURE__ */ jsxs(Portal, { children: [
-    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsx(AlertDialogOverlay, { style: scrimStyle }),
     /* @__PURE__ */ jsx(
       "div",
       {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { buttonVariants } from \"./button\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { DismissableLayerScope, useDismissableLayer } from \"../primitives/dismissable-layer\";\nimport { useFocusScope } from \"../primitives/focus-scope\";\nimport { usePresence } from \"../primitives/presence\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport { Portal } from \"../primitives/portal\";\nimport { Slot } from \"../primitives/slot\";\nimport {\n  ALERT_DIALOG_CONTENT,\n  ALERT_DIALOG_DESCRIPTION,\n  ALERT_DIALOG_FOOTER,\n  ALERT_DIALOG_HEADER,\n  ALERT_DIALOG_OVERLAY,\n  ALERT_DIALOG_TITLE,\n} from \"../generated/alert-dialog\";\n\ninterface AlertDialogContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  triggerRef: React.RefObject<HTMLElement | null>;\n}\n\nconst AlertDialogContext = React.createContext<AlertDialogContextValue | null>(null);\n\nfunction useAlertDialog(): AlertDialogContextValue {\n  const ctx = React.useContext(AlertDialogContext);\n  if (!ctx) throw new Error(\"AlertDialog parts must be used within <AlertDialog>\");\n  return ctx;\n}\n\nexport interface AlertDialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function AlertDialog({ open, defaultOpen = false, onOpenChange, children }: AlertDialogProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const triggerRef = React.useRef<HTMLElement | null>(null);\n  return (\n    <AlertDialogContext.Provider value={{ open: isOpen, setOpen, triggerRef }}>\n      {children}\n    </AlertDialogContext.Provider>\n  );\n}\n\nexport interface AlertDialogTriggerProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n}\n\nexport function AlertDialogTrigger({ asChild = false, onClick, ...props }: AlertDialogTriggerProps) {\n  const { open, setOpen, triggerRef } = useAlertDialog();\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"alert-dialog-trigger\"\n      aria-expanded={open}\n      ref={triggerRef as React.Ref<HTMLButtonElement>}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(true);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface AlertDialogOverlayProps extends React.ComponentProps<\"div\"> {}\n\nexport function AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps) {\n  const { open } = useAlertDialog();\n  // No onClick: the content's dismissable layer already closes on the\n  // pointer-down that lands here, and a second path called onOpenChange(false)\n  // twice for one press whenever the overlay was still hit by the click\n  // (a host that closes later, CSS without the closed-state pointer-events).\n  return (\n    <div\n      data-slot=\"alert-dialog-overlay\"\n      data-state={open ? \"open\" : \"closed\"}\n      className={cn(ALERT_DIALOG_OVERLAY, className)}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface AlertDialogContentProps extends React.ComponentProps<\"div\"> {}\n\nexport function AlertDialogContent({ className, children, ...props }: AlertDialogContentProps) {\n  const { open, setOpen, triggerRef } = useAlertDialog();\n  const { isPresent, ref: presRef } = usePresence(open);\n  const focusRef = useFocusScope(open, { returnFocusTo: triggerRef });\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n    exclude: [triggerRef],\n    modal: true,\n  });\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <AlertDialogOverlay />\n      <div\n        data-slot=\"alert-dialog-content\"\n        role=\"alertdialog\"\n        aria-modal=\"true\"\n        data-state={open ? \"open\" : \"closed\"}\n        ref={mergeRefs(focusRef, dismissRef, presRef as React.Ref<HTMLDivElement>)}\n        className={cn(ALERT_DIALOG_CONTENT, className)}\n        {...(props as Record<string, unknown>)}\n      >\n        <DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope>\n      </div>\n    </Portal>\n  );\n}\n\nexport function AlertDialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(ALERT_DIALOG_HEADER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(ALERT_DIALOG_FOOTER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <h2\n      data-slot=\"alert-dialog-title\"\n      className={cn(ALERT_DIALOG_TITLE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"alert-dialog-description\"\n      className={cn(ALERT_DIALOG_DESCRIPTION, className)}\n      {...props}\n    />\n  );\n}\n\nexport interface AlertDialogActionProps extends React.ComponentProps<\"button\"> {}\n\nexport function AlertDialogAction({ className, onClick, ...props }: AlertDialogActionProps) {\n  const { setOpen } = useAlertDialog();\n  return (\n    <button\n      data-slot=\"alert-dialog-action\"\n      className={cn(buttonVariants(), className)}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(false);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface AlertDialogCancelProps extends React.ComponentProps<\"button\"> {}\n\nexport function AlertDialogCancel({ className, onClick, ...props }: AlertDialogCancelProps) {\n  const { setOpen } = useAlertDialog();\n  return (\n    <button\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(buttonVariants({ variant: \"outline\" }), className)}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(false);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n"],"mappings":";AAkDI,cA2DA,YA3DA;AAhDJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,uBAAuB,2BAA2B;AAC3D,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAQP,MAAM,qBAAqB,MAAM,cAA8C,IAAI;AAEnF,SAAS,iBAA0C;AACjD,QAAM,MAAM,MAAM,WAAW,kBAAkB;AAC/C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,qDAAqD;AAC/E,SAAO;AACT;AASO,SAAS,YAAY,EAAE,MAAM,cAAc,OAAO,cAAc,SAAS,GAAqB;AACnG,QAAM,CAAC,QAAQ,OAAO,IAAI,qBAA8B;AAAA,IACtD,GAAI,SAAS,SAAY,EAAE,OAAO,KAAK,IAAI,CAAC;AAAA,IAC5C,cAAc;AAAA,IACd,GAAI,eAAe,EAAE,UAAU,aAAa,IAAI,CAAC;AAAA,EACnD,CAAC;AACD,QAAM,aAAa,MAAM,OAA2B,IAAI;AACxD,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,MAAM,QAAQ,SAAS,WAAW,GACrE,UACH;AAEJ;AAMO,SAAS,mBAAmB,EAAE,UAAU,OAAO,SAAS,GAAG,MAAM,GAA4B;AAClG,QAAM,EAAE,MAAM,SAAS,WAAW,IAAI,eAAe;AACrD,QAAM,OAAO,UAAU,OAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,iBAAe;AAAA,MACf,KAAK;AAAA,MACL,SAAS,CAAC,MAA2C;AACnD,kBAAU,CAAC;AACX,gBAAQ,IAAI;AAAA,MACd;AAAA,MACC,GAAI;AAAA;AAAA,EACP;AAEJ;AAIO,SAAS,mBAAmB,EAAE,WAAW,GAAG,MAAM,GAA4B;AACnF,QAAM,EAAE,KAAK,IAAI,eAAe;AAKhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY,OAAO,SAAS;AAAA,MAC5B,WAAW,GAAG,sBAAsB,SAAS;AAAA,MAC5C,GAAI;AAAA;AAAA,EACP;AAEJ;AAIO,SAAS,mBAAmB,EAAE,WAAW,UAAU,GAAG,MAAM,GAA4B;AAC7F,QAAM,EAAE,MAAM,SAAS,WAAW,IAAI,eAAe;AACrD,QAAM,EAAE,WAAW,KAAK,QAAQ,IAAI,YAAY,IAAI;AACpD,QAAM,WAAW,cAAc,MAAM,EAAE,eAAe,WAAW,CAAC;AAClE,QAAM,aAAa,oBAAoB;AAAA,IACrC,SAAS;AAAA,IACT,WAAW,MAAM,QAAQ,KAAK;AAAA,IAC9B,SAAS,CAAC,UAAU;AAAA,IACpB,OAAO;AAAA,EACT,CAAC;AACD,MAAI,CAAC,UAAW,QAAO;AACvB,SACE,qBAAC,UACC;AAAA,wBAAC,sBAAmB;AAAA,IACpB;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAW;AAAA,QACX,cAAY,OAAO,SAAS;AAAA,QAC5B,KAAK,UAAU,UAAU,YAAY,OAAoC;AAAA,QACzE,WAAW,GAAG,sBAAsB,SAAS;AAAA,QAC5C,GAAI;AAAA,QAEL,8BAAC,yBAAsB,OAAO,YAAa,UAAS;AAAA;AAAA,IACtD;AAAA,KACF;AAEJ;AAEO,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAAgC;AACtF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,qBAAqB,SAAS;AAAA,MAC3C,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAAgC;AACtF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,qBAAqB,SAAS;AAAA,MAC3C,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,iBAAiB,EAAE,WAAW,GAAG,MAAM,GAA+B;AACpF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,oBAAoB,SAAS;AAAA,MAC1C,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,uBAAuB,EAAE,WAAW,GAAG,MAAM,GAA8B;AACzF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,0BAA0B,SAAS;AAAA,MAChD,GAAG;AAAA;AAAA,EACN;AAEJ;AAIO,SAAS,kBAAkB,EAAE,WAAW,SAAS,GAAG,MAAM,GAA2B;AAC1F,QAAM,EAAE,QAAQ,IAAI,eAAe;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,eAAe,GAAG,SAAS;AAAA,MACzC,SAAS,CAAC,MAA2C;AACnD,kBAAU,CAAC;AACX,gBAAQ,KAAK;AAAA,MACf;AAAA,MACC,GAAI;AAAA;AAAA,EACP;AAEJ;AAIO,SAAS,kBAAkB,EAAE,WAAW,SAAS,GAAG,MAAM,GAA2B;AAC1F,QAAM,EAAE,QAAQ,IAAI,eAAe;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,eAAe,EAAE,SAAS,UAAU,CAAC,GAAG,SAAS;AAAA,MAC/D,SAAS,CAAC,MAA2C;AACnD,kBAAU,CAAC;AACX,gBAAQ,KAAK;AAAA,MACf;AAAA,MACC,GAAI;AAAA;AAAA,EACP;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { buttonVariants } from \"./button\";\nimport { useControllableState } from \"../primitives/use-controllable-state\";\nimport { DismissableLayerScope, useDismissableLayer, useModalScrimStyle } from \"../primitives/dismissable-layer\";\nimport { useFocusScope } from \"../primitives/focus-scope\";\nimport { usePresence } from \"../primitives/presence\";\nimport { mergeRefs } from \"../primitives/merge-refs\";\nimport { Portal } from \"../primitives/portal\";\nimport { Slot } from \"../primitives/slot\";\nimport {\n  ALERT_DIALOG_CONTENT,\n  ALERT_DIALOG_DESCRIPTION,\n  ALERT_DIALOG_FOOTER,\n  ALERT_DIALOG_HEADER,\n  ALERT_DIALOG_OVERLAY,\n  ALERT_DIALOG_TITLE,\n} from \"../generated/alert-dialog\";\n\ninterface AlertDialogContextValue {\n  open: boolean;\n  setOpen: (next: boolean) => void;\n  triggerRef: React.RefObject<HTMLElement | null>;\n}\n\nconst AlertDialogContext = React.createContext<AlertDialogContextValue | null>(null);\n\nfunction useAlertDialog(): AlertDialogContextValue {\n  const ctx = React.useContext(AlertDialogContext);\n  if (!ctx) throw new Error(\"AlertDialog parts must be used within <AlertDialog>\");\n  return ctx;\n}\n\nexport interface AlertDialogProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  children?: React.ReactNode;\n}\n\nexport function AlertDialog({ open, defaultOpen = false, onOpenChange, children }: AlertDialogProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const triggerRef = React.useRef<HTMLElement | null>(null);\n  return (\n    <AlertDialogContext.Provider value={{ open: isOpen, setOpen, triggerRef }}>\n      {children}\n    </AlertDialogContext.Provider>\n  );\n}\n\nexport interface AlertDialogTriggerProps extends React.ComponentProps<\"button\"> {\n  asChild?: boolean;\n}\n\nexport function AlertDialogTrigger({ asChild = false, onClick, ...props }: AlertDialogTriggerProps) {\n  const { open, setOpen, triggerRef } = useAlertDialog();\n  const Comp = asChild ? Slot : \"button\";\n  return (\n    <Comp\n      data-slot=\"alert-dialog-trigger\"\n      aria-expanded={open}\n      ref={triggerRef as React.Ref<HTMLButtonElement>}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(true);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface AlertDialogOverlayProps extends React.ComponentProps<\"div\"> {}\n\nexport function AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps) {\n  const { open } = useAlertDialog();\n  // No onClick: the content's dismissable layer already closes on the\n  // pointer-down that lands here, and a second path called onOpenChange(false)\n  // twice for one press whenever the overlay was still hit by the click\n  // (a host that closes later, CSS without the closed-state pointer-events).\n  return (\n    <div\n      data-slot=\"alert-dialog-overlay\"\n      data-state={open ? \"open\" : \"closed\"}\n      className={cn(ALERT_DIALOG_OVERLAY, className)}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface AlertDialogContentProps extends React.ComponentProps<\"div\"> {}\n\nexport function AlertDialogContent({ className, children, ...props }: AlertDialogContentProps) {\n  const { open, setOpen, triggerRef } = useAlertDialog();\n  const { isPresent, ref: presRef } = usePresence(open);\n  const focusRef = useFocusScope(open, { returnFocusTo: triggerRef });\n  const dismissRef = useDismissableLayer({\n    enabled: open,\n    onDismiss: () => setOpen(false),\n    exclude: [triggerRef],\n    modal: true,\n  });\n  const scrimStyle = useModalScrimStyle(dismissRef);\n  if (!isPresent) return null;\n  return (\n    <Portal>\n      <AlertDialogOverlay style={scrimStyle} />\n      <div\n        data-slot=\"alert-dialog-content\"\n        role=\"alertdialog\"\n        aria-modal=\"true\"\n        data-state={open ? \"open\" : \"closed\"}\n        ref={mergeRefs(focusRef, dismissRef, presRef as React.Ref<HTMLDivElement>)}\n        className={cn(ALERT_DIALOG_CONTENT, className)}\n        {...(props as Record<string, unknown>)}\n      >\n        <DismissableLayerScope layer={dismissRef}>{children}</DismissableLayerScope>\n      </div>\n    </Portal>\n  );\n}\n\nexport function AlertDialogHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(ALERT_DIALOG_HEADER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(ALERT_DIALOG_FOOTER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogTitle({ className, ...props }: React.ComponentProps<\"h2\">) {\n  return (\n    <h2\n      data-slot=\"alert-dialog-title\"\n      className={cn(ALERT_DIALOG_TITLE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function AlertDialogDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"alert-dialog-description\"\n      className={cn(ALERT_DIALOG_DESCRIPTION, className)}\n      {...props}\n    />\n  );\n}\n\nexport interface AlertDialogActionProps extends React.ComponentProps<\"button\"> {}\n\nexport function AlertDialogAction({ className, onClick, ...props }: AlertDialogActionProps) {\n  const { setOpen } = useAlertDialog();\n  return (\n    <button\n      data-slot=\"alert-dialog-action\"\n      className={cn(buttonVariants(), className)}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(false);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface AlertDialogCancelProps extends React.ComponentProps<\"button\"> {}\n\nexport function AlertDialogCancel({ className, onClick, ...props }: AlertDialogCancelProps) {\n  const { setOpen } = useAlertDialog();\n  return (\n    <button\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(buttonVariants({ variant: \"outline\" }), className)}\n      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {\n        onClick?.(e);\n        setOpen(false);\n      }}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n"],"mappings":";AAkDI,cA4DA,YA5DA;AAhDJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAC/B,SAAS,4BAA4B;AACrC,SAAS,uBAAuB,qBAAqB,0BAA0B;AAC/E,SAAS,qBAAqB;AAC9B,SAAS,mBAAmB;AAC5B,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAQP,MAAM,qBAAqB,MAAM,cAA8C,IAAI;AAEnF,SAAS,iBAA0C;AACjD,QAAM,MAAM,MAAM,WAAW,kBAAkB;AAC/C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,qDAAqD;AAC/E,SAAO;AACT;AASO,SAAS,YAAY,EAAE,MAAM,cAAc,OAAO,cAAc,SAAS,GAAqB;AACnG,QAAM,CAAC,QAAQ,OAAO,IAAI,qBAA8B;AAAA,IACtD,GAAI,SAAS,SAAY,EAAE,OAAO,KAAK,IAAI,CAAC;AAAA,IAC5C,cAAc;AAAA,IACd,GAAI,eAAe,EAAE,UAAU,aAAa,IAAI,CAAC;AAAA,EACnD,CAAC;AACD,QAAM,aAAa,MAAM,OAA2B,IAAI;AACxD,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,MAAM,QAAQ,SAAS,WAAW,GACrE,UACH;AAEJ;AAMO,SAAS,mBAAmB,EAAE,UAAU,OAAO,SAAS,GAAG,MAAM,GAA4B;AAClG,QAAM,EAAE,MAAM,SAAS,WAAW,IAAI,eAAe;AACrD,QAAM,OAAO,UAAU,OAAO;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,iBAAe;AAAA,MACf,KAAK;AAAA,MACL,SAAS,CAAC,MAA2C;AACnD,kBAAU,CAAC;AACX,gBAAQ,IAAI;AAAA,MACd;AAAA,MACC,GAAI;AAAA;AAAA,EACP;AAEJ;AAIO,SAAS,mBAAmB,EAAE,WAAW,GAAG,MAAM,GAA4B;AACnF,QAAM,EAAE,KAAK,IAAI,eAAe;AAKhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY,OAAO,SAAS;AAAA,MAC5B,WAAW,GAAG,sBAAsB,SAAS;AAAA,MAC5C,GAAI;AAAA;AAAA,EACP;AAEJ;AAIO,SAAS,mBAAmB,EAAE,WAAW,UAAU,GAAG,MAAM,GAA4B;AAC7F,QAAM,EAAE,MAAM,SAAS,WAAW,IAAI,eAAe;AACrD,QAAM,EAAE,WAAW,KAAK,QAAQ,IAAI,YAAY,IAAI;AACpD,QAAM,WAAW,cAAc,MAAM,EAAE,eAAe,WAAW,CAAC;AAClE,QAAM,aAAa,oBAAoB;AAAA,IACrC,SAAS;AAAA,IACT,WAAW,MAAM,QAAQ,KAAK;AAAA,IAC9B,SAAS,CAAC,UAAU;AAAA,IACpB,OAAO;AAAA,EACT,CAAC;AACD,QAAM,aAAa,mBAAmB,UAAU;AAChD,MAAI,CAAC,UAAW,QAAO;AACvB,SACE,qBAAC,UACC;AAAA,wBAAC,sBAAmB,OAAO,YAAY;AAAA,IACvC;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAW;AAAA,QACX,cAAY,OAAO,SAAS;AAAA,QAC5B,KAAK,UAAU,UAAU,YAAY,OAAoC;AAAA,QACzE,WAAW,GAAG,sBAAsB,SAAS;AAAA,QAC5C,GAAI;AAAA,QAEL,8BAAC,yBAAsB,OAAO,YAAa,UAAS;AAAA;AAAA,IACtD;AAAA,KACF;AAEJ;AAEO,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAAgC;AACtF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,qBAAqB,SAAS;AAAA,MAC3C,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAAgC;AACtF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,qBAAqB,SAAS;AAAA,MAC3C,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,iBAAiB,EAAE,WAAW,GAAG,MAAM,GAA+B;AACpF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,oBAAoB,SAAS;AAAA,MAC1C,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,uBAAuB,EAAE,WAAW,GAAG,MAAM,GAA8B;AACzF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,0BAA0B,SAAS;AAAA,MAChD,GAAG;AAAA;AAAA,EACN;AAEJ;AAIO,SAAS,kBAAkB,EAAE,WAAW,SAAS,GAAG,MAAM,GAA2B;AAC1F,QAAM,EAAE,QAAQ,IAAI,eAAe;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,eAAe,GAAG,SAAS;AAAA,MACzC,SAAS,CAAC,MAA2C;AACnD,kBAAU,CAAC;AACX,gBAAQ,KAAK;AAAA,MACf;AAAA,MACC,GAAI;AAAA;AAAA,EACP;AAEJ;AAIO,SAAS,kBAAkB,EAAE,WAAW,SAAS,GAAG,MAAM,GAA2B;AAC1F,QAAM,EAAE,QAAQ,IAAI,eAAe;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,eAAe,EAAE,SAAS,UAAU,CAAC,GAAG,SAAS;AAAA,MAC/D,SAAS,CAAC,MAA2C;AACnD,kBAAU,CAAC;AACX,gBAAQ,KAAK;AAAA,MACf;AAAA,MACC,GAAI;AAAA;AAAA,EACP;AAEJ;","names":[]}