@sableui/react 0.6.2 → 0.7.1

package/dist/components/toggle/toggle.meta.js

@@ -0,0 +1,129 @@
+// src/components/toggle/toggle.meta.ts
+var toggleMeta = {
+  name: "Toggle",
+  summary: "Pressed-state button over Base UI Toggle, plus ToggleGroup for shared single- or multi-select rows. Pressed styling reads from data-[pressed].",
+  status: "stable",
+  keywords: [
+    "toggle",
+    "pressed",
+    "button state",
+    "toolbar",
+    "segmented control",
+    "segmented",
+    "toggle group",
+    "button group",
+    "view switcher"
+  ],
+  usage: {
+    description: "Use Toggle for button-like controls that can be pressed on or off within a toolbar or compact control set.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use it for transient UI modes such as bold, preview, pin, or favorite."
+      },
+      {
+        guidance: "do",
+        description: "Make the pressed state visually and programmatically clear."
+      },
+      {
+        guidance: "do",
+        description: 'Use ToggleGroup appearance="segmented" for a single-select view switch (List / Grid). It is the same capsule ThemeSwitcher wears \u2014 do not hand-build a track around a row of toggles.'
+      },
+      {
+        guidance: "dont",
+        description: "Do not use Toggle for persistent application settings; use Switch."
+      },
+      {
+        guidance: "dont",
+        description: 'Do not leave an icon-only Toggle without an accessible name. It announces as "button, pressed", which tells a screen-reader user the state but never what the state applies to.'
+      }
+    ],
+    anatomy: [
+      {
+        name: "Toggle",
+        required: true,
+        description: "A single pressed or unpressed control."
+      },
+      {
+        name: "ToggleGroup",
+        required: false,
+        description: "A coordinated group of toggle choices."
+      },
+      {
+        name: "ToggleGroupItem",
+        required: false,
+        description: 'One toggle inside a group \u2014 an alias of Toggle, so <Toggle value="\u2026"> inside a ToggleGroup is the same thing.'
+      }
+    ]
+  },
+  related: {
+    components: [
+      "Switch",
+      "Button",
+      "Tabs"
+    ]
+  },
+  props: [
+    {
+      name: "appearance",
+      type: '"default" | "segmented"',
+      default: '"default"',
+      description: "On ToggleGroup: `default` is a loose row of toggles; `segmented` draws the capsule segmented control (one track, the pressed option filled) shared with ThemeSwitcher. Toggles inside inherit it."
+    },
+    {
+      name: "multiple",
+      type: "boolean",
+      default: "false",
+      description: "On ToggleGroup: allow several toggles pressed at once. The default is single-select, which behaves like a radio group."
+    },
+    {
+      name: "Toggle",
+      type: "Base UI Toggle props (pressed, defaultPressed, onPressedChange, disabled, value) + className",
+      default: "defaultPressed: false",
+      description: "A two-state button. Uncontrolled via defaultPressed; controlled via pressed + onPressedChange. Pass value to identify it inside a ToggleGroup."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "ToggleGroup",
+      type: 'Base UI ToggleGroup props (value, defaultValue, onValueChange, multiple, disabled, orientation, loopFocus) + appearance?: "default" | "segmented" + className',
+      description: "Groups child Toggles and shares pressed state across them \u2014 each Toggle inside carries a value. Defaults to multiple: false (single-select) \u2014 the fit for view-mode switches and segmented controls; pass multiple to allow several pressed at once, e.g. a row of formatting toggles."
+    },
+    {
+      name: "ToggleGroupItem",
+      type: "Alias of Toggle",
+      description: "Re-export of Toggle for group composition \u2014 a Toggle carrying a value is the group item."
+    }
+  ],
+  variants: {
+    appearance: ["default", "segmented"]
+  },
+  tokensUsed: ["muted-foreground", "foreground", "accent", "accent-foreground", "card", "border", "ring"],
+  a11y: [
+    "Base UI sets aria-pressed on each Toggle and manages the pressed/disabled states.",
+    "ToggleGroup provides arrow-key roving focus across its items; loopFocus wraps at the ends.",
+    "Pressed styling reads from the data-[pressed] attribute; disabled items are dimmed and non-interactive.",
+    "Always supply an aria-label (or visible text) when a Toggle holds only an icon."
+  ],
+  examples: [
+    {
+      label: "Standalone",
+      code: '<Toggle aria-label="Mute">Mute</Toggle>'
+    },
+    {
+      label: "Single-select group",
+      code: '<ToggleGroup defaultValue={["list"]}><Toggle value="list" aria-label="List view"><Icon name="list" /></Toggle><Toggle value="grid" aria-label="Grid view"><Icon name="grid" /></Toggle></ToggleGroup>'
+    },
+    {
+      label: "Segmented view switch",
+      code: '<ToggleGroup appearance="segmented" defaultValue={["list"]} aria-label="View"><Toggle value="list" aria-label="List view"><Icon name="list" /></Toggle><Toggle value="grid" aria-label="Grid view"><Icon name="grid" /></Toggle></ToggleGroup>'
+    },
+    {
+      label: "Multi-select group",
+      code: '<ToggleGroup multiple defaultValue={["bold"]}><Toggle value="bold">Bold</Toggle><Toggle value="italic">Italic</Toggle></ToggleGroup>'
+    }
+  ]
+};
+export {
+  toggleMeta
+};

package/dist/components/toolbar/index.js

@@ -0,0 +1,27 @@
+// src/components/toolbar/index.ts
+import {
+  Toolbar,
+  ToolbarButton,
+  ToolbarGroup,
+  ToolbarInput,
+  ToolbarLink,
+  ToolbarSeparator
+} from "./toolbar.js";
+import {
+  toolbarVariants,
+  toolbarGroupVariants,
+  toolbarSeparatorVariants
+} from "./toolbar.variants.js";
+import { toolbarMeta } from "./toolbar.meta.js";
+export {
+  Toolbar,
+  ToolbarButton,
+  ToolbarGroup,
+  ToolbarInput,
+  ToolbarLink,
+  ToolbarSeparator,
+  toolbarGroupVariants,
+  toolbarMeta,
+  toolbarSeparatorVariants,
+  toolbarVariants
+};

package/dist/components/toolbar/toolbar.js

@@ -0,0 +1,80 @@
+// src/components/toolbar/toolbar.tsx
+import { Toolbar as Base } from "@base-ui/react/toolbar";
+import { cn } from "../../lib/cn.js";
+import { useTypeTier } from "../../lib/density.js";
+import { trimLabel } from "../../lib/trim-label.js";
+import { buttonVariants } from "../button/button.variants.js";
+import { Input } from "../input/index.js";
+import {
+  toolbarGroupVariants,
+  toolbarSeparatorVariants,
+  toolbarVariants
+} from "./toolbar.variants.js";
+import { jsx } from "react/jsx-runtime";
+function Toolbar({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Base.Root, { className: cn(toolbarVariants(), className), ...props });
+}
+Toolbar.displayName = "Toolbar";
+function ToolbarButton({
+  variant = "ghost",
+  size = "sm",
+  className,
+  children,
+  ...props
+}) {
+  const tier = useTypeTier();
+  return /* @__PURE__ */ jsx(
+    Base.Button,
+    {
+      className: cn(buttonVariants({ variant, size }), tier.action, className),
+      ...props,
+      children: trimLabel(children)
+    }
+  );
+}
+ToolbarButton.displayName = "ToolbarButton";
+function ToolbarLink({
+  variant = "ghost",
+  size = "sm",
+  className,
+  children,
+  ...props
+}) {
+  const tier = useTypeTier();
+  return /* @__PURE__ */ jsx(
+    Base.Link,
+    {
+      className: cn(buttonVariants({ variant, size }), tier.action, className),
+      ...props,
+      children: trimLabel(children)
+    }
+  );
+}
+ToolbarLink.displayName = "ToolbarLink";
+function ToolbarInput({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Input,
+    {
+      render: /* @__PURE__ */ jsx(Input, {}),
+      className: cn("h-(--control-sm) w-40", className),
+      ...props
+    }
+  );
+}
+ToolbarInput.displayName = "ToolbarInput";
+function ToolbarGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Base.Group, { className: cn(toolbarGroupVariants(), className), ...props });
+}
+ToolbarGroup.displayName = "ToolbarGroup";
+function ToolbarSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Base.Separator, { className: cn(toolbarSeparatorVariants(), className), ...props });
+}
+ToolbarSeparator.displayName = "ToolbarSeparator";
+export {
+  Toolbar,
+  ToolbarButton,
+  ToolbarGroup,
+  ToolbarInput,
+  ToolbarLink,
+  ToolbarSeparator
+};

package/dist/components/toolbar/toolbar.meta.js

@@ -0,0 +1,272 @@
+// src/components/toolbar/toolbar.meta.ts
+var toolbarMeta = {
+  name: "Toolbar",
+  summary: `A row or column of controls that is one tab stop, with arrow-key movement between its items (role="toolbar"), over Base UI Toolbar. Items reuse Button's ghost variants and Input, so they follow density like every other control.`,
+  status: "stable",
+  keywords: [
+    "toolbar",
+    "action bar",
+    "button row",
+    "icon buttons",
+    "formatting bar",
+    "roving focus",
+    "arrow keys",
+    "tool chrome",
+    "editor toolbar"
+  ],
+  usage: {
+    description: "Use Toolbar when three or more related controls sit together and act on the same thing \u2014 a text selection, a canvas, a document, a table. Tab lands on the toolbar once and the arrow keys move along it, so a keyboard user crosses an editor's twelve buttons in one keystroke instead of twelve. It works in both registers: ghost sm buttons on a page, compact icon-xs buttons inside a Workspace.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: 'Give every Toolbar an aria-label that names what it acts on ("Text formatting", "Canvas"). With more than one toolbar on screen, that label is the only way a screen-reader user tells them apart.'
+      },
+      {
+        guidance: "do",
+        description: 'Use size="icon-sm" (page) or size="icon-xs" (workspace) with an aria-label for icon-only ToolbarButtons, and keep one size across the row so the controls line up.'
+      },
+      {
+        guidance: "do",
+        description: "Split a long row into ToolbarGroups with a ToolbarSeparator between them \u2014 undo/redo, text style, insert. Groups give the eye the same structure the arrow keys already cross."
+      },
+      {
+        guidance: "do",
+        description: `Compose triggers and toggles through ToolbarButton's render prop \u2014 render={<MenuTrigger />}, render={<PopoverTrigger />}, or render={<Toggle value="bold" />} inside a ToggleGroup \u2014 so they join the toolbar's arrow-key order.`
+      },
+      {
+        guidance: "dont",
+        description: "Put a bare Button, Toggle or Input inside a Toolbar. It renders, but it is not a toolbar item: the arrow keys skip it and it takes its own tab stop, which is the inconsistency Toolbar exists to remove. Use ToolbarButton, ToolbarInput, or render through ToolbarButton."
+      },
+      {
+        guidance: "dont",
+        description: "Wrap one or two buttons, or a dialog's Cancel/Confirm pair, in a Toolbar. Those are independent actions; arrow-key movement there is a surprise, not a shortcut. A plain row of Buttons is right."
+      },
+      {
+        guidance: "dont",
+        description: "Use Toolbar for navigation between pages or views. Links that go somewhere are Tabs, SideNav or Breadcrumbs; ToolbarLink is for the odd link that sits among actions, like Help."
+      },
+      {
+        guidance: "dont",
+        description: "Give toolbar buttons primary or destructive fills by default. A toolbar is a quiet strip of tools; the ghost default keeps it from competing with the page's one primary action."
+      }
+    ],
+    anatomy: [
+      {
+        name: "Toolbar",
+        required: true,
+        description: 'The root (role="toolbar"). Owns orientation, loopFocus and disabled for everything inside it.'
+      },
+      {
+        name: "ToolbarButton",
+        required: true,
+        description: "An action. Button's ghost variants by default; `render` composes a menu trigger, popover trigger or Toggle into the toolbar."
+      },
+      {
+        name: "ToolbarGroup",
+        required: false,
+        description: "A run of related items. `disabled` disables the whole run."
+      },
+      {
+        name: "ToolbarSeparator",
+        required: false,
+        description: "A hairline between groups, oriented across the toolbar. Never a focus stop."
+      },
+      {
+        name: "ToolbarInput",
+        required: false,
+        description: "A compact Input that joins the arrow-key order \u2014 a search or find field in the bar."
+      },
+      {
+        name: "ToolbarLink",
+        required: false,
+        description: "An <a> styled like a ToolbarButton, for a link that sits among the actions."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "Button",
+      "Toggle",
+      "Menu",
+      "Popover",
+      "Tooltip",
+      "Workspace",
+      "PanelSection",
+      "Separator"
+    ]
+  },
+  props: [
+    {
+      name: "orientation",
+      type: '"horizontal" | "vertical"',
+      default: '"horizontal"',
+      description: "Which arrow keys move focus (Left/Right or Up/Down) and which way the items stack. Separators turn to match."
+    },
+    {
+      name: "loopFocus",
+      type: "boolean",
+      default: "true",
+      description: "Arrowing past the last item wraps to the first, and back."
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      default: "false",
+      description: "Disables every item. Items stay focusable (aria-disabled) so the row keeps its shape under the keyboard."
+    },
+    {
+      name: "aria-label",
+      type: "string",
+      description: "Names the toolbar for assistive technology. Always set it."
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "Layout overrides \u2014 e.g. `flex-1` to let the toolbar fill a bar."
+    }
+  ],
+  subcomponents: [
+    {
+      name: "ToolbarButton",
+      type: '{ variant?: buttonVariants variant (default "ghost"); size?: buttonVariants size (default "sm"); disabled?: boolean; focusableWhenDisabled?: boolean (default true); render?: ReactElement } + Base UI Toolbar.Button props',
+      description: 'A toolbar action, styled exactly like <Button>. Disabled buttons stay focusable by default and carry aria-disabled. Pass size="icon-sm"/"icon-xs" plus aria-label for icon-only.'
+    },
+    {
+      name: "ToolbarLink",
+      type: '{ href?: string; variant?: buttonVariants variant (default "ghost"); size?: buttonVariants size (default "sm"); render?: ReactElement } + Base UI Toolbar.Link props',
+      description: "An <a> in the toolbar's arrow-key order, styled like a ToolbarButton."
+    },
+    {
+      name: "ToolbarInput",
+      type: "{ disabled?: boolean; focusableWhenDisabled?: boolean (default true) } + Base UI Toolbar.Input / native input props",
+      description: "Sable's Input at the sm control height (w-40 by default; override with className). Arrow keys leave the field so it does not trap the row."
+    },
+    {
+      name: "ToolbarGroup",
+      type: "{ disabled?: boolean } + Base UI Toolbar.Group props",
+      description: "Groups related items; `disabled` disables all of them."
+    },
+    {
+      name: "ToolbarSeparator",
+      type: "Base UI Toolbar.Separator props + className",
+      description: `A hairline-strong rule across the toolbar's axis, exposed as role="separator" and skipped by the arrow keys.`
+    }
+  ],
+  variants: {
+    orientation: ["horizontal", "vertical"],
+    variant: ["ghost", "secondary", "outline", "primary", "destructive", "link"],
+    size: ["xs", "sm", "md", "icon", "icon-sm", "icon-xs"]
+  },
+  tokensUsed: ["foreground", "accent", "accent-foreground", "ring", "hairline-strong", "input", "card"],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Toolbar",
+      why: "A toolbar is fixed chrome. It is present when its surface is; animating it in would leave the tools briefly unusable for no reason the user can see."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "ToolbarButton",
+      why: "Inherited from buttonVariants: hover fill, focus ring and disabled dim ease together, so the item under the arrow keys reads as the one that moved."
+    },
+    {
+      slot: "response",
+      recipe: "motion-press",
+      part: "ToolbarButton",
+      why: "Inherited from buttonVariants. Many toolbar actions change something off to the side (the canvas, the selection), so the settle on press is the confirmation that lands where the pointer is."
+    },
+    {
+      slot: "transition",
+      recipe: "none",
+      part: "Toolbar",
+      why: "The toolbar has no state of its own. Pressed state belongs to a Toggle rendered through ToolbarButton, which carries its own transition."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Toolbar",
+      why: "A toolbar never works on its own. Pending work belongs to the surface the action targets, or to a Spinner in the button that started it."
+    }
+  ],
+  a11y: [
+    'Base UI renders role="toolbar" with aria-orientation, and a roving tabindex: the toolbar is one tab stop, the arrow keys move between items, Home/End jump to the ends.',
+    "Disabled items stay focusable by default and announce as disabled (aria-disabled), so arrowing along the row never silently skips a control. Set focusableWhenDisabled={false} on an item to opt out.",
+    `ToolbarSeparator is role="separator" with the orientation opposite the toolbar's, and is not a focus stop.`,
+    "ToolbarInput lets the arrow keys move the caret and only leaves the field at either end of its text.",
+    "Always set aria-label on the Toolbar, and on every icon-only ToolbarButton.",
+    "A Toggle rendered through ToolbarButton keeps aria-pressed; a MenuTrigger keeps aria-haspopup/aria-expanded."
+  ],
+  examples: [
+    {
+      label: "Formatting toolbar",
+      code: `<Toolbar aria-label="Text formatting">
+  <ToolbarGroup aria-label="History">
+    <ToolbarButton size="icon-sm" aria-label="Undo">
+      <Icon name="arrow-left" />
+    </ToolbarButton>
+    <ToolbarButton size="icon-sm" aria-label="Redo">
+      <Icon name="arrow-right" />
+    </ToolbarButton>
+  </ToolbarGroup>
+  <ToolbarSeparator />
+  <ToggleGroup multiple aria-label="Style">
+    <ToolbarButton size="icon-sm" aria-label="Bold" render={<Toggle value="bold" />}>
+      <Icon name="bold" />
+    </ToolbarButton>
+    <ToolbarButton size="icon-sm" aria-label="Italic" render={<Toggle value="italic" />}>
+      <Icon name="italic" />
+    </ToolbarButton>
+  </ToggleGroup>
+  <ToolbarSeparator />
+  <ToolbarLink href="/help">Help</ToolbarLink>
+</Toolbar>`
+    },
+    {
+      label: "With a menu trigger and a search field",
+      code: `<Toolbar aria-label="Table">
+  <ToolbarButton>Export</ToolbarButton>
+  <Menu>
+    <ToolbarButton render={<MenuTrigger />}>View</ToolbarButton>
+    <MenuContent>
+      <MenuItem>Compact rows</MenuItem>
+      <MenuItem>Comfortable rows</MenuItem>
+    </MenuContent>
+  </Menu>
+  <ToolbarSeparator />
+  <ToolbarInput aria-label="Search rows" placeholder="Search" />
+</Toolbar>`
+    },
+    {
+      label: "Vertical tool rail",
+      code: `<Toolbar orientation="vertical" aria-label="Tools">
+  <ToolbarButton size="icon-sm" aria-label="Select">
+    <Icon name="arrow-up" />
+  </ToolbarButton>
+  <ToolbarButton size="icon-sm" aria-label="Draw">
+    <Icon name="edit" />
+  </ToolbarButton>
+  <ToolbarSeparator />
+  <ToolbarButton size="icon-sm" aria-label="Delete" disabled>
+    <Icon name="trash" />
+  </ToolbarButton>
+</Toolbar>`
+    },
+    {
+      label: "In a workspace bar",
+      code: `<WorkspaceBar>
+  <Toolbar aria-label="Document" className="flex-1">
+    <ToolbarButton size="xs">File</ToolbarButton>
+    <ToolbarButton size="xs">Edit</ToolbarButton>
+    <ToolbarButton size="icon-xs" aria-label="Share" className="ms-auto">
+      <Icon name="share" />
+    </ToolbarButton>
+  </Toolbar>
+</WorkspaceBar>`
+    }
+  ]
+};
+export {
+  toolbarMeta
+};

package/dist/components/toolbar/toolbar.variants.js

@@ -0,0 +1,16 @@
+// src/components/toolbar/toolbar.variants.ts
+import { cva } from "class-variance-authority";
+var toolbarVariants = cva(
+  "inline-flex items-center gap-1 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch"
+);
+var toolbarGroupVariants = cva(
+  "inline-flex items-center gap-1 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch"
+);
+var toolbarSeparatorVariants = cva(
+  "shrink-0 self-stretch bg-hairline-strong data-[orientation=vertical]:mx-1 data-[orientation=vertical]:my-1.5 data-[orientation=vertical]:w-px data-[orientation=horizontal]:mx-1.5 data-[orientation=horizontal]:my-1 data-[orientation=horizontal]:h-px"
+);
+export {
+  toolbarGroupVariants,
+  toolbarSeparatorVariants,
+  toolbarVariants
+};

package/dist/components/tooltip/index.js

@@ -0,0 +1,21 @@
+// src/components/tooltip/index.ts
+import {
+  Tooltip,
+  TooltipProvider,
+  TooltipTrigger,
+  TooltipPortal,
+  TooltipContent,
+  TooltipArrow,
+  SimpleTooltip
+} from "./tooltip.js";
+import { tooltipMeta } from "./tooltip.meta.js";
+export {
+  SimpleTooltip,
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipTrigger,
+  tooltipMeta
+};

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,74 @@
+// src/components/tooltip/tooltip.tsx
+import { Tooltip as Base } from "@base-ui/react/tooltip";
+import { cn } from "../../lib/cn.js";
+import { withPortalThemeScope } from "../../lib/portal-theme-scope.js";
+import { useAnchoredDensity } from "../../lib/density.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TooltipProvider = Base.Provider;
+var Tooltip = Base.Root;
+var TooltipTrigger = Base.Trigger;
+var TooltipPortal = withPortalThemeScope(Base.Portal);
+function TooltipContent({
+  className,
+  children,
+  side = "top",
+  align = "center",
+  sideOffset = 6,
+  ...props
+}) {
+  const anchoredDensity = useAnchoredDensity();
+  return /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(Base.Positioner, { side, align, sideOffset, className: "z-(--z-overlay)", children: /* @__PURE__ */ jsx(
+    Base.Popup,
+    {
+      ...anchoredDensity,
+      className: cn(
+        "select-none rounded-sm border border-border-floating bg-popover px-2.5 py-1.5 text-label-md text-popover-foreground shadow-md outline-none",
+        "motion-pop duration-(--motion-duration-fast)",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) }) });
+}
+function TooltipArrow({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Base.Arrow,
+    {
+      className: cn(
+        "group/arrow data-[side=bottom]:-top-1.5 data-[side=left]:-right-1.5 data-[side=right]:-left-1.5 data-[side=top]:-bottom-1.5",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "block size-2.5 rotate-45 border-border-floating bg-popover group-data-[side=top]/arrow:border-b group-data-[side=top]/arrow:border-r group-data-[side=bottom]/arrow:border-t group-data-[side=bottom]/arrow:border-l group-data-[side=left]/arrow:border-t group-data-[side=left]/arrow:border-r group-data-[side=right]/arrow:border-b group-data-[side=right]/arrow:border-l"
+        }
+      )
+    }
+  );
+}
+function SimpleTooltip({
+  content,
+  children,
+  side,
+  align,
+  sideOffset,
+  ...root
+}) {
+  return /* @__PURE__ */ jsxs(Base.Root, { ...root, children: [
+    /* @__PURE__ */ jsx(Base.Trigger, { render: children }),
+    /* @__PURE__ */ jsx(TooltipContent, { side, align, sideOffset, children: content })
+  ] });
+}
+export {
+  SimpleTooltip,
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipTrigger
+};