@d4gger/design-system 3.0.0 → 4.0.0

package/dist/components/toggle-tip.css

@@ -9,8 +9,8 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--dsx-size-sm);
-  height: var(--dsx-size-sm);
+  width: var(--dsx-size-lg);
+  height: var(--dsx-size-lg);
   padding: 0;
   border: none;
   border-radius: var(--dsx-rounded-full);
@@ -22,21 +22,34 @@
 }
 
 .dsx-toggle-tip__trigger:hover {
-  background: var(--dsx-effect-hover-layer);
-  color: var(--dsx-color-primary);
+  background: var(--dsx-color-accent-surface);
+  color: var(--dsx-color-accent-indicator);
 }
 
-.dsx-toggle-tip[data-size='sm'] .dsx-toggle-tip__trigger {
-  width: var(--dsx-size-xs);
-  height: var(--dsx-size-xs);
+.dsx-toggle-tip__trigger:active,
+.dsx-toggle-tip__trigger[data-state='open'] {
+  background: var(--dsx-color-accent-surface);
+  color: var(--dsx-color-accent-indicator);
 }
 
-.dsx-toggle-tip[data-size='lg'] .dsx-toggle-tip__trigger {
+.dsx-toggle-tip__trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--dsx-shadow-focus-ring);
+}
+
+.dsx-toggle-tip[data-size='sm'] .dsx-toggle-tip__trigger {
   width: var(--dsx-size-md);
   height: var(--dsx-size-md);
 }
 
+.dsx-toggle-tip[data-size='lg'] .dsx-toggle-tip__trigger {
+  width: var(--dsx-size-xl);
+  height: var(--dsx-size-xl);
+}
+
 .dsx-toggle-tip__content {
+  box-sizing: border-box;
+  z-index: calc(var(--dsx-z-index-modal) + 1);
   padding: var(--dsx-space-sm) var(--dsx-space-md);
   border-radius: var(--dsx-rounded-md);
   background: var(--dsx-color-panel-translucent);
@@ -50,7 +63,43 @@
   letter-spacing: var(--dsx-typography-body-small-letter-spacing);
   box-shadow: var(--dsx-shadow-elevation-3);
   animation: dsx-toggle-tip-fade var(--dsx-motion-duration-fast) var(--dsx-motion-easing-out);
-  max-width: 280px;
+  max-width: min(var(--dsx-size-popover-max-width), var(--radix-popover-content-available-width));
+  overflow: visible;
+  overflow-wrap: anywhere;
+}
+
+.dsx-toggle-tip__content > :where(div) {
+  max-height: calc(var(--radix-popover-content-available-height) - var(--dsx-space-md) - var(--dsx-border-width-md));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.dsx-toggle-tip__content > :where(div):focus-visible {
+  outline: var(--dsx-border-width-sm) solid var(--dsx-color-accent-indicator);
+  outline-offset: calc(-1 * var(--dsx-border-width-sm));
+}
+
+.dsx-toggle-tip__content[data-size='sm'] {
+  padding: var(--dsx-space-xs) var(--dsx-space-sm);
+}
+
+.dsx-toggle-tip__content[data-size='lg'] {
+  padding: var(--dsx-space-md) var(--dsx-space-lg);
+  font-size: var(--dsx-typography-body-medium-font-size);
+  line-height: var(--dsx-typography-body-medium-line-height);
+}
+
+.dsx-toggle-tip__content[data-size='sm'] > :where(div) {
+  max-height: calc(var(--radix-popover-content-available-height) - var(--dsx-space-sm) - var(--dsx-border-width-md));
+}
+
+.dsx-toggle-tip__content[data-size='lg'] > :where(div) {
+  max-height: calc(var(--radix-popover-content-available-height) - var(--dsx-space-xl) - var(--dsx-border-width-md));
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dsx-toggle-tip__content { animation: none; }
+  .dsx-toggle-tip__trigger { transition: none; }
 }
 
 .dsx-toggle-tip__arrow {

package/dist/components/toggleTip/ToggleTip.cjs

@@ -37,6 +37,7 @@ var import_classnames = __toESM(require("classnames"), 1);
 var import_react_slot = require("@radix-ui/react-slot");
 var Popover = __toESM(require("@radix-ui/react-popover"), 1);
 var import_lucide_react = require("lucide-react");
+var import_BaseDialog = require("../../_internal/BaseDialog");
 var import_extractProps = require("../../_internal/helpers/extractProps");
 var import_toggleTip = require("./toggleTip.props");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -62,22 +63,25 @@ const ToggleTip = React.forwardRef((props, forwardedRef) => {
       className: (0, import_classnames.default)("dsx-toggle-tip", className),
       "data-size": size,
       "data-slot": "toggle-tip",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Popover.Root, { open, onOpenChange: setOpen, children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BaseDialog.PortalThemeBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Popover.Root, { open, onOpenChange: setOpen, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Popover.Trigger, { className: "dsx-toggle-tip__trigger", "aria-label": triggerLabel, "data-slot": "toggle-tip-trigger", children: children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Info, { size: TOGGLE_TIP_ICON_SIZES[size] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_BaseDialog.PortalThemeWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           Popover.Content,
           {
             className: (0, import_classnames.default)("dsx-toggle-tip__content", `dsx-toggle-tip--side-${side}`),
             side,
             sideOffset: 8,
+            collisionPadding: 16,
+            "aria-label": triggerLabel,
             "data-slot": "toggle-tip-content",
+            "data-size": size,
             children: [
-              content,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { tabIndex: 0, role: "region", "aria-label": triggerLabel, children: content }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Popover.Arrow, { className: "dsx-toggle-tip__arrow" })
             ]
           }
-        ) })
-      ] })
+        ) }) })
+      ] }) })
     }
   );
 });

package/dist/components/toggleTip/ToggleTip.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/toggleTip/ToggleTip.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport * as Popover from '@radix-ui/react-popover'\nimport { Info } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { toggleTipPropDefs } from './toggleTip.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype ToggleTipOwnProps = GetPropDefTypes<typeof toggleTipPropDefs> & {\n  content: React.ReactNode\n  triggerLabel?: string\n}\n\ninterface ToggleTipProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'content'>, ToggleTipOwnProps {}\n\nconst TOGGLE_TIP_ICON_SIZES = { sm: 12, md: 16, lg: 20 } as const\n\nconst ToggleTip = React.forwardRef<HTMLDivElement, ToggleTipProps>((props, forwardedRef) => {\n  const side = (props as { side?: 'top' | 'right' | 'bottom' | 'left' }).side ?? 'top'\n  const {\n    asChild,\n    children,\n    className,\n    content,\n    size = 'md',\n    triggerLabel = 'Show information',\n    ...restProps\n  } = extractProps(props, toggleTipPropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Comp\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-toggle-tip', className)}\n      data-size={size}\n      data-slot=\"toggle-tip\"\n    >\n      <Popover.Root open={open} onOpenChange={setOpen}>\n        <Popover.Trigger className=\"dsx-toggle-tip__trigger\" aria-label={triggerLabel} data-slot=\"toggle-tip-trigger\">\n          {children ?? <Info size={TOGGLE_TIP_ICON_SIZES[size]} />}\n        </Popover.Trigger>\n        <Popover.Portal>\n          <Popover.Content\n            className={classNames('dsx-toggle-tip__content', `dsx-toggle-tip--side-${side}`)}\n            side={side}\n            sideOffset={8}\n            data-slot=\"toggle-tip-content\"\n          >\n            {content}\n            <Popover.Arrow className=\"dsx-toggle-tip__arrow\" />\n          </Popover.Content>\n        </Popover.Portal>\n      </Popover.Root>\n    </Comp>\n  )\n})\nToggleTip.displayName = 'ToggleTip'\n\nexport { ToggleTip }\nexport type { ToggleTipOwnProps, ToggleTipProps }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,wBAAuB;AACvB,wBAAqB;AACrB,cAAyB;AACzB,0BAAqB;AAErB,0BAA6B;AAC7B,uBAAkC;AAqCX;AA1BvB,MAAM,wBAAwB,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG;AAEvD,MAAM,YAAY,MAAM,WAA2C,CAAC,OAAO,iBAAiB;AAC1F,QAAM,OAAQ,MAAyD,QAAQ;AAC/E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,QAAI,kCAAa,OAAO,kCAAiB;AACzC,QAAM,OAAO,UAAU,yBAAO;AAC9B,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAW,kBAAAA,SAAW,kBAAkB,SAAS;AAAA,MACjD,aAAW;AAAA,MACX,aAAU;AAAA,MAEV,uDAAC,QAAQ,MAAR,EAAa,MAAY,cAAc,SACtC;AAAA,oDAAC,QAAQ,SAAR,EAAgB,WAAU,2BAA0B,cAAY,cAAc,aAAU,sBACtF,sBAAY,4CAAC,4BAAK,MAAM,sBAAsB,IAAI,GAAG,GACxD;AAAA,QACA,4CAAC,QAAQ,QAAR,EACC;AAAA,UAAC,QAAQ;AAAA,UAAR;AAAA,YACC,eAAW,kBAAAA,SAAW,2BAA2B,wBAAwB,IAAI,EAAE;AAAA,YAC/E;AAAA,YACA,YAAY;AAAA,YACZ,aAAU;AAAA,YAET;AAAA;AAAA,cACD,4CAAC,QAAQ,OAAR,EAAc,WAAU,yBAAwB;AAAA;AAAA;AAAA,QACnD,GACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ,CAAC;AACD,UAAU,cAAc;",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport * as Popover from '@radix-ui/react-popover'\nimport { Info } from 'lucide-react'\n\nimport { PortalThemeBoundary, PortalThemeWrapper } from '../../_internal/BaseDialog'\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { toggleTipPropDefs } from './toggleTip.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype ToggleTipOwnProps = GetPropDefTypes<typeof toggleTipPropDefs> & {\n  content: React.ReactNode\n  triggerLabel?: string\n}\n\ninterface ToggleTipProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'content'>, ToggleTipOwnProps {}\n\nconst TOGGLE_TIP_ICON_SIZES = { sm: 12, md: 16, lg: 20 } as const\n\nconst ToggleTip = React.forwardRef<HTMLDivElement, ToggleTipProps>((props, forwardedRef) => {\n  const side = (props as { side?: 'top' | 'right' | 'bottom' | 'left' }).side ?? 'top'\n  const {\n    asChild,\n    children,\n    className,\n    content,\n    size = 'md',\n    triggerLabel = 'Show information',\n    ...restProps\n  } = extractProps(props, toggleTipPropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Comp\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-toggle-tip', className)}\n      data-size={size}\n      data-slot=\"toggle-tip\"\n    >\n      <PortalThemeBoundary>\n        <Popover.Root open={open} onOpenChange={setOpen}>\n          <Popover.Trigger className=\"dsx-toggle-tip__trigger\" aria-label={triggerLabel} data-slot=\"toggle-tip-trigger\">\n            {children ?? <Info size={TOGGLE_TIP_ICON_SIZES[size]} />}\n          </Popover.Trigger>\n          <Popover.Portal>\n            <PortalThemeWrapper>\n              <Popover.Content\n                className={classNames('dsx-toggle-tip__content', `dsx-toggle-tip--side-${side}`)}\n                side={side}\n                sideOffset={8}\n                collisionPadding={16}\n                aria-label={triggerLabel}\n                data-slot=\"toggle-tip-content\"\n                data-size={size}\n              >\n                <div tabIndex={0} role=\"region\" aria-label={triggerLabel}>{content}</div>\n                <Popover.Arrow className=\"dsx-toggle-tip__arrow\" />\n              </Popover.Content>\n            </PortalThemeWrapper>\n          </Popover.Portal>\n        </Popover.Root>\n      </PortalThemeBoundary>\n    </Comp>\n  )\n})\nToggleTip.displayName = 'ToggleTip'\n\nexport { ToggleTip }\nexport type { ToggleTipOwnProps, ToggleTipProps }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,wBAAuB;AACvB,wBAAqB;AACrB,cAAyB;AACzB,0BAAqB;AAErB,wBAAwD;AACxD,0BAA6B;AAC7B,uBAAkC;AAsCT;AA3BzB,MAAM,wBAAwB,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG;AAEvD,MAAM,YAAY,MAAM,WAA2C,CAAC,OAAO,iBAAiB;AAC1F,QAAM,OAAQ,MAAyD,QAAQ;AAC/E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,QAAI,kCAAa,OAAO,kCAAiB;AACzC,QAAM,OAAO,UAAU,yBAAO;AAC9B,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAW,kBAAAA,SAAW,kBAAkB,SAAS;AAAA,MACjD,aAAW;AAAA,MACX,aAAU;AAAA,MAEV,sDAAC,yCACC,uDAAC,QAAQ,MAAR,EAAa,MAAY,cAAc,SACtC;AAAA,oDAAC,QAAQ,SAAR,EAAgB,WAAU,2BAA0B,cAAY,cAAc,aAAU,sBACtF,sBAAY,4CAAC,4BAAK,MAAM,sBAAsB,IAAI,GAAG,GACxD;AAAA,QACA,4CAAC,QAAQ,QAAR,EACC,sDAAC,wCACC;AAAA,UAAC,QAAQ;AAAA,UAAR;AAAA,YACC,eAAW,kBAAAA,SAAW,2BAA2B,wBAAwB,IAAI,EAAE;AAAA,YAC/E;AAAA,YACA,YAAY;AAAA,YACZ,kBAAkB;AAAA,YAClB,cAAY;AAAA,YACZ,aAAU;AAAA,YACV,aAAW;AAAA,YAEX;AAAA,0DAAC,SAAI,UAAU,GAAG,MAAK,UAAS,cAAY,cAAe,mBAAQ;AAAA,cACnE,4CAAC,QAAQ,OAAR,EAAc,WAAU,yBAAwB;AAAA;AAAA;AAAA,QACnD,GACF,GACF;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AACD,UAAU,cAAc;",
   "names": ["classNames"]
 }

package/dist/components/toggleTip/ToggleTip.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleTip.d.cts","sourceRoot":"","sources":["../../../src/components/toggleTip/ToggleTip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,iBAAiB,GAAG,eAAe,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACnE,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,UAAU,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,EAAE,iBAAiB;CAAG;AAI7G,QAAA,MAAM,SAAS,uFAwCb,CAAA;AAGF,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"ToggleTip.d.cts","sourceRoot":"","sources":["../../../src/components/toggleTip/ToggleTip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,iBAAiB,GAAG,eAAe,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACnE,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,UAAU,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,EAAE,iBAAiB;CAAG;AAI7G,QAAA,MAAM,SAAS,uFA+Cb,CAAA;AAGF,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/toggleTip/ToggleTip.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleTip.d.mts","sourceRoot":"","sources":["../../../src/components/toggleTip/ToggleTip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,iBAAiB,GAAG,eAAe,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACnE,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,UAAU,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,EAAE,iBAAiB;CAAG;AAI7G,QAAA,MAAM,SAAS,uFAwCb,CAAA;AAGF,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"ToggleTip.d.mts","sourceRoot":"","sources":["../../../src/components/toggleTip/ToggleTip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,iBAAiB,GAAG,eAAe,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACnE,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,UAAU,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,EAAE,iBAAiB;CAAG;AAI7G,QAAA,MAAM,SAAS,uFA+Cb,CAAA;AAGF,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/toggleTip/ToggleTip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleTip.d.ts","sourceRoot":"","sources":["../../../src/components/toggleTip/ToggleTip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,iBAAiB,GAAG,eAAe,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACnE,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,UAAU,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,EAAE,iBAAiB;CAAG;AAI7G,QAAA,MAAM,SAAS,uFAwCb,CAAA;AAGF,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"ToggleTip.d.ts","sourceRoot":"","sources":["../../../src/components/toggleTip/ToggleTip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAA;AAErD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,iBAAiB,GAAG,eAAe,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACnE,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,UAAU,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,EAAE,iBAAiB;CAAG;AAI7G,QAAA,MAAM,SAAS,uFA+Cb,CAAA;AAGF,OAAO,EAAE,SAAS,EAAE,CAAA;AACpB,YAAY,EAAE,iBAAiB,EAAE,cAAc,EAAE,CAAA"}

package/dist/components/toggleTip/ToggleTip.js

@@ -4,6 +4,7 @@ import classNames from "classnames";
 import { Slot } from "@radix-ui/react-slot";
 import * as Popover from "@radix-ui/react-popover";
 import { Info } from "lucide-react";
+import { PortalThemeBoundary, PortalThemeWrapper } from "../../_internal/BaseDialog.js";
 import { extractProps } from "../../_internal/helpers/extractProps.js";
 import { toggleTipPropDefs } from "./toggleTip.props.js";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -29,22 +30,25 @@ const ToggleTip = React.forwardRef((props, forwardedRef) => {
       className: classNames("dsx-toggle-tip", className),
       "data-size": size,
       "data-slot": "toggle-tip",
-      children: /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
+      children: /* @__PURE__ */ jsx(PortalThemeBoundary, { children: /* @__PURE__ */ jsxs(Popover.Root, { open, onOpenChange: setOpen, children: [
         /* @__PURE__ */ jsx(Popover.Trigger, { className: "dsx-toggle-tip__trigger", "aria-label": triggerLabel, "data-slot": "toggle-tip-trigger", children: children ?? /* @__PURE__ */ jsx(Info, { size: TOGGLE_TIP_ICON_SIZES[size] }) }),
-        /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(PortalThemeWrapper, { children: /* @__PURE__ */ jsxs(
           Popover.Content,
           {
             className: classNames("dsx-toggle-tip__content", `dsx-toggle-tip--side-${side}`),
             side,
             sideOffset: 8,
+            collisionPadding: 16,
+            "aria-label": triggerLabel,
             "data-slot": "toggle-tip-content",
+            "data-size": size,
             children: [
-              content,
+              /* @__PURE__ */ jsx("div", { tabIndex: 0, role: "region", "aria-label": triggerLabel, children: content }),
               /* @__PURE__ */ jsx(Popover.Arrow, { className: "dsx-toggle-tip__arrow" })
             ]
           }
-        ) })
-      ] })
+        ) }) })
+      ] }) })
     }
   );
 });

package/dist/components/toggleTip/ToggleTip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/toggleTip/ToggleTip.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport * as Popover from '@radix-ui/react-popover'\nimport { Info } from 'lucide-react'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { toggleTipPropDefs } from './toggleTip.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype ToggleTipOwnProps = GetPropDefTypes<typeof toggleTipPropDefs> & {\n  content: React.ReactNode\n  triggerLabel?: string\n}\n\ninterface ToggleTipProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'content'>, ToggleTipOwnProps {}\n\nconst TOGGLE_TIP_ICON_SIZES = { sm: 12, md: 16, lg: 20 } as const\n\nconst ToggleTip = React.forwardRef<HTMLDivElement, ToggleTipProps>((props, forwardedRef) => {\n  const side = (props as { side?: 'top' | 'right' | 'bottom' | 'left' }).side ?? 'top'\n  const {\n    asChild,\n    children,\n    className,\n    content,\n    size = 'md',\n    triggerLabel = 'Show information',\n    ...restProps\n  } = extractProps(props, toggleTipPropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Comp\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-toggle-tip', className)}\n      data-size={size}\n      data-slot=\"toggle-tip\"\n    >\n      <Popover.Root open={open} onOpenChange={setOpen}>\n        <Popover.Trigger className=\"dsx-toggle-tip__trigger\" aria-label={triggerLabel} data-slot=\"toggle-tip-trigger\">\n          {children ?? <Info size={TOGGLE_TIP_ICON_SIZES[size]} />}\n        </Popover.Trigger>\n        <Popover.Portal>\n          <Popover.Content\n            className={classNames('dsx-toggle-tip__content', `dsx-toggle-tip--side-${side}`)}\n            side={side}\n            sideOffset={8}\n            data-slot=\"toggle-tip-content\"\n          >\n            {content}\n            <Popover.Arrow className=\"dsx-toggle-tip__arrow\" />\n          </Popover.Content>\n        </Popover.Portal>\n      </Popover.Root>\n    </Comp>\n  )\n})\nToggleTip.displayName = 'ToggleTip'\n\nexport { ToggleTip }\nexport type { ToggleTipOwnProps, ToggleTipProps }\n"],
-  "mappings": ";AAEA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,SAAS,YAAY;AACrB,YAAY,aAAa;AACzB,SAAS,YAAY;AAErB,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAqCX,cAGb,YAHa;AA1BvB,MAAM,wBAAwB,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG;AAEvD,MAAM,YAAY,MAAM,WAA2C,CAAC,OAAO,iBAAiB;AAC1F,QAAM,OAAQ,MAAyD,QAAQ;AAC/E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI,aAAa,OAAO,iBAAiB;AACzC,QAAM,OAAO,UAAU,OAAO;AAC9B,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,WAAW,kBAAkB,SAAS;AAAA,MACjD,aAAW;AAAA,MACX,aAAU;AAAA,MAEV,+BAAC,QAAQ,MAAR,EAAa,MAAY,cAAc,SACtC;AAAA,4BAAC,QAAQ,SAAR,EAAgB,WAAU,2BAA0B,cAAY,cAAc,aAAU,sBACtF,sBAAY,oBAAC,QAAK,MAAM,sBAAsB,IAAI,GAAG,GACxD;AAAA,QACA,oBAAC,QAAQ,QAAR,EACC;AAAA,UAAC,QAAQ;AAAA,UAAR;AAAA,YACC,WAAW,WAAW,2BAA2B,wBAAwB,IAAI,EAAE;AAAA,YAC/E;AAAA,YACA,YAAY;AAAA,YACZ,aAAU;AAAA,YAET;AAAA;AAAA,cACD,oBAAC,QAAQ,OAAR,EAAc,WAAU,yBAAwB;AAAA;AAAA;AAAA,QACnD,GACF;AAAA,SACF;AAAA;AAAA,EACF;AAEJ,CAAC;AACD,UAAU,cAAc;",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\nimport * as Popover from '@radix-ui/react-popover'\nimport { Info } from 'lucide-react'\n\nimport { PortalThemeBoundary, PortalThemeWrapper } from '../../_internal/BaseDialog'\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { toggleTipPropDefs } from './toggleTip.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype ToggleTipOwnProps = GetPropDefTypes<typeof toggleTipPropDefs> & {\n  content: React.ReactNode\n  triggerLabel?: string\n}\n\ninterface ToggleTipProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'content'>, ToggleTipOwnProps {}\n\nconst TOGGLE_TIP_ICON_SIZES = { sm: 12, md: 16, lg: 20 } as const\n\nconst ToggleTip = React.forwardRef<HTMLDivElement, ToggleTipProps>((props, forwardedRef) => {\n  const side = (props as { side?: 'top' | 'right' | 'bottom' | 'left' }).side ?? 'top'\n  const {\n    asChild,\n    children,\n    className,\n    content,\n    size = 'md',\n    triggerLabel = 'Show information',\n    ...restProps\n  } = extractProps(props, toggleTipPropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Comp\n      {...restProps}\n      ref={forwardedRef}\n      className={classNames('dsx-toggle-tip', className)}\n      data-size={size}\n      data-slot=\"toggle-tip\"\n    >\n      <PortalThemeBoundary>\n        <Popover.Root open={open} onOpenChange={setOpen}>\n          <Popover.Trigger className=\"dsx-toggle-tip__trigger\" aria-label={triggerLabel} data-slot=\"toggle-tip-trigger\">\n            {children ?? <Info size={TOGGLE_TIP_ICON_SIZES[size]} />}\n          </Popover.Trigger>\n          <Popover.Portal>\n            <PortalThemeWrapper>\n              <Popover.Content\n                className={classNames('dsx-toggle-tip__content', `dsx-toggle-tip--side-${side}`)}\n                side={side}\n                sideOffset={8}\n                collisionPadding={16}\n                aria-label={triggerLabel}\n                data-slot=\"toggle-tip-content\"\n                data-size={size}\n              >\n                <div tabIndex={0} role=\"region\" aria-label={triggerLabel}>{content}</div>\n                <Popover.Arrow className=\"dsx-toggle-tip__arrow\" />\n              </Popover.Content>\n            </PortalThemeWrapper>\n          </Popover.Portal>\n        </Popover.Root>\n      </PortalThemeBoundary>\n    </Comp>\n  )\n})\nToggleTip.displayName = 'ToggleTip'\n\nexport { ToggleTip }\nexport type { ToggleTipOwnProps, ToggleTipProps }\n"],
+  "mappings": ";AAEA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,SAAS,YAAY;AACrB,YAAY,aAAa;AACzB,SAAS,YAAY;AAErB,SAAS,qBAAqB,0BAA0B;AACxD,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAsCT,cAIX,YAJW;AA3BzB,MAAM,wBAAwB,EAAE,IAAI,IAAI,IAAI,IAAI,IAAI,GAAG;AAEvD,MAAM,YAAY,MAAM,WAA2C,CAAC,OAAO,iBAAiB;AAC1F,QAAM,OAAQ,MAAyD,QAAQ;AAC/E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAAI,aAAa,OAAO,iBAAiB;AACzC,QAAM,OAAO,UAAU,OAAO;AAC9B,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAE5C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,WAAW,kBAAkB,SAAS;AAAA,MACjD,aAAW;AAAA,MACX,aAAU;AAAA,MAEV,8BAAC,uBACC,+BAAC,QAAQ,MAAR,EAAa,MAAY,cAAc,SACtC;AAAA,4BAAC,QAAQ,SAAR,EAAgB,WAAU,2BAA0B,cAAY,cAAc,aAAU,sBACtF,sBAAY,oBAAC,QAAK,MAAM,sBAAsB,IAAI,GAAG,GACxD;AAAA,QACA,oBAAC,QAAQ,QAAR,EACC,8BAAC,sBACC;AAAA,UAAC,QAAQ;AAAA,UAAR;AAAA,YACC,WAAW,WAAW,2BAA2B,wBAAwB,IAAI,EAAE;AAAA,YAC/E;AAAA,YACA,YAAY;AAAA,YACZ,kBAAkB;AAAA,YAClB,cAAY;AAAA,YACZ,aAAU;AAAA,YACV,aAAW;AAAA,YAEX;AAAA,kCAAC,SAAI,UAAU,GAAG,MAAK,UAAS,cAAY,cAAe,mBAAQ;AAAA,cACnE,oBAAC,QAAQ,OAAR,EAAc,WAAU,yBAAwB;AAAA;AAAA;AAAA,QACnD,GACF,GACF;AAAA,SACF,GACF;AAAA;AAAA,EACF;AAEJ,CAAC;AACD,UAAU,cAAc;",
   "names": []
 }

package/dist/components/toolbar/Toolbar.cjs

@@ -45,7 +45,7 @@ var import_toolbar = require("./toolbar.props");
 var import_jsx_runtime = require("react/jsx-runtime");
 const ToolbarRoot = React.forwardRef(
   ({ className: propClassName, ...props }, forwardedRef) => {
-    const { asChild: _asChild, className, size = "md", ...toolbarProps } = (0, import_extractProps.extractProps)(
+    const { asChild, className, size = "md", ...toolbarProps } = (0, import_extractProps.extractProps)(
       {
         ...props,
         className: propClassName
@@ -56,6 +56,7 @@ const ToolbarRoot = React.forwardRef(
       ToolbarPrimitive.Root,
       {
         ...toolbarProps,
+        asChild,
         ref: forwardedRef,
         className: (0, import_classnames.default)("dsx-toolbar", className),
         "data-size": size
@@ -66,18 +67,19 @@ const ToolbarRoot = React.forwardRef(
 ToolbarRoot.displayName = "Toolbar";
 const ToolbarButton = React.forwardRef(
   (props, forwardedRef) => {
-    const { asChild: _asChild, className, ...buttonProps } = (0, import_extractProps.extractProps)(props, import_toolbar.toolbarButtonPropDefs);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarPrimitive.Button, { ...buttonProps, ref: forwardedRef, className: (0, import_classnames.default)("dsx-toolbar__button", className) });
+    const { asChild, className, ...buttonProps } = (0, import_extractProps.extractProps)(props, import_toolbar.toolbarButtonPropDefs);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarPrimitive.Button, { ...buttonProps, asChild, ref: forwardedRef, className: (0, import_classnames.default)("dsx-toolbar__button", className) });
   }
 );
 ToolbarButton.displayName = "ToolbarButton";
 const ToolbarToggleButton = React.forwardRef(
   (props, forwardedRef) => {
-    const { asChild: _asChild, className, ...toggleButtonProps } = (0, import_extractProps.extractProps)(props, import_toolbar.toolbarToggleButtonPropDefs);
+    const { asChild, className, ...toggleButtonProps } = (0, import_extractProps.extractProps)(props, import_toolbar.toolbarToggleButtonPropDefs);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       ToolbarPrimitive.ToggleItem,
       {
         ...toggleButtonProps,
+        asChild,
         ref: forwardedRef,
         className: (0, import_classnames.default)("dsx-toolbar__toggle-button", className)
       }
@@ -116,17 +118,18 @@ const ToolbarToggleGroup = React.forwardRef(
 );
 ToolbarToggleGroup.displayName = "ToolbarToggleGroup";
 const ToolbarLink = React.forwardRef((props, forwardedRef) => {
-  const { asChild: _asChild, className, ...linkProps } = (0, import_extractProps.extractProps)(props, import_toolbar.toolbarLinkPropDefs);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarPrimitive.Link, { ...linkProps, ref: forwardedRef, className: (0, import_classnames.default)("dsx-toolbar__link", className) });
+  const { asChild, className, ...linkProps } = (0, import_extractProps.extractProps)(props, import_toolbar.toolbarLinkPropDefs);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarPrimitive.Link, { ...linkProps, asChild, ref: forwardedRef, className: (0, import_classnames.default)("dsx-toolbar__link", className) });
 });
 ToolbarLink.displayName = "ToolbarLink";
 const ToolbarSeparator = React.forwardRef(
   (props, forwardedRef) => {
-    const { asChild: _asChild, className, ...separatorProps } = (0, import_extractProps.extractProps)(props, import_toolbar.toolbarSeparatorPropDefs);
+    const { asChild, className, ...separatorProps } = (0, import_extractProps.extractProps)(props, import_toolbar.toolbarSeparatorPropDefs);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       ToolbarPrimitive.Separator,
       {
         ...separatorProps,
+        asChild,
         ref: forwardedRef,
         className: (0, import_classnames.default)("dsx-toolbar__separator", className)
       }

package/dist/components/toolbar/Toolbar.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/toolbar/Toolbar.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport {\n  toolbarButtonPropDefs,\n  toolbarLinkPropDefs,\n  toolbarPropDefs,\n  toolbarSeparatorPropDefs,\n  toolbarToggleButtonPropDefs,\n  toolbarToggleGroupPropDefs,\n} from './toolbar.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype ToolbarOwnProps = GetPropDefTypes<typeof toolbarPropDefs>\ntype ToolbarButtonOwnProps = GetPropDefTypes<typeof toolbarButtonPropDefs>\ntype ToolbarToggleButtonOwnProps = GetPropDefTypes<typeof toolbarToggleButtonPropDefs>\ntype ToolbarToggleGroupOwnProps = GetPropDefTypes<typeof toolbarToggleGroupPropDefs>\ntype ToolbarLinkOwnProps = GetPropDefTypes<typeof toolbarLinkPropDefs>\ntype ToolbarSeparatorOwnProps = GetPropDefTypes<typeof toolbarSeparatorPropDefs>\n\ntype ToolbarSize = NonNullable<ToolbarOwnProps['size']>\n\ntype ToolbarProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Root> & ToolbarOwnProps\ntype ToolbarButtonProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Button> & ToolbarButtonOwnProps\ntype ToolbarToggleButtonProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.ToggleItem> & ToolbarToggleButtonOwnProps\ntype ToolbarToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.ToggleGroup> & ToolbarToggleGroupOwnProps\ntype ToolbarLinkProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Link> & ToolbarLinkOwnProps\ntype ToolbarSeparatorProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Separator> & ToolbarSeparatorOwnProps\n\nconst ToolbarRoot = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.Root>, ToolbarProps>(\n  ({ className: propClassName, ...props }, forwardedRef) => {\n    const { asChild: _asChild, className, size = 'md', ...toolbarProps } = extractProps(\n      {\n        ...props,\n        className: propClassName,\n      },\n      toolbarPropDefs,\n    )\n\n    return (\n      <ToolbarPrimitive.Root\n        {...toolbarProps}\n        ref={forwardedRef}\n        className={classNames('dsx-toolbar', className)}\n        data-size={size as ToolbarSize}\n      />\n    )\n  },\n)\nToolbarRoot.displayName = 'Toolbar'\n\nconst ToolbarButton = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.Button>, ToolbarButtonProps>(\n  (props, forwardedRef) => {\n    const { asChild: _asChild, className, ...buttonProps } = extractProps(props, toolbarButtonPropDefs)\n\n    return <ToolbarPrimitive.Button {...buttonProps} ref={forwardedRef} className={classNames('dsx-toolbar__button', className)} />\n  },\n)\nToolbarButton.displayName = 'ToolbarButton'\n\nconst ToolbarToggleButton = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.ToggleItem>, ToolbarToggleButtonProps>(\n  (props, forwardedRef) => {\n    const { asChild: _asChild, className, ...toggleButtonProps } = extractProps(props, toolbarToggleButtonPropDefs)\n\n    return (\n      <ToolbarPrimitive.ToggleItem\n        {...toggleButtonProps}\n        ref={forwardedRef}\n        className={classNames('dsx-toolbar__toggle-button', className)}\n      />\n    )\n  },\n)\nToolbarToggleButton.displayName = 'ToolbarToggleButton'\n\nconst ToolbarToggleGroup = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.ToggleGroup>, ToolbarToggleGroupProps>(\n  (props, forwardedRef) => {\n    const { className: propClassName, ...toggleGroupProps } = props\n    const { className } = extractProps(\n      {\n        className: propClassName,\n      },\n      toolbarToggleGroupPropDefs,\n    )\n\n    if (toggleGroupProps.type === 'single') {\n      return (\n        <ToolbarPrimitive.ToggleGroup\n          {...toggleGroupProps}\n          ref={forwardedRef}\n          className={classNames('dsx-toolbar__toggle-group', className)}\n        />\n      )\n    }\n\n    return (\n      <ToolbarPrimitive.ToggleGroup\n        {...toggleGroupProps}\n        ref={forwardedRef}\n        className={classNames('dsx-toolbar__toggle-group', className)}\n      />\n    )\n  },\n)\nToolbarToggleGroup.displayName = 'ToolbarToggleGroup'\n\nconst ToolbarLink = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.Link>, ToolbarLinkProps>((props, forwardedRef) => {\n  const { asChild: _asChild, className, ...linkProps } = extractProps(props, toolbarLinkPropDefs)\n\n  return <ToolbarPrimitive.Link {...linkProps} ref={forwardedRef} className={classNames('dsx-toolbar__link', className)} />\n})\nToolbarLink.displayName = 'ToolbarLink'\n\nconst ToolbarSeparator = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.Separator>, ToolbarSeparatorProps>(\n  (props, forwardedRef) => {\n    const { asChild: _asChild, className, ...separatorProps } = extractProps(props, toolbarSeparatorPropDefs)\n\n    return (\n      <ToolbarPrimitive.Separator\n        {...separatorProps}\n        ref={forwardedRef}\n        className={classNames('dsx-toolbar__separator', className)}\n      />\n    )\n  },\n)\nToolbarSeparator.displayName = 'ToolbarSeparator'\n\nconst Toolbar: typeof ToolbarRoot & {\n  Button: typeof ToolbarButton\n  ToggleButton: typeof ToolbarToggleButton\n  ToggleGroup: typeof ToolbarToggleGroup\n  Link: typeof ToolbarLink\n  Separator: typeof ToolbarSeparator\n} = Object.assign(ToolbarRoot, {\n  Button: ToolbarButton,\n  ToggleButton: ToolbarToggleButton,\n  ToggleGroup: ToolbarToggleGroup,\n  Link: ToolbarLink,\n  Separator: ToolbarSeparator,\n})\n\nexport { Toolbar, ToolbarButton, ToolbarLink, ToolbarRoot, ToolbarSeparator, ToolbarToggleButton, ToolbarToggleGroup }\nexport type {\n  ToolbarButtonProps,\n  ToolbarLinkProps,\n  ToolbarProps,\n  ToolbarSeparatorProps,\n  ToolbarToggleButtonProps,\n  ToolbarToggleGroupProps,\n  ToolbarSize,\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport {\n  toolbarButtonPropDefs,\n  toolbarLinkPropDefs,\n  toolbarPropDefs,\n  toolbarSeparatorPropDefs,\n  toolbarToggleButtonPropDefs,\n  toolbarToggleGroupPropDefs,\n} from './toolbar.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype ToolbarOwnProps = GetPropDefTypes<typeof toolbarPropDefs>\ntype ToolbarButtonOwnProps = GetPropDefTypes<typeof toolbarButtonPropDefs>\ntype ToolbarToggleButtonOwnProps = GetPropDefTypes<typeof toolbarToggleButtonPropDefs>\ntype ToolbarToggleGroupOwnProps = GetPropDefTypes<typeof toolbarToggleGroupPropDefs>\ntype ToolbarLinkOwnProps = GetPropDefTypes<typeof toolbarLinkPropDefs>\ntype ToolbarSeparatorOwnProps = GetPropDefTypes<typeof toolbarSeparatorPropDefs>\n\ntype ToolbarSize = NonNullable<ToolbarOwnProps['size']>\n\ntype ToolbarProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Root> & ToolbarOwnProps\ntype ToolbarButtonProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Button> & ToolbarButtonOwnProps\ntype ToolbarToggleButtonProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.ToggleItem> & ToolbarToggleButtonOwnProps\ntype ToolbarToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.ToggleGroup> & ToolbarToggleGroupOwnProps\ntype ToolbarLinkProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Link> & ToolbarLinkOwnProps\ntype ToolbarSeparatorProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Separator> & ToolbarSeparatorOwnProps\n\nconst ToolbarRoot = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.Root>, ToolbarProps>(\n  ({ className: propClassName, ...props }, forwardedRef) => {\n    const { asChild, className, size = 'md', ...toolbarProps } = extractProps(\n      {\n        ...props,\n        className: propClassName,\n      },\n      toolbarPropDefs,\n    )\n\n    return (\n      <ToolbarPrimitive.Root\n        {...toolbarProps} asChild={asChild}\n        ref={forwardedRef}\n        className={classNames('dsx-toolbar', className)}\n        data-size={size as ToolbarSize}\n      />\n    )\n  },\n)\nToolbarRoot.displayName = 'Toolbar'\n\nconst ToolbarButton = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.Button>, ToolbarButtonProps>(\n  (props, forwardedRef) => {\n    const { asChild, className, ...buttonProps } = extractProps(props, toolbarButtonPropDefs)\n\n    return <ToolbarPrimitive.Button {...buttonProps} asChild={asChild} ref={forwardedRef} className={classNames('dsx-toolbar__button', className)} />\n  },\n)\nToolbarButton.displayName = 'ToolbarButton'\n\nconst ToolbarToggleButton = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.ToggleItem>, ToolbarToggleButtonProps>(\n  (props, forwardedRef) => {\n    const { asChild, className, ...toggleButtonProps } = extractProps(props, toolbarToggleButtonPropDefs)\n\n    return (\n      <ToolbarPrimitive.ToggleItem\n        {...toggleButtonProps} asChild={asChild}\n        ref={forwardedRef}\n        className={classNames('dsx-toolbar__toggle-button', className)}\n      />\n    )\n  },\n)\nToolbarToggleButton.displayName = 'ToolbarToggleButton'\n\nconst ToolbarToggleGroup = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.ToggleGroup>, ToolbarToggleGroupProps>(\n  (props, forwardedRef) => {\n    const { className: propClassName, ...toggleGroupProps } = props\n    const { className } = extractProps(\n      {\n        className: propClassName,\n      },\n      toolbarToggleGroupPropDefs,\n    )\n\n    if (toggleGroupProps.type === 'single') {\n      return (\n        <ToolbarPrimitive.ToggleGroup\n          {...toggleGroupProps}\n          ref={forwardedRef}\n          className={classNames('dsx-toolbar__toggle-group', className)}\n        />\n      )\n    }\n\n    return (\n      <ToolbarPrimitive.ToggleGroup\n        {...toggleGroupProps}\n        ref={forwardedRef}\n        className={classNames('dsx-toolbar__toggle-group', className)}\n      />\n    )\n  },\n)\nToolbarToggleGroup.displayName = 'ToolbarToggleGroup'\n\nconst ToolbarLink = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.Link>, ToolbarLinkProps>((props, forwardedRef) => {\n  const { asChild, className, ...linkProps } = extractProps(props, toolbarLinkPropDefs)\n\n  return <ToolbarPrimitive.Link {...linkProps} asChild={asChild} ref={forwardedRef} className={classNames('dsx-toolbar__link', className)} />\n})\nToolbarLink.displayName = 'ToolbarLink'\n\nconst ToolbarSeparator = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.Separator>, ToolbarSeparatorProps>(\n  (props, forwardedRef) => {\n    const { asChild, className, ...separatorProps } = extractProps(props, toolbarSeparatorPropDefs)\n\n    return (\n      <ToolbarPrimitive.Separator\n        {...separatorProps} asChild={asChild}\n        ref={forwardedRef}\n        className={classNames('dsx-toolbar__separator', className)}\n      />\n    )\n  },\n)\nToolbarSeparator.displayName = 'ToolbarSeparator'\n\nconst Toolbar: typeof ToolbarRoot & {\n  Button: typeof ToolbarButton\n  ToggleButton: typeof ToolbarToggleButton\n  ToggleGroup: typeof ToolbarToggleGroup\n  Link: typeof ToolbarLink\n  Separator: typeof ToolbarSeparator\n} = Object.assign(ToolbarRoot, {\n  Button: ToolbarButton,\n  ToggleButton: ToolbarToggleButton,\n  ToggleGroup: ToolbarToggleGroup,\n  Link: ToolbarLink,\n  Separator: ToolbarSeparator,\n})\n\nexport { Toolbar, ToolbarButton, ToolbarLink, ToolbarRoot, ToolbarSeparator, ToolbarToggleButton, ToolbarToggleGroup }\nexport type {\n  ToolbarButtonProps,\n  ToolbarLinkProps,\n  ToolbarProps,\n  ToolbarSeparatorProps,\n  ToolbarToggleButtonProps,\n  ToolbarToggleGroupProps,\n  ToolbarSize,\n}\n"],
+  "mappings": "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",
   "names": ["classNames"]
 }

package/dist/components/toolbar/Toolbar.js

@@ -13,7 +13,7 @@ import {
 import { jsx } from "react/jsx-runtime";
 const ToolbarRoot = React.forwardRef(
   ({ className: propClassName, ...props }, forwardedRef) => {
-    const { asChild: _asChild, className, size = "md", ...toolbarProps } = extractProps(
+    const { asChild, className, size = "md", ...toolbarProps } = extractProps(
       {
         ...props,
         className: propClassName
@@ -24,6 +24,7 @@ const ToolbarRoot = React.forwardRef(
       ToolbarPrimitive.Root,
       {
         ...toolbarProps,
+        asChild,
         ref: forwardedRef,
         className: classNames("dsx-toolbar", className),
         "data-size": size
@@ -34,18 +35,19 @@ const ToolbarRoot = React.forwardRef(
 ToolbarRoot.displayName = "Toolbar";
 const ToolbarButton = React.forwardRef(
   (props, forwardedRef) => {
-    const { asChild: _asChild, className, ...buttonProps } = extractProps(props, toolbarButtonPropDefs);
-    return /* @__PURE__ */ jsx(ToolbarPrimitive.Button, { ...buttonProps, ref: forwardedRef, className: classNames("dsx-toolbar__button", className) });
+    const { asChild, className, ...buttonProps } = extractProps(props, toolbarButtonPropDefs);
+    return /* @__PURE__ */ jsx(ToolbarPrimitive.Button, { ...buttonProps, asChild, ref: forwardedRef, className: classNames("dsx-toolbar__button", className) });
   }
 );
 ToolbarButton.displayName = "ToolbarButton";
 const ToolbarToggleButton = React.forwardRef(
   (props, forwardedRef) => {
-    const { asChild: _asChild, className, ...toggleButtonProps } = extractProps(props, toolbarToggleButtonPropDefs);
+    const { asChild, className, ...toggleButtonProps } = extractProps(props, toolbarToggleButtonPropDefs);
     return /* @__PURE__ */ jsx(
       ToolbarPrimitive.ToggleItem,
       {
         ...toggleButtonProps,
+        asChild,
         ref: forwardedRef,
         className: classNames("dsx-toolbar__toggle-button", className)
       }
@@ -84,17 +86,18 @@ const ToolbarToggleGroup = React.forwardRef(
 );
 ToolbarToggleGroup.displayName = "ToolbarToggleGroup";
 const ToolbarLink = React.forwardRef((props, forwardedRef) => {
-  const { asChild: _asChild, className, ...linkProps } = extractProps(props, toolbarLinkPropDefs);
-  return /* @__PURE__ */ jsx(ToolbarPrimitive.Link, { ...linkProps, ref: forwardedRef, className: classNames("dsx-toolbar__link", className) });
+  const { asChild, className, ...linkProps } = extractProps(props, toolbarLinkPropDefs);
+  return /* @__PURE__ */ jsx(ToolbarPrimitive.Link, { ...linkProps, asChild, ref: forwardedRef, className: classNames("dsx-toolbar__link", className) });
 });
 ToolbarLink.displayName = "ToolbarLink";
 const ToolbarSeparator = React.forwardRef(
   (props, forwardedRef) => {
-    const { asChild: _asChild, className, ...separatorProps } = extractProps(props, toolbarSeparatorPropDefs);
+    const { asChild, className, ...separatorProps } = extractProps(props, toolbarSeparatorPropDefs);
     return /* @__PURE__ */ jsx(
       ToolbarPrimitive.Separator,
       {
         ...separatorProps,
+        asChild,
         ref: forwardedRef,
         className: classNames("dsx-toolbar__separator", className)
       }

package/dist/components/toolbar/Toolbar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/toolbar/Toolbar.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport {\n  toolbarButtonPropDefs,\n  toolbarLinkPropDefs,\n  toolbarPropDefs,\n  toolbarSeparatorPropDefs,\n  toolbarToggleButtonPropDefs,\n  toolbarToggleGroupPropDefs,\n} from './toolbar.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype ToolbarOwnProps = GetPropDefTypes<typeof toolbarPropDefs>\ntype ToolbarButtonOwnProps = GetPropDefTypes<typeof toolbarButtonPropDefs>\ntype ToolbarToggleButtonOwnProps = GetPropDefTypes<typeof toolbarToggleButtonPropDefs>\ntype ToolbarToggleGroupOwnProps = GetPropDefTypes<typeof toolbarToggleGroupPropDefs>\ntype ToolbarLinkOwnProps = GetPropDefTypes<typeof toolbarLinkPropDefs>\ntype ToolbarSeparatorOwnProps = GetPropDefTypes<typeof toolbarSeparatorPropDefs>\n\ntype ToolbarSize = NonNullable<ToolbarOwnProps['size']>\n\ntype ToolbarProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Root> & ToolbarOwnProps\ntype ToolbarButtonProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Button> & ToolbarButtonOwnProps\ntype ToolbarToggleButtonProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.ToggleItem> & ToolbarToggleButtonOwnProps\ntype ToolbarToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.ToggleGroup> & ToolbarToggleGroupOwnProps\ntype ToolbarLinkProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Link> & ToolbarLinkOwnProps\ntype ToolbarSeparatorProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Separator> & ToolbarSeparatorOwnProps\n\nconst ToolbarRoot = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.Root>, ToolbarProps>(\n  ({ className: propClassName, ...props }, forwardedRef) => {\n    const { asChild: _asChild, className, size = 'md', ...toolbarProps } = extractProps(\n      {\n        ...props,\n        className: propClassName,\n      },\n      toolbarPropDefs,\n    )\n\n    return (\n      <ToolbarPrimitive.Root\n        {...toolbarProps}\n        ref={forwardedRef}\n        className={classNames('dsx-toolbar', className)}\n        data-size={size as ToolbarSize}\n      />\n    )\n  },\n)\nToolbarRoot.displayName = 'Toolbar'\n\nconst ToolbarButton = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.Button>, ToolbarButtonProps>(\n  (props, forwardedRef) => {\n    const { asChild: _asChild, className, ...buttonProps } = extractProps(props, toolbarButtonPropDefs)\n\n    return <ToolbarPrimitive.Button {...buttonProps} ref={forwardedRef} className={classNames('dsx-toolbar__button', className)} />\n  },\n)\nToolbarButton.displayName = 'ToolbarButton'\n\nconst ToolbarToggleButton = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.ToggleItem>, ToolbarToggleButtonProps>(\n  (props, forwardedRef) => {\n    const { asChild: _asChild, className, ...toggleButtonProps } = extractProps(props, toolbarToggleButtonPropDefs)\n\n    return (\n      <ToolbarPrimitive.ToggleItem\n        {...toggleButtonProps}\n        ref={forwardedRef}\n        className={classNames('dsx-toolbar__toggle-button', className)}\n      />\n    )\n  },\n)\nToolbarToggleButton.displayName = 'ToolbarToggleButton'\n\nconst ToolbarToggleGroup = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.ToggleGroup>, ToolbarToggleGroupProps>(\n  (props, forwardedRef) => {\n    const { className: propClassName, ...toggleGroupProps } = props\n    const { className } = extractProps(\n      {\n        className: propClassName,\n      },\n      toolbarToggleGroupPropDefs,\n    )\n\n    if (toggleGroupProps.type === 'single') {\n      return (\n        <ToolbarPrimitive.ToggleGroup\n          {...toggleGroupProps}\n          ref={forwardedRef}\n          className={classNames('dsx-toolbar__toggle-group', className)}\n        />\n      )\n    }\n\n    return (\n      <ToolbarPrimitive.ToggleGroup\n        {...toggleGroupProps}\n        ref={forwardedRef}\n        className={classNames('dsx-toolbar__toggle-group', className)}\n      />\n    )\n  },\n)\nToolbarToggleGroup.displayName = 'ToolbarToggleGroup'\n\nconst ToolbarLink = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.Link>, ToolbarLinkProps>((props, forwardedRef) => {\n  const { asChild: _asChild, className, ...linkProps } = extractProps(props, toolbarLinkPropDefs)\n\n  return <ToolbarPrimitive.Link {...linkProps} ref={forwardedRef} className={classNames('dsx-toolbar__link', className)} />\n})\nToolbarLink.displayName = 'ToolbarLink'\n\nconst ToolbarSeparator = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.Separator>, ToolbarSeparatorProps>(\n  (props, forwardedRef) => {\n    const { asChild: _asChild, className, ...separatorProps } = extractProps(props, toolbarSeparatorPropDefs)\n\n    return (\n      <ToolbarPrimitive.Separator\n        {...separatorProps}\n        ref={forwardedRef}\n        className={classNames('dsx-toolbar__separator', className)}\n      />\n    )\n  },\n)\nToolbarSeparator.displayName = 'ToolbarSeparator'\n\nconst Toolbar: typeof ToolbarRoot & {\n  Button: typeof ToolbarButton\n  ToggleButton: typeof ToolbarToggleButton\n  ToggleGroup: typeof ToolbarToggleGroup\n  Link: typeof ToolbarLink\n  Separator: typeof ToolbarSeparator\n} = Object.assign(ToolbarRoot, {\n  Button: ToolbarButton,\n  ToggleButton: ToolbarToggleButton,\n  ToggleGroup: ToolbarToggleGroup,\n  Link: ToolbarLink,\n  Separator: ToolbarSeparator,\n})\n\nexport { Toolbar, ToolbarButton, ToolbarLink, ToolbarRoot, ToolbarSeparator, ToolbarToggleButton, ToolbarToggleGroup }\nexport type {\n  ToolbarButtonProps,\n  ToolbarLinkProps,\n  ToolbarProps,\n  ToolbarSeparatorProps,\n  ToolbarToggleButtonProps,\n  ToolbarToggleGroupProps,\n  ToolbarSize,\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport * as ToolbarPrimitive from '@radix-ui/react-toolbar'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport {\n  toolbarButtonPropDefs,\n  toolbarLinkPropDefs,\n  toolbarPropDefs,\n  toolbarSeparatorPropDefs,\n  toolbarToggleButtonPropDefs,\n  toolbarToggleGroupPropDefs,\n} from './toolbar.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype ToolbarOwnProps = GetPropDefTypes<typeof toolbarPropDefs>\ntype ToolbarButtonOwnProps = GetPropDefTypes<typeof toolbarButtonPropDefs>\ntype ToolbarToggleButtonOwnProps = GetPropDefTypes<typeof toolbarToggleButtonPropDefs>\ntype ToolbarToggleGroupOwnProps = GetPropDefTypes<typeof toolbarToggleGroupPropDefs>\ntype ToolbarLinkOwnProps = GetPropDefTypes<typeof toolbarLinkPropDefs>\ntype ToolbarSeparatorOwnProps = GetPropDefTypes<typeof toolbarSeparatorPropDefs>\n\ntype ToolbarSize = NonNullable<ToolbarOwnProps['size']>\n\ntype ToolbarProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Root> & ToolbarOwnProps\ntype ToolbarButtonProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Button> & ToolbarButtonOwnProps\ntype ToolbarToggleButtonProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.ToggleItem> & ToolbarToggleButtonOwnProps\ntype ToolbarToggleGroupProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.ToggleGroup> & ToolbarToggleGroupOwnProps\ntype ToolbarLinkProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Link> & ToolbarLinkOwnProps\ntype ToolbarSeparatorProps = React.ComponentPropsWithoutRef<typeof ToolbarPrimitive.Separator> & ToolbarSeparatorOwnProps\n\nconst ToolbarRoot = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.Root>, ToolbarProps>(\n  ({ className: propClassName, ...props }, forwardedRef) => {\n    const { asChild, className, size = 'md', ...toolbarProps } = extractProps(\n      {\n        ...props,\n        className: propClassName,\n      },\n      toolbarPropDefs,\n    )\n\n    return (\n      <ToolbarPrimitive.Root\n        {...toolbarProps} asChild={asChild}\n        ref={forwardedRef}\n        className={classNames('dsx-toolbar', className)}\n        data-size={size as ToolbarSize}\n      />\n    )\n  },\n)\nToolbarRoot.displayName = 'Toolbar'\n\nconst ToolbarButton = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.Button>, ToolbarButtonProps>(\n  (props, forwardedRef) => {\n    const { asChild, className, ...buttonProps } = extractProps(props, toolbarButtonPropDefs)\n\n    return <ToolbarPrimitive.Button {...buttonProps} asChild={asChild} ref={forwardedRef} className={classNames('dsx-toolbar__button', className)} />\n  },\n)\nToolbarButton.displayName = 'ToolbarButton'\n\nconst ToolbarToggleButton = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.ToggleItem>, ToolbarToggleButtonProps>(\n  (props, forwardedRef) => {\n    const { asChild, className, ...toggleButtonProps } = extractProps(props, toolbarToggleButtonPropDefs)\n\n    return (\n      <ToolbarPrimitive.ToggleItem\n        {...toggleButtonProps} asChild={asChild}\n        ref={forwardedRef}\n        className={classNames('dsx-toolbar__toggle-button', className)}\n      />\n    )\n  },\n)\nToolbarToggleButton.displayName = 'ToolbarToggleButton'\n\nconst ToolbarToggleGroup = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.ToggleGroup>, ToolbarToggleGroupProps>(\n  (props, forwardedRef) => {\n    const { className: propClassName, ...toggleGroupProps } = props\n    const { className } = extractProps(\n      {\n        className: propClassName,\n      },\n      toolbarToggleGroupPropDefs,\n    )\n\n    if (toggleGroupProps.type === 'single') {\n      return (\n        <ToolbarPrimitive.ToggleGroup\n          {...toggleGroupProps}\n          ref={forwardedRef}\n          className={classNames('dsx-toolbar__toggle-group', className)}\n        />\n      )\n    }\n\n    return (\n      <ToolbarPrimitive.ToggleGroup\n        {...toggleGroupProps}\n        ref={forwardedRef}\n        className={classNames('dsx-toolbar__toggle-group', className)}\n      />\n    )\n  },\n)\nToolbarToggleGroup.displayName = 'ToolbarToggleGroup'\n\nconst ToolbarLink = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.Link>, ToolbarLinkProps>((props, forwardedRef) => {\n  const { asChild, className, ...linkProps } = extractProps(props, toolbarLinkPropDefs)\n\n  return <ToolbarPrimitive.Link {...linkProps} asChild={asChild} ref={forwardedRef} className={classNames('dsx-toolbar__link', className)} />\n})\nToolbarLink.displayName = 'ToolbarLink'\n\nconst ToolbarSeparator = React.forwardRef<React.ComponentRef<typeof ToolbarPrimitive.Separator>, ToolbarSeparatorProps>(\n  (props, forwardedRef) => {\n    const { asChild, className, ...separatorProps } = extractProps(props, toolbarSeparatorPropDefs)\n\n    return (\n      <ToolbarPrimitive.Separator\n        {...separatorProps} asChild={asChild}\n        ref={forwardedRef}\n        className={classNames('dsx-toolbar__separator', className)}\n      />\n    )\n  },\n)\nToolbarSeparator.displayName = 'ToolbarSeparator'\n\nconst Toolbar: typeof ToolbarRoot & {\n  Button: typeof ToolbarButton\n  ToggleButton: typeof ToolbarToggleButton\n  ToggleGroup: typeof ToolbarToggleGroup\n  Link: typeof ToolbarLink\n  Separator: typeof ToolbarSeparator\n} = Object.assign(ToolbarRoot, {\n  Button: ToolbarButton,\n  ToggleButton: ToolbarToggleButton,\n  ToggleGroup: ToolbarToggleGroup,\n  Link: ToolbarLink,\n  Separator: ToolbarSeparator,\n})\n\nexport { Toolbar, ToolbarButton, ToolbarLink, ToolbarRoot, ToolbarSeparator, ToolbarToggleButton, ToolbarToggleGroup }\nexport type {\n  ToolbarButtonProps,\n  ToolbarLinkProps,\n  ToolbarProps,\n  ToolbarSeparatorProps,\n  ToolbarToggleButtonProps,\n  ToolbarToggleGroupProps,\n  ToolbarSize,\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/toolbar.css

@@ -2,6 +2,11 @@
 @import '../../_internal/baseButton.css';
 
 .dsx-toolbar {
+  --dsx-toolbar-control-height: var(--dsx-size-lg);
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+  flex-wrap: wrap;
   display: inline-flex;
   align-items: center;
   gap: var(--dsx-space-sm);
@@ -22,7 +27,14 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: var(--dsx-size-lg);
+  min-height: var(--dsx-toolbar-control-height);
+  min-width: var(--dsx-toolbar-control-height);
+  box-sizing: border-box;
+  font-family: var(--dsx-typography-label-medium-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-medium-font-size);
+  line-height: var(--dsx-typography-label-medium-line-height);
+  font-weight: var(--dsx-typography-label-medium-font-weight);
+  overflow-wrap: anywhere;
   padding-inline: var(--dsx-space-sm);
   border-radius: var(--dsx-rounded-md);
   border: 0;
@@ -35,7 +47,14 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: var(--dsx-size-lg);
+  min-height: var(--dsx-toolbar-control-height);
+  min-width: var(--dsx-toolbar-control-height);
+  box-sizing: border-box;
+  font-family: var(--dsx-typography-label-medium-font-family), sans-serif;
+  font-size: var(--dsx-typography-label-medium-font-size);
+  line-height: var(--dsx-typography-label-medium-line-height);
+  font-weight: var(--dsx-typography-label-medium-font-weight);
+  overflow-wrap: anywhere;
   padding-inline: var(--dsx-space-sm);
   border-radius: var(--dsx-rounded-md);
   border: 0;
@@ -48,6 +67,9 @@
   align-items: stretch;
   gap: 0;
   isolation: isolate;
+  flex-wrap: wrap;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-toolbar__toggle-group > .dsx-toolbar__toggle-button {
@@ -69,8 +91,9 @@
 }
 
 .dsx-toolbar__separator {
-  width: var(--dsx-border-width-sm);
-  height: var(--dsx-size-md);
+  flex: 0 0 auto;
+  width: var(--dsx-boundary-separator-width);
+  height: calc(var(--dsx-toolbar-control-height) - var(--dsx-space-sm));
   background: var(--dsx-control-separator-color);
 }
 
@@ -78,3 +101,34 @@
   gap: var(--dsx-space-xs);
   padding: var(--dsx-space-xs);
 }
+
+.dsx-toolbar[data-size='sm'] { --dsx-toolbar-control-height: var(--dsx-size-md); }
+.dsx-toolbar[data-size='lg'] { --dsx-toolbar-control-height: var(--dsx-size-xl); }
+.dsx-toolbar[data-orientation='vertical'] { flex-direction: column; align-items: stretch; }
+.dsx-toolbar__separator[data-orientation='horizontal'] { width: 100%; height: var(--dsx-boundary-separator-width); }
+.dsx-toolbar__button:hover:not(:disabled),
+.dsx-toolbar__link:hover,
+.dsx-toolbar__toggle-button:hover:not(:disabled) { background: var(--dsx-effect-hover-ghost); }
+.dsx-toolbar__button:active:not(:disabled),
+.dsx-toolbar__link:active,
+.dsx-toolbar__toggle-button:active:not(:disabled) { background: var(--dsx-effect-pressed-layer); }
+.dsx-toolbar__toggle-button[data-state='on'] { background: var(--dsx-color-accent-surface); color: var(--dsx-color-accent-indicator); }
+.dsx-toolbar__button:focus-visible,
+.dsx-toolbar__link:focus-visible,
+.dsx-toolbar__toggle-button:focus-visible { outline: none; box-shadow: var(--dsx-shadow-focus-ring); position: relative; z-index: 1; }
+.dsx-toolbar__button:disabled,
+.dsx-toolbar__toggle-button:disabled { opacity: var(--dsx-opacity-disabled); }
+
+.dsx-toolbar__toggle-group[data-orientation='vertical'] { flex-direction: column; }
+.dsx-toolbar__toggle-group:where([data-orientation='vertical']) > .dsx-toolbar__toggle-button {
+  margin-inline-start: 0;
+  border-radius: 0;
+}
+.dsx-toolbar__toggle-group:where([data-orientation='vertical']) > .dsx-toolbar__toggle-button:first-child {
+  border-start-start-radius: var(--dsx-rounded-md);
+  border-start-end-radius: var(--dsx-rounded-md);
+}
+.dsx-toolbar__toggle-group:where([data-orientation='vertical']) > .dsx-toolbar__toggle-button:last-child {
+  border-end-start-radius: var(--dsx-rounded-md);
+  border-end-end-radius: var(--dsx-rounded-md);
+}

package/dist/components/tooltip.css

@@ -1,8 +1,12 @@
 .dsx-tooltip {
-  max-width: var(--dsx-tooltip-max-width);
+  --_tooltip-background: var(--dsx-color-panel-translucent);
+  box-sizing: border-box;
+  max-width: min(var(--dsx-tooltip-max-width), var(--radix-tooltip-content-available-width));
+  overflow-wrap: anywhere;
+  z-index: calc(var(--dsx-z-index-modal) + 1);
   border-radius: var(--dsx-rounded-sm);
   padding: var(--dsx-space-xs) var(--dsx-space-sm);
-  background: var(--dsx-color-panel-translucent);
+  background: var(--_tooltip-background);
   backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
   color: var(--dsx-color-on-surface);
   box-shadow: var(--dsx-shadow-elevation-2);
@@ -19,15 +23,15 @@
    (dark text on primary purple in light mode, light text on lime in
    dark+spark). Background already wins (no .dsx-theme background rule). */
 .dsx-tooltip.dsx-tooltip--primary {
-  background: var(--dsx-color-primary);
+  --_tooltip-background: var(--dsx-color-primary);
   color: var(--dsx-color-on-primary);
 }
 
 .dsx-tooltip.dsx-tooltip--error {
-  background: var(--dsx-color-error);
+  --_tooltip-background: var(--dsx-color-error);
   color: var(--dsx-color-on-error);
 }
 
 .dsx-tooltip__arrow {
-  fill: currentColor;
+  fill: var(--_tooltip-background);
 }