@sableui/react 0.6.2 → 0.7.1

package/dist/components/toast/toast.js

@@ -0,0 +1,254 @@
+// src/components/toast/toast.tsx
+import { Toast as Base } from "@base-ui/react/toast";
+import { createContext, useContext } from "react";
+import { Icon } from "../../icon/index.js";
+import { cn } from "../../lib/cn.js";
+import { Button } from "../button/button.js";
+import { hitTargetMin } from "../../lib/hit-target.js";
+import { withPortalThemeScope } from "../../lib/portal-theme-scope.js";
+import { Spinner } from "../spinner/spinner.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var toastManager = Base.createToastManager();
+var POSITION = {
+  "top-left": "top-4 left-4 items-start",
+  "top-center": "top-4 left-1/2 -translate-x-1/2 items-center",
+  "top-right": "top-4 right-4 items-end",
+  "bottom-left": "bottom-4 left-4 items-start",
+  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 items-center",
+  "bottom-right": "bottom-4 right-4 items-end"
+};
+var ENTER_MOTION = {
+  "top-left": "motion-slide-right",
+  "top-center": "motion-slide-down",
+  "top-right": "motion-slide-left",
+  "bottom-left": "motion-slide-right",
+  "bottom-center": "motion-slide-up",
+  "bottom-right": "motion-slide-left"
+};
+var STACKED_ROOT = [
+  // design-lint-disable-next-line raw-z-index -- orders the cards inside the viewport's own stacking context (it is fixed at z-(--z-toast)); not a page layer
+  "absolute inset-x-0 z-[calc(100-var(--toast-index))] select-none",
+  "[--toast-gap:--spacing(2)] [--toast-peek:--spacing(3)]",
+  "[--toast-scale:max(0,1-var(--toast-index)*0.05)]",
+  "[--toast-h:var(--toast-frontmost-height,var(--toast-height))]",
+  "h-(--toast-h) data-expanded:h-(--toast-height)",
+  // Collapsed: shrink about the anchored edge, then lift a peek per card.
+  "[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+var(--toast-dir)*(var(--toast-index)*var(--toast-peek)+(1-var(--toast-scale))*var(--toast-h))))_scale(var(--toast-scale))]",
+  // Fanned out: Base UI's offset is the heights in front of it; add the gaps.
+  "data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+var(--toast-dir)*(var(--toast-offset-y)+var(--toast-index)*var(--toast-gap))))]",
+  // Arrive from the anchored edge and leave the same way, unless swiped or
+  // pushed out by the limit, which only fade.
+  "data-starting-style:[translate:0_calc(var(--toast-dir)*-100%)] data-starting-style:opacity-0",
+  "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[translate:0_calc(var(--toast-dir)*-100%)]",
+  "data-ending-style:opacity-0 data-limited:opacity-0",
+  // Fanned out, bridges the gap to the next card, so the pointer stays on the
+  // stack and the list does not collapse under it.
+  "after:absolute after:inset-x-0 after:h-[calc(var(--toast-gap)+1px)] not-data-expanded:after:hidden",
+  // Collapsed, the deck lifts as one: cards resting on each other barely shade
+  // each other. A full shadow on every card stacked a slab per card, and a
+  // theme with hard offset shadows (Poppy's reach 12px, past the 12px peek)
+  // painted the front card's slab over the cards behind it. So the front card
+  // steps down to shadow-md and the cards behind to shadow-sm; fanned out,
+  // each is a toast again and takes the full step back.
+  "not-data-expanded:shadow-md not-data-expanded:has-[>[data-behind]]:shadow-sm",
+  "transition-[transform,translate,opacity,height,box-shadow] duration-(--motion-duration-slow) ease-emphasized"
+].join(" ");
+var STACKED_EDGE = {
+  top: "top-0 origin-top [--toast-dir:1] after:top-full",
+  bottom: "bottom-0 origin-bottom [--toast-dir:-1] after:bottom-full"
+};
+var edgeOf = (position) => position.startsWith("top") ? "top" : "bottom";
+var ToastViewportContext = createContext({
+  position: "top-right",
+  stacked: false
+});
+function persistsByDefault(type, options) {
+  return type === "loading" || type === "error" || options?.actionProps !== void 0;
+}
+function withPersistence(options) {
+  const type = options.type;
+  return options.timeout === void 0 && persistsByDefault(type, options) ? { ...options, timeout: 0 } : options;
+}
+function useToast() {
+  const manager = Base.useToastManager();
+  return { ...manager, add: (options) => manager.add(withPersistence(options)) };
+}
+var useToastManager = useToast;
+function show(type, message, options) {
+  return toastManager.add(withPersistence({ title: message, type, ...options }));
+}
+var toast = Object.assign(
+  (message, options) => show(void 0, message, options),
+  {
+    success: (m, o) => show("success", m, o),
+    error: (m, o) => show("error", m, o),
+    warning: (m, o) => show("warning", m, o),
+    info: (m, o) => show("info", m, o),
+    message: (m, o) => show(void 0, m, o),
+    loading: (m, o) => show("loading", m, o),
+    custom: (o) => toastManager.add(withPersistence(o)),
+    add: (o) => toastManager.add(withPersistence(o)),
+    promise: toastManager.promise,
+    dismiss: (id) => toastManager.close(id),
+    update: toastManager.update
+  }
+);
+var ToastPortal = withPortalThemeScope(Base.Portal);
+function ToastViewport({
+  className,
+  position = "top-right",
+  stacked = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(ToastViewportContext.Provider, { value: { position, stacked }, children: /* @__PURE__ */ jsx(ToastPortal, { children: /* @__PURE__ */ jsx(
+    Base.Viewport,
+    {
+      className: cn(
+        "fixed z-(--z-toast) w-95 max-w-[90vw] outline-none",
+        // Stacked toasts are positioned against the viewport, not laid out in it.
+        !stacked && "flex flex-col gap-2",
+        POSITION[position],
+        className
+      ),
+      ...props
+    }
+  ) }) });
+}
+function ToastRoot({ className, ...props }) {
+  const { position, stacked } = useContext(ToastViewportContext);
+  return /* @__PURE__ */ jsx(
+    Base.Root,
+    {
+      className: cn(
+        "flex w-full gap-3 rounded-md border border-border-floating bg-popover p-4 text-popover-foreground shadow-xl",
+        stacked ? [STACKED_ROOT, STACKED_EDGE[edgeOf(position)]] : ENTER_MOTION[position],
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ToastContent({ className, ...props }) {
+  const { stacked } = useContext(ToastViewportContext);
+  return /* @__PURE__ */ jsx(
+    Base.Content,
+    {
+      className: cn(
+        "flex min-w-0 flex-1 gap-3",
+        stacked && "transition-opacity duration-(--motion-duration-base) ease-standard data-behind:not-data-expanded:pointer-events-none data-behind:not-data-expanded:opacity-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ToastTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Title,
+    {
+      className: cn("text-title-sm", className),
+      ...props
+    }
+  );
+}
+function ToastDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Description,
+    {
+      className: cn("text-body-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function ToastClose({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Close,
+    {
+      className: cn(
+        "-m-1 ms-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-muted-foreground outline-none motion-interactive",
+        hitTargetMin,
+        "hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring",
+        className
+      ),
+      "aria-label": "Dismiss",
+      ...props,
+      children
+    }
+  );
+}
+function ToastAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Base.Action, { render: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", className }), ...props });
+}
+function ToastProvider({
+  children,
+  timeout,
+  limit,
+  closeIcon,
+  position,
+  stacked,
+  viewportClassName
+}) {
+  return /* @__PURE__ */ jsxs(Base.Provider, { timeout, limit, toastManager, children: [
+    children,
+    /* @__PURE__ */ jsx(
+      ToastList,
+      {
+        closeIcon,
+        position,
+        stacked,
+        viewportClassName
+      }
+    )
+  ] });
+}
+var TYPE_ACCENT = {
+  success: "bg-success",
+  error: "bg-destructive",
+  warning: "bg-tone-warning",
+  info: "bg-tone-info"
+};
+function ToastList({
+  closeIcon,
+  position,
+  stacked,
+  viewportClassName
+}) {
+  const { toasts } = useToast();
+  return /* @__PURE__ */ jsx(ToastViewport, { position, stacked, className: viewportClassName, children: toasts.map((item) => {
+    const accent = item.type ? TYPE_ACCENT[item.type] : void 0;
+    return /* @__PURE__ */ jsx(ToastRoot, { toast: item, children: /* @__PURE__ */ jsxs(ToastContent, { children: [
+      item.type === "loading" ? /* @__PURE__ */ jsx(
+        Spinner,
+        {
+          "aria-hidden": true,
+          className: "mt-0.5 size-4 shrink-0 text-muted-foreground"
+        }
+      ) : accent ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: cn("w-1 shrink-0 self-stretch rounded-full", accent)
+        }
+      ) : null,
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+        item.title ? /* @__PURE__ */ jsx(ToastTitle, { children: item.title }) : null,
+        item.description ? /* @__PURE__ */ jsx(ToastDescription, { children: item.description }) : null
+      ] }),
+      /* @__PURE__ */ jsx(ToastAction, { className: "self-center" }),
+      /* @__PURE__ */ jsx(ToastClose, { children: closeIcon ?? /* @__PURE__ */ jsx(Icon, { name: "xmark", className: "text-sm" }) })
+    ] }) }, item.id);
+  }) });
+}
+export {
+  ToastAction,
+  ToastClose,
+  ToastContent,
+  ToastDescription,
+  ToastProvider,
+  ToastRoot,
+  ToastTitle,
+  ToastViewport,
+  toast,
+  useToast,
+  useToastManager
+};

package/dist/components/toast/toast.meta.js

@@ -0,0 +1,261 @@
+// src/components/toast/toast.meta.ts
+var toastMeta = {
+  name: "Toast",
+  // A system, not an import: the parts are ToastProvider / toast() / ToastRoot…
+  // and nothing is exported as plain `Toast`.
+  system: true,
+  summary: "Imperative notification system over Base UI Toast \u2014 auto-dismiss timers, swipe-to-dismiss, focus management, ARIA live-region announcements, and a limit-aware stack. Wrap the app in ToastProvider, then push toasts from anywhere with the global, Sonner-shaped toast() (toast.success/error/info/warning/loading/promise/dismiss) or the useToast() hook inside components.",
+  keywords: [
+    "toast",
+    "notification",
+    "snackbar",
+    "feedback",
+    "success",
+    "error",
+    "promise",
+    "loading",
+    "undo"
+  ],
+  usage: {
+    description: "Use Toast for transient feedback caused by a user action: saved, failed, copied, queued, uploaded, or undone. Use Banner for persistent page/app state and InlineStatus or Field errors for feedback that must remain attached to content.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Mount one ToastProvider near the app root before any code calls toast() or useToast()."
+      },
+      {
+        guidance: "do",
+        description: "Use toast.promise for async actions so loading, success, and error states stay tied to one notification."
+      },
+      {
+        guidance: "do",
+        description: "Keep toast copy short and outcome-focused. Add an action only when it is immediately useful, such as Undo."
+      },
+      {
+        guidance: "dont",
+        description: "Use Toast for critical blockers or persistent outages. Use Banner or Dialog when the user must notice and act."
+      },
+      {
+        guidance: "dont",
+        description: "Fire multiple toasts for one operation. Update the same toast when a task progresses."
+      },
+      {
+        guidance: "dont",
+        description: "Put the only path to an action in a toast that auto-dismisses. An Undo that expires on a timer is data loss on a schedule, so error toasts and any toast carrying actionProps default to timeout 0 and wait to be read \u2014 pass an explicit timeout only when the action is also reachable somewhere else. When a timeout exists at all, 5s is the floor: anything shorter cannot be read and acted on."
+      }
+    ],
+    anatomy: [
+      {
+        name: "Viewport",
+        required: true,
+        description: "The positioned live-region stack rendered by ToastProvider."
+      },
+      {
+        name: "Surface",
+        required: true,
+        description: "The individual ToastRoot containing title, description, action, and close affordance."
+      },
+      {
+        name: "Title",
+        required: true,
+        description: "Short outcome text, used as the accessible name."
+      },
+      {
+        name: "Description",
+        required: false,
+        description: "Optional detail or context beneath the title."
+      },
+      {
+        name: "Action",
+        required: false,
+        description: "Optional inline action such as Undo or Retry."
+      }
+    ]
+  },
+  related: {
+    components: ["Banner", "InlineStatus", "Button", "Progress"],
+    patterns: ["DashboardPage", "SettingsPage"]
+  },
+  status: "stable",
+  props: [
+    {
+      name: "ToastProvider",
+      type: "{ children, timeout?, limit?, closeIcon?, position?, stacked?, viewportClassName? }",
+      default: "\u2014",
+      description: "Wraps Base UI Toast.Provider and renders the themed Viewport + toast list. Mount once near the app root, above any caller of useToast()."
+    },
+    {
+      name: "position",
+      type: '"top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right"',
+      default: '"top-right"',
+      description: "Screen anchor for the toast stack."
+    },
+    {
+      name: "stacked",
+      type: "boolean",
+      default: "false",
+      description: "Stack the toasts like a deck of cards, the newest in front and the older ones peeking out behind it, a step smaller, instead of listing them one under another. Hovering or focusing the stack fans it out into the list. Use it when an app can raise several toasts in a row, so they don't take over the corner of the page."
+    },
+    {
+      name: "viewportClassName",
+      type: "string",
+      description: "Extra classes merged LAST onto the fixed viewport region \u2014 for safe-area insets or an offset (e.g. clearing a sidebar)."
+    },
+    {
+      name: "timeout",
+      type: "number",
+      default: "5000",
+      description: "Default auto-dismiss time in ms for toasts. 0 keeps a toast until it is dismissed. Error toasts, loading toasts, and any toast carrying actionProps default to 0 regardless of this value; a per-toast timeout overrides both."
+    },
+    {
+      name: "limit",
+      type: "number",
+      default: "3",
+      description: "Maximum toasts shown at once; older toasts are pushed out when the limit is exceeded."
+    },
+    {
+      name: "closeIcon",
+      type: "ReactNode",
+      default: '<Icon name="xmark" />',
+      description: "Override the dismiss-button glyph. The default already follows the injected icon set."
+    },
+    {
+      name: "useToast / useToastManager",
+      type: "() => { toasts, add, close, update, promise }",
+      default: "\u2014",
+      description: "Manager hook for use inside components. add({ title, description, timeout?, type?, priority?, actionProps? }) returns the new toast id and applies the same persistence default as toast.* \u2014 an error, loading, or actionProps toast stays until dismissed unless you pass a timeout. close(id), update(id, opts), and promise(p, opts) round out the API."
+    },
+    {
+      name: "toast",
+      type: "(message, options?) => string  &  { success, error, warning, info, message, loading, promise, dismiss, update, add, custom }",
+      default: "\u2014",
+      description: "Imperative singleton callable OUTSIDE React (event handlers, utilities, non-React code) \u2014 the Sonner-shaped surface that makes migrating a lib/toast wrapper a near drop-in. Requires a mounted <ToastProvider> (it binds the shared manager). Each call returns the toast id; toast.dismiss(id?) closes one or all; toast.promise(p, { loading, success, error }) and toast.update(id, opts) handle async + in-place updates."
+    },
+    {
+      name: "type (toast option)",
+      type: '"success" | "error" | "warning" | "info" | "loading"',
+      default: "\u2014",
+      description: "Set by the toast.* helpers. Drives a semantic left accent (success\u2192success, error\u2192destructive, warning\u2192tone-warning, info\u2192tone-info); loading shows a spinner. Both loading and error persist until updated or dismissed unless the call supplies a timeout."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "ToastRoot",
+      type: "Base UI Toast.Root props + className (requires the `toast` object)",
+      description: "A single toast surface. Animates enter/leave via data-[starting-style]/data-[ending-style]; swipe-to-dismiss is wired by Base UI."
+    },
+    {
+      name: "ToastContent",
+      type: "Base UI Toast.Content props + className",
+      description: "The toast's contents as one row. In a stacked viewport it fades on the cards behind the front one and returns when the stack fans out. Wrap a hand-composed toast's parts in it so a stacked viewport can hide them."
+    },
+    {
+      name: "ToastTitle",
+      type: "Base UI Toast.Title props + className",
+      description: "The toast headline (text-title-sm). Auto-associated as the toast's accessible name."
+    },
+    {
+      name: "ToastDescription",
+      type: "Base UI Toast.Description props + className",
+      description: "Supporting body copy beneath the title (text-body-sm, muted). Auto-associated as the toast's accessible description."
+    },
+    {
+      name: "ToastClose",
+      type: "Base UI Toast.Close props + className",
+      description: 'Dismiss button. Base UI handles the close and leave animation; labelled "Dismiss" by default.'
+    },
+    {
+      name: "ToastAction",
+      type: "Base UI Toast.Action props + className",
+      description: "Inline action button (e.g. Undo). The imperative path renders one on every toast and Base UI sources its label and handler from that toast's `actionProps`, rendering nothing when there are none \u2014 so `toast(msg, { actionProps })` is all an action needs. Reach for the component directly only when composing a toast by hand; compose with render={<Button \u2026 />}."
+    }
+  ],
+  tokensUsed: [
+    "popover",
+    "popover-foreground",
+    "border",
+    "muted-foreground",
+    "accent",
+    "accent-foreground",
+    "secondary",
+    "secondary-foreground",
+    "ring",
+    "success",
+    "tone-warning",
+    "tone-info",
+    "destructive"
+  ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "motion-slide-left",
+      part: "ToastRoot",
+      why: "A toast interrupts without being asked, so where it came from is the reader's first question. Sliding in from the viewport edge answers it and marks the toast as belonging to the edge rather than to whatever it happens to cover."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "ToastAction",
+      why: "Toasts are on a timer, so the action has to look actionable at a glance \u2014 there is no time to hunt for the hit target."
+    },
+    {
+      slot: "transition",
+      recipe: "motion-slide-left",
+      part: "ToastRoot",
+      why: "Leaving the same way it entered keeps the stack legible when several dismiss at once; toasts that fade in place leave the remaining ones jumping to fill gaps with no visible cause."
+    },
+    {
+      slot: "transition",
+      recipe: "custom",
+      part: "ToastRoot (stacked)",
+      why: "A stacked toast arrives from the anchored edge in front of the others, which step back and shrink to make room; hovering fans the deck out into the list. Moving every card, rather than snapping them, shows that the new one went on top and the old ones are still there."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "ToastRoot",
+      why: "A toast reports a result that has already happened. Anything still in flight belongs in the surface that started it, where the reader is still looking."
+    }
+  ],
+  a11y: [
+    "Base UI announces toasts through an ARIA live region \u2014 `low` priority is polite, `high` is assertive.",
+    "Auto-dismiss timers pause on hover/focus and while the window is hidden.",
+    "ToastClose is keyboard-focusable and labelled; Esc dismisses the focused toast.",
+    "ToastClose draws a 24px box (21px against the desktop root) and carries a 24x24+ POINTER TARGET behind it, per WCAG 2.5.8 \u2014 the glyph stays quiet because a dismiss control should not be the loudest thing in a toast. Base UI keeps the button out of the accessibility tree until the toast is focused; the toast itself is the announced element.",
+    "An action does NOT dismiss its toast \u2014 Base UI leaves that to the handler, so an action that opens a confirmation keeps the toast it is confirming. Call `toast.dismiss(id)` yourself when the action should close it.",
+    "Animate enter/leave via data-[starting-style]/data-[ending-style] rather than mount/unmount flips."
+  ],
+  examples: [
+    {
+      label: "Imperative (from anywhere)",
+      code: 'toast.success("Saved", { description: "Your post is live." })'
+    },
+    {
+      label: "Promise (loading \u2192 success / error)",
+      code: 'toast.promise(publish(), { loading: "Publishing\u2026", success: "Published", error: "Failed to publish" })'
+    },
+    {
+      label: "Persistent loading, updated in place",
+      code: 'const id = toast.loading("Pinning to Arweave\u2026"); /* later */ toast.update(id, { title: "Pinned", type: "success", timeout: 4000 })'
+    },
+    {
+      label: "Custom toast markup (composed parts)",
+      code: 'const { toasts } = useToast()\n<ToastViewport>{toasts.map((t) => (<ToastRoot key={t.id} toast={t}><div className="flex min-w-0 flex-col gap-1"><ToastTitle>{t.title}</ToastTitle><ToastDescription>{t.description}</ToastDescription></div><ToastClose><Icon name="xmark" /></ToastClose></ToastRoot>))}</ToastViewport>'
+    },
+    {
+      label: "Undo action",
+      code: 'toast.message("Post archived", { actionProps: { children: "Undo", onClick: () => restorePost() } })'
+    },
+    {
+      label: "Stacked",
+      code: '<ToastProvider stacked position="bottom-right">{children}</ToastProvider>'
+    },
+    {
+      label: "Provider with app chrome",
+      code: '<ToastProvider position="bottom-right" limit={3}><AppShell><Region max="feed"><Button onClick={() => toast.success("Saved")}>Save</Button></Region></AppShell></ToastProvider>'
+    }
+  ]
+};
+export {
+  toastMeta
+};

package/dist/components/toggle/index.js

@@ -0,0 +1,13 @@
+// src/components/toggle/index.ts
+import {
+  Toggle,
+  ToggleGroup,
+  Toggle as Toggle2
+} from "./toggle.js";
+import { toggleMeta } from "./toggle.meta.js";
+export {
+  Toggle,
+  ToggleGroup,
+  Toggle2 as ToggleGroupItem,
+  toggleMeta
+};

package/dist/components/toggle/toggle.js

@@ -0,0 +1,51 @@
+// src/components/toggle/toggle.tsx
+import { Toggle as BaseToggle } from "@base-ui/react/toggle";
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
+import { createContext, useContext } from "react";
+import { cn } from "../../lib/cn.js";
+import { SEGMENTED_ITEM, SEGMENTED_TRACK } from "../../lib/segmented.js";
+import { jsx } from "react/jsx-runtime";
+var ToggleAppearanceContext = createContext("default");
+function Toggle({ className, ...props }) {
+  const appearance = useContext(ToggleAppearanceContext);
+  return /* @__PURE__ */ jsx(
+    BaseToggle,
+    {
+      className: cn(
+        appearance === "segmented" ? cn(SEGMENTED_ITEM, "cursor-pointer px-2 text-label-md data-[pressed]:hover:text-accent-foreground") : cn(
+          "inline-flex h-(--control-sm) min-w-(--control-sm) cursor-pointer items-center justify-center rounded-sm px-2.5 text-label-md text-muted-foreground motion-interactive motion-press",
+          // Hover is the surface's quiet step, NOT the pressed fill: with
+          // both on bg-accent an unpressed toggle looked pressed under the
+          // pointer, which is the one state a toggle must never fake.
+          "sable-surface-interactive",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        ),
+        "data-[pressed]:bg-accent data-[pressed]:text-accent-foreground",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "[&_svg]:shrink-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+Toggle.displayName = "Toggle";
+function ToggleGroup({ className, appearance = "default", ...props }) {
+  return /* @__PURE__ */ jsx(ToggleAppearanceContext.Provider, { value: appearance, children: /* @__PURE__ */ jsx(
+    BaseToggleGroup,
+    {
+      "data-appearance": appearance,
+      className: cn(
+        appearance === "segmented" ? SEGMENTED_TRACK : "inline-flex items-center gap-1",
+        className
+      ),
+      ...props,
+      "aria-orientation": props.role === "toolbar" ? props.orientation ?? "horizontal" : void 0
+    }
+  ) });
+}
+ToggleGroup.displayName = "ToggleGroup";
+export {
+  Toggle,
+  ToggleGroup
+};