@conscia-labs/design-system 1.0.0 → 1.0.2

package/README.md

@@ -6,7 +6,7 @@ The shared React component library for building clear, consistent, and accessibl
 
 > **Package:** available publicly as [`@conscia-labs/design-system`](https://www.npmjs.com/package/@conscia-labs/design-system).
 >
-> **v1.0.0:** this README documents the clean-break v1 contract. The repository is now preparing the `1.0.0` release candidate for publication through the Phase 8 workflow.
+> **v1.0.0:** this README documents the clean-break v1 contract. `1.0.0` is published as the stable v1 release.
 >
 > **Migration:** upgrading an application to v1? Follow the [Design System v1 Migration Guide](https://github.com/conscia-labs/design-system/blob/main/docs/design-system-v1-migration.md).
 
@@ -71,6 +71,7 @@ markup and Base UI behavior where interaction complexity requires it:
 - Avatar
 - Badge
 - Button
+- LoadingButton
 - IconButton
 - Card
 - Checkbox
@@ -162,8 +163,7 @@ function App() {
 
 ### 1. Install the package
 
-For the v1 release, install the explicit `1.0.0` range after Phase 8 publishes
-the package.
+For v1, install the explicit `1.0.0` range:
 
 Using pnpm:
 
@@ -313,6 +313,40 @@ export function CreateConnectionCard() {
 }
 ```
 
+### Text-in-track switches
+
+Use `LabeledSwitch` when the switch state should be visible inside the control.
+It keeps Base UI’s switch behavior and accepts any React node for either label:
+
+```tsx
+import { LabeledSwitch } from "@conscia-labs/design-system";
+
+<LabeledSwitch
+  aria-label="Deployment status"
+  defaultChecked
+  onLabel="ENABLED"
+  offLabel="DISABLED"
+/>
+```
+
+`Switch` also accepts `onLabel` and `offLabel` when a single API needs to support
+both the compact unlabeled style and the text-in-track style. If a label is
+provided without its pair, the missing label defaults to `ON` or `OFF`.
+
+### Loading buttons
+
+Use `LoadingButton` for async actions that need stable button layout while a
+mutation is pending. It disables the button, sets `aria-busy`, and replaces the
+normal content with a small spinner and `pendingLabel`:
+
+```tsx
+import { LoadingButton } from "@conscia-labs/design-system";
+
+<LoadingButton pending={saveMutation.isPending} pendingLabel="Saving…">
+  Save changes
+</LoadingButton>
+```
+
 ## Building an application shell
 
 The shared shell owns presentation and responsive behavior. The host application supplies routes, links, user context, and actions.
@@ -787,7 +821,7 @@ match the version in `package.json` exactly. npm’s trusted-publishing flow
 provides short-lived CI authentication and provenance for the published
 package.
 
-Before creating the v1 release tag, complete the release checklist in the
+Before creating a release tag, complete the release checklist in the
 [migration ledger](./docs/base-ui-migration.md), finalize the
 [app-owner migration guide](./docs/design-system-v1-migration.md), and run the
 full local validation suite:
@@ -804,19 +838,20 @@ pnpm build:playground
 pnpm test:visual
 ```
 
-Then prepare and tag the release:
+Then prepare and tag a release. Replace `VERSION` with the package version you
+are releasing:
 
 ```bash
-pnpm version 1.0.0 --no-git-tag-version
+pnpm version VERSION --no-git-tag-version
 git add package.json README.md docs/base-ui-migration.md docs/design-system-v1-migration.md
-git commit -m "Release v1.0.0"
-git tag -a v1.0.0 -m "Release v1.0.0"
+git commit -m "Release vVERSION"
+git tag -a vVERSION -m "Release vVERSION"
 git push origin main
-git push origin v1.0.0
+git push origin vVERSION
 ```
 
 Pushing the tag starts the `npm-production` release workflow. The workflow
-verifies that `v1.0.0` matches `package.json`, runs the release validation, and
+verifies that the tag matches `package.json`, runs the release validation, and
 publishes the package to npm without a long-lived npm token. Because this is a
 scoped public package, the release configuration must retain public access;
 see npm’s [scoped-package publishing guidance](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages/).

package/dist/{chunk-3UTRMJLB.js → chunk-H5ORBU5O.js}

@@ -759,9 +759,64 @@ var SwitchThumb = /* @__PURE__ */ React6.forwardRef(function SwitchThumb2(compon
 if (true) SwitchThumb.displayName = "SwitchThumb";
 
 // src/primitives/switch.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-function Switch({ className, size = "default", ...props }) {
-  return /* @__PURE__ */ jsx6(index_parts_exports2.Root, { "data-slot": "switch", "data-size": size, className: cn("peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-focus focus-visible:ring-[3px] focus-visible:ring-focus/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-checked:bg-action data-unchecked:bg-control-border", className), ...props, children: /* @__PURE__ */ jsx6(index_parts_exports2.Thumb, { "data-slot": "switch-thumb", className: "pointer-events-none block rounded-full bg-canvas transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-checked:translate-x-[calc(100%-2px)] data-unchecked:translate-x-0" }) });
+import { Fragment, jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+function Switch({
+  className,
+  size = "default",
+  onLabel,
+  offLabel,
+  ...props
+}) {
+  const labeled = onLabel != null || offLabel != null;
+  return /* @__PURE__ */ jsxs2(
+    index_parts_exports2.Root,
+    {
+      "data-slot": "switch",
+      "data-size": size,
+      "data-labeled": labeled ? "true" : void 0,
+      className: cn(
+        "peer group/switch inline-flex shrink-0 items-center border border-transparent shadow-xs transition-all outline-none focus-visible:border-focus focus-visible:ring-[3px] focus-visible:ring-focus/50 disabled:cursor-not-allowed disabled:opacity-50",
+        labeled ? "relative rounded-[0.625rem] p-0.5 data-[size=default]:h-6 data-[size=default]:w-[5.5rem] data-[size=default]:[--switch-thumb-travel:4.25rem] data-[size=sm]:h-5 data-[size=sm]:w-[5.5rem] data-[size=sm]:[--switch-thumb-travel:4.5rem] data-checked:bg-action data-unchecked:bg-control-border" : "rounded-full data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-checked:bg-action data-unchecked:bg-control-border",
+        className
+      ),
+      ...props,
+      children: [
+        labeled ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx6(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-slot": "switch-on-label",
+              className: "pointer-events-none absolute inset-y-0.5 left-0 flex w-1/2 translate-x-1 items-center justify-center overflow-hidden px-0.5 text-[0.5625rem] font-semibold leading-none tracking-[0.02em] text-action-foreground transition-[opacity,transform] group-data-checked/switch:opacity-100 group-data-unchecked/switch:opacity-0",
+              children: onLabel ?? "ON"
+            }
+          ),
+          /* @__PURE__ */ jsx6(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-slot": "switch-off-label",
+              className: "pointer-events-none absolute inset-y-0.5 right-0 flex w-1/2 -translate-x-1 items-center justify-center overflow-hidden px-0.5 text-[0.5625rem] font-semibold leading-none tracking-[0.02em] text-text-supporting transition-[opacity,transform] group-data-checked/switch:opacity-0 group-data-unchecked/switch:opacity-100",
+              children: offLabel ?? "OFF"
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsx6(
+          index_parts_exports2.Thumb,
+          {
+            "data-slot": "switch-thumb",
+            className: cn(
+              "pointer-events-none block rounded-full bg-canvas transition-transform",
+              labeled ? "absolute top-1/2 left-0.5 z-10 -translate-y-1/2 data-checked:translate-x-[var(--switch-thumb-travel)] data-unchecked:translate-x-0 group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3" : "group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-checked:translate-x-[calc(100%-2px)] data-unchecked:translate-x-0"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function LabeledSwitch({ onLabel = "ON", offLabel = "OFF", ...props }) {
+  return /* @__PURE__ */ jsx6(Switch, { ...props, onLabel, offLabel });
 }
 
 // src/primitives/textarea.tsx
@@ -778,7 +833,7 @@ function Textarea({ className, ...props }) {
 }
 
 // src/primitives/compat.tsx
-import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var ConsciaButton = Button;
 var ConsciaIconButton = IconButton;
 var ConsciaCard = Card;
@@ -793,7 +848,7 @@ function ConsciaCardHeader({
   if (!actionRight) {
     return /* @__PURE__ */ jsx8(CardHeader, { className, ...props, children });
   }
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     CardHeader,
     {
       className: cn(
@@ -897,7 +952,7 @@ function FieldError({
 
 // src/primitives/filter-chip.tsx
 import { XIcon } from "lucide-react";
-import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 function FilterChip({
   className,
   label,
@@ -907,7 +962,7 @@ function FilterChip({
   ...props
 }) {
   const fallbackRemoveLabel = typeof label === "string" ? `Remove ${label} filter` : "Remove filter";
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       "data-slot": "filter-chip",
@@ -938,7 +993,7 @@ function FilterChip({
 
 // src/primitives/form-select.tsx
 import * as React7 from "react";
-import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 var emptyValue = "__conscia_empty_select_value__";
 function toSelectValue(value) {
   if (value === void 0) {
@@ -974,7 +1029,7 @@ function FormSelect({
     }
     onValueChange?.(actualValue);
   }
-  return /* @__PURE__ */ jsx11("div", { className: cn("min-w-0", className), onClick, children: /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsx11("div", { className: cn("min-w-0", className), onClick, children: /* @__PURE__ */ jsxs5(
     Select,
     {
       name,
@@ -1008,6 +1063,58 @@ function Label({
   return /* @__PURE__ */ jsx12("label", { "data-slot": "label", className: cn("ds-type-label flex items-center gap-2 text-text-primary select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className), ...props });
 }
 
+// src/primitives/spinner.tsx
+import { LoaderCircle } from "lucide-react";
+import { jsx as jsx13 } from "react/jsx-runtime";
+function Spinner({
+  "aria-label": ariaLabel,
+  className,
+  label,
+  size = "default",
+  ...props
+}) {
+  const accessibleLabel = ariaLabel ?? label;
+  return /* @__PURE__ */ jsx13(
+    "span",
+    {
+      "data-slot": "spinner",
+      "data-size": size,
+      className: cn(
+        "inline-flex shrink-0 animate-spin items-center justify-center text-current motion-reduce:animate-none data-[size=default]:size-4 data-[size=lg]:size-5 data-[size=sm]:size-3.5",
+        className
+      ),
+      role: accessibleLabel ? "status" : void 0,
+      "aria-hidden": accessibleLabel ? void 0 : true,
+      "aria-label": accessibleLabel,
+      ...props,
+      children: /* @__PURE__ */ jsx13(LoaderCircle, { "aria-hidden": "true", className: "size-full" })
+    }
+  );
+}
+
+// src/primitives/loading-button.tsx
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+function LoadingButton({
+  children,
+  pending = false,
+  pendingLabel = "Working\u2026",
+  disabled,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx14(
+    Button,
+    {
+      ...props,
+      disabled: disabled || pending,
+      "aria-busy": pending || void 0,
+      children: pending ? /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        /* @__PURE__ */ jsx14(Spinner, { "aria-hidden": "true", size: "sm" }),
+        pendingLabel
+      ] }) : children
+    }
+  );
+}
+
 // node_modules/.pnpm/@base-ui+react@1.7.0_@types+react@19.2.17_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@base-ui/react/popover/index.parts.mjs
 var index_parts_exports3 = {};
 __export(index_parts_exports3, {
@@ -1886,39 +1993,39 @@ function createPopoverHandle() {
 }
 
 // src/primitives/popover.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function Popover({ ...props }) {
-  return /* @__PURE__ */ jsx13(index_parts_exports3.Root, { "data-slot": "popover", ...props });
+  return /* @__PURE__ */ jsx15(index_parts_exports3.Root, { "data-slot": "popover", ...props });
 }
 function PopoverTrigger3({ ...props }) {
-  return /* @__PURE__ */ jsx13(index_parts_exports3.Trigger, { "data-slot": "popover-trigger", ...props });
+  return /* @__PURE__ */ jsx15(index_parts_exports3.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverPortal3({ ...props }) {
-  return /* @__PURE__ */ jsx13(index_parts_exports3.Portal, { "data-slot": "popover-portal", ...props });
+  return /* @__PURE__ */ jsx15(index_parts_exports3.Portal, { "data-slot": "popover-portal", ...props });
 }
 function PopoverPositioner3({ className, ...props }) {
-  return /* @__PURE__ */ jsx13(index_parts_exports3.Positioner, { "data-slot": "popover-positioner", className, ...props });
+  return /* @__PURE__ */ jsx15(index_parts_exports3.Positioner, { "data-slot": "popover-positioner", className, ...props });
 }
 function PopoverContent({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx13(PopoverPortal3, { children: /* @__PURE__ */ jsx13(PopoverPositioner3, { children: /* @__PURE__ */ jsx13(index_parts_exports3.Popup, { "data-slot": "popover-content", className: cn("z-50 w-72 rounded-md border bg-surface-floating p-4 text-text-primary shadow-[var(--ds-shadow-floating)] outline-none data-open:animate-in data-closed:animate-out", className), ...props, children }) }) });
+  return /* @__PURE__ */ jsx15(PopoverPortal3, { children: /* @__PURE__ */ jsx15(PopoverPositioner3, { children: /* @__PURE__ */ jsx15(index_parts_exports3.Popup, { "data-slot": "popover-content", className: cn("z-50 w-72 rounded-md border bg-surface-floating p-4 text-text-primary shadow-[var(--ds-shadow-floating)] outline-none data-open:animate-in data-closed:animate-out", className), ...props, children }) }) });
 }
 function PopoverArrow3({ ...props }) {
-  return /* @__PURE__ */ jsx13(index_parts_exports3.Arrow, { "data-slot": "popover-arrow", ...props });
+  return /* @__PURE__ */ jsx15(index_parts_exports3.Arrow, { "data-slot": "popover-arrow", ...props });
 }
 function PopoverTitle3({ className, ...props }) {
-  return /* @__PURE__ */ jsx13(index_parts_exports3.Title, { "data-slot": "popover-title", className: cn("font-semibold", className), ...props });
+  return /* @__PURE__ */ jsx15(index_parts_exports3.Title, { "data-slot": "popover-title", className: cn("font-semibold", className), ...props });
 }
 function PopoverDescription3({ className, ...props }) {
-  return /* @__PURE__ */ jsx13(index_parts_exports3.Description, { "data-slot": "popover-description", className: cn("text-sm text-text-supporting", className), ...props });
+  return /* @__PURE__ */ jsx15(index_parts_exports3.Description, { "data-slot": "popover-description", className: cn("text-sm text-text-supporting", className), ...props });
 }
 function PopoverClose3({ ...props }) {
-  return /* @__PURE__ */ jsx13(index_parts_exports3.Close, { "data-slot": "popover-close", ...props });
+  return /* @__PURE__ */ jsx15(index_parts_exports3.Close, { "data-slot": "popover-close", ...props });
 }
 
 // src/primitives/searchable-select.tsx
 import * as React24 from "react";
 import { Check, ChevronsUpDown, X } from "lucide-react";
-import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 function SearchableSelect({ id, name, value = "", options, onValueChange, placeholder = "Select an option", searchPlaceholder = "Search...", emptyMessage = "No matching options.", disabled = false, clearable = false, clearLabel = "Clear selection", optionsLabel, className, "aria-label": ariaLabel }) {
   const selected = options.find((option) => option.value === value) ?? null;
   const items = React24.useMemo(() => options.map((option) => option.value), [options]);
@@ -1928,7 +2035,7 @@ function SearchableSelect({ id, name, value = "", options, onValueChange, placeh
   React24.useLayoutEffect(() => {
     if (!open && inputRef.current) inputRef.current.value = selected?.label ?? "";
   }, [open, selected?.label]);
-  return /* @__PURE__ */ jsx14("div", { "data-slot": "searchable-select", className: cn("relative min-w-0", className), children: /* @__PURE__ */ jsxs5(index_parts_exports.Root, { items, autoHighlight: true, open, onOpenChange: (nextOpen) => {
+  return /* @__PURE__ */ jsx16("div", { "data-slot": "searchable-select", className: cn("relative min-w-0", className), children: /* @__PURE__ */ jsxs7(index_parts_exports.Root, { items, autoHighlight: true, open, onOpenChange: (nextOpen) => {
     setOpen(nextOpen);
     if (!nextOpen) setInputValue(selected?.label ?? "");
   }, value, inputValue: open ? inputValue : selected?.label ?? "", onInputValueChange: setInputValue, onValueChange: (next) => {
@@ -1936,8 +2043,8 @@ function SearchableSelect({ id, name, value = "", options, onValueChange, placeh
     setInputValue(nextOption?.label ?? "");
     onValueChange(next ?? "");
   }, itemToStringLabel: (item) => options.find((option) => option.value === item)?.label ?? "", itemToStringValue: (item) => item ?? "", name, disabled, children: [
-    /* @__PURE__ */ jsxs5(index_parts_exports.InputGroup, { className: "relative flex items-center", children: [
-      /* @__PURE__ */ jsx14(index_parts_exports.Input, { ref: inputRef, id, "aria-label": ariaLabel, placeholder: searchPlaceholder, onKeyDown: (event) => {
+    /* @__PURE__ */ jsxs7(index_parts_exports.InputGroup, { className: "relative flex items-center", children: [
+      /* @__PURE__ */ jsx16(index_parts_exports.Input, { ref: inputRef, id, "aria-label": ariaLabel, placeholder: searchPlaceholder, onKeyDown: (event) => {
         if (event.key === "Enter" && open) {
           const matches = options.filter((option) => !option.disabled && option.label.toLowerCase().includes(inputValue.toLowerCase()));
           const match = matches.at(-1);
@@ -1948,19 +2055,19 @@ function SearchableSelect({ id, name, value = "", options, onValueChange, placeh
           }
         }
       }, className: "ds-type-control h-[var(--ds-field-control-height)] w-full rounded-[var(--ds-field-control-radius)] border border-control-border bg-surface-control px-3 pr-16 outline-none focus-visible:border-focus focus-visible:ring-[3px] focus-visible:ring-focus/50 disabled:cursor-not-allowed disabled:opacity-50" }),
-      clearable && selected ? /* @__PURE__ */ jsx14(IconButton, { type: "button", size: "sm", variant: "ghost", "aria-label": clearLabel, onClick: () => onValueChange(""), className: "absolute right-7", children: /* @__PURE__ */ jsx14(X, { className: "size-4" }) }) : null,
-      /* @__PURE__ */ jsx14(index_parts_exports.Trigger, { "aria-label": ariaLabel ?? placeholder, className: "absolute right-1 inline-flex size-8 items-center justify-center rounded-sm text-text-supporting outline-none focus-visible:ring-2 focus-visible:ring-focus", children: /* @__PURE__ */ jsx14(ChevronsUpDown, { className: "size-4" }) })
+      clearable && selected ? /* @__PURE__ */ jsx16(IconButton, { type: "button", size: "sm", variant: "ghost", "aria-label": clearLabel, onClick: () => onValueChange(""), className: "absolute right-7", children: /* @__PURE__ */ jsx16(X, { className: "size-4" }) }) : null,
+      /* @__PURE__ */ jsx16(index_parts_exports.Trigger, { "aria-label": ariaLabel ?? placeholder, className: "absolute right-1 inline-flex size-8 items-center justify-center rounded-sm text-text-supporting outline-none focus-visible:ring-2 focus-visible:ring-focus", children: /* @__PURE__ */ jsx16(ChevronsUpDown, { className: "size-4" }) })
     ] }),
-    /* @__PURE__ */ jsx14(index_parts_exports.Portal, { children: /* @__PURE__ */ jsx14(index_parts_exports.Positioner, { className: "z-50 w-[var(--anchor-width)]", children: /* @__PURE__ */ jsxs5(index_parts_exports.Popup, { className: "mt-1 max-h-72 overflow-auto rounded-md border bg-surface-floating p-1 text-text-primary shadow-[var(--ds-shadow-floating)] outline-none", children: [
-      /* @__PURE__ */ jsx14(index_parts_exports.Empty, { className: "px-2 py-3 text-sm text-text-supporting", children: emptyMessage }),
-      /* @__PURE__ */ jsx14(index_parts_exports.List, { "aria-label": optionsLabel ?? "Options", children: (optionValue) => {
+    /* @__PURE__ */ jsx16(index_parts_exports.Portal, { children: /* @__PURE__ */ jsx16(index_parts_exports.Positioner, { className: "z-50 w-[var(--anchor-width)]", children: /* @__PURE__ */ jsxs7(index_parts_exports.Popup, { className: "mt-1 max-h-72 overflow-auto rounded-md border bg-surface-floating p-1 text-text-primary shadow-[var(--ds-shadow-floating)] outline-none", children: [
+      /* @__PURE__ */ jsx16(index_parts_exports.Empty, { className: "px-2 py-3 text-sm text-text-supporting", children: emptyMessage }),
+      /* @__PURE__ */ jsx16(index_parts_exports.List, { "aria-label": optionsLabel ?? "Options", children: (optionValue) => {
         const option = options.find((candidate) => candidate.value === optionValue);
         if (!option) return null;
-        return /* @__PURE__ */ jsxs5(index_parts_exports.Item, { value: option.value, disabled: option.disabled, className: "ds-type-menu-item data-highlighted:bg-surface-muted relative flex cursor-default items-start gap-2 rounded-sm px-2 py-2 pr-8 outline-none data-disabled:pointer-events-none data-disabled:opacity-50", children: [
-          /* @__PURE__ */ jsx14("span", { className: "mt-0.5 flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx14(index_parts_exports.ItemIndicator, { children: /* @__PURE__ */ jsx14(Check, { className: "size-4" }) }) }),
-          /* @__PURE__ */ jsxs5("span", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx14("span", { className: "block truncate text-sm", children: option.label }),
-            option.description ? /* @__PURE__ */ jsx14("span", { className: "block truncate text-xs text-text-supporting", children: option.description }) : null
+        return /* @__PURE__ */ jsxs7(index_parts_exports.Item, { value: option.value, disabled: option.disabled, className: "ds-type-menu-item data-highlighted:bg-surface-muted relative flex cursor-default items-start gap-2 rounded-sm px-2 py-2 pr-8 outline-none data-disabled:pointer-events-none data-disabled:opacity-50", children: [
+          /* @__PURE__ */ jsx16("span", { className: "mt-0.5 flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx16(index_parts_exports.ItemIndicator, { children: /* @__PURE__ */ jsx16(Check, { className: "size-4" }) }) }),
+          /* @__PURE__ */ jsxs7("span", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx16("span", { className: "block truncate text-sm", children: option.label }),
+            option.description ? /* @__PURE__ */ jsx16("span", { className: "block truncate text-xs text-text-supporting", children: option.description }) : null
           ] })
         ] }, option.value);
       } })
@@ -1968,35 +2075,6 @@ function SearchableSelect({ id, name, value = "", options, onValueChange, placeh
   ] }) });
 }
 
-// src/primitives/spinner.tsx
-import { LoaderCircle } from "lucide-react";
-import { jsx as jsx15 } from "react/jsx-runtime";
-function Spinner({
-  "aria-label": ariaLabel,
-  className,
-  label,
-  size = "default",
-  ...props
-}) {
-  const accessibleLabel = ariaLabel ?? label;
-  return /* @__PURE__ */ jsx15(
-    "span",
-    {
-      "data-slot": "spinner",
-      "data-size": size,
-      className: cn(
-        "inline-flex shrink-0 animate-spin items-center justify-center text-current motion-reduce:animate-none data-[size=default]:size-4 data-[size=lg]:size-5 data-[size=sm]:size-3.5",
-        className
-      ),
-      role: accessibleLabel ? "status" : void 0,
-      "aria-hidden": accessibleLabel ? void 0 : true,
-      "aria-label": accessibleLabel,
-      ...props,
-      children: /* @__PURE__ */ jsx15(LoaderCircle, { "aria-hidden": "true", className: "size-full" })
-    }
-  );
-}
-
 // src/primitives/toast.tsx
 import * as React41 from "react";
 
@@ -3553,7 +3631,7 @@ function createToastManager() {
 
 // src/primitives/toast.tsx
 import { XIcon as XIcon2 } from "lucide-react";
-import { jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 function toBaseToastOptions(options) {
   const { action, variant, ...rest } = options;
   return {
@@ -3571,7 +3649,7 @@ function toBasePromiseOption(option) {
   return typeof option === "string" ? option : toBaseToastOptions(option);
 }
 function ToastProvider3({ children, limit = 3, timeout = 5e3 }) {
-  return /* @__PURE__ */ jsx16(index_parts_exports4.Provider, { limit, timeout, children });
+  return /* @__PURE__ */ jsx17(index_parts_exports4.Provider, { limit, timeout, children });
 }
 function useToast() {
   const manager = index_parts_exports4.useToastManager();
@@ -3609,7 +3687,7 @@ function useToast() {
 }
 function ToastViewport3({ className, placement = "bottom-end", ...props }) {
   const { toasts } = index_parts_exports4.useToastManager();
-  return /* @__PURE__ */ jsx16(index_parts_exports4.Portal, { children: /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(index_parts_exports4.Portal, { children: /* @__PURE__ */ jsx17(
     index_parts_exports4.Viewport,
     {
       "data-slot": "toast-viewport",
@@ -3622,7 +3700,7 @@ function ToastViewport3({ className, placement = "bottom-end", ...props }) {
         className
       ),
       ...props,
-      children: toasts.map((toast) => /* @__PURE__ */ jsx16(Toast, { toast }, toast.id))
+      children: toasts.map((toast) => /* @__PURE__ */ jsx17(Toast, { toast }, toast.id))
     }
   ) });
 }
@@ -3633,7 +3711,7 @@ function Toast({
   ...props
 }) {
   const variant = toast.data?.variant ?? toast.type ?? "default";
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     index_parts_exports4.Root,
     {
       toast,
@@ -3644,40 +3722,40 @@ function Toast({
         className
       ),
       ...props,
-      children: children ?? /* @__PURE__ */ jsxs6(ToastContent3, { children: [
-        /* @__PURE__ */ jsxs6("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx16(ToastTitle3, {}),
-          /* @__PURE__ */ jsx16(ToastDescription3, {})
+      children: children ?? /* @__PURE__ */ jsxs8(ToastContent3, { children: [
+        /* @__PURE__ */ jsxs8("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx17(ToastTitle3, {}),
+          /* @__PURE__ */ jsx17(ToastDescription3, {})
         ] }),
-        /* @__PURE__ */ jsxs6("div", { className: "flex items-start gap-1", children: [
-          /* @__PURE__ */ jsx16(ToastAction3, {}),
-          /* @__PURE__ */ jsx16(ToastClose3, {})
+        /* @__PURE__ */ jsxs8("div", { className: "flex items-start gap-1", children: [
+          /* @__PURE__ */ jsx17(ToastAction3, {}),
+          /* @__PURE__ */ jsx17(ToastClose3, {})
         ] })
       ] })
     }
   );
 }
 function ToastContent3({ className, ...props }) {
-  return /* @__PURE__ */ jsx16(index_parts_exports4.Content, { "data-slot": "toast-content", className: cn("contents", className), ...props });
+  return /* @__PURE__ */ jsx17(index_parts_exports4.Content, { "data-slot": "toast-content", className: cn("contents", className), ...props });
 }
 function ToastTitle3({ className, ...props }) {
-  return /* @__PURE__ */ jsx16(index_parts_exports4.Title, { "data-slot": "toast-title", className: cn("font-semibold", className), ...props });
+  return /* @__PURE__ */ jsx17(index_parts_exports4.Title, { "data-slot": "toast-title", className: cn("font-semibold", className), ...props });
 }
 function ToastDescription3({ className, ...props }) {
-  return /* @__PURE__ */ jsx16(index_parts_exports4.Description, { "data-slot": "toast-description", className: cn("mt-1 text-text-supporting", className), ...props });
+  return /* @__PURE__ */ jsx17(index_parts_exports4.Description, { "data-slot": "toast-description", className: cn("mt-1 text-text-supporting", className), ...props });
 }
 function ToastAction3({ className, ...props }) {
-  return /* @__PURE__ */ jsx16(index_parts_exports4.Action, { "data-slot": "toast-action", className: cn("rounded px-2 py-1 text-xs font-medium text-text-link outline-none hover:bg-surface-muted focus-visible:ring-2 focus-visible:ring-focus", className), ...props });
+  return /* @__PURE__ */ jsx17(index_parts_exports4.Action, { "data-slot": "toast-action", className: cn("rounded px-2 py-1 text-xs font-medium text-text-link outline-none hover:bg-surface-muted focus-visible:ring-2 focus-visible:ring-focus", className), ...props });
 }
 function ToastClose3({ "aria-label": ariaLabel = "Dismiss notification", children, className, ...props }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     index_parts_exports4.Close,
     {
       "data-slot": "toast-close",
       "aria-label": ariaLabel,
       className: cn("rounded p-1 text-text-supporting outline-none hover:bg-surface-muted hover:text-text-primary focus-visible:ring-2 focus-visible:ring-focus", className),
       ...props,
-      children: children ?? /* @__PURE__ */ jsx16(XIcon2, { "aria-hidden": "true", className: "size-4" })
+      children: children ?? /* @__PURE__ */ jsx17(XIcon2, { "aria-hidden": "true", className: "size-4" })
     }
   );
 }
@@ -3696,6 +3774,7 @@ export {
   BrandIcon,
   BrandWordmark,
   Switch,
+  LabeledSwitch,
   Textarea,
   ConsciaButton,
   ConsciaIconButton,
@@ -3730,6 +3809,8 @@ export {
   FormSelect,
   ConsciaFormSelect,
   Label,
+  Spinner,
+  LoadingButton,
   Popover,
   PopoverTrigger3 as PopoverTrigger,
   PopoverPortal3 as PopoverPortal,
@@ -3740,7 +3821,6 @@ export {
   PopoverDescription3 as PopoverDescription,
   PopoverClose3 as PopoverClose,
   SearchableSelect,
-  Spinner,
   ToastProvider3 as ToastProvider,
   useToast,
   ToastViewport3 as ToastViewport,
@@ -3751,4 +3831,4 @@ export {
   ToastAction3 as ToastAction,
   ToastClose3 as ToastClose
 };
-//# sourceMappingURL=chunk-3UTRMJLB.js.map
+//# sourceMappingURL=chunk-H5ORBU5O.js.map