@acronis-platform/ui-react 0.21.2

package/dist/components/ui/sidebar-secondary/sidebar-secondary.js

@@ -0,0 +1,372 @@
+import { jsx as n, jsxs as m, Fragment as w } from "react/jsx-runtime";
+import * as d from "react";
+import { mergeProps as x } from "@base-ui/react/merge-props";
+import { useRender as f } from "@base-ui/react/use-render";
+import { Collapsible as v } from "@base-ui/react/collapsible";
+import { ChevronRightIcon as R, ChevronDownIcon as M, SquareArrowUpRightIcon as C } from "@acronis-platform/icons-react/stroke-mono";
+import { cva as z } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as o } from "../../../lib/utils.js";
+const S = d.createContext(null);
+function p() {
+  return d.useContext(S) ?? {
+    expanded: !0,
+    toggleExpanded: () => {
+    }
+  };
+}
+function I(r, e, a) {
+  const [i, s] = d.useState(e), t = r !== void 0, c = t ? r : i, l = d.useCallback(
+    (u) => {
+      t || s(u), a == null || a(u);
+    },
+    [t, a]
+  );
+  return [c, l];
+}
+const k = d.forwardRef(
+  ({
+    className: r,
+    expanded: e,
+    defaultExpanded: a = !0,
+    onExpandedChange: i,
+    "aria-label": s = "Section navigation",
+    render: t,
+    children: c,
+    ...l
+  }, u) => {
+    const [b, y] = I(
+      e,
+      a,
+      i
+    ), h = d.useMemo(
+      () => ({ expanded: b, toggleExpanded: () => y(!b) }),
+      [b, y]
+    ), N = f({
+      render: t,
+      ref: u,
+      defaultTagName: "nav",
+      props: x(
+        {
+          "aria-label": s,
+          "data-state": b ? "expanded" : "collapsed",
+          className: o(
+            "group/sidebar flex h-full flex-col bg-[var(--ui-sidebar-secondary-global-container-color)] border-r border-[var(--ui-sidebar-secondary-global-container-border-color)] [border-right-width:var(--ui-sidebar-secondary-global-container-border-width)] w-[var(--ui-sidebar-secondary-collapsed-container-width)] data-[state=expanded]:w-[var(--ui-sidebar-secondary-expanded-container-width)] transition-[width]",
+            r
+          ),
+          children: c
+        },
+        l
+      )
+    });
+    return /* @__PURE__ */ n(S.Provider, { value: h, children: N });
+  }
+);
+k.displayName = "SidebarSecondary";
+const T = d.forwardRef(({ className: r, label: e, children: a, ...i }, s) => /* @__PURE__ */ n(
+  "div",
+  {
+    ref: s,
+    className: o(
+      "flex items-center shrink-0",
+      "px-[var(--ui-sidebar-secondary-collapsed-container-header-padding-x)] py-[var(--ui-sidebar-secondary-collapsed-container-header-padding-y)]",
+      "group-data-[state=expanded]/sidebar:px-[var(--ui-sidebar-secondary-expanded-container-header-padding-x)] group-data-[state=expanded]/sidebar:py-[var(--ui-sidebar-secondary-expanded-container-header-padding-y)]",
+      r
+    ),
+    ...i,
+    children: /* @__PURE__ */ n("h2", { className: "ui-sidebar-secondary-global-header-label-text-style truncate text-[var(--ui-sidebar-secondary-global-header-label-color)]", children: e ?? a })
+  }
+));
+T.displayName = "SidebarSecondaryHeader";
+const E = d.forwardRef(({ className: r, ...e }, a) => (
+  // Expanded: the section list. Hidden in collapsed mode, where the
+  // CollapsedBreadcrumb sibling takes over.
+  /* @__PURE__ */ n(
+    "div",
+    {
+      ref: a,
+      className: o(
+        "flex flex-1 flex-col overflow-y-auto gap-[var(--ui-sidebar-secondary-global-section-list-gap)]",
+        "hidden group-data-[state=expanded]/sidebar:flex",
+        r
+      ),
+      ...e
+    }
+  )
+));
+E.displayName = "SidebarSecondaryContent";
+const L = d.forwardRef(({ className: r, parentLabel: e, currentLabel: a, separator: i, ...s }, t) => (
+  // Shown only in collapsed mode — toggled by the same data-[state] selector so
+  // it stays in the DOM (SSR-present) with no JS branch. Laid out vertically:
+  // parent → separator → current page.
+  /* @__PURE__ */ m(
+    "div",
+    {
+      ref: t,
+      className: o(
+        "flex flex-col items-center shrink-0",
+        "gap-[var(--ui-sidebar-secondary-collapsed-container-content-gap)] py-[var(--ui-sidebar-secondary-collapsed-container-content-padding-y)]",
+        "flex group-data-[state=expanded]/sidebar:hidden",
+        r
+      ),
+      ...s,
+      children: [
+        /* @__PURE__ */ n("span", { className: "ui-sidebar-secondary-collapsed-breadcrumb-label-text-style text-[var(--ui-sidebar-secondary-collapsed-breadcrumb-label-color)]", children: e }),
+        /* @__PURE__ */ n(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "inline-flex items-center text-[var(--ui-sidebar-secondary-collapsed-icon-separator-color)] [&>svg]:size-[var(--ui-sidebar-secondary-collapsed-icon-separator-size)]",
+            children: i ?? /* @__PURE__ */ n(R, { size: 16 })
+          }
+        ),
+        /* @__PURE__ */ n("span", { className: "ui-sidebar-secondary-collapsed-label-current-page-text-style text-[var(--ui-sidebar-secondary-collapsed-label-current-page-color)]", children: a })
+      ]
+    }
+  )
+));
+L.displayName = "SidebarSecondaryCollapsedBreadcrumb";
+const P = d.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ n(
+  "div",
+  {
+    ref: a,
+    className: o(
+      "flex flex-col shrink-0",
+      "border-t border-[var(--ui-sidebar-secondary-global-container-footer-border-color)] [border-top-width:var(--ui-sidebar-secondary-global-container-footer-border-width)]",
+      "py-[var(--ui-sidebar-secondary-section-container-padding-y)]",
+      r
+    ),
+    ...e
+  }
+));
+P.displayName = "SidebarSecondaryFooter";
+const B = d.forwardRef(({ className: r, ...e }, a) => (
+  // Sections are separated by vertical padding + the section label; the next-gen
+  // token sync removed the inter-section divider (no
+  // `--ui-sidebar-secondary-section-container-border-*` token survives).
+  /* @__PURE__ */ n(
+    "div",
+    {
+      ref: a,
+      className: o(
+        "flex flex-col py-[var(--ui-sidebar-secondary-section-container-padding-y)]",
+        r
+      ),
+      ...e
+    }
+  )
+));
+B.displayName = "SidebarSecondarySection";
+const F = d.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ n(
+  "div",
+  {
+    ref: a,
+    className: o(
+      "ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-sidebar-secondary-section-label-section-color)]",
+      "pb-[var(--ui-sidebar-secondary-section-container-header-padding-y)] px-[var(--ui-sidebar-secondary-section-container-header-padding-x)]",
+      r
+    ),
+    ...e
+  }
+));
+F.displayName = "SidebarSecondarySectionLabel";
+const V = d.forwardRef(({ className: r, ...e }, a) => /* @__PURE__ */ n(
+  "ul",
+  {
+    ref: a,
+    className: o(
+      "flex flex-col gap-[var(--ui-sidebar-secondary-section-menu-item-list-gap)]",
+      r
+    ),
+    ...e
+  }
+));
+V.displayName = "SidebarSecondaryMenu";
+const _ = "group/row flex w-full items-center gap-[var(--ui-sidebar-secondary-menu-item-global-container-gap)] min-h-[var(--ui-sidebar-secondary-menu-item-global-container-height-min)] px-[var(--ui-sidebar-secondary-menu-item-global-container-padding-x)] py-[var(--ui-sidebar-secondary-menu-item-global-container-padding-y)] no-underline ui-sidebar-secondary-menu-item-global-label-text-style transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset text-[var(--ui-sidebar-secondary-menu-item-global-label-color-color)] [&_svg]:shrink-0 [&_svg]:size-[var(--ui-sidebar-secondary-menu-item-global-icon-size)] [&_svg]:text-[var(--ui-sidebar-secondary-menu-item-global-icon-color-color)]", g = z(_, {
+  variants: {
+    variant: {
+      unselected: "bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-idle)] hover:bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-hover)] active:bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-active)]",
+      selected: "bg-[var(--ui-sidebar-secondary-menu-item-selected-container-color-idle)] hover:bg-[var(--ui-sidebar-secondary-menu-item-selected-container-color-hover)] active:bg-[var(--ui-sidebar-secondary-menu-item-selected-container-color-active)]"
+    }
+  },
+  defaultVariants: {
+    variant: "unselected"
+  }
+}), j = d.forwardRef(({ className: r, selected: e = !1, icon: a, render: i, children: s, ...t }, c) => {
+  const { expanded: l } = p(), u = f({
+    render: i,
+    ref: c,
+    defaultTagName: "a",
+    props: x(
+      {
+        className: o(
+          g({
+            variant: e ? "selected" : "unselected"
+          }),
+          r
+        ),
+        "aria-current": e ? "page" : void 0,
+        children: /* @__PURE__ */ m(w, { children: [
+          a != null && /* @__PURE__ */ n("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)]", children: a }),
+          /* @__PURE__ */ n(
+            "span",
+            {
+              className: o("flex-1 truncate text-left", !l && "sr-only"),
+              children: s
+            }
+          )
+        ] })
+      },
+      t
+    )
+  });
+  return /* @__PURE__ */ n("li", { className: "contents", children: u });
+});
+j.displayName = "SidebarSecondaryMenuItem";
+const H = d.forwardRef(({ className: r, render: e, ...a }, i) => (
+  // Disclosure row: Base UI Collapsible gives per-row open state +
+  // aria-expanded/aria-controls. Rendered as the list `<li>` wrapper.
+  /* @__PURE__ */ n(
+    v.Root,
+    {
+      ref: i,
+      render: e ?? /* @__PURE__ */ n("li", {}),
+      className: o("contents", r),
+      ...a
+    }
+  )
+));
+H.displayName = "SidebarSecondaryMenuSub";
+const U = d.forwardRef(({ className: r, selected: e = !1, icon: a, children: i, ...s }, t) => {
+  const { expanded: c } = p();
+  return /* @__PURE__ */ m(
+    v.Trigger,
+    {
+      ref: t,
+      "aria-current": e ? "page" : void 0,
+      className: o(
+        g({
+          variant: e ? "selected" : "unselected"
+        }),
+        "text-left",
+        r
+      ),
+      ...s,
+      children: [
+        a != null && /* @__PURE__ */ n("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)]", children: a }),
+        /* @__PURE__ */ n("span", { className: o("flex-1 truncate", !c && "sr-only"), children: i }),
+        /* @__PURE__ */ n(
+          M,
+          {
+            size: 16,
+            "aria-hidden": "true",
+            className: o(
+              "shrink-0 transition-transform group-data-[panel-open]/row:rotate-180",
+              !c && "hidden"
+            )
+          }
+        )
+      ]
+    }
+  );
+});
+U.displayName = "SidebarSecondaryMenuSubTrigger";
+const q = d.forwardRef(({ className: r, children: e, ...a }, i) => /* @__PURE__ */ n(v.Panel, { ref: i, className: o(r), ...a, children: /* @__PURE__ */ n("ul", { className: "flex flex-col gap-[var(--ui-sidebar-secondary-section-menu-item-list-gap)]", children: e }) }));
+q.displayName = "SidebarSecondaryMenuSubContent";
+const A = d.forwardRef(({ className: r, selected: e = !1, render: a, children: i, ...s }, t) => {
+  const { expanded: c } = p(), l = f({
+    render: a,
+    ref: t,
+    defaultTagName: "a",
+    props: x(
+      {
+        className: o(
+          g({
+            variant: e ? "selected" : "unselected"
+          }),
+          // Level-2 left indent (no icon column). The dedicated level-2 padding
+          // token was removed in the next-gen sync; reconstruct the indent from
+          // surviving tokens so the label aligns under level-1 labels (row
+          // padding + icon column + gap).
+          "pl-[calc(var(--ui-sidebar-secondary-menu-item-global-container-padding-x)+var(--ui-sidebar-secondary-menu-item-global-icon-size)+var(--ui-sidebar-secondary-menu-item-global-container-gap))]",
+          r
+        ),
+        "aria-current": e ? "page" : void 0,
+        children: /* @__PURE__ */ n("span", { className: o("flex-1 truncate text-left", !c && "sr-only"), children: i })
+      },
+      s
+    )
+  });
+  return /* @__PURE__ */ n("li", { className: "contents", children: l });
+});
+A.displayName = "SidebarSecondaryMenuSubItem";
+const D = d.forwardRef(({ className: r, variant: e, shortcut: a, tag: i, children: s, ...t }, c) => {
+  const { expanded: l } = p(), u = e === "tag" || e === "tag-externalLink", b = e === "externalLink" || e === "tag-externalLink", y = e === "shortcut";
+  return /* @__PURE__ */ m(
+    "span",
+    {
+      ref: c,
+      className: o(
+        "inline-flex items-center gap-[var(--ui-sidebar-secondary-menu-item-extras-global-container-gap)]",
+        !l && "hidden",
+        r
+      ),
+      ...t,
+      children: [
+        u && (i ?? s),
+        y && /* @__PURE__ */ n("span", { className: "ui-sidebar-secondary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-secondary-menu-item-extras-global-shortcut-color)]", children: a ?? s }),
+        b && /* @__PURE__ */ n(
+          C,
+          {
+            size: 16,
+            className: "text-[var(--ui-sidebar-secondary-menu-item-extras-global-external-icon-color)] size-[var(--ui-sidebar-secondary-menu-item-extras-global-external-icon-size)]"
+          }
+        )
+      ]
+    }
+  );
+});
+D.displayName = "SidebarSecondaryMenuItemExtras";
+const G = d.forwardRef(({ className: r, icon: e, children: a, onClick: i, ...s }, t) => {
+  const { expanded: c, toggleExpanded: l } = p();
+  return /* @__PURE__ */ n("li", { className: "contents", children: /* @__PURE__ */ m(
+    "button",
+    {
+      ref: t,
+      type: "button",
+      "aria-expanded": c,
+      className: o(
+        g({ variant: "unselected" }),
+        "text-left",
+        r
+      ),
+      onClick: (u) => {
+        i == null || i(u), u.defaultPrevented || l();
+      },
+      ...s,
+      children: [
+        e != null && /* @__PURE__ */ n("span", { className: "flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)]", children: e }),
+        /* @__PURE__ */ n("span", { className: o("flex-1 truncate", !c && "sr-only"), children: a })
+      ]
+    }
+  ) });
+});
+G.displayName = "SidebarSecondaryCollapseTrigger";
+export {
+  k as SidebarSecondary,
+  G as SidebarSecondaryCollapseTrigger,
+  L as SidebarSecondaryCollapsedBreadcrumb,
+  E as SidebarSecondaryContent,
+  P as SidebarSecondaryFooter,
+  T as SidebarSecondaryHeader,
+  V as SidebarSecondaryMenu,
+  j as SidebarSecondaryMenuItem,
+  D as SidebarSecondaryMenuItemExtras,
+  H as SidebarSecondaryMenuSub,
+  q as SidebarSecondaryMenuSubContent,
+  A as SidebarSecondaryMenuSubItem,
+  U as SidebarSecondaryMenuSubTrigger,
+  B as SidebarSecondarySection,
+  F as SidebarSecondarySectionLabel,
+  g as sidebarSecondaryMenuItemVariants
+};
+//# sourceMappingURL=sidebar-secondary.js.map

package/dist/components/ui/sidebar-secondary/sidebar-secondary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-secondary.js","sources":["../../../../src/components/ui/sidebar-secondary/sidebar-secondary.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { Collapsible } from '@base-ui/react/collapsible';\nimport {\n  ChevronDownIcon,\n  ChevronRightIcon,\n  SquareArrowUpRightIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Composable SidebarSecondary primitives mirroring the Figma \"SidebarSecondary\"\n// component set (node 2468:59502, variant expanded|collapsed). Every color and\n// metric is wired to a next-gen `--ui-sidebar-secondary-*` token from\n// @acronis-platform/tokens-pd — no hex, no invented tokens.\n//\n// Like SidebarPrimary, expanded/collapsed is a width-reflow state (not a panel\n// show/hide), modelled as a controlled/uncontrolled `expanded` prop (default\n// true) that sets `data-state=\"expanded|collapsed\"` on the root and is shared to\n// descendants via context. The collapsed rail replaces the section list with a\n// vertical breadcrumb (parent → separator → current page), toggled purely by the\n// `data-[state]` selectors so it is SSR-present and needs no JS branch.\n//\n// Menu-item color wiring DIVERGES from Primary (DESIGN §6.2): Secondary recolors\n// only the CONTAINER per selected/unselected; the icon and label use the shared\n// `--ui-sidebar-secondary-menu-item-global-{icon,label}-color-color` tokens\n// across both variants and every interaction state (the next-gen token sync\n// collapsed the former per-state idle/hover/active icon+label colors into a\n// single value each). So the cva base carries the global icon/label colors and\n// the two variants only swap the container fill.\n//\n// The Level-1 expandable disclosure (SidebarSecondaryMenuSub) is the canonical\n// Base UI Collapsible use — it gives `aria-expanded`/`aria-controls` for free and\n// per-row open state. The trigger gets `data-panel-open` when open, which rotates\n// the chevron.\n//\n// R6 (collapsed separator icon): resolved from the Figma node metadata — the\n// collapsed `iconSeparator` instance's mainComponent is \"ChevronRight\", so the\n// separator defaults to `ChevronRightIcon` (16px), tinted by\n// `--ui-sidebar-secondary-collapsed-icon-separator-color`. The disclosure chevron\n// uses `ChevronDownIcon` rotated via `data-panel-open`. The focus ring reuses the\n// shared `--ui-focus-brand` (no sidebar focus token exists — R1).\n\ninterface SidebarSecondaryContextValue {\n  expanded: boolean;\n  /** Flip the panel width — drives the controlled/uncontrolled `expanded` state. */\n  toggleExpanded: () => void;\n}\n\nconst SidebarSecondaryContext =\n  React.createContext<SidebarSecondaryContextValue | null>(null);\n\nfunction useSidebarSecondaryContext(): SidebarSecondaryContextValue {\n  // Default to expanded so parts render standalone (in isolation tests /\n  // stories) without a wrapping root; the toggle is a no-op outside a root.\n  return (\n    React.useContext(SidebarSecondaryContext) ?? {\n      expanded: true,\n      toggleExpanded: () => {},\n    }\n  );\n}\n\n/**\n * Controlled + uncontrolled boolean state (the Base UI idiom). When `controlled`\n * is provided it wins and the setter only emits the change callback; otherwise\n * the setter updates internal state. `onChange` is ALWAYS invoked with the next\n * value so a consumer can react in either mode.\n */\nfunction useControllableBoolean(\n  controlled: boolean | undefined,\n  defaultValue: boolean,\n  onChange?: (next: boolean) => void\n): [boolean, (next: boolean) => void] {\n  const [uncontrolled, setUncontrolled] = React.useState(defaultValue);\n  const isControlled = controlled !== undefined;\n  const value = isControlled ? controlled : uncontrolled;\n  const setValue = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) setUncontrolled(next);\n      onChange?.(next);\n    },\n    [isControlled, onChange]\n  );\n  return [value, setValue];\n}\n\nexport interface SidebarSecondaryProps\n  extends React.ComponentPropsWithoutRef<'nav'> {\n  /** Controlled expanded (rail width) state. */\n  expanded?: boolean;\n  /** Uncontrolled initial expanded state. Defaults to `true` (full width). */\n  defaultExpanded?: boolean;\n  /** Fires when the expanded state changes (e.g. a consumer toggle). */\n  onExpandedChange?: (expanded: boolean) => void;\n  /**\n   * Replace the rendered `<nav>` with another element or component\n   * (Base UI composition). Accepts a React element or a render function.\n   */\n  render?: useRender.RenderProp;\n}\n\nconst SidebarSecondary = React.forwardRef<HTMLElement, SidebarSecondaryProps>(\n  (\n    {\n      className,\n      expanded: expandedProp,\n      defaultExpanded = true,\n      onExpandedChange,\n      'aria-label': ariaLabel = 'Section navigation',\n      render,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [expanded, setExpanded] = useControllableBoolean(\n      expandedProp,\n      defaultExpanded,\n      onExpandedChange\n    );\n\n    // Collapse is driven by the consumer through the layout context — the\n    // `SidebarSecondaryCollapseTrigger` calls `toggleExpanded`, which updates\n    // uncontrolled state and always emits `onExpandedChange`. Controlled\n    // consumers ignore the internal state and react to the callback.\n    const context = React.useMemo<SidebarSecondaryContextValue>(\n      () => ({ expanded, toggleExpanded: () => setExpanded(!expanded) }),\n      [expanded, setExpanded]\n    );\n\n    const element = useRender({\n      render,\n      ref,\n      defaultTagName: 'nav',\n      props: mergeProps<'nav'>(\n        {\n          'aria-label': ariaLabel,\n          // `data-state` drives every collapsed/expanded token switch via\n          // attribute selectors; typed loosely because React's nav attribute\n          // map doesn't include arbitrary data-* keys as literals.\n          ...({ 'data-state': expanded ? 'expanded' : 'collapsed' } as Record<\n            string,\n            string\n          >),\n          className: cn(\n            'group/sidebar flex h-full flex-col bg-[var(--ui-sidebar-secondary-global-container-color)] border-r border-[var(--ui-sidebar-secondary-global-container-border-color)] [border-right-width:var(--ui-sidebar-secondary-global-container-border-width)] w-[var(--ui-sidebar-secondary-collapsed-container-width)] data-[state=expanded]:w-[var(--ui-sidebar-secondary-expanded-container-width)] transition-[width]',\n            className\n          ),\n          children,\n        },\n        props\n      ),\n    });\n\n    return (\n      <SidebarSecondaryContext.Provider value={context}>\n        {element}\n      </SidebarSecondaryContext.Provider>\n    );\n  }\n);\nSidebarSecondary.displayName = 'SidebarSecondary';\n\nexport interface SidebarSecondaryHeaderProps\n  extends React.ComponentPropsWithoutRef<'div'> {\n  /** Heading text (or pass as children). */\n  label?: React.ReactNode;\n}\n\nconst SidebarSecondaryHeader = React.forwardRef<\n  HTMLDivElement,\n  SidebarSecondaryHeaderProps\n>(({ className, label, children, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex items-center shrink-0',\n      'px-[var(--ui-sidebar-secondary-collapsed-container-header-padding-x)] py-[var(--ui-sidebar-secondary-collapsed-container-header-padding-y)]',\n      'group-data-[state=expanded]/sidebar:px-[var(--ui-sidebar-secondary-expanded-container-header-padding-x)] group-data-[state=expanded]/sidebar:py-[var(--ui-sidebar-secondary-expanded-container-header-padding-y)]',\n      className\n    )}\n    {...props}\n  >\n    <h2 className=\"ui-sidebar-secondary-global-header-label-text-style truncate text-[var(--ui-sidebar-secondary-global-header-label-color)]\">\n      {label ?? children}\n    </h2>\n  </div>\n));\nSidebarSecondaryHeader.displayName = 'SidebarSecondaryHeader';\n\nconst SidebarSecondaryContent = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  // Expanded: the section list. Hidden in collapsed mode, where the\n  // CollapsedBreadcrumb sibling takes over.\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-1 flex-col overflow-y-auto gap-[var(--ui-sidebar-secondary-global-section-list-gap)]',\n      'hidden group-data-[state=expanded]/sidebar:flex',\n      className\n    )}\n    {...props}\n  />\n));\nSidebarSecondaryContent.displayName = 'SidebarSecondaryContent';\n\nexport interface SidebarSecondaryCollapsedBreadcrumbProps\n  extends React.ComponentPropsWithoutRef<'div'> {\n  /** The parent section label (breadcrumbLabel). */\n  parentLabel: React.ReactNode;\n  /** The current page label (labelCurrentPage). */\n  currentLabel: React.ReactNode;\n  /** Separator between the two; defaults to a 16px ChevronRightIcon (R6). */\n  separator?: React.ReactNode;\n}\n\nconst SidebarSecondaryCollapsedBreadcrumb = React.forwardRef<\n  HTMLDivElement,\n  SidebarSecondaryCollapsedBreadcrumbProps\n>(({ className, parentLabel, currentLabel, separator, ...props }, ref) => (\n  // Shown only in collapsed mode — toggled by the same data-[state] selector so\n  // it stays in the DOM (SSR-present) with no JS branch. Laid out vertically:\n  // parent → separator → current page.\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col items-center shrink-0',\n      'gap-[var(--ui-sidebar-secondary-collapsed-container-content-gap)] py-[var(--ui-sidebar-secondary-collapsed-container-content-padding-y)]',\n      'flex group-data-[state=expanded]/sidebar:hidden',\n      className\n    )}\n    {...props}\n  >\n    <span className=\"ui-sidebar-secondary-collapsed-breadcrumb-label-text-style text-[var(--ui-sidebar-secondary-collapsed-breadcrumb-label-color)]\">\n      {parentLabel}\n    </span>\n    <span\n      aria-hidden=\"true\"\n      className=\"inline-flex items-center text-[var(--ui-sidebar-secondary-collapsed-icon-separator-color)] [&>svg]:size-[var(--ui-sidebar-secondary-collapsed-icon-separator-size)]\"\n    >\n      {separator ?? <ChevronRightIcon size={16} />}\n    </span>\n    <span className=\"ui-sidebar-secondary-collapsed-label-current-page-text-style text-[var(--ui-sidebar-secondary-collapsed-label-current-page-color)]\">\n      {currentLabel}\n    </span>\n  </div>\n));\nSidebarSecondaryCollapsedBreadcrumb.displayName =\n  'SidebarSecondaryCollapsedBreadcrumb';\n\nconst SidebarSecondaryFooter = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col shrink-0',\n      'border-t border-[var(--ui-sidebar-secondary-global-container-footer-border-color)] [border-top-width:var(--ui-sidebar-secondary-global-container-footer-border-width)]',\n      'py-[var(--ui-sidebar-secondary-section-container-padding-y)]',\n      className\n    )}\n    {...props}\n  />\n));\nSidebarSecondaryFooter.displayName = 'SidebarSecondaryFooter';\n\nconst SidebarSecondarySection = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  // Sections are separated by vertical padding + the section label; the next-gen\n  // token sync removed the inter-section divider (no\n  // `--ui-sidebar-secondary-section-container-border-*` token survives).\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col py-[var(--ui-sidebar-secondary-section-container-padding-y)]',\n      className\n    )}\n    {...props}\n  />\n));\nSidebarSecondarySection.displayName = 'SidebarSecondarySection';\n\nconst SidebarSecondarySectionLabel = React.forwardRef<\n  HTMLDivElement,\n  React.ComponentPropsWithoutRef<'div'>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'ui-sidebar-secondary-section-label-section-text-style text-[var(--ui-sidebar-secondary-section-label-section-color)]',\n      'pb-[var(--ui-sidebar-secondary-section-container-header-padding-y)] px-[var(--ui-sidebar-secondary-section-container-header-padding-x)]',\n      className\n    )}\n    {...props}\n  />\n));\nSidebarSecondarySectionLabel.displayName = 'SidebarSecondarySectionLabel';\n\nconst SidebarSecondaryMenu = React.forwardRef<\n  HTMLUListElement,\n  React.ComponentPropsWithoutRef<'ul'>\n>(({ className, ...props }, ref) => (\n  <ul\n    ref={ref}\n    className={cn(\n      'flex flex-col gap-[var(--ui-sidebar-secondary-section-menu-item-list-gap)]',\n      className\n    )}\n    {...props}\n  />\n));\nSidebarSecondaryMenu.displayName = 'SidebarSecondaryMenu';\n\n// Shared row geometry + the GLOBAL icon/label state colors (shared across\n// selected/unselected — DESIGN §6.2). The cva `variant` only swaps the container\n// fill. Each interaction state is wired to its own token even where acronis's\n// value is unchanged (runtime var() references honor brand overrides only on the\n// referenced token).\nconst sidebarSecondaryRowClasses =\n  'group/row flex w-full items-center gap-[var(--ui-sidebar-secondary-menu-item-global-container-gap)] min-h-[var(--ui-sidebar-secondary-menu-item-global-container-height-min)] px-[var(--ui-sidebar-secondary-menu-item-global-container-padding-x)] py-[var(--ui-sidebar-secondary-menu-item-global-container-padding-y)] no-underline ui-sidebar-secondary-menu-item-global-label-text-style transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-focus-brand)] focus-visible:ring-inset text-[var(--ui-sidebar-secondary-menu-item-global-label-color-color)] [&_svg]:shrink-0 [&_svg]:size-[var(--ui-sidebar-secondary-menu-item-global-icon-size)] [&_svg]:text-[var(--ui-sidebar-secondary-menu-item-global-icon-color-color)]';\n\nconst sidebarSecondaryMenuItemVariants = cva(sidebarSecondaryRowClasses, {\n  variants: {\n    variant: {\n      unselected:\n        'bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-idle)] hover:bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-hover)] active:bg-[var(--ui-sidebar-secondary-menu-item-unselected-container-color-active)]',\n      selected:\n        'bg-[var(--ui-sidebar-secondary-menu-item-selected-container-color-idle)] hover:bg-[var(--ui-sidebar-secondary-menu-item-selected-container-color-hover)] active:bg-[var(--ui-sidebar-secondary-menu-item-selected-container-color-active)]',\n    },\n  },\n  defaultVariants: {\n    variant: 'unselected',\n  },\n});\n\nexport interface SidebarSecondaryMenuItemProps\n  extends Omit<React.ComponentPropsWithoutRef<'a'>, 'children'>,\n    Omit<VariantProps<typeof sidebarSecondaryMenuItemVariants>, 'variant'> {\n  /** Marks the current route: sets the `selected` variant + `aria-current=\"page\"`. */\n  selected?: boolean;\n  /** Optional leading 16px icon (Level-1 only; `hasIcon` in Figma). */\n  icon?: React.ReactNode;\n  children?: React.ReactNode;\n  /** Replace the rendered `<a>` (e.g. a router `Link` or a `<button>`). */\n  render?: useRender.RenderProp;\n}\n\nconst SidebarSecondaryMenuItem = React.forwardRef<\n  HTMLAnchorElement,\n  SidebarSecondaryMenuItemProps\n>(({ className, selected = false, icon, render, children, ...props }, ref) => {\n  const { expanded } = useSidebarSecondaryContext();\n\n  const inner = useRender({\n    render,\n    ref,\n    defaultTagName: 'a',\n    props: mergeProps<'a'>(\n      {\n        className: cn(\n          sidebarSecondaryMenuItemVariants({\n            variant: selected ? 'selected' : 'unselected',\n          }),\n          className\n        ),\n        'aria-current': selected ? 'page' : undefined,\n        children: (\n          <>\n            {icon != null && (\n              <span className=\"flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)]\">\n                {icon}\n              </span>\n            )}\n            {/* Keep the label in the DOM as `sr-only` in collapsed/rail mode so\n                an icon-only row keeps an accessible name (a11y §7). */}\n            <span\n              className={cn('flex-1 truncate text-left', !expanded && 'sr-only')}\n            >\n              {children}\n            </span>\n          </>\n        ),\n      },\n      props\n    ),\n  });\n\n  return <li className=\"contents\">{inner}</li>;\n});\nSidebarSecondaryMenuItem.displayName = 'SidebarSecondaryMenuItem';\n\nexport type SidebarSecondaryMenuSubProps = React.ComponentPropsWithoutRef<\n  typeof Collapsible.Root\n>;\n\nconst SidebarSecondaryMenuSub = React.forwardRef<\n  HTMLDivElement,\n  SidebarSecondaryMenuSubProps\n>(({ className, render, ...props }, ref) => (\n  // Disclosure row: Base UI Collapsible gives per-row open state +\n  // aria-expanded/aria-controls. Rendered as the list `<li>` wrapper.\n  <Collapsible.Root\n    ref={ref}\n    render={render ?? <li />}\n    className={cn('contents', className)}\n    {...props}\n  />\n));\nSidebarSecondaryMenuSub.displayName = 'SidebarSecondaryMenuSub';\n\nexport interface SidebarSecondaryMenuSubTriggerProps\n  extends React.ComponentPropsWithoutRef<typeof Collapsible.Trigger> {\n  /** Marks the parent row as selected. */\n  selected?: boolean;\n  /** Optional leading 16px icon. */\n  icon?: React.ReactNode;\n}\n\nconst SidebarSecondaryMenuSubTrigger = React.forwardRef<\n  HTMLButtonElement,\n  SidebarSecondaryMenuSubTriggerProps\n>(({ className, selected = false, icon, children, ...props }, ref) => {\n  const { expanded } = useSidebarSecondaryContext();\n\n  return (\n    <Collapsible.Trigger\n      ref={ref}\n      aria-current={selected ? 'page' : undefined}\n      className={cn(\n        sidebarSecondaryMenuItemVariants({\n          variant: selected ? 'selected' : 'unselected',\n        }),\n        'text-left',\n        className\n      )}\n      {...props}\n    >\n      {icon != null && (\n        <span className=\"flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)]\">\n          {icon}\n        </span>\n      )}\n      <span className={cn('flex-1 truncate', !expanded && 'sr-only')}>\n        {children}\n      </span>\n      {/* Chevron rotates when the panel is open (Base UI sets data-panel-open\n          on the trigger). Hidden in collapsed rail mode. */}\n      <ChevronDownIcon\n        size={16}\n        aria-hidden=\"true\"\n        className={cn(\n          'shrink-0 transition-transform group-data-[panel-open]/row:rotate-180',\n          !expanded && 'hidden'\n        )}\n      />\n    </Collapsible.Trigger>\n  );\n});\nSidebarSecondaryMenuSubTrigger.displayName = 'SidebarSecondaryMenuSubTrigger';\n\nexport type SidebarSecondaryMenuSubContentProps =\n  React.ComponentPropsWithoutRef<typeof Collapsible.Panel>;\n\nconst SidebarSecondaryMenuSubContent = React.forwardRef<\n  HTMLDivElement,\n  SidebarSecondaryMenuSubContentProps\n>(({ className, children, ...props }, ref) => (\n  <Collapsible.Panel ref={ref} className={cn(className)} {...props}>\n    <ul className=\"flex flex-col gap-[var(--ui-sidebar-secondary-section-menu-item-list-gap)]\">\n      {children}\n    </ul>\n  </Collapsible.Panel>\n));\nSidebarSecondaryMenuSubContent.displayName = 'SidebarSecondaryMenuSubContent';\n\nexport interface SidebarSecondaryMenuSubItemProps\n  extends Omit<React.ComponentPropsWithoutRef<'a'>, 'children'> {\n  /** Marks the current route (Level-2 — no icon). */\n  selected?: boolean;\n  children?: React.ReactNode;\n  /** Replace the rendered `<a>` (e.g. a router `Link`). */\n  render?: useRender.RenderProp;\n}\n\nconst SidebarSecondaryMenuSubItem = React.forwardRef<\n  HTMLAnchorElement,\n  SidebarSecondaryMenuSubItemProps\n>(({ className, selected = false, render, children, ...props }, ref) => {\n  const { expanded } = useSidebarSecondaryContext();\n\n  const inner = useRender({\n    render,\n    ref,\n    defaultTagName: 'a',\n    props: mergeProps<'a'>(\n      {\n        className: cn(\n          sidebarSecondaryMenuItemVariants({\n            variant: selected ? 'selected' : 'unselected',\n          }),\n          // Level-2 left indent (no icon column). The dedicated level-2 padding\n          // token was removed in the next-gen sync; reconstruct the indent from\n          // surviving tokens so the label aligns under level-1 labels (row\n          // padding + icon column + gap).\n          'pl-[calc(var(--ui-sidebar-secondary-menu-item-global-container-padding-x)+var(--ui-sidebar-secondary-menu-item-global-icon-size)+var(--ui-sidebar-secondary-menu-item-global-container-gap))]',\n          className\n        ),\n        'aria-current': selected ? 'page' : undefined,\n        children: (\n          <span className={cn('flex-1 truncate text-left', !expanded && 'sr-only')}>\n            {children}\n          </span>\n        ),\n      },\n      props\n    ),\n  });\n\n  return <li className=\"contents\">{inner}</li>;\n});\nSidebarSecondaryMenuSubItem.displayName = 'SidebarSecondaryMenuSubItem';\n\nexport interface SidebarSecondaryMenuItemExtrasProps\n  extends React.ComponentPropsWithoutRef<'span'> {\n  /** Which trailing affordance to render. */\n  variant: 'tag' | 'externalLink' | 'shortcut' | 'tag-externalLink';\n  /** Shortcut text for the `shortcut` variant. */\n  shortcut?: string;\n  /** Tag content for the `tag` / `tag-externalLink` variants. */\n  tag?: React.ReactNode;\n}\n\nconst SidebarSecondaryMenuItemExtras = React.forwardRef<\n  HTMLSpanElement,\n  SidebarSecondaryMenuItemExtrasProps\n>(({ className, variant, shortcut, tag, children, ...props }, ref) => {\n  const { expanded } = useSidebarSecondaryContext();\n  const showTag = variant === 'tag' || variant === 'tag-externalLink';\n  const showExternal =\n    variant === 'externalLink' || variant === 'tag-externalLink';\n  const showShortcut = variant === 'shortcut';\n\n  return (\n    <span\n      ref={ref}\n      className={cn(\n        'inline-flex items-center gap-[var(--ui-sidebar-secondary-menu-item-extras-global-container-gap)]',\n        !expanded && 'hidden',\n        className\n      )}\n      {...props}\n    >\n      {showTag && (tag ?? children)}\n      {showShortcut && (\n        <span className=\"ui-sidebar-secondary-menu-item-extras-global-shortcut-text-style text-[var(--ui-sidebar-secondary-menu-item-extras-global-shortcut-color)]\">\n          {shortcut ?? children}\n        </span>\n      )}\n      {showExternal && (\n        <SquareArrowUpRightIcon\n          size={16}\n          className=\"text-[var(--ui-sidebar-secondary-menu-item-extras-global-external-icon-color)] size-[var(--ui-sidebar-secondary-menu-item-extras-global-external-icon-size)]\"\n        />\n      )}\n    </span>\n  );\n});\nSidebarSecondaryMenuItemExtras.displayName = 'SidebarSecondaryMenuItemExtras';\n\nexport interface SidebarSecondaryCollapseTriggerProps\n  extends Omit<React.ComponentPropsWithoutRef<'button'>, 'children'> {\n  /** Leading 16px icon (e.g. a panel-left glyph). */\n  icon?: React.ReactNode;\n  children?: React.ReactNode;\n}\n\n// The footer \"Collapse menu\" affordance. A row-styled `<button>` that flips the\n// panel width via the layout context — the live wiring for the controllable\n// `expanded` state (B1). Keeps its label as `sr-only` in collapsed mode.\nconst SidebarSecondaryCollapseTrigger = React.forwardRef<\n  HTMLButtonElement,\n  SidebarSecondaryCollapseTriggerProps\n>(({ className, icon, children, onClick, ...props }, ref) => {\n  const { expanded, toggleExpanded } = useSidebarSecondaryContext();\n\n  return (\n    <li className=\"contents\">\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-expanded={expanded}\n        className={cn(\n          sidebarSecondaryMenuItemVariants({ variant: 'unselected' }),\n          'text-left',\n          className\n        )}\n        onClick={(event) => {\n          onClick?.(event);\n          if (!event.defaultPrevented) toggleExpanded();\n        }}\n        {...props}\n      >\n        {icon != null && (\n          <span className=\"flex shrink-0 items-center self-start mt-[var(--ui-sidebar-secondary-menu-item-global-icon-margin-t)]\">\n            {icon}\n          </span>\n        )}\n        <span className={cn('flex-1 truncate', !expanded && 'sr-only')}>\n          {children}\n        </span>\n      </button>\n    </li>\n  );\n});\nSidebarSecondaryCollapseTrigger.displayName = 'SidebarSecondaryCollapseTrigger';\n\nexport {\n  SidebarSecondary,\n  SidebarSecondaryHeader,\n  SidebarSecondaryContent,\n  SidebarSecondaryCollapsedBreadcrumb,\n  SidebarSecondaryFooter,\n  SidebarSecondarySection,\n  SidebarSecondarySectionLabel,\n  SidebarSecondaryMenu,\n  SidebarSecondaryMenuItem,\n  SidebarSecondaryMenuSub,\n  SidebarSecondaryMenuSubTrigger,\n  SidebarSecondaryMenuSubContent,\n  SidebarSecondaryMenuSubItem,\n  SidebarSecondaryMenuItemExtras,\n  SidebarSecondaryCollapseTrigger,\n  sidebarSecondaryMenuItemVariants,\n};\n"],"names":["SidebarSecondaryContext","React","useSidebarSecondaryContext","useControllableBoolean","controlled","defaultValue","onChange","uncontrolled","setUncontrolled","isControlled","value","setValue","next","SidebarSecondary","className","expandedProp","defaultExpanded","onExpandedChange","ariaLabel","render","children","props","ref","expanded","setExpanded","context","element","useRender","mergeProps","cn","SidebarSecondaryHeader","label","jsx","SidebarSecondaryContent","SidebarSecondaryCollapsedBreadcrumb","parentLabel","currentLabel","separator","jsxs","ChevronRightIcon","SidebarSecondaryFooter","SidebarSecondarySection","SidebarSecondarySectionLabel","SidebarSecondaryMenu","sidebarSecondaryRowClasses","sidebarSecondaryMenuItemVariants","cva","SidebarSecondaryMenuItem","selected","icon","inner","Fragment","SidebarSecondaryMenuSub","Collapsible","SidebarSecondaryMenuSubTrigger","ChevronDownIcon","SidebarSecondaryMenuSubContent","SidebarSecondaryMenuSubItem","SidebarSecondaryMenuItemExtras","variant","shortcut","tag","showTag","showExternal","showShortcut","SquareArrowUpRightIcon","SidebarSecondaryCollapseTrigger","onClick","toggleExpanded","event"],"mappings":"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"}

package/dist/components/ui/switch/switch.js

@@ -0,0 +1,41 @@
+import { jsx as o, jsxs as b } from "react/jsx-runtime";
+import * as r from "react";
+import { Switch as s } from "@base-ui/react/switch";
+import { cn as i } from "../../../lib/utils.js";
+const u = i(
+  "group inline-flex h-4 w-8 shrink-0 cursor-pointer items-center rounded-full p-0.5 outline-none transition-colors",
+  "data-[unchecked]:bg-[var(--ui-switch-off-box-color-idle)] data-[checked]:bg-[var(--ui-switch-on-box-color-idle)]",
+  "focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]",
+  "data-[disabled]:cursor-not-allowed data-[disabled]:data-[unchecked]:bg-[var(--ui-switch-off-box-color-disabled)] data-[disabled]:data-[checked]:bg-[var(--ui-switch-on-box-color-disabled)] data-[disabled]:shadow-[inset_0_0_0_1px_var(--ui-switch-global-box-border-color-disabled)]"
+), h = i(
+  "block size-3 rounded-full bg-[var(--ui-switch-global-tick-color-idle)] transition-transform",
+  "data-[checked]:translate-x-4",
+  "group-data-[disabled]:bg-[var(--ui-switch-global-tick-color-disabled)]"
+), m = r.forwardRef(({ className: t, label: a, ...c }, d) => {
+  const n = r.useId(), e = a != null ? `${n}-label` : void 0, l = /* @__PURE__ */ o(
+    s.Root,
+    {
+      ref: d,
+      "aria-labelledby": e,
+      className: i(u, t),
+      ...c,
+      children: /* @__PURE__ */ o(s.Thumb, { className: h })
+    }
+  );
+  return a == null ? l : /* @__PURE__ */ b("label", { className: "inline-flex cursor-pointer items-center gap-[var(--ui-switch-global-container-gap)]", children: [
+    l,
+    /* @__PURE__ */ o(
+      "span",
+      {
+        id: e,
+        className: "text-sm leading-6 font-normal text-[var(--ui-switch-global-label-color)]",
+        children: a
+      }
+    )
+  ] });
+});
+m.displayName = "Switch";
+export {
+  m as Switch
+};
+//# sourceMappingURL=switch.js.map

package/dist/components/ui/switch/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sources":["../../../../src/components/ui/switch/switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Switch as SwitchPrimitive } from '@base-ui/react/switch';\n\nimport { cn } from '@/lib/utils';\n\n// A binary on/off toggle: a Base UI Switch themed with the next-gen `--ui-switch-*`\n// `box`/`tick` token tier. A 32×16 track with a 12px thumb; the track fill is wired\n// per checked-state — off (`--ui-switch-off-box-color-idle`) / on\n// (`--ui-switch-on-box-color-idle`, green) — and disabled swaps to the muted box\n// fill + a light `tick`, plus a 1px inset border\n// (`--ui-switch-global-box-border-color-disabled`). Keyboard focus paints a 3px\n// `--ui-focus-primary` ring. The design has no hover/active color change (those token\n// stops equal idle). The disabled border is an inset box-shadow so it doesn't shrink\n// the 12px thumb's box (the Figma stroke is drawn inside).\n//\n// An optional `label` composes the full Figma field: the toggle plus its label in a\n// clickable `<label>` row (a Base UI switch renders a labelable <button>, so clicking\n// the text toggles it), wired via aria-labelledby and tinted with\n// `--ui-switch-global-label-color`. With no label, the bare toggle renders — name it\n// with `aria-label`.\nconst trackClasses = cn(\n  'group inline-flex h-4 w-8 shrink-0 cursor-pointer items-center rounded-full p-0.5 outline-none transition-colors',\n  'data-[unchecked]:bg-[var(--ui-switch-off-box-color-idle)] data-[checked]:bg-[var(--ui-switch-on-box-color-idle)]',\n  'focus-visible:ring-[3px] focus-visible:ring-[var(--ui-focus-primary)]',\n  'data-[disabled]:cursor-not-allowed data-[disabled]:data-[unchecked]:bg-[var(--ui-switch-off-box-color-disabled)] data-[disabled]:data-[checked]:bg-[var(--ui-switch-on-box-color-disabled)] data-[disabled]:shadow-[inset_0_0_0_1px_var(--ui-switch-global-box-border-color-disabled)]'\n);\n\nconst thumbClasses = cn(\n  'block size-3 rounded-full bg-[var(--ui-switch-global-tick-color-idle)] transition-transform',\n  'data-[checked]:translate-x-4',\n  'group-data-[disabled]:bg-[var(--ui-switch-global-tick-color-disabled)]'\n);\n\nexport interface SwitchProps\n  extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {\n  /** Optional label rendered beside the toggle; names the control. */\n  label?: React.ReactNode;\n}\n\nconst Switch = React.forwardRef<\n  React.ElementRef<typeof SwitchPrimitive.Root>,\n  SwitchProps\n>(({ className, label, ...props }, ref) => {\n  const reactId = React.useId();\n  const labelId = label != null ? `${reactId}-label` : undefined;\n\n  const root = (\n    <SwitchPrimitive.Root\n      ref={ref}\n      aria-labelledby={labelId}\n      className={cn(trackClasses, className)}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb className={thumbClasses} />\n    </SwitchPrimitive.Root>\n  );\n\n  if (label == null) return root;\n\n  return (\n    <label className=\"inline-flex cursor-pointer items-center gap-[var(--ui-switch-global-container-gap)]\">\n      {root}\n      <span\n        id={labelId}\n        className=\"text-sm leading-6 font-normal text-[var(--ui-switch-global-label-color)]\"\n      >\n        {label}\n      </span>\n    </label>\n  );\n});\nSwitch.displayName = 'Switch';\n\nexport { Switch };\n"],"names":["trackClasses","cn","thumbClasses","Switch","React","className","label","props","ref","reactId","labelId","root","jsx","SwitchPrimitive","jsxs"],"mappings":";;;;AAoBA,MAAMA,IAAeC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEMC,IAAeD;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,GAQME,IAASC,EAAM,WAGnB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,GAAGC,EAAA,GAASC,MAAQ;AACzC,QAAMC,IAAUL,EAAM,MAAA,GAChBM,IAAUJ,KAAS,OAAO,GAAGG,CAAO,WAAW,QAE/CE,IACJ,gBAAAC;AAAA,IAACC,EAAgB;AAAA,IAAhB;AAAA,MACC,KAAAL;AAAA,MACA,mBAAiBE;AAAA,MACjB,WAAWT,EAAGD,GAAcK,CAAS;AAAA,MACpC,GAAGE;AAAA,MAEJ,UAAA,gBAAAK,EAACC,EAAgB,OAAhB,EAAsB,WAAWX,EAAA,CAAc;AAAA,IAAA;AAAA,EAAA;AAIpD,SAAII,KAAS,OAAaK,IAGxB,gBAAAG,EAAC,SAAA,EAAM,WAAU,uFACd,UAAA;AAAA,IAAAH;AAAA,IACD,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAIF;AAAA,QACJ,WAAU;AAAA,QAET,UAAAJ;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAEJ,CAAC;AACDH,EAAO,cAAc;"}

package/dist/components/ui/tag/tag.js

@@ -0,0 +1,47 @@
+import { jsxs as c, jsx as l } from "react/jsx-runtime";
+import * as g from "react";
+import { cva as u } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cn as s } from "../../../lib/utils.js";
+const v = u(
+  "inline-flex min-w-[var(--ui-tag-global-container-width-min)] max-w-[var(--ui-tag-global-container-width-max)] items-center gap-[var(--ui-tag-global-container-gap)] overflow-hidden rounded-[var(--ui-tag-global-container-border-radius)] border-[length:var(--ui-tag-global-container-border-width)] border-solid border-transparent px-[var(--ui-tag-global-container-padding-x)] align-middle text-xs font-semibold leading-4 [&_svg]:size-[var(--ui-tag-global-md-icon-size)] [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        info: "bg-[var(--ui-tag-info-container-color)] border-[var(--ui-tag-info-container-border-color)] text-[var(--ui-tag-info-label-color)] [&_svg]:text-[var(--ui-tag-info-icon-color)]",
+        success: "bg-[var(--ui-tag-success-container-color)] border-[var(--ui-tag-success-container-border-color)] text-[var(--ui-tag-success-label-color)] [&_svg]:text-[var(--ui-tag-success-icon-color)]",
+        warning: "bg-[var(--ui-tag-warning-container-color)] border-[var(--ui-tag-warning-container-border-color)] text-[var(--ui-tag-warning-label-color)] [&_svg]:text-[var(--ui-tag-warning-icon-color)]",
+        critical: "bg-[var(--ui-tag-critical-container-color)] border-[var(--ui-tag-critical-container-border-color)] text-[var(--ui-tag-critical-label-color)] [&_svg]:text-[var(--ui-tag-critical-icon-color)]",
+        danger: "bg-[var(--ui-tag-danger-container-color)] border-[var(--ui-tag-danger-container-border-color)] text-[var(--ui-tag-danger-label-color)] [&_svg]:text-[var(--ui-tag-danger-icon-color)]",
+        neutral: "bg-[var(--ui-tag-neutral-container-color)] border-[var(--ui-tag-neutral-container-border-color)] text-[var(--ui-tag-neutral-label-color)] [&_svg]:text-[var(--ui-tag-neutral-icon-color)]",
+        ai: "text-[var(--ui-tag-ai-label-color)] [&_svg]:text-[var(--ui-tag-ai-icon-color)] [background:linear-gradient(var(--ui-tag-ai-container-color),var(--ui-tag-ai-container-color))_padding-box,var(--ui-tag-ai-container-border-color)_border-box]"
+      },
+      size: {
+        default: "h-[var(--ui-tag-global-md-container-height)]",
+        sm: "h-[var(--ui-tag-global-sm-container-height)]"
+      }
+    },
+    defaultVariants: {
+      variant: "neutral",
+      size: "default"
+    }
+  }
+), d = g.forwardRef(
+  ({ className: a, variant: r, size: o, icon: i, children: t, ...e }, n) => /* @__PURE__ */ c(
+    "span",
+    {
+      ref: n,
+      className: s(v({ variant: r, size: o }), a),
+      ...e,
+      children: [
+        i,
+        /* @__PURE__ */ l("span", { className: "min-w-0 truncate", children: t })
+      ]
+    }
+  )
+);
+d.displayName = "Tag";
+export {
+  d as Tag,
+  v as tagVariants
+};
+//# sourceMappingURL=tag.js.map

package/dist/components/ui/tag/tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.js","sources":["../../../../src/components/ui/tag/tag.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// A compact label for a status, category, or keyword. `variant` wires the\n// container fill, border, label, and icon to the dedicated `--ui-tag-*`\n// component tier from @acronis-platform/tokens-pd (one token per part, per\n// variant). Geometry — radius, border width, gap, padding, max/min width, icon\n// size — comes from `--ui-tag-global-*`; `size` only changes the height (24px\n// `default` / 20px `sm`), padding is uniform. The `ai` variant paints a gradient\n// border (`--ui-tag-ai-container-border-color`) over its solid tinted fill via\n// the padding-box / border-box background-clip trick (the border stays\n// transparent so the border-box gradient shows through). The fill is wrapped in\n// a `linear-gradient(color, color)` so it's a background *image* layer — a plain\n// background-color is only valid in the final layer of the `background`\n// shorthand, and as a non-final layer would invalidate the whole declaration.\nconst tagVariants = cva(\n  'inline-flex min-w-[var(--ui-tag-global-container-width-min)] max-w-[var(--ui-tag-global-container-width-max)] items-center gap-[var(--ui-tag-global-container-gap)] overflow-hidden rounded-[var(--ui-tag-global-container-border-radius)] border-[length:var(--ui-tag-global-container-border-width)] border-solid border-transparent px-[var(--ui-tag-global-container-padding-x)] align-middle text-xs font-semibold leading-4 [&_svg]:size-[var(--ui-tag-global-md-icon-size)] [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        info: 'bg-[var(--ui-tag-info-container-color)] border-[var(--ui-tag-info-container-border-color)] text-[var(--ui-tag-info-label-color)] [&_svg]:text-[var(--ui-tag-info-icon-color)]',\n        success:\n          'bg-[var(--ui-tag-success-container-color)] border-[var(--ui-tag-success-container-border-color)] text-[var(--ui-tag-success-label-color)] [&_svg]:text-[var(--ui-tag-success-icon-color)]',\n        warning:\n          'bg-[var(--ui-tag-warning-container-color)] border-[var(--ui-tag-warning-container-border-color)] text-[var(--ui-tag-warning-label-color)] [&_svg]:text-[var(--ui-tag-warning-icon-color)]',\n        critical:\n          'bg-[var(--ui-tag-critical-container-color)] border-[var(--ui-tag-critical-container-border-color)] text-[var(--ui-tag-critical-label-color)] [&_svg]:text-[var(--ui-tag-critical-icon-color)]',\n        danger:\n          'bg-[var(--ui-tag-danger-container-color)] border-[var(--ui-tag-danger-container-border-color)] text-[var(--ui-tag-danger-label-color)] [&_svg]:text-[var(--ui-tag-danger-icon-color)]',\n        neutral:\n          'bg-[var(--ui-tag-neutral-container-color)] border-[var(--ui-tag-neutral-container-border-color)] text-[var(--ui-tag-neutral-label-color)] [&_svg]:text-[var(--ui-tag-neutral-icon-color)]',\n        ai: 'text-[var(--ui-tag-ai-label-color)] [&_svg]:text-[var(--ui-tag-ai-icon-color)] [background:linear-gradient(var(--ui-tag-ai-container-color),var(--ui-tag-ai-container-color))_padding-box,var(--ui-tag-ai-container-border-color)_border-box]',\n      },\n      size: {\n        default: 'h-[var(--ui-tag-global-md-container-height)]',\n        sm: 'h-[var(--ui-tag-global-sm-container-height)]',\n      },\n    },\n    defaultVariants: {\n      variant: 'neutral',\n      size: 'default',\n    },\n  }\n);\n\nexport interface TagProps\n  extends\n    React.HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof tagVariants> {\n  /** Optional leading icon, rendered at 16px before the label. */\n  icon?: React.ReactNode;\n}\n\nconst Tag = React.forwardRef<HTMLSpanElement, TagProps>(\n  ({ className, variant, size, icon, children, ...props }, ref) => (\n    <span\n      ref={ref}\n      className={cn(tagVariants({ variant, size }), className)}\n      {...props}\n    >\n      {icon}\n      <span className=\"min-w-0 truncate\">{children}</span>\n    </span>\n  )\n);\nTag.displayName = 'Tag';\n\nexport { Tag, tagVariants };\n"],"names":["tagVariants","cva","Tag","React","className","variant","size","icon","children","props","ref","jsxs","cn","jsx"],"mappings":";;;;AAiBA,MAAMA,IAAcC;AAAA,EAClB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,SACE;AAAA,QACF,SACE;AAAA,QACF,UACE;AAAA,QACF,QACE;AAAA,QACF,SACE;AAAA,QACF,IAAI;AAAA,MAAA;AAAA,MAEN,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GAUMC,IAAMC,EAAM;AAAA,EAChB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,MAAAC,GAAM,MAAAC,GAAM,UAAAC,GAAU,GAAGC,KAASC,MACvD,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE,EAAGZ,EAAY,EAAE,SAAAK,GAAS,MAAAC,EAAA,CAAM,GAAGF,CAAS;AAAA,MACtD,GAAGK;AAAA,MAEH,UAAA;AAAA,QAAAF;AAAA,QACD,gBAAAM,EAAC,QAAA,EAAK,WAAU,oBAAoB,UAAAL,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnD;AACAN,EAAI,cAAc;"}

package/dist/components/ui/tooltip/tooltip.js

@@ -0,0 +1,49 @@
+import { jsx as t } from "react/jsx-runtime";
+import * as d from "react";
+import { Tooltip as o } from "@base-ui/react/tooltip";
+import { cn as m } from "../../../lib/utils.js";
+const T = o.Provider, g = o.Root, f = o.Trigger, s = d.forwardRef(
+  ({
+    className: i,
+    sideOffset: r = 6,
+    side: n = "top",
+    align: a = "center",
+    portalContainer: e,
+    keepMounted: p,
+    ...l
+  }, c) => /* @__PURE__ */ t(
+    o.Portal,
+    {
+      container: e,
+      keepMounted: p,
+      children: /* @__PURE__ */ t(
+        o.Positioner,
+        {
+          sideOffset: r,
+          side: n,
+          align: a,
+          className: "z-50",
+          children: /* @__PURE__ */ t(
+            o.Popup,
+            {
+              ref: c,
+              className: m(
+                "max-w-[var(--ui-tooltip-container-width-max)] min-w-[var(--ui-tooltip-container-width-min)] rounded-[var(--ui-tooltip-container-border-radius)] bg-[var(--ui-tooltip-container-color)] px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs font-medium leading-4 text-[var(--ui-tooltip-label-color)]",
+                i
+              ),
+              ...l
+            }
+          )
+        }
+      )
+    }
+  )
+);
+s.displayName = "TooltipContent";
+export {
+  g as Tooltip,
+  s as TooltipContent,
+  T as TooltipProvider,
+  f as TooltipTrigger
+};
+//# sourceMappingURL=tooltip.js.map

package/dist/components/ui/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sources":["../../../../src/components/ui/tooltip/tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\n\nimport { cn } from '@/lib/utils';\n\n// A contextual hint shown on hover/focus of its trigger. Wraps the Base UI\n// Tooltip primitive; the popup is themed with the `--ui-tooltip-*` token tier\n// (a dark, ~90%-opaque bubble with a light label, 12/8px padding, 4px radius,\n// 48–256px width). No arrow — matching the Figma design. Wrap the whole app (or\n// a region) in `TooltipProvider` to share open/close delays across tooltips.\n\nconst TooltipProvider = TooltipPrimitive.Provider;\n\nconst Tooltip = TooltipPrimitive.Root;\n\nconst TooltipTrigger = TooltipPrimitive.Trigger;\n\nconst TooltipContent = React.forwardRef<\n  React.ElementRef<typeof TooltipPrimitive.Popup>,\n  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Popup> & {\n    sideOffset?: number;\n    side?: TooltipPrimitive.Positioner.Props['side'];\n    align?: TooltipPrimitive.Positioner.Props['align'];\n    portalContainer?: TooltipPrimitive.Portal.Props['container'];\n    keepMounted?: TooltipPrimitive.Portal.Props['keepMounted'];\n  }\n>(\n  (\n    {\n      className,\n      sideOffset = 6,\n      side = 'top',\n      align = 'center',\n      portalContainer,\n      keepMounted,\n      ...props\n    },\n    ref\n  ) => (\n    <TooltipPrimitive.Portal\n      container={portalContainer}\n      keepMounted={keepMounted}\n    >\n      <TooltipPrimitive.Positioner\n        sideOffset={sideOffset}\n        side={side}\n        align={align}\n        className=\"z-50\"\n      >\n        <TooltipPrimitive.Popup\n          ref={ref}\n          className={cn(\n            'max-w-[var(--ui-tooltip-container-width-max)] min-w-[var(--ui-tooltip-container-width-min)] rounded-[var(--ui-tooltip-container-border-radius)] bg-[var(--ui-tooltip-container-color)] px-[var(--ui-tooltip-container-padding-x)] py-[var(--ui-tooltip-container-padding-y)] text-xs font-medium leading-4 text-[var(--ui-tooltip-label-color)]',\n            className\n          )}\n          {...props}\n        />\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n);\nTooltipContent.displayName = 'TooltipContent';\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"],"names":["TooltipProvider","TooltipPrimitive","Tooltip","TooltipTrigger","TooltipContent","React","className","sideOffset","side","align","portalContainer","keepMounted","props","ref","jsx","cn"],"mappings":";;;;AAWA,MAAMA,IAAkBC,EAAiB,UAEnCC,IAAUD,EAAiB,MAE3BE,IAAiBF,EAAiB,SAElCG,IAAiBC,EAAM;AAAA,EAU3B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,MAAAC,IAAO;AAAA,IACP,OAAAC,IAAQ;AAAA,IACR,iBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MAEA,gBAAAC;AAAA,IAACb,EAAiB;AAAA,IAAjB;AAAA,MACC,WAAWS;AAAA,MACX,aAAAC;AAAA,MAEA,UAAA,gBAAAG;AAAA,QAACb,EAAiB;AAAA,QAAjB;AAAA,UACC,YAAAM;AAAA,UACA,MAAAC;AAAA,UACA,OAAAC;AAAA,UACA,WAAU;AAAA,UAEV,UAAA,gBAAAK;AAAA,YAACb,EAAiB;AAAA,YAAjB;AAAA,cACC,KAAAY;AAAA,cACA,WAAWE;AAAA,gBACT;AAAA,gBACAT;AAAA,cAAA;AAAA,cAED,GAAGM;AAAA,YAAA;AAAA,UAAA;AAAA,QACN;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;AACAR,EAAe,cAAc;"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './src/index'
+export {}