@hachej/boring-ui-kit 0.1.81 → 0.1.82

package/dist/index.d.ts

@@ -174,6 +174,21 @@ type StatusBadgeProps = BadgeProps & {
 };
 declare function StatusBadge({ className, tone, variant, ...props }: StatusBadgeProps): React.JSX.Element;
 
+type MeterTone = 'default' | 'warning' | 'danger';
+interface MeterProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role'> {
+    /** Filled fraction as a percentage in the range 0..100. */
+    value: number;
+    /** Accessible label for the progressbar (screen readers). */
+    label?: string;
+    tone?: MeterTone;
+}
+/**
+ * Accessible horizontal usage/progress bar. Renders a subtle track with a
+ * proportional fill and exposes `role="progressbar"` with aria value props so
+ * consumers get an accessible meter out of the box.
+ */
+declare function Meter({ value, label, tone, className, ...props }: MeterProps): React.JSX.Element;
+
 type NoticeTone = 'info' | 'success' | 'warning' | 'error' | 'accent' | 'destructive';
 type NoticeProps = React.ComponentProps<'div'> & {
     tone?: NoticeTone;
@@ -454,4 +469,4 @@ interface BoringPerspectiveThemeOptions {
 declare function boringPerspectiveThemeName(root?: Pick<Element, "classList"> | null | undefined): "Pro Light" | "Pro Dark";
 declare function applyBoringPerspectiveTheme(element: HTMLElement, options?: BoringPerspectiveThemeOptions): void;
 
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, type AvatarFallbackProps, type AvatarProps, Badge, type BadgeProps, type BoringPerspectiveThemeOptions, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, type ButtonProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, ChipButton, type ChipButtonProps, type ChipProps, ChipRemove, type ChipRemoveProps, ChoiceGroup, ChoiceGroupLegend, ChoiceItem, ChoiceItemBody, ChoiceItemDescription, ChoiceItemTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DetailLine, type DetailLineProps, DetailList, type DetailListProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Disclosure, DisclosureChevron, DisclosureContent, DisclosureTrigger, type DisclosureTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, FieldDescription, FieldError, FieldLabel, FloatingPanel, FloatingPanelBody, type FloatingPanelBodyProps, FloatingPanelHeader, type FloatingPanelHeaderProps, type FloatingPanelProps, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, type IconButtonProps, InitialsAvatar, type InitialsAvatarProps, InlineCode, type InlineCodeProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type InputProps, Kbd, type KbdProps, Label, List, type ListProps, ListRow, ListRowActions, type ListRowActionsProps, ListRowDescription, type ListRowDescriptionProps, ListRowMain, type ListRowMainProps, ListRowMeta, type ListRowMetaProps, type ListRowProps, ListRowTitle, type ListRowTitleProps, LoadingState, type LoadingStateProps, Notice, type NoticeProps, type NoticeTone, Pane, PaneBody, PaneDescription, PaneFooter, PaneHeader, PaneTitle, PaneToolbar, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Radio, type RadioProps, ResizeHandle, type ResizeHandleOrientation, type ResizeHandleProps, ScrollArea, ScrollBar, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, SettingsActionRow, type SettingsActionRowProps, SettingsNav, type SettingsNavItem, type SettingsNavProps, SettingsPageHeader, type SettingsPageHeaderProps, SettingsPanel, type SettingsPanelProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, type ToastApi$1 as ToastApi, type ToastApi as ToastEventApi, type ToastInput as ToastEventInput, type ToastVariant as ToastEventVariant, type ToastInput$1 as ToastInput, type ToastRecord, type ToastVariant$1 as ToastVariant, Toaster, type ToasterProps, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyBoringPerspectiveTheme, badgeVariants, boringPerspectiveThemeName, buttonGroupVariants, buttonVariants, clearToasts, cn, dismissToast, getActiveToasts, subscribeToasts, tabsListVariants, toast, useToast };
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarFallback, type AvatarFallbackProps, type AvatarProps, Badge, type BadgeProps, type BoringPerspectiveThemeOptions, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, type ButtonProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Chip, ChipButton, type ChipButtonProps, type ChipProps, ChipRemove, type ChipRemoveProps, ChoiceGroup, ChoiceGroupLegend, ChoiceItem, ChoiceItemBody, ChoiceItemDescription, ChoiceItemTitle, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DetailLine, type DetailLineProps, DetailList, type DetailListProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Disclosure, DisclosureChevron, DisclosureContent, DisclosureTrigger, type DisclosureTriggerProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, Field, FieldDescription, FieldError, FieldLabel, FloatingPanel, FloatingPanelBody, type FloatingPanelBodyProps, FloatingPanelHeader, type FloatingPanelHeaderProps, type FloatingPanelProps, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, type IconButtonProps, InitialsAvatar, type InitialsAvatarProps, InlineCode, type InlineCodeProps, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, type InputProps, Kbd, type KbdProps, Label, List, type ListProps, ListRow, ListRowActions, type ListRowActionsProps, ListRowDescription, type ListRowDescriptionProps, ListRowMain, type ListRowMainProps, ListRowMeta, type ListRowMetaProps, type ListRowProps, ListRowTitle, type ListRowTitleProps, LoadingState, type LoadingStateProps, Meter, type MeterProps, type MeterTone, Notice, type NoticeProps, type NoticeTone, Pane, PaneBody, PaneDescription, PaneFooter, PaneHeader, PaneTitle, PaneToolbar, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Radio, type RadioProps, ResizeHandle, type ResizeHandleOrientation, type ResizeHandleProps, ScrollArea, ScrollBar, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, SettingsActionRow, type SettingsActionRowProps, SettingsNav, type SettingsNavItem, type SettingsNavProps, SettingsPageHeader, type SettingsPageHeaderProps, SettingsPanel, type SettingsPanelProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, StatusBadge, type StatusBadgeProps, type StatusBadgeTone, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, type ToastApi$1 as ToastApi, type ToastApi as ToastEventApi, type ToastInput as ToastEventInput, type ToastVariant as ToastEventVariant, type ToastInput$1 as ToastInput, type ToastRecord, type ToastVariant$1 as ToastVariant, Toaster, type ToasterProps, Toolbar, ToolbarButton, type ToolbarButtonProps, ToolbarGroup, type ToolbarGroupProps, type ToolbarProps, ToolbarSeparator, type ToolbarSeparatorProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyBoringPerspectiveTheme, badgeVariants, boringPerspectiveThemeName, buttonGroupVariants, buttonVariants, clearToasts, cn, dismissToast, getActiveToasts, subscribeToasts, tabsListVariants, toast, useToast };

package/dist/index.js

@@ -1044,8 +1044,40 @@ function StatusBadge({ className, tone = "neutral", variant = "ghost", ...props
   return /* @__PURE__ */ jsx19(Badge, { "data-slot": "status-badge", variant, className: cn(toneClasses[tone], className), ...props });
 }
 
+// src/meter.tsx
+import { jsx as jsx20 } from "react/jsx-runtime";
+var toneFill = {
+  default: "bg-primary",
+  warning: "bg-[color:var(--boring-warning,var(--accent-foreground))]",
+  danger: "bg-destructive"
+};
+function Meter({ value, label, tone = "default", className, ...props }) {
+  const clamped = Number.isFinite(value) ? Math.max(0, Math.min(100, value)) : 0;
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      role: "progressbar",
+      "aria-valuenow": Math.round(clamped),
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-label": label,
+      "data-slot": "meter",
+      className: cn("relative h-2 w-full overflow-hidden rounded-full bg-muted", className),
+      ...props,
+      children: /* @__PURE__ */ jsx20(
+        "div",
+        {
+          "data-slot": "meter-fill",
+          className: cn("h-full rounded-full transition-[width] duration-300 ease-out", toneFill[tone]),
+          style: { width: `${clamped}%` }
+        }
+      )
+    }
+  );
+}
+
 // src/notice.tsx
-import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs8 } from "react/jsx-runtime";
 var noticeToneClasses = {
   info: "border-border bg-muted/20 text-foreground [&_[data-slot=notice-icon]]:text-muted-foreground",
   success: "border-success/35 bg-[color:var(--success-soft)] text-success [&_[data-slot=notice-description]]:text-foreground",
@@ -1076,22 +1108,22 @@ function Notice({
       ),
       ...props,
       children: [
-        icon && /* @__PURE__ */ jsx20("div", { "data-slot": "notice-icon", className: "mt-0.5 shrink-0", children: icon }),
+        icon && /* @__PURE__ */ jsx21("div", { "data-slot": "notice-icon", className: "mt-0.5 shrink-0", children: icon }),
         /* @__PURE__ */ jsxs8("div", { className: "min-w-0 flex-1", children: [
-          title && /* @__PURE__ */ jsx20("div", { "data-slot": "notice-title", className: "font-medium leading-snug", children: title }),
-          description && /* @__PURE__ */ jsx20("div", { "data-slot": "notice-description", className: cn("text-muted-foreground", title && "mt-0.5"), children: description }),
+          title && /* @__PURE__ */ jsx21("div", { "data-slot": "notice-title", className: "font-medium leading-snug", children: title }),
+          description && /* @__PURE__ */ jsx21("div", { "data-slot": "notice-description", className: cn("text-muted-foreground", title && "mt-0.5"), children: description }),
           children
         ] }),
-        actions && /* @__PURE__ */ jsx20("div", { "data-slot": "notice-actions", className: "flex shrink-0 items-center gap-2", children: actions })
+        actions && /* @__PURE__ */ jsx21("div", { "data-slot": "notice-actions", className: "flex shrink-0 items-center gap-2", children: actions })
       ]
     }
   );
 }
 
 // src/skeleton.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function Skeleton({ className, ...props }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       "data-slot": "skeleton",
@@ -1103,9 +1135,9 @@ function Skeleton({ className, ...props }) {
 }
 
 // src/inline-code.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function InlineCode({ className, ...props }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "code",
     {
       "data-slot": "inline-code",
@@ -1116,9 +1148,9 @@ function InlineCode({ className, ...props }) {
 }
 
 // src/toolbar.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function Toolbar({ className, ...props }) {
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       "data-slot": "toolbar",
@@ -1129,19 +1161,19 @@ function Toolbar({ className, ...props }) {
   );
 }
 function ToolbarGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx23("div", { "data-slot": "toolbar-group", className: cn("flex items-center gap-0.5", className), ...props });
+  return /* @__PURE__ */ jsx24("div", { "data-slot": "toolbar-group", className: cn("flex items-center gap-0.5", className), ...props });
 }
 function ToolbarButton({ className, variant = "ghost", size = "icon-sm", ...props }) {
-  return /* @__PURE__ */ jsx23(Button, { "data-slot": "toolbar-button", variant, size, className: cn("shrink-0", className), ...props });
+  return /* @__PURE__ */ jsx24(Button, { "data-slot": "toolbar-button", variant, size, className: cn("shrink-0", className), ...props });
 }
 function ToolbarSeparator({ className, ...props }) {
-  return /* @__PURE__ */ jsx23("div", { "data-slot": "toolbar-separator", "aria-hidden": "true", className: cn("mx-1 h-4 w-px shrink-0 bg-border/60", className), ...props });
+  return /* @__PURE__ */ jsx24("div", { "data-slot": "toolbar-separator", "aria-hidden": "true", className: cn("mx-1 h-4 w-px shrink-0 bg-border/60", className), ...props });
 }
 
 // src/chip.tsx
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function Chip({ className, selected, ...props }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     "span",
     {
       "data-slot": "chip",
@@ -1156,7 +1188,7 @@ function Chip({ className, selected, ...props }) {
   );
 }
 function ChipButton({ className, selected, variant = "outline", size = "xs", ...props }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     Button,
     {
       "data-slot": "chip-button",
@@ -1173,7 +1205,7 @@ function ChipButton({ className, selected, variant = "outline", size = "xs", ...
   );
 }
 function ChipRemove({ className, children, variant = "ghost", size = "icon-xs", ...props }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     Button,
     {
       "data-slot": "chip-remove",
@@ -1181,15 +1213,15 @@ function ChipRemove({ className, children, variant = "ghost", size = "icon-xs",
       size,
       className: cn("size-4 rounded-full text-muted-foreground hover:text-foreground", className),
       ...props,
-      children: children ?? /* @__PURE__ */ jsx24("span", { "aria-hidden": "true", className: "text-[13px] leading-none", children: "\xD7" })
+      children: children ?? /* @__PURE__ */ jsx25("span", { "aria-hidden": "true", className: "text-[13px] leading-none", children: "\xD7" })
     }
   );
 }
 
 // src/segmented-control.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function SegmentedControl({ className, ...props }) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       "data-slot": "segmented-control",
@@ -1200,7 +1232,7 @@ function SegmentedControl({ className, ...props }) {
   );
 }
 function SegmentedControlItem({ className, selected, variant = "ghost", size = "xs", ...props }) {
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     Button,
     {
       "data-slot": "segmented-control-item",
@@ -1220,7 +1252,7 @@ function SegmentedControlItem({ className, selected, variant = "ghost", size = "
 }
 
 // src/settings.tsx
-import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs9 } from "react/jsx-runtime";
 function SettingsPanel({ className, icon, title, description, footer, danger, testId, children, ...props }) {
   return /* @__PURE__ */ jsxs9(
     "section",
@@ -1231,24 +1263,24 @@ function SettingsPanel({ className, icon, title, description, footer, danger, te
       ...props,
       children: [
         /* @__PURE__ */ jsxs9("div", { "data-slot": "settings-panel-header", className: "flex min-h-11 items-center gap-2 border-b border-border/50 px-4 py-2.5", children: [
-          icon && /* @__PURE__ */ jsx26("span", { "data-slot": "settings-panel-icon", className: danger ? "text-destructive" : "text-muted-foreground", children: icon }),
+          icon && /* @__PURE__ */ jsx27("span", { "data-slot": "settings-panel-icon", className: danger ? "text-destructive" : "text-muted-foreground", children: icon }),
           /* @__PURE__ */ jsxs9("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx26("h2", { "data-slot": "settings-panel-title", className: cn("text-[13px] font-medium leading-5", danger ? "text-destructive" : "text-foreground"), children: title }),
-            description ? /* @__PURE__ */ jsx26("p", { "data-slot": "settings-panel-description", className: "text-[12px] leading-5 text-muted-foreground", children: description }) : null
+            /* @__PURE__ */ jsx27("h2", { "data-slot": "settings-panel-title", className: cn("text-[13px] font-medium leading-5", danger ? "text-destructive" : "text-foreground"), children: title }),
+            description ? /* @__PURE__ */ jsx27("p", { "data-slot": "settings-panel-description", className: "text-[12px] leading-5 text-muted-foreground", children: description }) : null
           ] })
         ] }),
-        /* @__PURE__ */ jsx26("div", { "data-slot": "settings-panel-body", className: "p-4", children }),
-        footer ? /* @__PURE__ */ jsx26("div", { "data-slot": "settings-panel-footer", className: "flex items-center justify-end gap-2 border-t border-border/50 bg-muted/10 px-4 py-3", children: footer }) : null
+        /* @__PURE__ */ jsx27("div", { "data-slot": "settings-panel-body", className: "p-4", children }),
+        footer ? /* @__PURE__ */ jsx27("div", { "data-slot": "settings-panel-footer", className: "flex items-center justify-end gap-2 border-t border-border/50 bg-muted/10 px-4 py-3", children: footer }) : null
       ]
     }
   );
 }
 function SettingsNav({ className, label, items, ...props }) {
   return /* @__PURE__ */ jsxs9("nav", { "data-slot": "settings-nav", "aria-label": `${label} sections`, className: cn("boring-settings-nav", className), ...props, children: [
-    /* @__PURE__ */ jsx26("p", { "data-slot": "settings-nav-label", className: "boring-settings-nav-label", children: label }),
-    items.map((item) => /* @__PURE__ */ jsx26("a", { "data-slot": "settings-nav-item", href: item.href, className: "boring-settings-nav-item", children: /* @__PURE__ */ jsxs9("span", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx26("span", { className: "block truncate text-[12.5px] font-medium text-foreground", children: item.label }),
-      item.description ? /* @__PURE__ */ jsx26("span", { className: "block truncate text-[11.5px] leading-4 text-muted-foreground", children: item.description }) : null
+    /* @__PURE__ */ jsx27("p", { "data-slot": "settings-nav-label", className: "boring-settings-nav-label", children: label }),
+    items.map((item) => /* @__PURE__ */ jsx27("a", { "data-slot": "settings-nav-item", href: item.href, className: "boring-settings-nav-item", children: /* @__PURE__ */ jsxs9("span", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx27("span", { className: "block truncate text-[12.5px] font-medium text-foreground", children: item.label }),
+      item.description ? /* @__PURE__ */ jsx27("span", { className: "block truncate text-[11.5px] leading-4 text-muted-foreground", children: item.description }) : null
     ] }) }, item.href))
   ] });
 }
@@ -1256,9 +1288,9 @@ function SettingsPageHeader({ className, eyebrow, title, description, context, c
   return /* @__PURE__ */ jsxs9("header", { "data-slot": "settings-page-header", className: cn("boring-settings-page-header", className), ...props, children: [
     context,
     /* @__PURE__ */ jsxs9("div", { className: "max-w-2xl", children: [
-      eyebrow ? /* @__PURE__ */ jsx26("p", { "data-slot": "settings-page-eyebrow", className: "text-[11px] font-medium uppercase leading-4 text-muted-foreground", children: eyebrow }) : null,
-      /* @__PURE__ */ jsx26("h1", { "data-slot": "settings-page-title", className: "mt-1 text-[20px] font-semibold leading-7 tracking-tight text-foreground", children: title }),
-      description ? /* @__PURE__ */ jsx26("p", { "data-slot": "settings-page-description", className: "mt-2 text-[13px] leading-5 text-muted-foreground", children: description }) : null
+      eyebrow ? /* @__PURE__ */ jsx27("p", { "data-slot": "settings-page-eyebrow", className: "text-[11px] font-medium uppercase leading-4 text-muted-foreground", children: eyebrow }) : null,
+      /* @__PURE__ */ jsx27("h1", { "data-slot": "settings-page-title", className: "mt-1 text-[20px] font-semibold leading-7 tracking-tight text-foreground", children: title }),
+      description ? /* @__PURE__ */ jsx27("p", { "data-slot": "settings-page-description", className: "mt-2 text-[13px] leading-5 text-muted-foreground", children: description }) : null
     ] }),
     children
   ] });
@@ -1266,26 +1298,26 @@ function SettingsPageHeader({ className, eyebrow, title, description, context, c
 function SettingsActionRow({ className, title, description, action, ...props }) {
   return /* @__PURE__ */ jsxs9("div", { "data-slot": "settings-action-row", className: cn("boring-settings-action-row", className), ...props, children: [
     /* @__PURE__ */ jsxs9("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx26("p", { "data-slot": "settings-action-title", className: "text-[13px] font-medium leading-5 text-foreground", children: title }),
-      description ? /* @__PURE__ */ jsx26("p", { "data-slot": "settings-action-description", className: "mt-1 max-w-xl text-[12px] leading-5 text-muted-foreground", children: description }) : null
+      /* @__PURE__ */ jsx27("p", { "data-slot": "settings-action-title", className: "text-[13px] font-medium leading-5 text-foreground", children: title }),
+      description ? /* @__PURE__ */ jsx27("p", { "data-slot": "settings-action-description", className: "mt-1 max-w-xl text-[12px] leading-5 text-muted-foreground", children: description }) : null
     ] }),
-    /* @__PURE__ */ jsx26("div", { "data-slot": "settings-action", className: "shrink-0", children: action })
+    /* @__PURE__ */ jsx27("div", { "data-slot": "settings-action", className: "shrink-0", children: action })
   ] });
 }
 function DetailLine({ className, icon, label, children, ...props }) {
   return /* @__PURE__ */ jsxs9("div", { "data-slot": "detail-line", className: cn("flex min-h-12 items-center gap-3 px-3 py-2 text-[13px]", className), ...props, children: [
-    icon ? /* @__PURE__ */ jsx26("span", { "data-slot": "detail-line-icon", className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground", children: icon }) : null,
-    /* @__PURE__ */ jsx26("dt", { "data-slot": "detail-line-label", className: "w-32 shrink-0 text-[12px] text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsx26("dd", { "data-slot": "detail-line-value", className: "min-w-0 flex-1 text-foreground", children })
+    icon ? /* @__PURE__ */ jsx27("span", { "data-slot": "detail-line-icon", className: "flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-muted-foreground", children: icon }) : null,
+    /* @__PURE__ */ jsx27("dt", { "data-slot": "detail-line-label", className: "w-32 shrink-0 text-[12px] text-muted-foreground", children: label }),
+    /* @__PURE__ */ jsx27("dd", { "data-slot": "detail-line-value", className: "min-w-0 flex-1 text-foreground", children })
   ] });
 }
 
 // src/disclosure.tsx
 import * as React6 from "react";
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-import { jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs10 } from "react/jsx-runtime";
 var Disclosure = CollapsiblePrimitive.Root;
-var DisclosureContent = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx27(
+var DisclosureContent = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx28(
   CollapsiblePrimitive.Content,
   {
     ref,
@@ -1296,7 +1328,7 @@ var DisclosureContent = React6.forwardRef(({ className, ...props }, ref) => /* @
 ));
 DisclosureContent.displayName = "DisclosureContent";
 var DisclosureTrigger = React6.forwardRef(
-  ({ className, children, chevron, variant = "ghost", size = "sm", ...props }, ref) => /* @__PURE__ */ jsx27(CollapsiblePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs10(
+  ({ className, children, chevron, variant = "ghost", size = "sm", ...props }, ref) => /* @__PURE__ */ jsx28(CollapsiblePrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs10(
     Button,
     {
       ref,
@@ -1306,7 +1338,7 @@ var DisclosureTrigger = React6.forwardRef(
       className: cn("group/disclosure justify-start gap-2", className),
       ...props,
       children: [
-        chevron ?? /* @__PURE__ */ jsx27(DisclosureChevron, {}),
+        chevron ?? /* @__PURE__ */ jsx28(DisclosureChevron, {}),
         children
       ]
     }
@@ -1314,7 +1346,7 @@ var DisclosureTrigger = React6.forwardRef(
 );
 DisclosureTrigger.displayName = "DisclosureTrigger";
 function DisclosureChevron({ className, ...props }) {
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     "span",
     {
       "data-slot": "disclosure-chevron",
@@ -1327,7 +1359,7 @@ function DisclosureChevron({ className, ...props }) {
 }
 
 // src/resize-handle.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function ResizeHandle({
   className,
   orientation = "vertical",
@@ -1336,7 +1368,7 @@ function ResizeHandle({
   tabIndex = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     "div",
     {
       "data-slot": "resize-handle",
@@ -1356,9 +1388,9 @@ function ResizeHandle({
 }
 
 // src/avatar.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function Avatar({ className, ...props }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     "div",
     {
       "data-slot": "avatar",
@@ -1368,7 +1400,7 @@ function Avatar({ className, ...props }) {
   );
 }
 function AvatarFallback({ className, ...props }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     "span",
     {
       "data-slot": "avatar-fallback",
@@ -1378,13 +1410,13 @@ function AvatarFallback({ className, ...props }) {
   );
 }
 function InitialsAvatar({ initials, className, ...props }) {
-  return /* @__PURE__ */ jsx29(Avatar, { className, ...props, children: /* @__PURE__ */ jsx29(AvatarFallback, { children: initials }) });
+  return /* @__PURE__ */ jsx30(Avatar, { className, ...props, children: /* @__PURE__ */ jsx30(AvatarFallback, { children: initials }) });
 }
 
 // src/toast.tsx
 import * as React7 from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx30, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs11 } from "react/jsx-runtime";
 var toasts = [];
 var listeners = /* @__PURE__ */ new Set();
 var nextId = 0;
@@ -1443,7 +1475,7 @@ function Toaster({ position = "bottom-right", className }) {
   const [items, setItems] = React7.useState(() => toasts);
   React7.useEffect(() => subscribeToasts(setItems), []);
   if (typeof document === "undefined") return null;
-  const node = /* @__PURE__ */ jsx30(
+  const node = /* @__PURE__ */ jsx31(
     "div",
     {
       role: "region",
@@ -1471,12 +1503,12 @@ function Toaster({ position = "bottom-right", className }) {
               VARIANT_CLASS[variant]
             ),
             children: [
-              /* @__PURE__ */ jsx30("span", { "data-toast-icon": true, className: "mt-0.5 flex h-3.5 w-3.5 shrink-0 items-center justify-center text-[11px] font-semibold leading-none", children: VARIANT_ICON[variant] }),
+              /* @__PURE__ */ jsx31("span", { "data-toast-icon": true, className: "mt-0.5 flex h-3.5 w-3.5 shrink-0 items-center justify-center text-[11px] font-semibold leading-none", children: VARIANT_ICON[variant] }),
               /* @__PURE__ */ jsxs11("div", { className: "min-w-0 flex-1", children: [
-                item.title && /* @__PURE__ */ jsx30("div", { className: "text-sm font-medium leading-snug", children: item.title }),
-                item.description && /* @__PURE__ */ jsx30("div", { className: cn("text-xs text-muted-foreground", item.title ? "mt-0.5" : "leading-snug"), children: item.description })
+                item.title && /* @__PURE__ */ jsx31("div", { className: "text-sm font-medium leading-snug", children: item.title }),
+                item.description && /* @__PURE__ */ jsx31("div", { className: cn("text-xs text-muted-foreground", item.title ? "mt-0.5" : "leading-snug"), children: item.description })
               ] }),
-              /* @__PURE__ */ jsx30(IconButton, { type: "button", variant: "ghost", size: "icon-xs", onClick: () => dismissToast(item.id), "aria-label": "Dismiss", className: "shrink-0 text-muted-foreground/70", children: /* @__PURE__ */ jsx30("span", { "aria-hidden": "true", className: "text-[13px] leading-none", children: "\xD7" }) })
+              /* @__PURE__ */ jsx31(IconButton, { type: "button", variant: "ghost", size: "icon-xs", onClick: () => dismissToast(item.id), "aria-label": "Dismiss", className: "shrink-0 text-muted-foreground/70", children: /* @__PURE__ */ jsx31("span", { "aria-hidden": "true", className: "text-[13px] leading-none", children: "\xD7" }) })
             ]
           },
           item.id
@@ -1488,7 +1520,7 @@ function Toaster({ position = "bottom-right", className }) {
 }
 
 // src/loading-state.tsx
-import { jsx as jsx31, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
 function LoadingState({ className, label = "Loading\u2026", centered = false, children, ...props }) {
   return /* @__PURE__ */ jsxs12(
     "div",
@@ -1502,20 +1534,20 @@ function LoadingState({ className, label = "Loading\u2026", centered = false, ch
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx31(Spinner, { className: "size-3.5" }),
-        /* @__PURE__ */ jsx31("span", { children: children ?? label })
+        /* @__PURE__ */ jsx32(Spinner, { className: "size-3.5" }),
+        /* @__PURE__ */ jsx32("span", { children: children ?? label })
       ]
     }
   );
 }
 
 // src/list.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function List2({ className, ...props }) {
-  return /* @__PURE__ */ jsx32("div", { "data-slot": "list", className: cn("divide-y divide-border/60", className), ...props });
+  return /* @__PURE__ */ jsx33("div", { "data-slot": "list", className: cn("divide-y divide-border/60", className), ...props });
 }
 function ListRow({ className, interactive, ...props }) {
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     "div",
     {
       "data-slot": "list-row",
@@ -1530,25 +1562,25 @@ function ListRow({ className, interactive, ...props }) {
   );
 }
 function ListRowMain({ className, ...props }) {
-  return /* @__PURE__ */ jsx32("div", { "data-slot": "list-row-main", className: cn("min-w-0 flex-1", className), ...props });
+  return /* @__PURE__ */ jsx33("div", { "data-slot": "list-row-main", className: cn("min-w-0 flex-1", className), ...props });
 }
 function ListRowTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx32("p", { "data-slot": "list-row-title", className: cn("truncate text-sm font-medium text-foreground", className), ...props });
+  return /* @__PURE__ */ jsx33("p", { "data-slot": "list-row-title", className: cn("truncate text-sm font-medium text-foreground", className), ...props });
 }
 function ListRowDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx32("p", { "data-slot": "list-row-description", className: cn("truncate text-xs text-muted-foreground", className), ...props });
+  return /* @__PURE__ */ jsx33("p", { "data-slot": "list-row-description", className: cn("truncate text-xs text-muted-foreground", className), ...props });
 }
 function ListRowMeta({ className, ...props }) {
-  return /* @__PURE__ */ jsx32("div", { "data-slot": "list-row-meta", className: cn("flex shrink-0 items-center gap-2 text-xs text-muted-foreground", className), ...props });
+  return /* @__PURE__ */ jsx33("div", { "data-slot": "list-row-meta", className: cn("flex shrink-0 items-center gap-2 text-xs text-muted-foreground", className), ...props });
 }
 function ListRowActions({ className, ...props }) {
-  return /* @__PURE__ */ jsx32("div", { "data-slot": "list-row-actions", className: cn("flex shrink-0 items-center gap-2", className), ...props });
+  return /* @__PURE__ */ jsx33("div", { "data-slot": "list-row-actions", className: cn("flex shrink-0 items-center gap-2", className), ...props });
 }
 
 // src/detail-list.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function DetailList({ className, ...props }) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "dl",
     {
       "data-slot": "detail-list",
@@ -1559,9 +1591,9 @@ function DetailList({ className, ...props }) {
 }
 
 // src/floating-panel.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function FloatingPanel({ className, ...props }) {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "div",
     {
       "data-slot": "floating-panel",
@@ -1571,16 +1603,16 @@ function FloatingPanel({ className, ...props }) {
   );
 }
 function FloatingPanelHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx34("div", { "data-slot": "floating-panel-header", className: cn("flex items-center justify-between gap-2 border-b border-border px-1 pb-2", className), ...props });
+  return /* @__PURE__ */ jsx35("div", { "data-slot": "floating-panel-header", className: cn("flex items-center justify-between gap-2 border-b border-border px-1 pb-2", className), ...props });
 }
 function FloatingPanelBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx34("div", { "data-slot": "floating-panel-body", className: cn("py-1", className), ...props });
+  return /* @__PURE__ */ jsx35("div", { "data-slot": "floating-panel-body", className: cn("py-1", className), ...props });
 }
 
 // src/card.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function Card({ className, ...props }) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       "data-slot": "card",
@@ -1593,7 +1625,7 @@ function Card({ className, ...props }) {
   );
 }
 function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       "data-slot": "card-header",
@@ -1606,7 +1638,7 @@ function CardHeader({ className, ...props }) {
   );
 }
 function CardTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       "data-slot": "card-title",
@@ -1616,7 +1648,7 @@ function CardTitle({ className, ...props }) {
   );
 }
 function CardDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       "data-slot": "card-description",
@@ -1626,7 +1658,7 @@ function CardDescription({ className, ...props }) {
   );
 }
 function CardAction({ className, ...props }) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       "data-slot": "card-action",
@@ -1639,7 +1671,7 @@ function CardAction({ className, ...props }) {
   );
 }
 function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       "data-slot": "card-content",
@@ -1649,7 +1681,7 @@ function CardContent({ className, ...props }) {
   );
 }
 function CardFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       "data-slot": "card-footer",
@@ -1661,12 +1693,12 @@ function CardFooter({ className, ...props }) {
 
 // src/label.tsx
 import * as LabelPrimitive from "@radix-ui/react-label";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function Label3({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     LabelPrimitive.Root,
     {
       "data-slot": "label",
@@ -1681,12 +1713,12 @@ function Label3({
 
 // src/checkbox.tsx
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function Checkbox({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     CheckboxPrimitive.Root,
     {
       "data-slot": "checkbox",
@@ -1695,12 +1727,12 @@ function Checkbox({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx37(
+      children: /* @__PURE__ */ jsx38(
         CheckboxPrimitive.Indicator,
         {
           "data-slot": "checkbox-indicator",
           className: "grid place-content-center text-current transition-none",
-          children: /* @__PURE__ */ jsx37("span", { "aria-hidden": "true", className: "text-xs leading-none", children: "\u2713" })
+          children: /* @__PURE__ */ jsx38("span", { "aria-hidden": "true", className: "text-xs leading-none", children: "\u2713" })
         }
       )
     }
@@ -1709,8 +1741,8 @@ function Checkbox({
 
 // src/radio.tsx
 import * as React8 from "react";
-import { jsx as jsx38 } from "react/jsx-runtime";
-var Radio = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
+import { jsx as jsx39 } from "react/jsx-runtime";
+var Radio = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx39(
   "input",
   {
     ref,
@@ -1727,27 +1759,27 @@ Radio.displayName = "Radio";
 
 // src/alert-dialog.tsx
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import { jsx as jsx39, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs13 } from "react/jsx-runtime";
 function AlertDialog({
   ...props
 }) {
-  return /* @__PURE__ */ jsx39(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+  return /* @__PURE__ */ jsx40(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
 }
 function AlertDialogTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx39(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+  return /* @__PURE__ */ jsx40(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
 }
 function AlertDialogPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx39(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
+  return /* @__PURE__ */ jsx40(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
 }
 function AlertDialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     AlertDialogPrimitive.Overlay,
     {
       "data-slot": "alert-dialog-overlay",
@@ -1765,8 +1797,8 @@ function AlertDialogContent({
   ...props
 }) {
   return /* @__PURE__ */ jsxs13(AlertDialogPortal, { children: [
-    /* @__PURE__ */ jsx39(AlertDialogOverlay, {}),
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsx40(
       AlertDialogPrimitive.Content,
       {
         "data-slot": "alert-dialog-content",
@@ -1784,7 +1816,7 @@ function AlertDialogHeader({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "div",
     {
       "data-slot": "alert-dialog-header",
@@ -1800,7 +1832,7 @@ function AlertDialogFooter({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "div",
     {
       "data-slot": "alert-dialog-footer",
@@ -1816,7 +1848,7 @@ function AlertDialogTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     AlertDialogPrimitive.Title,
     {
       "data-slot": "alert-dialog-title",
@@ -1832,7 +1864,7 @@ function AlertDialogDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     AlertDialogPrimitive.Description,
     {
       "data-slot": "alert-dialog-description",
@@ -1845,7 +1877,7 @@ function AlertDialogMedia({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "div",
     {
       "data-slot": "alert-dialog-media",
@@ -1863,7 +1895,7 @@ function AlertDialogAction({
   size = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx39(Button, { variant, size, asChild: true, children: /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(Button, { variant, size, asChild: true, children: /* @__PURE__ */ jsx40(
     AlertDialogPrimitive.Action,
     {
       "data-slot": "alert-dialog-action",
@@ -1878,7 +1910,7 @@ function AlertDialogCancel({
   size = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx39(Button, { variant, size, asChild: true, children: /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(Button, { variant, size, asChild: true, children: /* @__PURE__ */ jsx40(
     AlertDialogPrimitive.Cancel,
     {
       "data-slot": "alert-dialog-cancel",
@@ -1890,16 +1922,16 @@ function AlertDialogCancel({
 
 // src/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function Popover({
   ...props
 }) {
-  return /* @__PURE__ */ jsx40(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ jsx41(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx40(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ jsx41(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({
   className,
@@ -1907,7 +1939,7 @@ function PopoverContent({
   sideOffset = 4,
   ...props
 }) {
-  return /* @__PURE__ */ jsx40(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx41(
     PopoverPrimitive.Content,
     {
       "data-slot": "popover-content",
@@ -1924,10 +1956,10 @@ function PopoverContent({
 function PopoverAnchor({
   ...props
 }) {
-  return /* @__PURE__ */ jsx40(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+  return /* @__PURE__ */ jsx41(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
 }
 function PopoverHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     "div",
     {
       "data-slot": "popover-header",
@@ -1937,7 +1969,7 @@ function PopoverHeader({ className, ...props }) {
   );
 }
 function PopoverTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     "div",
     {
       "data-slot": "popover-title",
@@ -1950,7 +1982,7 @@ function PopoverDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx40(
+  return /* @__PURE__ */ jsx41(
     "p",
     {
       "data-slot": "popover-description",
@@ -1962,7 +1994,7 @@ function PopoverDescription({
 
 // src/scroll-area.tsx
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import { jsx as jsx41, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs14 } from "react/jsx-runtime";
 function ScrollArea({
   className,
   children,
@@ -1975,7 +2007,7 @@ function ScrollArea({
       className: cn("relative", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx42(
           ScrollAreaPrimitive.Viewport,
           {
             "data-slot": "scroll-area-viewport",
@@ -1983,8 +2015,8 @@ function ScrollArea({
             children
           }
         ),
-        /* @__PURE__ */ jsx41(ScrollBar, {}),
-        /* @__PURE__ */ jsx41(ScrollAreaPrimitive.Corner, {})
+        /* @__PURE__ */ jsx42(ScrollBar, {}),
+        /* @__PURE__ */ jsx42(ScrollAreaPrimitive.Corner, {})
       ]
     }
   );
@@ -1994,7 +2026,7 @@ function ScrollBar({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     ScrollAreaPrimitive.ScrollAreaScrollbar,
     {
       "data-slot": "scroll-area-scrollbar",
@@ -2006,7 +2038,7 @@ function ScrollBar({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx41(
+      children: /* @__PURE__ */ jsx42(
         ScrollAreaPrimitive.ScrollAreaThumb,
         {
           "data-slot": "scroll-area-thumb",
@@ -2019,30 +2051,30 @@ function ScrollBar({
 
 // src/sheet.tsx
 import * as SheetPrimitive from "@radix-ui/react-dialog";
-import { jsx as jsx42, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs15 } from "react/jsx-runtime";
 function Sheet({ ...props }) {
-  return /* @__PURE__ */ jsx42(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
+  return /* @__PURE__ */ jsx43(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
 }
 function SheetTrigger({
   ...props
 }) {
-  return /* @__PURE__ */ jsx42(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
+  return /* @__PURE__ */ jsx43(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
 }
 function SheetClose({
   ...props
 }) {
-  return /* @__PURE__ */ jsx42(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
+  return /* @__PURE__ */ jsx43(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
 }
 function SheetPortal({
   ...props
 }) {
-  return /* @__PURE__ */ jsx42(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+  return /* @__PURE__ */ jsx43(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
 }
 function SheetOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     SheetPrimitive.Overlay,
     {
       "data-slot": "sheet-overlay",
@@ -2062,7 +2094,7 @@ function SheetContent({
   ...props
 }) {
   return /* @__PURE__ */ jsxs15(SheetPortal, { children: [
-    /* @__PURE__ */ jsx42(SheetOverlay, {}),
+    /* @__PURE__ */ jsx43(SheetOverlay, {}),
     /* @__PURE__ */ jsxs15(
       SheetPrimitive.Content,
       {
@@ -2079,8 +2111,8 @@ function SheetContent({
         children: [
           children,
           showCloseButton && /* @__PURE__ */ jsxs15(SheetPrimitive.Close, { className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
-            /* @__PURE__ */ jsx42("span", { "aria-hidden": "true", className: "text-base leading-none", children: "\xD7" }),
-            /* @__PURE__ */ jsx42("span", { className: "sr-only", children: "Close" })
+            /* @__PURE__ */ jsx43("span", { "aria-hidden": "true", className: "text-base leading-none", children: "\xD7" }),
+            /* @__PURE__ */ jsx43("span", { className: "sr-only", children: "Close" })
           ] })
         ]
       }
@@ -2088,7 +2120,7 @@ function SheetContent({
   ] });
 }
 function SheetHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       "data-slot": "sheet-header",
@@ -2098,7 +2130,7 @@ function SheetHeader({ className, ...props }) {
   );
 }
 function SheetFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       "data-slot": "sheet-footer",
@@ -2111,7 +2143,7 @@ function SheetTitle({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     SheetPrimitive.Title,
     {
       "data-slot": "sheet-title",
@@ -2124,7 +2156,7 @@ function SheetDescription({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     SheetPrimitive.Description,
     {
       "data-slot": "sheet-description",
@@ -2147,10 +2179,10 @@ function useToast() {
 // src/hover-card.tsx
 import * as React9 from "react";
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
-var HoverCardContent = React9.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx43(
+var HoverCardContent = React9.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx44(
   HoverCardPrimitive.Content,
   {
     ref,
@@ -2174,7 +2206,7 @@ var CollapsibleContent2 = CollapsiblePrimitive2.CollapsibleContent;
 // src/button-group.tsx
 import { Slot as Slot3 } from "@radix-ui/react-slot";
 import { cva as cva4 } from "class-variance-authority";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 var buttonGroupVariants = cva4(
   "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
@@ -2192,7 +2224,7 @@ function ButtonGroup({
   orientation,
   ...props
 }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     "div",
     {
       role: "group",
@@ -2209,7 +2241,7 @@ function ButtonGroupText({
   ...props
 }) {
   const Comp = asChild ? Slot3 : "div";
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     Comp,
     {
       className: cn(
@@ -2225,7 +2257,7 @@ function ButtonGroupSeparator({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx45(
     Separator,
     {
       "data-slot": "button-group-separator",
@@ -2238,9 +2270,9 @@ function ButtonGroupSeparator({
 
 // src/input-group.tsx
 import { cva as cva5 } from "class-variance-authority";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx46 } from "react/jsx-runtime";
 function InputGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     "div",
     {
       "data-slot": "input-group",
@@ -2278,7 +2310,7 @@ function InputGroupAddon({
   align = "inline-start",
   ...props
 }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     "div",
     {
       role: "group",
@@ -2311,10 +2343,10 @@ function InputGroupButton({
   size = "xs",
   ...props
 }) {
-  return /* @__PURE__ */ jsx45(Button, { type, "data-size": size, variant, className: cn(inputGroupButtonVariants({ size }), className), ...props });
+  return /* @__PURE__ */ jsx46(Button, { type, "data-size": size, variant, className: cn(inputGroupButtonVariants({ size }), className), ...props });
 }
 function InputGroupText({ className, ...props }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     "span",
     {
       className: cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg:not([class*=size-])]:size-4 [&_svg]:pointer-events-none", className),
@@ -2323,7 +2355,7 @@ function InputGroupText({ className, ...props }) {
   );
 }
 function InputGroupInput({ className, ...props }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     Input,
     {
       "data-slot": "input-group-control",
@@ -2333,7 +2365,7 @@ function InputGroupInput({ className, ...props }) {
   );
 }
 function InputGroupTextarea({ className, ...props }) {
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     Textarea,
     {
       "data-slot": "input-group-control",
@@ -2344,15 +2376,15 @@ function InputGroupTextarea({ className, ...props }) {
 }
 
 // src/choice-group.tsx
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function ChoiceGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx46("fieldset", { "data-slot": "choice-group", className: cn("grid gap-2", className), ...props });
+  return /* @__PURE__ */ jsx47("fieldset", { "data-slot": "choice-group", className: cn("grid gap-2", className), ...props });
 }
 function ChoiceGroupLegend({ className, ...props }) {
-  return /* @__PURE__ */ jsx46("legend", { "data-slot": "choice-group-legend", className: cn("mb-2 text-sm font-medium leading-5 text-foreground", className), ...props });
+  return /* @__PURE__ */ jsx47("legend", { "data-slot": "choice-group-legend", className: cn("mb-2 text-sm font-medium leading-5 text-foreground", className), ...props });
 }
 function ChoiceItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx46(
+  return /* @__PURE__ */ jsx47(
     "label",
     {
       "data-slot": "choice-item",
@@ -2367,13 +2399,13 @@ function ChoiceItem({ className, ...props }) {
   );
 }
 function ChoiceItemBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx46("span", { "data-slot": "choice-item-body", className: cn("flex flex-col gap-1", className), ...props });
+  return /* @__PURE__ */ jsx47("span", { "data-slot": "choice-item-body", className: cn("flex flex-col gap-1", className), ...props });
 }
 function ChoiceItemTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx46("span", { "data-slot": "choice-item-title", className: cn("leading-5", className), ...props });
+  return /* @__PURE__ */ jsx47("span", { "data-slot": "choice-item-title", className: cn("leading-5", className), ...props });
 }
 function ChoiceItemDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx46("small", { "data-slot": "choice-item-description", className: cn("text-sm leading-5 text-muted-foreground", className), ...props });
+  return /* @__PURE__ */ jsx47("small", { "data-slot": "choice-item-description", className: cn("text-sm leading-5 text-muted-foreground", className), ...props });
 }
 
 // src/perspective-theme.ts
@@ -2543,6 +2575,7 @@ export {
   ListRowMeta,
   ListRowTitle,
   LoadingState,
+  Meter,
   Notice,
   Pane,
   PaneBody,

package/dist/styles.css

@@ -27,6 +27,7 @@
     --tracking-widest: 0.1em;
     --leading-snug: 1.375;
     --radius-xs: 0.125rem;
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@@ -219,6 +220,9 @@
   .h-1 {
     height: var(--spacing);
   }
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
   .h-2\.5 {
     height: calc(var(--spacing) * 2.5);
   }
@@ -709,6 +713,9 @@
   .bg-\[color\:var\(--boring-success-soft\,var\(--secondary\)\)\] {
     background-color: var(--boring-success-soft,var(--secondary));
   }
+  .bg-\[color\:var\(--boring-warning\,var\(--accent-foreground\)\)\] {
+    background-color: var(--boring-warning,var(--accent-foreground));
+  }
   .bg-\[color\:var\(--boring-warning-soft\,var\(--accent\)\)\] {
     background-color: var(--boring-warning-soft,var(--accent));
   }
@@ -1126,6 +1133,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[width\] {
+    transition-property: width;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1162,10 +1174,18 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
   }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hachej/boring-ui-kit",
-  "version": "0.1.81",
+  "version": "0.1.82",
   "type": "module",
   "license": "MIT",
   "description": "Shared shadcn-style UI primitives for Boring packages and app-generated panes.",