@atom-learning/components 6.0.0-beta.1 → 6.0.0-beta.10

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

@@ -1,2 +1,2 @@
-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};
+import a 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"]}}}),s=t=>{const{isExpanded:e}=n();return a.createElement(r,{size:"md",as:"span",...t,isExpanded:e})};export{s 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  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"}
+{"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'] // triggered when isExpanded is undefined as well\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":["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,CAEjD,CACF,CACF,CAAC,EAMYC,EACXC,GACgB,CAChB,KAAM,CAAE,WAAAC,CAAW,EAAIC,EACvB,EAAA,OACEC,EAAA,cAACP,EAAA,CACC,KAAK,KACL,GAAG,OACF,GAAGI,EACJ,WAAYC,EACd,CAEJ"}

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

@@ -1,6 +1,11 @@
 import React from 'react';
+import { Badge } from '../badge';
+type BadgeProps = React.ComponentProps<typeof Badge>;
 type NotificationBadgeProps = {
     value: number | string;
+    emphasis?: BadgeProps['emphasis'];
+    theme?: BadgeProps['theme'];
+    icon?: React.FC<React.SVGProps<SVGSVGElement>>;
 };
-export declare const NotificationBadge: ({ value, children }: React.PropsWithChildren<NotificationBadgeProps>) => React.JSX.Element;
+export declare const NotificationBadge: ({ value, emphasis, theme, icon, children }: React.PropsWithChildren<NotificationBadgeProps>) => React.JSX.Element;
 export {};

package/dist/components/notification-badge/NotificationBadge.js

@@ -1,2 +1,2 @@
-import e from"react";import{styled as o}from"../../stitches.js";import{Box as i}from"../box/Box.js";import{Flex as n}from"../flex/Flex.js";const l=o(i,{position:"relative"}),a=o(n,{fontFamily:"$body",fontSize:"$sm",flexDirection:"column",justifyContent:"center",position:"absolute",top:"0",right:"0",transform:"translate(calc($sizes$2 / 2), -50%)",borderRadius:"$round",p:"$2",height:"$2",minWidth:"$2",textAlign:"center",color:"#fff",bg:"$primary800"}),m=({value:t,children:r})=>e.createElement(l,null,!!t&&e.createElement(a,{role:"status"},t),r);export{m as NotificationBadge};
+import e from"react";import{styled as o}from"../../styled.js";import{Badge as n}from"../badge/Badge.js";import{Icon as l}from"../icon/Icon.js";const s=o("div",{base:["relative"]}),d=o(n,{base:["font-body","text-sm","flex-row","justify-center","absolute","top-0","right-0","translate-x-3","-translate-y-1/2","rounded-round","h-6","min-w-6","text-center"]}),c=({value:t,emphasis:a="bold",theme:i="primary",icon:r,children:m})=>e.createElement(s,null,!!t&&e.createElement(d,{role:"status",emphasis:a,theme:i},r&&e.createElement(l,{is:r,role:"img","aria-hidden":"false"}),t),m);export{c as NotificationBadge};
 //# sourceMappingURL=NotificationBadge.js.map

package/dist/components/notification-badge/NotificationBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationBadge.js","sources":["../../../src/components/notification-badge/NotificationBadge.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Box } from '../box'\nimport { Flex } from '../flex'\n\nconst StyledWrapper = styled(Box, {\n  position: 'relative'\n})\n\nconst StyledBadge = styled(Flex, {\n  fontFamily: '$body',\n  fontSize: '$sm',\n  flexDirection: 'column',\n  justifyContent: 'center',\n  position: 'absolute',\n  top: '0',\n  right: '0',\n  transform: 'translate(calc($sizes$2 / 2), -50%)',\n  borderRadius: '$round',\n  p: '$2',\n  height: '$2',\n  minWidth: '$2',\n  textAlign: 'center',\n  color: '#fff',\n  bg: '$primary800'\n})\n\ntype NotificationBadgeProps = {\n  value: number | string\n}\n\nexport const NotificationBadge = ({\n  value,\n  children\n}: React.PropsWithChildren<NotificationBadgeProps>) => (\n  <StyledWrapper>\n    {!!value && <StyledBadge role=\"status\">{value}</StyledBadge>}\n    {children}\n  </StyledWrapper>\n)\n"],"names":["StyledWrapper","styled","Box","StyledBadge","Flex","NotificationBadge","value","children","React"],"mappings":"2IAOA,MAAMA,EAAgBC,EAAOC,EAAK,CAChC,SAAU,UACZ,CAAC,EAEKC,EAAcF,EAAOG,EAAM,CAC/B,WAAY,QACZ,SAAU,MACV,cAAe,SACf,eAAgB,SAChB,SAAU,WACV,IAAK,IACL,MAAO,IACP,UAAW,sCACX,aAAc,SACd,EAAG,KACH,OAAQ,KACR,SAAU,KACV,UAAW,SACX,MAAO,OACP,GAAI,aACN,CAAC,EAMYC,EAAoB,CAAC,CAChC,MAAAC,EACA,SAAAC,CACF,IACEC,EAAA,cAACR,EAAA,KACE,CAAC,CAACM,GAASE,EAAA,cAACL,EAAA,CAAY,KAAK,QAAUG,EAAAA,CAAM,EAC7CC,CACH"}
+{"version":3,"file":"NotificationBadge.js","sources":["../../../src/components/notification-badge/NotificationBadge.tsx"],"sourcesContent":["import React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { Badge } from '../badge'\nimport { Icon } from '../icon'\n\nconst StyledWrapper = styled('div', {\n  base: ['relative']\n})\n\nconst StyledBadge = styled(Badge, {\n  base: [\n    'font-body',\n    'text-sm',\n    'flex-row',\n    'justify-center',\n    'absolute',\n    'top-0',\n    'right-0',\n    'translate-x-3',\n    '-translate-y-1/2',\n    'rounded-round',\n    'h-6',\n    'min-w-6',\n    'text-center'\n  ]\n})\n\ntype BadgeProps = React.ComponentProps<typeof Badge>\n\ntype NotificationBadgeProps = {\n  value: number | string\n  emphasis?: BadgeProps['emphasis']\n  theme?: BadgeProps['theme']\n  icon?: React.FC<React.SVGProps<SVGSVGElement>>\n}\n\nexport const NotificationBadge = ({\n  value,\n  emphasis = 'bold',\n  theme = 'primary',\n  icon,\n  children\n}: React.PropsWithChildren<NotificationBadgeProps>) => (\n  <StyledWrapper>\n    {!!value && (\n      <StyledBadge role=\"status\" emphasis={emphasis} theme={theme}>\n        {icon && <Icon is={icon} role=\"img\" aria-hidden=\"false\" />}\n        {value}\n      </StyledBadge>\n    )}\n    {children}\n  </StyledWrapper>\n)\n"],"names":["StyledWrapper","styled","StyledBadge","Badge","NotificationBadge","value","emphasis","theme","icon","children","React","Icon"],"mappings":"+IAOA,MAAMA,EAAgBC,EAAO,MAAO,CAClC,KAAM,CAAC,UAAU,CACnB,CAAC,EAEKC,EAAcD,EAAOE,EAAO,CAChC,KAAM,CACJ,YACA,UACA,WACA,iBACA,WACA,QACA,UACA,gBACA,mBACA,gBACA,MACA,UACA,aACF,CACF,CAAC,EAWYC,EAAoB,CAAC,CAChC,MAAAC,EACA,SAAAC,EAAW,OACX,MAAAC,EAAQ,UACR,KAAAC,EACA,SAAAC,CACF,IACEC,EAAA,cAACV,EAAA,KACE,CAAC,CAACK,GACDK,EAAA,cAACR,EAAA,CAAY,KAAK,SAAS,SAAUI,EAAU,MAAOC,CAAAA,EACnDC,GAAQE,EAAA,cAACC,EAAA,CAAK,GAAIH,EAAM,KAAK,MAAM,cAAY,OAAQ,CAAA,EACvDH,CACH,EAEDI,CACH"}

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { type CSS } from '../../stitches';
 export interface NumberInputProps {
     name: string;
     min?: number;
@@ -20,8 +19,6 @@ export interface NumberInputProps {
         increment?: string;
         decrement?: string;
     };
-    css?: CSS;
+    className?: string;
 }
-export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & {
-    ref: React.Ref<HTMLInputElement>;
-}>;
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -1,2 +1,2 @@
-import{Minus as F,Plus as H}from"@atom-learning/icons";import*as r from"react";import{styled as $}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{getFieldIconSize as V}from"../../utilities/style/get-icon-size.js";import{Flex as X}from"../flex/Flex.js";import{Input as _}from"../input/Input.js";import{NumberInputStepper as k}from"./NumberInputStepper.js";const G=$(X,{variants:{appearance:{standard:{},modern:{gap:"1px"}}}}),N=r.forwardRef(({value:u,defaultValue:T=0,onValueChange:w,min:n=0,max:o=Number.MAX_SAFE_INTEGER,step:m=1,disabled:s=!1,readonly:p=!1,size:x="md",stepperButtonLabels:A,disabledTooltipContent:I,css:M,appearance:d="standard",...z},L)=>{const[a,E]=r.useState(u||T);r.useEffect(()=>{typeof u<"u"&&E(u)},[u]);const l=r.useRef(null);r.useImperativeHandle(L,()=>l.current);const R=r.useMemo(()=>V(x),[x]),h={increment:"increment",decrement:"decrement",...A},y={decrement:`Cannot enter values below ${n}`,increment:`Cannot enter values above ${o}`,...I},c=a>=o,b=a<=n,f=r.useCallback(e=>Math.min(Math.max(e,n),o),[o,n]),t=r.useCallback(e=>{w==null||w(e),E(e)},[w]),B=r.useCallback(e=>{const i=Number(e.target.value.replace(/\D/g,""));t(i)},[t]),v=r.useCallback(()=>{var e;if(c||p)return;(e=l==null?void 0:l.current)==null||e.focus();const i=Number(a)+m;t(f(i))},[f,c,p,m,t,a]),C=r.useCallback(()=>{var e;if(b||p)return;(e=l==null?void 0:l.current)==null||e.focus();const i=Number(a)-m;t(f(i))},[f,b,p,n,m,t,a]),D=r.useCallback(e=>{if(e.nativeEvent.isComposing)return;const i=e.key,g={ArrowUp:v,ArrowRight:v,ArrowDown:C,ArrowLeft:C,Home:()=>t(n),End:()=>t(o)}[i];g&&(e.preventDefault(),g(e))},[v,C,t,n,o]),S={type:"number",value:a,...z,onChange:B,onKeyDown:D,size:x,appearance:d,css:{borderRadius:"0px",width:"$6","&:disabled":{opacity:.3,pointerEvents:"none"}},ref:l,readOnly:p,disabled:s,"aria-valuemin":n,"aria-valuemax":o,"aria-valuenow":a,role:"spinbutton"};return r.createElement(G,{appearance:d,css:M},r.createElement(k,{onClick:C,icon:F,css:{borderRight:"none",borderTopRightRadius:"0px",borderBottomRightRadius:"0px"},size:R,fieldAppearance:d,disabled:b||s,showTooltip:b&&!s,disabledTooltipContent:y.decrement,label:h.decrement}),r.createElement(_,{...S}),r.createElement(k,{onClick:v,icon:H,css:{borderLeft:"none",borderTopLeftRadius:"0px",borderBottomLeftRadius:"0px"},size:R,fieldAppearance:d,disabled:c||s,showTooltip:c&&!s,disabledTooltipContent:y.increment,label:h.increment}))});N.displayName="NumberInput";export{N as NumberInput};
+import{Minus as H,Plus as K}from"@atom-learning/icons";import L from"clsx";import*as n from"react";import{styled as V}from"../../styled.js";import"../../utilities/css-wrapper/CSSWrapper.js";import{getFieldIconSize as _}from"../../utilities/style/get-icon-size.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import{Flex as B}from"../flex/Flex.js";import{Input as O}from"../input/Input.js";import{NumberInputStepper as A}from"./NumberInputStepper.js";const P=V(B,{base:[],variants:{appearance:{standard:[],modern:["gap-px"]}}}),I=n.forwardRef(({value:u,defaultValue:x=0,onValueChange:N,min:r=0,max:o=Number.MAX_SAFE_INTEGER,step:c=1,disabled:i=!1,readonly:m=!1,size:w="md",stepperButtonLabels:M,disabledTooltipContent:T,className:z,appearance:d="standard",...D},R)=>{const[t,E]=n.useState(u||x);n.useEffect(()=>{typeof u<"u"&&E(u)},[u]);const s=n.useRef(null);n.useImperativeHandle(R,()=>s.current);const y=n.useMemo(()=>_(w),[w]),g={increment:"increment",decrement:"decrement",...M},k={decrement:"Cannot enter values below ".concat(r),increment:"Cannot enter values above ".concat(o),...T},p=t>=o,b=t<=r,f=n.useCallback(e=>Math.min(Math.max(e,r),o),[o,r]),a=n.useCallback(e=>{N==null||N(e),E(e)},[N]),S=n.useCallback(e=>{const l=Number(e.target.value.replace(/\D/g,""));a(l)},[a]),v=n.useCallback(()=>{var e;if(p||m)return;(e=s==null?void 0:s.current)==null||e.focus();const l=Number(t)+c;a(f(l))},[f,p,m,c,a,t]),C=n.useCallback(()=>{var e;if(b||m)return;(e=s==null?void 0:s.current)==null||e.focus();const l=Number(t)-c;a(f(l))},[f,b,m,r,c,a,t]),F=n.useCallback(e=>{if(e.nativeEvent.isComposing)return;const l=e.key,h={ArrowUp:v,ArrowRight:v,ArrowDown:C,ArrowLeft:C,Home:()=>a(r),End:()=>a(o)}[l];h&&(e.preventDefault(),h(e))},[v,C,a,r,o]),G={type:"number",value:t,...D,onChange:S,onKeyDown:F,size:w,appearance:d,className:L("rounded-none","w-16","disabled:opacity-30","disabled:pointer-events-none"),ref:s,readOnly:m,disabled:i,"aria-valuemin":r,"aria-valuemax":o,"aria-valuenow":t,role:"spinbutton"};return n.createElement(P,{appearance:d,className:z},n.createElement(A,{onClick:C,icon:H,size:y,fieldAppearance:d,disabled:b||i,showTooltip:b&&!i,disabledTooltipContent:k.decrement,label:g.decrement,className:"border-r-none rounded-r-none"}),n.createElement(O,{...G}),n.createElement(A,{onClick:v,icon:K,size:y,fieldAppearance:d,disabled:p||i,showTooltip:p&&!i,disabledTooltipContent:k.increment,label:g.increment,className:"border-l-none rounded-l-none"}))});I.displayName="NumberInput";export{I as NumberInput};
 //# sourceMappingURL=NumberInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled, type CSS } from '~/stitches'\nimport { getFieldIconSize } from '~/utilities'\n\nimport { Flex } from '../flex'\nimport { Input } from '../input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n  name: string\n  min?: number\n  max?: number\n  step?: number\n  value?: number\n  defaultValue?: number\n  disabled?: boolean\n  readonly?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  appearance?: 'standard' | 'modern'\n  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  css?: CSS\n}\n\nconst NumberInputContainer = styled(Flex, {\n  variants: {\n    appearance: {\n      standard: {},\n      modern: { gap: '1px' }\n    }\n  }\n})\n\nexport const NumberInput: React.ForwardRefExoticComponent<\n  NumberInputProps & { ref: React.Ref<HTMLInputElement> }\n> = React.forwardRef(\n  (\n    {\n      value,\n      defaultValue = 0,\n      onValueChange,\n      min = 0,\n      max = Number.MAX_SAFE_INTEGER,\n      step = 1,\n      disabled: isDisabled = false,\n      readonly: isReadOnly = false,\n      size = 'md',\n      stepperButtonLabels: stepperButtonLabelsProp,\n      disabledTooltipContent: disabledTooltipContentProp,\n      css,\n      appearance = 'standard',\n      ...rest\n    },\n    ref\n  ): JSX.Element => {\n    const [internalValue, setInternalValue] = React.useState<number>(\n      value || defaultValue\n    )\n    React.useEffect(() => {\n      // Update the internal value to match what is passed in.\n      if (typeof value !== 'undefined') setInternalValue(value)\n    }, [value])\n\n    const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    const stepperButtonLabels = {\n      increment: 'increment',\n      decrement: 'decrement',\n      ...stepperButtonLabelsProp\n    }\n\n    const disabledTooltipContent = {\n      decrement: `Cannot enter values below ${min}`,\n      increment: `Cannot enter values above ${max}`,\n      ...disabledTooltipContentProp\n    }\n\n    const isAtMax = internalValue >= max\n    const isAtMin = internalValue <= min\n\n    const clamp = React.useCallback(\n      (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n      [max, min]\n    )\n\n    const updateValue = React.useCallback(\n      (newValue: number) => {\n        onValueChange?.(newValue)\n        setInternalValue(newValue)\n      },\n      [onValueChange]\n    )\n\n    const onInputChange = React.useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n        updateValue(parsedValue)\n      },\n      [updateValue]\n    )\n\n    const increment = React.useCallback(() => {\n      if (isAtMax || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) + step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMax, isReadOnly, step, updateValue, internalValue])\n\n    const decrement = React.useCallback(() => {\n      if (isAtMin || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) - step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMin, isReadOnly, min, step, updateValue, internalValue])\n\n    const onKeyDown = React.useCallback(\n      (event: React.KeyboardEvent) => {\n        if (event.nativeEvent.isComposing) return\n\n        /**\n         * Keyboard Accessibility\n         *\n         * We want to increase or decrease the input's value\n         * based on if the user the arrow keys.\n         *\n         * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n         */\n        const eventKey = event.key\n\n        const keyMap: Record<string, React.KeyboardEventHandler> = {\n          ArrowUp: increment,\n          ArrowRight: increment,\n          ArrowDown: decrement,\n          ArrowLeft: decrement,\n          Home: () => updateValue(min),\n          End: () => updateValue(max)\n        }\n\n        const action = keyMap[eventKey]\n\n        if (action) {\n          event.preventDefault()\n          action(event)\n        }\n      },\n      [increment, decrement, updateValue, min, max]\n    )\n\n    const inputProps: React.ComponentProps<typeof Input> = {\n      type: 'number',\n      value: internalValue,\n      ...rest,\n      onChange: onInputChange,\n      onKeyDown,\n      size,\n      appearance,\n      css: {\n        borderRadius: '0px',\n        width: '$6',\n        '&:disabled': { opacity: 0.3, pointerEvents: 'none' }\n      },\n      ref: inputRef,\n      readOnly: isReadOnly,\n      disabled: isDisabled,\n      'aria-valuemin': min,\n      'aria-valuemax': max,\n      'aria-valuenow': internalValue,\n      role: 'spinbutton'\n    }\n\n    return (\n      <NumberInputContainer appearance={appearance} css={css}>\n        <NumberInputStepper\n          onClick={decrement}\n          icon={Minus}\n          css={{\n            borderRight: 'none',\n            borderTopRightRadius: '0px',\n            borderBottomRightRadius: '0px'\n          }}\n          size={iconSize}\n          fieldAppearance={appearance}\n          disabled={isAtMin || isDisabled}\n          showTooltip={isAtMin && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.decrement}\n          label={stepperButtonLabels.decrement}\n        />\n        <Input {...inputProps} />\n        <NumberInputStepper\n          onClick={increment}\n          icon={Plus}\n          css={{\n            borderLeft: 'none',\n            borderTopLeftRadius: '0px',\n            borderBottomLeftRadius: '0px'\n          }}\n          size={iconSize}\n          fieldAppearance={appearance}\n          disabled={isAtMax || isDisabled}\n          showTooltip={isAtMax && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.increment}\n          label={stepperButtonLabels.increment}\n        />\n      </NumberInputContainer>\n    )\n  }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"names":["NumberInputContainer","styled","Flex","NumberInput","React","value","defaultValue","onValueChange","min","max","step","isDisabled","isReadOnly","size","stepperButtonLabelsProp","disabledTooltipContentProp","css","appearance","rest","ref","internalValue","setInternalValue","inputRef","iconSize","getFieldIconSize","stepperButtonLabels","disabledTooltipContent","isAtMax","isAtMin","clamp","updateValue","newValue","onInputChange","event","parsedValue","increment","_a","decrement","onKeyDown","eventKey","action","inputProps","NumberInputStepper","Minus","Input","Plus"],"mappings":"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"}
+{"version":3,"file":"NumberInput.js","sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import { Minus, Plus } from '@atom-learning/icons'\nimport clsx from 'clsx'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\nimport { getFieldIconSize } from '~/utilities'\n\nimport { Flex } from '../flex'\nimport { Input } from '../input'\nimport { NumberInputStepper } from './NumberInputStepper'\n\nexport interface NumberInputProps {\n  name: string\n  min?: number\n  max?: number\n  step?: number\n  value?: number\n  defaultValue?: number\n  disabled?: boolean\n  readonly?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  appearance?: 'standard' | 'modern'\n  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  className?: string\n}\n\nconst NumberInputContainer = styled(Flex, {\n  base: [],\n  variants: {\n    appearance: {\n      standard: [],\n      modern: ['gap-px']\n    }\n  }\n})\n\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  (\n    {\n      value,\n      defaultValue = 0,\n      onValueChange,\n      min = 0,\n      max = Number.MAX_SAFE_INTEGER,\n      step = 1,\n      disabled: isDisabled = false,\n      readonly: isReadOnly = false,\n      size = 'md',\n      stepperButtonLabels: stepperButtonLabelsProp,\n      disabledTooltipContent: disabledTooltipContentProp,\n      className,\n      appearance = 'standard',\n      ...rest\n    },\n    ref\n  ): JSX.Element => {\n    const [internalValue, setInternalValue] = React.useState<number>(\n      value || defaultValue\n    )\n    React.useEffect(() => {\n      // Update the internal value to match what is passed in.\n      if (typeof value !== 'undefined') setInternalValue(value)\n    }, [value])\n\n    const inputRef = React.useRef<HTMLInputElement | null>(null)\n\n    React.useImperativeHandle(ref, () => inputRef.current as HTMLInputElement)\n\n    const iconSize = React.useMemo(() => getFieldIconSize(size), [size])\n\n    const stepperButtonLabels = {\n      increment: 'increment',\n      decrement: 'decrement',\n      ...stepperButtonLabelsProp\n    }\n\n    const disabledTooltipContent = {\n      decrement: `Cannot enter values below ${min}`,\n      increment: `Cannot enter values above ${max}`,\n      ...disabledTooltipContentProp\n    }\n\n    const isAtMax = internalValue >= max\n    const isAtMin = internalValue <= min\n\n    const clamp = React.useCallback(\n      (internalValue: number) => Math.min(Math.max(internalValue, min), max),\n      [max, min]\n    )\n\n    const updateValue = React.useCallback(\n      (newValue: number) => {\n        onValueChange?.(newValue)\n        setInternalValue(newValue)\n      },\n      [onValueChange]\n    )\n\n    const onInputChange = React.useCallback(\n      (event: React.ChangeEvent<HTMLInputElement>) => {\n        const parsedValue = Number(event.target.value.replace(/\\D/g, ''))\n        updateValue(parsedValue)\n      },\n      [updateValue]\n    )\n\n    const increment = React.useCallback(() => {\n      if (isAtMax || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) + step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMax, isReadOnly, step, updateValue, internalValue])\n\n    const decrement = React.useCallback(() => {\n      if (isAtMin || isReadOnly) return\n      inputRef?.current?.focus()\n      const newValue = Number(internalValue) - step\n      updateValue(clamp(newValue))\n    }, [clamp, isAtMin, isReadOnly, min, step, updateValue, internalValue])\n\n    const onKeyDown = React.useCallback(\n      (event: React.KeyboardEvent) => {\n        if (event.nativeEvent.isComposing) return\n\n        /**\n         * Keyboard Accessibility\n         *\n         * We want to increase or decrease the input's value\n         * based on if the user the arrow keys.\n         *\n         * @see https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard-interaction-17\n         */\n        const eventKey = event.key\n\n        const keyMap: Record<string, React.KeyboardEventHandler> = {\n          ArrowUp: increment,\n          ArrowRight: increment,\n          ArrowDown: decrement,\n          ArrowLeft: decrement,\n          Home: () => updateValue(min),\n          End: () => updateValue(max)\n        }\n\n        const action = keyMap[eventKey]\n\n        if (action) {\n          event.preventDefault()\n          action(event)\n        }\n      },\n      [increment, decrement, updateValue, min, max]\n    )\n\n    const inputProps: React.ComponentProps<typeof Input> = {\n      type: 'number',\n      value: internalValue,\n      ...rest,\n      onChange: onInputChange,\n      onKeyDown,\n      size,\n      appearance,\n      className: clsx(\n        'rounded-none',\n        'w-16',\n        'disabled:opacity-30',\n        'disabled:pointer-events-none'\n      ),\n      ref: inputRef,\n      readOnly: isReadOnly,\n      disabled: isDisabled,\n      'aria-valuemin': min,\n      'aria-valuemax': max,\n      'aria-valuenow': internalValue,\n      role: 'spinbutton'\n    }\n\n    return (\n      <NumberInputContainer appearance={appearance} className={className}>\n        <NumberInputStepper\n          onClick={decrement}\n          icon={Minus}\n          size={iconSize}\n          fieldAppearance={appearance}\n          disabled={isAtMin || isDisabled}\n          showTooltip={isAtMin && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.decrement}\n          label={stepperButtonLabels.decrement}\n          className=\"border-r-none rounded-r-none\"\n        />\n        <Input {...inputProps} />\n        <NumberInputStepper\n          onClick={increment}\n          icon={Plus}\n          size={iconSize}\n          fieldAppearance={appearance}\n          disabled={isAtMax || isDisabled}\n          showTooltip={isAtMax && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.increment}\n          label={stepperButtonLabels.increment}\n          className=\"border-l-none rounded-l-none\"\n        />\n      </NumberInputContainer>\n    )\n  }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"names":["NumberInputContainer","styled","Flex","NumberInput","React","value","defaultValue","onValueChange","min","max","step","isDisabled","isReadOnly","size","stepperButtonLabelsProp","disabledTooltipContentProp","className","appearance","rest","ref","internalValue","setInternalValue","inputRef","iconSize","getFieldIconSize","stepperButtonLabels","disabledTooltipContent","isAtMax","isAtMin","clamp","updateValue","newValue","onInputChange","event","parsedValue","increment","_a","decrement","onKeyDown","eventKey","action","inputProps","clsx","NumberInputStepper","Minus","Input","Plus"],"mappings":"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"}