@kushagradhawan/kookie-ui 0.1.120 → 0.1.122
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 +41 -3
- package/dist/cjs/components/card.d.ts.map +1 -1
- package/dist/cjs/components/card.js +1 -1
- package/dist/cjs/components/card.js.map +3 -3
- package/dist/cjs/components/card.props.d.ts +4 -0
- package/dist/cjs/components/card.props.d.ts.map +1 -1
- package/dist/cjs/components/card.props.js +1 -1
- package/dist/cjs/components/card.props.js.map +2 -2
- package/dist/cjs/components/sheet.d.ts +7 -6
- package/dist/cjs/components/sheet.d.ts.map +1 -1
- package/dist/cjs/components/sheet.js +1 -1
- package/dist/cjs/components/sheet.js.map +3 -3
- package/dist/cjs/components/toolbar.d.ts +5 -6
- 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/card.d.ts.map +1 -1
- package/dist/esm/components/card.js +1 -1
- package/dist/esm/components/card.js.map +3 -3
- package/dist/esm/components/card.props.d.ts +4 -0
- package/dist/esm/components/card.props.d.ts.map +1 -1
- package/dist/esm/components/card.props.js +1 -1
- package/dist/esm/components/card.props.js.map +2 -2
- package/dist/esm/components/sheet.d.ts +7 -6
- package/dist/esm/components/sheet.d.ts.map +1 -1
- package/dist/esm/components/sheet.js +1 -1
- package/dist/esm/components/sheet.js.map +3 -3
- package/dist/esm/components/toolbar.d.ts +5 -6
- package/dist/esm/components/toolbar.d.ts.map +1 -1
- package/dist/esm/components/toolbar.js +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/_internal/base-card.css +14 -0
- package/src/components/card.props.tsx +2 -0
- package/src/components/card.tsx +2 -1
- package/src/components/sheet.tsx +23 -16
- package/src/components/toolbar.css +51 -5
- package/src/components/toolbar.tsx +16 -24
- package/styles.css +41 -3
package/components.css
CHANGED
|
@@ -5201,6 +5201,12 @@
|
|
|
5201
5201
|
--base-card-border-radius: min(var(--radius-9), calc(var(--radius-5) + var(--space-5)));
|
|
5202
5202
|
}
|
|
5203
5203
|
}
|
|
5204
|
+
.rt-BaseCard:where([data-inset='true']) {
|
|
5205
|
+
--base-card-padding-top: 0px;
|
|
5206
|
+
--base-card-padding-right: 0px;
|
|
5207
|
+
--base-card-padding-bottom: 0px;
|
|
5208
|
+
--base-card-padding-left: 0px;
|
|
5209
|
+
}
|
|
5204
5210
|
.rt-BaseCard:where(.rt-variant-outline) {
|
|
5205
5211
|
--card-border-width: 1px;
|
|
5206
5212
|
--card-background-color: transparent;
|
|
@@ -19994,8 +20000,34 @@
|
|
|
19994
20000
|
z-index: 1;
|
|
19995
20001
|
}
|
|
19996
20002
|
.rt-ToolbarInner {
|
|
20003
|
+
display: grid;
|
|
20004
|
+
grid-template-columns: 1fr auto 1fr;
|
|
20005
|
+
align-items: center;
|
|
19997
20006
|
width: 100%;
|
|
19998
20007
|
height: 100%;
|
|
20008
|
+
gap: var(--space-2);
|
|
20009
|
+
}
|
|
20010
|
+
.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarInner {
|
|
20011
|
+
grid-template-columns: 1fr;
|
|
20012
|
+
grid-template-rows: 1fr auto 1fr;
|
|
20013
|
+
}
|
|
20014
|
+
.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarLeft {
|
|
20015
|
+
grid-column: 1;
|
|
20016
|
+
grid-row: 1;
|
|
20017
|
+
align-self: start;
|
|
20018
|
+
justify-self: center;
|
|
20019
|
+
}
|
|
20020
|
+
.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarCenter {
|
|
20021
|
+
grid-column: 1;
|
|
20022
|
+
grid-row: 2;
|
|
20023
|
+
align-self: center;
|
|
20024
|
+
justify-self: center;
|
|
20025
|
+
}
|
|
20026
|
+
.rt-Toolbar:where([data-anchor='left'], [data-anchor='right']) .rt-ToolbarRight {
|
|
20027
|
+
grid-column: 1;
|
|
20028
|
+
grid-row: 3;
|
|
20029
|
+
align-self: end;
|
|
20030
|
+
justify-self: center;
|
|
19999
20031
|
}
|
|
20000
20032
|
.rt-Toolbar:where([data-anchor='top']) {
|
|
20001
20033
|
top: 0;
|
|
@@ -20055,14 +20087,20 @@
|
|
|
20055
20087
|
min-width: 0;
|
|
20056
20088
|
flex-shrink: 1;
|
|
20057
20089
|
}
|
|
20090
|
+
.rt-ToolbarSection {
|
|
20091
|
+
min-width: 0;
|
|
20092
|
+
}
|
|
20058
20093
|
.rt-ToolbarLeft {
|
|
20059
|
-
|
|
20094
|
+
grid-column: 1;
|
|
20095
|
+
justify-self: start;
|
|
20060
20096
|
}
|
|
20061
20097
|
.rt-ToolbarCenter {
|
|
20062
|
-
|
|
20098
|
+
grid-column: 2;
|
|
20099
|
+
justify-self: center;
|
|
20063
20100
|
}
|
|
20064
20101
|
.rt-ToolbarRight {
|
|
20065
|
-
|
|
20102
|
+
grid-column: 3;
|
|
20103
|
+
justify-self: end;
|
|
20066
20104
|
}
|
|
20067
20105
|
.rt-TooltipContent {
|
|
20068
20106
|
box-sizing: border-box;
|
|
@@ -1 +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,
|
|
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,kFAmBR,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,YAAY,EAAE,SAAS,EAAE,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"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";
|
|
2
2
|
//# sourceMappingURL=card.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/card.tsx"],
|
|
4
|
-
"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"],
|
|
5
|
-
"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,
|
|
6
|
-
"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"]
|
|
4
|
+
"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"],
|
|
5
|
+
"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",
|
|
6
|
+
"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"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.props.d.ts","sourceRoot":"","sources":["../../../src/components/card.props.tsx"],"names":[],"mappings":"AASA,QAAA,MAAM,YAAY
|
|
1
|
+
{"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var n=Object.defineProperty;var
|
|
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}};
|
|
2
2
|
//# sourceMappingURL=card.props.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/card.props.tsx"],
|
|
4
|
-
"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"],
|
|
5
|
-
"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",
|
|
4
|
+
"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"],
|
|
5
|
+
"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",
|
|
6
6
|
"names": ["card_props_exports", "__export", "cardPropDefs", "__toCommonJS", "import_as_child_prop", "sizes", "variants", "panelBackgrounds", "materials"]
|
|
7
7
|
}
|
|
@@ -34,6 +34,8 @@ import * as React from 'react';
|
|
|
34
34
|
import { Dialog as DialogPrimitive } from 'radix-ui';
|
|
35
35
|
import type { DialogContentOwnProps } from './dialog.props.js';
|
|
36
36
|
import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
|
|
37
|
+
import type { HeadingProps } from './heading.js';
|
|
38
|
+
import type { TextProps } from './text.js';
|
|
37
39
|
/**
|
|
38
40
|
* Supported sides for the Sheet.
|
|
39
41
|
* Aliases are normalized RTL-aware: `left` → `start`, `right` → `end`.
|
|
@@ -65,14 +67,13 @@ interface SheetContentProps extends ComponentPropsWithout<typeof DialogPrimitive
|
|
|
65
67
|
* or `aria-label`.
|
|
66
68
|
*/
|
|
67
69
|
declare const Content: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
68
|
-
interface SheetTitleProps extends
|
|
70
|
+
interface SheetTitleProps extends HeadingProps {
|
|
69
71
|
}
|
|
70
|
-
/** Accessible title for the Sheet.
|
|
72
|
+
/** Accessible title for the Sheet. Renders as Heading with sensible defaults. */
|
|
71
73
|
declare const Title: React.ForwardRefExoticComponent<SheetTitleProps & React.RefAttributes<HTMLHeadingElement>>;
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
declare const Description: React.ForwardRefExoticComponent<SheetDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
|
|
74
|
+
type SheetDescriptionProps = TextProps;
|
|
75
|
+
/** Supplementary description text for Sheet content. Renders as Text with sensible defaults. */
|
|
76
|
+
declare const Description: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLSpanElement>>;
|
|
76
77
|
interface SheetCloseProps extends ComponentPropsWithout<typeof DialogPrimitive.Close, RemovedProps> {
|
|
77
78
|
}
|
|
78
79
|
/** Close button for the Sheet. Expects a single element child rendered via `asChild`. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/components/sheet.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAGrD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/components/sheet.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAGrD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAQ/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAE3C;;;GAGG;AACH,KAAK,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvE;;;GAGG;AAGH;;GAEG;AACH,UAAU,cAAe,SAAQ,qBAAqB,CAAC,OAAO,eAAe,CAAC,IAAI,EAAE,OAAO,CAAC;CAAG;AAC/F,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAwD,CAAC;AAM5F,kEAAkE;AAClE,UAAU,iBACR,SAAQ,qBAAqB,CAAC,OAAO,eAAe,CAAC,OAAO,EAAE,YAAY,CAAC;CAAG;AAChF,QAAA,MAAM,OAAO,6FAMZ,CAAC;AAMF,UAAU,iBACR,SAAQ,qBAAqB,CAAC,OAAO,eAAe,CAAC,OAAO,EAAE,YAAY,CAAC,EACzE,qBAAqB;IACvB,iFAAiF;IACjF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC;CACxF;AAED;;;;GAIG;AACH,QAAA,MAAM,OAAO,0FA4JZ,CAAC;AAKF,UAAU,eAAgB,SAAQ,YAAY;CAAG;AACjD,iFAAiF;AACjF,QAAA,MAAM,KAAK,4FAMV,CAAC;AAKF,KAAK,qBAAqB,GAAG,SAAS,CAAC;AACvC,gGAAgG;AAChG,QAAA,MAAM,WAAW,mFAShB,CAAC;AAIF,UAAU,eACR,SAAQ,qBAAqB,CAAC,OAAO,eAAe,CAAC,KAAK,EAAE,YAAY,CAAC;CAAG;AAC9E,yFAAyF;AACzF,QAAA,MAAM,KAAK,2FAMV,CAAC;AAGF,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC;AAC7D,YAAY,EACV,cAAc,IAAI,SAAS,EAC3B,iBAAiB,IAAI,YAAY,EACjC,iBAAiB,IAAI,YAAY,EACjC,eAAe,IAAI,UAAU,EAC7B,qBAAqB,IAAI,gBAAgB,EACzC,eAAe,IAAI,UAAU,GAC9B,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var G=Object.create;var c=Object.defineProperty;var J=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var X=Object.getPrototypeOf,Y=Object.prototype.hasOwnProperty;var Z=(e,t)=>{for(var r in t)c(e,r,{get:t[r],enumerable:!0})},x=(e,t,r,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of Q(t))!Y.call(e,i)&&i!==r&&c(e,i,{get:()=>t[i],enumerable:!(s=J(t,i))||s.enumerable});return e};var N=(e,t,r)=>(r=e!=null?G(X(e)):{},x(t||!e||!e.__esModule?c(r,"default",{value:e,enumerable:!0}):r,e)),$=e=>x(c({},"__esModule",{value:!0}),e);var ee={};Z(ee,{Close:()=>C,Content:()=>y,Description:()=>S,Root:()=>P,Title:()=>D,Trigger:()=>u});module.exports=$(ee);var o=N(require("react")),k=N(require("classnames")),a=require("radix-ui"),M=require("./dialog.props.js"),w=require("./theme.js"),B=require("./heading.js"),W=require("./text.js"),h=require("../helpers/extract-props.js"),g=require("../helpers/require-react-element.js"),O=require("../hooks/use-body-pointer-events-cleanup.js");const P=e=>o.createElement(a.Dialog.Root,{...e,modal:!0});P.displayName="Sheet.Root";const u=o.forwardRef(({children:e,...t},r)=>o.createElement(a.Dialog.Trigger,{...t,ref:r,asChild:!0},(0,g.requireReactElement)(e)));u.displayName="Sheet.Trigger";const y=o.forwardRef((e,t)=>{const{side:r="start",forceMount:s,container:i,className:H,panelBackground:L,material:z,...j}=e,A={left:"start",right:"end",start:"start",end:"end",top:"top",bottom:"bottom"}[r],{align:oe,panelBackground:V,material:_,...v}=M.dialogContentPropDefs,{panelBackground:d,material:T}=(0,h.extractProps)({panelBackground:L,material:z},{panelBackground:V,material:_}),E=o.useMemo(()=>T??d,[T,d]),{default:re,...K}=v.maxWidth,q={...v,maxWidth:K},{className:I,...F}=(0,h.extractProps)(j,q),R=o.useRef(null),U=o.useMemo(()=>n=>{R.current=n,typeof t=="function"?t(n):t&&(t.current=n)},[t]);return(0,O.useBodyPointerEventsCleanup)(),o.useEffect(()=>{if(typeof window>"u")return;const n=R.current;if(!n)return;const l=n.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');if(l.length===0)return;const p=l[0],f=l[l.length-1],b=m=>{m.key==="Tab"&&(m.shiftKey?document.activeElement===p&&(m.preventDefault(),f.focus()):document.activeElement===f&&(m.preventDefault(),p.focus()))};return n.addEventListener("keydown",b),p.focus(),()=>{n.removeEventListener("keydown",b)}},[]),o.createElement(a.Dialog.Portal,{container:i,forceMount:s},o.createElement(w.Theme,{asChild:!0},o.createElement(a.Dialog.Overlay,{className:"rt-BaseDialogOverlay rt-DialogOverlay rt-SheetOverlay"},o.createElement(a.Dialog.Content,{...F,ref:U,className:(0,k.default)("rt-BaseDialogContent","rt-SheetContent",H,I),"data-side":A,"data-material":E,"data-panel-background":E,tabIndex:-1,role:"dialog","aria-modal":"true"}))))});y.displayName="Sheet.Content";const D=o.forwardRef(({size:e="4",weight:t="medium",...r},s)=>o.createElement(a.Dialog.Title,{asChild:!0},o.createElement(B.Heading,{ref:s,size:e,weight:t,...r})));D.displayName="Sheet.Title";const S=o.forwardRef((e,t)=>{const{size:r="2",color:s="gray",...i}=e;return o.createElement(a.Dialog.Description,{asChild:!0},o.createElement(W.Text,{ref:t,size:r,color:s,...i}))});S.displayName="Sheet.Description";const C=o.forwardRef(({children:e,...t},r)=>o.createElement(a.Dialog.Close,{...t,ref:r,asChild:!0},(0,g.requireReactElement)(e)));C.displayName="Sheet.Close";
|
|
2
2
|
//# sourceMappingURL=sheet.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/sheet.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client';\n\n/**\n * Sheet\n *\n * A side-placed overlay built on top of Radix Dialog. It inherits accessibility,\n * focus management, overlay behavior, and sizing scales from the base dialog, and\n * adds side placement and slide motion suited for navigation panels and drawers.\n *\n * Structure mirrors Dialog:\n * - Root, Trigger, Content, Title, Description, Close\n *\n * Notes\n * - Side: set with `side` on `Sheet.Content`. Aliases: `left` \u2192 `start`, `right` \u2192 `end`.\n * - Sizing: reuses Dialog content prop defs (width/min/max/height/size). Default Dialog\n * maxWidth clamping is removed for Sheets.\n * - Material: use `material` (solid | translucent). Deprecated `panelBackground` falls back\n * in dev with a warning.\n * - A11y: provide an accessible name via `Sheet.Title` or `aria-label` on `Sheet.Content`.\n *\n * Example\n * <Sheet.Root>\n * <Sheet.Trigger>\n * <Button>Open</Button>\n * </Sheet.Trigger>\n * <Sheet.Content side=\"end\" width={{ initial: '280px', md: '360px' }}>\n * <Sheet.Title>Details</Sheet.Title>\n * ...\n * <Sheet.Close>\n * <Button>Close</Button>\n * </Sheet.Close>\n * </Sheet.Content>\n * </Sheet.Root>\n */\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\n\nimport { dialogContentPropDefs } from './dialog.props.js';\nimport type { DialogContentOwnProps } from './dialog.props.js';\nimport { Theme } from './theme.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { requireReactElement } from '../helpers/require-react-element.js';\nimport { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\n\n/**\n * Supported sides for the Sheet.\n * Aliases are normalized RTL-aware: `left` \u2192 `start`, `right` \u2192 `end`.\n */\ntype SheetSide = 'start' | 'end' | 'top' | 'bottom' | 'left' | 'right';\n\n/**\n * Sheet is a side-placed overlay built on the Dialog primitive.\n * It reuses Dialog's accessibility, focus, overlay, and size scales, while adding side placement and slide motion.\n */\n\n// Root\n/**\n * Props for `Sheet.Root` (Radix Dialog root with `modal` forced on).\n */\ninterface SheetRootProps extends ComponentPropsWithout<typeof DialogPrimitive.Root, 'modal'> {}\nconst Root: React.FC<SheetRootProps> = (props) => <DialogPrimitive.Root {...props} modal />;\nRoot.displayName = 'Sheet.Root';\n\n// Trigger\n/** Element type for `Sheet.Trigger`. */\ntype SheetTriggerElement = React.ElementRef<typeof DialogPrimitive.Trigger>;\n/** Props for `Sheet.Trigger` (expects a single element child). */\ninterface SheetTriggerProps\n extends ComponentPropsWithout<typeof DialogPrimitive.Trigger, RemovedProps> {}\nconst Trigger = React.forwardRef<SheetTriggerElement, SheetTriggerProps>(\n ({ children, ...props }, ref) => (\n <DialogPrimitive.Trigger {...props} ref={ref} asChild>\n {requireReactElement(children)}\n </DialogPrimitive.Trigger>\n ),\n);\nTrigger.displayName = 'Sheet.Trigger';\n\n// Content\n/** Element type for `Sheet.Content`. */\ntype SheetContentElement = React.ElementRef<typeof DialogPrimitive.Content>;\ninterface SheetContentProps\n extends ComponentPropsWithout<typeof DialogPrimitive.Content, RemovedProps>,\n DialogContentOwnProps {\n /** Side where the Sheet should appear. `left`/`right` alias to `start`/`end`. */\n side?: SheetSide;\n /** Optional DOM container to portal into. Defaults to `document.body`. */\n container?: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>['container'];\n}\n\n/**\n * Renders the Sheet panel. Normalizes left/right to logical start/end and\n * forwards dialog sizing props. Provide an accessible name via `Sheet.Title`\n * or `aria-label`.\n */\nconst Content = React.forwardRef<SheetContentElement, SheetContentProps>(\n (allProps, forwardedRef) => {\n const {\n side = 'start',\n forceMount,\n container,\n className,\n panelBackground: panelBackgroundProp,\n material: materialProp,\n ...restProps\n } = allProps;\n const normalizedSideMap: Record<SheetSide, 'start' | 'end' | 'top' | 'bottom'> = {\n left: 'start',\n right: 'end',\n start: 'start',\n end: 'end',\n top: 'top',\n bottom: 'bottom',\n };\n const normalizedSide = normalizedSideMap[side];\n // Reuse dialog content prop defs for size/width/height tokens, but handle\n // material/panelBackground explicitly to avoid forwarding unknown DOM props.\n const {\n align: _alignPropDef,\n panelBackground: panelBackgroundPropDef,\n material: materialPropDef,\n ...propDefs\n } = dialogContentPropDefs;\n\n // Extract panelBackground and material together (remove from DOM props)\n const { panelBackground: resolvedPanelBackground, material: resolvedMaterial } = extractProps(\n { panelBackground: panelBackgroundProp, material: materialProp },\n { panelBackground: panelBackgroundPropDef, material: materialPropDef },\n );\n\n const materialValue = React.useMemo(() => {\n if (resolvedPanelBackground !== undefined) {\n if (process.env.NODE_ENV !== 'production') {\n console.warn(\n 'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use the `material` prop instead.',\n );\n }\n }\n return resolvedMaterial ?? resolvedPanelBackground;\n }, [resolvedMaterial, resolvedPanelBackground]);\n\n // Now extract remaining props using dialog defs so size/width/height classnames are applied\n // Override dialog's default maxWidth (600px) to avoid clamping Sheet by default\n // Match dialog.tsx: extract once and avoid leaking panel/material\n const { default: _mwDefault, ...maxWidthWithoutDefault } = propDefs.maxWidth;\n const sheetPropDefs = {\n ...propDefs,\n maxWidth: maxWidthWithoutDefault,\n } as typeof propDefs;\n const { className: extractedClassName, ...contentProps } = extractProps(\n restProps,\n sheetPropDefs,\n );\n\n // Dev-only a11y guard: ensure label is provided via Title or aria-label\n if (process.env.NODE_ENV !== 'production') {\n const children = (contentProps as any).children as React.ReactNode;\n const hasAriaLabel = typeof (contentProps as any)['aria-label'] === 'string';\n let hasTitle = false;\n if (children) {\n for (const child of React.Children.toArray(children)) {\n if (React.isValidElement(child) && child.type === Title) {\n hasTitle = true;\n break;\n }\n }\n }\n if (!hasTitle && !hasAriaLabel) {\n console.warn(\n 'Sheet.Content: Missing accessible name. Include Sheet.Title as a child or provide aria-label.',\n );\n }\n }\n\n // Focus management and stuck pointer-events cleanup like Dialog\n const contentRef = React.useRef<HTMLDivElement>(null);\n const combinedRef = React.useMemo(\n () => (node: HTMLDivElement | null) => {\n contentRef.current = node;\n if (typeof forwardedRef === 'function') {\n forwardedRef(node);\n } else if (forwardedRef) {\n (forwardedRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n }\n },\n [forwardedRef],\n );\n\n useBodyPointerEventsCleanup();\n\n React.useEffect(() => {\n if (typeof window === 'undefined') return;\n const content = contentRef.current;\n if (!content) return;\n\n const focusableElements = content.querySelectorAll(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n );\n\n if (focusableElements.length === 0) return;\n\n const firstElement = focusableElements[0] as HTMLElement;\n const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Tab') {\n if (event.shiftKey) {\n if (document.activeElement === firstElement) {\n event.preventDefault();\n lastElement.focus();\n }\n } else if (document.activeElement === lastElement) {\n event.preventDefault();\n firstElement.focus();\n }\n }\n };\n\n content.addEventListener('keydown', handleKeyDown);\n firstElement.focus();\n\n return () => {\n content.removeEventListener('keydown', handleKeyDown);\n };\n }, []);\n\n return (\n <DialogPrimitive.Portal container={container} forceMount={forceMount}>\n <Theme asChild>\n <DialogPrimitive.Overlay className=\"rt-BaseDialogOverlay rt-DialogOverlay rt-SheetOverlay\">\n <DialogPrimitive.Content\n {...contentProps}\n ref={combinedRef}\n className={classNames(\n 'rt-BaseDialogContent',\n 'rt-SheetContent',\n className,\n extractedClassName,\n )}\n data-side={normalizedSide}\n data-material={materialValue}\n data-panel-background={materialValue}\n tabIndex={-1}\n role=\"dialog\"\n aria-modal=\"true\"\n />\n </DialogPrimitive.Overlay>\n </Theme>\n </DialogPrimitive.Portal>\n );\n },\n);\nContent.displayName = 'Sheet.Content';\n\n// Title/Description/Close re-export\ntype SheetTitleElement = React.ElementRef<typeof DialogPrimitive.Title>;\ninterface SheetTitleProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title> {}\n/** Accessible title for the Sheet. Required for non-decorative content. */\nconst Title = React.forwardRef<SheetTitleElement, SheetTitleProps>(\n ({ children, ...props }, ref) => (\n <DialogPrimitive.Title {...props} ref={ref} asChild={false}>\n {children}\n </DialogPrimitive.Title>\n ),\n);\nTitle.displayName = 'Sheet.Title';\n\ntype SheetDescriptionElement = React.ElementRef<typeof DialogPrimitive.Description>;\ninterface SheetDescriptionProps\n extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> {}\n/** Supplementary description text for Sheet content. */\nconst Description = React.forwardRef<SheetDescriptionElement, SheetDescriptionProps>(\n ({ children, ...props }, ref) => (\n <DialogPrimitive.Description {...props} ref={ref} asChild={false}>\n {children}\n </DialogPrimitive.Description>\n ),\n);\nDescription.displayName = 'Sheet.Description';\n\ntype SheetCloseElement = React.ElementRef<typeof DialogPrimitive.Close>;\ninterface SheetCloseProps\n extends ComponentPropsWithout<typeof DialogPrimitive.Close, RemovedProps> {}\n/** Close button for the Sheet. Expects a single element child rendered via `asChild`. */\nconst Close = React.forwardRef<SheetCloseElement, SheetCloseProps>(\n ({ children, ...props }, ref) => (\n <DialogPrimitive.Close {...props} ref={ref} asChild>\n {requireReactElement(children)}\n </DialogPrimitive.Close>\n ),\n);\nClose.displayName = 'Sheet.Close';\n\nexport { Root, Trigger, Content, Title, Description, Close };\nexport type {\n SheetRootProps as RootProps,\n SheetTriggerProps as TriggerProps,\n SheetContentProps as ContentProps,\n SheetTitleProps as TitleProps,\n SheetDescriptionProps as DescriptionProps,\n SheetCloseProps as CloseProps,\n};\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,
|
|
6
|
-
"names": ["sheet_exports", "__export", "Close", "Content", "Description", "Root", "Title", "Trigger", "__toCommonJS", "React", "import_classnames", "import_radix_ui", "import_dialog_props", "import_theme", "import_extract_props", "import_require_react_element", "import_use_body_pointer_events_cleanup", "props", "DialogPrimitive", "children", "ref", "allProps", "forwardedRef", "side", "forceMount", "container", "className", "panelBackgroundProp", "materialProp", "restProps", "normalizedSide", "_alignPropDef", "panelBackgroundPropDef", "materialPropDef", "propDefs", "resolvedPanelBackground", "resolvedMaterial", "materialValue", "_mwDefault", "maxWidthWithoutDefault", "sheetPropDefs", "extractedClassName", "contentProps", "contentRef", "combinedRef", "node", "content", "focusableElements", "firstElement", "lastElement", "handleKeyDown", "event", "classNames"]
|
|
4
|
+
"sourcesContent": ["'use client';\n\n/**\n * Sheet\n *\n * A side-placed overlay built on top of Radix Dialog. It inherits accessibility,\n * focus management, overlay behavior, and sizing scales from the base dialog, and\n * adds side placement and slide motion suited for navigation panels and drawers.\n *\n * Structure mirrors Dialog:\n * - Root, Trigger, Content, Title, Description, Close\n *\n * Notes\n * - Side: set with `side` on `Sheet.Content`. Aliases: `left` \u2192 `start`, `right` \u2192 `end`.\n * - Sizing: reuses Dialog content prop defs (width/min/max/height/size). Default Dialog\n * maxWidth clamping is removed for Sheets.\n * - Material: use `material` (solid | translucent). Deprecated `panelBackground` falls back\n * in dev with a warning.\n * - A11y: provide an accessible name via `Sheet.Title` or `aria-label` on `Sheet.Content`.\n *\n * Example\n * <Sheet.Root>\n * <Sheet.Trigger>\n * <Button>Open</Button>\n * </Sheet.Trigger>\n * <Sheet.Content side=\"end\" width={{ initial: '280px', md: '360px' }}>\n * <Sheet.Title>Details</Sheet.Title>\n * ...\n * <Sheet.Close>\n * <Button>Close</Button>\n * </Sheet.Close>\n * </Sheet.Content>\n * </Sheet.Root>\n */\n\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\n\nimport { dialogContentPropDefs } from './dialog.props.js';\nimport type { DialogContentOwnProps } from './dialog.props.js';\nimport { Theme } from './theme.js';\nimport { Heading } from './heading.js';\nimport { Text } from './text.js';\nimport { extractProps } from '../helpers/extract-props.js';\nimport { requireReactElement } from '../helpers/require-react-element.js';\nimport { useBodyPointerEventsCleanup } from '../hooks/use-body-pointer-events-cleanup.js';\n\nimport type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';\nimport type { HeadingProps } from './heading.js';\nimport type { TextProps } from './text.js';\n\n/**\n * Supported sides for the Sheet.\n * Aliases are normalized RTL-aware: `left` \u2192 `start`, `right` \u2192 `end`.\n */\ntype SheetSide = 'start' | 'end' | 'top' | 'bottom' | 'left' | 'right';\n\n/**\n * Sheet is a side-placed overlay built on the Dialog primitive.\n * It reuses Dialog's accessibility, focus, overlay, and size scales, while adding side placement and slide motion.\n */\n\n// Root\n/**\n * Props for `Sheet.Root` (Radix Dialog root with `modal` forced on).\n */\ninterface SheetRootProps extends ComponentPropsWithout<typeof DialogPrimitive.Root, 'modal'> {}\nconst Root: React.FC<SheetRootProps> = (props) => <DialogPrimitive.Root {...props} modal />;\nRoot.displayName = 'Sheet.Root';\n\n// Trigger\n/** Element type for `Sheet.Trigger`. */\ntype SheetTriggerElement = React.ElementRef<typeof DialogPrimitive.Trigger>;\n/** Props for `Sheet.Trigger` (expects a single element child). */\ninterface SheetTriggerProps\n extends ComponentPropsWithout<typeof DialogPrimitive.Trigger, RemovedProps> {}\nconst Trigger = React.forwardRef<SheetTriggerElement, SheetTriggerProps>(\n ({ children, ...props }, ref) => (\n <DialogPrimitive.Trigger {...props} ref={ref} asChild>\n {requireReactElement(children)}\n </DialogPrimitive.Trigger>\n ),\n);\nTrigger.displayName = 'Sheet.Trigger';\n\n// Content\n/** Element type for `Sheet.Content`. */\ntype SheetContentElement = React.ElementRef<typeof DialogPrimitive.Content>;\ninterface SheetContentProps\n extends ComponentPropsWithout<typeof DialogPrimitive.Content, RemovedProps>,\n DialogContentOwnProps {\n /** Side where the Sheet should appear. `left`/`right` alias to `start`/`end`. */\n side?: SheetSide;\n /** Optional DOM container to portal into. Defaults to `document.body`. */\n container?: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Portal>['container'];\n}\n\n/**\n * Renders the Sheet panel. Normalizes left/right to logical start/end and\n * forwards dialog sizing props. Provide an accessible name via `Sheet.Title`\n * or `aria-label`.\n */\nconst Content = React.forwardRef<SheetContentElement, SheetContentProps>(\n (allProps, forwardedRef) => {\n const {\n side = 'start',\n forceMount,\n container,\n className,\n panelBackground: panelBackgroundProp,\n material: materialProp,\n ...restProps\n } = allProps;\n const normalizedSideMap: Record<SheetSide, 'start' | 'end' | 'top' | 'bottom'> = {\n left: 'start',\n right: 'end',\n start: 'start',\n end: 'end',\n top: 'top',\n bottom: 'bottom',\n };\n const normalizedSide = normalizedSideMap[side];\n // Reuse dialog content prop defs for size/width/height tokens, but handle\n // material/panelBackground explicitly to avoid forwarding unknown DOM props.\n const {\n align: _alignPropDef,\n panelBackground: panelBackgroundPropDef,\n material: materialPropDef,\n ...propDefs\n } = dialogContentPropDefs;\n\n // Extract panelBackground and material together (remove from DOM props)\n const { panelBackground: resolvedPanelBackground, material: resolvedMaterial } = extractProps(\n { panelBackground: panelBackgroundProp, material: materialProp },\n { panelBackground: panelBackgroundPropDef, material: materialPropDef },\n );\n\n const materialValue = React.useMemo(() => {\n if (resolvedPanelBackground !== undefined) {\n if (process.env.NODE_ENV !== 'production') {\n console.warn(\n 'Warning: The `panelBackground` prop is deprecated and will be removed in a future version. Use the `material` prop instead.',\n );\n }\n }\n return resolvedMaterial ?? resolvedPanelBackground;\n }, [resolvedMaterial, resolvedPanelBackground]);\n\n // Now extract remaining props using dialog defs so size/width/height classnames are applied\n // Override dialog's default maxWidth (600px) to avoid clamping Sheet by default\n // Match dialog.tsx: extract once and avoid leaking panel/material\n const { default: _mwDefault, ...maxWidthWithoutDefault } = propDefs.maxWidth;\n const sheetPropDefs = {\n ...propDefs,\n maxWidth: maxWidthWithoutDefault,\n } as typeof propDefs;\n const { className: extractedClassName, ...contentProps } = extractProps(\n restProps,\n sheetPropDefs,\n );\n\n // Dev-only a11y guard: ensure label is provided via Title or aria-label\n if (process.env.NODE_ENV !== 'production') {\n const children = (contentProps as any).children as React.ReactNode;\n const hasAriaLabel = typeof (contentProps as any)['aria-label'] === 'string';\n let hasTitle = false;\n if (children) {\n for (const child of React.Children.toArray(children)) {\n if (React.isValidElement(child) && child.type === Title) {\n hasTitle = true;\n break;\n }\n }\n }\n if (!hasTitle && !hasAriaLabel) {\n console.warn(\n 'Sheet.Content: Missing accessible name. Include Sheet.Title as a child or provide aria-label.',\n );\n }\n }\n\n // Focus management and stuck pointer-events cleanup like Dialog\n const contentRef = React.useRef<HTMLDivElement>(null);\n const combinedRef = React.useMemo(\n () => (node: HTMLDivElement | null) => {\n contentRef.current = node;\n if (typeof forwardedRef === 'function') {\n forwardedRef(node);\n } else if (forwardedRef) {\n (forwardedRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n }\n },\n [forwardedRef],\n );\n\n useBodyPointerEventsCleanup();\n\n React.useEffect(() => {\n if (typeof window === 'undefined') return;\n const content = contentRef.current;\n if (!content) return;\n\n const focusableElements = content.querySelectorAll(\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n );\n\n if (focusableElements.length === 0) return;\n\n const firstElement = focusableElements[0] as HTMLElement;\n const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;\n\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Tab') {\n if (event.shiftKey) {\n if (document.activeElement === firstElement) {\n event.preventDefault();\n lastElement.focus();\n }\n } else if (document.activeElement === lastElement) {\n event.preventDefault();\n firstElement.focus();\n }\n }\n };\n\n content.addEventListener('keydown', handleKeyDown);\n firstElement.focus();\n\n return () => {\n content.removeEventListener('keydown', handleKeyDown);\n };\n }, []);\n\n return (\n <DialogPrimitive.Portal container={container} forceMount={forceMount}>\n <Theme asChild>\n <DialogPrimitive.Overlay className=\"rt-BaseDialogOverlay rt-DialogOverlay rt-SheetOverlay\">\n <DialogPrimitive.Content\n {...contentProps}\n ref={combinedRef}\n className={classNames(\n 'rt-BaseDialogContent',\n 'rt-SheetContent',\n className,\n extractedClassName,\n )}\n data-side={normalizedSide}\n data-material={materialValue}\n data-panel-background={materialValue}\n tabIndex={-1}\n role=\"dialog\"\n aria-modal=\"true\"\n />\n </DialogPrimitive.Overlay>\n </Theme>\n </DialogPrimitive.Portal>\n );\n },\n);\nContent.displayName = 'Sheet.Content';\n\n// Title - renders as Heading with sensible defaults\ntype SheetTitleElement = React.ElementRef<typeof Heading>;\ninterface SheetTitleProps extends HeadingProps {}\n/** Accessible title for the Sheet. Renders as Heading with sensible defaults. */\nconst Title = React.forwardRef<SheetTitleElement, SheetTitleProps>(\n ({ size = '4', weight = 'medium', ...props }, ref) => (\n <DialogPrimitive.Title asChild>\n <Heading ref={ref} size={size} weight={weight} {...props} />\n </DialogPrimitive.Title>\n ),\n);\nTitle.displayName = 'Sheet.Title';\n\n// Description - renders as Text with sensible defaults\ntype SheetDescriptionElement = React.ElementRef<typeof Text>;\ntype SheetDescriptionProps = TextProps;\n/** Supplementary description text for Sheet content. Renders as Text with sensible defaults. */\nconst Description = React.forwardRef<SheetDescriptionElement, SheetDescriptionProps>(\n (props, ref) => {\n const { size = '2', color = 'gray', ...rest } = props as any;\n return (\n <DialogPrimitive.Description asChild>\n <Text ref={ref} size={size} color={color} {...rest} />\n </DialogPrimitive.Description>\n );\n },\n);\nDescription.displayName = 'Sheet.Description';\n\ntype SheetCloseElement = React.ElementRef<typeof DialogPrimitive.Close>;\ninterface SheetCloseProps\n extends ComponentPropsWithout<typeof DialogPrimitive.Close, RemovedProps> {}\n/** Close button for the Sheet. Expects a single element child rendered via `asChild`. */\nconst Close = React.forwardRef<SheetCloseElement, SheetCloseProps>(\n ({ children, ...props }, ref) => (\n <DialogPrimitive.Close {...props} ref={ref} asChild>\n {requireReactElement(children)}\n </DialogPrimitive.Close>\n ),\n);\nClose.displayName = 'Sheet.Close';\n\nexport { Root, Trigger, Content, Title, Description, Close };\nexport type {\n SheetRootProps as RootProps,\n SheetTriggerProps as TriggerProps,\n SheetContentProps as ContentProps,\n SheetTitleProps as TitleProps,\n SheetDescriptionProps as DescriptionProps,\n SheetCloseProps as CloseProps,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["sheet_exports", "__export", "Close", "Content", "Description", "Root", "Title", "Trigger", "__toCommonJS", "React", "import_classnames", "import_radix_ui", "import_dialog_props", "import_theme", "import_heading", "import_text", "import_extract_props", "import_require_react_element", "import_use_body_pointer_events_cleanup", "props", "DialogPrimitive", "children", "ref", "allProps", "forwardedRef", "side", "forceMount", "container", "className", "panelBackgroundProp", "materialProp", "restProps", "normalizedSide", "_alignPropDef", "panelBackgroundPropDef", "materialPropDef", "propDefs", "resolvedPanelBackground", "resolvedMaterial", "materialValue", "_mwDefault", "maxWidthWithoutDefault", "sheetPropDefs", "extractedClassName", "contentProps", "contentRef", "combinedRef", "node", "content", "focusableElements", "firstElement", "lastElement", "handleKeyDown", "event", "classNames", "size", "weight", "color", "rest"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Heading } from './heading.js';
|
|
3
3
|
import type { CardProps } from './card.js';
|
|
4
|
-
import type {
|
|
4
|
+
import type { FlexProps } from './flex.js';
|
|
5
5
|
type Anchor = 'top' | 'bottom' | 'left' | 'right';
|
|
6
6
|
type SpaceScale = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
|
|
7
7
|
interface ToolbarRootProps extends Omit<CardProps, 'asChild'> {
|
|
@@ -23,11 +23,10 @@ interface ToolbarRootProps extends Omit<CardProps, 'asChild'> {
|
|
|
23
23
|
offset?: SpaceScale;
|
|
24
24
|
}
|
|
25
25
|
declare const ToolbarRoot: React.ForwardRefExoticComponent<ToolbarRootProps & React.RefAttributes<HTMLDivElement>>;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
declare const
|
|
29
|
-
declare const
|
|
30
|
-
declare const ToolbarRight: React.ForwardRefExoticComponent<ToolbarSectionProps & React.RefAttributes<HTMLDivElement>>;
|
|
26
|
+
type ToolbarSectionProps = FlexProps;
|
|
27
|
+
declare const ToolbarLeft: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
|
|
28
|
+
declare const ToolbarCenter: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
|
|
29
|
+
declare const ToolbarRight: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
|
|
31
30
|
interface ToolbarTitleProps extends React.ComponentPropsWithoutRef<typeof Heading> {
|
|
32
31
|
}
|
|
33
32
|
declare const ToolbarTitle: React.ForwardRefExoticComponent<ToolbarTitleProps & React.RefAttributes<HTMLHeadingElement>>;
|
|
@@ -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,
|
|
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,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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"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;
|
|
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 {
|
|
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,
|
|
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"]
|
|
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 { 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"],
|
|
5
|
+
"mappings": "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",
|
|
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", "gap", "align", "justify", "weight", "truncate"]
|
|
7
7
|
}
|
|
@@ -1 +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,
|
|
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,kFAmBR,CAAC;AAGH,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,YAAY,EAAE,SAAS,EAAE,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=card.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/card.tsx"],
|
|
4
|
-
"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"],
|
|
5
|
-
"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,
|
|
6
|
-
"names": ["React", "classNames", "Slot", "cardPropDefs", "extractProps", "marginPropDefs", "Card", "props", "forwardedRef", "asChild", "className", "panelBackground", "material", "flush", "cardProps", "effectiveMaterial", "Comp"]
|
|
4
|
+
"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"],
|
|
5
|
+
"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",
|
|
6
|
+
"names": ["React", "classNames", "Slot", "cardPropDefs", "extractProps", "marginPropDefs", "Card", "props", "forwardedRef", "asChild", "className", "panelBackground", "material", "flush", "inset", "cardProps", "effectiveMaterial", "Comp"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"card.props.d.ts","sourceRoot":"","sources":["../../../src/components/card.props.tsx"],"names":[],"mappings":"AASA,QAAA,MAAM,YAAY
|
|
1
|
+
{"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
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};
|
|
1
|
+
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};
|
|
2
2
|
//# sourceMappingURL=card.props.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/card.props.tsx"],
|
|
4
|
-
"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"],
|
|
5
|
-
"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",
|
|
4
|
+
"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"],
|
|
5
|
+
"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",
|
|
6
6
|
"names": ["asChildPropDef", "sizes", "variants", "panelBackgrounds", "materials", "cardPropDefs"]
|
|
7
7
|
}
|
|
@@ -34,6 +34,8 @@ import * as React from 'react';
|
|
|
34
34
|
import { Dialog as DialogPrimitive } from 'radix-ui';
|
|
35
35
|
import type { DialogContentOwnProps } from './dialog.props.js';
|
|
36
36
|
import type { ComponentPropsWithout, RemovedProps } from '../helpers/component-props.js';
|
|
37
|
+
import type { HeadingProps } from './heading.js';
|
|
38
|
+
import type { TextProps } from './text.js';
|
|
37
39
|
/**
|
|
38
40
|
* Supported sides for the Sheet.
|
|
39
41
|
* Aliases are normalized RTL-aware: `left` → `start`, `right` → `end`.
|
|
@@ -65,14 +67,13 @@ interface SheetContentProps extends ComponentPropsWithout<typeof DialogPrimitive
|
|
|
65
67
|
* or `aria-label`.
|
|
66
68
|
*/
|
|
67
69
|
declare const Content: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
68
|
-
interface SheetTitleProps extends
|
|
70
|
+
interface SheetTitleProps extends HeadingProps {
|
|
69
71
|
}
|
|
70
|
-
/** Accessible title for the Sheet.
|
|
72
|
+
/** Accessible title for the Sheet. Renders as Heading with sensible defaults. */
|
|
71
73
|
declare const Title: React.ForwardRefExoticComponent<SheetTitleProps & React.RefAttributes<HTMLHeadingElement>>;
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
declare const Description: React.ForwardRefExoticComponent<SheetDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
|
|
74
|
+
type SheetDescriptionProps = TextProps;
|
|
75
|
+
/** Supplementary description text for Sheet content. Renders as Text with sensible defaults. */
|
|
76
|
+
declare const Description: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLSpanElement>>;
|
|
76
77
|
interface SheetCloseProps extends ComponentPropsWithout<typeof DialogPrimitive.Close, RemovedProps> {
|
|
77
78
|
}
|
|
78
79
|
/** Close button for the Sheet. Expects a single element child rendered via `asChild`. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/components/sheet.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAGrD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../../src/components/sheet.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,UAAU,CAAC;AAGrD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAQ/D,OAAO,KAAK,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AACzF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAE3C;;;GAGG;AACH,KAAK,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvE;;;GAGG;AAGH;;GAEG;AACH,UAAU,cAAe,SAAQ,qBAAqB,CAAC,OAAO,eAAe,CAAC,IAAI,EAAE,OAAO,CAAC;CAAG;AAC/F,QAAA,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAAwD,CAAC;AAM5F,kEAAkE;AAClE,UAAU,iBACR,SAAQ,qBAAqB,CAAC,OAAO,eAAe,CAAC,OAAO,EAAE,YAAY,CAAC;CAAG;AAChF,QAAA,MAAM,OAAO,6FAMZ,CAAC;AAMF,UAAU,iBACR,SAAQ,qBAAqB,CAAC,OAAO,eAAe,CAAC,OAAO,EAAE,YAAY,CAAC,EACzE,qBAAqB;IACvB,iFAAiF;IACjF,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,CAAC;CACxF;AAED;;;;GAIG;AACH,QAAA,MAAM,OAAO,0FA4JZ,CAAC;AAKF,UAAU,eAAgB,SAAQ,YAAY;CAAG;AACjD,iFAAiF;AACjF,QAAA,MAAM,KAAK,4FAMV,CAAC;AAKF,KAAK,qBAAqB,GAAG,SAAS,CAAC;AACvC,gGAAgG;AAChG,QAAA,MAAM,WAAW,mFAShB,CAAC;AAIF,UAAU,eACR,SAAQ,qBAAqB,CAAC,OAAO,eAAe,CAAC,KAAK,EAAE,YAAY,CAAC;CAAG;AAC9E,yFAAyF;AACzF,QAAA,MAAM,KAAK,2FAMV,CAAC;AAGF,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,CAAC;AAC7D,YAAY,EACV,cAAc,IAAI,SAAS,EAC3B,iBAAiB,IAAI,YAAY,EACjC,iBAAiB,IAAI,YAAY,EACjC,eAAe,IAAI,UAAU,EAC7B,qBAAqB,IAAI,gBAAgB,EACzC,eAAe,IAAI,UAAU,GAC9B,CAAC"}
|