@atom-learning/components 2.9.2 → 2.10.0

package/CHANGELOG.md

@@ -1,10 +1,10 @@
-## [2.9.2](https://github.com/Atom-Learning/components/compare/v2.9.1...v2.9.2) (2022-10-19)
+# [2.10.0](https://github.com/Atom-Learning/components/compare/v2.9.2...v2.10.0) (2022-10-20)
 
 
-### Bug Fixes
+### Features
 
-* change size prop to optional ([04f5d0f](https://github.com/Atom-Learning/components/commit/04f5d0f9f55aa8812008895d16fda06437797b3b))
-* consolidate field element props ([b82f96d](https://github.com/Atom-Learning/components/commit/b82f96db924f58dca8829499653ee925b6e4500c))
+* added number input component ([6fd1f85](https://github.com/Atom-Learning/components/commit/6fd1f85d1ba3af39b744f095de1319858bb541a4))
+* added number input field ([8f2e8da](https://github.com/Atom-Learning/components/commit/8f2e8dabbda1ca668914a617c3b584f2272a57f3))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/index.d.ts

@@ -66,3 +66,5 @@ export { ToggleGroup } from './toggle-group';
 export { Tooltip } from './tooltip';
 export { Video } from './video';
 export { NavigationMenu } from './navigation';
+export { NumberInput } from './number-input';
+export { NumberInputField } from './number-input-field';

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

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

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

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

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { ActionIcon } from '../action-icon';
+declare 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 @@
+import{styled as t}from"@stitches/react";import*as e from"react";import{ActionIcon as m}from"../action-icon/ActionIcon.js";import{Icon as p}from"../icon/Icon.js";import{Tooltip as o}from"../tooltip/Tooltip.js";const s=t("span",{zIndex:1}),d=t(m,{borderColor:"$tonal400 !important",zIndex:1,"&: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,...c}=n;return e.createElement(o,null,e.createElement(o.Trigger,{asChild:!0},e.createElement(s,{tabIndex:-1},e.createElement(d,{tabIndex:-1,appearance:"outline",ref:r,...c},e.createElement(p,{is:l})))),i&&e.createElement(o.Content,null,a))});export{b as NumberInputStepper};

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,16 @@
+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;
+    description?: string;
+    label: string;
+    name: string;
+    prompt?: {
+        link: string;
+        label: string;
+    };
+    validation?: ValidationOptions;
+}
+export declare const NumberInputField: React.FC<NumberInputFieldProps>;

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

@@ -0,0 +1 @@
+import*as i from"react";import{useFormContext as c}from"react-hook-form";import{FieldWrapper as f}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as b}from"../form/useFieldError.js";import{NumberInput as F}from"../number-input/NumberInput.js";const m=({css:p,label:n,name:r,validation:e,prompt:a,description:l,...d})=>{const{register:o,trigger:s}=c(),{error:t}=b(r),u=e?o(e):o;return i.createElement(f,{css:p,description:l,error:t,fieldId:r,label:n,prompt:a,required:Boolean(e==null?void 0:e.required)},i.createElement(F,{id:r,name:r,ref:u,...t&&{state:"error","aria-invalid":!0},...d,onChange:s}))};m.displayName="NumberInputField";export{m as NumberInputField};

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

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