@atom-learning/components 6.0.0-beta.21 → 6.0.0-beta.23
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/components/flex/Flex.js +1 -1
- package/dist/components/flex/Flex.js.map +1 -1
- package/dist/components/navigation/NavigationMenuDropdownContent.js +1 -1
- package/dist/components/navigation/NavigationMenuDropdownContent.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalList.js +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalList.js.map +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalText.js +1 -1
- package/dist/components/navigation-menu-vertical/NavigationMenuVerticalText.js.map +1 -1
- package/dist/components/side-bar/SideBar.js +1 -1
- package/dist/components/side-bar/SideBar.js.map +1 -1
- package/dist/components/side-bar/SideBarContext.d.ts +0 -2
- package/dist/components/side-bar/SideBarContext.js +1 -1
- package/dist/components/side-bar/SideBarContext.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/styled.js +1 -1
- package/dist/styled.js.map +1 -1
- package/package.json +1 -1
- package/scripts/generate-responsive-variant-classes.mjs +88 -9
- package/src/responsive-variant-classes.css +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{styled as t}from"../../styled.js";const e=t("div",{base:["flex"],variants:{direction:{row:["flex-row"],"row-reverse":["flex-row-reverse"],column:["flex-col"],"column-reverse":["flex-col-reverse"],inherit:["direction-[inherit]"],initial:["direction-[initial]"],revert:["direction-[revert]"],"revert-layer":["direction-[revert-layer]"],unset:["direction-[unset]"]},wrap:{nowrap:["flex-
|
|
1
|
+
import{styled as t}from"../../styled.js";const e=t("div",{base:["flex"],variants:{direction:{row:["flex-row"],"row-reverse":["flex-row-reverse"],column:["flex-col"],"column-reverse":["flex-col-reverse"],inherit:["direction-[inherit]"],initial:["direction-[initial]"],revert:["direction-[revert]"],"revert-layer":["direction-[revert-layer]"],unset:["direction-[unset]"]},wrap:{nowrap:["flex-nowrap"],wrap:["flex-wrap"],"wrap-reverse":["flex-wrap-reverse"],inherit:["[flex-wrap:inherit]"],initial:["[flex-wrap:initial]"],revert:["[flex-wrap:revert]"],"revert-layer":["[flex-wrap:revert-layer]"],unset:["[flex-wrap:unset]"]},justify:{normal:["justify-normal"],unsafe:["[justify-content:unsafe]"],safe:["[justify-content:safe]"],start:["justify-start"],center:["justify-center"],end:["justify-end"],"flex-start":["justify-start"],"flex-end":["justify-end"],left:["[justify-content:left]"],right:["[justify-content:right]"],"space-between":["justify-between"],"space-around":["justify-around"],"space-evenly":["justify-evenly"],stretch:["justify-stretch"],inherit:["[justify-content:inherit]"],initial:["[justify-content:initial]"],revert:["[justify-content:revert]"],"revert-layer":["[justify-content:revert-layer]"],unset:["[justify-content:unset]"]},align:{normal:["[align-items:normal]"],unsafe:["[align-items:unsafe]"],safe:["[align-items:safe]"],center:["items-center"],start:["items-start"],end:["items-end"],"self-start":["[align-items:self-start]"],"self-end":["[align-items:self-end]"],"flex-start":["items-start"],"flex-end":["items-end"],baseline:["items-baseline"],"first baseline":["[align-items:first baseline]"],"last baseline":["[align-items:last baseline]"],stretch:["items-stretch"],inherit:["[align-items:inherit]"],initial:["[align-items:initial]"],revert:["[align-items:revert]"],"revert-layer":["[align-items:revert-layer]"],unset:["[align-items:unset]"]},gap:{0:["gap-0.5"],1:["gap-1"],2:["gap-2"],3:["gap-3"],4:["gap-4"],24:["gap-6"],5:["gap-8"],6:["gap-10"],7:["gap-12"],8:["gap-16"],9:["gap-20"]}}},{enabledResponsiveVariants:!0});e.displayName="Flex";export{e as Flex};
|
|
2
2
|
//# sourceMappingURL=Flex.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Flex.js","sources":["../../../src/components/flex/Flex.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const Flex = styled(\n 'div',\n {\n base: ['flex'],\n variants: {\n direction: {\n row: ['flex-row'],\n 'row-reverse': ['flex-row-reverse'],\n column: ['flex-col'],\n 'column-reverse': ['flex-col-reverse'],\n inherit: ['direction-[inherit]'],\n initial: ['direction-[initial]'],\n revert: ['direction-[revert]'],\n 'revert-layer': ['direction-[revert-layer]'],\n unset: ['direction-[unset]']\n },\n wrap: {\n nowrap: ['flex-
|
|
1
|
+
{"version":3,"file":"Flex.js","sources":["../../../src/components/flex/Flex.tsx"],"sourcesContent":["import { styled } from '~/styled'\n\nexport const Flex = styled(\n 'div',\n {\n base: ['flex'],\n variants: {\n direction: {\n row: ['flex-row'],\n 'row-reverse': ['flex-row-reverse'],\n column: ['flex-col'],\n 'column-reverse': ['flex-col-reverse'],\n inherit: ['direction-[inherit]'],\n initial: ['direction-[initial]'],\n revert: ['direction-[revert]'],\n 'revert-layer': ['direction-[revert-layer]'],\n unset: ['direction-[unset]']\n },\n wrap: {\n nowrap: ['flex-nowrap'],\n wrap: ['flex-wrap'],\n 'wrap-reverse': ['flex-wrap-reverse'],\n inherit: ['[flex-wrap:inherit]'],\n initial: ['[flex-wrap:initial]'],\n revert: ['[flex-wrap:revert]'],\n 'revert-layer': ['[flex-wrap:revert-layer]'],\n unset: ['[flex-wrap:unset]']\n },\n justify: {\n normal: ['justify-normal'],\n unsafe: ['[justify-content:unsafe]'],\n safe: ['[justify-content:safe]'],\n start: ['justify-start'],\n center: ['justify-center'],\n end: ['justify-end'],\n 'flex-start': ['justify-start'],\n 'flex-end': ['justify-end'],\n left: ['[justify-content:left]'],\n right: ['[justify-content:right]'],\n 'space-between': ['justify-between'],\n 'space-around': ['justify-around'],\n 'space-evenly': ['justify-evenly'],\n stretch: ['justify-stretch'],\n inherit: ['[justify-content:inherit]'],\n initial: ['[justify-content:initial]'],\n revert: ['[justify-content:revert]'],\n 'revert-layer': ['[justify-content:revert-layer]'],\n unset: ['[justify-content:unset]']\n },\n align: {\n normal: ['[align-items:normal]'],\n unsafe: ['[align-items:unsafe]'],\n safe: ['[align-items:safe]'],\n center: ['items-center'],\n start: ['items-start'],\n end: ['items-end'],\n 'self-start': ['[align-items:self-start]'],\n 'self-end': ['[align-items:self-end]'],\n 'flex-start': ['items-start'],\n 'flex-end': ['items-end'],\n baseline: ['items-baseline'],\n 'first baseline': ['[align-items:first baseline]'],\n 'last baseline': ['[align-items:last baseline]'],\n stretch: ['items-stretch'],\n inherit: ['[align-items:inherit]'],\n initial: ['[align-items:initial]'],\n revert: ['[align-items:revert]'],\n 'revert-layer': ['[align-items:revert-layer]'],\n unset: ['[align-items:unset]']\n },\n gap: {\n 0: ['gap-0.5'],\n 1: ['gap-1'],\n 2: ['gap-2'],\n 3: ['gap-3'],\n 4: ['gap-4'],\n 24: ['gap-6'],\n 5: ['gap-8'],\n 6: ['gap-10'],\n 7: ['gap-12'],\n 8: ['gap-16'],\n 9: ['gap-20']\n }\n }\n },\n { enabledResponsiveVariants: true }\n)\n\nFlex.displayName = 'Flex'\n"],"names":["Flex","styled"],"mappings":"yCAEO,MAAMA,EAAOC,EAClB,MACA,CACE,KAAM,CAAC,MAAM,EACb,SAAU,CACR,UAAW,CACT,IAAK,CAAC,UAAU,EAChB,cAAe,CAAC,kBAAkB,EAClC,OAAQ,CAAC,UAAU,EACnB,iBAAkB,CAAC,kBAAkB,EACrC,QAAS,CAAC,qBAAqB,EAC/B,QAAS,CAAC,qBAAqB,EAC/B,OAAQ,CAAC,oBAAoB,EAC7B,eAAgB,CAAC,0BAA0B,EAC3C,MAAO,CAAC,mBAAmB,CAC7B,EACA,KAAM,CACJ,OAAQ,CAAC,aAAa,EACtB,KAAM,CAAC,WAAW,EAClB,eAAgB,CAAC,mBAAmB,EACpC,QAAS,CAAC,qBAAqB,EAC/B,QAAS,CAAC,qBAAqB,EAC/B,OAAQ,CAAC,oBAAoB,EAC7B,eAAgB,CAAC,0BAA0B,EAC3C,MAAO,CAAC,mBAAmB,CAC7B,EACA,QAAS,CACP,OAAQ,CAAC,gBAAgB,EACzB,OAAQ,CAAC,0BAA0B,EACnC,KAAM,CAAC,wBAAwB,EAC/B,MAAO,CAAC,eAAe,EACvB,OAAQ,CAAC,gBAAgB,EACzB,IAAK,CAAC,aAAa,EACnB,aAAc,CAAC,eAAe,EAC9B,WAAY,CAAC,aAAa,EAC1B,KAAM,CAAC,wBAAwB,EAC/B,MAAO,CAAC,yBAAyB,EACjC,gBAAiB,CAAC,iBAAiB,EACnC,eAAgB,CAAC,gBAAgB,EACjC,eAAgB,CAAC,gBAAgB,EACjC,QAAS,CAAC,iBAAiB,EAC3B,QAAS,CAAC,2BAA2B,EACrC,QAAS,CAAC,2BAA2B,EACrC,OAAQ,CAAC,0BAA0B,EACnC,eAAgB,CAAC,gCAAgC,EACjD,MAAO,CAAC,yBAAyB,CACnC,EACA,MAAO,CACL,OAAQ,CAAC,sBAAsB,EAC/B,OAAQ,CAAC,sBAAsB,EAC/B,KAAM,CAAC,oBAAoB,EAC3B,OAAQ,CAAC,cAAc,EACvB,MAAO,CAAC,aAAa,EACrB,IAAK,CAAC,WAAW,EACjB,aAAc,CAAC,0BAA0B,EACzC,WAAY,CAAC,wBAAwB,EACrC,aAAc,CAAC,aAAa,EAC5B,WAAY,CAAC,WAAW,EACxB,SAAU,CAAC,gBAAgB,EAC3B,iBAAkB,CAAC,8BAA8B,EACjD,gBAAiB,CAAC,6BAA6B,EAC/C,QAAS,CAAC,eAAe,EACzB,QAAS,CAAC,uBAAuB,EACjC,QAAS,CAAC,uBAAuB,EACjC,OAAQ,CAAC,sBAAsB,EAC/B,eAAgB,CAAC,4BAA4B,EAC7C,MAAO,CAAC,qBAAqB,CAC/B,EACA,IAAK,CACH,EAAG,CAAC,SAAS,EACb,EAAG,CAAC,OAAO,EACX,EAAG,CAAC,OAAO,EACX,EAAG,CAAC,OAAO,EACX,EAAG,CAAC,OAAO,EACX,GAAI,CAAC,OAAO,EACZ,EAAG,CAAC,OAAO,EACX,EAAG,CAAC,QAAQ,EACZ,EAAG,CAAC,QAAQ,EACZ,EAAG,CAAC,QAAQ,EACZ,EAAG,CAAC,QAAQ,CACd,CACF,CACF,EACA,CAAE,0BAA2B,EAAK,CACpC,EAEAD,EAAK,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as
|
|
1
|
+
import*as a from"@radix-ui/react-navigation-menu";import o from"react";import{styled as d}from"../../styled.js";import{preventEvent as e}from"../../utilities/event/preventEvent.js";const m=d(a.Content,{base:["p-3","bg-(--dropdown-background)","mt-1","shadow-md","rounded-md"]}),n=({children:t,...r})=>o.createElement(m,{onPointerMove:e,onPointerLeave:e,...r},o.createElement("ul",null,t));n.displayName="NavigationMenuDropdownContent";export{n as NavigationMenuDropdownContent};
|
|
2
2
|
//# sourceMappingURL=NavigationMenuDropdownContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenuDropdownContent.js","sources":["../../../src/components/navigation/NavigationMenuDropdownContent.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { preventEvent } from '~/utilities/event'\n\nconst
|
|
1
|
+
{"version":3,"file":"NavigationMenuDropdownContent.js","sources":["../../../src/components/navigation/NavigationMenuDropdownContent.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { styled } from '~/styled'\nimport { preventEvent } from '~/utilities/event'\n\nconst StyledContent = styled(NavigationMenuPrimitive.Content, {\n base: ['p-3', 'bg-(--dropdown-background)', 'mt-1', 'shadow-md', 'rounded-md']\n})\n\ntype NavigationMenuDropdownContentProps = React.ComponentProps<\n typeof StyledContent\n>\n\nexport const NavigationMenuDropdownContent = ({\n children,\n ...rest\n}: NavigationMenuDropdownContentProps) => (\n <StyledContent\n onPointerMove={preventEvent}\n onPointerLeave={preventEvent}\n {...rest}\n >\n <ul>{children}</ul>\n </StyledContent>\n)\n\nNavigationMenuDropdownContent.displayName = 'NavigationMenuDropdownContent'\n"],"names":["StyledContent","styled","NavigationMenuPrimitive","NavigationMenuDropdownContent","children","rest","React","preventEvent"],"mappings":"qLAMA,MAAMA,EAAgBC,EAAOC,EAAwB,QAAS,CAC5D,KAAM,CAAC,MAAO,6BAA8B,OAAQ,YAAa,YAAY,CAC/E,CAAC,EAMYC,EAAgC,CAAC,CAC5C,SAAAC,EACA,GAAGC,CACL,IACEC,EAAA,cAACN,EAAA,CACC,cAAeO,EACf,eAAgBA,EACf,GAAGF,CAEJC,EAAAA,EAAA,cAAC,KAAA,KAAIF,CAAS,CAChB,EAGFD,EAA8B,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{List as t}from"@radix-ui/react-navigation-menu";import{styled as i}from"../../styled.js";const
|
|
1
|
+
import{List as t}from"@radix-ui/react-navigation-menu";import{styled as i}from"../../styled.js";const o=i(t,{base:["[--navigation-menu-vertical-item-pl:--spacing(4)]","*:not-first:mt-0.5"]}),n=o;export{n as NavigationMenuVerticalList};
|
|
2
2
|
//# sourceMappingURL=NavigationMenuVerticalList.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenuVerticalList.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalList.tsx"],"sourcesContent":["import { List } from '@radix-ui/react-navigation-menu'\n\nimport { styled } from '~/styled'\n\nconst StyledList = styled(List, {\n base: [\n '
|
|
1
|
+
{"version":3,"file":"NavigationMenuVerticalList.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalList.tsx"],"sourcesContent":["import { List } from '@radix-ui/react-navigation-menu'\n\nimport { styled } from '~/styled'\n\nconst StyledList = styled(List, {\n base: [\n '[--navigation-menu-vertical-item-pl:--spacing(4)]',\n '*:not-first:mt-0.5'\n ]\n})\n\nexport const NavigationMenuVerticalList = StyledList\n"],"names":["StyledList","styled","List","NavigationMenuVerticalList"],"mappings":"gGAIA,MAAMA,EAAaC,EAAOC,EAAM,CAC9B,KAAM,CACJ,oDACA,oBACF,CACF,CAAC,EAEYC,EAA6BH"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import e from"react";import{Text as o}from"../text/Text.js";import{styled as i}from"../../styled.js";import"../side-bar/SideBar.js";import{useSidebarState as n}from"../side-bar/SideBarContext.js";const r=i(o,{base:["font-(--navigation-menu-vertical-item-font-weight)","leading-[1.2]","w-max","max-w-40","motion-safe:duration-125","motion-safe:ease-out","motion-safe:transition-[opacity,translate]"],variants:{isExpanded:{true:["opacity-100","motion-safe:translate-0"],false:["opacity-0","motion-safe:translate-x-2"]}}}),s=t=>{const{isExpanded:a}=n();return e.createElement(r,{size:"md",as:"span",...t,isExpanded:a})};export{s as NavigationMenuVerticalText};
|
|
2
2
|
//# sourceMappingURL=NavigationMenuVerticalText.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenuVerticalText.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalText.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '~/components/text'\nimport { styled } from '~/styled'\n\nimport { useSidebarState } from '../side-bar'\n\nconst StyledNavigationMenuVerticalText = styled(Text, {\n base: [\n 'font-(--navigation-menu-vertical-item-font-weight)',\n 'leading-[1.2]',\n 'w-max',\n 'max-w-40',\n '
|
|
1
|
+
{"version":3,"file":"NavigationMenuVerticalText.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVerticalText.tsx"],"sourcesContent":["import React from 'react'\n\nimport { Text } from '~/components/text'\nimport { styled } from '~/styled'\n\nimport { useSidebarState } from '../side-bar'\n\nconst StyledNavigationMenuVerticalText = styled(Text, {\n base: [\n 'font-(--navigation-menu-vertical-item-font-weight)',\n 'leading-[1.2]',\n 'w-max',\n 'max-w-40',\n 'motion-safe:duration-125',\n 'motion-safe:ease-out',\n 'motion-safe:transition-[opacity,translate]'\n ],\n variants: {\n isExpanded: {\n true: ['opacity-100', 'motion-safe:translate-0'],\n false: ['opacity-0', 'motion-safe:translate-x-2']\n }\n }\n})\n\ntype TStyledNavigationMenuVerticalTextProps = React.ComponentProps<\n typeof StyledNavigationMenuVerticalText\n>\n\nexport const NavigationMenuVerticalText = (\n props: TStyledNavigationMenuVerticalTextProps\n): JSX.Element => {\n const { isExpanded } = useSidebarState()\n\n return (\n <StyledNavigationMenuVerticalText\n size=\"md\"\n as=\"span\"\n {...props}\n isExpanded={isExpanded}\n />\n )\n}\n"],"names":["StyledNavigationMenuVerticalText","styled","Text","NavigationMenuVerticalText","props","isExpanded","useSidebarState","React"],"mappings":"oMAOA,MAAMA,EAAmCC,EAAOC,EAAM,CACpD,KAAM,CACJ,qDACA,gBACA,QACA,WACA,2BACA,uBACA,4CACF,EACA,SAAU,CACR,WAAY,CACV,KAAM,CAAC,cAAe,yBAAyB,EAC/C,MAAO,CAAC,YAAa,2BAA2B,CAClD,CACF,CACF,CAAC,EAMYC,EACXC,GACgB,CAChB,KAAM,CAAE,WAAAC,CAAW,EAAIC,IAEvB,OACEC,EAAA,cAACP,EAAA,CACC,KAAK,KACL,GAAG,OACF,GAAGI,EACJ,WAAYC,EACd,CAEJ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
1
|
+
import x from"clsx";import a from"react";import{useInteractOutside as v,useFocusWithin as B,useHover as y}from"react-aria";import{styled as i,Theme as g}from"../../styled.js";import{SideBarBrand as w,SideBarBrandLogo as E,SideBarBrandName as S,SideBarHeader as _,SideBarBody as H,SideBarFooter as N}from"./SideBarComponents.js";import{SideBarContext as k}from"./SideBarContext.js";const F={"--background":"white","--text":"var(--color-grey-800)","--border":"var(--color-grey-200)"},W=i("div",{base:["sticky","z-1"],variants:{type:{static:[],expandable:["w-22"]}}}),P=i("div",{base:["bg-(--background)","border-r","border-r-(--border)","shadow-[4px_0_4px_-2px_rgba(31,31,31,0)]","flex","flex-col","h-full","overflow-hidden","will-change-width","motion-safe:duration-125","motion-safe:ease-out","motion-safe:transition-[shadow,width]"],variants:{type:{static:[],expandable:[]},isExpanded:{true:["w-[16rem]"],false:["w-22"]}},compoundVariants:[{isExpanded:!0,type:"expandable",class:["shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]"]}]}),T=i("div",{base:["bottom-0","left-0","absolute","right-0","top-0","transition-all"],variants:{isVisible:{true:["delay-0","visible"],false:["delay-50","invisible"]}}}),e=({theme:d,className:n,children:l,type:t="expandable",offset:p="0px",style:c,...m})=>{const[o,r]=a.useState(t==="static"),s=a.useRef(null);v({ref:s,onInteractOutside:()=>r(!1)});const{focusWithinProps:f}=B({onFocusWithin:()=>r(!0),onBlurWithin:()=>r(!1)}),{hoverProps:u,isHovered:b}=y({onHoverStart:()=>r(!0),onHoverEnd:()=>r(!1)}),h=t==="expandable"?{...f,...u,onTouchEnd:()=>r(!0),ref:s}:{};return a.createElement(k.Provider,{value:{isExpanded:o}},a.createElement(g,{theme:d||F},a.createElement(W,{...m,style:{...c,"--offset":p},type:t,className:x("h-[calc(100svh-var(--offset))]","top-(--offset)",n)},a.createElement(P,{...h,isExpanded:o,type:t},l,t==="expandable"&&a.createElement(T,{isVisible:!b&&!o})))))};e.Brand=w,e.BrandLogo=E,e.BrandName=S,e.Header=_,e.Body=H,e.Footer=N,e.displayName="SideBar";export{e as SideBar};
|
|
2
2
|
//# sourceMappingURL=SideBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideBar.js","sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { styled, Theme } from '~/styled'\n\nimport {\n SideBarBody,\n SideBarBrand,\n SideBarBrandLogo,\n SideBarBrandName,\n SideBarFooter,\n SideBarHeader\n} from './SideBarComponents'\nimport { SideBarContext } from './SideBarContext'\n\nconst light = {\n '--background': 'white',\n '--text': 'var(--color-grey-800)',\n '--border': 'var(--color-grey-200)'\n}\n\nconst Root = styled('div', {\n base: ['sticky', 'z-1'],\n variants: {\n type: {\n static: [],\n expandable: ['w-22']\n }\n }\n})\n\nconst Content = styled('div', {\n base: [\n 'bg-(--background)',\n 'border-r',\n 'border-r-(--border)',\n 'shadow-[4px_0_4px_-2px_rgba(31,31,31,0)]',\n 'flex',\n 'flex-col',\n 'h-full',\n 'overflow-hidden',\n 'will-change-width',\n 'motion-safe:duration-125',\n 'motion-safe:ease-out',\n 'motion-safe:transition-[shadow,width]'\n ],\n variants: {\n type: {\n static: [],\n expandable: []\n },\n isExpanded: {\n true: ['w-[16rem]'],\n false: ['w-22']\n }\n },\n compoundVariants: [\n {\n isExpanded: true,\n type: 'expandable',\n class: ['shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]']\n }\n ]\n})\n\nconst PointerBlocker = styled('div', {\n base: [\n 'bottom-0',\n 'left-0',\n 'absolute',\n 'right-0',\n 'top-0',\n 'transition-all'\n ],\n variants: {\n isVisible: {\n true: ['delay-0', 'visible'],\n false: ['delay-50', 'invisible']\n }\n }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n className?: string\n offset?: number | string\n} & React.ComponentProps<typeof Theme>\n\nexport const SideBar = ({\n theme,\n className,\n children,\n type = 'expandable',\n offset = '0px',\n style,\n ...rest\n}: SideBarProps) => {\n const
|
|
1
|
+
{"version":3,"file":"SideBar.js","sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { styled, Theme } from '~/styled'\n\nimport {\n SideBarBody,\n SideBarBrand,\n SideBarBrandLogo,\n SideBarBrandName,\n SideBarFooter,\n SideBarHeader\n} from './SideBarComponents'\nimport { SideBarContext } from './SideBarContext'\n\nconst light = {\n '--background': 'white',\n '--text': 'var(--color-grey-800)',\n '--border': 'var(--color-grey-200)'\n}\n\nconst Root = styled('div', {\n base: ['sticky', 'z-1'],\n variants: {\n type: {\n static: [],\n expandable: ['w-22']\n }\n }\n})\n\nconst Content = styled('div', {\n base: [\n 'bg-(--background)',\n 'border-r',\n 'border-r-(--border)',\n 'shadow-[4px_0_4px_-2px_rgba(31,31,31,0)]',\n 'flex',\n 'flex-col',\n 'h-full',\n 'overflow-hidden',\n 'will-change-width',\n 'motion-safe:duration-125',\n 'motion-safe:ease-out',\n 'motion-safe:transition-[shadow,width]'\n ],\n variants: {\n type: {\n static: [],\n expandable: []\n },\n isExpanded: {\n true: ['w-[16rem]'],\n false: ['w-22']\n }\n },\n compoundVariants: [\n {\n isExpanded: true,\n type: 'expandable',\n class: ['shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]']\n }\n ]\n})\n\nconst PointerBlocker = styled('div', {\n base: [\n 'bottom-0',\n 'left-0',\n 'absolute',\n 'right-0',\n 'top-0',\n 'transition-all'\n ],\n variants: {\n isVisible: {\n true: ['delay-0', 'visible'],\n false: ['delay-50', 'invisible']\n }\n }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n className?: string\n offset?: number | string\n} & React.ComponentProps<typeof Theme>\n\nexport const SideBar = ({\n theme,\n className,\n children,\n type = 'expandable',\n offset = '0px',\n style,\n ...rest\n}: SideBarProps) => {\n const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n const ref = React.useRef<HTMLDivElement>(null)\n\n useInteractOutside({\n ref,\n onInteractOutside: () => setIsExpanded(false)\n })\n const { focusWithinProps } = useFocusWithin({\n onFocusWithin: () => setIsExpanded(true),\n onBlurWithin: () => setIsExpanded(false)\n })\n const { hoverProps, isHovered } = useHover({\n onHoverStart: () => setIsExpanded(true),\n onHoverEnd: () => setIsExpanded(false)\n })\n const touchProps = {\n onTouchEnd: () => setIsExpanded(true)\n }\n\n const expandableProps =\n type === 'expandable'\n ? {\n ...focusWithinProps,\n ...hoverProps,\n ...touchProps,\n ref\n }\n : {}\n\n return (\n <SideBarContext.Provider value={{ isExpanded }}>\n <Theme theme={theme || light}>\n <Root\n {...rest}\n style={{ ...style, '--offset': offset }}\n type={type}\n className={clsx(\n 'h-[calc(100svh-var(--offset))]',\n 'top-(--offset)',\n className\n )}\n >\n <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n {children}\n {/**\n * When the SideBar is collapsed, ensure that the initial tap event\n * is used to expand the nav first before making the items available\n */}\n {type === 'expandable' && (\n <PointerBlocker isVisible={!isHovered && !isExpanded} />\n )}\n </Content>\n </Root>\n </Theme>\n </SideBarContext.Provider>\n )\n}\n\nSideBar.Brand = SideBarBrand\nSideBar.BrandLogo = SideBarBrandLogo\nSideBar.BrandName = SideBarBrandName\nSideBar.Header = SideBarHeader\nSideBar.Body = SideBarBody\nSideBar.Footer = SideBarFooter\n\nSideBar.displayName = 'SideBar'\n"],"names":["light","Root","styled","Content","PointerBlocker","SideBar","theme","className","children","type","offset","style","rest","isExpanded","setIsExpanded","React","ref","useInteractOutside","focusWithinProps","useFocusWithin","hoverProps","isHovered","useHover","expandableProps","SideBarContext","Theme","clsx","SideBarBrand","SideBarBrandLogo","SideBarBrandName","SideBarHeader","SideBarBody","SideBarFooter"],"mappings":"6XAgBA,MAAMA,EAAQ,CACZ,eAAgB,QAChB,SAAU,wBACV,WAAY,uBACd,EAEMC,EAAOC,EAAO,MAAO,CACzB,KAAM,CAAC,SAAU,KAAK,EACtB,SAAU,CACR,KAAM,CACJ,OAAQ,CAAA,EACR,WAAY,CAAC,MAAM,CACrB,CACF,CACF,CAAC,EAEKC,EAAUD,EAAO,MAAO,CAC5B,KAAM,CACJ,oBACA,WACA,sBACA,2CACA,OACA,WACA,SACA,kBACA,oBACA,2BACA,uBACA,uCACF,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,CACR,EAAA,WAAY,CACd,CAAA,EACA,WAAY,CACV,KAAM,CAAC,WAAW,EAClB,MAAO,CAAC,MAAM,CAChB,CACF,EACA,iBAAkB,CAChB,CACE,WAAY,GACZ,KAAM,aACN,MAAO,CAAC,4CAA4C,CACtD,CACF,CACF,CAAC,EAEKE,EAAiBF,EAAO,MAAO,CACnC,KAAM,CACJ,WACA,SACA,WACA,UACA,QACA,gBACF,EACA,SAAU,CACR,UAAW,CACT,KAAM,CAAC,UAAW,SAAS,EAC3B,MAAO,CAAC,WAAY,WAAW,CACjC,CACF,CACF,CAAC,EAOYG,EAAU,CAAC,CACtB,MAAAC,EACA,UAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,aACP,OAAAC,EAAS,MACT,MAAAC,EACA,GAAGC,CACL,IAAoB,CAClB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAASN,IAAS,QAAQ,EAC9DO,EAAMD,EAAM,OAAuB,IAAI,EAE7CE,EAAmB,CACjB,IAAAD,EACA,kBAAmB,IAAMF,EAAc,EAAK,CAC9C,CAAC,EACD,KAAM,CAAE,iBAAAI,CAAiB,EAAIC,EAAe,CAC1C,cAAe,IAAML,EAAc,EAAI,EACvC,aAAc,IAAMA,EAAc,EAAK,CACzC,CAAC,EACK,CAAE,WAAAM,EAAY,UAAAC,CAAU,EAAIC,EAAS,CACzC,aAAc,IAAMR,EAAc,EAAI,EACtC,WAAY,IAAMA,EAAc,EAAK,CACvC,CAAC,EAKKS,EACJd,IAAS,aACL,CACE,GAAGS,EACH,GAAGE,EAPT,WAAY,IAAMN,EAAc,EAAI,EAS9B,IAAAE,CACF,EACA,CAAA,EAEN,OACED,EAAA,cAACS,EAAe,SAAf,CAAwB,MAAO,CAAE,WAAAX,CAAW,CAAA,EAC3CE,EAAA,cAACU,EAAA,CAAM,MAAOnB,GAASN,GACrBe,EAAA,cAACd,EAAA,CACE,GAAGW,EACJ,MAAO,CAAE,GAAGD,EAAO,WAAYD,CAAO,EACtC,KAAMD,EACN,UAAWiB,EACT,iCACA,iBACAnB,CACF,CAEAQ,EAAAA,EAAA,cAACZ,EAAA,CAAS,GAAGoB,EAAiB,WAAYV,EAAY,KAAMJ,GACzDD,EAKAC,IAAS,cACRM,EAAA,cAACX,EAAA,CAAe,UAAW,CAACiB,GAAa,CAACR,CAAY,CAAA,CAE1D,CACF,CACF,CACF,CAEJ,EAEAR,EAAQ,MAAQsB,EAChBtB,EAAQ,UAAYuB,EACpBvB,EAAQ,UAAYwB,EACpBxB,EAAQ,OAASyB,EACjBzB,EAAQ,KAAO0B,EACf1B,EAAQ,OAAS2B,EAEjB3B,EAAQ,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";const t=e.createContext({isExpanded:void 0
|
|
1
|
+
import*as e from"react";const t=e.createContext({isExpanded:void 0}),o=()=>e.useContext(t);export{t as SideBarContext,o as useSidebarState};
|
|
2
2
|
//# sourceMappingURL=SideBarContext.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SideBarContext.js","sources":["../../../src/components/side-bar/SideBarContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport const SideBarContext = React.createContext<{\n isExpanded?: boolean\n
|
|
1
|
+
{"version":3,"file":"SideBarContext.js","sources":["../../../src/components/side-bar/SideBarContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport const SideBarContext = React.createContext<{\n isExpanded?: boolean\n}>({\n isExpanded: undefined\n})\n\nexport const useSidebarState = () => React.useContext(SideBarContext)\n"],"names":["SideBarContext","React","useSidebarState"],"mappings":"wBAEa,MAAAA,EAAiBC,EAAM,cAEjC,CACD,WAAY,MACd,CAAC,EAEYC,EAAkB,IAAMD,EAAM,WAAWD,CAAc"}
|