@mage-ui/preset 1.0.151 → 1.0.153
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/dist/recipes/data-display/indicator/indicator-label.mjs +1 -1
- package/dist/recipes/data-display/indicator/indicator-label.mjs.map +1 -1
- package/dist/recipes/data-display/indicator/indicator.mjs +1 -1
- package/dist/recipes/data-display/indicator/indicator.mjs.map +1 -1
- package/dist/recipes/navigations/sidebars/sidebar/sidebar-root.mjs +1 -1
- package/dist/recipes/navigations/sidebars/sidebar/sidebar-root.mjs.map +1 -1
- package/dist/recipes/navigations/sidebars/sidebar/sidebar.mjs +1 -1
- package/dist/recipes/navigations/sidebars/sidebar/sidebar.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineRecipe as e}from"@pandabox/define-recipe";const t=e({className:`indicator__label`,jsx:[`Indicator`],base:{boxSizing:`border-box`,position:`absolute`,fontFamily:`var(--indicator-font-family, {fonts.base})`,fontSize:`var(--indicator-font-size, {fontSizes.100})`,lineHeight:`var(--indicator-line-height, inherit)`,backgroundColor:`var(--indicator-background, {colors.neutral.background.1.enabled})`,color:`var(--indicator-foreground, {colors.neutral.foreground.1.enabled})`,minWidth:`var(--indicator-min-width, 1rem)`,minHeight:`var(--indicator-min-height, 1rem)`,borderRadius:`var(--indicator-border-radius, {radii.900})`,borderWidth:`var(--indicator-border-width, {borders.100})`,borderStyle:`var(--indicator-border-style, solid)`,borderColor:`var(--indicator-border-color, {colors.neutral.stroke.1.enabled})`,display:`inline-flex`,flexWrap:`nowrap`,flexDirection:`row`,justifyContent:`center`,alignItems:`center`,textAlign:`center`,zIndex:`
|
|
1
|
+
import{defineRecipe as e}from"@pandabox/define-recipe";const t=e({className:`indicator__label`,jsx:[`Indicator`],base:{boxSizing:`border-box`,position:`absolute`,fontFamily:`var(--indicator-font-family, {fonts.base})`,fontSize:`var(--indicator-font-size, {fontSizes.100})`,lineHeight:`var(--indicator-line-height, inherit)`,backgroundColor:`var(--indicator-background, {colors.neutral.background.1.enabled})`,color:`var(--indicator-foreground, {colors.neutral.foreground.1.enabled})`,minWidth:`var(--indicator-min-width, 1rem)`,minHeight:`var(--indicator-min-height, 1rem)`,borderRadius:`var(--indicator-border-radius, {radii.900})`,borderWidth:`var(--indicator-border-width, {borders.100})`,borderStyle:`var(--indicator-border-style, solid)`,borderColor:`var(--indicator-border-color, {colors.neutral.stroke.1.enabled})`,display:`inline-flex`,flexWrap:`nowrap`,flexDirection:`row`,justifyContent:`center`,alignItems:`center`,textAlign:`center`,zIndex:`var(--indicator-zindex, unset)`,userSelect:`none`,paddingInline:`var(--indicator-padding-inline, {spacing.50})`,_empty:{backgroundColor:`var(--indicator-empty-background, {colors.danger.background.1.enabled})`,minWidth:`var(--indicator-empty-width, .75rem)`,minHeight:`var(--indicator-empty-height, .75rem)`,borderRadius:`var(--indicator-empty-border-radius, {radii.900})`,borderWidth:`var(--indicator-empty-border-width, {borders.100})`,borderStyle:`var(--indicator-empty-border-style, solid)`,borderColor:`var(--indicator-empty-border-color, {colors.danger.stroke.1.enabled})`,paddingInline:`0`}},variants:{position:{"top-start":{top:0,left:0,transform:`translate(-50%, -50%)`},"top-center":{top:0,left:`50%`,transform:`translate(-50%, -50%)`},"top-end":{top:0,right:0,transform:`translate(50%, -50%)`},"center-start":{top:`50%`,left:0,transform:`translate(-50%, -50%)`},"center-end":{top:`50%`,right:0,transform:`translate(50%, -50%)`},"center-center":{top:`50%`,left:`50%`,transform:`translate(-50%, -50%)`},"bottom-start":{bottom:0,left:0,transform:`translate(-50%, 50%)`},"bottom-end":{bottom:0,right:0,transform:`translate(50%, 50%)`},"bottom-center":{bottom:0,left:`50%`,transform:`translate(-50%, 50%)`}}}});export{t as indicatorLabel};
|
|
2
2
|
//# sourceMappingURL=indicator-label.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"indicator-label.mjs","names":[],"sources":["../../../../src/recipes/data-display/indicator/indicator-label.ts"],"sourcesContent":["import {\n defineRecipe,\n type RecipeBuilder,\n type RecipeVariantRecord,\n} from '@pandabox/define-recipe';\n\nexport const indicatorLabel = defineRecipe({\n className: 'indicator__label',\n jsx: ['Indicator'],\n base: {\n boxSizing: 'border-box',\n position: 'absolute',\n fontFamily: 'var(--indicator-font-family, {fonts.base})',\n fontSize: 'var(--indicator-font-size, {fontSizes.100})',\n lineHeight: 'var(--indicator-line-height, inherit)',\n backgroundColor:\n 'var(--indicator-background, {colors.neutral.background.1.enabled})',\n color: 'var(--indicator-foreground, {colors.neutral.foreground.1.enabled})',\n minWidth: 'var(--indicator-min-width, 1rem)',\n minHeight: 'var(--indicator-min-height, 1rem)',\n borderRadius: 'var(--indicator-border-radius, {radii.900})',\n borderWidth: 'var(--indicator-border-width, {borders.100})',\n borderStyle: 'var(--indicator-border-style, solid)',\n borderColor:\n 'var(--indicator-border-color, {colors.neutral.stroke.1.enabled})',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n textAlign: 'center',\n zIndex: '
|
|
1
|
+
{"version":3,"file":"indicator-label.mjs","names":[],"sources":["../../../../src/recipes/data-display/indicator/indicator-label.ts"],"sourcesContent":["import {\n defineRecipe,\n type RecipeBuilder,\n type RecipeVariantRecord,\n} from '@pandabox/define-recipe';\n\nexport const indicatorLabel = defineRecipe({\n className: 'indicator__label',\n jsx: ['Indicator'],\n base: {\n boxSizing: 'border-box',\n position: 'absolute',\n fontFamily: 'var(--indicator-font-family, {fonts.base})',\n fontSize: 'var(--indicator-font-size, {fontSizes.100})',\n lineHeight: 'var(--indicator-line-height, inherit)',\n backgroundColor:\n 'var(--indicator-background, {colors.neutral.background.1.enabled})',\n color: 'var(--indicator-foreground, {colors.neutral.foreground.1.enabled})',\n minWidth: 'var(--indicator-min-width, 1rem)',\n minHeight: 'var(--indicator-min-height, 1rem)',\n borderRadius: 'var(--indicator-border-radius, {radii.900})',\n borderWidth: 'var(--indicator-border-width, {borders.100})',\n borderStyle: 'var(--indicator-border-style, solid)',\n borderColor:\n 'var(--indicator-border-color, {colors.neutral.stroke.1.enabled})',\n display: 'inline-flex',\n flexWrap: 'nowrap',\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n textAlign: 'center',\n zIndex: 'var(--indicator-zindex, unset)',\n userSelect: 'none',\n paddingInline: 'var(--indicator-padding-inline, {spacing.50})',\n\n _empty: {\n backgroundColor:\n 'var(--indicator-empty-background, {colors.danger.background.1.enabled})',\n minWidth: 'var(--indicator-empty-width, .75rem)',\n minHeight: 'var(--indicator-empty-height, .75rem)',\n borderRadius: 'var(--indicator-empty-border-radius, {radii.900})',\n borderWidth: 'var(--indicator-empty-border-width, {borders.100})',\n borderStyle: 'var(--indicator-empty-border-style, solid)',\n borderColor:\n 'var(--indicator-empty-border-color, {colors.danger.stroke.1.enabled})',\n paddingInline: '0',\n },\n },\n variants: {\n position: {\n 'top-start': { top: 0, left: 0, transform: 'translate(-50%, -50%)' },\n 'top-center': { top: 0, left: '50%', transform: 'translate(-50%, -50%)' },\n 'top-end': { top: 0, right: 0, transform: 'translate(50%, -50%)' },\n 'center-start': {\n top: '50%',\n left: 0,\n transform: 'translate(-50%, -50%)',\n },\n 'center-end': { top: '50%', right: 0, transform: 'translate(50%, -50%)' },\n 'center-center': {\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n },\n 'bottom-start': { bottom: 0, left: 0, transform: 'translate(-50%, 50%)' },\n 'bottom-end': { bottom: 0, right: 0, transform: 'translate(50%, 50%)' },\n 'bottom-center': {\n bottom: 0,\n left: '50%',\n transform: 'translate(-50%, 50%)',\n },\n },\n },\n}) as RecipeBuilder<RecipeVariantRecord>;\n"],"mappings":"uDAMA,MAAa,EAAiB,EAAa,CACzC,UAAW,mBACX,IAAK,CAAC,YAAY,CAClB,KAAM,CACJ,UAAW,aACX,SAAU,WACV,WAAY,6CACZ,SAAU,8CACV,WAAY,wCACZ,gBACE,qEACF,MAAO,qEACP,SAAU,mCACV,UAAW,oCACX,aAAc,8CACd,YAAa,+CACb,YAAa,uCACb,YACE,mEACF,QAAS,cACT,SAAU,SACV,cAAe,MACf,eAAgB,SAChB,WAAY,SACZ,UAAW,SACX,OAAQ,iCACR,WAAY,OACZ,cAAe,gDAEf,OAAQ,CACN,gBACE,0EACF,SAAU,uCACV,UAAW,wCACX,aAAc,oDACd,YAAa,qDACb,YAAa,6CACb,YACE,wEACF,cAAe,IAChB,CACF,CACD,SAAU,CACR,SAAU,CACR,YAAa,CAAE,IAAK,EAAG,KAAM,EAAG,UAAW,wBAAyB,CACpE,aAAc,CAAE,IAAK,EAAG,KAAM,MAAO,UAAW,wBAAyB,CACzE,UAAW,CAAE,IAAK,EAAG,MAAO,EAAG,UAAW,uBAAwB,CAClE,eAAgB,CACd,IAAK,MACL,KAAM,EACN,UAAW,wBACZ,CACD,aAAc,CAAE,IAAK,MAAO,MAAO,EAAG,UAAW,uBAAwB,CACzE,gBAAiB,CACf,IAAK,MACL,KAAM,MACN,UAAW,wBACZ,CACD,eAAgB,CAAE,OAAQ,EAAG,KAAM,EAAG,UAAW,uBAAwB,CACzE,aAAc,CAAE,OAAQ,EAAG,MAAO,EAAG,UAAW,sBAAuB,CACvE,gBAAiB,CACf,OAAQ,EACR,KAAM,MACN,UAAW,uBACZ,CACF,CACF,CACF,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineRecipe as e}from"@pandabox/define-recipe";const t=e({className:`indicator`,jsx:[`Indicator`],base:{"--indicator-font-family":`{fonts.base}`,"--indicator-font-size":`{fontSizes.200}`,"--indicator-line-height":`1`,"--indicator-background":`{colors.neutral.background.1.enabled}`,"--indicator-foreground":`{colors.neutral.foreground.1.enabled}`,"--indicator-min-width":`1rem`,"--indicator-min-height":`1rem`,"--indicator-border-radius":`{radii.900}`,"--indicator-border-width":`{borders.100}`,"--indicator-border-style":`solid`,"--indicator-border-color":`{colors.neutral.stroke.1.enabled}`,"--indicator-padding-inline":`{spacing.50}`,"--indicator-empty-background":`{colors.danger.background.1.enabled}`,"--indicator-empty-width":`.75rem`,"--indicator-empty-height":`.75rem`,"--indicator-empty-border-radius":`{radii.900}`,"--indicator-empty-border-width":`{borders.100}`,"--indicator-empty-border-style":`solid`,"--indicator-empty-border-color":`{colors.danger.stroke.1.enabled}`}});export{t as indicator};
|
|
1
|
+
import{defineRecipe as e}from"@pandabox/define-recipe";const t=e({className:`indicator`,jsx:[`Indicator`],base:{"--indicator-font-family":`{fonts.base}`,"--indicator-font-size":`{fontSizes.200}`,"--indicator-line-height":`1`,"--indicator-background":`{colors.neutral.background.1.enabled}`,"--indicator-foreground":`{colors.neutral.foreground.1.enabled}`,"--indicator-min-width":`1rem`,"--indicator-min-height":`1rem`,"--indicator-border-radius":`{radii.900}`,"--indicator-border-width":`{borders.100}`,"--indicator-border-style":`solid`,"--indicator-border-color":`{colors.neutral.stroke.1.enabled}`,"--indicator-padding-inline":`{spacing.50}`,"--indicator-empty-background":`{colors.danger.background.1.enabled}`,"--indicator-empty-width":`.75rem`,"--indicator-empty-height":`.75rem`,"--indicator-empty-border-radius":`{radii.900}`,"--indicator-empty-border-width":`{borders.100}`,"--indicator-empty-border-style":`solid`,"--indicator-empty-border-color":`{colors.danger.stroke.1.enabled}`,"--indicator-zindex":`unset`}});export{t as indicator};
|
|
2
2
|
//# sourceMappingURL=indicator.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"indicator.mjs","names":[],"sources":["../../../../src/recipes/data-display/indicator/indicator.ts"],"sourcesContent":["import {\n defineRecipe,\n type RecipeBuilder,\n type RecipeVariantRecord,\n} from '@pandabox/define-recipe';\n\nexport const indicator = defineRecipe({\n className: 'indicator',\n jsx: ['Indicator'],\n base: {\n '--indicator-font-family': '{fonts.base}',\n '--indicator-font-size': '{fontSizes.200}',\n '--indicator-line-height': '1',\n '--indicator-background': '{colors.neutral.background.1.enabled}',\n '--indicator-foreground': '{colors.neutral.foreground.1.enabled}',\n '--indicator-min-width': '1rem',\n '--indicator-min-height': '1rem',\n '--indicator-border-radius': '{radii.900}',\n '--indicator-border-width': '{borders.100}',\n '--indicator-border-style': 'solid',\n '--indicator-border-color': '{colors.neutral.stroke.1.enabled}',\n '--indicator-padding-inline': '{spacing.50}',\n '--indicator-empty-background': '{colors.danger.background.1.enabled}',\n '--indicator-empty-width': '.75rem',\n '--indicator-empty-height': '.75rem',\n '--indicator-empty-border-radius': '{radii.900}',\n '--indicator-empty-border-width': '{borders.100}',\n '--indicator-empty-border-style': 'solid',\n '--indicator-empty-border-color': '{colors.danger.stroke.1.enabled}',\n },\n}) as RecipeBuilder<RecipeVariantRecord>;\n"],"mappings":"uDAMA,MAAa,EAAY,EAAa,CACpC,UAAW,YACX,IAAK,CAAC,YAAY,CAClB,KAAM,CACJ,0BAA2B,eAC3B,wBAAyB,kBACzB,0BAA2B,IAC3B,yBAA0B,wCAC1B,yBAA0B,wCAC1B,wBAAyB,OACzB,yBAA0B,OAC1B,4BAA6B,cAC7B,2BAA4B,gBAC5B,2BAA4B,QAC5B,2BAA4B,oCAC5B,6BAA8B,eAC9B,+BAAgC,uCAChC,0BAA2B,SAC3B,2BAA4B,SAC5B,kCAAmC,cACnC,iCAAkC,gBAClC,iCAAkC,QAClC,iCAAkC,
|
|
1
|
+
{"version":3,"file":"indicator.mjs","names":[],"sources":["../../../../src/recipes/data-display/indicator/indicator.ts"],"sourcesContent":["import {\n defineRecipe,\n type RecipeBuilder,\n type RecipeVariantRecord,\n} from '@pandabox/define-recipe';\n\nexport const indicator = defineRecipe({\n className: 'indicator',\n jsx: ['Indicator'],\n base: {\n '--indicator-font-family': '{fonts.base}',\n '--indicator-font-size': '{fontSizes.200}',\n '--indicator-line-height': '1',\n '--indicator-background': '{colors.neutral.background.1.enabled}',\n '--indicator-foreground': '{colors.neutral.foreground.1.enabled}',\n '--indicator-min-width': '1rem',\n '--indicator-min-height': '1rem',\n '--indicator-border-radius': '{radii.900}',\n '--indicator-border-width': '{borders.100}',\n '--indicator-border-style': 'solid',\n '--indicator-border-color': '{colors.neutral.stroke.1.enabled}',\n '--indicator-padding-inline': '{spacing.50}',\n '--indicator-empty-background': '{colors.danger.background.1.enabled}',\n '--indicator-empty-width': '.75rem',\n '--indicator-empty-height': '.75rem',\n '--indicator-empty-border-radius': '{radii.900}',\n '--indicator-empty-border-width': '{borders.100}',\n '--indicator-empty-border-style': 'solid',\n '--indicator-empty-border-color': '{colors.danger.stroke.1.enabled}',\n '--indicator-zindex': 'unset',\n },\n}) as RecipeBuilder<RecipeVariantRecord>;\n"],"mappings":"uDAMA,MAAa,EAAY,EAAa,CACpC,UAAW,YACX,IAAK,CAAC,YAAY,CAClB,KAAM,CACJ,0BAA2B,eAC3B,wBAAyB,kBACzB,0BAA2B,IAC3B,yBAA0B,wCAC1B,yBAA0B,wCAC1B,wBAAyB,OACzB,yBAA0B,OAC1B,4BAA6B,cAC7B,2BAA4B,gBAC5B,2BAA4B,QAC5B,2BAA4B,oCAC5B,6BAA8B,eAC9B,+BAAgC,uCAChC,0BAA2B,SAC3B,2BAA4B,SAC5B,kCAAmC,cACnC,iCAAkC,gBAClC,iCAAkC,QAClC,iCAAkC,mCAClC,qBAAsB,QACvB,CACF,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineRecipe as e}from"@pandabox/define-recipe";const t=e({className:`sidebar__root`,jsx:[`Sidebar`],base:{backgroundColor:`var(--sidebar-background, {colors.neutral.background.2.enabled})`,display:`flex`,flexDirection:`column`,justifyContent:`flex-start`,alignItems:`stretch`,gap:`var(--sidebar-gap, {spacing.200})`,height:`var(--sidebar-height)`,width:`var(--sidebar-width)`,paddingInlineStart:`var(--sidebar-padding-inline-start, var(--sidebar-padding-inline))`,paddingInlineEnd:`var(--sidebar-padding-inline-end, var(--sidebar-padding-inline))`,paddingBlock:`var(--sidebar-padding-block, {spacing.400})`,transition:`var(--sidebar-transition, {animations.base.100})`,boxSizing:`border-box`,zIndex:`var(--sidebar-zindex, {zIndex.nav})`,smDown:{left
|
|
1
|
+
import{defineRecipe as e}from"@pandabox/define-recipe";const t=e({className:`sidebar__root`,jsx:[`Sidebar`],base:{backgroundColor:`var(--sidebar-background, {colors.neutral.background.2.enabled})`,display:`flex`,flexDirection:`column`,justifyContent:`flex-start`,alignItems:`stretch`,gap:`var(--sidebar-gap, {spacing.200})`,height:`var(--sidebar-height)`,width:`var(--sidebar-width)`,paddingInlineStart:`var(--sidebar-padding-inline-start, var(--sidebar-padding-inline))`,paddingInlineEnd:`var(--sidebar-padding-inline-end, var(--sidebar-padding-inline))`,paddingBlock:`var(--sidebar-padding-block, {spacing.400})`,transition:`var(--sidebar-transition, {animations.base.100})`,boxSizing:`border-box`,zIndex:`var(--sidebar-zindex, {zIndex.nav})`,smDown:{position:`var(--sidebar-position, fixed)`,top:`var(--sidebar-top, {spacing.0})`,left:`var(--sidebar-left, -100%)`,paddingTop:`0`,transition:`left 200ms ease, opacity 200ms ease`,"&[data-open=true]":{zIndex:`nav`,left:`0`},"&[data-open=false]":{zIndex:`deep`,opacity:`0`,pointerEvents:`none`}},sm:{gridArea:`var(--sidebar-grid-area, "sidebar")`,position:`var(--sidebar-position, sticky)`,top:`var(--sidebar-top, {spacing.100})`,alignItems:`stretch`,borderRadius:`var(--sidebar-radii, {radii.200})`,"&[data-collapsed=true]":{alignItems:`center`}}}});export{t as sidebarRoot};
|
|
2
2
|
//# sourceMappingURL=sidebar-root.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar-root.mjs","names":[],"sources":["../../../../../src/recipes/navigations/sidebars/sidebar/sidebar-root.ts"],"sourcesContent":["import {\n defineRecipe,\n type RecipeBuilder,\n type RecipeVariantRecord,\n} from '@pandabox/define-recipe';\n\nexport const sidebarRoot = defineRecipe({\n className: 'sidebar__root',\n jsx: ['Sidebar'],\n base: {\n backgroundColor:\n 'var(--sidebar-background, {colors.neutral.background.2.enabled})',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'flex-start',\n alignItems: 'stretch',\n gap: 'var(--sidebar-gap, {spacing.200})',\n height: 'var(--sidebar-height)',\n width: 'var(--sidebar-width)',\n paddingInlineStart:\n 'var(--sidebar-padding-inline-start, var(--sidebar-padding-inline))',\n paddingInlineEnd:\n 'var(--sidebar-padding-inline-end, var(--sidebar-padding-inline))',\n paddingBlock: 'var(--sidebar-padding-block, {spacing.400})',\n transition: 'var(--sidebar-transition, {animations.base.100})',\n boxSizing: 'border-box',\n zIndex: 'var(--sidebar-zindex, {zIndex.nav})',\n\n smDown: {\n left: '-100%',\n paddingTop: '0',\n transition: 'left 200ms ease, opacity 200ms ease',\n '&[data-open=true]': {\n zIndex: 'nav',\n left: '0',\n },\n '&[data-open=false]': {\n zIndex: 'deep',\n opacity: '0',\n pointerEvents: 'none',\n },\n },\n\n sm: {\n gridArea: 'var(--sidebar-grid-area, \"sidebar\")',\n position: 'var(--sidebar-position, sticky)',\n top: 'var(--sidebar-top, {spacing.100})',\n alignItems: 'stretch',\n borderRadius: 'var(--sidebar-radii, {radii.200})',\n '&[data-collapsed=true]': {\n alignItems: 'center',\n },\n },\n },\n}) as RecipeBuilder<RecipeVariantRecord>;\n"],"mappings":"uDAMA,MAAa,EAAc,EAAa,CACtC,UAAW,gBACX,IAAK,CAAC,UAAU,CAChB,KAAM,CACJ,gBACE,mEACF,QAAS,OACT,cAAe,SACf,eAAgB,aAChB,WAAY,UACZ,IAAK,oCACL,OAAQ,wBACR,MAAO,uBACP,mBACE,qEACF,iBACE,mEACF,aAAc,8CACd,WAAY,mDACZ,UAAW,aACX,OAAQ,sCAER,OAAQ,CACN,KAAM,
|
|
1
|
+
{"version":3,"file":"sidebar-root.mjs","names":[],"sources":["../../../../../src/recipes/navigations/sidebars/sidebar/sidebar-root.ts"],"sourcesContent":["import {\n defineRecipe,\n type RecipeBuilder,\n type RecipeVariantRecord,\n} from '@pandabox/define-recipe';\n\nexport const sidebarRoot = defineRecipe({\n className: 'sidebar__root',\n jsx: ['Sidebar'],\n base: {\n backgroundColor:\n 'var(--sidebar-background, {colors.neutral.background.2.enabled})',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'flex-start',\n alignItems: 'stretch',\n gap: 'var(--sidebar-gap, {spacing.200})',\n height: 'var(--sidebar-height)',\n width: 'var(--sidebar-width)',\n paddingInlineStart:\n 'var(--sidebar-padding-inline-start, var(--sidebar-padding-inline))',\n paddingInlineEnd:\n 'var(--sidebar-padding-inline-end, var(--sidebar-padding-inline))',\n paddingBlock: 'var(--sidebar-padding-block, {spacing.400})',\n transition: 'var(--sidebar-transition, {animations.base.100})',\n boxSizing: 'border-box',\n zIndex: 'var(--sidebar-zindex, {zIndex.nav})',\n\n smDown: {\n position: 'var(--sidebar-position, fixed)',\n top: 'var(--sidebar-top, {spacing.0})',\n left: 'var(--sidebar-left, -100%)',\n paddingTop: '0',\n transition: 'left 200ms ease, opacity 200ms ease',\n '&[data-open=true]': {\n zIndex: 'nav',\n left: '0',\n },\n '&[data-open=false]': {\n zIndex: 'deep',\n opacity: '0',\n pointerEvents: 'none',\n },\n },\n\n sm: {\n gridArea: 'var(--sidebar-grid-area, \"sidebar\")',\n position: 'var(--sidebar-position, sticky)',\n top: 'var(--sidebar-top, {spacing.100})',\n alignItems: 'stretch',\n borderRadius: 'var(--sidebar-radii, {radii.200})',\n '&[data-collapsed=true]': {\n alignItems: 'center',\n },\n },\n },\n}) as RecipeBuilder<RecipeVariantRecord>;\n"],"mappings":"uDAMA,MAAa,EAAc,EAAa,CACtC,UAAW,gBACX,IAAK,CAAC,UAAU,CAChB,KAAM,CACJ,gBACE,mEACF,QAAS,OACT,cAAe,SACf,eAAgB,aAChB,WAAY,UACZ,IAAK,oCACL,OAAQ,wBACR,MAAO,uBACP,mBACE,qEACF,iBACE,mEACF,aAAc,8CACd,WAAY,mDACZ,UAAW,aACX,OAAQ,sCAER,OAAQ,CACN,SAAU,iCACV,IAAK,kCACL,KAAM,6BACN,WAAY,IACZ,WAAY,sCACZ,oBAAqB,CACnB,OAAQ,MACR,KAAM,IACP,CACD,qBAAsB,CACpB,OAAQ,OACR,QAAS,IACT,cAAe,OAChB,CACF,CAED,GAAI,CACF,SAAU,sCACV,SAAU,kCACV,IAAK,oCACL,WAAY,UACZ,aAAc,oCACd,yBAA0B,CACxB,WAAY,SACb,CACF,CACF,CACF,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineRecipe as e}from"@pandabox/define-recipe";const t=e({className:`sidebar`,jsx:[`Sidebar`],base:{"--sidebar-grid-area":`sidebar`,"--sidebar-position":`fixed`,"--sidebar-background":`{colors.neutral.background.2.enabled}`,"--sidebar-gap":`{spacing.200}`,"--sidebar-width":`16.5rem`,"--sidebar-height":`100dvh`,"--sidebar-top":`{spacing.100}`,"--sidebar-padding-block":`{spacing.400}`,"--sidebar-padding-inline-base":`{spacing.350}`,"--sidebar-padding-inline":`var(--sidebar-padding-inline-start, var(--sidebar-padding-inline-base))`,"--sidebar-padding-inline-start":`max(0px, calc(var(--sidebar-padding-inline-base) - var(--sidebar-nav-focus-safe-padding-inline-start, 0px)))`,"--sidebar-padding-inline-end":`max(0px, calc(var(--sidebar-padding-inline-base) - var(--sidebar-nav-focus-safe-padding-inline-end, 0px)))`,"--sidebar-radii":`{radii.200}`,"--sidebar-transition":`{animations.base.100}`,"--sidebar-zindex":`{zIndex.nav}`,"--sidebar-slot-gap":`{spacing.200}`,"--sidebar-slot-padding-block":`{spacing.0}`,"--sidebar-slot-padding-inline":`var(--sidebar-padding-inline-base)`,"--sidebar-slot-padding-inline-start":`var(--sidebar-slot-padding-inline)`,"--sidebar-slot-padding-inline-end":`var(--sidebar-slot-padding-inline)`,"--sidebar-top-slot-gap":`var(--sidebar-slot-gap, {spacing.200})`,"--sidebar-top-slot-padding-block":`var(--sidebar-slot-padding-block, {spacing.0})`,"--sidebar-top-slot-padding-inline":`var(--sidebar-slot-padding-inline, var(--sidebar-padding-inline-base))`,"--sidebar-top-slot-padding-inline-start":`var(--sidebar-slot-padding-inline-start, var(--sidebar-slot-padding-inline))`,"--sidebar-top-slot-padding-inline-end":`var(--sidebar-slot-padding-inline-end, var(--sidebar-slot-padding-inline))`,"--sidebar-bottom-slot-gap":`var(--sidebar-slot-gap, {spacing.200})`,"--sidebar-bottom-slot-padding-block":`var(--sidebar-slot-padding-block, {spacing.0})`,"--sidebar-bottom-slot-padding-inline":`var(--sidebar-slot-padding-inline, var(--sidebar-padding-inline-base))`,"--sidebar-bottom-slot-padding-inline-start":`var(--sidebar-slot-padding-inline-start, var(--sidebar-slot-padding-inline))`,"--sidebar-bottom-slot-padding-inline-end":`var(--sidebar-slot-padding-inline-end, var(--sidebar-slot-padding-inline))`,"--sidebar-nav-gap":`{spacing.300}`,"--sidebar-nav-padding-top":`{spacing.400}`,"--sidebar-nav-height":`calc(100dvh - token(spacing.1000))`,"--sidebar-nav-background":`transparent`,"--sidebar-nav-border-color":`transparent`,"--sidebar-nav-border-top-width":`{borders.0}`,"--sidebar-nav-border-bottom-width":`{borders.0}`,"--sidebar-nav-border-left-width":`{borders.0}`,"--sidebar-nav-border-right-width":`{borders.0}`,"--sidebar-nav-border-radius":`{radii.0}`,"--sidebar-nav-focus-safe-padding-inline":`calc(var(--sidebar-nav-list-item-focus-outline-width) + var(--sidebar-nav-list-item-focus-outline-offset))`,"--sidebar-nav-focus-safe-padding-block":`calc(var(--sidebar-nav-list-item-focus-outline-width) + var(--sidebar-nav-list-item-focus-outline-offset))`,"--sidebar-nav-focus-safe-padding-inline-start":`var(--sidebar-nav-focus-safe-padding-inline)`,"--sidebar-nav-focus-safe-padding-inline-end":`calc(var(--sidebar-nav-focus-safe-padding-inline) + var(--sidebar-scrollarea-autosize-scrollbar-size))`,"--sidebar-scrollarea-autosize-height":`100%`,"--sidebar-scrollarea-autosize-max-height":`100%`,"--sidebar-scrollarea-autosize-scrollbar-size":`{sizes.50}`,"--sidebar-scrollarea-autosize-scrollbar-inline-offset":`0`,"--sidebar-scrollarea-autosize-scrollbar-background":`{colors.neutral.background.alpha.1.enabled}`,"--sidebar-scrollarea-autosize-scrollbar-background-hover":`{colors.neutral.background.alpha.2.enabled}`,"--sidebar-scrollarea-autosize-thumb-background":`{colors.neutral.background.4.enabled}`,"--sidebar-scrollarea-autosize-thumb-background-hover":`{colors.neutral.background.5.enabled}`,"--sidebar-scrollarea-autosize-overflow-y-behavior":`auto`,"--sidebar-scrollarea-autosize-overflow-x-behavior":`hidden`,"--sidebar-scrollarea-autosize-viewport-padding-block-start":`var(--sidebar-nav-focus-safe-padding-block)`,"--sidebar-scrollarea-autosize-viewport-padding-block-end":`var(--sidebar-nav-focus-safe-padding-block)`,"--sidebar-scrollarea-autosize-viewport-padding-inline-start":`var(--sidebar-nav-focus-safe-padding-inline-start)`,"--sidebar-scrollarea-autosize-viewport-padding-inline-end":`var(--sidebar-nav-focus-safe-padding-inline-end)`,"--sidebar-nav-group-gap":`{spacing.300}`,"--sidebar-nav-group-padding-top":`{spacing.200}`,"--sidebar-nav-group-padding-bottom":`{spacing.400}`,"--sidebar-nav-group-padding-inline":`{spacing.0}`,"--sidebar-nav-group-background":`transparent`,"--sidebar-nav-group-border-color":`{colors.neutral.stroke.7.enabled}`,"--sidebar-nav-group-border-top-width":`{borders.0}`,"--sidebar-nav-group-border-bottom-width":`{borders.100}`,"--sidebar-nav-group-border-left-width":`{borders.0}`,"--sidebar-nav-group-border-right-width":`{borders.0}`,"--sidebar-nav-group-radii":`{radii.0}`,"--sidebar-nav-group-title-font-size":`{fontSizes.200}`,"--sidebar-nav-group-title-font-weight":`{fontWeights.medium}`,"--sidebar-nav-group-title-color":`{colors.neutral.foreground.3.enabled}`,"--sidebar-nav-group-title-text-transform":`uppercase`,"--sidebar-nav-group-title-padding-block":`{spacing.0}`,"--sidebar-nav-group-title-padding-inline":`var(--sidebar-nav-list-item-padding-inline, {spacing.300})`,"--sidebar-nav-list-gap":`{spacing.200}`,"--sidebar-nav-list-padding":`{spacing.0}`,"--sidebar-nav-list-margin":`{spacing.0}`,"--sidebar-nav-list-item-height":`{sizes.700}`,"--sidebar-nav-list-item-gap":`{spacing.300}`,"--sidebar-nav-list-item-transition":`{animations.base.100}`,"--sidebar-nav-list-item-padding-inline":`{spacing.300}`,"--sidebar-nav-list-item-radii":`{radii.100}`,"--sidebar-nav-list-item-background":`transparent`,"--sidebar-nav-list-item-background-hovered":`{colors.neutral.background.2.hovered}`,"--sidebar-nav-list-item-background-active":`{colors.neutral.background.2.selected}`,"--sidebar-nav-list-item-background-selected":`{colors.neutral.background.2.primary.selected}`,"--sidebar-nav-list-item-background-selected-hovered":`{colors.neutral.background.2.primary.selectedHovered}`,"--sidebar-nav-list-item-background-expanded":`{colors.neutral.background.2.primary.selected}`,"--sidebar-nav-list-item-background-expanded-hovered":`{colors.neutral.background.2.primary.selectedHovered}`,"--sidebar-nav-list-item-foreground":`{colors.neutral.foreground.2.enabled}`,"--sidebar-nav-list-item-foreground-hovered":`{colors.neutral.foreground.2.primary.hovered}`,"--sidebar-nav-list-item-foreground-active":`{colors.neutral.foreground.2.primary.selected}`,"--sidebar-nav-list-item-foreground-selected":`{colors.neutral.foreground.2.primary.selected}`,"--sidebar-nav-list-item-foreground-selected-hovered":`{colors.neutral.foreground.2.primary.selectedHovered}`,"--sidebar-nav-list-item-foreground-expanded":`{colors.neutral.foreground.2.primary.selected}`,"--sidebar-nav-list-item-foreground-expanded-hovered":`{colors.neutral.foreground.2.primary.selectedHovered}`,"--sidebar-nav-item-button-icon-toggle-size":`{sizes.300}`,"--sidebar-nav-item-label-font-size":`{fontSizes.400}`,"--sidebar-nav-item-label-font-weight":`{fontWeights.medium}`,"--sidebar-nav-item-label-text-transform":`none`,"--sidebar-nav-list-item-focus-outline-width":`{borders.200}`,"--sidebar-nav-list-item-focus-outline-style":`solid`,"--sidebar-nav-list-item-focus-outline-color":`{colors.primary.stroke.1.focused}`,"--sidebar-nav-list-item-focus-outline-offset":`{spacing.50}`,"--sidebar-subnav-list-stroke-color":`{colors.neutral.stroke.6.enabled}`,"--sidebar-subnav-zindex":`{zIndex.dropdown}`,"--sidebar-subnav-animation-name":`expandY`,"--sidebar-subnav-animation-duration":`150ms`,"--sidebar-subnav-animation-timing-function":`ease-out`,"--sidebar-subnav-animation-fill-mode":`both`,"--sidebar-subnav-padding-left":`{spacing.450}`,"--sidebar-subnav-list-gap":`{spacing.0}`,"--sidebar-subnav-list-padding-top":`{spacing.100}`,"--sidebar-subnav-collapsed-background":`{colors.neutral.background.2.enabled}`,"--sidebar-subnav-collapsed-padding-block":`{spacing.400}`,"--sidebar-subnav-collapsed-padding-inline":`{spacing.450}`,"--sidebar-subnav-collapsed-margin-left":`{spacing.50}`,"--sidebar-subnav-collapsed-border-radius":`{radii.200}`,"--sidebar-subnav-list-item-height":`{sizes.500}`,"--sidebar-subnav-list-item-padding-left":`{spacing.300}`,"--sidebar-subnav-list-item-padding-right":`{spacing.300}`,"--sidebar-subnav-list-item-padding-block":`{spacing.100}`,"--sidebar-subnav-list-item-border-radius":`{radii.100}`,"--sidebar-subnav-list-item-transition":`{animations.base.100}`,"--sidebar-subnav-list-stroke-width":`{borders.100}`,"--sidebar-subnav-list-item-gap":`{spacing.0}`,"--sidebar-subnav-list-item-background":`{colors.neutral.background.2.enabled}`,"--sidebar-subnav-list-item-background-hovered":`{colors.neutral.background.2.hovered}`,"--sidebar-subnav-list-item-background-active":`{colors.neutral.background.2.selected}`,"--sidebar-subnav-list-item-background-selected":`{colors.neutral.background.2.primary.selected}`,"--sidebar-subnav-list-item-background-selected-hovered":`{colors.neutral.background.2.primary.selectedHovered}`,"--sidebar-subnav-list-item-foreground":`{colors.neutral.foreground.3.enabled}`,"--sidebar-subnav-list-item-foreground-hovered":`{colors.neutral.foreground.2.primary.hovered}`,"--sidebar-subnav-list-item-foreground-active":`{colors.neutral.foreground.2.primary.selected}`,"--sidebar-subnav-list-item-foreground-selected":`{colors.neutral.foreground.2.primary.selected}`,"--sidebar-subnav-list-item-foreground-selected-hovered":`{colors.neutral.foreground.2.primary.selectedHovered}`,"--sidebar-subnav-list-item-focus-outline-width":`{borders.200}`,"--sidebar-subnav-list-item-focus-outline-style":`solid`,"--sidebar-subnav-list-item-focus-outline-color":`{colors.primary.stroke.1.focused}`,"--sidebar-subnav-list-item-focus-outline-offset":`{spacing.50}`,"--sidebar-subnav-list-item-label-font-size":`{fontSizes.300}`,"--sidebar-subnav-list-item-label-font-weight":`{fontWeights.medium}`,"--sidebar-subnav-list-item-label-text-transform":`none`,sm:{"--sidebar-position":`sticky`,"--sidebar-height":`calc(100dvh - 0.5rem)`,"--sidebar-top":`{spacing.100}`,"--sidebar-nav-list-item-height":`{sizes.600}`,"--sidebar-nav-item-label-font-size":`{fontSizes.300}`,"&[data-collapsed=true]":{"--sidebar-width":`3.5rem`,"--sidebar-padding-inline-base":`{spacing.100}`,"--sidebar-nav-focus-safe-padding-inline-start":`calc(var(--sidebar-nav-focus-safe-padding-inline) + (var(--sidebar-scrollarea-autosize-scrollbar-size) / 2))`,"--sidebar-nav-focus-safe-padding-inline-end":`calc(var(--sidebar-nav-focus-safe-padding-inline) + (var(--sidebar-scrollarea-autosize-scrollbar-size) / 2))`}},smDown:{"--sidebar-position":`fixed`,"--sidebar-height":`100dvh`,"--sidebar-width":`100%`,"--sidebar-top":`{spacing.0}`}}});export{t as sidebar};
|
|
1
|
+
import{defineRecipe as e}from"@pandabox/define-recipe";const t=e({className:`sidebar`,jsx:[`Sidebar`],base:{"--sidebar-grid-area":`sidebar`,"--sidebar-position":`fixed`,"--sidebar-background":`{colors.neutral.background.2.enabled}`,"--sidebar-gap":`{spacing.200}`,"--sidebar-width":`16.5rem`,"--sidebar-height":`100dvh`,"--sidebar-top":`{spacing.100}`,"--sidebar-left":`-100%`,"--sidebar-padding-block":`{spacing.400}`,"--sidebar-padding-inline-base":`{spacing.350}`,"--sidebar-padding-inline":`var(--sidebar-padding-inline-start, var(--sidebar-padding-inline-base))`,"--sidebar-padding-inline-start":`max(0px, calc(var(--sidebar-padding-inline-base) - var(--sidebar-nav-focus-safe-padding-inline-start, 0px)))`,"--sidebar-padding-inline-end":`max(0px, calc(var(--sidebar-padding-inline-base) - var(--sidebar-nav-focus-safe-padding-inline-end, 0px)))`,"--sidebar-radii":`{radii.200}`,"--sidebar-transition":`{animations.base.100}`,"--sidebar-zindex":`{zIndex.nav}`,"--sidebar-slot-gap":`{spacing.200}`,"--sidebar-slot-padding-block":`{spacing.0}`,"--sidebar-slot-padding-inline":`var(--sidebar-padding-inline-base)`,"--sidebar-slot-padding-inline-start":`var(--sidebar-slot-padding-inline)`,"--sidebar-slot-padding-inline-end":`var(--sidebar-slot-padding-inline)`,"--sidebar-top-slot-gap":`var(--sidebar-slot-gap, {spacing.200})`,"--sidebar-top-slot-padding-block":`var(--sidebar-slot-padding-block, {spacing.0})`,"--sidebar-top-slot-padding-inline":`var(--sidebar-slot-padding-inline, var(--sidebar-padding-inline-base))`,"--sidebar-top-slot-padding-inline-start":`var(--sidebar-slot-padding-inline-start, var(--sidebar-slot-padding-inline))`,"--sidebar-top-slot-padding-inline-end":`var(--sidebar-slot-padding-inline-end, var(--sidebar-slot-padding-inline))`,"--sidebar-bottom-slot-gap":`var(--sidebar-slot-gap, {spacing.200})`,"--sidebar-bottom-slot-padding-block":`var(--sidebar-slot-padding-block, {spacing.0})`,"--sidebar-bottom-slot-padding-inline":`var(--sidebar-slot-padding-inline, var(--sidebar-padding-inline-base))`,"--sidebar-bottom-slot-padding-inline-start":`var(--sidebar-slot-padding-inline-start, var(--sidebar-slot-padding-inline))`,"--sidebar-bottom-slot-padding-inline-end":`var(--sidebar-slot-padding-inline-end, var(--sidebar-slot-padding-inline))`,"--sidebar-nav-gap":`{spacing.300}`,"--sidebar-nav-padding-top":`{spacing.400}`,"--sidebar-nav-height":`calc(100dvh - token(spacing.1000))`,"--sidebar-nav-background":`transparent`,"--sidebar-nav-border-color":`transparent`,"--sidebar-nav-border-top-width":`{borders.0}`,"--sidebar-nav-border-bottom-width":`{borders.0}`,"--sidebar-nav-border-left-width":`{borders.0}`,"--sidebar-nav-border-right-width":`{borders.0}`,"--sidebar-nav-border-radius":`{radii.0}`,"--sidebar-nav-focus-safe-padding-inline":`calc(var(--sidebar-nav-list-item-focus-outline-width) + var(--sidebar-nav-list-item-focus-outline-offset))`,"--sidebar-nav-focus-safe-padding-block":`calc(var(--sidebar-nav-list-item-focus-outline-width) + var(--sidebar-nav-list-item-focus-outline-offset))`,"--sidebar-nav-focus-safe-padding-inline-start":`var(--sidebar-nav-focus-safe-padding-inline)`,"--sidebar-nav-focus-safe-padding-inline-end":`calc(var(--sidebar-nav-focus-safe-padding-inline) + var(--sidebar-scrollarea-autosize-scrollbar-size))`,"--sidebar-scrollarea-autosize-height":`100%`,"--sidebar-scrollarea-autosize-max-height":`100%`,"--sidebar-scrollarea-autosize-scrollbar-size":`{sizes.50}`,"--sidebar-scrollarea-autosize-scrollbar-inline-offset":`0`,"--sidebar-scrollarea-autosize-scrollbar-background":`{colors.neutral.background.alpha.1.enabled}`,"--sidebar-scrollarea-autosize-scrollbar-background-hover":`{colors.neutral.background.alpha.2.enabled}`,"--sidebar-scrollarea-autosize-thumb-background":`{colors.neutral.background.4.enabled}`,"--sidebar-scrollarea-autosize-thumb-background-hover":`{colors.neutral.background.5.enabled}`,"--sidebar-scrollarea-autosize-overflow-y-behavior":`auto`,"--sidebar-scrollarea-autosize-overflow-x-behavior":`hidden`,"--sidebar-scrollarea-autosize-viewport-padding-block-start":`var(--sidebar-nav-focus-safe-padding-block)`,"--sidebar-scrollarea-autosize-viewport-padding-block-end":`var(--sidebar-nav-focus-safe-padding-block)`,"--sidebar-scrollarea-autosize-viewport-padding-inline-start":`var(--sidebar-nav-focus-safe-padding-inline-start)`,"--sidebar-scrollarea-autosize-viewport-padding-inline-end":`var(--sidebar-nav-focus-safe-padding-inline-end)`,"--sidebar-nav-group-gap":`{spacing.300}`,"--sidebar-nav-group-padding-top":`{spacing.200}`,"--sidebar-nav-group-padding-bottom":`{spacing.400}`,"--sidebar-nav-group-padding-inline":`{spacing.0}`,"--sidebar-nav-group-background":`transparent`,"--sidebar-nav-group-border-color":`{colors.neutral.stroke.7.enabled}`,"--sidebar-nav-group-border-top-width":`{borders.0}`,"--sidebar-nav-group-border-bottom-width":`{borders.100}`,"--sidebar-nav-group-border-left-width":`{borders.0}`,"--sidebar-nav-group-border-right-width":`{borders.0}`,"--sidebar-nav-group-radii":`{radii.0}`,"--sidebar-nav-group-title-font-size":`{fontSizes.200}`,"--sidebar-nav-group-title-font-weight":`{fontWeights.medium}`,"--sidebar-nav-group-title-color":`{colors.neutral.foreground.3.enabled}`,"--sidebar-nav-group-title-text-transform":`uppercase`,"--sidebar-nav-group-title-padding-block":`{spacing.0}`,"--sidebar-nav-group-title-padding-inline":`var(--sidebar-nav-list-item-padding-inline, {spacing.300})`,"--sidebar-nav-list-gap":`{spacing.200}`,"--sidebar-nav-list-padding":`{spacing.0}`,"--sidebar-nav-list-margin":`{spacing.0}`,"--sidebar-nav-list-item-height":`{sizes.700}`,"--sidebar-nav-list-item-gap":`{spacing.300}`,"--sidebar-nav-list-item-transition":`{animations.base.100}`,"--sidebar-nav-list-item-padding-inline":`{spacing.300}`,"--sidebar-nav-list-item-radii":`{radii.100}`,"--sidebar-nav-list-item-background":`transparent`,"--sidebar-nav-list-item-background-hovered":`{colors.neutral.background.2.hovered}`,"--sidebar-nav-list-item-background-active":`{colors.neutral.background.2.selected}`,"--sidebar-nav-list-item-background-selected":`{colors.neutral.background.2.primary.selected}`,"--sidebar-nav-list-item-background-selected-hovered":`{colors.neutral.background.2.primary.selectedHovered}`,"--sidebar-nav-list-item-background-expanded":`{colors.neutral.background.2.primary.selected}`,"--sidebar-nav-list-item-background-expanded-hovered":`{colors.neutral.background.2.primary.selectedHovered}`,"--sidebar-nav-list-item-foreground":`{colors.neutral.foreground.2.enabled}`,"--sidebar-nav-list-item-foreground-hovered":`{colors.neutral.foreground.2.primary.hovered}`,"--sidebar-nav-list-item-foreground-active":`{colors.neutral.foreground.2.primary.selected}`,"--sidebar-nav-list-item-foreground-selected":`{colors.neutral.foreground.2.primary.selected}`,"--sidebar-nav-list-item-foreground-selected-hovered":`{colors.neutral.foreground.2.primary.selectedHovered}`,"--sidebar-nav-list-item-foreground-expanded":`{colors.neutral.foreground.2.primary.selected}`,"--sidebar-nav-list-item-foreground-expanded-hovered":`{colors.neutral.foreground.2.primary.selectedHovered}`,"--sidebar-nav-item-button-icon-toggle-size":`{sizes.300}`,"--sidebar-nav-item-label-font-size":`{fontSizes.400}`,"--sidebar-nav-item-label-font-weight":`{fontWeights.medium}`,"--sidebar-nav-item-label-text-transform":`none`,"--sidebar-nav-list-item-focus-outline-width":`{borders.200}`,"--sidebar-nav-list-item-focus-outline-style":`solid`,"--sidebar-nav-list-item-focus-outline-color":`{colors.primary.stroke.1.focused}`,"--sidebar-nav-list-item-focus-outline-offset":`{spacing.50}`,"--sidebar-subnav-list-stroke-color":`{colors.neutral.stroke.6.enabled}`,"--sidebar-subnav-zindex":`{zIndex.dropdown}`,"--sidebar-subnav-animation-name":`expandY`,"--sidebar-subnav-animation-duration":`150ms`,"--sidebar-subnav-animation-timing-function":`ease-out`,"--sidebar-subnav-animation-fill-mode":`both`,"--sidebar-subnav-padding-left":`{spacing.450}`,"--sidebar-subnav-list-gap":`{spacing.0}`,"--sidebar-subnav-list-padding-top":`{spacing.100}`,"--sidebar-subnav-collapsed-background":`{colors.neutral.background.2.enabled}`,"--sidebar-subnav-collapsed-padding-block":`{spacing.400}`,"--sidebar-subnav-collapsed-padding-inline":`{spacing.450}`,"--sidebar-subnav-collapsed-margin-left":`{spacing.50}`,"--sidebar-subnav-collapsed-border-radius":`{radii.200}`,"--sidebar-subnav-list-item-height":`{sizes.500}`,"--sidebar-subnav-list-item-padding-left":`{spacing.300}`,"--sidebar-subnav-list-item-padding-right":`{spacing.300}`,"--sidebar-subnav-list-item-padding-block":`{spacing.100}`,"--sidebar-subnav-list-item-border-radius":`{radii.100}`,"--sidebar-subnav-list-item-transition":`{animations.base.100}`,"--sidebar-subnav-list-stroke-width":`{borders.100}`,"--sidebar-subnav-list-item-gap":`{spacing.0}`,"--sidebar-subnav-list-item-background":`{colors.neutral.background.2.enabled}`,"--sidebar-subnav-list-item-background-hovered":`{colors.neutral.background.2.hovered}`,"--sidebar-subnav-list-item-background-active":`{colors.neutral.background.2.selected}`,"--sidebar-subnav-list-item-background-selected":`{colors.neutral.background.2.primary.selected}`,"--sidebar-subnav-list-item-background-selected-hovered":`{colors.neutral.background.2.primary.selectedHovered}`,"--sidebar-subnav-list-item-foreground":`{colors.neutral.foreground.3.enabled}`,"--sidebar-subnav-list-item-foreground-hovered":`{colors.neutral.foreground.2.primary.hovered}`,"--sidebar-subnav-list-item-foreground-active":`{colors.neutral.foreground.2.primary.selected}`,"--sidebar-subnav-list-item-foreground-selected":`{colors.neutral.foreground.2.primary.selected}`,"--sidebar-subnav-list-item-foreground-selected-hovered":`{colors.neutral.foreground.2.primary.selectedHovered}`,"--sidebar-subnav-list-item-focus-outline-width":`{borders.200}`,"--sidebar-subnav-list-item-focus-outline-style":`solid`,"--sidebar-subnav-list-item-focus-outline-color":`{colors.primary.stroke.1.focused}`,"--sidebar-subnav-list-item-focus-outline-offset":`{spacing.50}`,"--sidebar-subnav-list-item-label-font-size":`{fontSizes.300}`,"--sidebar-subnav-list-item-label-font-weight":`{fontWeights.medium}`,"--sidebar-subnav-list-item-label-text-transform":`none`,sm:{"--sidebar-position":`sticky`,"--sidebar-height":`calc(100dvh - 0.5rem)`,"--sidebar-top":`{spacing.100}`,"--sidebar-nav-list-item-height":`{sizes.600}`,"--sidebar-nav-item-label-font-size":`{fontSizes.300}`,"&[data-collapsed=true]":{"--sidebar-width":`3.5rem`,"--sidebar-padding-inline-base":`{spacing.100}`,"--sidebar-nav-focus-safe-padding-inline-start":`calc(var(--sidebar-nav-focus-safe-padding-inline) + (var(--sidebar-scrollarea-autosize-scrollbar-size) / 2))`,"--sidebar-nav-focus-safe-padding-inline-end":`calc(var(--sidebar-nav-focus-safe-padding-inline) + (var(--sidebar-scrollarea-autosize-scrollbar-size) / 2))`}},smDown:{"--sidebar-position":`fixed`,"--sidebar-height":`100dvh`,"--sidebar-width":`100%`,"--sidebar-top":`{spacing.0}`}}});export{t as sidebar};
|
|
2
2
|
//# sourceMappingURL=sidebar.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidebar.mjs","names":[],"sources":["../../../../../src/recipes/navigations/sidebars/sidebar/sidebar.ts"],"sourcesContent":["import {\n defineRecipe,\n type RecipeBuilder,\n type RecipeVariantRecord,\n} from '@pandabox/define-recipe';\n\nexport const sidebar = defineRecipe({\n className: 'sidebar',\n jsx: ['Sidebar'],\n base: {\n /* root */\n '--sidebar-grid-area': 'sidebar',\n\n '--sidebar-position': 'fixed',\n '--sidebar-background': '{colors.neutral.background.2.enabled}',\n '--sidebar-gap': '{spacing.200}',\n '--sidebar-width': '16.5rem',\n '--sidebar-height': '100dvh',\n '--sidebar-top': '{spacing.100}',\n '--sidebar-padding-block': '{spacing.400}',\n '--sidebar-padding-inline-base': '{spacing.350}',\n '--sidebar-padding-inline':\n 'var(--sidebar-padding-inline-start, var(--sidebar-padding-inline-base))',\n '--sidebar-padding-inline-start':\n 'max(0px, calc(var(--sidebar-padding-inline-base) - var(--sidebar-nav-focus-safe-padding-inline-start, 0px)))',\n '--sidebar-padding-inline-end':\n 'max(0px, calc(var(--sidebar-padding-inline-base) - var(--sidebar-nav-focus-safe-padding-inline-end, 0px)))',\n '--sidebar-radii': '{radii.200}',\n '--sidebar-transition': '{animations.base.100}',\n '--sidebar-zindex': '{zIndex.nav}',\n\n /* slots */\n '--sidebar-slot-gap': '{spacing.200}',\n '--sidebar-slot-padding-block': '{spacing.0}',\n '--sidebar-slot-padding-inline': 'var(--sidebar-padding-inline-base)',\n '--sidebar-slot-padding-inline-start': 'var(--sidebar-slot-padding-inline)',\n '--sidebar-slot-padding-inline-end': 'var(--sidebar-slot-padding-inline)',\n\n '--sidebar-top-slot-gap': 'var(--sidebar-slot-gap, {spacing.200})',\n '--sidebar-top-slot-padding-block':\n 'var(--sidebar-slot-padding-block, {spacing.0})',\n '--sidebar-top-slot-padding-inline':\n 'var(--sidebar-slot-padding-inline, var(--sidebar-padding-inline-base))',\n '--sidebar-top-slot-padding-inline-start':\n 'var(--sidebar-slot-padding-inline-start, var(--sidebar-slot-padding-inline))',\n '--sidebar-top-slot-padding-inline-end':\n 'var(--sidebar-slot-padding-inline-end, var(--sidebar-slot-padding-inline))',\n\n '--sidebar-bottom-slot-gap': 'var(--sidebar-slot-gap, {spacing.200})',\n '--sidebar-bottom-slot-padding-block':\n 'var(--sidebar-slot-padding-block, {spacing.0})',\n '--sidebar-bottom-slot-padding-inline':\n 'var(--sidebar-slot-padding-inline, var(--sidebar-padding-inline-base))',\n '--sidebar-bottom-slot-padding-inline-start':\n 'var(--sidebar-slot-padding-inline-start, var(--sidebar-slot-padding-inline))',\n '--sidebar-bottom-slot-padding-inline-end':\n 'var(--sidebar-slot-padding-inline-end, var(--sidebar-slot-padding-inline))',\n\n /* nav */\n '--sidebar-nav-gap': '{spacing.300}',\n '--sidebar-nav-padding-top': '{spacing.400}',\n '--sidebar-nav-height': 'calc(100dvh - token(spacing.1000))',\n '--sidebar-nav-background': 'transparent',\n '--sidebar-nav-border-color': 'transparent',\n '--sidebar-nav-border-top-width': '{borders.0}',\n '--sidebar-nav-border-bottom-width': '{borders.0}',\n '--sidebar-nav-border-left-width': '{borders.0}',\n '--sidebar-nav-border-right-width': '{borders.0}',\n '--sidebar-nav-border-radius': '{radii.0}',\n '--sidebar-nav-focus-safe-padding-inline':\n 'calc(var(--sidebar-nav-list-item-focus-outline-width) + var(--sidebar-nav-list-item-focus-outline-offset))',\n '--sidebar-nav-focus-safe-padding-block':\n 'calc(var(--sidebar-nav-list-item-focus-outline-width) + var(--sidebar-nav-list-item-focus-outline-offset))',\n '--sidebar-nav-focus-safe-padding-inline-start':\n 'var(--sidebar-nav-focus-safe-padding-inline)',\n '--sidebar-nav-focus-safe-padding-inline-end':\n 'calc(var(--sidebar-nav-focus-safe-padding-inline) + var(--sidebar-scrollarea-autosize-scrollbar-size))',\n\n /* nav scroll area autosize */\n '--sidebar-scrollarea-autosize-height': '100%',\n '--sidebar-scrollarea-autosize-max-height': '100%',\n '--sidebar-scrollarea-autosize-scrollbar-size': '{sizes.50}',\n '--sidebar-scrollarea-autosize-scrollbar-inline-offset': '0',\n '--sidebar-scrollarea-autosize-scrollbar-background':\n '{colors.neutral.background.alpha.1.enabled}',\n '--sidebar-scrollarea-autosize-scrollbar-background-hover':\n '{colors.neutral.background.alpha.2.enabled}',\n '--sidebar-scrollarea-autosize-thumb-background':\n '{colors.neutral.background.4.enabled}',\n '--sidebar-scrollarea-autosize-thumb-background-hover':\n '{colors.neutral.background.5.enabled}',\n '--sidebar-scrollarea-autosize-overflow-y-behavior': 'auto',\n '--sidebar-scrollarea-autosize-overflow-x-behavior': 'hidden',\n '--sidebar-scrollarea-autosize-viewport-padding-block-start':\n 'var(--sidebar-nav-focus-safe-padding-block)',\n '--sidebar-scrollarea-autosize-viewport-padding-block-end':\n 'var(--sidebar-nav-focus-safe-padding-block)',\n '--sidebar-scrollarea-autosize-viewport-padding-inline-start':\n 'var(--sidebar-nav-focus-safe-padding-inline-start)',\n '--sidebar-scrollarea-autosize-viewport-padding-inline-end':\n 'var(--sidebar-nav-focus-safe-padding-inline-end)',\n\n /* nav group */\n '--sidebar-nav-group-gap': '{spacing.300}',\n '--sidebar-nav-group-padding-top': '{spacing.200}',\n '--sidebar-nav-group-padding-bottom': '{spacing.400}',\n '--sidebar-nav-group-padding-inline': '{spacing.0}',\n '--sidebar-nav-group-background': 'transparent',\n '--sidebar-nav-group-border-color': '{colors.neutral.stroke.7.enabled}',\n '--sidebar-nav-group-border-top-width': '{borders.0}',\n '--sidebar-nav-group-border-bottom-width': '{borders.100}',\n '--sidebar-nav-group-border-left-width': '{borders.0}',\n '--sidebar-nav-group-border-right-width': '{borders.0}',\n '--sidebar-nav-group-radii': '{radii.0}',\n\n /* nav group title */\n '--sidebar-nav-group-title-font-size': '{fontSizes.200}',\n '--sidebar-nav-group-title-font-weight': '{fontWeights.medium}',\n '--sidebar-nav-group-title-color': '{colors.neutral.foreground.3.enabled}',\n '--sidebar-nav-group-title-text-transform': 'uppercase',\n '--sidebar-nav-group-title-padding-block': '{spacing.0}',\n '--sidebar-nav-group-title-padding-inline':\n 'var(--sidebar-nav-list-item-padding-inline, {spacing.300})',\n\n /* nav list */\n '--sidebar-nav-list-gap': '{spacing.200}',\n '--sidebar-nav-list-padding': '{spacing.0}',\n '--sidebar-nav-list-margin': '{spacing.0}',\n\n /* nav list item */\n '--sidebar-nav-list-item-height': '{sizes.700}',\n '--sidebar-nav-list-item-gap': '{spacing.300}',\n '--sidebar-nav-list-item-transition': '{animations.base.100}',\n '--sidebar-nav-list-item-padding-inline': '{spacing.300}',\n '--sidebar-nav-list-item-radii': '{radii.100}',\n '--sidebar-nav-list-item-background': 'transparent',\n '--sidebar-nav-list-item-background-hovered':\n '{colors.neutral.background.2.hovered}',\n '--sidebar-nav-list-item-background-active':\n '{colors.neutral.background.2.selected}',\n '--sidebar-nav-list-item-background-selected':\n '{colors.neutral.background.2.primary.selected}',\n '--sidebar-nav-list-item-background-selected-hovered':\n '{colors.neutral.background.2.primary.selectedHovered}',\n '--sidebar-nav-list-item-background-expanded':\n '{colors.neutral.background.2.primary.selected}',\n '--sidebar-nav-list-item-background-expanded-hovered':\n '{colors.neutral.background.2.primary.selectedHovered}',\n '--sidebar-nav-list-item-foreground':\n '{colors.neutral.foreground.2.enabled}',\n '--sidebar-nav-list-item-foreground-hovered':\n '{colors.neutral.foreground.2.primary.hovered}',\n '--sidebar-nav-list-item-foreground-active':\n '{colors.neutral.foreground.2.primary.selected}',\n '--sidebar-nav-list-item-foreground-selected':\n '{colors.neutral.foreground.2.primary.selected}',\n '--sidebar-nav-list-item-foreground-selected-hovered':\n '{colors.neutral.foreground.2.primary.selectedHovered}',\n '--sidebar-nav-list-item-foreground-expanded':\n '{colors.neutral.foreground.2.primary.selected}',\n '--sidebar-nav-list-item-foreground-expanded-hovered':\n '{colors.neutral.foreground.2.primary.selectedHovered}',\n\n /* nav item button */\n '--sidebar-nav-item-button-icon-toggle-size': '{sizes.300}',\n\n /* nav item label */\n '--sidebar-nav-item-label-font-size': '{fontSizes.400}',\n '--sidebar-nav-item-label-font-weight': '{fontWeights.medium}',\n '--sidebar-nav-item-label-text-transform': 'none',\n\n '--sidebar-nav-list-item-focus-outline-width': '{borders.200}',\n '--sidebar-nav-list-item-focus-outline-style': 'solid',\n '--sidebar-nav-list-item-focus-outline-color':\n '{colors.primary.stroke.1.focused}',\n '--sidebar-nav-list-item-focus-outline-offset': '{spacing.50}',\n\n /* subnav */\n '--sidebar-subnav-list-stroke-color': '{colors.neutral.stroke.6.enabled}',\n\n '--sidebar-subnav-zindex': '{zIndex.dropdown}',\n '--sidebar-subnav-animation-name': 'expandY',\n '--sidebar-subnav-animation-duration': '150ms',\n '--sidebar-subnav-animation-timing-function': 'ease-out',\n '--sidebar-subnav-animation-fill-mode': 'both',\n '--sidebar-subnav-padding-left': '{spacing.450}',\n '--sidebar-subnav-list-gap': '{spacing.0}',\n '--sidebar-subnav-list-padding-top': '{spacing.100}',\n\n /* subnav collapsed */\n '--sidebar-subnav-collapsed-background':\n '{colors.neutral.background.2.enabled}',\n '--sidebar-subnav-collapsed-padding-block': '{spacing.400}',\n '--sidebar-subnav-collapsed-padding-inline': '{spacing.450}',\n '--sidebar-subnav-collapsed-margin-left': '{spacing.50}',\n '--sidebar-subnav-collapsed-border-radius': '{radii.200}',\n\n /* subnav list item */\n '--sidebar-subnav-list-item-height': '{sizes.500}',\n '--sidebar-subnav-list-item-padding-left': '{spacing.300}',\n '--sidebar-subnav-list-item-padding-right': '{spacing.300}',\n '--sidebar-subnav-list-item-padding-block': '{spacing.100}',\n '--sidebar-subnav-list-item-border-radius': '{radii.100}',\n '--sidebar-subnav-list-item-transition': '{animations.base.100}',\n '--sidebar-subnav-list-stroke-width': '{borders.100}',\n '--sidebar-subnav-list-item-gap': '{spacing.0}',\n '--sidebar-subnav-list-item-background':\n '{colors.neutral.background.2.enabled}',\n '--sidebar-subnav-list-item-background-hovered':\n '{colors.neutral.background.2.hovered}',\n '--sidebar-subnav-list-item-background-active':\n '{colors.neutral.background.2.selected}',\n '--sidebar-subnav-list-item-background-selected':\n '{colors.neutral.background.2.primary.selected}',\n '--sidebar-subnav-list-item-background-selected-hovered':\n '{colors.neutral.background.2.primary.selectedHovered}',\n '--sidebar-subnav-list-item-foreground':\n '{colors.neutral.foreground.3.enabled}',\n '--sidebar-subnav-list-item-foreground-hovered':\n '{colors.neutral.foreground.2.primary.hovered}',\n '--sidebar-subnav-list-item-foreground-active':\n '{colors.neutral.foreground.2.primary.selected}',\n '--sidebar-subnav-list-item-foreground-selected':\n '{colors.neutral.foreground.2.primary.selected}',\n '--sidebar-subnav-list-item-foreground-selected-hovered':\n '{colors.neutral.foreground.2.primary.selectedHovered}',\n\n '--sidebar-subnav-list-item-focus-outline-width': '{borders.200}',\n '--sidebar-subnav-list-item-focus-outline-style': 'solid',\n '--sidebar-subnav-list-item-focus-outline-color':\n '{colors.primary.stroke.1.focused}',\n '--sidebar-subnav-list-item-focus-outline-offset': '{spacing.50}',\n\n /* subnav list item label */\n '--sidebar-subnav-list-item-label-font-size': '{fontSizes.300}',\n '--sidebar-subnav-list-item-label-font-weight': '{fontWeights.medium}',\n '--sidebar-subnav-list-item-label-text-transform': 'none',\n\n sm: {\n /* root */\n '--sidebar-position': 'sticky',\n '--sidebar-height': 'calc(100dvh - 0.5rem)',\n '--sidebar-top': '{spacing.100}',\n\n /* nav list item */\n '--sidebar-nav-list-item-height': '{sizes.600}',\n\n /* nav item label */\n '--sidebar-nav-item-label-font-size': '{fontSizes.300}',\n\n '&[data-collapsed=true]': {\n /* root */\n '--sidebar-width': '3.5rem',\n '--sidebar-padding-inline-base': '{spacing.100}',\n '--sidebar-nav-focus-safe-padding-inline-start':\n 'calc(var(--sidebar-nav-focus-safe-padding-inline) + (var(--sidebar-scrollarea-autosize-scrollbar-size) / 2))',\n '--sidebar-nav-focus-safe-padding-inline-end':\n 'calc(var(--sidebar-nav-focus-safe-padding-inline) + (var(--sidebar-scrollarea-autosize-scrollbar-size) / 2))',\n },\n },\n\n smDown: {\n '--sidebar-position': 'fixed',\n '--sidebar-height': '100dvh',\n '--sidebar-width': '100%',\n '--sidebar-top': '{spacing.0}',\n },\n },\n}) as RecipeBuilder<RecipeVariantRecord>;\n"],"mappings":"uDAMA,MAAa,EAAU,EAAa,CAClC,UAAW,UACX,IAAK,CAAC,UAAU,CAChB,KAAM,CAEJ,sBAAuB,UAEvB,qBAAsB,QACtB,uBAAwB,wCACxB,gBAAiB,gBACjB,kBAAmB,UACnB,mBAAoB,SACpB,gBAAiB,gBACjB,0BAA2B,gBAC3B,gCAAiC,gBACjC,2BACE,0EACF,iCACE,+GACF,+BACE,6GACF,kBAAmB,cACnB,uBAAwB,wBACxB,mBAAoB,eAGpB,qBAAsB,gBACtB,+BAAgC,cAChC,gCAAiC,qCACjC,sCAAuC,qCACvC,oCAAqC,qCAErC,yBAA0B,yCAC1B,mCACE,iDACF,oCACE,yEACF,0CACE,+EACF,wCACE,6EAEF,4BAA6B,yCAC7B,sCACE,iDACF,uCACE,yEACF,6CACE,+EACF,2CACE,6EAGF,oBAAqB,gBACrB,4BAA6B,gBAC7B,uBAAwB,qCACxB,2BAA4B,cAC5B,6BAA8B,cAC9B,iCAAkC,cAClC,oCAAqC,cACrC,kCAAmC,cACnC,mCAAoC,cACpC,8BAA+B,YAC/B,0CACE,6GACF,yCACE,6GACF,gDACE,+CACF,8CACE,yGAGF,uCAAwC,OACxC,2CAA4C,OAC5C,+CAAgD,aAChD,wDAAyD,IACzD,qDACE,8CACF,2DACE,8CACF,iDACE,wCACF,uDACE,wCACF,oDAAqD,OACrD,oDAAqD,SACrD,6DACE,8CACF,2DACE,8CACF,8DACE,qDACF,4DACE,mDAGF,0BAA2B,gBAC3B,kCAAmC,gBACnC,qCAAsC,gBACtC,qCAAsC,cACtC,iCAAkC,cAClC,mCAAoC,oCACpC,uCAAwC,cACxC,0CAA2C,gBAC3C,wCAAyC,cACzC,yCAA0C,cAC1C,4BAA6B,YAG7B,sCAAuC,kBACvC,wCAAyC,uBACzC,kCAAmC,wCACnC,2CAA4C,YAC5C,0CAA2C,cAC3C,2CACE,6DAGF,yBAA0B,gBAC1B,6BAA8B,cAC9B,4BAA6B,cAG7B,iCAAkC,cAClC,8BAA+B,gBAC/B,qCAAsC,wBACtC,yCAA0C,gBAC1C,gCAAiC,cACjC,qCAAsC,cACtC,6CACE,wCACF,4CACE,yCACF,8CACE,iDACF,sDACE,wDACF,8CACE,iDACF,sDACE,wDACF,qCACE,wCACF,6CACE,gDACF,4CACE,iDACF,8CACE,iDACF,sDACE,wDACF,8CACE,iDACF,sDACE,wDAGF,6CAA8C,cAG9C,qCAAsC,kBACtC,uCAAwC,uBACxC,0CAA2C,OAE3C,8CAA+C,gBAC/C,8CAA+C,QAC/C,8CACE,oCACF,+CAAgD,eAGhD,qCAAsC,oCAEtC,0BAA2B,oBAC3B,kCAAmC,UACnC,sCAAuC,QACvC,6CAA8C,WAC9C,uCAAwC,OACxC,gCAAiC,gBACjC,4BAA6B,cAC7B,oCAAqC,gBAGrC,wCACE,wCACF,2CAA4C,gBAC5C,4CAA6C,gBAC7C,yCAA0C,eAC1C,2CAA4C,cAG5C,oCAAqC,cACrC,0CAA2C,gBAC3C,2CAA4C,gBAC5C,2CAA4C,gBAC5C,2CAA4C,cAC5C,wCAAyC,wBACzC,qCAAsC,gBACtC,iCAAkC,cAClC,wCACE,wCACF,gDACE,wCACF,+CACE,yCACF,iDACE,iDACF,yDACE,wDACF,wCACE,wCACF,gDACE,gDACF,+CACE,iDACF,iDACE,iDACF,yDACE,wDAEF,iDAAkD,gBAClD,iDAAkD,QAClD,iDACE,oCACF,kDAAmD,eAGnD,6CAA8C,kBAC9C,+CAAgD,uBAChD,kDAAmD,OAEnD,GAAI,CAEF,qBAAsB,SACtB,mBAAoB,wBACpB,gBAAiB,gBAGjB,iCAAkC,cAGlC,qCAAsC,kBAEtC,yBAA0B,CAExB,kBAAmB,SACnB,gCAAiC,gBACjC,gDACE,+GACF,8CACE,+GACH,CACF,CAED,OAAQ,CACN,qBAAsB,QACtB,mBAAoB,SACpB,kBAAmB,OACnB,gBAAiB,cAClB,CACF,CACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"sidebar.mjs","names":[],"sources":["../../../../../src/recipes/navigations/sidebars/sidebar/sidebar.ts"],"sourcesContent":["import {\n defineRecipe,\n type RecipeBuilder,\n type RecipeVariantRecord,\n} from '@pandabox/define-recipe';\n\nexport const sidebar = defineRecipe({\n className: 'sidebar',\n jsx: ['Sidebar'],\n base: {\n /* root */\n '--sidebar-grid-area': 'sidebar',\n\n '--sidebar-position': 'fixed',\n '--sidebar-background': '{colors.neutral.background.2.enabled}',\n '--sidebar-gap': '{spacing.200}',\n '--sidebar-width': '16.5rem',\n '--sidebar-height': '100dvh',\n '--sidebar-top': '{spacing.100}',\n '--sidebar-left': '-100%',\n '--sidebar-padding-block': '{spacing.400}',\n '--sidebar-padding-inline-base': '{spacing.350}',\n '--sidebar-padding-inline':\n 'var(--sidebar-padding-inline-start, var(--sidebar-padding-inline-base))',\n '--sidebar-padding-inline-start':\n 'max(0px, calc(var(--sidebar-padding-inline-base) - var(--sidebar-nav-focus-safe-padding-inline-start, 0px)))',\n '--sidebar-padding-inline-end':\n 'max(0px, calc(var(--sidebar-padding-inline-base) - var(--sidebar-nav-focus-safe-padding-inline-end, 0px)))',\n '--sidebar-radii': '{radii.200}',\n '--sidebar-transition': '{animations.base.100}',\n '--sidebar-zindex': '{zIndex.nav}',\n\n /* slots */\n '--sidebar-slot-gap': '{spacing.200}',\n '--sidebar-slot-padding-block': '{spacing.0}',\n '--sidebar-slot-padding-inline': 'var(--sidebar-padding-inline-base)',\n '--sidebar-slot-padding-inline-start': 'var(--sidebar-slot-padding-inline)',\n '--sidebar-slot-padding-inline-end': 'var(--sidebar-slot-padding-inline)',\n\n '--sidebar-top-slot-gap': 'var(--sidebar-slot-gap, {spacing.200})',\n '--sidebar-top-slot-padding-block':\n 'var(--sidebar-slot-padding-block, {spacing.0})',\n '--sidebar-top-slot-padding-inline':\n 'var(--sidebar-slot-padding-inline, var(--sidebar-padding-inline-base))',\n '--sidebar-top-slot-padding-inline-start':\n 'var(--sidebar-slot-padding-inline-start, var(--sidebar-slot-padding-inline))',\n '--sidebar-top-slot-padding-inline-end':\n 'var(--sidebar-slot-padding-inline-end, var(--sidebar-slot-padding-inline))',\n\n '--sidebar-bottom-slot-gap': 'var(--sidebar-slot-gap, {spacing.200})',\n '--sidebar-bottom-slot-padding-block':\n 'var(--sidebar-slot-padding-block, {spacing.0})',\n '--sidebar-bottom-slot-padding-inline':\n 'var(--sidebar-slot-padding-inline, var(--sidebar-padding-inline-base))',\n '--sidebar-bottom-slot-padding-inline-start':\n 'var(--sidebar-slot-padding-inline-start, var(--sidebar-slot-padding-inline))',\n '--sidebar-bottom-slot-padding-inline-end':\n 'var(--sidebar-slot-padding-inline-end, var(--sidebar-slot-padding-inline))',\n\n /* nav */\n '--sidebar-nav-gap': '{spacing.300}',\n '--sidebar-nav-padding-top': '{spacing.400}',\n '--sidebar-nav-height': 'calc(100dvh - token(spacing.1000))',\n '--sidebar-nav-background': 'transparent',\n '--sidebar-nav-border-color': 'transparent',\n '--sidebar-nav-border-top-width': '{borders.0}',\n '--sidebar-nav-border-bottom-width': '{borders.0}',\n '--sidebar-nav-border-left-width': '{borders.0}',\n '--sidebar-nav-border-right-width': '{borders.0}',\n '--sidebar-nav-border-radius': '{radii.0}',\n '--sidebar-nav-focus-safe-padding-inline':\n 'calc(var(--sidebar-nav-list-item-focus-outline-width) + var(--sidebar-nav-list-item-focus-outline-offset))',\n '--sidebar-nav-focus-safe-padding-block':\n 'calc(var(--sidebar-nav-list-item-focus-outline-width) + var(--sidebar-nav-list-item-focus-outline-offset))',\n '--sidebar-nav-focus-safe-padding-inline-start':\n 'var(--sidebar-nav-focus-safe-padding-inline)',\n '--sidebar-nav-focus-safe-padding-inline-end':\n 'calc(var(--sidebar-nav-focus-safe-padding-inline) + var(--sidebar-scrollarea-autosize-scrollbar-size))',\n\n /* nav scroll area autosize */\n '--sidebar-scrollarea-autosize-height': '100%',\n '--sidebar-scrollarea-autosize-max-height': '100%',\n '--sidebar-scrollarea-autosize-scrollbar-size': '{sizes.50}',\n '--sidebar-scrollarea-autosize-scrollbar-inline-offset': '0',\n '--sidebar-scrollarea-autosize-scrollbar-background':\n '{colors.neutral.background.alpha.1.enabled}',\n '--sidebar-scrollarea-autosize-scrollbar-background-hover':\n '{colors.neutral.background.alpha.2.enabled}',\n '--sidebar-scrollarea-autosize-thumb-background':\n '{colors.neutral.background.4.enabled}',\n '--sidebar-scrollarea-autosize-thumb-background-hover':\n '{colors.neutral.background.5.enabled}',\n '--sidebar-scrollarea-autosize-overflow-y-behavior': 'auto',\n '--sidebar-scrollarea-autosize-overflow-x-behavior': 'hidden',\n '--sidebar-scrollarea-autosize-viewport-padding-block-start':\n 'var(--sidebar-nav-focus-safe-padding-block)',\n '--sidebar-scrollarea-autosize-viewport-padding-block-end':\n 'var(--sidebar-nav-focus-safe-padding-block)',\n '--sidebar-scrollarea-autosize-viewport-padding-inline-start':\n 'var(--sidebar-nav-focus-safe-padding-inline-start)',\n '--sidebar-scrollarea-autosize-viewport-padding-inline-end':\n 'var(--sidebar-nav-focus-safe-padding-inline-end)',\n\n /* nav group */\n '--sidebar-nav-group-gap': '{spacing.300}',\n '--sidebar-nav-group-padding-top': '{spacing.200}',\n '--sidebar-nav-group-padding-bottom': '{spacing.400}',\n '--sidebar-nav-group-padding-inline': '{spacing.0}',\n '--sidebar-nav-group-background': 'transparent',\n '--sidebar-nav-group-border-color': '{colors.neutral.stroke.7.enabled}',\n '--sidebar-nav-group-border-top-width': '{borders.0}',\n '--sidebar-nav-group-border-bottom-width': '{borders.100}',\n '--sidebar-nav-group-border-left-width': '{borders.0}',\n '--sidebar-nav-group-border-right-width': '{borders.0}',\n '--sidebar-nav-group-radii': '{radii.0}',\n\n /* nav group title */\n '--sidebar-nav-group-title-font-size': '{fontSizes.200}',\n '--sidebar-nav-group-title-font-weight': '{fontWeights.medium}',\n '--sidebar-nav-group-title-color': '{colors.neutral.foreground.3.enabled}',\n '--sidebar-nav-group-title-text-transform': 'uppercase',\n '--sidebar-nav-group-title-padding-block': '{spacing.0}',\n '--sidebar-nav-group-title-padding-inline':\n 'var(--sidebar-nav-list-item-padding-inline, {spacing.300})',\n\n /* nav list */\n '--sidebar-nav-list-gap': '{spacing.200}',\n '--sidebar-nav-list-padding': '{spacing.0}',\n '--sidebar-nav-list-margin': '{spacing.0}',\n\n /* nav list item */\n '--sidebar-nav-list-item-height': '{sizes.700}',\n '--sidebar-nav-list-item-gap': '{spacing.300}',\n '--sidebar-nav-list-item-transition': '{animations.base.100}',\n '--sidebar-nav-list-item-padding-inline': '{spacing.300}',\n '--sidebar-nav-list-item-radii': '{radii.100}',\n '--sidebar-nav-list-item-background': 'transparent',\n '--sidebar-nav-list-item-background-hovered':\n '{colors.neutral.background.2.hovered}',\n '--sidebar-nav-list-item-background-active':\n '{colors.neutral.background.2.selected}',\n '--sidebar-nav-list-item-background-selected':\n '{colors.neutral.background.2.primary.selected}',\n '--sidebar-nav-list-item-background-selected-hovered':\n '{colors.neutral.background.2.primary.selectedHovered}',\n '--sidebar-nav-list-item-background-expanded':\n '{colors.neutral.background.2.primary.selected}',\n '--sidebar-nav-list-item-background-expanded-hovered':\n '{colors.neutral.background.2.primary.selectedHovered}',\n '--sidebar-nav-list-item-foreground':\n '{colors.neutral.foreground.2.enabled}',\n '--sidebar-nav-list-item-foreground-hovered':\n '{colors.neutral.foreground.2.primary.hovered}',\n '--sidebar-nav-list-item-foreground-active':\n '{colors.neutral.foreground.2.primary.selected}',\n '--sidebar-nav-list-item-foreground-selected':\n '{colors.neutral.foreground.2.primary.selected}',\n '--sidebar-nav-list-item-foreground-selected-hovered':\n '{colors.neutral.foreground.2.primary.selectedHovered}',\n '--sidebar-nav-list-item-foreground-expanded':\n '{colors.neutral.foreground.2.primary.selected}',\n '--sidebar-nav-list-item-foreground-expanded-hovered':\n '{colors.neutral.foreground.2.primary.selectedHovered}',\n\n /* nav item button */\n '--sidebar-nav-item-button-icon-toggle-size': '{sizes.300}',\n\n /* nav item label */\n '--sidebar-nav-item-label-font-size': '{fontSizes.400}',\n '--sidebar-nav-item-label-font-weight': '{fontWeights.medium}',\n '--sidebar-nav-item-label-text-transform': 'none',\n\n '--sidebar-nav-list-item-focus-outline-width': '{borders.200}',\n '--sidebar-nav-list-item-focus-outline-style': 'solid',\n '--sidebar-nav-list-item-focus-outline-color':\n '{colors.primary.stroke.1.focused}',\n '--sidebar-nav-list-item-focus-outline-offset': '{spacing.50}',\n\n /* subnav */\n '--sidebar-subnav-list-stroke-color': '{colors.neutral.stroke.6.enabled}',\n\n '--sidebar-subnav-zindex': '{zIndex.dropdown}',\n '--sidebar-subnav-animation-name': 'expandY',\n '--sidebar-subnav-animation-duration': '150ms',\n '--sidebar-subnav-animation-timing-function': 'ease-out',\n '--sidebar-subnav-animation-fill-mode': 'both',\n '--sidebar-subnav-padding-left': '{spacing.450}',\n '--sidebar-subnav-list-gap': '{spacing.0}',\n '--sidebar-subnav-list-padding-top': '{spacing.100}',\n\n /* subnav collapsed */\n '--sidebar-subnav-collapsed-background':\n '{colors.neutral.background.2.enabled}',\n '--sidebar-subnav-collapsed-padding-block': '{spacing.400}',\n '--sidebar-subnav-collapsed-padding-inline': '{spacing.450}',\n '--sidebar-subnav-collapsed-margin-left': '{spacing.50}',\n '--sidebar-subnav-collapsed-border-radius': '{radii.200}',\n\n /* subnav list item */\n '--sidebar-subnav-list-item-height': '{sizes.500}',\n '--sidebar-subnav-list-item-padding-left': '{spacing.300}',\n '--sidebar-subnav-list-item-padding-right': '{spacing.300}',\n '--sidebar-subnav-list-item-padding-block': '{spacing.100}',\n '--sidebar-subnav-list-item-border-radius': '{radii.100}',\n '--sidebar-subnav-list-item-transition': '{animations.base.100}',\n '--sidebar-subnav-list-stroke-width': '{borders.100}',\n '--sidebar-subnav-list-item-gap': '{spacing.0}',\n '--sidebar-subnav-list-item-background':\n '{colors.neutral.background.2.enabled}',\n '--sidebar-subnav-list-item-background-hovered':\n '{colors.neutral.background.2.hovered}',\n '--sidebar-subnav-list-item-background-active':\n '{colors.neutral.background.2.selected}',\n '--sidebar-subnav-list-item-background-selected':\n '{colors.neutral.background.2.primary.selected}',\n '--sidebar-subnav-list-item-background-selected-hovered':\n '{colors.neutral.background.2.primary.selectedHovered}',\n '--sidebar-subnav-list-item-foreground':\n '{colors.neutral.foreground.3.enabled}',\n '--sidebar-subnav-list-item-foreground-hovered':\n '{colors.neutral.foreground.2.primary.hovered}',\n '--sidebar-subnav-list-item-foreground-active':\n '{colors.neutral.foreground.2.primary.selected}',\n '--sidebar-subnav-list-item-foreground-selected':\n '{colors.neutral.foreground.2.primary.selected}',\n '--sidebar-subnav-list-item-foreground-selected-hovered':\n '{colors.neutral.foreground.2.primary.selectedHovered}',\n\n '--sidebar-subnav-list-item-focus-outline-width': '{borders.200}',\n '--sidebar-subnav-list-item-focus-outline-style': 'solid',\n '--sidebar-subnav-list-item-focus-outline-color':\n '{colors.primary.stroke.1.focused}',\n '--sidebar-subnav-list-item-focus-outline-offset': '{spacing.50}',\n\n /* subnav list item label */\n '--sidebar-subnav-list-item-label-font-size': '{fontSizes.300}',\n '--sidebar-subnav-list-item-label-font-weight': '{fontWeights.medium}',\n '--sidebar-subnav-list-item-label-text-transform': 'none',\n\n sm: {\n /* root */\n '--sidebar-position': 'sticky',\n '--sidebar-height': 'calc(100dvh - 0.5rem)',\n '--sidebar-top': '{spacing.100}',\n\n /* nav list item */\n '--sidebar-nav-list-item-height': '{sizes.600}',\n\n /* nav item label */\n '--sidebar-nav-item-label-font-size': '{fontSizes.300}',\n\n '&[data-collapsed=true]': {\n /* root */\n '--sidebar-width': '3.5rem',\n '--sidebar-padding-inline-base': '{spacing.100}',\n '--sidebar-nav-focus-safe-padding-inline-start':\n 'calc(var(--sidebar-nav-focus-safe-padding-inline) + (var(--sidebar-scrollarea-autosize-scrollbar-size) / 2))',\n '--sidebar-nav-focus-safe-padding-inline-end':\n 'calc(var(--sidebar-nav-focus-safe-padding-inline) + (var(--sidebar-scrollarea-autosize-scrollbar-size) / 2))',\n },\n },\n\n smDown: {\n '--sidebar-position': 'fixed',\n '--sidebar-height': '100dvh',\n '--sidebar-width': '100%',\n '--sidebar-top': '{spacing.0}',\n },\n },\n}) as RecipeBuilder<RecipeVariantRecord>;\n"],"mappings":"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"}
|