@atom-learning/components 4.2.0 → 4.2.1

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

@@ -0,0 +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};
+//# sourceMappingURL=NavigationMenuVerticalText.js.map

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

@@ -0,0 +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"}

package/dist/components/navigation-menu-vertical/index.d.ts

@@ -0,0 +1 @@
+export { NavigationMenuVertical } from './NavigationMenuVertical';

package/dist/components/navigation-menu-vertical/stitches.navigationMenuVertical.colorscheme.config.d.ts

@@ -0,0 +1,15 @@
+export declare const colorSchemes: {
+    light: string & {
+        className: string;
+        selector: string;
+    } & import("@atom-learning/stitches-react/types/stitches").ThemeTokens<{
+        colors: {
+            text: string;
+            background: string;
+            backgroundHover: string;
+            backgroundActive: string;
+            textSelected: string;
+            backgroundSelected: string;
+        };
+    }, "">;
+};

package/dist/components/navigation-menu-vertical/stitches.navigationMenuVertical.colorscheme.config.js

@@ -0,0 +1,2 @@
+import{createTheme as e}from"../../stitches.js";const c=e({colors:{text:"$foreground",background:"$base1",backgroundHover:"$base2",backgroundActive:"$base3",textSelected:"$accent9",backgroundSelected:"$accent2"}}),o={light:c};export{o as colorSchemes};
+//# sourceMappingURL=stitches.navigationMenuVertical.colorscheme.config.js.map

package/dist/components/navigation-menu-vertical/stitches.navigationMenuVertical.colorscheme.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stitches.navigationMenuVertical.colorscheme.config.js","sources":["../../../src/components/navigation-menu-vertical/stitches.navigationMenuVertical.colorscheme.config.ts"],"sourcesContent":["import { createTheme } from '~/stitches'\n\nconst light = createTheme({\n  colors: {\n    text: '$foreground',\n    background: '$base1',\n    backgroundHover: '$base2',\n    backgroundActive: '$base3',\n    textSelected: '$accent9',\n    backgroundSelected: '$accent2'\n  }\n})\n\nexport const colorSchemes = {\n  light\n}\n"],"names":["light","createTheme","colorSchemes"],"mappings":"gDAEA,MAAMA,EAAQC,EAAY,CACxB,OAAQ,CACN,KAAM,cACN,WAAY,SACZ,gBAAiB,SACjB,iBAAkB,SAClB,aAAc,WACd,mBAAoB,UACtB,CACF,CAAC,EAEYC,EAAe,CAC1B,MAAAF,CACF"}

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

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

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

@@ -0,0 +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};
+//# sourceMappingURL=NotificationBadge.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1 @@
+export { NotificationBadge } from './NotificationBadge';

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { CSS } from '../../stitches';
+export interface NumberInputProps {
+    name: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    value?: number;
+    defaultValue?: number;
+    disabled?: boolean;
+    readonly?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    onValueChange?: (value: number) => void;
+    stepperButtonLabels?: {
+        increment?: string;
+        decrement?: string;
+    };
+    disabledTooltipContent?: {
+        increment?: string;
+        decrement?: string;
+    };
+    css?: CSS;
+}
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & {
+    ref: React.Ref<HTMLInputElement>;
+}>;

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

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

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

@@ -0,0 +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 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  onValueChange?: (value: number) => void\n  stepperButtonLabels?: { increment?: string; decrement?: string }\n  disabledTooltipContent?: { increment?: string; decrement?: string }\n  css?: CSS\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      ...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      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      <Flex 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          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          disabled={isAtMax || isDisabled}\n          showTooltip={isAtMax && !isDisabled}\n          disabledTooltipContent={disabledTooltipContent.increment}\n          label={stepperButtonLabels.increment}\n        />\n      </Flex>\n    )\n  }\n)\n\nNumberInput.displayName = 'NumberInput'\n"],"names":["NumberInput","React","value","defaultValue","onValueChange","min","max","step","isDisabled","isReadOnly","size","stepperButtonLabelsProp","disabledTooltipContentProp","css","rest","ref","internalValue","setInternalValue","inputRef","iconSize","getFieldIconSize","stepperButtonLabels","disabledTooltipContent","isAtMax","isAtMin","clamp","updateValue","newValue","onInputChange","event","parsedValue","increment","_a","decrement","onKeyDown","eventKey","action","inputProps","Flex","NumberInputStepper","Minus","Input","Plus"],"mappings":"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"}

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

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

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

@@ -0,0 +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}),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

@@ -0,0 +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: '$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/number-input/index.d.ts

@@ -0,0 +1 @@
+export { NumberInput } from './NumberInput';

package/dist/components/number-input-field/NumberInputField.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ValidationOptions } from '../../components/form';
+import type { CSS } from '../../stitches';
+import type { NumberInputProps } from '../number-input/NumberInput';
+export interface NumberInputFieldProps extends NumberInputProps {
+    css?: CSS;
+    hideLabel?: boolean;
+    description?: string;
+    label: string;
+    name: string;
+    prompt?: {
+        link: string;
+        label: string;
+    };
+    validation?: ValidationOptions;
+}
+export declare const NumberInputField: {
+    ({ css, defaultValue, hideLabel, value, prompt, description, label, name, validation, onValueChange, ...remainingProps }: NumberInputFieldProps): React.JSX.Element;
+    displayName: string;
+};

package/dist/components/number-input-field/NumberInputField.js

@@ -0,0 +1,2 @@
+import*as o from"react";import{useFormContext as I,useController as N}from"react-hook-form";import{FieldWrapper as V}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as E}from"../form/useFieldError.js";import{NumberInput as g}from"../number-input/NumberInput.js";const m=({css:d,defaultValue:a=0,hideLabel:p,value:r,prompt:s,description:f,label:c,name:e,validation:l,onValueChange:t,...b})=>{const{control:v}=I(),{field:{ref:F,onChange:n,value:h,name:C}}=N({name:e,control:v,rules:l,defaultValue:a}),{error:i}=E(e);return o.useEffect(()=>{typeof r<"u"&&n(r)},[r]),o.createElement(V,{css:d,description:f,error:i,fieldId:e,hideLabel:p,label:c,prompt:s,required:Boolean(l==null?void 0:l.required)},o.createElement(g,{id:e,name:C,ref:F,...i&&{state:"error","aria-invalid":!0},defaultValue:a,onValueChange:u=>{n(u),t==null||t(u)},value:h,...b}))};m.displayName="NumberInputField";export{m as NumberInputField};
+//# sourceMappingURL=NumberInputField.js.map

package/dist/components/number-input-field/NumberInputField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInputField.js","sources":["../../../src/components/number-input-field/NumberInputField.tsx"],"sourcesContent":["import * as React from 'react'\nimport { useController, useFormContext } from 'react-hook-form'\n\nimport { FieldWrapper } from '~/components/field-wrapper'\nimport { useFieldError, ValidationOptions } from '~/components/form'\nimport type { CSS } from '~/stitches'\n\nimport type { NumberInputProps } from '../number-input/NumberInput'\nimport { NumberInput } from '../number-input/NumberInput'\n\nexport interface NumberInputFieldProps extends NumberInputProps {\n  css?: CSS\n  hideLabel?: boolean\n  description?: string\n  label: string\n  name: string\n  prompt?: { link: string; label: string }\n  validation?: ValidationOptions\n}\n\nexport const NumberInputField = ({\n  css,\n  defaultValue = 0,\n  hideLabel,\n  value,\n  prompt,\n  description,\n  label,\n  name,\n  validation,\n  onValueChange,\n  ...remainingProps\n}: NumberInputFieldProps) => {\n  const { control } = useFormContext()\n  const {\n    field: { ref, onChange, value: innerValue, name: innerName }\n  } = useController({\n    name,\n    control,\n    rules: validation,\n    defaultValue\n  })\n  const { error } = useFieldError(name)\n\n  React.useEffect(() => {\n    // Update the react-hook-form inner value to match what is passed in.\n    if (typeof value !== 'undefined') onChange(value)\n  }, [value])\n\n  return (\n    <FieldWrapper\n      css={css}\n      description={description}\n      error={error}\n      fieldId={name}\n      hideLabel={hideLabel}\n      label={label}\n      prompt={prompt}\n      required={Boolean(validation?.required)}\n    >\n      <NumberInput\n        id={name}\n        name={innerName}\n        ref={ref}\n        {...(error && { state: 'error', 'aria-invalid': true })}\n        defaultValue={defaultValue}\n        onValueChange={(newValue) => {\n          onChange(newValue)\n          onValueChange?.(newValue)\n        }}\n        value={innerValue}\n        {...remainingProps}\n      />\n    </FieldWrapper>\n  )\n}\n\nNumberInputField.displayName = 'NumberInputField'\n"],"names":["NumberInputField","css","defaultValue","hideLabel","value","prompt","description","label","name","validation","onValueChange","remainingProps","control","useFormContext","ref","onChange","innerValue","innerName","useController","error","useFieldError","React","FieldWrapper","NumberInput","newValue"],"mappings":"yVAoBO,MAAMA,EAAmB,CAAC,CAC/B,IAAAC,EACA,aAAAC,EAAe,EACf,UAAAC,EACA,MAAAC,EACA,OAAAC,EACA,YAAAC,EACA,MAAAC,EACA,KAAAC,EACA,WAAAC,EACA,cAAAC,KACGC,CACL,IAA6B,CAC3B,KAAM,CAAE,QAAAC,CAAQ,EAAIC,EAAe,EAC7B,CACJ,MAAO,CAAE,IAAAC,EAAK,SAAAC,EAAU,MAAOC,EAAY,KAAMC,CAAU,CAC7D,EAAIC,EAAc,CAChB,KAAAV,EACA,QAAAI,EACA,MAAOH,EACP,aAAAP,CACF,CAAC,EACK,CAAE,MAAAiB,CAAM,EAAIC,EAAcZ,CAAI,EAEpC,OAAAa,EAAM,UAAU,IAAM,CAEhB,OAAOjB,EAAU,KAAaW,EAASX,CAAK,CAClD,EAAG,CAACA,CAAK,CAAC,EAGRiB,EAAA,cAACC,EAAA,CACC,IAAKrB,EACL,YAAaK,EACb,MAAOa,EACP,QAASX,EACT,UAAWL,EACX,MAAOI,EACP,OAAQF,EACR,SAAU,QAAQI,GAAA,KAAAA,OAAAA,EAAY,QAAQ,CAAA,EAEtCY,EAAA,cAACE,EAAA,CACC,GAAIf,EACJ,KAAMS,EACN,IAAKH,EACJ,GAAIK,GAAS,CAAE,MAAO,QAAS,eAAgB,EAAK,EACrD,aAAcjB,EACd,cAAgBsB,GAAa,CAC3BT,EAASS,CAAQ,EACjBd,GAAA,MAAAA,EAAgBc,CAAAA,CAClB,EACA,MAAOR,EACN,GAAGL,CAAAA,CACN,CACF,CAEJ,EAEAX,EAAiB,YAAc"}

package/dist/components/number-input-field/index.d.ts

@@ -0,0 +1 @@
+export { NumberInputField } from './NumberInputField';

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { PaginationProps } from './types';
+export declare const Pagination: {
+    ({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount, pagesCount, indicatedPages, disabledPages, onItemHover, labels, children, ...rest }: PaginationProps): React.JSX.Element | null;
+    displayName: string;
+} & {
+    Popover: ({ children }: React.PropsWithChildren<unknown>) => React.JSX.Element;
+};

package/dist/components/pagination/Pagination.js

@@ -0,0 +1,2 @@
+import*as e from"react";import{ColorScheme as P}from"../../experiments/color-scheme/ColorScheme.js";import{Flex as p}from"../flex/Flex.js";import{VisibleElementsAmount as b}from"./pagination.constants.js";import{PaginationProvider as u}from"./pagination-context/PaginationContext.js";import{PaginationItems as C}from"./PaginationItems.js";import{PaginationPopover as E}from"./PaginationPopover.js";const t=({colorScheme:a,onSelectedPageChange:n,selectedPage:i,visibleElementsCount:l=b.LESS,pagesCount:o,indicatedPages:r=[],disabledPages:m=[],onItemHover:s=()=>null,labels:g={},children:c,...d})=>o?e.createElement(u,{onSelectedPageChange:n,selectedPage:i,visibleElementsCount:l,pagesCount:o,indicatedPages:r,disabledPages:m,onItemHover:s,labels:g},e.createElement(P,{base:"grey1",accent:"primary1",...a,asChild:!0},e.createElement(p,{gap:1,...d},c||e.createElement(C,null)))):null,f=Object.assign(t,{Popover:E});t.displayName="Pagination";export{f as Pagination};
+//# sourceMappingURL=Pagination.js.map

package/dist/components/pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme'\nimport { Flex } from '../flex'\nimport { VisibleElementsAmount } from './pagination.constants'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { PaginationItems } from './PaginationItems'\nimport { PaginationPopover } from './PaginationPopover'\nimport type { PaginationProps, PaginationProviderProps } from './types'\n\nconst PaginationComponent = ({\n  colorScheme,\n  onSelectedPageChange,\n  selectedPage,\n  visibleElementsCount = VisibleElementsAmount.LESS,\n  pagesCount,\n  indicatedPages = [],\n  disabledPages = [],\n  onItemHover = () => null,\n  labels = {},\n  children,\n  ...rest\n}: PaginationProps) => {\n  if (!pagesCount) return null\n\n  const paginationProviderProps: PaginationProviderProps = {\n    onSelectedPageChange,\n    selectedPage,\n    visibleElementsCount,\n    pagesCount,\n    indicatedPages,\n    disabledPages,\n    onItemHover,\n    labels\n  }\n\n  return (\n    <PaginationProvider {...paginationProviderProps}>\n      <ColorScheme base=\"grey1\" accent=\"primary1\" {...colorScheme} asChild>\n        <Flex gap={1} {...rest}>\n          {children || <PaginationItems />}\n        </Flex>\n      </ColorScheme>\n    </PaginationProvider>\n  )\n}\n\nexport const Pagination = Object.assign(PaginationComponent, {\n  Popover: PaginationPopover\n})\n\nPaginationComponent.displayName = 'Pagination'\n"],"names":["PaginationComponent","colorScheme","onSelectedPageChange","selectedPage","visibleElementsCount","VisibleElementsAmount","pagesCount","indicatedPages","disabledPages","onItemHover","labels","children","rest","React","PaginationProvider","ColorScheme","Flex","PaginationItems","Pagination","PaginationPopover"],"mappings":"8YAUA,MAAMA,EAAsB,CAAC,CAC3B,YAAAC,EACA,qBAAAC,EACA,aAAAC,EACA,qBAAAC,EAAuBC,EAAsB,KAC7C,WAAAC,EACA,eAAAC,EAAiB,GACjB,cAAAC,EAAgB,GAChB,YAAAC,EAAc,IAAM,KACpB,OAAAC,EAAS,CAAA,EACT,SAAAC,KACGC,CACL,IACON,EAcHO,EAAA,cAACC,EAAA,CAXD,qBAAAZ,EACA,aAAAC,EACA,qBAAAC,EACA,WAAAE,EACA,eAAAC,EACA,cAAAC,EACA,YAAAC,EACA,OAAAC,CAKEG,EAAAA,EAAA,cAACE,EAAA,CAAY,KAAK,QAAQ,OAAO,WAAY,GAAGd,EAAa,QAAO,EAAA,EAClEY,EAAA,cAACG,EAAA,CAAK,IAAK,EAAI,GAAGJ,CAAAA,EACfD,GAAYE,EAAA,cAACI,EAAA,IAAgB,CAChC,CACF,CACF,EApBsB,KAwBbC,EAAa,OAAO,OAAOlB,EAAqB,CAC3D,QAASmB,CACX,CAAC,EAEDnB,EAAoB,YAAc"}

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

@@ -0,0 +1 @@
+export declare const PaginationItems: () => JSX.Element;

package/dist/components/pagination/PaginationItems.js

@@ -0,0 +1,2 @@
+import*as t from"react";import{GO_TO_NEXT_PAGE as r,GO_TO_PREVIOUS_PAGE as a,VIEW_ALL_POPOVER as m}from"./pagination.constants.js";import{PaginationNextButton as i}from"./PaginationNextButton.js";import{PaginationPage as P}from"./PaginationPage.js";import{PaginationPopover as p}from"./PaginationPopover.js";import{PaginationPreviousButton as u}from"./PaginationPreviousButton.js";import{usePagination as c}from"./usePagination.js";const s=()=>{const{paginationItems:n}=c();return t.createElement(t.Fragment,null,n.map((e,o)=>{switch(e){case m:return t.createElement(p,{key:e+o});case a:return t.createElement(u,{key:e});case r:return t.createElement(i,{key:e});default:return t.createElement(P,{key:e,pageNumber:e})}}))};export{s as PaginationItems};
+//# sourceMappingURL=PaginationItems.js.map

package/dist/components/pagination/PaginationItems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationItems.js","sources":["../../../src/components/pagination/PaginationItems.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  GO_TO_NEXT_PAGE,\n  GO_TO_PREVIOUS_PAGE,\n  VIEW_ALL_POPOVER\n} from './pagination.constants'\nimport { PaginationNextButton } from './PaginationNextButton'\nimport { PaginationPage } from './PaginationPage'\nimport { PaginationPopover } from './PaginationPopover'\nimport { PaginationPreviousButton } from './PaginationPreviousButton'\nimport { usePagination } from './usePagination'\n\nexport const PaginationItems = (): JSX.Element => {\n  const { paginationItems } = usePagination()\n\n  return (\n    <>\n      {paginationItems.map((paginationItem, i) => {\n        switch (paginationItem) {\n          case VIEW_ALL_POPOVER:\n            return <PaginationPopover key={paginationItem + i} />\n          case GO_TO_PREVIOUS_PAGE:\n            return <PaginationPreviousButton key={paginationItem} />\n          case GO_TO_NEXT_PAGE:\n            return <PaginationNextButton key={paginationItem} />\n          default:\n            return (\n              <PaginationPage\n                key={paginationItem}\n                pageNumber={paginationItem}\n              />\n            )\n        }\n      })}\n    </>\n  )\n}\n"],"names":["PaginationItems","paginationItems","usePagination","React","paginationItem","i","VIEW_ALL_POPOVER","PaginationPopover","GO_TO_PREVIOUS_PAGE","PaginationPreviousButton","GO_TO_NEXT_PAGE","PaginationNextButton","PaginationPage"],"mappings":"gbAaO,MAAMA,EAAkB,IAAmB,CAChD,KAAM,CAAE,gBAAAC,CAAgB,EAAIC,IAE5B,OACEC,EAAA,cAAAA,EAAA,SACGF,KAAAA,EAAgB,IAAI,CAACG,EAAgBC,IAAM,CAC1C,OAAQD,QACDE,EACH,OAAOH,EAAA,cAACI,EAAA,CAAkB,IAAKH,EAAiBC,EAAG,OAChDG,EACH,OAAOL,EAAA,cAACM,EAAA,CAAyB,IAAKL,EAAgB,OACnDM,EACH,OAAOP,EAAA,cAACQ,EAAA,CAAqB,IAAKP,EAAgB,UAElD,OACED,EAAA,cAACS,EAAA,CACC,IAAKR,EACL,WAAYA,CACd,CAAA,EAGR,CAAC,CACH,CAEJ"}