@kushagradhawan/kookie-ui 0.1.119 → 0.1.121

package/components.css

@@ -5201,6 +5201,12 @@
         --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
     }
 }
+.rt-BaseCard:where([data-inset='true']) {
+    --base-card-padding-top: 0px;
+    --base-card-padding-right: 0px;
+    --base-card-padding-bottom: 0px;
+    --base-card-padding-left: 0px;
+}
 .rt-BaseCard:where(.rt-variant-outline) {
     --card-border-width: 1px;
     --card-background-color: transparent;
@@ -19990,12 +19996,38 @@
     outline-color: var(--accent-9);
 }
 .rt-Toolbar {
-    position: sticky;
+    position: absolute;
     z-index: 1;
 }
 .rt-ToolbarInner {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
     width: 100%;
     height: 100%;
+    gap: var(--space-2);
+}
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarInner {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr auto 1fr;
+}
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarLeft {
+    grid-column: 1;
+    grid-row: 1;
+    align-self: start;
+    justify-self: center;
+}
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarCenter {
+    grid-column: 1;
+    grid-row: 2;
+    align-self: center;
+    justify-self: center;
+}
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarRight {
+    grid-column: 1;
+    grid-row: 3;
+    align-self: end;
+    justify-self: center;
 }
 .rt-Toolbar:where([data-anchor='top']) {
     top: 0;
@@ -20019,6 +20051,7 @@
 }
 .rt-Toolbar:where(:not([data-floating])) {
     --base-card-border-radius: 0;
+    border-radius: 0;
 }
 .rt-Toolbar:where([data-anchor='top']:not([data-floating]))::after {
     box-shadow: inset 0 -1px 0 0 var(--gray-6);
@@ -20050,21 +20083,24 @@
 .rt-Toolbar:where(.rt-variant-soft:not([data-floating]))::after {
     box-shadow: none;
 }
-.rt-Toolbar:where([data-floating]) {
-    position: absolute;
-}
 .rt-ToolbarTitle {
     min-width: 0;
     flex-shrink: 1;
 }
+.rt-ToolbarSection {
+    min-width: 0;
+}
 .rt-ToolbarLeft {
-    justify-content: flex-start;
+    grid-column: 1;
+    justify-self: start;
 }
 .rt-ToolbarCenter {
-    justify-content: center;
+    grid-column: 2;
+    justify-self: center;
 }
 .rt-ToolbarRight {
-    justify-content: flex-end;
+    grid-column: 3;
+    justify-self: end;
 }
 .rt-TooltipContent {
     box-sizing: border-box;

package/dist/cjs/components/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAI/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,KAAK,YAAY,GAAG,eAAe,CAAC,OAAO,YAAY,CAAC,CAAC;AACzD,UAAU,SAAU,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,CAAC,EAAE,WAAW,EAAE,YAAY;CAAG;AACpG,QAAA,MAAM,IAAI,kFAkBR,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,YAAY,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAI/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,KAAK,YAAY,GAAG,eAAe,CAAC,OAAO,YAAY,CAAC,CAAC;AACzD,UAAU,SAAU,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,CAAC,EAAE,WAAW,EAAE,YAAY;CAAG;AACpG,QAAA,MAAM,IAAI,kFAmBR,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/dist/cjs/components/card.js

@@ -1,2 +1,2 @@
-"use strict";var v=Object.create;var a=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty;var j=(r,o)=>{for(var e in o)a(r,e,{get:o[e],enumerable:!0})},d=(r,o,e,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let p of D(o))!N.call(r,p)&&p!==e&&a(r,p,{get:()=>o[p],enumerable:!(t=R(o,p))||t.enumerable});return r};var n=(r,o,e)=>(e=r!=null?v(x(r)):{},d(o||!r||!r.__esModule?a(e,"default",{value:r,enumerable:!0}):e,r)),w=r=>d(a({},"__esModule",{value:!0}),r);var E={};j(E,{Card:()=>s});module.exports=w(E);var f=n(require("react")),i=n(require("classnames")),P=require("radix-ui"),c=require("./card.props.js"),l=require("../helpers/extract-props.js"),C=require("../props/margin.props.js");const s=f.forwardRef((r,o)=>{const{asChild:e,className:t,panelBackground:p,material:y,flush:u,...g}=(0,l.extractProps)(r,c.cardPropDefs,C.marginPropDefs),m=y||p,h=e?P.Slot.Root:"div";return f.createElement(h,{ref:o,...g,"data-panel-background":m,"data-material":m,"data-flush":u?"true":void 0,className:(0,i.default)("rt-reset","rt-BaseCard","rt-Card",t)})});s.displayName="Card";
+"use strict";var R=Object.create;var a=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var x=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var w=(r,e)=>{for(var o in e)a(r,o,{get:e[o],enumerable:!0})},d=(r,e,o,p)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of x(e))!j.call(r,t)&&t!==o&&a(r,t,{get:()=>e[t],enumerable:!(p=D(e,t))||p.enumerable});return r};var n=(r,e,o)=>(o=r!=null?R(N(r)):{},d(e||!r||!r.__esModule?a(o,"default",{value:r,enumerable:!0}):o,r)),E=r=>d(a({},"__esModule",{value:!0}),r);var M={};w(M,{Card:()=>s});module.exports=E(M);var i=n(require("react")),f=n(require("classnames")),P=require("radix-ui"),c=require("./card.props.js"),l=require("../helpers/extract-props.js"),C=require("../props/margin.props.js");const s=i.forwardRef((r,e)=>{const{asChild:o,className:p,panelBackground:t,material:u,flush:y,inset:g,...h}=(0,l.extractProps)(r,c.cardPropDefs,C.marginPropDefs),m=u||t,v=o?P.Slot.Root:"div";return i.createElement(v,{ref:e,...h,"data-panel-background":m,"data-material":m,"data-flush":y?"true":void 0,"data-inset":g?"true":void 0,className:(0,f.default)("rt-reset","rt-BaseCard","rt-Card",p)})});s.displayName="Card";
 //# sourceMappingURL=card.js.map

package/dist/cjs/components/card.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/card.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from 'radix-ui';\n\nimport { cardPropDefs } from './card.props.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\n\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype CardElement = React.ElementRef<'div'>;\ntype CardOwnProps = GetPropDefTypes<typeof cardPropDefs>;\ninterface CardProps extends ComponentPropsWithout<'div', RemovedProps>, MarginProps, CardOwnProps {}\nconst Card = React.forwardRef<CardElement, CardProps>((props, forwardedRef) => {\n  const { asChild, className, panelBackground, material, flush, ...cardProps } = extractProps(\n    props,\n    cardPropDefs,\n    marginPropDefs,\n  );\n  const effectiveMaterial = material || panelBackground;\n  const Comp = asChild ? Slot.Root : 'div';\n  return (\n    <Comp\n      ref={forwardedRef}\n      {...cardProps}\n      data-panel-background={effectiveMaterial}\n      data-material={effectiveMaterial}\n      data-flush={flush ? 'true' : undefined}\n      className={classNames('rt-reset', 'rt-BaseCard', 'rt-Card', className)}\n    />\n  );\n});\nCard.displayName = 'Card';\n\nexport { Card };\nexport type { CardProps };\n"],
-  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,yBACvBC,EAAqB,oBAErBC,EAA6B,2BAC7BC,EAA6B,uCAC7BC,EAA+B,oCAS/B,MAAMP,EAAOE,EAAM,WAAmC,CAACM,EAAOC,IAAiB,CAC7E,KAAM,CAAE,QAAAC,EAAS,UAAAC,EAAW,gBAAAC,EAAiB,SAAAC,EAAU,MAAAC,EAAO,GAAGC,CAAU,KAAI,gBAC7EP,EACA,eACA,gBACF,EACMQ,EAAoBH,GAAYD,EAChCK,EAAOP,EAAU,OAAK,KAAO,MACnC,OACER,EAAA,cAACe,EAAA,CACC,IAAKR,EACJ,GAAGM,EACJ,wBAAuBC,EACvB,gBAAeA,EACf,aAAYF,EAAQ,OAAS,OAC7B,aAAW,EAAAI,SAAW,WAAY,cAAe,UAAWP,CAAS,EACvE,CAEJ,CAAC,EACDX,EAAK,YAAc",
-  "names": ["card_exports", "__export", "Card", "__toCommonJS", "React", "import_classnames", "import_radix_ui", "import_card_props", "import_extract_props", "import_margin_props", "props", "forwardedRef", "asChild", "className", "panelBackground", "material", "flush", "cardProps", "effectiveMaterial", "Comp", "classNames"]
+  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from 'radix-ui';\n\nimport { cardPropDefs } from './card.props.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\n\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype CardElement = React.ElementRef<'div'>;\ntype CardOwnProps = GetPropDefTypes<typeof cardPropDefs>;\ninterface CardProps extends ComponentPropsWithout<'div', RemovedProps>, MarginProps, CardOwnProps {}\nconst Card = React.forwardRef<CardElement, CardProps>((props, forwardedRef) => {\n  const { asChild, className, panelBackground, material, flush, inset, ...cardProps } = extractProps(\n    props,\n    cardPropDefs,\n    marginPropDefs,\n  );\n  const effectiveMaterial = material || panelBackground;\n  const Comp = asChild ? Slot.Root : 'div';\n  return (\n    <Comp\n      ref={forwardedRef}\n      {...cardProps}\n      data-panel-background={effectiveMaterial}\n      data-material={effectiveMaterial}\n      data-flush={flush ? 'true' : undefined}\n      data-inset={inset ? 'true' : undefined}\n      className={classNames('rt-reset', 'rt-BaseCard', 'rt-Card', className)}\n    />\n  );\n});\nCard.displayName = 'Card';\n\nexport { Card };\nexport type { CardProps };\n"],
+  "mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAAuB,oBACvBC,EAAuB,yBACvBC,EAAqB,oBAErBC,EAA6B,2BAC7BC,EAA6B,uCAC7BC,EAA+B,oCAS/B,MAAMP,EAAOE,EAAM,WAAmC,CAACM,EAAOC,IAAiB,CAC7E,KAAM,CAAE,QAAAC,EAAS,UAAAC,EAAW,gBAAAC,EAAiB,SAAAC,EAAU,MAAAC,EAAO,MAAAC,EAAO,GAAGC,CAAU,KAAI,gBACpFR,EACA,eACA,gBACF,EACMS,EAAoBJ,GAAYD,EAChCM,EAAOR,EAAU,OAAK,KAAO,MACnC,OACER,EAAA,cAACgB,EAAA,CACC,IAAKT,EACJ,GAAGO,EACJ,wBAAuBC,EACvB,gBAAeA,EACf,aAAYH,EAAQ,OAAS,OAC7B,aAAYC,EAAQ,OAAS,OAC7B,aAAW,EAAAI,SAAW,WAAY,cAAe,UAAWR,CAAS,EACvE,CAEJ,CAAC,EACDX,EAAK,YAAc",
+  "names": ["card_exports", "__export", "Card", "__toCommonJS", "React", "import_classnames", "import_radix_ui", "import_card_props", "import_extract_props", "import_margin_props", "props", "forwardedRef", "asChild", "className", "panelBackground", "material", "flush", "inset", "cardProps", "effectiveMaterial", "Comp", "classNames"]
 }

package/dist/cjs/components/card.props.d.ts

@@ -26,6 +26,10 @@ declare const cardPropDefs: {
         type: "boolean";
         default: false;
     };
+    inset: {
+        type: "boolean";
+        default: false;
+    };
     asChild: {
         type: "boolean";
     };

package/dist/cjs/components/card.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.props.d.ts","sourceRoot":"","sources":["../../../src/components/card.props.tsx"],"names":[],"mappings":"AASA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAajB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"card.props.d.ts","sourceRoot":"","sources":["../../../src/components/card.props.tsx"],"names":[],"mappings":"AASA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAejB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/cjs/components/card.props.js

@@ -1,2 +1,2 @@
-"use strict";var n=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var i=(s,e)=>{for(var t in e)n(s,t,{get:e[t],enumerable:!0})},d=(s,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of f(e))!p.call(s,a)&&a!==t&&n(s,a,{get:()=>e[a],enumerable:!(o=l(e,a))||o.enumerable});return s};var c=s=>d(n({},"__esModule",{value:!0}),s);var P={};i(P,{cardPropDefs:()=>u});module.exports=c(P);var r=require("../props/as-child.prop.js");const m=["1","2","3","4","5"],v=["surface","outline","classic","ghost","soft"],y=["solid","translucent"],D=["solid","translucent"],u={...r.asChildPropDef,size:{type:"enum",className:"rt-r-size",values:m,default:"1",responsive:!0},variant:{type:"enum",className:"rt-variant",values:v,default:"outline"},panelBackground:{type:"enum",values:y,default:void 0},material:{type:"enum",values:D,default:void 0},flush:{type:"boolean",default:!1}};
+"use strict";var n=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var i=(s,e)=>{for(var t in e)n(s,t,{get:e[t],enumerable:!0})},d=(s,e,t,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of f(e))!p.call(s,a)&&a!==t&&n(s,a,{get:()=>e[a],enumerable:!(o=u(e,a))||o.enumerable});return s};var c=s=>d(n({},"__esModule",{value:!0}),s);var P={};i(P,{cardPropDefs:()=>l});module.exports=c(P);var r=require("../props/as-child.prop.js");const m=["1","2","3","4","5"],y=["surface","outline","classic","ghost","soft"],v=["solid","translucent"],D=["solid","translucent"],l={...r.asChildPropDef,size:{type:"enum",className:"rt-r-size",values:m,default:"1",responsive:!0},variant:{type:"enum",className:"rt-variant",values:y,default:"outline"},panelBackground:{type:"enum",values:v,default:void 0},material:{type:"enum",values:D,default:void 0},flush:{type:"boolean",default:!1},inset:{type:"boolean",default:!1}};
 //# sourceMappingURL=card.props.js.map

package/dist/cjs/components/card.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/card.props.tsx"],
-  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3', '4', '5'] as const;\nconst variants = ['surface', 'outline', 'classic', 'ghost', 'soft'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\nconst materials = ['solid', 'translucent'] as const;\n\nconst cardPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'outline' },\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },\n  material: { type: 'enum', values: materials, default: undefined },\n  flush: { type: 'boolean', default: false },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;\n  material: PropDef<(typeof materials)[number] | undefined>;\n  flush: PropDef<boolean>;\n};\n\nexport { cardPropDefs };\n"],
-  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAA+B,qCAI/B,MAAMC,EAAQ,CAAC,IAAK,IAAK,IAAK,IAAK,GAAG,EAChCC,EAAW,CAAC,UAAW,UAAW,UAAW,QAAS,MAAM,EAC5DC,EAAmB,CAAC,QAAS,aAAa,EAC1CC,EAAY,CAAC,QAAS,aAAa,EAEnCN,EAAe,CACnB,GAAG,iBACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQG,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,gBAAiB,CAAE,KAAM,OAAQ,OAAQC,EAAkB,QAAS,MAAU,EAC9E,SAAU,CAAE,KAAM,OAAQ,OAAQC,EAAW,QAAS,MAAU,EAChE,MAAO,CAAE,KAAM,UAAW,QAAS,EAAM,CAC3C",
+  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3', '4', '5'] as const;\nconst variants = ['surface', 'outline', 'classic', 'ghost', 'soft'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\nconst materials = ['solid', 'translucent'] as const;\n\nconst cardPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'outline' },\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },\n  material: { type: 'enum', values: materials, default: undefined },\n  flush: { type: 'boolean', default: false },\n  inset: { type: 'boolean', default: false },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;\n  material: PropDef<(typeof materials)[number] | undefined>;\n  flush: PropDef<boolean>;\n  inset: PropDef<boolean>;\n};\n\nexport { cardPropDefs };\n"],
+  "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,kBAAAE,IAAA,eAAAC,EAAAH,GAAA,IAAAI,EAA+B,qCAI/B,MAAMC,EAAQ,CAAC,IAAK,IAAK,IAAK,IAAK,GAAG,EAChCC,EAAW,CAAC,UAAW,UAAW,UAAW,QAAS,MAAM,EAC5DC,EAAmB,CAAC,QAAS,aAAa,EAC1CC,EAAY,CAAC,QAAS,aAAa,EAEnCN,EAAe,CACnB,GAAG,iBACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQG,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,gBAAiB,CAAE,KAAM,OAAQ,OAAQC,EAAkB,QAAS,MAAU,EAC9E,SAAU,CAAE,KAAM,OAAQ,OAAQC,EAAW,QAAS,MAAU,EAChE,MAAO,CAAE,KAAM,UAAW,QAAS,EAAM,EACzC,MAAO,CAAE,KAAM,UAAW,QAAS,EAAM,CAC3C",
   "names": ["card_props_exports", "__export", "cardPropDefs", "__toCommonJS", "import_as_child_prop", "sizes", "variants", "panelBackgrounds", "materials"]
 }

package/dist/cjs/components/toolbar.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Heading } from './heading.js';
 import type { CardProps } from './card.js';
-import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+import type { FlexProps } from './flex.js';
 type Anchor = 'top' | 'bottom' | 'left' | 'right';
 type SpaceScale = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
 interface ToolbarRootProps extends Omit<CardProps, 'asChild'> {
@@ -11,8 +11,8 @@ interface ToolbarRootProps extends Omit<CardProps, 'asChild'> {
      */
     anchor?: Anchor;
     /**
-     * Floating variant adds margin from edges for a detached look.
-     * When floating, shows full card treatment. When not floating, only shows exposed edge border.
+     * Floating mode adds margin from edges for a detached look with absolute positioning.
+     * When false (default), uses inset mode with negative margins to go edge-to-edge inside Cards.
      * @default false
      */
     floating?: boolean;
@@ -23,11 +23,10 @@ interface ToolbarRootProps extends Omit<CardProps, 'asChild'> {
     offset?: SpaceScale;
 }
 declare const ToolbarRoot: React.ForwardRefExoticComponent<ToolbarRootProps & React.RefAttributes<HTMLDivElement>>;
-interface ToolbarSectionProps extends ComponentPropsWithout<'div', RemovedProps> {
-}
-declare const ToolbarLeft: React.ForwardRefExoticComponent<ToolbarSectionProps & React.RefAttributes<HTMLDivElement>>;
-declare const ToolbarCenter: React.ForwardRefExoticComponent<ToolbarSectionProps & React.RefAttributes<HTMLDivElement>>;
-declare const ToolbarRight: React.ForwardRefExoticComponent<ToolbarSectionProps & React.RefAttributes<HTMLDivElement>>;
+type ToolbarSectionProps = FlexProps;
+declare const ToolbarLeft: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
+declare const ToolbarCenter: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
+declare const ToolbarRight: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
 interface ToolbarTitleProps extends React.ComponentPropsWithoutRef<typeof Heading> {
 }
 declare const ToolbarTitle: React.ForwardRefExoticComponent<ToolbarTitleProps & React.RefAttributes<HTMLHeadingElement>>;

package/dist/cjs/components/toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAOzF,KAAK,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAClD,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtE,UAAU,gBAAiB,SAAQ,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC;IAC3D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,QAAA,MAAM,WAAW,yFA6FhB,CAAC;AAQF,UAAU,mBAAoB,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,CAAC;CAAG;AAEnF,QAAA,MAAM,WAAW,4FAahB,CAAC;AAOF,QAAA,MAAM,aAAa,4FAclB,CAAC;AAOF,QAAA,MAAM,YAAY,4FAajB,CAAC;AAQF,UAAU,iBAAkB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,OAAO,CAAC;CAAG;AAErF,QAAA,MAAM,YAAY,8FAajB,CAAC;AAOF,QAAA,MAAM,OAAO,EAAkB,OAAO,WAAW,GAAG;IAClD,IAAI,EAAE,OAAO,WAAW,CAAC;IACzB,MAAM,EAAE,OAAO,aAAa,CAAC;IAC7B,KAAK,EAAE,OAAO,YAAY,CAAC;IAC3B,KAAK,EAAE,OAAO,YAAY,CAAC;CAC5B,CAAC;AAOF,OAAO,EACL,OAAO,EACP,WAAW,IAAI,IAAI,EACnB,WAAW,IAAI,IAAI,EACnB,aAAa,IAAI,MAAM,EACvB,YAAY,IAAI,KAAK,EACrB,YAAY,IAAI,KAAK,GACtB,CAAC;AACF,YAAY,EACV,gBAAgB,IAAI,SAAS,EAC7B,mBAAmB,IAAI,SAAS,EAChC,mBAAmB,IAAI,WAAW,EAClC,mBAAmB,IAAI,UAAU,EACjC,iBAAiB,IAAI,UAAU,GAChC,CAAC"}
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAO3C,KAAK,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAClD,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtE,UAAU,gBAAiB,SAAQ,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC;IAC3D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,QAAA,MAAM,WAAW,yFAsFhB,CAAC;AAQF,KAAK,mBAAmB,GAAG,SAAS,CAAC;AAErC,QAAA,MAAM,WAAW,kFAYhB,CAAC;AAOF,QAAA,MAAM,aAAa,kFAalB,CAAC;AAOF,QAAA,MAAM,YAAY,kFAajB,CAAC;AAQF,UAAU,iBAAkB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,OAAO,CAAC;CAAG;AAErF,QAAA,MAAM,YAAY,8FAajB,CAAC;AAOF,QAAA,MAAM,OAAO,EAAkB,OAAO,WAAW,GAAG;IAClD,IAAI,EAAE,OAAO,WAAW,CAAC;IACzB,MAAM,EAAE,OAAO,aAAa,CAAC;IAC7B,KAAK,EAAE,OAAO,YAAY,CAAC;IAC3B,KAAK,EAAE,OAAO,YAAY,CAAC;CAC5B,CAAC;AAOF,OAAO,EACL,OAAO,EACP,WAAW,IAAI,IAAI,EACnB,WAAW,IAAI,IAAI,EACnB,aAAa,IAAI,MAAM,EACvB,YAAY,IAAI,KAAK,EACrB,YAAY,IAAI,KAAK,GACtB,CAAC;AACF,YAAY,EACV,gBAAgB,IAAI,SAAS,EAC7B,mBAAmB,IAAI,SAAS,EAChC,mBAAmB,IAAI,WAAW,EAClC,mBAAmB,IAAI,UAAU,EACjC,iBAAiB,IAAI,UAAU,GAChC,CAAC"}

package/dist/cjs/components/toolbar.js

@@ -1,2 +1,2 @@
-"use strict";var O=Object.create;var f=Object.defineProperty;var k=Object.getOwnPropertyDescriptor;var $=Object.getOwnPropertyNames;var A=Object.getPrototypeOf,G=Object.prototype.hasOwnProperty;var I=(o,e)=>{for(var t in e)f(o,t,{get:e[t],enumerable:!0})},x=(o,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of $(e))!G.call(o,n)&&n!==t&&f(o,n,{get:()=>e[n],enumerable:!(r=k(e,n))||r.enumerable});return o};var v=(o,e,t)=>(t=o!=null?O(A(o)):{},x(e||!o||!o.__esModule?f(t,"default",{value:o,enumerable:!0}):t,o)),q=o=>x(f({},"__esModule",{value:!0}),o);var B={};I(B,{Center:()=>b,Left:()=>T,Right:()=>d,Root:()=>m,Title:()=>g,Toolbar:()=>i});module.exports=q(B);var a=v(require("react")),s=v(require("classnames")),N=require("./card.js"),p=require("./flex.js"),L=require("./heading.js");const m=a.forwardRef((o,e)=>{const{anchor:t="top",floating:r=!1,offset:n="2",size:y="1",variant:h="ghost",material:H,className:w,style:P,children:z,...F}=o,c=t==="top"||t==="bottom",S=a.useRef(null),j=a.useCallback(l=>{S.current=l,typeof e=="function"?e(l):e&&(e.current=l)},[e]);a.useEffect(()=>{const l=S.current;if(!l)return;const R=l.parentElement;if(!R)return;const C=()=>{let u=c?l.offsetHeight:l.offsetWidth;if(r){const D=getComputedStyle(l),M=parseFloat(D.marginTop)||0;u+=M*2}c?R.style.setProperty("--rt-toolbar-height",`${u}px`):R.style.setProperty("--rt-toolbar-width",`${u}px`)};C();const E=new ResizeObserver(C);return E.observe(l),()=>E.disconnect()},[c,r]);const W=r?{margin:`var(--space-${n})`,...P}:P;return a.createElement(N.Card,{ref:j,size:y,variant:h,material:H,"data-anchor":t,"data-floating":r||void 0,className:(0,s.default)("rt-Toolbar",w),style:W,...F},a.createElement(p.Flex,{align:"center",justify:"between",direction:c?"row":"column",gap:"2",className:"rt-ToolbarInner"},z))});m.displayName="Toolbar.Root";const T=a.forwardRef(({className:o,children:e,...t},r)=>a.createElement(p.Flex,{ref:r,align:"center",gap:"2",flexShrink:"0",className:(0,s.default)("rt-ToolbarSection","rt-ToolbarLeft",o),...t},e));T.displayName="Toolbar.Left";const b=a.forwardRef(({className:o,children:e,...t},r)=>a.createElement(p.Flex,{ref:r,align:"center",justify:"center",flexGrow:"1",minWidth:"0",className:(0,s.default)("rt-ToolbarSection","rt-ToolbarCenter",o),...t},e));b.displayName="Toolbar.Center";const d=a.forwardRef(({className:o,children:e,...t},r)=>a.createElement(p.Flex,{ref:r,align:"center",gap:"2",flexShrink:"0",className:(0,s.default)("rt-ToolbarSection","rt-ToolbarRight",o),...t},e));d.displayName="Toolbar.Right";const g=a.forwardRef(({className:o,size:e="3",weight:t="medium",truncate:r=!0,children:n,...y},h)=>a.createElement(L.Heading,{ref:h,size:e,weight:t,truncate:r,className:(0,s.default)("rt-ToolbarTitle",o),...y},n));g.displayName="Toolbar.Title";const i=m;i.Left=T,i.Center=b,i.Right=d,i.Title=g;
+"use strict";var $=Object.create;var f=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,I=Object.prototype.hasOwnProperty;var q=(o,e)=>{for(var t in e)f(o,t,{get:e[t],enumerable:!0})},v=(o,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of W(e))!I.call(o,a)&&a!==t&&f(o,a,{get:()=>e[a],enumerable:!(r=A(e,a))||r.enumerable});return o};var x=(o,e,t)=>(t=o!=null?$(k(o)):{},v(e||!o||!o.__esModule?f(t,"default",{value:o,enumerable:!0}):t,o)),B=o=>v(f({},"__esModule",{value:!0}),o);var G={};q(G,{Center:()=>y,Left:()=>b,Right:()=>d,Root:()=>m,Title:()=>g,Toolbar:()=>c});module.exports=B(G);var l=x(require("react")),p=x(require("classnames")),N=require("./card.js"),T=require("./flex.js"),L=require("./heading.js");const m=l.forwardRef((o,e)=>{const{anchor:t="top",floating:r=!1,offset:a="2",size:n="1",variant:i="ghost",material:H,className:F,style:h,children:z,...j}=o,R=t==="top"||t==="bottom",S=l.useRef(null),w=l.useCallback(s=>{S.current=s,typeof e=="function"?e(s):e&&(e.current=s)},[e]);l.useEffect(()=>{const s=S.current;if(!s)return;const u=s.parentElement;if(!u)return;const C=()=>{let P=R?s.offsetHeight:s.offsetWidth;if(r){const O=getComputedStyle(s),D=parseFloat(O.marginTop)||0;P+=D*2}R?u.style.setProperty("--rt-toolbar-height",`${P}px`):u.style.setProperty("--rt-toolbar-width",`${P}px`)};C();const E=new ResizeObserver(C);return E.observe(s),()=>E.disconnect()},[R,r]);const M=r?{margin:`var(--space-${a})`,...h}:h;return l.createElement(N.Card,{ref:w,size:n,variant:i,material:H,"data-anchor":t,"data-floating":r||void 0,className:(0,p.default)("rt-Toolbar",F),style:M,...j},l.createElement("div",{className:"rt-ToolbarInner"},z))});m.displayName="Toolbar.Root";const b=l.forwardRef(({gap:o="2",align:e="center",className:t,children:r,...a},n)=>l.createElement(T.Flex,{ref:n,align:e,gap:o,className:(0,p.default)("rt-ToolbarSection","rt-ToolbarLeft",t),...a},r));b.displayName="Toolbar.Left";const y=l.forwardRef(({gap:o="2",align:e="center",justify:t="center",className:r,children:a,...n},i)=>l.createElement(T.Flex,{ref:i,align:e,justify:t,gap:o,className:(0,p.default)("rt-ToolbarSection","rt-ToolbarCenter",r),...n},a));y.displayName="Toolbar.Center";const d=l.forwardRef(({gap:o="2",align:e="center",justify:t="end",className:r,children:a,...n},i)=>l.createElement(T.Flex,{ref:i,align:e,justify:t,gap:o,className:(0,p.default)("rt-ToolbarSection","rt-ToolbarRight",r),...n},a));d.displayName="Toolbar.Right";const g=l.forwardRef(({className:o,size:e="2",weight:t="medium",truncate:r=!0,children:a,...n},i)=>l.createElement(L.Heading,{ref:i,size:e,weight:t,truncate:r,className:(0,p.default)("rt-ToolbarTitle",o),...n},a));g.displayName="Toolbar.Title";const c=m;c.Left=b,c.Center=y,c.Right=d,c.Title=g;
 //# sourceMappingURL=toolbar.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/toolbar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { Card } from './card.js';\nimport { Flex } from './flex.js';\nimport { Heading } from './heading.js';\n\nimport type { CardProps } from './card.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\n\n// ============================================================================\n// Toolbar Root\n// ============================================================================\n\ntype ToolbarRootElement = React.ElementRef<'div'>;\ntype Anchor = 'top' | 'bottom' | 'left' | 'right';\ntype SpaceScale = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';\n\ninterface ToolbarRootProps extends Omit<CardProps, 'asChild'> {\n  /**\n   * Which edge to anchor to. Sets position: sticky and the appropriate edge.\n   * @default \"top\"\n   */\n  anchor?: Anchor;\n  /**\n   * Floating variant adds margin from edges for a detached look.\n   * When floating, shows full card treatment. When not floating, only shows exposed edge border.\n   * @default false\n   */\n  floating?: boolean;\n  /**\n   * Margin offset from edges when floating. Uses space scale values.\n   * @default \"2\"\n   */\n  offset?: SpaceScale;\n}\n\nconst ToolbarRoot = React.forwardRef<ToolbarRootElement, ToolbarRootProps>(\n  (props, forwardedRef) => {\n    const {\n      anchor = 'top',\n      floating = false,\n      offset = '2',\n      size = '1',\n      variant = 'ghost',\n      material,\n      className,\n      style,\n      children,\n      ...restProps\n    } = props;\n\n    const isHorizontal = anchor === 'top' || anchor === 'bottom';\n    const internalRef = React.useRef<HTMLDivElement>(null);\n\n    // Merge refs\n    const mergedRef = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        (internalRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(node);\n        } else if (forwardedRef) {\n          forwardedRef.current = node;\n        }\n      },\n      [forwardedRef],\n    );\n\n    // Measure and expose height/width as CSS variable on parent element\n    // so that sibling elements can access it\n    React.useEffect(() => {\n      const element = internalRef.current;\n      if (!element) return;\n\n      const parent = element.parentElement;\n      if (!parent) return;\n\n      const updateDimension = () => {\n        let dimension = isHorizontal ? element.offsetHeight : element.offsetWidth;\n\n        // For floating toolbars, include the margin offset (2x for top + bottom or left + right)\n        if (floating) {\n          const computedStyle = getComputedStyle(element);\n          const margin = parseFloat(computedStyle.marginTop) || 0;\n          dimension += margin * 2;\n        }\n\n        if (isHorizontal) {\n          parent.style.setProperty('--rt-toolbar-height', `${dimension}px`);\n        } else {\n          parent.style.setProperty('--rt-toolbar-width', `${dimension}px`);\n        }\n      };\n\n      updateDimension();\n\n      const resizeObserver = new ResizeObserver(updateDimension);\n      resizeObserver.observe(element);\n\n      return () => resizeObserver.disconnect();\n    }, [isHorizontal, floating]);\n\n    const floatingStyle = floating\n      ? { margin: `var(--space-${offset})`, ...style }\n      : style;\n\n    return (\n      <Card\n        ref={mergedRef}\n        size={size}\n        variant={variant}\n        material={material}\n        data-anchor={anchor}\n        data-floating={floating || undefined}\n        className={classNames('rt-Toolbar', className)}\n        style={floatingStyle}\n        {...restProps}\n      >\n        <Flex\n          align=\"center\"\n          justify=\"between\"\n          direction={isHorizontal ? 'row' : 'column'}\n          gap=\"2\"\n          className=\"rt-ToolbarInner\"\n        >\n          {children}\n        </Flex>\n      </Card>\n    );\n  },\n);\nToolbarRoot.displayName = 'Toolbar.Root';\n\n// ============================================================================\n// Toolbar Left (for horizontal) / Start (alias)\n// ============================================================================\n\ntype ToolbarSectionElement = React.ElementRef<'div'>;\ninterface ToolbarSectionProps extends ComponentPropsWithout<'div', RemovedProps> {}\n\nconst ToolbarLeft = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(\n  ({ className, children, ...props }, forwardedRef) => (\n    <Flex\n      ref={forwardedRef}\n      align=\"center\"\n      gap=\"2\"\n      flexShrink=\"0\"\n      className={classNames('rt-ToolbarSection', 'rt-ToolbarLeft', className)}\n      {...props}\n    >\n      {children}\n    </Flex>\n  ),\n);\nToolbarLeft.displayName = 'Toolbar.Left';\n\n// ============================================================================\n// Toolbar Center\n// ============================================================================\n\nconst ToolbarCenter = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(\n  ({ className, children, ...props }, forwardedRef) => (\n    <Flex\n      ref={forwardedRef}\n      align=\"center\"\n      justify=\"center\"\n      flexGrow=\"1\"\n      minWidth=\"0\"\n      className={classNames('rt-ToolbarSection', 'rt-ToolbarCenter', className)}\n      {...props}\n    >\n      {children}\n    </Flex>\n  ),\n);\nToolbarCenter.displayName = 'Toolbar.Center';\n\n// ============================================================================\n// Toolbar Right (for horizontal) / End (alias)\n// ============================================================================\n\nconst ToolbarRight = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(\n  ({ className, children, ...props }, forwardedRef) => (\n    <Flex\n      ref={forwardedRef}\n      align=\"center\"\n      gap=\"2\"\n      flexShrink=\"0\"\n      className={classNames('rt-ToolbarSection', 'rt-ToolbarRight', className)}\n      {...props}\n    >\n      {children}\n    </Flex>\n  ),\n);\nToolbarRight.displayName = 'Toolbar.Right';\n\n// ============================================================================\n// Toolbar Title\n// ============================================================================\n\ntype ToolbarTitleElement = React.ElementRef<typeof Heading>;\ninterface ToolbarTitleProps extends React.ComponentPropsWithoutRef<typeof Heading> {}\n\nconst ToolbarTitle = React.forwardRef<ToolbarTitleElement, ToolbarTitleProps>(\n  ({ className, size = '3', weight = 'medium', truncate = true, children, ...props }, forwardedRef) => (\n    <Heading\n      ref={forwardedRef}\n      size={size}\n      weight={weight}\n      truncate={truncate}\n      className={classNames('rt-ToolbarTitle', className)}\n      {...props}\n    >\n      {children}\n    </Heading>\n  ),\n);\nToolbarTitle.displayName = 'Toolbar.Title';\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nconst Toolbar = ToolbarRoot as typeof ToolbarRoot & {\n  Left: typeof ToolbarLeft;\n  Center: typeof ToolbarCenter;\n  Right: typeof ToolbarRight;\n  Title: typeof ToolbarTitle;\n};\n\nToolbar.Left = ToolbarLeft;\nToolbar.Center = ToolbarCenter;\nToolbar.Right = ToolbarRight;\nToolbar.Title = ToolbarTitle;\n\nexport {\n  Toolbar,\n  ToolbarRoot as Root,\n  ToolbarLeft as Left,\n  ToolbarCenter as Center,\n  ToolbarRight as Right,\n  ToolbarTitle as Title,\n};\nexport type {\n  ToolbarRootProps as RootProps,\n  ToolbarSectionProps as LeftProps,\n  ToolbarSectionProps as CenterProps,\n  ToolbarSectionProps as RightProps,\n  ToolbarTitleProps as TitleProps,\n};\n"],
-  "mappings": "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",
-  "names": ["toolbar_exports", "__export", "ToolbarCenter", "ToolbarLeft", "ToolbarRight", "ToolbarRoot", "ToolbarTitle", "Toolbar", "__toCommonJS", "React", "import_classnames", "import_card", "import_flex", "import_heading", "props", "forwardedRef", "anchor", "floating", "offset", "size", "variant", "material", "className", "style", "children", "restProps", "isHorizontal", "internalRef", "mergedRef", "node", "element", "parent", "updateDimension", "dimension", "computedStyle", "margin", "resizeObserver", "floatingStyle", "classNames", "weight", "truncate"]
+  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { Card } from './card.js';\nimport { Flex } from './flex.js';\nimport { Heading } from './heading.js';\n\nimport type { CardProps } from './card.js';\nimport type { FlexProps } from './flex.js';\n\n// ============================================================================\n// Toolbar Root\n// ============================================================================\n\ntype ToolbarRootElement = React.ElementRef<'div'>;\ntype Anchor = 'top' | 'bottom' | 'left' | 'right';\ntype SpaceScale = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';\n\ninterface ToolbarRootProps extends Omit<CardProps, 'asChild'> {\n  /**\n   * Which edge to anchor to. Sets position: sticky and the appropriate edge.\n   * @default \"top\"\n   */\n  anchor?: Anchor;\n  /**\n   * Floating mode adds margin from edges for a detached look with absolute positioning.\n   * When false (default), uses inset mode with negative margins to go edge-to-edge inside Cards.\n   * @default false\n   */\n  floating?: boolean;\n  /**\n   * Margin offset from edges when floating. Uses space scale values.\n   * @default \"2\"\n   */\n  offset?: SpaceScale;\n}\n\nconst ToolbarRoot = React.forwardRef<ToolbarRootElement, ToolbarRootProps>(\n  (props, forwardedRef) => {\n    const {\n      anchor = 'top',\n      floating = false,\n      offset = '2',\n      size = '1',\n      variant = 'ghost',\n      material,\n      className,\n      style,\n      children,\n      ...restProps\n    } = props;\n\n    const isHorizontal = anchor === 'top' || anchor === 'bottom';\n    const internalRef = React.useRef<HTMLDivElement>(null);\n\n    // Merge refs\n    const mergedRef = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        (internalRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(node);\n        } else if (forwardedRef) {\n          forwardedRef.current = node;\n        }\n      },\n      [forwardedRef],\n    );\n\n    // Expose height/width as CSS variable on parent element\n    React.useEffect(() => {\n      const element = internalRef.current;\n      if (!element) return;\n\n      const parent = element.parentElement;\n      if (!parent) return;\n\n      const update = () => {\n        let dimension = isHorizontal ? element.offsetHeight : element.offsetWidth;\n\n        // For floating mode, include the margin in the total space\n        if (floating) {\n          const computedStyle = getComputedStyle(element);\n          const margin = parseFloat(computedStyle.marginTop) || 0;\n          dimension += margin * 2;\n        }\n\n        if (isHorizontal) {\n          parent.style.setProperty('--rt-toolbar-height', `${dimension}px`);\n        } else {\n          parent.style.setProperty('--rt-toolbar-width', `${dimension}px`);\n        }\n      };\n\n      update();\n\n      const resizeObserver = new ResizeObserver(update);\n      resizeObserver.observe(element);\n\n      return () => resizeObserver.disconnect();\n    }, [isHorizontal, floating]);\n\n    const computedStyle = floating\n      ? { margin: `var(--space-${offset})`, ...style }\n      : style;\n\n    return (\n      <Card\n        ref={mergedRef}\n        size={size}\n        variant={variant}\n        material={material}\n        data-anchor={anchor}\n        data-floating={floating || undefined}\n        className={classNames('rt-Toolbar', className)}\n        style={computedStyle}\n        {...restProps}\n      >\n        <div className=\"rt-ToolbarInner\">\n          {children}\n        </div>\n      </Card>\n    );\n  },\n);\nToolbarRoot.displayName = 'Toolbar.Root';\n\n// ============================================================================\n// Toolbar Left (for horizontal) / Start (alias)\n// ============================================================================\n\ntype ToolbarSectionElement = React.ElementRef<'div'>;\ntype ToolbarSectionProps = FlexProps;\n\nconst ToolbarLeft = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(\n  ({ gap = '2', align = 'center', className, children, ...props }, forwardedRef) => (\n    <Flex\n      ref={forwardedRef}\n      align={align}\n      gap={gap}\n      className={classNames('rt-ToolbarSection', 'rt-ToolbarLeft', className)}\n      {...props}\n    >\n      {children}\n    </Flex>\n  ),\n);\nToolbarLeft.displayName = 'Toolbar.Left';\n\n// ============================================================================\n// Toolbar Center\n// ============================================================================\n\nconst ToolbarCenter = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(\n  ({ gap = '2', align = 'center', justify = 'center', className, children, ...props }, forwardedRef) => (\n    <Flex\n      ref={forwardedRef}\n      align={align}\n      justify={justify}\n      gap={gap}\n      className={classNames('rt-ToolbarSection', 'rt-ToolbarCenter', className)}\n      {...props}\n    >\n      {children}\n    </Flex>\n  ),\n);\nToolbarCenter.displayName = 'Toolbar.Center';\n\n// ============================================================================\n// Toolbar Right (for horizontal) / End (alias)\n// ============================================================================\n\nconst ToolbarRight = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(\n  ({ gap = '2', align = 'center', justify = 'end', className, children, ...props }, forwardedRef) => (\n    <Flex\n      ref={forwardedRef}\n      align={align}\n      justify={justify}\n      gap={gap}\n      className={classNames('rt-ToolbarSection', 'rt-ToolbarRight', className)}\n      {...props}\n    >\n      {children}\n    </Flex>\n  ),\n);\nToolbarRight.displayName = 'Toolbar.Right';\n\n// ============================================================================\n// Toolbar Title\n// ============================================================================\n\ntype ToolbarTitleElement = React.ElementRef<typeof Heading>;\ninterface ToolbarTitleProps extends React.ComponentPropsWithoutRef<typeof Heading> {}\n\nconst ToolbarTitle = React.forwardRef<ToolbarTitleElement, ToolbarTitleProps>(\n  ({ className, size = '2', weight = 'medium', truncate = true, children, ...props }, forwardedRef) => (\n    <Heading\n      ref={forwardedRef}\n      size={size}\n      weight={weight}\n      truncate={truncate}\n      className={classNames('rt-ToolbarTitle', className)}\n      {...props}\n    >\n      {children}\n    </Heading>\n  ),\n);\nToolbarTitle.displayName = 'Toolbar.Title';\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nconst Toolbar = ToolbarRoot as typeof ToolbarRoot & {\n  Left: typeof ToolbarLeft;\n  Center: typeof ToolbarCenter;\n  Right: typeof ToolbarRight;\n  Title: typeof ToolbarTitle;\n};\n\nToolbar.Left = ToolbarLeft;\nToolbar.Center = ToolbarCenter;\nToolbar.Right = ToolbarRight;\nToolbar.Title = ToolbarTitle;\n\nexport {\n  Toolbar,\n  ToolbarRoot as Root,\n  ToolbarLeft as Left,\n  ToolbarCenter as Center,\n  ToolbarRight as Right,\n  ToolbarTitle as Title,\n};\nexport type {\n  ToolbarRootProps as RootProps,\n  ToolbarSectionProps as LeftProps,\n  ToolbarSectionProps as CenterProps,\n  ToolbarSectionProps as RightProps,\n  ToolbarTitleProps as TitleProps,\n};\n"],
+  "mappings": "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",
+  "names": ["toolbar_exports", "__export", "ToolbarCenter", "ToolbarLeft", "ToolbarRight", "ToolbarRoot", "ToolbarTitle", "Toolbar", "__toCommonJS", "React", "import_classnames", "import_card", "import_flex", "import_heading", "props", "forwardedRef", "anchor", "floating", "offset", "size", "variant", "material", "className", "style", "children", "restProps", "isHorizontal", "internalRef", "mergedRef", "node", "element", "parent", "update", "dimension", "computedStyle", "margin", "resizeObserver", "classNames", "gap", "align", "justify", "weight", "truncate"]
 }

package/dist/esm/components/card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAI/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,KAAK,YAAY,GAAG,eAAe,CAAC,OAAO,YAAY,CAAC,CAAC;AACzD,UAAU,SAAU,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,CAAC,EAAE,WAAW,EAAE,YAAY;CAAG;AACpG,QAAA,MAAM,IAAI,kFAkBR,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,YAAY,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../src/components/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAI/C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D,KAAK,YAAY,GAAG,eAAe,CAAC,OAAO,YAAY,CAAC,CAAC;AACzD,UAAU,SAAU,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,CAAC,EAAE,WAAW,EAAE,YAAY;CAAG;AACpG,QAAA,MAAM,IAAI,kFAmBR,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/dist/esm/components/card.js

@@ -1,2 +1,2 @@
-import*as o from"react";import P from"classnames";import{Slot as c}from"radix-ui";import{cardPropDefs as l}from"./card.props.js";import{extractProps as C}from"../helpers/extract-props.js";import{marginPropDefs as y}from"../props/margin.props.js";const e=o.forwardRef((p,t)=>{const{asChild:a,className:s,panelBackground:m,material:d,flush:n,...f}=C(p,l,y),r=d||m,i=a?c.Root:"div";return o.createElement(i,{ref:t,...f,"data-panel-background":r,"data-material":r,"data-flush":n?"true":void 0,className:P("rt-reset","rt-BaseCard","rt-Card",s)})});e.displayName="Card";export{e as Card};
+import*as e from"react";import c from"classnames";import{Slot as l}from"radix-ui";import{cardPropDefs as C}from"./card.props.js";import{extractProps as u}from"../helpers/extract-props.js";import{marginPropDefs as y}from"../props/margin.props.js";const o=e.forwardRef((t,p)=>{const{asChild:a,className:s,panelBackground:m,material:d,flush:n,inset:i,...f}=u(t,C,y),r=d||m,P=a?l.Root:"div";return e.createElement(P,{ref:p,...f,"data-panel-background":r,"data-material":r,"data-flush":n?"true":void 0,"data-inset":i?"true":void 0,className:c("rt-reset","rt-BaseCard","rt-Card",s)})});o.displayName="Card";export{o as Card};
 //# sourceMappingURL=card.js.map

package/dist/esm/components/card.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/card.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from 'radix-ui';\n\nimport { cardPropDefs } from './card.props.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\n\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype CardElement = React.ElementRef<'div'>;\ntype CardOwnProps = GetPropDefTypes<typeof cardPropDefs>;\ninterface CardProps extends ComponentPropsWithout<'div', RemovedProps>, MarginProps, CardOwnProps {}\nconst Card = React.forwardRef<CardElement, CardProps>((props, forwardedRef) => {\n  const { asChild, className, panelBackground, material, flush, ...cardProps } = extractProps(\n    props,\n    cardPropDefs,\n    marginPropDefs,\n  );\n  const effectiveMaterial = material || panelBackground;\n  const Comp = asChild ? Slot.Root : 'div';\n  return (\n    <Comp\n      ref={forwardedRef}\n      {...cardProps}\n      data-panel-background={effectiveMaterial}\n      data-material={effectiveMaterial}\n      data-flush={flush ? 'true' : undefined}\n      className={classNames('rt-reset', 'rt-BaseCard', 'rt-Card', className)}\n    />\n  );\n});\nCard.displayName = 'Card';\n\nexport { Card };\nexport type { CardProps };\n"],
-  "mappings": "AAAA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aACvB,OAAS,QAAAC,MAAY,WAErB,OAAS,gBAAAC,MAAoB,kBAC7B,OAAS,gBAAAC,MAAoB,8BAC7B,OAAS,kBAAAC,MAAsB,2BAS/B,MAAMC,EAAON,EAAM,WAAmC,CAACO,EAAOC,IAAiB,CAC7E,KAAM,CAAE,QAAAC,EAAS,UAAAC,EAAW,gBAAAC,EAAiB,SAAAC,EAAU,MAAAC,EAAO,GAAGC,CAAU,EAAIV,EAC7EG,EACAJ,EACAE,CACF,EACMU,EAAoBH,GAAYD,EAChCK,EAAOP,EAAUP,EAAK,KAAO,MACnC,OACEF,EAAA,cAACgB,EAAA,CACC,IAAKR,EACJ,GAAGM,EACJ,wBAAuBC,EACvB,gBAAeA,EACf,aAAYF,EAAQ,OAAS,OAC7B,UAAWZ,EAAW,WAAY,cAAe,UAAWS,CAAS,EACvE,CAEJ,CAAC,EACDJ,EAAK,YAAc",
-  "names": ["React", "classNames", "Slot", "cardPropDefs", "extractProps", "marginPropDefs", "Card", "props", "forwardedRef", "asChild", "className", "panelBackground", "material", "flush", "cardProps", "effectiveMaterial", "Comp"]
+  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\nimport { Slot } from 'radix-ui';\n\nimport { cardPropDefs } from './card.props.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { marginPropDefs } from '../props/margin.props.js';\n\nimport type { MarginProps } from '../props/margin.props.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { GetPropDefTypes } from '../props/prop-def.js';\n\ntype CardElement = React.ElementRef<'div'>;\ntype CardOwnProps = GetPropDefTypes<typeof cardPropDefs>;\ninterface CardProps extends ComponentPropsWithout<'div', RemovedProps>, MarginProps, CardOwnProps {}\nconst Card = React.forwardRef<CardElement, CardProps>((props, forwardedRef) => {\n  const { asChild, className, panelBackground, material, flush, inset, ...cardProps } = extractProps(\n    props,\n    cardPropDefs,\n    marginPropDefs,\n  );\n  const effectiveMaterial = material || panelBackground;\n  const Comp = asChild ? Slot.Root : 'div';\n  return (\n    <Comp\n      ref={forwardedRef}\n      {...cardProps}\n      data-panel-background={effectiveMaterial}\n      data-material={effectiveMaterial}\n      data-flush={flush ? 'true' : undefined}\n      data-inset={inset ? 'true' : undefined}\n      className={classNames('rt-reset', 'rt-BaseCard', 'rt-Card', className)}\n    />\n  );\n});\nCard.displayName = 'Card';\n\nexport { Card };\nexport type { CardProps };\n"],
+  "mappings": "AAAA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aACvB,OAAS,QAAAC,MAAY,WAErB,OAAS,gBAAAC,MAAoB,kBAC7B,OAAS,gBAAAC,MAAoB,8BAC7B,OAAS,kBAAAC,MAAsB,2BAS/B,MAAMC,EAAON,EAAM,WAAmC,CAACO,EAAOC,IAAiB,CAC7E,KAAM,CAAE,QAAAC,EAAS,UAAAC,EAAW,gBAAAC,EAAiB,SAAAC,EAAU,MAAAC,EAAO,MAAAC,EAAO,GAAGC,CAAU,EAAIX,EACpFG,EACAJ,EACAE,CACF,EACMW,EAAoBJ,GAAYD,EAChCM,EAAOR,EAAUP,EAAK,KAAO,MACnC,OACEF,EAAA,cAACiB,EAAA,CACC,IAAKT,EACJ,GAAGO,EACJ,wBAAuBC,EACvB,gBAAeA,EACf,aAAYH,EAAQ,OAAS,OAC7B,aAAYC,EAAQ,OAAS,OAC7B,UAAWb,EAAW,WAAY,cAAe,UAAWS,CAAS,EACvE,CAEJ,CAAC,EACDJ,EAAK,YAAc",
+  "names": ["React", "classNames", "Slot", "cardPropDefs", "extractProps", "marginPropDefs", "Card", "props", "forwardedRef", "asChild", "className", "panelBackground", "material", "flush", "inset", "cardProps", "effectiveMaterial", "Comp"]
 }

package/dist/esm/components/card.props.d.ts

@@ -26,6 +26,10 @@ declare const cardPropDefs: {
         type: "boolean";
         default: false;
     };
+    inset: {
+        type: "boolean";
+        default: false;
+    };
     asChild: {
         type: "boolean";
     };

package/dist/esm/components/card.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card.props.d.ts","sourceRoot":"","sources":["../../../src/components/card.props.tsx"],"names":[],"mappings":"AASA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAajB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}
+{"version":3,"file":"card.props.d.ts","sourceRoot":"","sources":["../../../src/components/card.props.tsx"],"names":[],"mappings":"AASA,QAAA,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAejB,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/dist/esm/components/card.props.js

@@ -1,2 +1,2 @@
-import{asChildPropDef as e}from"../props/as-child.prop.js";const s=["1","2","3","4","5"],a=["surface","outline","classic","ghost","soft"],t=["solid","translucent"],n=["solid","translucent"],o={...e,size:{type:"enum",className:"rt-r-size",values:s,default:"1",responsive:!0},variant:{type:"enum",className:"rt-variant",values:a,default:"outline"},panelBackground:{type:"enum",values:t,default:void 0},material:{type:"enum",values:n,default:void 0},flush:{type:"boolean",default:!1}};export{o as cardPropDefs};
+import{asChildPropDef as e}from"../props/as-child.prop.js";const s=["1","2","3","4","5"],a=["surface","outline","classic","ghost","soft"],t=["solid","translucent"],n=["solid","translucent"],o={...e,size:{type:"enum",className:"rt-r-size",values:s,default:"1",responsive:!0},variant:{type:"enum",className:"rt-variant",values:a,default:"outline"},panelBackground:{type:"enum",values:t,default:void 0},material:{type:"enum",values:n,default:void 0},flush:{type:"boolean",default:!1},inset:{type:"boolean",default:!1}};export{o as cardPropDefs};
 //# sourceMappingURL=card.props.js.map

package/dist/esm/components/card.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/card.props.tsx"],
-  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3', '4', '5'] as const;\nconst variants = ['surface', 'outline', 'classic', 'ghost', 'soft'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\nconst materials = ['solid', 'translucent'] as const;\n\nconst cardPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'outline' },\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },\n  material: { type: 'enum', values: materials, default: undefined },\n  flush: { type: 'boolean', default: false },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;\n  material: PropDef<(typeof materials)[number] | undefined>;\n  flush: PropDef<boolean>;\n};\n\nexport { cardPropDefs };\n"],
-  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,4BAI/B,MAAMC,EAAQ,CAAC,IAAK,IAAK,IAAK,IAAK,GAAG,EAChCC,EAAW,CAAC,UAAW,UAAW,UAAW,QAAS,MAAM,EAC5DC,EAAmB,CAAC,QAAS,aAAa,EAC1CC,EAAY,CAAC,QAAS,aAAa,EAEnCC,EAAe,CACnB,GAAGL,EACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQC,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,gBAAiB,CAAE,KAAM,OAAQ,OAAQC,EAAkB,QAAS,MAAU,EAC9E,SAAU,CAAE,KAAM,OAAQ,OAAQC,EAAW,QAAS,MAAU,EAChE,MAAO,CAAE,KAAM,UAAW,QAAS,EAAM,CAC3C",
+  "sourcesContent": ["import { asChildPropDef } from '../props/as-child.prop.js';\n\nimport type { PropDef } from '../props/prop-def.js';\n\nconst sizes = ['1', '2', '3', '4', '5'] as const;\nconst variants = ['surface', 'outline', 'classic', 'ghost', 'soft'] as const;\nconst panelBackgrounds = ['solid', 'translucent'] as const;\nconst materials = ['solid', 'translucent'] as const;\n\nconst cardPropDefs = {\n  ...asChildPropDef,\n  size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },\n  variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'outline' },\n  panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },\n  material: { type: 'enum', values: materials, default: undefined },\n  flush: { type: 'boolean', default: false },\n  inset: { type: 'boolean', default: false },\n} satisfies {\n  size: PropDef<(typeof sizes)[number]>;\n  variant: PropDef<(typeof variants)[number]>;\n  panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;\n  material: PropDef<(typeof materials)[number] | undefined>;\n  flush: PropDef<boolean>;\n  inset: PropDef<boolean>;\n};\n\nexport { cardPropDefs };\n"],
+  "mappings": "AAAA,OAAS,kBAAAA,MAAsB,4BAI/B,MAAMC,EAAQ,CAAC,IAAK,IAAK,IAAK,IAAK,GAAG,EAChCC,EAAW,CAAC,UAAW,UAAW,UAAW,QAAS,MAAM,EAC5DC,EAAmB,CAAC,QAAS,aAAa,EAC1CC,EAAY,CAAC,QAAS,aAAa,EAEnCC,EAAe,CACnB,GAAGL,EACH,KAAM,CAAE,KAAM,OAAQ,UAAW,YAAa,OAAQC,EAAO,QAAS,IAAK,WAAY,EAAK,EAC5F,QAAS,CAAE,KAAM,OAAQ,UAAW,aAAc,OAAQC,EAAU,QAAS,SAAU,EACvF,gBAAiB,CAAE,KAAM,OAAQ,OAAQC,EAAkB,QAAS,MAAU,EAC9E,SAAU,CAAE,KAAM,OAAQ,OAAQC,EAAW,QAAS,MAAU,EAChE,MAAO,CAAE,KAAM,UAAW,QAAS,EAAM,EACzC,MAAO,CAAE,KAAM,UAAW,QAAS,EAAM,CAC3C",
   "names": ["asChildPropDef", "sizes", "variants", "panelBackgrounds", "materials", "cardPropDefs"]
 }

package/dist/esm/components/toolbar.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Heading } from './heading.js';
 import type { CardProps } from './card.js';
-import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+import type { FlexProps } from './flex.js';
 type Anchor = 'top' | 'bottom' | 'left' | 'right';
 type SpaceScale = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
 interface ToolbarRootProps extends Omit<CardProps, 'asChild'> {
@@ -11,8 +11,8 @@ interface ToolbarRootProps extends Omit<CardProps, 'asChild'> {
      */
     anchor?: Anchor;
     /**
-     * Floating variant adds margin from edges for a detached look.
-     * When floating, shows full card treatment. When not floating, only shows exposed edge border.
+     * Floating mode adds margin from edges for a detached look with absolute positioning.
+     * When false (default), uses inset mode with negative margins to go edge-to-edge inside Cards.
      * @default false
      */
     floating?: boolean;
@@ -23,11 +23,10 @@ interface ToolbarRootProps extends Omit<CardProps, 'asChild'> {
     offset?: SpaceScale;
 }
 declare const ToolbarRoot: React.ForwardRefExoticComponent<ToolbarRootProps & React.RefAttributes<HTMLDivElement>>;
-interface ToolbarSectionProps extends ComponentPropsWithout<'div', RemovedProps> {
-}
-declare const ToolbarLeft: React.ForwardRefExoticComponent<ToolbarSectionProps & React.RefAttributes<HTMLDivElement>>;
-declare const ToolbarCenter: React.ForwardRefExoticComponent<ToolbarSectionProps & React.RefAttributes<HTMLDivElement>>;
-declare const ToolbarRight: React.ForwardRefExoticComponent<ToolbarSectionProps & React.RefAttributes<HTMLDivElement>>;
+type ToolbarSectionProps = FlexProps;
+declare const ToolbarLeft: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
+declare const ToolbarCenter: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
+declare const ToolbarRight: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
 interface ToolbarTitleProps extends React.ComponentPropsWithoutRef<typeof Heading> {
 }
 declare const ToolbarTitle: React.ForwardRefExoticComponent<ToolbarTitleProps & React.RefAttributes<HTMLHeadingElement>>;

package/dist/esm/components/toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAOzF,KAAK,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAClD,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtE,UAAU,gBAAiB,SAAQ,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC;IAC3D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,QAAA,MAAM,WAAW,yFA6FhB,CAAC;AAQF,UAAU,mBAAoB,SAAQ,qBAAqB,CAAC,KAAK,EAAE,YAAY,CAAC;CAAG;AAEnF,QAAA,MAAM,WAAW,4FAahB,CAAC;AAOF,QAAA,MAAM,aAAa,4FAclB,CAAC;AAOF,QAAA,MAAM,YAAY,4FAajB,CAAC;AAQF,UAAU,iBAAkB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,OAAO,CAAC;CAAG;AAErF,QAAA,MAAM,YAAY,8FAajB,CAAC;AAOF,QAAA,MAAM,OAAO,EAAkB,OAAO,WAAW,GAAG;IAClD,IAAI,EAAE,OAAO,WAAW,CAAC;IACzB,MAAM,EAAE,OAAO,aAAa,CAAC;IAC7B,KAAK,EAAE,OAAO,YAAY,CAAC;IAC3B,KAAK,EAAE,OAAO,YAAY,CAAC;CAC5B,CAAC;AAOF,OAAO,EACL,OAAO,EACP,WAAW,IAAI,IAAI,EACnB,WAAW,IAAI,IAAI,EACnB,aAAa,IAAI,MAAM,EACvB,YAAY,IAAI,KAAK,EACrB,YAAY,IAAI,KAAK,GACtB,CAAC;AACF,YAAY,EACV,gBAAgB,IAAI,SAAS,EAC7B,mBAAmB,IAAI,SAAS,EAChC,mBAAmB,IAAI,WAAW,EAClC,mBAAmB,IAAI,UAAU,EACjC,iBAAiB,IAAI,UAAU,GAChC,CAAC"}
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAO3C,KAAK,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAClD,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEtE,UAAU,gBAAiB,SAAQ,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC;IAC3D;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,QAAA,MAAM,WAAW,yFAsFhB,CAAC;AAQF,KAAK,mBAAmB,GAAG,SAAS,CAAC;AAErC,QAAA,MAAM,WAAW,kFAYhB,CAAC;AAOF,QAAA,MAAM,aAAa,kFAalB,CAAC;AAOF,QAAA,MAAM,YAAY,kFAajB,CAAC;AAQF,UAAU,iBAAkB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,OAAO,CAAC;CAAG;AAErF,QAAA,MAAM,YAAY,8FAajB,CAAC;AAOF,QAAA,MAAM,OAAO,EAAkB,OAAO,WAAW,GAAG;IAClD,IAAI,EAAE,OAAO,WAAW,CAAC;IACzB,MAAM,EAAE,OAAO,aAAa,CAAC;IAC7B,KAAK,EAAE,OAAO,YAAY,CAAC;IAC3B,KAAK,EAAE,OAAO,YAAY,CAAC;CAC5B,CAAC;AAOF,OAAO,EACL,OAAO,EACP,WAAW,IAAI,IAAI,EACnB,WAAW,IAAI,IAAI,EACnB,aAAa,IAAI,MAAM,EACvB,YAAY,IAAI,KAAK,EACrB,YAAY,IAAI,KAAK,GACtB,CAAC;AACF,YAAY,EACV,gBAAgB,IAAI,SAAS,EAC7B,mBAAmB,IAAI,SAAS,EAChC,mBAAmB,IAAI,WAAW,EAClC,mBAAmB,IAAI,UAAU,EACjC,iBAAiB,IAAI,UAAU,GAChC,CAAC"}

package/dist/esm/components/toolbar.js

@@ -1,2 +1,2 @@
-import*as e from"react";import n from"classnames";import{Card as F}from"./card.js";import{Flex as p}from"./flex.js";import{Heading as j}from"./heading.js";const d=e.forwardRef((l,o)=>{const{anchor:r="top",floating:t=!1,offset:c="2",size:f="1",variant:m="ghost",material:E,className:x,style:u,children:v,...N}=l,i=r==="top"||r==="bottom",P=e.useRef(null),L=e.useCallback(a=>{P.current=a,typeof o=="function"?o(a):o&&(o.current=a)},[o]);e.useEffect(()=>{const a=P.current;if(!a)return;const T=a.parentElement;if(!T)return;const S=()=>{let b=i?a.offsetHeight:a.offsetWidth;if(t){const w=getComputedStyle(a),z=parseFloat(w.marginTop)||0;b+=z*2}i?T.style.setProperty("--rt-toolbar-height",`${b}px`):T.style.setProperty("--rt-toolbar-width",`${b}px`)};S();const C=new ResizeObserver(S);return C.observe(a),()=>C.disconnect()},[i,t]);const H=t?{margin:`var(--space-${c})`,...u}:u;return e.createElement(F,{ref:L,size:f,variant:m,material:E,"data-anchor":r,"data-floating":t||void 0,className:n("rt-Toolbar",x),style:H,...N},e.createElement(p,{align:"center",justify:"between",direction:i?"row":"column",gap:"2",className:"rt-ToolbarInner"},v))});d.displayName="Toolbar.Root";const g=e.forwardRef(({className:l,children:o,...r},t)=>e.createElement(p,{ref:t,align:"center",gap:"2",flexShrink:"0",className:n("rt-ToolbarSection","rt-ToolbarLeft",l),...r},o));g.displayName="Toolbar.Left";const y=e.forwardRef(({className:l,children:o,...r},t)=>e.createElement(p,{ref:t,align:"center",justify:"center",flexGrow:"1",minWidth:"0",className:n("rt-ToolbarSection","rt-ToolbarCenter",l),...r},o));y.displayName="Toolbar.Center";const h=e.forwardRef(({className:l,children:o,...r},t)=>e.createElement(p,{ref:t,align:"center",gap:"2",flexShrink:"0",className:n("rt-ToolbarSection","rt-ToolbarRight",l),...r},o));h.displayName="Toolbar.Right";const R=e.forwardRef(({className:l,size:o="3",weight:r="medium",truncate:t=!0,children:c,...f},m)=>e.createElement(j,{ref:m,size:o,weight:r,truncate:t,className:n("rt-ToolbarTitle",l),...f},c));R.displayName="Toolbar.Title";const s=d;s.Left=g,s.Center=y,s.Right=h,s.Title=R;export{y as Center,g as Left,h as Right,d as Root,R as Title,s as Toolbar};
+import*as e from"react";import p from"classnames";import{Card as j}from"./card.js";import{Flex as b}from"./flex.js";import{Heading as w}from"./heading.js";const y=e.forwardRef((l,o)=>{const{anchor:r="top",floating:t=!1,offset:s="2",size:n="1",variant:i="ghost",material:E,className:v,style:P,children:x,...N}=l,f=r==="top"||r==="bottom",h=e.useRef(null),L=e.useCallback(a=>{h.current=a,typeof o=="function"?o(a):o&&(o.current=a)},[o]);e.useEffect(()=>{const a=h.current;if(!a)return;const T=a.parentElement;if(!T)return;const S=()=>{let m=f?a.offsetHeight:a.offsetWidth;if(t){const F=getComputedStyle(a),z=parseFloat(F.marginTop)||0;m+=z*2}f?T.style.setProperty("--rt-toolbar-height",`${m}px`):T.style.setProperty("--rt-toolbar-width",`${m}px`)};S();const C=new ResizeObserver(S);return C.observe(a),()=>C.disconnect()},[f,t]);const H=t?{margin:`var(--space-${s})`,...P}:P;return e.createElement(j,{ref:L,size:n,variant:i,material:E,"data-anchor":r,"data-floating":t||void 0,className:p("rt-Toolbar",v),style:H,...N},e.createElement("div",{className:"rt-ToolbarInner"},x))});y.displayName="Toolbar.Root";const d=e.forwardRef(({gap:l="2",align:o="center",className:r,children:t,...s},n)=>e.createElement(b,{ref:n,align:o,gap:l,className:p("rt-ToolbarSection","rt-ToolbarLeft",r),...s},t));d.displayName="Toolbar.Left";const g=e.forwardRef(({gap:l="2",align:o="center",justify:r="center",className:t,children:s,...n},i)=>e.createElement(b,{ref:i,align:o,justify:r,gap:l,className:p("rt-ToolbarSection","rt-ToolbarCenter",t),...n},s));g.displayName="Toolbar.Center";const R=e.forwardRef(({gap:l="2",align:o="center",justify:r="end",className:t,children:s,...n},i)=>e.createElement(b,{ref:i,align:o,justify:r,gap:l,className:p("rt-ToolbarSection","rt-ToolbarRight",t),...n},s));R.displayName="Toolbar.Right";const u=e.forwardRef(({className:l,size:o="2",weight:r="medium",truncate:t=!0,children:s,...n},i)=>e.createElement(w,{ref:i,size:o,weight:r,truncate:t,className:p("rt-ToolbarTitle",l),...n},s));u.displayName="Toolbar.Title";const c=y;c.Left=d,c.Center=g,c.Right=R,c.Title=u;export{g as Center,d as Left,R as Right,y as Root,u as Title,c as Toolbar};
 //# sourceMappingURL=toolbar.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/toolbar.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { Card } from './card.js';\nimport { Flex } from './flex.js';\nimport { Heading } from './heading.js';\n\nimport type { CardProps } from './card.js';\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\n\n// ============================================================================\n// Toolbar Root\n// ============================================================================\n\ntype ToolbarRootElement = React.ElementRef<'div'>;\ntype Anchor = 'top' | 'bottom' | 'left' | 'right';\ntype SpaceScale = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';\n\ninterface ToolbarRootProps extends Omit<CardProps, 'asChild'> {\n  /**\n   * Which edge to anchor to. Sets position: sticky and the appropriate edge.\n   * @default \"top\"\n   */\n  anchor?: Anchor;\n  /**\n   * Floating variant adds margin from edges for a detached look.\n   * When floating, shows full card treatment. When not floating, only shows exposed edge border.\n   * @default false\n   */\n  floating?: boolean;\n  /**\n   * Margin offset from edges when floating. Uses space scale values.\n   * @default \"2\"\n   */\n  offset?: SpaceScale;\n}\n\nconst ToolbarRoot = React.forwardRef<ToolbarRootElement, ToolbarRootProps>(\n  (props, forwardedRef) => {\n    const {\n      anchor = 'top',\n      floating = false,\n      offset = '2',\n      size = '1',\n      variant = 'ghost',\n      material,\n      className,\n      style,\n      children,\n      ...restProps\n    } = props;\n\n    const isHorizontal = anchor === 'top' || anchor === 'bottom';\n    const internalRef = React.useRef<HTMLDivElement>(null);\n\n    // Merge refs\n    const mergedRef = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        (internalRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(node);\n        } else if (forwardedRef) {\n          forwardedRef.current = node;\n        }\n      },\n      [forwardedRef],\n    );\n\n    // Measure and expose height/width as CSS variable on parent element\n    // so that sibling elements can access it\n    React.useEffect(() => {\n      const element = internalRef.current;\n      if (!element) return;\n\n      const parent = element.parentElement;\n      if (!parent) return;\n\n      const updateDimension = () => {\n        let dimension = isHorizontal ? element.offsetHeight : element.offsetWidth;\n\n        // For floating toolbars, include the margin offset (2x for top + bottom or left + right)\n        if (floating) {\n          const computedStyle = getComputedStyle(element);\n          const margin = parseFloat(computedStyle.marginTop) || 0;\n          dimension += margin * 2;\n        }\n\n        if (isHorizontal) {\n          parent.style.setProperty('--rt-toolbar-height', `${dimension}px`);\n        } else {\n          parent.style.setProperty('--rt-toolbar-width', `${dimension}px`);\n        }\n      };\n\n      updateDimension();\n\n      const resizeObserver = new ResizeObserver(updateDimension);\n      resizeObserver.observe(element);\n\n      return () => resizeObserver.disconnect();\n    }, [isHorizontal, floating]);\n\n    const floatingStyle = floating\n      ? { margin: `var(--space-${offset})`, ...style }\n      : style;\n\n    return (\n      <Card\n        ref={mergedRef}\n        size={size}\n        variant={variant}\n        material={material}\n        data-anchor={anchor}\n        data-floating={floating || undefined}\n        className={classNames('rt-Toolbar', className)}\n        style={floatingStyle}\n        {...restProps}\n      >\n        <Flex\n          align=\"center\"\n          justify=\"between\"\n          direction={isHorizontal ? 'row' : 'column'}\n          gap=\"2\"\n          className=\"rt-ToolbarInner\"\n        >\n          {children}\n        </Flex>\n      </Card>\n    );\n  },\n);\nToolbarRoot.displayName = 'Toolbar.Root';\n\n// ============================================================================\n// Toolbar Left (for horizontal) / Start (alias)\n// ============================================================================\n\ntype ToolbarSectionElement = React.ElementRef<'div'>;\ninterface ToolbarSectionProps extends ComponentPropsWithout<'div', RemovedProps> {}\n\nconst ToolbarLeft = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(\n  ({ className, children, ...props }, forwardedRef) => (\n    <Flex\n      ref={forwardedRef}\n      align=\"center\"\n      gap=\"2\"\n      flexShrink=\"0\"\n      className={classNames('rt-ToolbarSection', 'rt-ToolbarLeft', className)}\n      {...props}\n    >\n      {children}\n    </Flex>\n  ),\n);\nToolbarLeft.displayName = 'Toolbar.Left';\n\n// ============================================================================\n// Toolbar Center\n// ============================================================================\n\nconst ToolbarCenter = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(\n  ({ className, children, ...props }, forwardedRef) => (\n    <Flex\n      ref={forwardedRef}\n      align=\"center\"\n      justify=\"center\"\n      flexGrow=\"1\"\n      minWidth=\"0\"\n      className={classNames('rt-ToolbarSection', 'rt-ToolbarCenter', className)}\n      {...props}\n    >\n      {children}\n    </Flex>\n  ),\n);\nToolbarCenter.displayName = 'Toolbar.Center';\n\n// ============================================================================\n// Toolbar Right (for horizontal) / End (alias)\n// ============================================================================\n\nconst ToolbarRight = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(\n  ({ className, children, ...props }, forwardedRef) => (\n    <Flex\n      ref={forwardedRef}\n      align=\"center\"\n      gap=\"2\"\n      flexShrink=\"0\"\n      className={classNames('rt-ToolbarSection', 'rt-ToolbarRight', className)}\n      {...props}\n    >\n      {children}\n    </Flex>\n  ),\n);\nToolbarRight.displayName = 'Toolbar.Right';\n\n// ============================================================================\n// Toolbar Title\n// ============================================================================\n\ntype ToolbarTitleElement = React.ElementRef<typeof Heading>;\ninterface ToolbarTitleProps extends React.ComponentPropsWithoutRef<typeof Heading> {}\n\nconst ToolbarTitle = React.forwardRef<ToolbarTitleElement, ToolbarTitleProps>(\n  ({ className, size = '3', weight = 'medium', truncate = true, children, ...props }, forwardedRef) => (\n    <Heading\n      ref={forwardedRef}\n      size={size}\n      weight={weight}\n      truncate={truncate}\n      className={classNames('rt-ToolbarTitle', className)}\n      {...props}\n    >\n      {children}\n    </Heading>\n  ),\n);\nToolbarTitle.displayName = 'Toolbar.Title';\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nconst Toolbar = ToolbarRoot as typeof ToolbarRoot & {\n  Left: typeof ToolbarLeft;\n  Center: typeof ToolbarCenter;\n  Right: typeof ToolbarRight;\n  Title: typeof ToolbarTitle;\n};\n\nToolbar.Left = ToolbarLeft;\nToolbar.Center = ToolbarCenter;\nToolbar.Right = ToolbarRight;\nToolbar.Title = ToolbarTitle;\n\nexport {\n  Toolbar,\n  ToolbarRoot as Root,\n  ToolbarLeft as Left,\n  ToolbarCenter as Center,\n  ToolbarRight as Right,\n  ToolbarTitle as Title,\n};\nexport type {\n  ToolbarRootProps as RootProps,\n  ToolbarSectionProps as LeftProps,\n  ToolbarSectionProps as CenterProps,\n  ToolbarSectionProps as RightProps,\n  ToolbarTitleProps as TitleProps,\n};\n"],
-  "mappings": "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",
-  "names": ["React", "classNames", "Card", "Flex", "Heading", "ToolbarRoot", "props", "forwardedRef", "anchor", "floating", "offset", "size", "variant", "material", "className", "style", "children", "restProps", "isHorizontal", "internalRef", "mergedRef", "node", "element", "parent", "updateDimension", "dimension", "computedStyle", "margin", "resizeObserver", "floatingStyle", "ToolbarLeft", "ToolbarCenter", "ToolbarRight", "ToolbarTitle", "weight", "truncate", "Toolbar"]
+  "sourcesContent": ["import * as React from 'react';\nimport classNames from 'classnames';\n\nimport { Card } from './card.js';\nimport { Flex } from './flex.js';\nimport { Heading } from './heading.js';\n\nimport type { CardProps } from './card.js';\nimport type { FlexProps } from './flex.js';\n\n// ============================================================================\n// Toolbar Root\n// ============================================================================\n\ntype ToolbarRootElement = React.ElementRef<'div'>;\ntype Anchor = 'top' | 'bottom' | 'left' | 'right';\ntype SpaceScale = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';\n\ninterface ToolbarRootProps extends Omit<CardProps, 'asChild'> {\n  /**\n   * Which edge to anchor to. Sets position: sticky and the appropriate edge.\n   * @default \"top\"\n   */\n  anchor?: Anchor;\n  /**\n   * Floating mode adds margin from edges for a detached look with absolute positioning.\n   * When false (default), uses inset mode with negative margins to go edge-to-edge inside Cards.\n   * @default false\n   */\n  floating?: boolean;\n  /**\n   * Margin offset from edges when floating. Uses space scale values.\n   * @default \"2\"\n   */\n  offset?: SpaceScale;\n}\n\nconst ToolbarRoot = React.forwardRef<ToolbarRootElement, ToolbarRootProps>(\n  (props, forwardedRef) => {\n    const {\n      anchor = 'top',\n      floating = false,\n      offset = '2',\n      size = '1',\n      variant = 'ghost',\n      material,\n      className,\n      style,\n      children,\n      ...restProps\n    } = props;\n\n    const isHorizontal = anchor === 'top' || anchor === 'bottom';\n    const internalRef = React.useRef<HTMLDivElement>(null);\n\n    // Merge refs\n    const mergedRef = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        (internalRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        if (typeof forwardedRef === 'function') {\n          forwardedRef(node);\n        } else if (forwardedRef) {\n          forwardedRef.current = node;\n        }\n      },\n      [forwardedRef],\n    );\n\n    // Expose height/width as CSS variable on parent element\n    React.useEffect(() => {\n      const element = internalRef.current;\n      if (!element) return;\n\n      const parent = element.parentElement;\n      if (!parent) return;\n\n      const update = () => {\n        let dimension = isHorizontal ? element.offsetHeight : element.offsetWidth;\n\n        // For floating mode, include the margin in the total space\n        if (floating) {\n          const computedStyle = getComputedStyle(element);\n          const margin = parseFloat(computedStyle.marginTop) || 0;\n          dimension += margin * 2;\n        }\n\n        if (isHorizontal) {\n          parent.style.setProperty('--rt-toolbar-height', `${dimension}px`);\n        } else {\n          parent.style.setProperty('--rt-toolbar-width', `${dimension}px`);\n        }\n      };\n\n      update();\n\n      const resizeObserver = new ResizeObserver(update);\n      resizeObserver.observe(element);\n\n      return () => resizeObserver.disconnect();\n    }, [isHorizontal, floating]);\n\n    const computedStyle = floating\n      ? { margin: `var(--space-${offset})`, ...style }\n      : style;\n\n    return (\n      <Card\n        ref={mergedRef}\n        size={size}\n        variant={variant}\n        material={material}\n        data-anchor={anchor}\n        data-floating={floating || undefined}\n        className={classNames('rt-Toolbar', className)}\n        style={computedStyle}\n        {...restProps}\n      >\n        <div className=\"rt-ToolbarInner\">\n          {children}\n        </div>\n      </Card>\n    );\n  },\n);\nToolbarRoot.displayName = 'Toolbar.Root';\n\n// ============================================================================\n// Toolbar Left (for horizontal) / Start (alias)\n// ============================================================================\n\ntype ToolbarSectionElement = React.ElementRef<'div'>;\ntype ToolbarSectionProps = FlexProps;\n\nconst ToolbarLeft = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(\n  ({ gap = '2', align = 'center', className, children, ...props }, forwardedRef) => (\n    <Flex\n      ref={forwardedRef}\n      align={align}\n      gap={gap}\n      className={classNames('rt-ToolbarSection', 'rt-ToolbarLeft', className)}\n      {...props}\n    >\n      {children}\n    </Flex>\n  ),\n);\nToolbarLeft.displayName = 'Toolbar.Left';\n\n// ============================================================================\n// Toolbar Center\n// ============================================================================\n\nconst ToolbarCenter = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(\n  ({ gap = '2', align = 'center', justify = 'center', className, children, ...props }, forwardedRef) => (\n    <Flex\n      ref={forwardedRef}\n      align={align}\n      justify={justify}\n      gap={gap}\n      className={classNames('rt-ToolbarSection', 'rt-ToolbarCenter', className)}\n      {...props}\n    >\n      {children}\n    </Flex>\n  ),\n);\nToolbarCenter.displayName = 'Toolbar.Center';\n\n// ============================================================================\n// Toolbar Right (for horizontal) / End (alias)\n// ============================================================================\n\nconst ToolbarRight = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(\n  ({ gap = '2', align = 'center', justify = 'end', className, children, ...props }, forwardedRef) => (\n    <Flex\n      ref={forwardedRef}\n      align={align}\n      justify={justify}\n      gap={gap}\n      className={classNames('rt-ToolbarSection', 'rt-ToolbarRight', className)}\n      {...props}\n    >\n      {children}\n    </Flex>\n  ),\n);\nToolbarRight.displayName = 'Toolbar.Right';\n\n// ============================================================================\n// Toolbar Title\n// ============================================================================\n\ntype ToolbarTitleElement = React.ElementRef<typeof Heading>;\ninterface ToolbarTitleProps extends React.ComponentPropsWithoutRef<typeof Heading> {}\n\nconst ToolbarTitle = React.forwardRef<ToolbarTitleElement, ToolbarTitleProps>(\n  ({ className, size = '2', weight = 'medium', truncate = true, children, ...props }, forwardedRef) => (\n    <Heading\n      ref={forwardedRef}\n      size={size}\n      weight={weight}\n      truncate={truncate}\n      className={classNames('rt-ToolbarTitle', className)}\n      {...props}\n    >\n      {children}\n    </Heading>\n  ),\n);\nToolbarTitle.displayName = 'Toolbar.Title';\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nconst Toolbar = ToolbarRoot as typeof ToolbarRoot & {\n  Left: typeof ToolbarLeft;\n  Center: typeof ToolbarCenter;\n  Right: typeof ToolbarRight;\n  Title: typeof ToolbarTitle;\n};\n\nToolbar.Left = ToolbarLeft;\nToolbar.Center = ToolbarCenter;\nToolbar.Right = ToolbarRight;\nToolbar.Title = ToolbarTitle;\n\nexport {\n  Toolbar,\n  ToolbarRoot as Root,\n  ToolbarLeft as Left,\n  ToolbarCenter as Center,\n  ToolbarRight as Right,\n  ToolbarTitle as Title,\n};\nexport type {\n  ToolbarRootProps as RootProps,\n  ToolbarSectionProps as LeftProps,\n  ToolbarSectionProps as CenterProps,\n  ToolbarSectionProps as RightProps,\n  ToolbarTitleProps as TitleProps,\n};\n"],
+  "mappings": "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",
+  "names": ["React", "classNames", "Card", "Flex", "Heading", "ToolbarRoot", "props", "forwardedRef", "anchor", "floating", "offset", "size", "variant", "material", "className", "style", "children", "restProps", "isHorizontal", "internalRef", "mergedRef", "node", "element", "parent", "update", "dimension", "computedStyle", "margin", "resizeObserver", "ToolbarLeft", "gap", "align", "ToolbarCenter", "justify", "ToolbarRight", "ToolbarTitle", "weight", "truncate", "Toolbar"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kushagradhawan/kookie-ui",
-  "version": "0.1.119",
+  "version": "0.1.121",
   "description": "A modern React component library with beautiful design tokens, flexible theming, and comprehensive documentation",
   "keywords": [
     "react",

package/schemas/base-button.json

@@ -279,6 +279,6 @@
   "title": "Base-button Component Props",
   "description": "Props schema for the base-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-01-08T19:05:45.154Z",
+  "generatedAt": "2026-01-09T12:06:24.248Z",
   "source": "Zod schema"
 }

package/schemas/button.json

@@ -530,6 +530,6 @@
   "title": "Button Component Props",
   "description": "Props schema for the button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-01-08T19:05:45.160Z",
+  "generatedAt": "2026-01-09T12:06:24.254Z",
   "source": "Zod schema"
 }

package/schemas/icon-button.json

@@ -313,6 +313,6 @@
   "title": "Icon-button Component Props",
   "description": "Props schema for the icon-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-01-08T19:05:45.161Z",
+  "generatedAt": "2026-01-09T12:06:24.255Z",
   "source": "Zod schema"
 }

package/schemas/index.json

@@ -3,7 +3,7 @@
   "title": "Kookie UI Button Components",
   "description": "Complete JSON Schema collection for all button components in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-01-08T19:05:45.164Z",
+  "generatedAt": "2026-01-09T12:06:24.258Z",
   "source": "Zod schemas",
   "components": {
     "base-button": {
@@ -287,7 +287,7 @@
       "title": "Base-button Component Props",
       "description": "Props schema for the base-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2026-01-08T19:05:45.154Z",
+      "generatedAt": "2026-01-09T12:06:24.248Z",
       "source": "Zod schema"
     },
     "button": {
@@ -822,7 +822,7 @@
       "title": "Button Component Props",
       "description": "Props schema for the button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2026-01-08T19:05:45.160Z",
+      "generatedAt": "2026-01-09T12:06:24.254Z",
       "source": "Zod schema"
     },
     "icon-button": {
@@ -1140,7 +1140,7 @@
       "title": "Icon-button Component Props",
       "description": "Props schema for the icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2026-01-08T19:05:45.161Z",
+      "generatedAt": "2026-01-09T12:06:24.255Z",
       "source": "Zod schema"
     },
     "toggle-button": {
@@ -1683,7 +1683,7 @@
       "title": "Toggle-button Component Props",
       "description": "Props schema for the toggle-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2026-01-08T19:05:45.163Z",
+      "generatedAt": "2026-01-09T12:06:24.257Z",
       "source": "Zod schema"
     },
     "toggle-icon-button": {
@@ -2009,7 +2009,7 @@
       "title": "Toggle-icon-button Component Props",
       "description": "Props schema for the toggle-icon-button component in Kookie UI",
       "version": "1.0.0",
-      "generatedAt": "2026-01-08T19:05:45.164Z",
+      "generatedAt": "2026-01-09T12:06:24.258Z",
       "source": "Zod schema"
     }
   }

package/schemas/toggle-button.json

@@ -538,6 +538,6 @@
   "title": "Toggle-button Component Props",
   "description": "Props schema for the toggle-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-01-08T19:05:45.163Z",
+  "generatedAt": "2026-01-09T12:06:24.257Z",
   "source": "Zod schema"
 }

package/schemas/toggle-icon-button.json

@@ -321,6 +321,6 @@
   "title": "Toggle-icon-button Component Props",
   "description": "Props schema for the toggle-icon-button component in Kookie UI",
   "version": "1.0.0",
-  "generatedAt": "2026-01-08T19:05:45.164Z",
+  "generatedAt": "2026-01-09T12:06:24.258Z",
   "source": "Zod schema"
 }

package/src/components/_internal/base-card.css

@@ -132,6 +132,20 @@
   }
 }
 
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*                Inset                */
+/*  Resets padding to 0, keeps radius  */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+.rt-BaseCard:where([data-inset='true']) {
+  --base-card-padding-top: 0px;
+  --base-card-padding-right: 0px;
+  --base-card-padding-bottom: 0px;
+  --base-card-padding-left: 0px;
+}
+
 /* * * * * * * * * * * * * * * * * * * */
 /*                                     */
 /*         Variants / Outline          */

package/src/components/card.props.tsx

@@ -14,12 +14,14 @@ const cardPropDefs = {
   panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
   material: { type: 'enum', values: materials, default: undefined },
   flush: { type: 'boolean', default: false },
+  inset: { type: 'boolean', default: false },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;
   panelBackground: PropDef<(typeof panelBackgrounds)[number] | undefined>;
   material: PropDef<(typeof materials)[number] | undefined>;
   flush: PropDef<boolean>;
+  inset: PropDef<boolean>;
 };
 
 export { cardPropDefs };

package/src/components/card.tsx

@@ -14,7 +14,7 @@ type CardElement = React.ElementRef<'div'>;
 type CardOwnProps = GetPropDefTypes<typeof cardPropDefs>;
 interface CardProps extends ComponentPropsWithout<'div', RemovedProps>, MarginProps, CardOwnProps {}
 const Card = React.forwardRef<CardElement, CardProps>((props, forwardedRef) => {
-  const { asChild, className, panelBackground, material, flush, ...cardProps } = extractProps(
+  const { asChild, className, panelBackground, material, flush, inset, ...cardProps } = extractProps(
     props,
     cardPropDefs,
     marginPropDefs,
@@ -28,6 +28,7 @@ const Card = React.forwardRef<CardElement, CardProps>((props, forwardedRef) => {
       data-panel-background={effectiveMaterial}
       data-material={effectiveMaterial}
       data-flush={flush ? 'true' : undefined}
+      data-inset={inset ? 'true' : undefined}
       className={classNames('rt-reset', 'rt-BaseCard', 'rt-Card', className)}
     />
   );

package/src/components/toolbar.css

@@ -1,16 +1,43 @@
+/* stylelint-disable selector-max-specificity */
 /* Toolbar Component */
 
 .rt-Toolbar {
-  position: sticky;
+  position: absolute;
   z-index: 1;
 
   /* --rt-toolbar-height and --rt-toolbar-width are set on parent element via JS */
+  /* Use pt/pb/pl/pr="var(--rt-toolbar-height)" on content to avoid overlap */
 }
 
+/* Grid layout for true centering */
 .rt-ToolbarInner {
-  /* Ensure inner flex container takes full space */
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
   width: 100%;
   height: 100%;
+  gap: var(--space-2);
+}
+
+/* Vertical toolbars use row-based grid */
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarInner {
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr auto 1fr;
+}
+
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarLeft {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarCenter {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarRight {
+  grid-column: 1;
+  grid-row: 3;
 }
 
 /* * * * * * * * * * * * * * * * * * * */
@@ -45,17 +72,18 @@
 
 /* * * * * * * * * * * * * * * * * * * */
 /*                                     */
-/*          Normal mode (not floating) */
-/*          Only exposed edge border   */
+/*          Inset mode (default)       */
+/*          Edge-to-edge positioning   */
 /*                                     */
 /* * * * * * * * * * * * * * * * * * * */
 
-/* Remove border-radius in normal mode */
+/* Remove border-radius in inset mode */
 .rt-Toolbar:where(:not([data-floating])) {
   --base-card-border-radius: 0;
+  border-radius: 0;
 }
 
-/* Override Card's inset box-shadow to only show exposed edge */
+/* Override Card's box-shadow to only show exposed edge */
 /* Top anchor: only show bottom border */
 .rt-Toolbar:where([data-anchor='top']:not([data-floating])) {
   &::after {
@@ -117,14 +145,8 @@
 /*                                     */
 /* * * * * * * * * * * * * * * * * * * */
 
-.rt-Toolbar:where([data-floating]) {
-  /* Use absolute positioning for floating (not sticky) */
-  position: absolute;
-
-  /* Margin controlled via offset prop */
-
-  /* Inherit Card's border-radius (don't override) */
-}
+/* Floating mode: margin controlled via offset prop in JS */
+/* Inherits Card's border-radius (not overridden like inset mode) */
 
 /* * * * * * * * * * * * * * * * * * * */
 /*                                     */
@@ -145,17 +167,37 @@
 /* * * * * * * * * * * * * * * * * * * */
 
 .rt-ToolbarSection {
-  /* Base section styles */
+  min-width: 0;
 }
 
 .rt-ToolbarLeft {
-  justify-content: flex-start;
+  grid-column: 1;
+  justify-self: start;
 }
 
 .rt-ToolbarCenter {
-  justify-content: center;
+  grid-column: 2;
+  justify-self: center;
 }
 
+/* Ensure Right always stays in the right column */
 .rt-ToolbarRight {
-  justify-content: flex-end;
+  grid-column: 3;
+  justify-self: end;
+}
+
+/* Vertical toolbar section alignment */
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarLeft {
+  align-self: start;
+  justify-self: center;
+}
+
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarCenter {
+  align-self: center;
+  justify-self: center;
+}
+
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarRight {
+  align-self: end;
+  justify-self: center;
 }

package/src/components/toolbar.tsx

@@ -6,7 +6,7 @@ import { Flex } from './flex.js';
 import { Heading } from './heading.js';
 
 import type { CardProps } from './card.js';
-import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
+import type { FlexProps } from './flex.js';
 
 // ============================================================================
 // Toolbar Root
@@ -23,8 +23,8 @@ interface ToolbarRootProps extends Omit<CardProps, 'asChild'> {
    */
   anchor?: Anchor;
   /**
-   * Floating variant adds margin from edges for a detached look.
-   * When floating, shows full card treatment. When not floating, only shows exposed edge border.
+   * Floating mode adds margin from edges for a detached look with absolute positioning.
+   * When false (default), uses inset mode with negative margins to go edge-to-edge inside Cards.
    * @default false
    */
   floating?: boolean;
@@ -66,8 +66,7 @@ const ToolbarRoot = React.forwardRef<ToolbarRootElement, ToolbarRootProps>(
       [forwardedRef],
     );
 
-    // Measure and expose height/width as CSS variable on parent element
-    // so that sibling elements can access it
+    // Expose height/width as CSS variable on parent element
     React.useEffect(() => {
       const element = internalRef.current;
       if (!element) return;
@@ -75,10 +74,10 @@ const ToolbarRoot = React.forwardRef<ToolbarRootElement, ToolbarRootProps>(
       const parent = element.parentElement;
       if (!parent) return;
 
-      const updateDimension = () => {
+      const update = () => {
         let dimension = isHorizontal ? element.offsetHeight : element.offsetWidth;
 
-        // For floating toolbars, include the margin offset (2x for top + bottom or left + right)
+        // For floating mode, include the margin in the total space
         if (floating) {
           const computedStyle = getComputedStyle(element);
           const margin = parseFloat(computedStyle.marginTop) || 0;
@@ -92,15 +91,15 @@ const ToolbarRoot = React.forwardRef<ToolbarRootElement, ToolbarRootProps>(
         }
       };
 
-      updateDimension();
+      update();
 
-      const resizeObserver = new ResizeObserver(updateDimension);
+      const resizeObserver = new ResizeObserver(update);
       resizeObserver.observe(element);
 
       return () => resizeObserver.disconnect();
     }, [isHorizontal, floating]);
 
-    const floatingStyle = floating
+    const computedStyle = floating
       ? { margin: `var(--space-${offset})`, ...style }
       : style;
 
@@ -113,18 +112,12 @@ const ToolbarRoot = React.forwardRef<ToolbarRootElement, ToolbarRootProps>(
         data-anchor={anchor}
         data-floating={floating || undefined}
         className={classNames('rt-Toolbar', className)}
-        style={floatingStyle}
+        style={computedStyle}
         {...restProps}
       >
-        <Flex
-          align="center"
-          justify="between"
-          direction={isHorizontal ? 'row' : 'column'}
-          gap="2"
-          className="rt-ToolbarInner"
-        >
+        <div className="rt-ToolbarInner">
           {children}
-        </Flex>
+        </div>
       </Card>
     );
   },
@@ -136,15 +129,14 @@ ToolbarRoot.displayName = 'Toolbar.Root';
 // ============================================================================
 
 type ToolbarSectionElement = React.ElementRef<'div'>;
-interface ToolbarSectionProps extends ComponentPropsWithout<'div', RemovedProps> {}
+type ToolbarSectionProps = FlexProps;
 
 const ToolbarLeft = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(
-  ({ className, children, ...props }, forwardedRef) => (
+  ({ gap = '2', align = 'center', className, children, ...props }, forwardedRef) => (
     <Flex
       ref={forwardedRef}
-      align="center"
-      gap="2"
-      flexShrink="0"
+      align={align}
+      gap={gap}
       className={classNames('rt-ToolbarSection', 'rt-ToolbarLeft', className)}
       {...props}
     >
@@ -159,13 +151,12 @@ ToolbarLeft.displayName = 'Toolbar.Left';
 // ============================================================================
 
 const ToolbarCenter = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(
-  ({ className, children, ...props }, forwardedRef) => (
+  ({ gap = '2', align = 'center', justify = 'center', className, children, ...props }, forwardedRef) => (
     <Flex
       ref={forwardedRef}
-      align="center"
-      justify="center"
-      flexGrow="1"
-      minWidth="0"
+      align={align}
+      justify={justify}
+      gap={gap}
       className={classNames('rt-ToolbarSection', 'rt-ToolbarCenter', className)}
       {...props}
     >
@@ -180,12 +171,12 @@ ToolbarCenter.displayName = 'Toolbar.Center';
 // ============================================================================
 
 const ToolbarRight = React.forwardRef<ToolbarSectionElement, ToolbarSectionProps>(
-  ({ className, children, ...props }, forwardedRef) => (
+  ({ gap = '2', align = 'center', justify = 'end', className, children, ...props }, forwardedRef) => (
     <Flex
       ref={forwardedRef}
-      align="center"
-      gap="2"
-      flexShrink="0"
+      align={align}
+      justify={justify}
+      gap={gap}
       className={classNames('rt-ToolbarSection', 'rt-ToolbarRight', className)}
       {...props}
     >
@@ -203,7 +194,7 @@ type ToolbarTitleElement = React.ElementRef<typeof Heading>;
 interface ToolbarTitleProps extends React.ComponentPropsWithoutRef<typeof Heading> {}
 
 const ToolbarTitle = React.forwardRef<ToolbarTitleElement, ToolbarTitleProps>(
-  ({ className, size = '3', weight = 'medium', truncate = true, children, ...props }, forwardedRef) => (
+  ({ className, size = '2', weight = 'medium', truncate = true, children, ...props }, forwardedRef) => (
     <Heading
       ref={forwardedRef}
       size={size}

package/styles.css

@@ -10233,6 +10233,12 @@
     --base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
   }
 }
+.rt-BaseCard:where([data-inset='true']){
+  --base-card-padding-top: 0px;
+  --base-card-padding-right: 0px;
+  --base-card-padding-bottom: 0px;
+  --base-card-padding-left: 0px;
+}
 .rt-BaseCard:where(.rt-variant-outline){
   --card-border-width: 1px;
   --card-background-color: transparent;
@@ -25022,12 +25028,38 @@
   outline-color: var(--accent-9);
 }
 .rt-Toolbar{
-  position: sticky;
+  position: absolute;
   z-index: 1;
 }
 .rt-ToolbarInner{
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
   width: 100%;
   height: 100%;
+  gap: var(--space-2);
+}
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarInner{
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr auto 1fr;
+}
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarLeft{
+  grid-column: 1;
+  grid-row: 1;
+  align-self: start;
+  justify-self: center;
+}
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarCenter{
+  grid-column: 1;
+  grid-row: 2;
+  align-self: center;
+  justify-self: center;
+}
+.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarRight{
+  grid-column: 1;
+  grid-row: 3;
+  align-self: end;
+  justify-self: center;
 }
 .rt-Toolbar:where([data-anchor='top']){
   top: 0;
@@ -25051,6 +25083,7 @@
 }
 .rt-Toolbar:where(:not([data-floating])){
   --base-card-border-radius: 0;
+  border-radius: 0;
 }
 .rt-Toolbar:where([data-anchor='top']:not([data-floating]))::after{
   box-shadow: inset 0 -1px 0 0 var(--gray-6);
@@ -25082,21 +25115,24 @@
 .rt-Toolbar:where(.rt-variant-soft:not([data-floating]))::after{
   box-shadow: none;
 }
-.rt-Toolbar:where([data-floating]){
-  position: absolute;
-}
 .rt-ToolbarTitle{
   min-width: 0;
   flex-shrink: 1;
 }
+.rt-ToolbarSection{
+  min-width: 0;
+}
 .rt-ToolbarLeft{
-  justify-content: flex-start;
+  grid-column: 1;
+  justify-self: start;
 }
 .rt-ToolbarCenter{
-  justify-content: center;
+  grid-column: 2;
+  justify-self: center;
 }
 .rt-ToolbarRight{
-  justify-content: flex-end;
+  grid-column: 3;
+  justify-self: end;
 }
 .rt-TooltipContent{
   box-sizing: border-box;