@godxjp/ui 18.8.0 → 18.10.0

package/dist/components/layout/service-role-panel.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import type { ServiceRolePanelProp } from "../../props/components/layout.prop.js";
+export type { ServiceRoleItemProp, ServiceRolePanelProp, ServiceRolePanelProp as ServiceRolePanelProps, } from "../../props/components/layout.prop.js";
+/**
+ * ServiceRolePanel — the canonical role-collection ⇄ role-detail surface (gh#257 / DXS
+ * platform#311).
+ *
+ * A THIN formalized composition over `MasterDetail` (which owns ALL geometry: rail tracks, gap,
+ * stacking below the threshold — 1440/1024 two-track, 390 stacked list-then-detail) plus real
+ * primitives, exported because a consumer cannot import a docs page (the gh#251 lesson). What the
+ * panel adds is exactly the contract every service-role screen kept re-deriving:
+ *
+ * - **Selection** as the controlled triad (`value`/`defaultValue`/`onValueChange`, defaulting to
+ *   the first role). Each role row is a real `Button` carrying `aria-current`, and selecting moves
+ *   focus-target wiring through `MasterDetail`'s `detailId`/`tabIndex={-1}` detail region.
+ * - **Destructive confirmation built in**: `onDeleteRole`'s presence arms a per-role delete
+ *   affordance behind the package `AlertDialog` (variant `destructive`); the handler fires only
+ *   after the user confirms. Roles marked `locked` (system roles) never offer deletion and show a
+ *   localized lock badge; `readOnly` hides every mutating affordance.
+ * - **Lifecycle states** mirror the DataTable #216 vocabulary and precedence:
+ *   `loading` → `denied` → `error` → `empty` → content.
+ * - **Domain-neutral**: the roles and the detail surface (`children`, node or render-function) are
+ *   consumer-supplied; no platform role or permission is encoded.
+ */
+export declare const ServiceRolePanel: React.ForwardRefExoticComponent<ServiceRolePanelProp & React.RefAttributes<HTMLDivElement>>;

package/dist/components/layout/service-role-panel.js

@@ -0,0 +1,206 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { AlertCircle, Lock, RefreshCw, ShieldAlert, Trash2 } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation.js";
+import { cn } from "../../lib/utils.js";
+import { Badge } from "../data-display/badge.js";
+import { EmptyState } from "../data-display/empty-state.js";
+import { AlertDialog } from "../feedback/dialog.js";
+import { SkeletonRows } from "../feedback/skeleton.js";
+import { Button } from "../general/button.js";
+import { Text } from "../general/typography.js";
+import { MasterDetail } from "./master-detail.js";
+const ServiceRolePanel = React.forwardRef(
+  function ServiceRolePanel2({
+    roles,
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    children,
+    onDeleteRole,
+    readOnly = false,
+    loading = false,
+    empty,
+    error,
+    denied,
+    onRetry,
+    masterLabel,
+    detailLabel,
+    railWidth,
+    masterViewport,
+    collapseBelow,
+    id,
+    className
+  }, ref) {
+    const { t } = useTranslation();
+    const reactId = React.useId();
+    const rootId = id ?? `service-role-panel-${reactId}`;
+    const detailId = `${rootId}-detail`;
+    const [uncontrolled, setUncontrolled] = React.useState(
+      defaultValue ?? roles[0]?.id
+    );
+    const value = controlledValue ?? uncontrolled;
+    const selectedRole = roles.find((role) => role.id === value);
+    const select = (roleId) => {
+      if (controlledValue === void 0) setUncontrolled(roleId);
+      onValueChange?.(roleId);
+    };
+    const [pendingDelete, setPendingDelete] = React.useState(null);
+    const isDenied = denied !== void 0 && denied !== null && denied !== false;
+    const isError = error !== void 0 && error !== null && error !== false;
+    const deletable = typeof onDeleteRole === "function" && !readOnly;
+    const surface = (state) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        id: rootId,
+        "data-slot": "service-role-panel",
+        className: cn("ui-service-role-panel", className),
+        children: state
+      }
+    );
+    if (loading) {
+      return surface(
+        /* @__PURE__ */ jsx("div", { "aria-busy": "true", "aria-label": t("layout.serviceRolePanel.loading"), role: "status", children: /* @__PURE__ */ jsx(SkeletonRows, { rows: 5, columns: 3 }) })
+      );
+    }
+    if (isDenied) {
+      return surface(
+        /* @__PURE__ */ jsx("div", { "aria-live": "polite", children: denied === true ? /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            icon: ShieldAlert,
+            tone: "warning",
+            variant: "section",
+            title: t("layout.serviceRolePanel.denied"),
+            description: t("layout.serviceRolePanel.deniedDescription"),
+            titleAs: "p"
+          }
+        ) : denied })
+      );
+    }
+    if (isError) {
+      return surface(
+        /* @__PURE__ */ jsx("div", { role: "alert", children: error === true ? /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            icon: AlertCircle,
+            tone: "destructive",
+            variant: "section",
+            title: t("layout.serviceRolePanel.error"),
+            description: t("layout.serviceRolePanel.errorDescription"),
+            titleAs: "p",
+            action: onRetry ? /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", onClick: onRetry, children: [
+              /* @__PURE__ */ jsx(RefreshCw, { "aria-hidden": "true" }),
+              t("common.retry")
+            ] }) : void 0
+          }
+        ) : error })
+      );
+    }
+    if (roles.length === 0) {
+      return surface(
+        /* @__PURE__ */ jsx("div", { "aria-live": "polite", children: empty ?? /* @__PURE__ */ jsx(
+          EmptyState,
+          {
+            variant: "section",
+            title: t("layout.serviceRolePanel.empty"),
+            description: t("layout.serviceRolePanel.emptyDescription"),
+            titleAs: "p"
+          }
+        ) })
+      );
+    }
+    const detail = typeof children === "function" ? children(selectedRole) : children ?? /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        variant: "compact",
+        title: t("layout.serviceRolePanel.noDetail"),
+        titleAs: "p"
+      }
+    );
+    return surface(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          MasterDetail,
+          {
+            rail: "master",
+            railWidth,
+            masterViewport,
+            collapseBelow,
+            masterLabel: masterLabel ?? t("layout.serviceRolePanel.rolesLabel"),
+            detailLabel: detailLabel ?? t("layout.serviceRolePanel.detailLabel"),
+            detailId,
+            master: /* @__PURE__ */ jsx("ul", { className: "flex list-none flex-col gap-1", "data-slot": "service-role-panel-list", children: roles.map((role) => {
+              const selected = role.id === value;
+              return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: selected ? "secondary" : "ghost",
+                    className: "h-auto flex-1 justify-start py-2 text-start",
+                    "aria-current": selected ? "true" : void 0,
+                    "aria-controls": detailId,
+                    onClick: () => select(role.id),
+                    children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col items-start leading-tight", children: [
+                      /* @__PURE__ */ jsxs("span", { className: "inline-flex max-w-full items-center gap-1.5", children: [
+                        /* @__PURE__ */ jsx(Text, { weight: "medium", className: "truncate", children: role.name }),
+                        role.locked && /* @__PURE__ */ jsxs(Badge, { tone: "default", variant: "outline", children: [
+                          /* @__PURE__ */ jsx(Lock, { "aria-hidden": "true" }),
+                          t("layout.serviceRolePanel.locked")
+                        ] })
+                      ] }),
+                      (role.description !== void 0 || role.memberCount !== void 0) && /* @__PURE__ */ jsx(Text, { size: "2xs", tone: "muted", className: "max-w-full truncate", children: [
+                        role.description,
+                        role.memberCount !== void 0 ? (
+                          // `{count}` is Intl.NumberFormat-grouped by `interpolate`,
+                          // pluralized by CLDR category — no hand-built formatting.
+                          t("layout.serviceRolePanel.memberCount", {
+                            count: role.memberCount
+                          })
+                        ) : void 0
+                      ].filter((part) => part !== void 0).join(" \xB7 ") })
+                    ] })
+                  }
+                ),
+                deletable && !role.locked && /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "icon-sm",
+                    "aria-label": t("layout.serviceRolePanel.deleteRole", { role: role.name }),
+                    onClick: () => setPendingDelete(role),
+                    children: /* @__PURE__ */ jsx(Trash2, { "aria-hidden": "true" })
+                  }
+                )
+              ] }, role.id);
+            }) }),
+            children: detail
+          }
+        ),
+        deletable && /* @__PURE__ */ jsx(
+          AlertDialog,
+          {
+            open: pendingDelete !== null,
+            onOpenChange: (open) => {
+              if (!open) setPendingDelete(null);
+            },
+            title: t("layout.serviceRolePanel.deleteTitle"),
+            description: pendingDelete ? t("layout.serviceRolePanel.deleteDescription", { role: pendingDelete.name }) : void 0,
+            confirmLabel: t("layout.serviceRolePanel.deleteConfirm"),
+            variant: "destructive",
+            onConfirm: () => {
+              if (pendingDelete) onDeleteRole?.(pendingDelete.id);
+              setPendingDelete(null);
+            }
+          }
+        )
+      ] })
+    );
+  }
+);
+ServiceRolePanel.displayName = "ServiceRolePanel";
+export {
+  ServiceRolePanel
+};

package/dist/components/navigation/filter-bar.d.ts

@@ -1,6 +1,6 @@
 import type { ToolbarGroupProp, ToolbarProp } from "../../props/components/navigation.prop.js";
-export type { FilterBarChipProp, FilterBarChipProp as FilterBarChipProps, FilterBarOverflowProp, ToolbarGroupProp, ToolbarGroupProp as ToolbarGroupProps, ToolbarGroupProp as FilterBarGroupProp, ToolbarGroupProp as FilterBarGroupProps, ToolbarProp, ToolbarProp as ToolbarProps, ToolbarProp as FilterBarProp, ToolbarProp as FilterBarProps, } from "../../props/components/navigation.prop.js";
-export declare function Toolbar({ onClear, hasActiveFilters, sticky, overflow, search, chips, onChipRemove, resultCount, actions, className, children, }: ToolbarProp): import("react").JSX.Element;
+export type { FilterBarChipProp, FilterBarChipProp as FilterBarChipProps, FilterBarFilterProp, FilterBarFilterProp as FilterBarFilterProps, FilterBarOverflowProp, FilterBarSearchProp, FilterBarSearchProp as FilterBarSearchProps, ToolbarGroupProp, ToolbarGroupProp as ToolbarGroupProps, ToolbarGroupProp as FilterBarGroupProp, ToolbarGroupProp as FilterBarGroupProps, ToolbarProp, ToolbarProp as ToolbarProps, ToolbarProp as FilterBarProp, ToolbarProp as FilterBarProps, } from "../../props/components/navigation.prop.js";
+export declare function Toolbar({ onClear, hasActiveFilters, sticky, overflow, search, filters, chips, onChipRemove, actions, resultCount, loading, disabled, error, className, children, }: ToolbarProp): import("react").JSX.Element;
 export declare function ToolbarGroup({ label, controlId, className, children }: ToolbarGroupProp): import("react").JSX.Element;
 /**
  * Canonical list-page filter strip.

package/dist/components/navigation/filter-bar.js

@@ -4,6 +4,9 @@ import { useId } from "react";
 import { X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { Button } from "../general/button.js";
+import { Badge } from "../data-display/badge.js";
+import { SearchInput } from "../data-entry/search-input.js";
+import { Select } from "../data-entry/select.js";
 import { cn } from "../../lib/utils.js";
 function Toolbar({
   onClear,
@@ -11,65 +14,141 @@ function Toolbar({
   sticky = false,
   overflow = "wrap",
   search,
+  filters,
   chips,
   onChipRemove,
-  resultCount,
   actions,
+  resultCount,
+  loading,
+  disabled,
+  error,
   className,
   children
 }) {
   const { t } = useTranslation();
-  const hasChips = chips != null && chips.length > 0;
+  const reactId = useId();
+  const hasModel = search !== void 0 || filters !== void 0 || chips !== void 0 || onChipRemove !== void 0 || actions !== void 0 || resultCount !== void 0 || loading !== void 0 || disabled !== void 0 || error !== void 0;
+  if (!hasModel) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "toolbar",
+        "aria-label": t("navigation.toolbar.ariaLabel"),
+        "data-overflow": overflow,
+        className: cn("ui-toolbar", sticky && "ui-toolbar-sticky", className),
+        children: [
+          children,
+          onClear && hasActiveFilters && /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: onClear, className: "ui-toolbar-clear", children: [
+            /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }),
+            t("common.clearFilters")
+          ] })
+        ]
+      }
+    );
+  }
+  const showClear = Boolean(onClear && hasActiveFilters);
+  const showChips = Boolean(chips && chips.length > 0);
+  const showMeta = error != null || resultCount !== void 0;
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      role: "toolbar",
-      "aria-label": t("navigation.toolbar.ariaLabel"),
-      "data-overflow": overflow,
-      className: cn("ui-toolbar", sticky && "ui-toolbar-sticky", className),
+      className: cn("ui-filter-bar", sticky && "ui-toolbar-sticky", className),
+      "data-loading": loading || void 0,
       children: [
-        search != null && // A region, not a bare child, so the search control gets ONE measure
-        // (--filter-bar-search-width) across every list page instead of whatever width the
-        // caller's control happened to have.
-        /* @__PURE__ */ jsx("div", { className: "ui-filter-bar-search", children: search }),
-        children,
-        hasChips && // `group` (not a second toolbar) — a toolbar may own a group, and the chips are a labelled
-        // set of related controls rather than an independent toolbar competing for the same role.
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "toolbar",
+            "aria-label": t("navigation.toolbar.ariaLabel"),
+            "aria-busy": loading || void 0,
+            "data-overflow": overflow,
+            className: "ui-toolbar",
+            children: [
+              search && /* @__PURE__ */ jsx(
+                SearchInput,
+                {
+                  id: search.id,
+                  className: "ui-filter-bar-search",
+                  label: search.label,
+                  ariaLabel: search.ariaLabel,
+                  placeholder: search.placeholder,
+                  value: search.value,
+                  defaultValue: search.defaultValue,
+                  onValueChange: search.onValueChange,
+                  onSearch: search.onSearch,
+                  disabled: disabled || search.disabled
+                }
+              ),
+              filters?.map((filter) => {
+                const controlId = `${reactId}-filter-${filter.value}`;
+                return /* @__PURE__ */ jsx(
+                  ToolbarGroup,
+                  {
+                    label: filter.label,
+                    controlId,
+                    className: "ui-filter-bar-filter",
+                    children: /* @__PURE__ */ jsx(
+                      Select,
+                      {
+                        id: controlId,
+                        options: filter.options,
+                        value: filter.selected,
+                        defaultValue: filter.defaultSelected,
+                        onValueChange: (selected) => filter.onSelectedChange?.(selected),
+                        placeholder: filter.placeholder,
+                        disabled: disabled || filter.disabled
+                      }
+                    )
+                  },
+                  filter.value
+                );
+              }),
+              children,
+              (showClear || actions != null) && /* @__PURE__ */ jsxs("div", { className: "ui-filter-bar-end", children: [
+                showClear && /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    variant: "ghost",
+                    size: "sm",
+                    onClick: onClear,
+                    disabled,
+                    className: "ui-toolbar-clear",
+                    children: [
+                      /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }),
+                      t("common.clearFilters")
+                    ]
+                  }
+                ),
+                actions != null && /* @__PURE__ */ jsx("div", { className: "ui-filter-bar-actions", children: actions })
+              ] })
+            ]
+          }
+        ),
+        showChips && /* @__PURE__ */ jsx(
           "div",
           {
             role: "group",
             "aria-label": t("navigation.filterBar.appliedFilters"),
             className: "ui-filter-bar-chips",
             children: chips.map((chip) => /* @__PURE__ */ jsxs("span", { className: "ui-filter-bar-chip", children: [
-              /* @__PURE__ */ jsx("span", { className: "ui-filter-bar-chip-label", children: chip.label }),
-              (chip.onRemove || onChipRemove) && /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(Badge, { variant: "outline", children: chip.label }),
+              onChipRemove && /* @__PURE__ */ jsx(
                 Button,
                 {
                   variant: "ghost",
-                  size: "xs",
-                  className: "ui-filter-bar-chip-remove",
-                  "aria-label": t("navigation.filterBar.removeFilter", { label: chip.label }),
-                  onClick: () => {
-                    chip.onRemove?.();
-                    onChipRemove?.(chip.id);
-                  },
+                  size: "icon-sm",
+                  disabled: disabled || chip.disabled,
+                  "aria-label": t("navigation.filterBar.removeFilter", {
+                    label: typeof chip.label === "string" ? chip.label : chip.value
+                  }),
+                  onClick: () => onChipRemove(chip.value),
                   children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
                 }
               )
-            ] }, chip.id))
+            ] }, chip.value))
           }
         ),
-        resultCount !== void 0 && // The whole reason this is a prop rather than caller markup: a sighted user SEES the table
-        // change, and a polite live region is what tells everyone else that filtering happened.
-        // The number is grouped by `Intl.NumberFormat` and the noun selected by CLDR plural rules
-        // for the active locale — never a hand-built "N items".
-        /* @__PURE__ */ jsx("div", { role: "status", "aria-live": "polite", className: "ui-filter-bar-count", children: t("navigation.filterBar.resultCount", { count: resultCount }) }),
-        onClear && hasActiveFilters && /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: onClear, className: "ui-toolbar-clear", children: [
-          /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }),
-          t("common.clearFilters")
-        ] }),
-        actions != null && /* @__PURE__ */ jsx("div", { className: "ui-filter-bar-actions", children: actions })
+        showMeta && /* @__PURE__ */ jsx("div", { className: "ui-filter-bar-meta", children: error != null ? /* @__PURE__ */ jsx("p", { role: "alert", className: "ui-filter-bar-error", children: error }) : /* @__PURE__ */ jsx("p", { role: "status", className: "ui-filter-bar-count", children: t("navigation.filterBar.resultCount", { count: resultCount }) }) })
       ]
     }
   );

package/dist/components/navigation/index.d.ts

@@ -5,7 +5,7 @@ export { Menubar, MenubarCheckboxItem, MenubarContent, MenubarItem, MenubarLabel
 export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, } from "./navigation-menu.js";
 export { Steps } from "./steps.js";
 export { FilterBar, FilterBarGroup, Toolbar, ToolbarGroup } from "./filter-bar.js";
-export type { FilterBarChipProp, FilterBarChipProps, FilterBarGroupProp, FilterBarGroupProps, FilterBarProp, FilterBarProps, ToolbarGroupProps, ToolbarProps, } from "./filter-bar.js";
+export type { FilterBarChipProp, FilterBarChipProps, FilterBarFilterProp, FilterBarFilterProps, FilterBarGroupProp, FilterBarGroupProps, FilterBarOverflowProp, FilterBarProp, FilterBarProps, FilterBarSearchProp, FilterBarSearchProps, ToolbarGroupProps, ToolbarProps, } from "./filter-bar.js";
 export { AppSettingPicker } from "./app-setting-picker.js";
 export type { AppSettingPickerProp, AppSettingPickerProps, AppSettingKind, } from "./app-setting-picker.js";
 export type { BreadcrumbItemProp as BreadcrumbItem } from "../../props/vocabulary/navigation.prop.js";

package/dist/components/navigation/steps.d.ts

@@ -1,4 +1,4 @@
 import * as React from "react";
 import type { StepsProp } from "../../props/components/navigation.prop.js";
-export type { StepsProp, StepsProp as StepsProps, StepItemProp, StepStatusProp, StepsSeparatorProp, } from "../../props/components/navigation.prop.js";
-export declare function Steps({ items, value: current, defaultValue, status: currentStatus, orientation, type, size, titlePlacement, separator, onValueChange, className, }: StepsProp): React.JSX.Element;
+export type { StepsProp, StepsProp as StepsProps, StepItemProp, StepStatusProp, } from "../../props/components/navigation.prop.js";
+export declare function Steps({ items, value: current, defaultValue, status: currentStatus, orientation, type, size, titlePlacement, onValueChange, className, }: StepsProp): React.JSX.Element;

package/dist/components/navigation/steps.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ArrowRight, Check, ChevronRight, Circle, Loader2, X } from "lucide-react";
+import { Check, ChevronRight, Circle, Loader2, X } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { controlIconClass } from "../../lib/control-styles.js";
@@ -61,7 +61,6 @@ function Steps({
   type = "default",
   size = "md",
   titlePlacement = "horizontal",
-  separator = "chevron",
   onValueChange,
   className
 }) {
@@ -70,7 +69,6 @@ function Steps({
   const isVertical = orientation === "vertical";
   const compact = size === "sm";
   const inline = type === "inline";
-  const SeparatorIcon = separator === "arrow" ? ArrowRight : ChevronRight;
   return /* @__PURE__ */ jsx(
     "ol",
     {
@@ -153,7 +151,7 @@ function Steps({
                 }
               ) : /* @__PURE__ */ jsx("span", { className: stepClassName, children: stepInner }),
               inline && index < items.length - 1 ? /* @__PURE__ */ jsx(
-                SeparatorIcon,
+                ChevronRight,
                 {
                   className: "ui-steps-inline-separator rtl:rotate-180",
                   "aria-hidden": "true"

package/dist/components/ui/avatar.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import type { AvatarProp } from "../../props/components/data-display.prop.js";
-export declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & Pick<AvatarProp, "shape" | "appearance"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & Pick<AvatarProp, "shape"> & React.RefAttributes<HTMLSpanElement>>;
 export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
 export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/ui/avatar.js

@@ -3,13 +3,12 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { cn } from "../../lib/utils.js";
-const Avatar = React.forwardRef(({ className, shape = "circle", appearance = "default", ...props }, ref) => /* @__PURE__ */ jsx(
+const Avatar = React.forwardRef(({ className, shape = "circle", ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Root,
   {
     ref,
     "data-slot": "avatar",
     "data-shape": shape === "square" ? "square" : void 0,
-    "data-appearance": appearance === "tinted" ? "tinted" : void 0,
     className: cn("ui-avatar", className),
     ...props
   }

package/dist/components/ui/input-otp.d.ts

@@ -1,15 +1,5 @@
 import * as React from "react";
-import type { InputOTPAlignProp } from "../../props/components/data-entry.prop.js";
-/**
- * InputOTP — the code-challenge field.
- *
- * `align` positions the whole row (groups + separators) on the main axis: `start` (default,
- * unchanged), `center` — the canonical auth challenge — or `end`. The attribute lands on the
- * hidden input because `input-otp` owns the container element; `.ui-otp-container` reads it back
- * through `:has()`, exactly as it already does for the invalid and disabled states. A service that
- * wants every code field centred sets `--otp-container-align` once instead.
- */
-export declare const InputOTP: React.ForwardRefExoticComponent<((Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
+export declare const InputOTP: React.ForwardRefExoticComponent<(Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "pasteTransformer" | "containerClassName" | "noScriptCSSFallback"> & {
     value?: string;
     onChange?: (newValue: string) => unknown;
     maxLength: number;
@@ -35,10 +25,8 @@ export declare const InputOTP: React.ForwardRefExoticComponent<((Omit<Omit<React
 } & {
     render?: never;
     children: React.ReactNode;
-} & React.RefAttributes<HTMLInputElement>, "ref">) & {
-    align?: InputOTPAlignProp;
-}) & React.RefAttributes<HTMLInputElement>>;
-export type { InputOTPAlignProp, InputOTPGroupAppearanceProp, InputOTPGroupProp, InputOTPGroupProp as InputOTPGroupProps, } from "../../props/components/data-entry.prop.js";
+} & React.RefAttributes<HTMLInputElement>, "ref">) & React.RefAttributes<HTMLInputElement>>;
+export type { InputOTPGroupAppearanceProp, InputOTPGroupProp, InputOTPGroupProp as InputOTPGroupProps, } from "../../props/components/data-entry.prop.js";
 export declare const InputOTPGroup: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     appearance?: import("./input-otp.js").InputOTPGroupAppearanceProp;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/input-otp.js

@@ -4,12 +4,11 @@ import * as React from "react";
 import { OTPInput, OTPInputContext } from "input-otp";
 import { Minus } from "lucide-react";
 import { cn } from "../../lib/utils.js";
-const InputOTP = React.forwardRef(({ className, containerClassName, align, ...props }, ref) => /* @__PURE__ */ jsx(
+const InputOTP = React.forwardRef(({ className, containerClassName, ...props }, ref) => /* @__PURE__ */ jsx(
   OTPInput,
   {
     ref,
     "data-slot": "input-otp",
-    "data-align": align && align !== "start" ? align : void 0,
     containerClassName: cn("ui-otp-container", containerClassName),
     className: cn("ui-otp-input", className),
     ...props

package/dist/email/tokens.generated.d.ts

@@ -146,8 +146,8 @@ export declare const EMAIL_GEOMETRY_SOURCE: {
     readonly "--email-heading-font-size": "17px";
     readonly "--email-heading-line-height": "1.7";
     readonly "--email-heading-font-weight": "500";
-    readonly "--email-cta-height": "44px";
-    readonly "--email-cta-line-height": "44px";
+    readonly "--email-cta-height": "36px";
+    readonly "--email-cta-line-height": "36px";
     readonly "--email-cta-padding-x": "16px";
     readonly "--email-cta-radius": "6px";
     readonly "--email-cta-font-size": "14px";

package/dist/email/tokens.generated.js

@@ -136,8 +136,8 @@ const EMAIL_GEOMETRY_SOURCE = {
   "--email-heading-font-size": "17px",
   "--email-heading-line-height": "1.7",
   "--email-heading-font-weight": "500",
-  "--email-cta-height": "44px",
-  "--email-cta-line-height": "44px",
+  "--email-cta-height": "36px",
+  "--email-cta-line-height": "36px",
   "--email-cta-padding-x": "16px",
   "--email-cta-radius": "6px",
   "--email-cta-font-size": "14px",