@atom-learning/components 4.0.0-beta.8 → 4.0.0

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalText.js

@@ -1,2 +1,2 @@
-import o from"react";import{Text as i}from"../text/Text.js";import{styled as n}from"../../stitches.js";import"../side-bar/SideBar.js";import{useSidebarState as r}from"../side-bar/SideBarContext.js";const a="10rem",s=n.withConfig({shouldForwardStitchesProp:t=>["as"].includes(t)})(i,{fontWeight:"var(--navigation-menu-vertical-item-font-weight)",lineHeight:1.2,variants:{isExpanded:{true:{width:"max-content",maxWidth:a,"@allowMotion":{opacity:1,transform:"translate(0)",transition:"opacity 125ms ease-out, transform 125ms ease-out"}},false:{"@allowMotion":{width:"max-content",maxWidth:a,opacity:0,transform:"translate(8px)",transition:"opacity 125ms ease-out, transform 0ms ease-out 125ms"}}}}}),m=t=>{const{isExpanded:e}=r();return o.createElement(s,{size:"md",as:"span",...t,isExpanded:e})};export{m as NavigationMenuVerticalText};
+import a from"react";import{Text as o}from"../text/Text.js";import{styled as i}from"../../stitches.js";import"../side-bar/SideBar.js";import{useSidebarState as r}from"../side-bar/SideBarContext.js";const s="10rem",n=i.withConfig({shouldForwardStitchesProp:t=>["as"].includes(t)})(o,{fontWeight:"var(--navigation-menu-vertical-item-font-weight)",lineHeight:1.2,width:"max-content",maxWidth:s,variants:{isExpanded:{true:{opacity:1,"@allowMotion":{transform:"translate(0)",transition:"opacity 125ms ease-out, transform 125ms ease-out"}},false:{opacity:0,"@allowMotion":{transform:"translate(8px)",transition:"opacity 125ms ease-out, transform 0ms ease-out 125ms"}}}}}),m=t=>{const{isExpanded:e}=r();return a.createElement(n,{size:"md",as:"span",...t,isExpanded:e})};export{m as NavigationMenuVerticalText};
 //# sourceMappingURL=NavigationMenuVerticalText.js.map

package/dist/components/navigation-menu-vertical/NavigationMenuVerticalText.js.map

@@ -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 '~/stitches'\n\nimport { useSidebarState } from '../side-bar'\n\nconst SIZE_EXPANDED_MAX = '10rem'\n\nconst StyledNavigationMenuVerticalText = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Text, {\n  fontWeight: 'var(--navigation-menu-vertical-item-font-weight)',\n  lineHeight: 1.2,\n  variants: {\n    isExpanded: {\n      true: {\n        width: 'max-content',\n        maxWidth: SIZE_EXPANDED_MAX,\n        '@allowMotion': {\n          opacity: 1,\n          transform: 'translate(0)',\n          transition: 'opacity 125ms ease-out, transform 125ms ease-out'\n        }\n      },\n      false: {\n        '@allowMotion': {\n          width: 'max-content',\n          maxWidth: SIZE_EXPANDED_MAX,\n          opacity: 0,\n          transform: 'translate(8px)',\n          transition: 'opacity 125ms ease-out, transform 0ms ease-out 125ms'\n        }\n      }\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  return (\n    <StyledNavigationMenuVerticalText\n      size=\"md\"\n      as=\"span\"\n      {...props}\n      isExpanded={isExpanded}\n    />\n  )\n}\n"],"names":["SIZE_EXPANDED_MAX","StyledNavigationMenuVerticalText","styled","propName","Text","NavigationMenuVerticalText","props","isExpanded","useSidebarState","React"],"mappings":"sMAOA,MAAMA,EAAoB,QAEpBC,EAAmCC,EAAO,WAAW,CACzD,0BAA4BC,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAM,CACP,WAAY,mDACZ,WAAY,IACZ,SAAU,CACR,WAAY,CACV,KAAM,CACJ,MAAO,cACP,SAAUJ,EACV,eAAgB,CACd,QAAS,EACT,UAAW,eACX,WAAY,kDACd,CACF,EACA,MAAO,CACL,eAAgB,CACd,MAAO,cACP,SAAUA,EACV,QAAS,EACT,UAAW,iBACX,WAAY,sDACd,CACF,CACF,CACF,CACF,CAAC,EAMYK,EACXC,GACgB,CAChB,KAAM,CAAE,WAAAC,CAAW,EAAIC,EAAAA,EACvB,OACEC,EAAA,cAACR,EAAA,CACC,KAAK,KACL,GAAG,OACF,GAAGK,EACJ,WAAYC,CAAAA,CACd,CAEJ"}
+{"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 '~/stitches'\n\nimport { useSidebarState } from '../side-bar'\n\nconst SIZE_EXPANDED_MAX = '10rem'\n\nconst StyledNavigationMenuVerticalText = styled.withConfig({\n  shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Text, {\n  fontWeight: 'var(--navigation-menu-vertical-item-font-weight)',\n  lineHeight: 1.2,\n  width: 'max-content',\n  maxWidth: SIZE_EXPANDED_MAX,\n  variants: {\n    isExpanded: {\n      true: {\n        opacity: 1,\n        '@allowMotion': {\n          transform: 'translate(0)',\n          transition: 'opacity 125ms ease-out, transform 125ms ease-out'\n        }\n      },\n      false: {\n        opacity: 0,\n        '@allowMotion': {\n          transform: 'translate(8px)',\n          transition: 'opacity 125ms ease-out, transform 0ms ease-out 125ms'\n        }\n      }\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  return (\n    <StyledNavigationMenuVerticalText\n      size=\"md\"\n      as=\"span\"\n      {...props}\n      isExpanded={isExpanded}\n    />\n  )\n}\n"],"names":["SIZE_EXPANDED_MAX","StyledNavigationMenuVerticalText","styled","propName","Text","NavigationMenuVerticalText","props","isExpanded","useSidebarState","React"],"mappings":"sMAOA,MAAMA,EAAoB,QAEpBC,EAAmCC,EAAO,WAAW,CACzD,0BAA4BC,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAM,CACP,WAAY,mDACZ,WAAY,IACZ,MAAO,cACP,SAAUJ,EACV,SAAU,CACR,WAAY,CACV,KAAM,CACJ,QAAS,EACT,eAAgB,CACd,UAAW,eACX,WAAY,kDACd,CACF,EACA,MAAO,CACL,QAAS,EACT,eAAgB,CACd,UAAW,iBACX,WAAY,sDACd,CACF,CACF,CACF,CACF,CAAC,EAMYK,EACXC,GACgB,CAChB,KAAM,CAAE,WAAAC,CAAW,EAAIC,EAAgB,EACvC,OACEC,EAAA,cAACR,EAAA,CACC,KAAK,KACL,GAAG,OACF,GAAGK,EACJ,WAAYC,CAAAA,CACd,CAEJ"}

package/dist/components/notification-badge/NotificationBadge.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type NotificationBadgeProps = {
+type NotificationBadgeProps = {
     value: number | string;
 };
 export declare const NotificationBadge: ({ value, children }: React.PropsWithChildren<NotificationBadgeProps>) => React.JSX.Element;

package/dist/components/number-input/NumberInputStepper.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ActionIcon } from '../action-icon';
-declare type NumberInputStepperProps = Omit<React.ComponentProps<typeof ActionIcon>, 'children'> & {
+type NumberInputStepperProps = Omit<React.ComponentProps<typeof ActionIcon>, 'children'> & {
     icon: React.FC<React.SVGProps<SVGSVGElement>>;
     showTooltip?: boolean;
     disabledTooltipContent?: string;

package/dist/components/number-input/NumberInputStepper.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as t}from"../../stitches.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import{Icon as m}from"../icon/Icon.js";import{Tooltip as o}from"../tooltip/Tooltip.js";const s=t("span",{zIndex:1}),d=t(c,{borderColor:"$tonal400 !important",zIndex:1,height:"100% !important","&:hover":{bg:"$tonal50",svg:{color:"$tonal400"}},svg:{color:"$tonal300"},"&:active":{bg:"$tonal100",svg:{color:"$tonal500"}},"&:disabled":{opacity:.3,pointerEvents:"none"}}),b=e.forwardRef((n,r)=>{const{icon:l,disabledTooltipContent:a,showTooltip:i,...p}=n;return e.createElement(o,null,e.createElement(o.Trigger,{asChild:!0},e.createElement(s,{tabIndex:-1},e.createElement(d,{hasTooltip:!1,tabIndex:-1,appearance:"outline",ref:r,...p},e.createElement(m,{is:l})))),i&&e.createElement(o.Content,null,a))});export{b as NumberInputStepper};
+import*as e from"react";import{styled as t}from"../../stitches.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import{Icon as m}from"../icon/Icon.js";import{Tooltip as o}from"../tooltip/Tooltip.js";const s=t("span",{zIndex:1}),g=t(c,{borderColor:"$grey800 !important",zIndex:1,height:"100% !important","&:hover":{bg:"$grey100",svg:{color:"$grey800"}},svg:{color:"$grey700"},"&:active":{bg:"$grey200",svg:{color:"$grey900"}},"&:disabled":{opacity:.3,pointerEvents:"none"}}),d=e.forwardRef((r,n)=>{const{icon:i,disabledTooltipContent:l,showTooltip:a,...p}=r;return e.createElement(o,null,e.createElement(o.Trigger,{asChild:!0},e.createElement(s,{tabIndex:-1},e.createElement(g,{hasTooltip:!1,tabIndex:-1,appearance:"outline",ref:n,...p},e.createElement(m,{is:i})))),a&&e.createElement(o.Content,null,l))});export{d as NumberInputStepper};
 //# sourceMappingURL=NumberInputStepper.js.map

package/dist/components/number-input/NumberInputStepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInputStepper.js","sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { Tooltip } from '../tooltip'\n\nconst StyledSpan = styled('span', { zIndex: 1 })\n\nconst StyledStepperButton = styled(ActionIcon, {\n  borderColor: '$tonal400 !important',\n  zIndex: 1,\n  height: '100% !important',\n  '&:hover': {\n    bg: '$tonal50',\n    svg: {\n      color: '$tonal400'\n    }\n  },\n  svg: {\n    color: '$tonal300'\n  },\n  '&:active': {\n    bg: '$tonal100',\n    svg: {\n      color: '$tonal500'\n    }\n  },\n  '&:disabled': {\n    opacity: 0.3,\n    pointerEvents: 'none'\n  }\n})\n\ntype NumberInputStepperProps = Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'children'\n> & {\n  icon: React.FC<React.SVGProps<SVGSVGElement>>\n  showTooltip?: boolean\n  disabledTooltipContent?: string\n}\n\nexport const NumberInputStepper: React.ForwardRefExoticComponent<NumberInputStepperProps> =\n  React.forwardRef((props, forwardedRef) => {\n    const { icon, disabledTooltipContent, showTooltip, ...rest } = props\n\n    /**\n     * Focus has been removed from the button\n     * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n     * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n     */\n    return (\n      <Tooltip>\n        <Tooltip.Trigger asChild>\n          <StyledSpan tabIndex={-1}>\n            <StyledStepperButton\n              hasTooltip={false}\n              tabIndex={-1}\n              appearance=\"outline\"\n              ref={forwardedRef}\n              {...rest}\n            >\n              <Icon is={icon} />\n            </StyledStepperButton>\n          </StyledSpan>\n        </Tooltip.Trigger>\n        {showTooltip && (\n          <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n        )}\n      </Tooltip>\n    )\n  })\n"],"names":["StyledSpan","styled","StyledStepperButton","ActionIcon","NumberInputStepper","React","props","forwardedRef","icon","disabledTooltipContent","showTooltip","rest","Tooltip","Icon"],"mappings":"oNAQA,MAAMA,EAAaC,EAAO,OAAQ,CAAE,OAAQ,CAAE,CAAC,EAEzCC,EAAsBD,EAAOE,EAAY,CAC7C,YAAa,uBACb,OAAQ,EACR,OAAQ,kBACR,UAAW,CACT,GAAI,WACJ,IAAK,CACH,MAAO,WACT,CACF,EACA,IAAK,CACH,MAAO,WACT,EACA,WAAY,CACV,GAAI,YACJ,IAAK,CACH,MAAO,WACT,CACF,EACA,aAAc,CACZ,QAAS,GACT,cAAe,MACjB,CACF,CAAC,EAWYC,EACXC,EAAM,WAAW,CAACC,EAAOC,IAAiB,CACxC,KAAM,CAAE,KAAAC,EAAM,uBAAAC,EAAwB,YAAAC,KAAgBC,CAAK,EAAIL,EAO/D,OACED,EAAA,cAACO,EAAA,KACCP,EAAA,cAACO,EAAQ,QAAR,CAAgB,QAAO,EACtBP,EAAAA,EAAA,cAACL,EAAA,CAAW,SAAU,EAAA,EACpBK,EAAA,cAACH,EAAA,CACC,WAAY,GACZ,SAAU,GACV,WAAW,UACX,IAAKK,EACJ,GAAGI,GAEJN,EAAA,cAACQ,EAAA,CAAK,GAAIL,CAAAA,CAAM,CAClB,CACF,CACF,EACCE,GACCL,EAAA,cAACO,EAAQ,QAAR,KAAiBH,CAAuB,CAE7C,CAEJ,CAAC"}
+{"version":3,"file":"NumberInputStepper.js","sources":["../../../src/components/number-input/NumberInputStepper.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { ActionIcon } from '../action-icon'\nimport { Icon } from '../icon'\nimport { Tooltip } from '../tooltip'\n\nconst StyledSpan = styled('span', { zIndex: 1 })\n\nconst StyledStepperButton = styled(ActionIcon, {\n  borderColor: '$grey800 !important',\n  zIndex: 1,\n  height: '100% !important',\n  '&:hover': {\n    bg: '$grey100',\n    svg: {\n      color: '$grey800'\n    }\n  },\n  svg: {\n    color: '$grey700'\n  },\n  '&:active': {\n    bg: '$grey200',\n    svg: {\n      color: '$grey900'\n    }\n  },\n  '&:disabled': {\n    opacity: 0.3,\n    pointerEvents: 'none'\n  }\n})\n\ntype NumberInputStepperProps = Omit<\n  React.ComponentProps<typeof ActionIcon>,\n  'children'\n> & {\n  icon: React.FC<React.SVGProps<SVGSVGElement>>\n  showTooltip?: boolean\n  disabledTooltipContent?: string\n}\n\nexport const NumberInputStepper: React.ForwardRefExoticComponent<NumberInputStepperProps> =\n  React.forwardRef((props, forwardedRef) => {\n    const { icon, disabledTooltipContent, showTooltip, ...rest } = props\n\n    /**\n     * Focus has been removed from the button\n     * as the increment and decrement buttons should be keyboard accessible via arrow keys.\n     * see MDN docs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role\n     */\n    return (\n      <Tooltip>\n        <Tooltip.Trigger asChild>\n          <StyledSpan tabIndex={-1}>\n            <StyledStepperButton\n              hasTooltip={false}\n              tabIndex={-1}\n              appearance=\"outline\"\n              ref={forwardedRef}\n              {...rest}\n            >\n              <Icon is={icon} />\n            </StyledStepperButton>\n          </StyledSpan>\n        </Tooltip.Trigger>\n        {showTooltip && (\n          <Tooltip.Content>{disabledTooltipContent}</Tooltip.Content>\n        )}\n      </Tooltip>\n    )\n  })\n"],"names":["StyledSpan","styled","StyledStepperButton","ActionIcon","NumberInputStepper","React","props","forwardedRef","icon","disabledTooltipContent","showTooltip","rest","Tooltip","Icon"],"mappings":"oNAQA,MAAMA,EAAaC,EAAO,OAAQ,CAAE,OAAQ,CAAE,CAAC,EAEzCC,EAAsBD,EAAOE,EAAY,CAC7C,YAAa,sBACb,OAAQ,EACR,OAAQ,kBACR,UAAW,CACT,GAAI,WACJ,IAAK,CACH,MAAO,UACT,CACF,EACA,IAAK,CACH,MAAO,UACT,EACA,WAAY,CACV,GAAI,WACJ,IAAK,CACH,MAAO,UACT,CACF,EACA,aAAc,CACZ,QAAS,GACT,cAAe,MACjB,CACF,CAAC,EAWYC,EACXC,EAAM,WAAW,CAACC,EAAOC,IAAiB,CACxC,KAAM,CAAE,KAAAC,EAAM,uBAAAC,EAAwB,YAAAC,KAAgBC,CAAK,EAAIL,EAO/D,OACED,EAAA,cAACO,EAAA,KACCP,EAAA,cAACO,EAAQ,QAAR,CAAgB,QAAO,EACtBP,EAAAA,EAAA,cAACL,EAAA,CAAW,SAAU,EAAA,EACpBK,EAAA,cAACH,EAAA,CACC,WAAY,GACZ,SAAU,GACV,WAAW,UACX,IAAKK,EACJ,GAAGI,GAEJN,EAAA,cAACQ,EAAA,CAAK,GAAIL,CAAAA,CAAM,CAClB,CACF,CACF,EACCE,GACCL,EAAA,cAACO,EAAQ,QAAR,KAAiBH,CAAuB,CAE7C,CAEJ,CAAC"}

package/dist/components/pagination/Pagination.d.ts

@@ -4,7 +4,5 @@ export declare const Pagination: {
     ({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount, pagesCount, indicatedPages, disabledPages, onItemHover, labels, children, ...rest }: PaginationProps): React.JSX.Element | null;
     displayName: string;
 } & {
-    Popover: ({ children }: {
-        children?: React.ReactNode;
-    }) => React.JSX.Element;
+    Popover: ({ children }: React.PropsWithChildren<unknown>) => React.JSX.Element;
 };

package/dist/components/pagination/PaginationItems.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const PaginationItems: () => JSX.Element;