@atom-learning/components 6.0.0-beta.23 → 6.0.0-beta.24
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/keyboard-shortcut/KeyboardShortcut.js +1 -1
- package/dist/components/keyboard-shortcut/KeyboardShortcut.js.map +1 -1
- package/dist/components/top-bar/TopBar.js +1 -1
- package/dist/components/top-bar/TopBar.js.map +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Slot as p}from"@radix-ui/react-slot";import*as e from"react";import{styled as w}from"../../styled.js";import{useCallbackRefState as v}from"../../utilities/hooks/useCallbackRef.js";import{Text as
|
|
1
|
+
import{Slot as p}from"@radix-ui/react-slot";import*as e from"react";import{styled as w}from"../../styled.js";import{useCallbackRefState as v}from"../../utilities/hooks/useCallbackRef.js";import{Text as x}from"../text/Text.js";const m=e.forwardRef(({asChild:o,config:s,targetWindow:r=!1,onKeyDown:n,...d},l)=>{const[f,y]=v();e.useImperativeHandle(l,()=>f);const t=e.useCallback(i=>{s.forEach(({shortcut:a,action:u})=>{Object.entries(a).every(([b,h])=>i[b]===h)&&u({event:i,shortcut:a})}),n==null||n(i)},[s,n]);return e.useEffect(()=>(r&&window.addEventListener("keydown",t),()=>{window.removeEventListener("keydown",t)}),[r,t]),e.createElement(o?p:"div",{onKeyDown:r?void 0:t,ref:y,...d})});m.displayName="KeyboardShortcut";const k=w(x,{base:["bg-grey-100","text-text-subtle","px-2","text-[1em]","py-0.5","min-w-6","min-h-6","font-normal","inline-flex","justify-center","items-center","rounded-md","shrink-0"]}),c=o=>e.createElement(k,{size:"sm",as:"kbd",...o});c.displayName="KeyboardShortcut";export{m as KeyboardShortcut,c as KeyboardShortcutIndicator};
|
|
2
2
|
//# sourceMappingURL=KeyboardShortcut.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KeyboardShortcut.js","sources":["../../../src/components/keyboard-shortcut/KeyboardShortcut.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\n\nimport { Text } from '../text'\n\ntype KeyboardEventWindowOrElement =\n | KeyboardEvent\n | React.KeyboardEvent<HTMLDivElement>\ntype ShortcutConfig = Partial<KeyboardEvent>\n\ntype KeyboardShortcutProps = React.HTMLAttributes<HTMLDivElement> & {\n asChild?: boolean\n config: {\n shortcut: ShortcutConfig\n action: ({\n event,\n shortcut\n }: {\n event: KeyboardEvent | React.KeyboardEvent<HTMLDivElement>\n shortcut: ShortcutConfig\n }) => void\n }[]\n targetWindow?: boolean\n onKeyDown?: (e: KeyboardEventWindowOrElement) => void\n}\n\nexport const KeyboardShortcut = React.forwardRef<\n HTMLDivElement,\n KeyboardShortcutProps\n>(({ asChild, config, targetWindow = false, onKeyDown, ...rest }, ref) => {\n const [targetElRef, setTargetElRef] = useCallbackRefState()\n React.useImperativeHandle(ref, () => targetElRef as HTMLDivElement)\n\n const handleOnKeydown = React.useCallback(\n (e: KeyboardEventWindowOrElement) => {\n config.forEach(({ shortcut, action }) => {\n if (Object.entries(shortcut).every(([key, value]) => e[key] === value))\n action({ event: e, shortcut })\n })\n onKeyDown?.(e)\n },\n [config, onKeyDown]\n )\n\n React.useEffect(() => {\n if (targetWindow) window.addEventListener('keydown', handleOnKeydown)\n\n return () => {\n window.removeEventListener('keydown', handleOnKeydown)\n }\n }, [targetWindow, handleOnKeydown])\n\n const Component = asChild ? Slot : 'div'\n\n return (\n <Component\n onKeyDown={targetWindow ? undefined : (handleOnKeydown as any)}\n ref={setTargetElRef}\n {...rest}\n />\n )\n})\n\nKeyboardShortcut.displayName = 'KeyboardShortcut'\n\nconst StyledKeyboardShortcutIndicator = styled(Text, {\n base: [\n 'bg-grey-100',\n 'text-text-subtle',\n 'px-2',\n 'py-0.5',\n 'min-w-6',\n 'min-h-6',\n 'font-normal',\n 'inline-flex',\n 'justify-center',\n 'items-center',\n 'rounded-md',\n 'shrink-0'\n ]\n})\n\ntype KeyboardShortcutIndicatorProps = React.ComponentProps<\n typeof StyledKeyboardShortcutIndicator\n>\n\nexport const KeyboardShortcutIndicator = (\n props: KeyboardShortcutIndicatorProps\n) => {\n return <StyledKeyboardShortcutIndicator size=\"sm\" as=\"kbd\" {...props} />\n}\n\nKeyboardShortcutIndicator.displayName = 'KeyboardShortcut'\n"],"names":["KeyboardShortcut","React","asChild","config","targetWindow","onKeyDown","rest","ref","targetElRef","setTargetElRef","useCallbackRefState","handleOnKeydown","e","shortcut","action","key","value","Slot","StyledKeyboardShortcutIndicator","styled","Text","KeyboardShortcutIndicator","props"],"mappings":"wOA6BaA,EAAmBC,EAAM,WAGpC,CAAC,CAAE,QAAAC,EAAS,OAAAC,EAAQ,aAAAC,EAAe,GAAO,UAAAC,EAAW,GAAGC,CAAK,EAAGC,IAAQ,CACxE,KAAM,CAACC,EAAaC,CAAc,EAAIC,EACtCT,
|
|
1
|
+
{"version":3,"file":"KeyboardShortcut.js","sources":["../../../src/components/keyboard-shortcut/KeyboardShortcut.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { useCallbackRefState } from '~/utilities/hooks/useCallbackRef'\n\nimport { Text } from '../text'\n\ntype KeyboardEventWindowOrElement =\n | KeyboardEvent\n | React.KeyboardEvent<HTMLDivElement>\ntype ShortcutConfig = Partial<KeyboardEvent>\n\ntype KeyboardShortcutProps = React.HTMLAttributes<HTMLDivElement> & {\n asChild?: boolean\n config: {\n shortcut: ShortcutConfig\n action: ({\n event,\n shortcut\n }: {\n event: KeyboardEvent | React.KeyboardEvent<HTMLDivElement>\n shortcut: ShortcutConfig\n }) => void\n }[]\n targetWindow?: boolean\n onKeyDown?: (e: KeyboardEventWindowOrElement) => void\n}\n\nexport const KeyboardShortcut = React.forwardRef<\n HTMLDivElement,\n KeyboardShortcutProps\n>(({ asChild, config, targetWindow = false, onKeyDown, ...rest }, ref) => {\n const [targetElRef, setTargetElRef] = useCallbackRefState()\n React.useImperativeHandle(ref, () => targetElRef as HTMLDivElement)\n\n const handleOnKeydown = React.useCallback(\n (e: KeyboardEventWindowOrElement) => {\n config.forEach(({ shortcut, action }) => {\n if (Object.entries(shortcut).every(([key, value]) => e[key] === value))\n action({ event: e, shortcut })\n })\n onKeyDown?.(e)\n },\n [config, onKeyDown]\n )\n\n React.useEffect(() => {\n if (targetWindow) window.addEventListener('keydown', handleOnKeydown)\n\n return () => {\n window.removeEventListener('keydown', handleOnKeydown)\n }\n }, [targetWindow, handleOnKeydown])\n\n const Component = asChild ? Slot : 'div'\n\n return (\n <Component\n onKeyDown={targetWindow ? undefined : (handleOnKeydown as any)}\n ref={setTargetElRef}\n {...rest}\n />\n )\n})\n\nKeyboardShortcut.displayName = 'KeyboardShortcut'\n\nconst StyledKeyboardShortcutIndicator = styled(Text, {\n base: [\n 'bg-grey-100',\n 'text-text-subtle',\n 'px-2',\n 'text-[1em]',\n 'py-0.5',\n 'min-w-6',\n 'min-h-6',\n 'font-normal',\n 'inline-flex',\n 'justify-center',\n 'items-center',\n 'rounded-md',\n 'shrink-0'\n ]\n})\n\ntype KeyboardShortcutIndicatorProps = React.ComponentProps<\n typeof StyledKeyboardShortcutIndicator\n>\n\nexport const KeyboardShortcutIndicator = (\n props: KeyboardShortcutIndicatorProps\n) => {\n return <StyledKeyboardShortcutIndicator size=\"sm\" as=\"kbd\" {...props} />\n}\n\nKeyboardShortcutIndicator.displayName = 'KeyboardShortcut'\n"],"names":["KeyboardShortcut","React","asChild","config","targetWindow","onKeyDown","rest","ref","targetElRef","setTargetElRef","useCallbackRefState","handleOnKeydown","e","shortcut","action","key","value","Slot","StyledKeyboardShortcutIndicator","styled","Text","KeyboardShortcutIndicator","props"],"mappings":"wOA6BaA,EAAmBC,EAAM,WAGpC,CAAC,CAAE,QAAAC,EAAS,OAAAC,EAAQ,aAAAC,EAAe,GAAO,UAAAC,EAAW,GAAGC,CAAK,EAAGC,IAAQ,CACxE,KAAM,CAACC,EAAaC,CAAc,EAAIC,EAAAA,EACtCT,EAAM,oBAAoBM,EAAK,IAAMC,CAA6B,EAElE,MAAMG,EAAkBV,EAAM,YAC3BW,GAAoC,CACnCT,EAAO,QAAQ,CAAC,CAAE,SAAAU,EAAU,OAAAC,CAAO,IAAM,CACnC,OAAO,QAAQD,CAAQ,EAAE,MAAM,CAAC,CAACE,EAAKC,CAAK,IAAMJ,EAAEG,CAAG,IAAMC,CAAK,GACnEF,EAAO,CAAE,MAAOF,EAAG,SAAAC,CAAS,CAAC,CACjC,CAAC,EACDR,GAAA,MAAAA,EAAYO,CAAAA,CACd,EACA,CAACT,EAAQE,CAAS,CACpB,EAEA,OAAAJ,EAAM,UAAU,KACVG,GAAc,OAAO,iBAAiB,UAAWO,CAAe,EAE7D,IAAM,CACX,OAAO,oBAAoB,UAAWA,CAAe,CACvD,GACC,CAACP,EAAcO,CAAe,CAAC,EAKhCV,EAAA,cAHgBC,EAAUe,EAAO,MAGhC,CACC,UAAWb,EAAe,OAAaO,EACvC,IAAKF,EACJ,GAAGH,CACN,CAAA,CAEJ,CAAC,EAEDN,EAAiB,YAAc,mBAE/B,MAAMkB,EAAkCC,EAAOC,EAAM,CACnD,KAAM,CACJ,cACA,mBACA,OACA,aACA,SACA,UACA,UACA,cACA,cACA,iBACA,eACA,aACA,UACF,CACF,CAAC,EAMYC,EACXC,GAEOrB,EAAA,cAACiB,EAAA,CAAgC,KAAK,KAAK,GAAG,MAAO,GAAGI,CAAO,CAAA,EAGxED,EAA0B,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as e from"react";import{styled as r,Theme as m}from"../../styled.js";import{useWindowScrollPosition as p}from"../../utilities/hooks/useWindowScrollPosition.js";import{Divider as l}from"../divider/Divider.js";import{Flex as c}from"../flex/Flex.js";import{colorSchemes as b}from"./TopBar.colorscheme.config.js";import{TopBarActionIcon as f}from"./TopBarActionIcon.js";import{TopBarBrand as u,TopBarBrandLogo as h,TopBarBrandName as x}from"./TopBarBrand.js";const B=()=>e.createElement(l,{orientation:"vertical",className:"bg-divider h-6"}),g=r("div",{base:["bg-(--background)","sticky","flex","items-center","z-
|
|
1
|
+
import*as e from"react";import{styled as r,Theme as m}from"../../styled.js";import{useWindowScrollPosition as p}from"../../utilities/hooks/useWindowScrollPosition.js";import{Divider as l}from"../divider/Divider.js";import{Flex as c}from"../flex/Flex.js";import{colorSchemes as b}from"./TopBar.colorscheme.config.js";import{TopBarActionIcon as f}from"./TopBarActionIcon.js";import{TopBarBrand as u,TopBarBrandLogo as h,TopBarBrandName as x}from"./TopBarBrand.js";const B=()=>e.createElement(l,{orientation:"vertical",className:"bg-divider h-6"}),g=r("div",{base:["bg-(--background)","sticky","flex","items-center","z-15","transition-shadow","duration-200","ease-out"],variants:{hasScrolled:{true:["shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)]"]},size:{md:["h-16"],lg:["h-24"]},diffused:{true:["supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]","supports-color-mix:backdrop-blur-sm"]},appearance:{standard:["w-screen","max-w-full","top-0","border-b","border-b-(--border-bottom)"],rounded:["w-full","top-2","p-2","border","border-white","rounded-full"]}}},{enabledResponsiveVariants:!0}),w=r(c,{base:["items-center","h-10","mx-4","w-full","md:mx-8"]}),o=({size:a="md",diffused:t,theme:i,appearance:s="standard",...d})=>{const{y:n}=p();return e.createElement(m,{theme:i||b.light},e.createElement(g,{hasScrolled:!!n,diffused:t,appearance:s,size:a},e.createElement(w,{...d})))},T=Object.assign(o,{Brand:u,BrandLogo:h,BrandName:x,ActionIcon:f,Divider:B});o.displayName="TopBar";export{T as TopBar};
|
|
2
2
|
//# sourceMappingURL=TopBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TopBar.js","sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, Theme } from '~/styled'\nimport { useWindowScrollPosition } from '~/utilities/hooks/useWindowScrollPosition'\n\nimport { Divider } from '../divider'\nimport { Flex } from '../flex'\nimport { colorSchemes as topBarColorSchemes } from './TopBar.colorscheme.config'\nimport { TopBarActionIcon } from './TopBarActionIcon'\nimport { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from './TopBarBrand'\n\nconst TopBarDivider = () => (\n <Divider orientation=\"vertical\" className=\"bg-divider h-6\" />\n)\n\nconst StyledRoot = styled(\n 'div',\n {\n base: [\n 'bg-(--background)',\n 'sticky',\n 'flex',\n 'items-center',\n 'z-
|
|
1
|
+
{"version":3,"file":"TopBar.js","sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled, Theme } from '~/styled'\nimport { useWindowScrollPosition } from '~/utilities/hooks/useWindowScrollPosition'\n\nimport { Divider } from '../divider'\nimport { Flex } from '../flex'\nimport { colorSchemes as topBarColorSchemes } from './TopBar.colorscheme.config'\nimport { TopBarActionIcon } from './TopBarActionIcon'\nimport { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from './TopBarBrand'\n\nconst TopBarDivider = () => (\n <Divider orientation=\"vertical\" className=\"bg-divider h-6\" />\n)\n\nconst StyledRoot = styled(\n 'div',\n {\n base: [\n 'bg-(--background)',\n 'sticky',\n 'flex',\n 'items-center',\n 'z-15',\n 'transition-shadow',\n 'duration-200',\n 'ease-out'\n ],\n variants: {\n hasScrolled: {\n true: ['shadow-[0px_4px_4px_-2px_rgba(31,31,31,0.1)]']\n },\n size: {\n md: ['h-16'],\n lg: ['h-24']\n },\n diffused: {\n true: [\n 'supports-color-mix:bg-[color-mix(in_hsl,(--base-1)_70%,transparent)]',\n 'supports-color-mix:backdrop-blur-sm'\n ]\n },\n appearance: {\n standard: [\n 'w-screen',\n 'max-w-full',\n 'top-0',\n 'border-b',\n 'border-b-(--border-bottom)'\n ],\n rounded: [\n 'w-full',\n 'top-2',\n 'p-2',\n 'border',\n 'border-white',\n 'rounded-full'\n ]\n }\n }\n },\n {\n enabledResponsiveVariants: true\n }\n)\n\nconst Container = styled(Flex, {\n base: ['items-center', 'h-10', 'mx-4', 'w-full', 'md:mx-8']\n})\n\ntype StyledRootProps = React.ComponentProps<typeof StyledRoot>\n\ntype TopBarProps = StyledRootProps & React.ComponentProps<typeof Theme>\n\nconst TopBarComponent = ({\n size = 'md',\n diffused,\n theme,\n appearance = 'standard',\n ...props\n}: React.PropsWithChildren<TopBarProps>) => {\n const { y: scrollPositionY } = useWindowScrollPosition()\n\n return (\n <Theme theme={theme || topBarColorSchemes['light']}>\n <StyledRoot\n hasScrolled={!!scrollPositionY}\n diffused={diffused}\n appearance={appearance}\n size={size}\n >\n <Container {...props} />\n </StyledRoot>\n </Theme>\n )\n}\n\nexport const TopBar = Object.assign(TopBarComponent, {\n Brand: TopBarBrand,\n BrandLogo: TopBarBrandLogo,\n BrandName: TopBarBrandName,\n ActionIcon: TopBarActionIcon,\n Divider: TopBarDivider\n})\n\nTopBarComponent.displayName = 'TopBar'\n"],"names":["TopBarDivider","React","Divider","StyledRoot","styled","Container","Flex","TopBarComponent","size","diffused","theme","appearance","props","scrollPositionY","useWindowScrollPosition","Theme","topBarColorSchemes","TopBar","TopBarBrand","TopBarBrandLogo","TopBarBrandName","TopBarActionIcon"],"mappings":"8cAWA,MAAMA,EAAgB,IACpBC,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,UAAU,gBAAA,CAAiB,EAGvDC,EAAaC,EACjB,MACA,CACE,KAAM,CACJ,oBACA,SACA,OACA,eACA,OACA,oBACA,eACA,UACF,EACA,SAAU,CACR,YAAa,CACX,KAAM,CAAC,8CAA8C,CACvD,EACA,KAAM,CACJ,GAAI,CAAC,MAAM,EACX,GAAI,CAAC,MAAM,CACb,EACA,SAAU,CACR,KAAM,CACJ,uEACA,qCACF,CACF,EACA,WAAY,CACV,SAAU,CACR,WACA,aACA,QACA,WACA,4BACF,EACA,QAAS,CACP,SACA,QACA,MACA,SACA,eACA,cACF,CACF,CACF,CACF,EACA,CACE,0BAA2B,EAC7B,CACF,EAEMC,EAAYD,EAAOE,EAAM,CAC7B,KAAM,CAAC,eAAgB,OAAQ,OAAQ,SAAU,SAAS,CAC5D,CAAC,EAMKC,EAAkB,CAAC,CACvB,KAAAC,EAAO,KACP,SAAAC,EACA,MAAAC,EACA,WAAAC,EAAa,WACb,GAAGC,CACL,IAA4C,CAC1C,KAAM,CAAE,EAAGC,CAAgB,EAAIC,EAE/B,EAAA,OACEb,EAAA,cAACc,EAAA,CAAM,MAAOL,GAASM,EAAmB,KACxCf,EAAAA,EAAA,cAACE,EAAA,CACC,YAAa,CAAC,CAACU,EACf,SAAUJ,EACV,WAAYE,EACZ,KAAMH,CAAAA,EAENP,EAAA,cAACI,EAAA,CAAW,GAAGO,CAAO,CAAA,CACxB,CACF,CAEJ,EAEaK,EAAS,OAAO,OAAOV,EAAiB,CACnD,MAAOW,EACP,UAAWC,EACX,UAAWC,EACX,WAAYC,EACZ,QAASrB,CACX,CAAC,EAEDO,EAAgB,YAAc"}
|