@zonos/amino 5.1.20 → 5.1.21

package/components/input/Input.js

@@ -1 +1 @@
-"use strict";var e=require("../../_tslib-ccfac372.js"),r=require("react/jsx-runtime"),n=require("styled-components"),i=require("../help-text/HelpText.js"),a=require("./input-type/_DateInput.js"),t=require("./input-type/_FloatLabelInput.js"),s=require("./input-type/_NumberInput.js"),u=require("./input-type/_PasswordInput.js"),o=require("./input-type/_TimeInput.js"),l=require("../../styles/constants/theme.js");function d(e){return e&&e.__esModule?e:{default:e}}require("../text/Text.js"),require("react"),require("../../icons/CalendarIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/getTestId.js"),require("../../icons/ChevronDownIcon.js"),require("../../icons/ChevronUpIcon.js"),require("../../icons/EyeIcon.js"),require("../../icons/EyeOffIcon.js"),require("../../icons/ClockIcon.js");var p,c,x=d(n),f=x.default.div(p||(p=e.__makeTemplateObject(["\n  border-radius: ",";\n  border: ",";\n  &:hover {\n    border: 1px solid ",";\n  }\n"],["\n  border-radius: ",";\n  border: ",";\n  &:hover {\n    border: 1px solid ",";\n  }\n"])),l.theme.radius6,l.theme.border,l.theme.gray300),b=x.default.div(c||(c=e.__makeTemplateObject(["\n  position: relative;\n  width: ",";\n\n  & > div {\n    flex-direction: row;\n    align-items: center;\n    display: flex;\n  }\n\n  &.disabled {\n    opacity: 0.4;\n  }\n"],["\n  position: relative;\n  width: ",";\n\n  & > div {\n    flex-direction: row;\n    align-items: center;\n    display: flex;\n  }\n\n  &.disabled {\n    opacity: 0.4;\n  }\n"])),(function(e){return e.width?"".concat(e.width,"px"):"100%"}));exports.Input=function(n){var l=n.autoFocus,d=n.className,p=n.disabled,c=n.error,x=n.helpText,h=n.inputMode,y=n.inputPrefix,j=n.inputSuffix,m=n.label,q=n.onChange,v=n.onKeyDown,I=n.pattern,_=n.placeholder,w=n.prefix,g=n.readOnly,C=n.required,P=n.size,T=n.suffix,D=n.tabIndex,N=n.type,O=n.value,F=n.valuePrefix,M=n.width,z=e.__rest(n,["autoFocus","className","disabled","error","helpText","inputMode","inputPrefix","inputSuffix","label","onChange","onKeyDown","pattern","placeholder","prefix","readOnly","required","size","suffix","tabIndex","type","value","valuePrefix","width"]);return r.jsxs(b,{className:"amino-input-wrapper ".concat(p?"disabled":""),width:M,children:[r.jsx(f,{children:function(){switch(N){case"password":return r.jsx(u.PasswordInput,e.__assign({autoFocus:l,className:d,disabled:p,error:c,inputMode:h,label:m,onChange:q,onKeyDown:v,pattern:I,placeholder:_,prefix:w||y,readOnly:g,required:C,size:P,suffix:T||j,tabIndex:D,value:O||"",valuePrefix:F},z));case"date":case"datetime-local":return r.jsx(a.DateInput,e.__assign({autoFocus:l,className:d,disabled:p,error:c,inputMode:h,label:m,onChange:q,onKeyDown:v,pattern:I,placeholder:_,prefix:w||y,readOnly:g,required:C,size:P,suffix:T||j,tabIndex:D,type:N,value:O||"",valuePrefix:F},z));case"number":return r.jsx(s.NumberInput,e.__assign({autoFocus:l,className:d,disabled:p,error:c,inputMode:h,label:m,onChange:q,onKeyDown:v,pattern:I,placeholder:_,prefix:w||y,readOnly:g,required:C,size:P,suffix:null===T?null:T||j,tabIndex:D,value:O||"",valuePrefix:F},z));case"time":return r.jsx(o.TimeInput,e.__assign({autoFocus:l,className:d,disabled:p,error:c,inputMode:h,label:m,onChange:q,onKeyDown:v,pattern:I,placeholder:_,prefix:w||y,readOnly:g,required:C,size:P,suffix:T||j,tabIndex:D,value:O||"",valuePrefix:F},z));default:return r.jsx(t.FloatLabelInput,e.__assign({autoFocus:l,className:d,disabled:p,error:c,inputMode:h,label:m,onChange:q,onKeyDown:v,pattern:I,placeholder:_,prefix:w||y,readOnly:g,required:C,size:P,suffix:T||j,tabIndex:D,type:N,value:O||"",valuePrefix:F},z))}}()}),r.jsx(i.HelpText,{error:c,helpText:x})]})};
+"use strict";var e=require("../../_tslib-ccfac372.js"),r=require("react/jsx-runtime"),n=require("styled-components"),i=require("../help-text/HelpText.js"),a=require("./input-type/_DateInput.js"),t=require("./input-type/_FloatLabelInput.js"),s=require("./input-type/_NumberInput.js"),u=require("./input-type/_PasswordInput.js"),o=require("./input-type/_TimeInput.js"),l=require("../../styles/constants/theme.js");function d(e){return e&&e.__esModule?e:{default:e}}require("../text/Text.js"),require("react"),require("../../icons/CalendarIcon.js"),require("../../icons/icon-base/_IconBase.js"),require("../../utils/getTestId.js"),require("../../icons/ChevronDownIcon.js"),require("../../icons/ChevronUpIcon.js"),require("../../icons/EyeIcon.js"),require("../../icons/EyeOffIcon.js"),require("../../icons/ClockIcon.js");var p,c,x=d(n),f=x.default.div(p||(p=e.__makeTemplateObject(["\n  border-radius: ",";\n  border: ",";\n  &:hover {\n    border: 1px solid ",";\n  }\n"],["\n  border-radius: ",";\n  border: ",";\n  &:hover {\n    border: 1px solid ",";\n  }\n"])),l.theme.radius6,l.theme.border,l.theme.gray300),b=x.default.div(c||(c=e.__makeTemplateObject(["\n  position: relative;\n  width: ",";\n\n  & > div {\n    flex-direction: row;\n    align-items: center;\n    display: flex;\n  }\n\n  &.disabled {\n    opacity: 0.4;\n  }\n"],["\n  position: relative;\n  width: ",";\n\n  & > div {\n    flex-direction: row;\n    align-items: center;\n    display: flex;\n  }\n\n  &.disabled {\n    opacity: 0.4;\n  }\n"])),(function(e){return e.width?"".concat(e.width,"px"):"100%"}));exports.Input=function(n){var l=n.autoFocus,d=n.className,p=n.disabled,c=n.error,x=n.helpText,h=n.inputMode,y=n.inputPrefix,j=n.inputSuffix,m=n.label,v=n.onChange,q=n.onKeyDown,I=n.pattern,_=n.placeholder,w=n.prefix,g=n.readOnly,C=n.required,P=n.size,T=void 0===P?"xl":P,D=n.suffix,N=n.tabIndex,O=n.type,F=n.value,M=n.valuePrefix,z=n.width,K=e.__rest(n,["autoFocus","className","disabled","error","helpText","inputMode","inputPrefix","inputSuffix","label","onChange","onKeyDown","pattern","placeholder","prefix","readOnly","required","size","suffix","tabIndex","type","value","valuePrefix","width"]);return r.jsxs(b,{className:"amino-input-wrapper ".concat(p?"disabled":""),width:z,children:[r.jsx(f,{children:function(){switch(O){case"password":return r.jsx(u.PasswordInput,e.__assign({autoFocus:l,className:d,disabled:p,error:c,inputMode:h,label:m,onChange:v,onKeyDown:q,pattern:I,placeholder:_,prefix:w||y,readOnly:g,required:C,size:T,suffix:D||j,tabIndex:N,value:F||"",valuePrefix:M},K));case"date":case"datetime-local":return r.jsx(a.DateInput,e.__assign({autoFocus:l,className:d,disabled:p,error:c,inputMode:h,label:m,onChange:v,onKeyDown:q,pattern:I,placeholder:_,prefix:w||y,readOnly:g,required:C,size:T,suffix:D||j,tabIndex:N,type:O,value:F||"",valuePrefix:M},K));case"number":return r.jsx(s.NumberInput,e.__assign({autoFocus:l,className:d,disabled:p,error:c,inputMode:h,label:m,onChange:v,onKeyDown:q,pattern:I,placeholder:_,prefix:w||y,readOnly:g,required:C,size:T,suffix:null===D?null:D||j,tabIndex:N,value:F||"",valuePrefix:M},K));case"time":return r.jsx(o.TimeInput,e.__assign({autoFocus:l,className:d,disabled:p,error:c,inputMode:h,label:m,onChange:v,onKeyDown:q,pattern:I,placeholder:_,prefix:w||y,readOnly:g,required:C,size:T,suffix:D||j,tabIndex:N,value:F||"",valuePrefix:M},K));default:return r.jsx(t.FloatLabelInput,e.__assign({autoFocus:l,className:d,disabled:p,error:c,inputMode:h,label:m,onChange:v,onKeyDown:q,pattern:I,placeholder:_,prefix:w||y,readOnly:g,required:C,size:T,suffix:D||j,tabIndex:N,type:O,value:F||"",valuePrefix:M},K))}}()}),r.jsx(i.HelpText,{error:c,helpText:x})]})};

package/components/input/input-type/_FloatLabelInput.d.ts

@@ -22,6 +22,9 @@ type FloatLabelInputType = {
     readOnly?: boolean;
     /** Determines if the input is required for form validation */
     required?: boolean;
+    /**
+     * @default 'xl'
+     */
     size?: Size;
     /** A short string displayed at the end of the input. Set to `null` to disable */
     suffix?: ReactNode;
@@ -53,6 +56,9 @@ export declare const FloatLabelInput: import("react").ForwardRefExoticComponent<
     readOnly?: boolean | undefined;
     /** Determines if the input is required for form validation */
     required?: boolean | undefined;
+    /**
+     * @default 'xl'
+     */
     size?: Size | undefined;
     /** A short string displayed at the end of the input. Set to `null` to disable */
     suffix?: ReactNode;

package/components/input/input-type/_NumberInput.d.ts

@@ -1,2 +1,2 @@
 import { type FloatLabelInputProps } from "./_FloatLabelInput";
-export declare const NumberInput: ({ autoFocus, className, disabled, error, inputMode, label, onChange, onKeyDown, pattern, placeholder, prefix, readOnly, required, suffix, tabIndex, value, ...props }: FloatLabelInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const NumberInput: ({ className, label, size, suffix, ...props }: FloatLabelInputProps) => import("react/jsx-runtime").JSX.Element;

package/components/input/input-type/_NumberInput.js

@@ -1 +1 @@
-"use strict";var n=require("../../../_tslib-ccfac372.js"),e=require("react/jsx-runtime"),t=require("react"),r=require("styled-components"),i=require("./_FloatLabelInput.js"),a=require("../../../icons/ChevronDownIcon.js"),o=require("../../../icons/ChevronUpIcon.js"),u=require("../../../styles/constants/theme.js");function s(n){return n&&n.__esModule?n:{default:n}}require("../../../utils/getTestId.js"),require("../../../icons/icon-base/_IconBase.js");var l,d,c,p,b=s(r),f=b.default.div(l||(l=n.__makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"],["\n  position: relative;\n  width: 100%;\n"]))),v=b.default.div(d||(d=n.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"],["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n"]))),h=b.default.button(c||(c=n.__makeTemplateObject(["\n  padding: ",";\n  border-radius: ",";\n  transition: ",";\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.04);\n  }\n  &:active {\n    background: rgba(0, 0, 0, 0.1);\n  }\n  &:focus {\n    outline: none;\n  }\n"],["\n  padding: ",";\n  border-radius: ",";\n  transition: ",";\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.04);\n  }\n  &:active {\n    background: rgba(0, 0, 0, 0.1);\n  }\n  &:focus {\n    outline: none;\n  }\n"])),u.theme.radius4,u.theme.radius4,u.theme.transition),x=b.default(i.FloatLabelInput)(p||(p=n.__makeTemplateObject(["\n  && input {\n    padding-right: ",";\n    appearance: textfield;\n\n    &::-webkit-inner-spin-button,\n    &::-webkit-outer-spin-button {\n      -webkit-appearance: none;\n    }\n  }\n"],["\n  && input {\n    padding-right: ",";\n    appearance: textfield;\n\n    &::-webkit-inner-spin-button,\n    &::-webkit-outer-spin-button {\n      -webkit-appearance: none;\n    }\n  }\n"])),u.theme.space40);exports.NumberInput=function(r){var i=r.autoFocus,u=r.className,s=r.disabled,l=r.error,d=r.inputMode,c=r.label,p=r.onChange,b=r.onKeyDown,m=r.pattern,j=r.placeholder,g=r.prefix,_=r.readOnly,k=r.required,w=r.suffix,y=r.tabIndex,q=r.value,I=n.__rest(r,["autoFocus","className","disabled","error","inputMode","label","onChange","onKeyDown","pattern","placeholder","prefix","readOnly","required","suffix","tabIndex","value"]),C=t.useRef(null);return e.jsx(f,{className:u,children:e.jsx(x,n.__assign({ref:C,"aria-label":c,autoFocus:i,disabled:s,error:l,inputMode:d,label:c,onChange:p,onKeyDown:b,pattern:m,placeholder:j,prefix:g,readOnly:_,required:k,suffix:null===w?null:w||e.jsxs(v,{children:[e.jsx(h,{onClick:function(){var n,e;null===(n=C.current)||void 0===n||n.stepUp(),null===(e=C.current)||void 0===e||e.dispatchEvent(new Event("input",{bubbles:!0}))},type:"button",children:e.jsx(o.ChevronUpIcon,{size:16})}),e.jsx(h,{onClick:function(){var n,e;null===(n=C.current)||void 0===n||n.stepDown(),null===(e=C.current)||void 0===e||e.dispatchEvent(new Event("input",{bubbles:!0}))},type:"button",children:e.jsx(a.ChevronDownIcon,{size:16})})]}),tabIndex:y,type:"number",value:q},I))})};
+"use strict";var n=require("../../../_tslib-ccfac372.js"),e=require("react/jsx-runtime"),t=require("react"),i=require("styled-components"),r=require("./_FloatLabelInput.js"),a=require("../../../icons/ChevronDownIcon.js"),s=require("../../../icons/ChevronUpIcon.js"),u=require("../../../styles/constants/theme.js");function o(n){return n&&n.__esModule?n:{default:n}}require("../../../utils/getTestId.js"),require("../../../icons/icon-base/_IconBase.js");var l,c,d,p,b=o(i),f=b.default.div(l||(l=n.__makeTemplateObject(["\n  position: relative;\n  width: 100%;\n"],["\n  position: relative;\n  width: 100%;\n"]))),v=b.default.div(c||(c=n.__makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  height: ",";\n"],["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n\n  height: ",";\n"])),(function(n){return"calc(var(--amino-size-".concat(n.$size,") - 2px)")})),h=b.default.button(d||(d=n.__makeTemplateObject(["\n  padding: ",";\n  border-radius: ",";\n  transition: ",";\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.04);\n  }\n  &:active {\n    background: rgba(0, 0, 0, 0.1);\n  }\n  &:focus {\n    outline: none;\n  }\n"],["\n  padding: ",";\n  border-radius: ",";\n  transition: ",";\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.04);\n  }\n  &:active {\n    background: rgba(0, 0, 0, 0.1);\n  }\n  &:focus {\n    outline: none;\n  }\n"])),u.theme.radius4,u.theme.radius4,u.theme.transition),m=b.default(r.FloatLabelInput)(p||(p=n.__makeTemplateObject(["\n  && input {\n    padding-right: ",";\n    appearance: textfield;\n\n    &::-webkit-inner-spin-button,\n    &::-webkit-outer-spin-button {\n      -webkit-appearance: none;\n    }\n  }\n"],["\n  && input {\n    padding-right: ",";\n    appearance: textfield;\n\n    &::-webkit-inner-spin-button,\n    &::-webkit-outer-spin-button {\n      -webkit-appearance: none;\n    }\n  }\n"])),u.theme.space40),j=function(n){switch(n){case"sm":return 10;case"md":return 12;case"lg":return 14;default:return 16}};exports.NumberInput=function(i){var r=i.className,u=i.label,o=i.size,l=void 0===o?"xl":o,c=i.suffix,d=n.__rest(i,["className","label","size","suffix"]),p=t.useRef(null);return e.jsx(f,{className:r,children:e.jsx(m,n.__assign({},d,{ref:p,"aria-label":u,label:u,size:l,suffix:null===c?null:c||e.jsxs(v,{$size:l,children:[e.jsx(h,{onClick:function(){var n,e;null===(n=p.current)||void 0===n||n.stepUp(),null===(e=p.current)||void 0===e||e.dispatchEvent(new Event("input",{bubbles:!0}))},type:"button",children:e.jsx(s.ChevronUpIcon,{size:j(l)})}),e.jsx(h,{onClick:function(){var n,e;null===(n=p.current)||void 0===n||n.stepDown(),null===(e=p.current)||void 0===e||e.dispatchEvent(new Event("input",{bubbles:!0}))},type:"button",children:e.jsx(a.ChevronDownIcon,{size:j(l)})})]}),type:"number"}))})};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zonos/amino",
-  "version": "5.1.20",
+  "version": "5.1.21",
   "description": "Core UI components for Amino",
   "repository": "git@github.com:Zonos/amino.git",
   "license": "MIT",

package/styles/constants/theme.d.ts

@@ -1,5 +1,5 @@
 export declare const theme: {
-    /** @info all 0.2s ease-in-out 0s */
+    /** @info all 0.2s ease-in-out 0s, visibility 0 */
     readonly transition: "var(--amino-transition)";
     /** @info 16px */
     readonly typeScaleBase: "var(--amino-type-scale-base)";

package/theme.css

@@ -1,7 +1,7 @@
 :root,
 [data-theme='day'] {
   color-scheme: light;
-  --amino-transition: all 0.2s ease-in-out 0s;
+  --amino-transition: all 0.2s ease-in-out 0s, visibility 0;
   --amino-type-scale-base: 16px;
   --amino-glass-0: #10111600;
   --amino-glass-50: #1011160a;