@kushagradhawan/kookie-ui 0.1.119 → 0.1.120
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components.css +2 -4
- package/dist/cjs/components/toolbar.d.ts +2 -2
- package/dist/cjs/components/toolbar.d.ts.map +1 -1
- package/dist/cjs/components/toolbar.js +1 -1
- package/dist/cjs/components/toolbar.js.map +3 -3
- package/dist/esm/components/toolbar.d.ts +2 -2
- package/dist/esm/components/toolbar.d.ts.map +1 -1
- package/dist/esm/components/toolbar.js.map +3 -3
- package/package.json +1 -1
- package/schemas/base-button.json +1 -1
- package/schemas/button.json +1 -1
- package/schemas/icon-button.json +1 -1
- package/schemas/index.json +6 -6
- package/schemas/toggle-button.json +1 -1
- package/schemas/toggle-icon-button.json +1 -1
- package/src/components/toolbar.css +9 -13
- package/src/components/toolbar.tsx +9 -10
- package/styles.css +2 -4
package/components.css
CHANGED
|
@@ -19990,7 +19990,7 @@
|
|
|
19990
19990
|
outline-color: var(--accent-9);
|
|
19991
19991
|
}
|
|
19992
19992
|
.rt-Toolbar {
|
|
19993
|
-
position:
|
|
19993
|
+
position: absolute;
|
|
19994
19994
|
z-index: 1;
|
|
19995
19995
|
}
|
|
19996
19996
|
.rt-ToolbarInner {
|
|
@@ -20019,6 +20019,7 @@
|
|
|
20019
20019
|
}
|
|
20020
20020
|
.rt-Toolbar:where(:not([data-floating])) {
|
|
20021
20021
|
--base-card-border-radius: 0;
|
|
20022
|
+
border-radius: 0;
|
|
20022
20023
|
}
|
|
20023
20024
|
.rt-Toolbar:where([data-anchor='top']:not([data-floating]))::after {
|
|
20024
20025
|
box-shadow: inset 0 -1px 0 0 var(--gray-6);
|
|
@@ -20050,9 +20051,6 @@
|
|
|
20050
20051
|
.rt-Toolbar:where(.rt-variant-soft:not([data-floating]))::after {
|
|
20051
20052
|
box-shadow: none;
|
|
20052
20053
|
}
|
|
20053
|
-
.rt-Toolbar:where([data-floating]) {
|
|
20054
|
-
position: absolute;
|
|
20055
|
-
}
|
|
20056
20054
|
.rt-ToolbarTitle {
|
|
20057
20055
|
min-width: 0;
|
|
20058
20056
|
flex-shrink: 1;
|
|
@@ -11,8 +11,8 @@ interface ToolbarRootProps extends Omit<CardProps, 'asChild'> {
|
|
|
11
11
|
*/
|
|
12
12
|
anchor?: Anchor;
|
|
13
13
|
/**
|
|
14
|
-
* Floating
|
|
15
|
-
* When
|
|
14
|
+
* Floating mode adds margin from edges for a detached look with absolute positioning.
|
|
15
|
+
* When false (default), uses inset mode with negative margins to go edge-to-edge inside Cards.
|
|
16
16
|
* @default false
|
|
17
17
|
*/
|
|
18
18
|
floating?: boolean;
|
|
@@ -1 +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,
|
|
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,yFA4FhB,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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var k=Object.create;var f=Object.defineProperty;var D=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=D(e,n))||r.enumerable});return o};var v=(o,e,t)=>(t=o!=null?k(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 M=getComputedStyle(l),O=parseFloat(M.marginTop)||0;u+=O*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;
|
|
2
2
|
//# sourceMappingURL=toolbar.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/toolbar.tsx"],
|
|
4
|
-
"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
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,YAAAE,EAAA,SAAAC,EAAA,UAAAC,EAAA,SAAAC,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAR,GAAA,IAAAS,EAAuB,oBACvBC,EAAuB,yBAEvBC,EAAqB,qBACrBC,EAAqB,qBACrBC,EAAwB,wBAgCxB,MAAMR,EAAcI,EAAM,WACxB,CAACK,EAAOC,IAAiB,CACvB,KAAM,CACJ,OAAAC,EAAS,MACT,SAAAC,EAAW,GACX,OAAAC,EAAS,IACT,KAAAC,EAAO,IACP,QAAAC,EAAU,QACV,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EAAIX,EAEEY,EAAeV,IAAW,OAASA,IAAW,SAC9CW,EAAclB,EAAM,OAAuB,IAAI,EAG/CmB,EAAYnB,EAAM,YACrBoB,GAAgC,CAC9BF,EAA8D,QAAUE,EACrE,OAAOd,GAAiB,WAC1BA,EAAac,CAAI,EACRd,IACTA,EAAa,QAAUc,EAE3B,EACA,CAACd,CAAY,CACf,
|
|
6
|
-
"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", "
|
|
4
|
+
"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 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 <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"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,YAAAE,EAAA,SAAAC,EAAA,UAAAC,EAAA,SAAAC,EAAA,UAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAR,GAAA,IAAAS,EAAuB,oBACvBC,EAAuB,yBAEvBC,EAAqB,qBACrBC,EAAqB,qBACrBC,EAAwB,wBAgCxB,MAAMR,EAAcI,EAAM,WACxB,CAACK,EAAOC,IAAiB,CACvB,KAAM,CACJ,OAAAC,EAAS,MACT,SAAAC,EAAW,GACX,OAAAC,EAAS,IACT,KAAAC,EAAO,IACP,QAAAC,EAAU,QACV,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EAAIX,EAEEY,EAAeV,IAAW,OAASA,IAAW,SAC9CW,EAAclB,EAAM,OAAuB,IAAI,EAG/CmB,EAAYnB,EAAM,YACrBoB,GAAgC,CAC9BF,EAA8D,QAAUE,EACrE,OAAOd,GAAiB,WAC1BA,EAAac,CAAI,EACRd,IACTA,EAAa,QAAUc,EAE3B,EACA,CAACd,CAAY,CACf,EAGAN,EAAM,UAAU,IAAM,CACpB,MAAMqB,EAAUH,EAAY,QAC5B,GAAI,CAACG,EAAS,OAEd,MAAMC,EAASD,EAAQ,cACvB,GAAI,CAACC,EAAQ,OAEb,MAAMC,EAAS,IAAM,CACnB,IAAIC,EAAYP,EAAeI,EAAQ,aAAeA,EAAQ,YAG9D,GAAIb,EAAU,CACZ,MAAMiB,EAAgB,iBAAiBJ,CAAO,EACxCK,EAAS,WAAWD,EAAc,SAAS,GAAK,EACtDD,GAAaE,EAAS,CACxB,CAEIT,EACFK,EAAO,MAAM,YAAY,sBAAuB,GAAGE,CAAS,IAAI,EAEhEF,EAAO,MAAM,YAAY,qBAAsB,GAAGE,CAAS,IAAI,CAEnE,EAEAD,EAAO,EAEP,MAAMI,EAAiB,IAAI,eAAeJ,CAAM,EAChD,OAAAI,EAAe,QAAQN,CAAO,EAEvB,IAAMM,EAAe,WAAW,CACzC,EAAG,CAACV,EAAcT,CAAQ,CAAC,EAE3B,MAAMiB,EAAgBjB,EAClB,CAAE,OAAQ,eAAeC,CAAM,IAAK,GAAGK,CAAM,EAC7CA,EAEJ,OACEd,EAAA,cAAC,QACC,IAAKmB,EACL,KAAMT,EACN,QAASC,EACT,SAAUC,EACV,cAAaL,EACb,gBAAeC,GAAY,OAC3B,aAAW,EAAAoB,SAAW,aAAcf,CAAS,EAC7C,MAAOY,EACN,GAAGT,GAEJhB,EAAA,cAAC,QACC,MAAM,SACN,QAAQ,UACR,UAAWiB,EAAe,MAAQ,SAClC,IAAI,IACJ,UAAU,mBAETF,CACH,CACF,CAEJ,CACF,EACAnB,EAAY,YAAc,eAS1B,MAAMF,EAAcM,EAAM,WACxB,CAAC,CAAE,UAAAa,EAAW,SAAAE,EAAU,GAAGV,CAAM,EAAGC,IAClCN,EAAA,cAAC,QACC,IAAKM,EACL,MAAM,SACN,IAAI,IACJ,WAAW,IACX,aAAW,EAAAsB,SAAW,oBAAqB,iBAAkBf,CAAS,EACrE,GAAGR,GAEHU,CACH,CAEJ,EACArB,EAAY,YAAc,eAM1B,MAAMD,EAAgBO,EAAM,WAC1B,CAAC,CAAE,UAAAa,EAAW,SAAAE,EAAU,GAAGV,CAAM,EAAGC,IAClCN,EAAA,cAAC,QACC,IAAKM,EACL,MAAM,SACN,QAAQ,SACR,SAAS,IACT,SAAS,IACT,aAAW,EAAAsB,SAAW,oBAAqB,mBAAoBf,CAAS,EACvE,GAAGR,GAEHU,CACH,CAEJ,EACAtB,EAAc,YAAc,iBAM5B,MAAME,EAAeK,EAAM,WACzB,CAAC,CAAE,UAAAa,EAAW,SAAAE,EAAU,GAAGV,CAAM,EAAGC,IAClCN,EAAA,cAAC,QACC,IAAKM,EACL,MAAM,SACN,IAAI,IACJ,WAAW,IACX,aAAW,EAAAsB,SAAW,oBAAqB,kBAAmBf,CAAS,EACtE,GAAGR,GAEHU,CACH,CAEJ,EACApB,EAAa,YAAc,gBAS3B,MAAME,EAAeG,EAAM,WACzB,CAAC,CAAE,UAAAa,EAAW,KAAAH,EAAO,IAAK,OAAAmB,EAAS,SAAU,SAAAC,EAAW,GAAM,SAAAf,EAAU,GAAGV,CAAM,EAAGC,IAClFN,EAAA,cAAC,WACC,IAAKM,EACL,KAAMI,EACN,OAAQmB,EACR,SAAUC,EACV,aAAW,EAAAF,SAAW,kBAAmBf,CAAS,EACjD,GAAGR,GAEHU,CACH,CAEJ,EACAlB,EAAa,YAAc,gBAM3B,MAAMC,EAAUF,EAOhBE,EAAQ,KAAOJ,EACfI,EAAQ,OAASL,EACjBK,EAAQ,MAAQH,EAChBG,EAAQ,MAAQD",
|
|
6
|
+
"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", "weight", "truncate"]
|
|
7
7
|
}
|
|
@@ -11,8 +11,8 @@ interface ToolbarRootProps extends Omit<CardProps, 'asChild'> {
|
|
|
11
11
|
*/
|
|
12
12
|
anchor?: Anchor;
|
|
13
13
|
/**
|
|
14
|
-
* Floating
|
|
15
|
-
* When
|
|
14
|
+
* Floating mode adds margin from edges for a detached look with absolute positioning.
|
|
15
|
+
* When false (default), uses inset mode with negative margins to go edge-to-edge inside Cards.
|
|
16
16
|
* @default false
|
|
17
17
|
*/
|
|
18
18
|
floating?: boolean;
|
|
@@ -1 +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,
|
|
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,yFA4FhB,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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/toolbar.tsx"],
|
|
4
|
-
"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
|
|
5
|
-
"mappings": "AAAA,UAAYA,MAAW,QACvB,OAAOC,MAAgB,aAEvB,OAAS,QAAAC,MAAY,YACrB,OAAS,QAAAC,MAAY,YACrB,OAAS,WAAAC,MAAe,eAgCxB,MAAMC,EAAcL,EAAM,WACxB,CAACM,EAAOC,IAAiB,CACvB,KAAM,CACJ,OAAAC,EAAS,MACT,SAAAC,EAAW,GACX,OAAAC,EAAS,IACT,KAAAC,EAAO,IACP,QAAAC,EAAU,QACV,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,SAAAC,EACA,GAAGC,CACL,EAAIX,EAEEY,EAAeV,IAAW,OAASA,IAAW,SAC9CW,EAAcnB,EAAM,OAAuB,IAAI,EAG/CoB,EAAYpB,EAAM,YACrBqB,GAAgC,CAC9BF,EAA8D,QAAUE,EACrE,OAAOd,GAAiB,WAC1BA,EAAac,CAAI,EACRd,IACTA,EAAa,QAAUc,EAE3B,EACA,CAACd,CAAY,CACf,
|
|
6
|
-
"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", "
|
|
4
|
+
"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 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 <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"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"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", "ToolbarCenter", "ToolbarRight", "ToolbarTitle", "weight", "truncate", "Toolbar"]
|
|
7
7
|
}
|
package/package.json
CHANGED
package/schemas/base-button.json
CHANGED
|
@@ -279,6 +279,6 @@
|
|
|
279
279
|
"title": "Base-button Component Props",
|
|
280
280
|
"description": "Props schema for the base-button component in Kookie UI",
|
|
281
281
|
"version": "1.0.0",
|
|
282
|
-
"generatedAt": "2026-01-
|
|
282
|
+
"generatedAt": "2026-01-09T07:08:13.212Z",
|
|
283
283
|
"source": "Zod schema"
|
|
284
284
|
}
|
package/schemas/button.json
CHANGED
|
@@ -530,6 +530,6 @@
|
|
|
530
530
|
"title": "Button Component Props",
|
|
531
531
|
"description": "Props schema for the button component in Kookie UI",
|
|
532
532
|
"version": "1.0.0",
|
|
533
|
-
"generatedAt": "2026-01-
|
|
533
|
+
"generatedAt": "2026-01-09T07:08:13.218Z",
|
|
534
534
|
"source": "Zod schema"
|
|
535
535
|
}
|
package/schemas/icon-button.json
CHANGED
|
@@ -313,6 +313,6 @@
|
|
|
313
313
|
"title": "Icon-button Component Props",
|
|
314
314
|
"description": "Props schema for the icon-button component in Kookie UI",
|
|
315
315
|
"version": "1.0.0",
|
|
316
|
-
"generatedAt": "2026-01-
|
|
316
|
+
"generatedAt": "2026-01-09T07:08:13.219Z",
|
|
317
317
|
"source": "Zod schema"
|
|
318
318
|
}
|
package/schemas/index.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"title": "Kookie UI Button Components",
|
|
4
4
|
"description": "Complete JSON Schema collection for all button components in Kookie UI",
|
|
5
5
|
"version": "1.0.0",
|
|
6
|
-
"generatedAt": "2026-01-
|
|
6
|
+
"generatedAt": "2026-01-09T07:08:13.222Z",
|
|
7
7
|
"source": "Zod schemas",
|
|
8
8
|
"components": {
|
|
9
9
|
"base-button": {
|
|
@@ -287,7 +287,7 @@
|
|
|
287
287
|
"title": "Base-button Component Props",
|
|
288
288
|
"description": "Props schema for the base-button component in Kookie UI",
|
|
289
289
|
"version": "1.0.0",
|
|
290
|
-
"generatedAt": "2026-01-
|
|
290
|
+
"generatedAt": "2026-01-09T07:08:13.212Z",
|
|
291
291
|
"source": "Zod schema"
|
|
292
292
|
},
|
|
293
293
|
"button": {
|
|
@@ -822,7 +822,7 @@
|
|
|
822
822
|
"title": "Button Component Props",
|
|
823
823
|
"description": "Props schema for the button component in Kookie UI",
|
|
824
824
|
"version": "1.0.0",
|
|
825
|
-
"generatedAt": "2026-01-
|
|
825
|
+
"generatedAt": "2026-01-09T07:08:13.218Z",
|
|
826
826
|
"source": "Zod schema"
|
|
827
827
|
},
|
|
828
828
|
"icon-button": {
|
|
@@ -1140,7 +1140,7 @@
|
|
|
1140
1140
|
"title": "Icon-button Component Props",
|
|
1141
1141
|
"description": "Props schema for the icon-button component in Kookie UI",
|
|
1142
1142
|
"version": "1.0.0",
|
|
1143
|
-
"generatedAt": "2026-01-
|
|
1143
|
+
"generatedAt": "2026-01-09T07:08:13.219Z",
|
|
1144
1144
|
"source": "Zod schema"
|
|
1145
1145
|
},
|
|
1146
1146
|
"toggle-button": {
|
|
@@ -1683,7 +1683,7 @@
|
|
|
1683
1683
|
"title": "Toggle-button Component Props",
|
|
1684
1684
|
"description": "Props schema for the toggle-button component in Kookie UI",
|
|
1685
1685
|
"version": "1.0.0",
|
|
1686
|
-
"generatedAt": "2026-01-
|
|
1686
|
+
"generatedAt": "2026-01-09T07:08:13.221Z",
|
|
1687
1687
|
"source": "Zod schema"
|
|
1688
1688
|
},
|
|
1689
1689
|
"toggle-icon-button": {
|
|
@@ -2009,7 +2009,7 @@
|
|
|
2009
2009
|
"title": "Toggle-icon-button Component Props",
|
|
2010
2010
|
"description": "Props schema for the toggle-icon-button component in Kookie UI",
|
|
2011
2011
|
"version": "1.0.0",
|
|
2012
|
-
"generatedAt": "2026-01-
|
|
2012
|
+
"generatedAt": "2026-01-09T07:08:13.222Z",
|
|
2013
2013
|
"source": "Zod schema"
|
|
2014
2014
|
}
|
|
2015
2015
|
}
|
|
@@ -538,6 +538,6 @@
|
|
|
538
538
|
"title": "Toggle-button Component Props",
|
|
539
539
|
"description": "Props schema for the toggle-button component in Kookie UI",
|
|
540
540
|
"version": "1.0.0",
|
|
541
|
-
"generatedAt": "2026-01-
|
|
541
|
+
"generatedAt": "2026-01-09T07:08:13.221Z",
|
|
542
542
|
"source": "Zod schema"
|
|
543
543
|
}
|
|
@@ -321,6 +321,6 @@
|
|
|
321
321
|
"title": "Toggle-icon-button Component Props",
|
|
322
322
|
"description": "Props schema for the toggle-icon-button component in Kookie UI",
|
|
323
323
|
"version": "1.0.0",
|
|
324
|
-
"generatedAt": "2026-01-
|
|
324
|
+
"generatedAt": "2026-01-09T07:08:13.222Z",
|
|
325
325
|
"source": "Zod schema"
|
|
326
326
|
}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
/* Toolbar Component */
|
|
2
2
|
|
|
3
3
|
.rt-Toolbar {
|
|
4
|
-
position:
|
|
4
|
+
position: absolute;
|
|
5
5
|
z-index: 1;
|
|
6
6
|
|
|
7
7
|
/* --rt-toolbar-height and --rt-toolbar-width are set on parent element via JS */
|
|
8
|
+
/* Use pt/pb/pl/pr="var(--rt-toolbar-height)" on content to avoid overlap */
|
|
8
9
|
}
|
|
9
10
|
|
|
10
11
|
.rt-ToolbarInner {
|
|
@@ -45,17 +46,18 @@
|
|
|
45
46
|
|
|
46
47
|
/* * * * * * * * * * * * * * * * * * * */
|
|
47
48
|
/* */
|
|
48
|
-
/*
|
|
49
|
-
/*
|
|
49
|
+
/* Inset mode (default) */
|
|
50
|
+
/* Edge-to-edge positioning */
|
|
50
51
|
/* */
|
|
51
52
|
/* * * * * * * * * * * * * * * * * * * */
|
|
52
53
|
|
|
53
|
-
/* Remove border-radius in
|
|
54
|
+
/* Remove border-radius in inset mode */
|
|
54
55
|
.rt-Toolbar:where(:not([data-floating])) {
|
|
55
56
|
--base-card-border-radius: 0;
|
|
57
|
+
border-radius: 0;
|
|
56
58
|
}
|
|
57
59
|
|
|
58
|
-
/* Override Card's
|
|
60
|
+
/* Override Card's box-shadow to only show exposed edge */
|
|
59
61
|
/* Top anchor: only show bottom border */
|
|
60
62
|
.rt-Toolbar:where([data-anchor='top']:not([data-floating])) {
|
|
61
63
|
&::after {
|
|
@@ -117,14 +119,8 @@
|
|
|
117
119
|
/* */
|
|
118
120
|
/* * * * * * * * * * * * * * * * * * * */
|
|
119
121
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
position: absolute;
|
|
123
|
-
|
|
124
|
-
/* Margin controlled via offset prop */
|
|
125
|
-
|
|
126
|
-
/* Inherit Card's border-radius (don't override) */
|
|
127
|
-
}
|
|
122
|
+
/* Floating mode: margin controlled via offset prop in JS */
|
|
123
|
+
/* Inherits Card's border-radius (not overridden like inset mode) */
|
|
128
124
|
|
|
129
125
|
/* * * * * * * * * * * * * * * * * * * */
|
|
130
126
|
/* */
|
|
@@ -23,8 +23,8 @@ interface ToolbarRootProps extends Omit<CardProps, 'asChild'> {
|
|
|
23
23
|
*/
|
|
24
24
|
anchor?: Anchor;
|
|
25
25
|
/**
|
|
26
|
-
* Floating
|
|
27
|
-
* When
|
|
26
|
+
* Floating mode adds margin from edges for a detached look with absolute positioning.
|
|
27
|
+
* When false (default), uses inset mode with negative margins to go edge-to-edge inside Cards.
|
|
28
28
|
* @default false
|
|
29
29
|
*/
|
|
30
30
|
floating?: boolean;
|
|
@@ -66,8 +66,7 @@ const ToolbarRoot = React.forwardRef<ToolbarRootElement, ToolbarRootProps>(
|
|
|
66
66
|
[forwardedRef],
|
|
67
67
|
);
|
|
68
68
|
|
|
69
|
-
//
|
|
70
|
-
// so that sibling elements can access it
|
|
69
|
+
// Expose height/width as CSS variable on parent element
|
|
71
70
|
React.useEffect(() => {
|
|
72
71
|
const element = internalRef.current;
|
|
73
72
|
if (!element) return;
|
|
@@ -75,10 +74,10 @@ const ToolbarRoot = React.forwardRef<ToolbarRootElement, ToolbarRootProps>(
|
|
|
75
74
|
const parent = element.parentElement;
|
|
76
75
|
if (!parent) return;
|
|
77
76
|
|
|
78
|
-
const
|
|
77
|
+
const update = () => {
|
|
79
78
|
let dimension = isHorizontal ? element.offsetHeight : element.offsetWidth;
|
|
80
79
|
|
|
81
|
-
// For floating
|
|
80
|
+
// For floating mode, include the margin in the total space
|
|
82
81
|
if (floating) {
|
|
83
82
|
const computedStyle = getComputedStyle(element);
|
|
84
83
|
const margin = parseFloat(computedStyle.marginTop) || 0;
|
|
@@ -92,15 +91,15 @@ const ToolbarRoot = React.forwardRef<ToolbarRootElement, ToolbarRootProps>(
|
|
|
92
91
|
}
|
|
93
92
|
};
|
|
94
93
|
|
|
95
|
-
|
|
94
|
+
update();
|
|
96
95
|
|
|
97
|
-
const resizeObserver = new ResizeObserver(
|
|
96
|
+
const resizeObserver = new ResizeObserver(update);
|
|
98
97
|
resizeObserver.observe(element);
|
|
99
98
|
|
|
100
99
|
return () => resizeObserver.disconnect();
|
|
101
100
|
}, [isHorizontal, floating]);
|
|
102
101
|
|
|
103
|
-
const
|
|
102
|
+
const computedStyle = floating
|
|
104
103
|
? { margin: `var(--space-${offset})`, ...style }
|
|
105
104
|
: style;
|
|
106
105
|
|
|
@@ -113,7 +112,7 @@ const ToolbarRoot = React.forwardRef<ToolbarRootElement, ToolbarRootProps>(
|
|
|
113
112
|
data-anchor={anchor}
|
|
114
113
|
data-floating={floating || undefined}
|
|
115
114
|
className={classNames('rt-Toolbar', className)}
|
|
116
|
-
style={
|
|
115
|
+
style={computedStyle}
|
|
117
116
|
{...restProps}
|
|
118
117
|
>
|
|
119
118
|
<Flex
|
package/styles.css
CHANGED
|
@@ -25022,7 +25022,7 @@
|
|
|
25022
25022
|
outline-color: var(--accent-9);
|
|
25023
25023
|
}
|
|
25024
25024
|
.rt-Toolbar{
|
|
25025
|
-
position:
|
|
25025
|
+
position: absolute;
|
|
25026
25026
|
z-index: 1;
|
|
25027
25027
|
}
|
|
25028
25028
|
.rt-ToolbarInner{
|
|
@@ -25051,6 +25051,7 @@
|
|
|
25051
25051
|
}
|
|
25052
25052
|
.rt-Toolbar:where(:not([data-floating])){
|
|
25053
25053
|
--base-card-border-radius: 0;
|
|
25054
|
+
border-radius: 0;
|
|
25054
25055
|
}
|
|
25055
25056
|
.rt-Toolbar:where([data-anchor='top']:not([data-floating]))::after{
|
|
25056
25057
|
box-shadow: inset 0 -1px 0 0 var(--gray-6);
|
|
@@ -25082,9 +25083,6 @@
|
|
|
25082
25083
|
.rt-Toolbar:where(.rt-variant-soft:not([data-floating]))::after{
|
|
25083
25084
|
box-shadow: none;
|
|
25084
25085
|
}
|
|
25085
|
-
.rt-Toolbar:where([data-floating]){
|
|
25086
|
-
position: absolute;
|
|
25087
|
-
}
|
|
25088
25086
|
.rt-ToolbarTitle{
|
|
25089
25087
|
min-width: 0;
|
|
25090
25088
|
flex-shrink: 1;
|