@solibo/solibo-ui 0.3.40 → 0.4.1

package/dist/components/button/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index33.css');const r=require("react/jsx-runtime"),u=require("../../classix-5H4IWnMA.cjs"),l=require("react"),d=require("../icon/index.cjs"),_="_button_1cw1v_1",g="_danger_1cw1v_19",p="_minimal_1cw1v_32",y="_primary_1cw1v_39",t={button:_,danger:g,minimal:p,primary:y},b={danger:t.danger,default:t.default,minimal:t.minimal,primary:t.primary},f=l.forwardRef(({children:a,className:i,disabled:s=!1,icon:n,onClick:o,variant:e="default",...c},m)=>r.jsxs("button",{className:u.t(t.button,b[e],i),disabled:s,onClick:o,ref:m,type:"button",...c,children:[n&&r.jsx(d.Icon,{gap:"right",name:n,size:"small",variant:e==="minimal"?"default":"white"}),a]}));exports.Button=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index33.css');const a=require("react/jsx-runtime"),u=require("../../classix-5H4IWnMA.cjs"),l=require("react"),d=require("../icon/index.cjs"),_="_button_1cw1v_1",p="_danger_1cw1v_19",b="_minimal_1cw1v_32",g="_primary_1cw1v_39",t={button:_,danger:p,minimal:b,primary:g},y={danger:t.danger,default:t.default,minimal:t.minimal,primary:t.primary},f=l.forwardRef(({children:r,className:i,disabled:o=!1,icon:n,onClick:s,variant:e="default",...c},m)=>a.jsxs("button",{className:u.t(t.button,y[e],i),disabled:o,onClick:s,ref:m,type:"button",...c,"data-component":"button",children:[n&&a.jsx(d.Icon,{gap:"right",name:n,size:"small",variant:e==="minimal"?"default":"white"}),r]}));exports.Button=f;
 //# sourceMappingURL=index.cjs.map

package/dist/components/button/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { forwardRef } from 'react';\n\nimport { Icon } from '../icon';\nimport { IconName } from '../icon/icons';\nimport styles from './styles.module.css';\n\nconst variants = {\n  danger: styles.danger,\n  default: styles.default,\n  minimal: styles.minimal,\n  primary: styles.primary,\n};\n\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  icon?: IconName;\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  variant?: keyof typeof variants;\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      children,\n      className,\n      disabled = false,\n      icon,\n      onClick,\n      variant = 'default',\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <button\n        className={cx(styles.button, variants[variant], className)}\n        disabled={disabled}\n        onClick={onClick}\n        ref={ref}\n        type='button'\n        {...props}\n      >\n        {icon && (\n          <Icon\n            gap='right'\n            name={icon}\n            size='small'\n            variant={variant === 'minimal' ? 'default' : 'white'}\n          />\n        )}\n        {children}\n      </button>\n    );\n  }\n);\n"],"names":["variants","danger","styles","default","minimal","primary","Button","forwardRef","children","className","disabled","icon","onClick","variant","props","ref","cx","button","jsx","Icon"],"mappings":"8UAOMA,EAAW,CACfC,OAAQC,EAAOD,OACfE,QAASD,EAAOC,QAChBC,QAASF,EAAOE,QAChBC,QAASH,EAAOG,OAClB,EAWaC,EAASC,EAAAA,WACpB,CACE,CACEC,SAAAA,EACAC,UAAAA,EACAC,SAAAA,EAAW,GACXC,KAAAA,EACAC,QAAAA,EACAC,QAAAA,EAAU,UACV,GAAGC,CACL,EACAC,WAGG,SAAA,CACC,UAAWC,EAAAA,EAAGd,EAAOe,OAAQjB,EAASa,CAAO,EAAGJ,CAAS,EACzD,SAAAC,EACA,QAAAE,EACA,IAAAG,EACA,KAAK,SACL,GAAID,EAEHH,SAAAA,CAAAA,GACCO,EAAAA,IAACC,EAAAA,KAAA,CACC,IAAI,QACJ,KAAMR,EACN,KAAK,QACL,QAASE,IAAY,UAAY,UAAY,QAAQ,EAGxDL,CAAAA,EACH,CAGN"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { forwardRef } from 'react';\n\nimport { Icon } from '../icon';\nimport { IconName } from '../icon/icons';\nimport styles from './styles.module.css';\n\nconst variants = {\n  danger: styles.danger,\n  default: styles.default,\n  minimal: styles.minimal,\n  primary: styles.primary,\n};\n\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  icon?: IconName;\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  variant?: keyof typeof variants;\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    { children, className, disabled = false, icon, onClick, variant = 'default', ...props },\n    ref\n  ) => {\n    return (\n      <button\n        className={cx(styles.button, variants[variant], className)}\n        disabled={disabled}\n        onClick={onClick}\n        ref={ref}\n        type='button'\n        {...props}\n      >\n        {icon && (\n          <Icon\n            gap='right'\n            name={icon}\n            size='small'\n            variant={variant === 'minimal' ? 'default' : 'white'}\n          />\n        )}\n        {children}\n      </button>\n    );\n  }\n);\n"],"names":["variants","danger","styles","default","minimal","primary","Button","forwardRef","children","className","disabled","icon","onClick","variant","props","ref","cx","button","jsx","Icon"],"mappings":"8UAOMA,EAAW,CACfC,OAAQC,EAAOD,OACfE,QAASD,EAAOC,QAChBC,QAASF,EAAOE,QAChBC,QAASH,EAAOG,OAClB,EAWaC,EAASC,EAAAA,WACpB,CACE,CAAEC,SAAAA,EAAUC,UAAAA,EAAWC,SAAAA,EAAW,GAAOC,KAAAA,EAAMC,QAAAA,EAASC,QAAAA,EAAU,UAAW,GAAGC,CAAM,EACtFC,WAGG,SAAA,CACC,UAAWC,EAAAA,EAAGd,EAAOe,OAAQjB,EAASa,CAAO,EAAGJ,CAAS,EACzD,SAAAC,EACA,QAAAE,EACA,IAAAG,EACA,KAAK,SACL,GAAID,EAAM,iBAAA,SAETH,SAAAA,CAAAA,GACCO,EAAAA,IAACC,EAAAA,KAAA,CACC,IAAI,QACJ,KAAMR,EACN,KAAK,QACL,QAASE,IAAY,UAAY,UAAY,QAAQ,EAGxDL,CAAAA,EACH,CAGN"}

package/dist/components/button/index.js

@@ -1,28 +1,28 @@
 import { jsxs as l, jsx as c } from "react/jsx-runtime";
 import { t as p } from "../../classix-DG18itHa.js";
 import { forwardRef as u } from "react";
-import { Icon as _ } from "../icon/index.js";
-import '../../assets/index33.css';const d = "_button_1cw1v_1", f = "_danger_1cw1v_19", g = "_minimal_1cw1v_32", y = "_primary_1cw1v_39", t = {
-  button: d,
+import { Icon as d } from "../icon/index.js";
+import '../../assets/index33.css';const _ = "_button_1cw1v_1", f = "_danger_1cw1v_19", b = "_minimal_1cw1v_32", g = "_primary_1cw1v_39", t = {
+  button: _,
   danger: f,
-  minimal: g,
-  primary: y
-}, b = {
+  minimal: b,
+  primary: g
+}, y = {
   danger: t.danger,
   default: t.default,
   minimal: t.minimal,
   primary: t.primary
 }, j = u(({
-  children: n,
+  children: r,
   className: m,
-  disabled: i = !1,
-  icon: r,
-  onClick: o,
+  disabled: o = !1,
+  icon: n,
+  onClick: i,
   variant: a = "default",
   ...e
-}, s) => /* @__PURE__ */ l("button", { className: p(t.button, b[a], m), disabled: i, onClick: o, ref: s, type: "button", ...e, children: [
-  r && /* @__PURE__ */ c(_, { gap: "right", name: r, size: "small", variant: a === "minimal" ? "default" : "white" }),
-  n
+}, s) => /* @__PURE__ */ l("button", { className: p(t.button, y[a], m), disabled: o, onClick: i, ref: s, type: "button", ...e, "data-component": "button", children: [
+  n && /* @__PURE__ */ c(d, { gap: "right", name: n, size: "small", variant: a === "minimal" ? "default" : "white" }),
+  r
 ] }));
 export {
   j as Button

package/dist/components/button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { forwardRef } from 'react';\n\nimport { Icon } from '../icon';\nimport { IconName } from '../icon/icons';\nimport styles from './styles.module.css';\n\nconst variants = {\n  danger: styles.danger,\n  default: styles.default,\n  minimal: styles.minimal,\n  primary: styles.primary,\n};\n\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  icon?: IconName;\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  variant?: keyof typeof variants;\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      children,\n      className,\n      disabled = false,\n      icon,\n      onClick,\n      variant = 'default',\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <button\n        className={cx(styles.button, variants[variant], className)}\n        disabled={disabled}\n        onClick={onClick}\n        ref={ref}\n        type='button'\n        {...props}\n      >\n        {icon && (\n          <Icon\n            gap='right'\n            name={icon}\n            size='small'\n            variant={variant === 'minimal' ? 'default' : 'white'}\n          />\n        )}\n        {children}\n      </button>\n    );\n  }\n);\n"],"names":["variants","danger","styles","default","minimal","primary","Button","forwardRef","children","className","disabled","icon","onClick","variant","props","ref","cx","button","jsx","Icon"],"mappings":";;;;;;;;;GAOMA,IAAW;AAAA,EACfC,QAAQC,EAAOD;AAAAA,EACfE,SAASD,EAAOC;AAAAA,EAChBC,SAASF,EAAOE;AAAAA,EAChBC,SAASH,EAAOG;AAClB,GAWaC,IAASC,EACpB,CACE;AAAA,EACEC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,UAAAA,IAAW;AAAA,EACXC,MAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACV,GAAGC;AACL,GACAC,wBAGG,UAAA,EACC,WAAWC,EAAGd,EAAOe,QAAQjB,EAASa,CAAO,GAAGJ,CAAS,GACzD,UAAAC,GACA,SAAAE,GACA,KAAAG,GACA,MAAK,UACL,GAAID,GAEHH,UAAAA;AAAAA,EAAAA,KACC,gBAAAO,EAACC,GAAA,EACC,KAAI,SACJ,MAAMR,GACN,MAAK,SACL,SAASE,MAAY,YAAY,YAAY,SAAQ;AAAA,EAGxDL;AAAAA,GACH,CAGN;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { forwardRef } from 'react';\n\nimport { Icon } from '../icon';\nimport { IconName } from '../icon/icons';\nimport styles from './styles.module.css';\n\nconst variants = {\n  danger: styles.danger,\n  default: styles.default,\n  minimal: styles.minimal,\n  primary: styles.primary,\n};\n\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  children: React.ReactNode;\n  className?: string;\n  disabled?: boolean;\n  icon?: IconName;\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  variant?: keyof typeof variants;\n};\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    { children, className, disabled = false, icon, onClick, variant = 'default', ...props },\n    ref\n  ) => {\n    return (\n      <button\n        className={cx(styles.button, variants[variant], className)}\n        disabled={disabled}\n        onClick={onClick}\n        ref={ref}\n        type='button'\n        {...props}\n      >\n        {icon && (\n          <Icon\n            gap='right'\n            name={icon}\n            size='small'\n            variant={variant === 'minimal' ? 'default' : 'white'}\n          />\n        )}\n        {children}\n      </button>\n    );\n  }\n);\n"],"names":["variants","danger","styles","default","minimal","primary","Button","forwardRef","children","className","disabled","icon","onClick","variant","props","ref","cx","button","jsx","Icon"],"mappings":";;;;;;;;;GAOMA,IAAW;AAAA,EACfC,QAAQC,EAAOD;AAAAA,EACfE,SAASD,EAAOC;AAAAA,EAChBC,SAASF,EAAOE;AAAAA,EAChBC,SAASH,EAAOG;AAClB,GAWaC,IAASC,EACpB,CACE;AAAA,EAAEC,UAAAA;AAAAA,EAAUC,WAAAA;AAAAA,EAAWC,UAAAA,IAAW;AAAA,EAAOC,MAAAA;AAAAA,EAAMC,SAAAA;AAAAA,EAASC,SAAAA,IAAU;AAAA,EAAW,GAAGC;AAAM,GACtFC,wBAGG,UAAA,EACC,WAAWC,EAAGd,EAAOe,QAAQjB,EAASa,CAAO,GAAGJ,CAAS,GACzD,UAAAC,GACA,SAAAE,GACA,KAAAG,GACA,MAAK,UACL,GAAID,GAAM,kBAAA,UAETH,UAAAA;AAAAA,EAAAA,KACC,gBAAAO,EAACC,GAAA,EACC,KAAI,SACJ,MAAMR,GACN,MAAK,SACL,SAASE,MAAY,YAAY,YAAY,SAAQ;AAAA,EAGxDL;AAAAA,GACH,CAGN;"}

package/dist/components/input/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),c=require("../../classix-5H4IWnMA.cjs"),s=require("react"),I=require("../../icons-C_cX1FYp.cjs"),P=require("../../utils-DqVa4K58.cjs"),a=require("../../styles.module-CwroCNAt.cjs"),R=s.forwardRef(({className:y,defaultCountryCode:d="+47",disabled:i=!1,icon:o,label:h,placeholder:m,type:t="text",...e},v)=>{const[l,g]=s.useState(""),[r,x]=s.useState(""),{onChange:N,value:j,...C}=e,{touched:f,onBlur:S}=P.useTouched(j===""),q=o&&t!=="radio"&&t!=="datetime-local"?{"--icon-svg":I.iconSVG(o,!0)}:void 0;s.useEffect(()=>{if(typeof e.onChange=="function"&&t==="tel"){const u={name:e.name,value:r?(l||d).split(" ").join("")+r.split(" ").join(""):void 0};e.onChange({target:u,currentTarget:u})}},[l,r]),s.useEffect(()=>{t==="tel"&&!e.value&&(x(""),g(""))},[e.value,t]);const p=n.jsxs(n.Fragment,{children:[n.jsx("input",{disabled:i,hidden:!0,onChange:N,pattern:void 0,placeholder:m,ref:v,type:t,value:j}),n.jsx("input",{type:"text",className:a.inputStyles.input,disabled:i,maxLength:5,onChange:u=>g(u.target.value),placeholder:d,value:l}),n.jsx("input",{type:"tel",className:c.t(a.inputStyles.input,f&&"touched"),"data-icon":o?"true":void 0,disabled:i,maxLength:14,name:void 0,onChange:u=>x(u.target.value),onBlur:S,pattern:e.pattern,style:q,value:r,...C})]});return n.jsxs("label",{className:a.inputStyles.label,children:[h&&n.jsx("span",{className:c.t(e.required&&a.inputStyles.required),children:h}),t==="tel"?p:n.jsx("input",{ref:v,className:c.t(a.inputStyles.input,y,f&&"touched"),"data-icon":o?"true":void 0,disabled:i,onBlur:S,placeholder:m,style:q,type:t,...e})]})});exports.Input=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),l=require("../../classix-5H4IWnMA.cjs"),s=require("react"),I=require("../../icons-C_cX1FYp.cjs"),P=require("../../utils-DqVa4K58.cjs"),a=require("../../styles.module-CwroCNAt.cjs"),R=s.forwardRef(({className:p,defaultCountryCode:d="+47",disabled:i=!1,icon:o,label:h,placeholder:m,type:t="text",...e},v)=>{const[c,g]=s.useState(""),[r,x]=s.useState(""),{onChange:y,value:j,...N}=e,{touched:f,onBlur:S}=P.useTouched(j===""),q=o&&t!=="radio"&&t!=="datetime-local"?{"--icon-svg":I.iconSVG(o,!0)}:void 0;s.useEffect(()=>{if(typeof e.onChange=="function"&&t==="tel"){const u={name:e.name,value:r?(c||d).split(" ").join("")+r.split(" ").join(""):void 0};e.onChange({target:u,currentTarget:u})}},[c,r]),s.useEffect(()=>{t==="tel"&&!e.value&&(x(""),g(""))},[e.value,t]);const C=n.jsxs(n.Fragment,{children:[n.jsx("input",{disabled:i,hidden:!0,onChange:y,pattern:void 0,placeholder:m,ref:v,type:t,value:j}),n.jsx("input",{type:"text",className:a.inputStyles.input,disabled:i,maxLength:5,onChange:u=>g(u.target.value),placeholder:d,value:c}),n.jsx("input",{type:"tel",className:l.t(a.inputStyles.input,f&&"touched"),"data-icon":o?"true":void 0,disabled:i,maxLength:14,name:void 0,onChange:u=>x(u.target.value),onBlur:S,pattern:e.pattern,style:q,value:r,...N})]});return n.jsxs("label",{className:a.inputStyles.label,"data-component":"input",children:[h&&n.jsx("span",{className:l.t(e.required&&a.inputStyles.required),children:h}),t==="tel"?C:n.jsx("input",{ref:v,className:l.t(a.inputStyles.input,p,f&&"touched"),"data-icon":o?"true":void 0,disabled:i,onBlur:S,placeholder:m,style:q,type:t,...e})]})});exports.Input=R;
 //# sourceMappingURL=index.cjs.map

package/dist/components/input/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/input/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { forwardRef, useEffect, useState } from 'react';\n\nimport { IconName, iconSVG } from '@/components/icon/icons.ts';\nimport { useTouched } from '@/utils.ts';\n\nimport styles from './styles.module.css';\n\nexport type InputProps = React.ComponentPropsWithoutRef<'input'> & {\n  defaultCountryCode?: string;\n  disabled?: boolean;\n  icon?: IconName;\n  label?: string;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  placeholder?: string;\n  type?: 'datetime-local' | 'email' | 'number' | 'password' | 'radio' | 'search' | 'tel' | 'text';\n};\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      defaultCountryCode = '+47',\n      disabled = false,\n      icon,\n      label,\n      placeholder,\n      type = 'text',\n      ...props\n    },\n    ref\n  ) => {\n    const [countryCode, setCountryCode] = useState('');\n    const [phoneNumber, setPhoneNumber] = useState('');\n    const { onChange, value, ...restProps } = props;\n    const { touched, onBlur } = useTouched(value === '');\n\n    type withVars =\n      | (React.CSSProperties & {\n          '--icon-svg'?: string;\n        })\n      | undefined;\n\n    const withVars: withVars =\n      icon && type !== 'radio' && type !== 'datetime-local'\n        ? {\n            '--icon-svg': iconSVG(icon, true),\n          }\n        : undefined;\n\n    useEffect(() => {\n      if (typeof props.onChange === 'function' && type === 'tel') {\n        const target = {\n          name: props.name,\n          value: phoneNumber\n            ? (countryCode || defaultCountryCode).split(' ').join('') +\n              phoneNumber.split(' ').join('')\n            : undefined,\n        } as unknown as HTMLInputElement;\n        // eslint-disable-next-line\n        (props.onChange as any)({ target, currentTarget: target });\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [countryCode, phoneNumber]);\n\n    useEffect(() => {\n      if (type === 'tel' && !props.value) {\n        setPhoneNumber('');\n        setCountryCode('');\n      }\n    }, [props.value, type]);\n\n    const telephoneInput = (\n      <>\n        <input\n          disabled={disabled}\n          hidden\n          onChange={onChange}\n          pattern={undefined}\n          placeholder={placeholder}\n          ref={ref}\n          type={type}\n          value={value}\n        />\n        <input\n          type='text'\n          className={styles.input}\n          disabled={disabled}\n          maxLength={5}\n          onChange={(e) => setCountryCode(e.target.value)}\n          placeholder={defaultCountryCode}\n          value={countryCode}\n        />\n        <input\n          type='tel'\n          className={cx(styles.input, touched && 'touched')}\n          data-icon={icon ? 'true' : undefined}\n          disabled={disabled}\n          maxLength={14}\n          name={undefined}\n          onChange={(e) => setPhoneNumber(e.target.value)}\n          onBlur={onBlur}\n          pattern={props.pattern}\n          style={withVars}\n          value={phoneNumber}\n          {...restProps}\n        />\n      </>\n    );\n\n    return (\n      <label className={styles.label}>\n        {label && <span className={cx(props.required && styles.required)}>{label}</span>}\n        {type === 'tel' ? (\n          telephoneInput\n        ) : (\n          <input\n            ref={ref}\n            className={cx(styles.input, className, touched && 'touched')}\n            data-icon={icon ? 'true' : undefined}\n            disabled={disabled}\n            onBlur={onBlur}\n            placeholder={placeholder}\n            style={withVars}\n            type={type}\n            {...props}\n          />\n        )}\n      </label>\n    );\n  }\n);\n"],"names":["Input","forwardRef","className","defaultCountryCode","disabled","icon","label","placeholder","type","props","ref","countryCode","setCountryCode","useState","phoneNumber","setPhoneNumber","onChange","value","restProps","touched","onBlur","useTouched","withVars","iconSVG","undefined","useEffect","target","name","split","join","currentTarget","telephoneInput","jsxs","Fragment","jsx","styles","input","e","cx","pattern","required"],"mappings":"0SAkBaA,EAAQC,EAAAA,WACnB,CACE,CACEC,UAAAA,EACAC,mBAAAA,EAAqB,MACrBC,SAAAA,EAAW,GACXC,KAAAA,EACAC,MAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,OACP,GAAGC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAaC,CAAc,EAAIC,EAAAA,SAAS,EAAE,EAC3C,CAACC,EAAaC,CAAc,EAAIF,EAAAA,SAAS,EAAE,EAC3C,CAAEG,SAAAA,EAAUC,MAAAA,EAAO,GAAGC,CAAAA,EAAcT,EACpC,CAAEU,QAAAA,EAASC,OAAAA,CAAAA,EAAWC,EAAAA,WAAWJ,IAAU,EAAE,EAQ7CK,EACJjB,GAAQG,IAAS,SAAWA,IAAS,iBACjC,CACE,aAAce,EAAAA,QAAQlB,EAAM,EAAI,CAAA,EAElCmB,OAENC,EAAAA,UAAU,IAAM,CACd,GAAI,OAAOhB,EAAMO,UAAa,YAAcR,IAAS,MAAO,CAC1D,MAAMkB,EAAS,CACbC,KAAMlB,EAAMkB,KACZV,MAAOH,GACFH,GAAeR,GAAoByB,MAAM,GAAG,EAAEC,KAAK,EAAE,EACtDf,EAAYc,MAAM,GAAG,EAAEC,KAAK,EAAE,EAC9BL,MAAAA,EAGLf,EAAMO,SAAiB,CAAEU,OAAAA,EAAQI,cAAeJ,CAAAA,CAAQ,CAC3D,CAEF,EAAG,CAACf,EAAaG,CAAW,CAAC,EAE7BW,EAAAA,UAAU,IAAM,CACVjB,IAAS,OAAS,CAACC,EAAMQ,QAC3BF,EAAe,EAAE,EACjBH,EAAe,EAAE,EAErB,EAAG,CAACH,EAAMQ,MAAOT,CAAI,CAAC,EAEtB,MAAMuB,EACJC,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,EAAAA,IAAC,QAAA,CACC,SAAA9B,EACA,OAAM,GACN,SAAAY,EACA,QAASQ,OACT,YAAAjB,EACA,IAAAG,EACA,KAAAF,EACA,MAAAS,CAAA,CAAa,EAEfiB,MAAC,SACC,KAAK,OACL,UAAWC,EAAAA,YAAOC,MAClB,SAAAhC,EACA,UAAW,EACX,SAAWiC,GAAMzB,EAAeyB,EAAEX,OAAOT,KAAK,EAC9C,YAAad,EACb,MAAOQ,EAAY,QAEpB,QAAA,CACC,KAAK,MACL,UAAW2B,EAAAA,EAAGH,EAAAA,YAAOC,MAAOjB,GAAW,SAAS,EAChD,YAAWd,EAAO,OAASmB,OAC3B,SAAApB,EACA,UAAW,GACX,KAAMoB,OACN,SAAWa,GAAMtB,EAAesB,EAAEX,OAAOT,KAAK,EAC9C,OAAAG,EACA,QAASX,EAAM8B,QACf,MAAOjB,EACP,MAAOR,EACP,GAAII,CAAAA,CAAU,CAAA,EAElB,EAGF,OACEc,EAAAA,KAAC,QAAA,CAAM,UAAWG,EAAAA,YAAO7B,MACtBA,SAAAA,CAAAA,GAAS4B,EAAAA,IAAC,QAAK,UAAWI,EAAAA,EAAG7B,EAAM+B,UAAYL,EAAAA,YAAOK,QAAQ,EAAIlC,SAAAA,CAAAA,CAAM,EACxEE,IAAS,MACRuB,EAEAG,EAAAA,IAAC,QAAA,CACC,IAAAxB,EACA,UAAW4B,EAAAA,EAAGH,EAAAA,YAAOC,MAAOlC,EAAWiB,GAAW,SAAS,EAC3D,YAAWd,EAAO,OAASmB,OAC3B,SAAApB,EACA,OAAAgB,EACA,YAAAb,EACA,MAAOe,EACP,KAAAd,EACA,GAAIC,CAAAA,CAAM,CAAA,EAGhB,CAEJ,CACF"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/input/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { forwardRef, useEffect, useState } from 'react';\n\nimport { IconName, iconSVG } from '@/components/icon/icons.ts';\nimport { useTouched } from '@/utils.ts';\n\nimport styles from './styles.module.css';\n\nexport type InputProps = React.ComponentPropsWithoutRef<'input'> & {\n  defaultCountryCode?: string;\n  disabled?: boolean;\n  icon?: IconName;\n  label?: string;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  placeholder?: string;\n  type?: 'datetime-local' | 'email' | 'number' | 'password' | 'radio' | 'search' | 'tel' | 'text';\n};\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      defaultCountryCode = '+47',\n      disabled = false,\n      icon,\n      label,\n      placeholder,\n      type = 'text',\n      ...props\n    },\n    ref\n  ) => {\n    const [countryCode, setCountryCode] = useState('');\n    const [phoneNumber, setPhoneNumber] = useState('');\n    const { onChange, value, ...restProps } = props;\n    const { touched, onBlur } = useTouched(value === '');\n\n    type withVars =\n      | (React.CSSProperties & {\n          '--icon-svg'?: string;\n        })\n      | undefined;\n\n    const withVars: withVars =\n      icon && type !== 'radio' && type !== 'datetime-local'\n        ? {\n            '--icon-svg': iconSVG(icon, true),\n          }\n        : undefined;\n\n    useEffect(() => {\n      if (typeof props.onChange === 'function' && type === 'tel') {\n        const target = {\n          name: props.name,\n          value: phoneNumber\n            ? (countryCode || defaultCountryCode).split(' ').join('') +\n              phoneNumber.split(' ').join('')\n            : undefined,\n        } as unknown as HTMLInputElement;\n        // eslint-disable-next-line\n        (props.onChange as any)({ target, currentTarget: target });\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [countryCode, phoneNumber]);\n\n    useEffect(() => {\n      if (type === 'tel' && !props.value) {\n        setPhoneNumber('');\n        setCountryCode('');\n      }\n    }, [props.value, type]);\n\n    const telephoneInput = (\n      <>\n        <input\n          disabled={disabled}\n          hidden\n          onChange={onChange}\n          pattern={undefined}\n          placeholder={placeholder}\n          ref={ref}\n          type={type}\n          value={value}\n        />\n        <input\n          type='text'\n          className={styles.input}\n          disabled={disabled}\n          maxLength={5}\n          onChange={(e) => setCountryCode(e.target.value)}\n          placeholder={defaultCountryCode}\n          value={countryCode}\n        />\n        <input\n          type='tel'\n          className={cx(styles.input, touched && 'touched')}\n          data-icon={icon ? 'true' : undefined}\n          disabled={disabled}\n          maxLength={14}\n          name={undefined}\n          onChange={(e) => setPhoneNumber(e.target.value)}\n          onBlur={onBlur}\n          pattern={props.pattern}\n          style={withVars}\n          value={phoneNumber}\n          {...restProps}\n        />\n      </>\n    );\n\n    return (\n      <label className={styles.label}>\n        {label && <span className={cx(props.required && styles.required)}>{label}</span>}\n        {type === 'tel' ? (\n          telephoneInput\n        ) : (\n          <input\n            ref={ref}\n            className={cx(styles.input, className, touched && 'touched')}\n            data-icon={icon ? 'true' : undefined}\n            disabled={disabled}\n            onBlur={onBlur}\n            placeholder={placeholder}\n            style={withVars}\n            type={type}\n            {...props}\n          />\n        )}\n      </label>\n    );\n  }\n);\n"],"names":["Input","forwardRef","className","defaultCountryCode","disabled","icon","label","placeholder","type","props","ref","countryCode","setCountryCode","useState","phoneNumber","setPhoneNumber","onChange","value","restProps","touched","onBlur","useTouched","withVars","iconSVG","undefined","useEffect","target","name","split","join","currentTarget","telephoneInput","jsxs","Fragment","jsx","styles","input","e","cx","pattern","required"],"mappings":"0SAkBaA,EAAQC,EAAAA,WACnB,CACE,CACEC,UAAAA,EACAC,mBAAAA,EAAqB,MACrBC,SAAAA,EAAW,GACXC,KAAAA,EACAC,MAAAA,EACAC,YAAAA,EACAC,KAAAA,EAAO,OACP,GAAGC,CACL,EACAC,IACG,CACH,KAAM,CAACC,EAAaC,CAAc,EAAIC,EAAAA,SAAS,EAAE,EAC3C,CAACC,EAAaC,CAAc,EAAIF,EAAAA,SAAS,EAAE,EAC3C,CAAEG,SAAAA,EAAUC,MAAAA,EAAO,GAAGC,CAAAA,EAAcT,EACpC,CAAEU,QAAAA,EAASC,OAAAA,CAAAA,EAAWC,EAAAA,WAAWJ,IAAU,EAAE,EAQ7CK,EACJjB,GAAQG,IAAS,SAAWA,IAAS,iBACjC,CACE,aAAce,EAAAA,QAAQlB,EAAM,EAAI,CAAA,EAElCmB,OAENC,EAAAA,UAAU,IAAM,CACd,GAAI,OAAOhB,EAAMO,UAAa,YAAcR,IAAS,MAAO,CAC1D,MAAMkB,EAAS,CACbC,KAAMlB,EAAMkB,KACZV,MAAOH,GACFH,GAAeR,GAAoByB,MAAM,GAAG,EAAEC,KAAK,EAAE,EACtDf,EAAYc,MAAM,GAAG,EAAEC,KAAK,EAAE,EAC9BL,MAAAA,EAGLf,EAAMO,SAAiB,CAAEU,OAAAA,EAAQI,cAAeJ,CAAAA,CAAQ,CAC3D,CAEF,EAAG,CAACf,EAAaG,CAAW,CAAC,EAE7BW,EAAAA,UAAU,IAAM,CACVjB,IAAS,OAAS,CAACC,EAAMQ,QAC3BF,EAAe,EAAE,EACjBH,EAAe,EAAE,EAErB,EAAG,CAACH,EAAMQ,MAAOT,CAAI,CAAC,EAEtB,MAAMuB,EACJC,EAAAA,KAAAC,EAAAA,SAAA,CACE,SAAA,CAAAC,EAAAA,IAAC,QAAA,CACC,SAAA9B,EACA,OAAM,GACN,SAAAY,EACA,QAASQ,OACT,YAAAjB,EACA,IAAAG,EACA,KAAAF,EACA,MAAAS,CAAA,CAAa,EAEfiB,MAAC,SACC,KAAK,OACL,UAAWC,EAAAA,YAAOC,MAClB,SAAAhC,EACA,UAAW,EACX,SAAWiC,GAAMzB,EAAeyB,EAAEX,OAAOT,KAAK,EAC9C,YAAad,EACb,MAAOQ,EAAY,QAEpB,QAAA,CACC,KAAK,MACL,UAAW2B,EAAAA,EAAGH,EAAAA,YAAOC,MAAOjB,GAAW,SAAS,EAChD,YAAWd,EAAO,OAASmB,OAC3B,SAAApB,EACA,UAAW,GACX,KAAMoB,OACN,SAAWa,GAAMtB,EAAesB,EAAEX,OAAOT,KAAK,EAC9C,OAAAG,EACA,QAASX,EAAM8B,QACf,MAAOjB,EACP,MAAOR,EACP,GAAII,CAAAA,CAAU,CAAA,EAElB,EAGF,cACG,QAAA,CAAM,UAAWiB,EAAAA,YAAO7B,MAAM,iBAAA,QAC5BA,SAAAA,CAAAA,GAAS4B,EAAAA,IAAC,QAAK,UAAWI,EAAAA,EAAG7B,EAAM+B,UAAYL,EAAAA,YAAOK,QAAQ,EAAIlC,SAAAA,CAAAA,CAAM,EACxEE,IAAS,MACRuB,EAEAG,EAAAA,IAAC,QAAA,CACC,IAAAxB,EACA,UAAW4B,EAAAA,EAAGH,EAAAA,YAAOC,MAAOlC,EAAWiB,GAAW,SAAS,EAC3D,YAAWd,EAAO,OAASmB,OAC3B,SAAApB,EACA,OAAAgB,EACA,YAAAb,EACA,MAAOe,EACP,KAAAd,EACA,GAAIC,CAAAA,CAAM,CAAA,EAGhB,CAEJ,CACF"}

package/dist/components/input/index.js

@@ -8,44 +8,44 @@ const y = T(({
   className: q,
   defaultCountryCode: c = "+47",
   disabled: u = !1,
-  icon: r,
+  icon: i,
   label: m,
   placeholder: h,
   type: e = "text",
   ...t
 }, d) => {
-  const [s, v] = j(""), [i, f] = j(""), {
+  const [s, v] = j(""), [r, f] = j(""), {
     onChange: w,
     value: g,
     ...I
   } = t, {
-    touched: x,
-    onBlur: N
-  } = B(g === ""), p = r && e !== "radio" && e !== "datetime-local" ? {
-    "--icon-svg": V(r, !0)
+    touched: p,
+    onBlur: x
+  } = B(g === ""), N = i && e !== "radio" && e !== "datetime-local" ? {
+    "--icon-svg": V(i, !0)
   } : void 0;
   S(() => {
     if (typeof t.onChange == "function" && e === "tel") {
       const n = {
         name: t.name,
-        value: i ? (s || c).split(" ").join("") + i.split(" ").join("") : void 0
+        value: r ? (s || c).split(" ").join("") + r.split(" ").join("") : void 0
       };
       t.onChange({
         target: n,
         currentTarget: n
       });
     }
-  }, [s, i]), S(() => {
+  }, [s, r]), S(() => {
     e === "tel" && !t.value && (f(""), v(""));
   }, [t.value, e]);
   const L = /* @__PURE__ */ C(P, { children: [
     /* @__PURE__ */ a("input", { disabled: u, hidden: !0, onChange: w, pattern: void 0, placeholder: h, ref: d, type: e, value: g }),
     /* @__PURE__ */ a("input", { type: "text", className: o.input, disabled: u, maxLength: 5, onChange: (n) => v(n.target.value), placeholder: c, value: s }),
-    /* @__PURE__ */ a("input", { type: "tel", className: l(o.input, x && "touched"), "data-icon": r ? "true" : void 0, disabled: u, maxLength: 14, name: void 0, onChange: (n) => f(n.target.value), onBlur: N, pattern: t.pattern, style: p, value: i, ...I })
+    /* @__PURE__ */ a("input", { type: "tel", className: l(o.input, p && "touched"), "data-icon": i ? "true" : void 0, disabled: u, maxLength: 14, name: void 0, onChange: (n) => f(n.target.value), onBlur: x, pattern: t.pattern, style: N, value: r, ...I })
   ] });
-  return /* @__PURE__ */ C("label", { className: o.label, children: [
+  return /* @__PURE__ */ C("label", { className: o.label, "data-component": "input", children: [
     m && /* @__PURE__ */ a("span", { className: l(t.required && o.required), children: m }),
-    e === "tel" ? L : /* @__PURE__ */ a("input", { ref: d, className: l(o.input, q, x && "touched"), "data-icon": r ? "true" : void 0, disabled: u, onBlur: N, placeholder: h, style: p, type: e, ...t })
+    e === "tel" ? L : /* @__PURE__ */ a("input", { ref: d, className: l(o.input, q, p && "touched"), "data-icon": i ? "true" : void 0, disabled: u, onBlur: x, placeholder: h, style: N, type: e, ...t })
   ] });
 });
 export {

package/dist/components/input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/input/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { forwardRef, useEffect, useState } from 'react';\n\nimport { IconName, iconSVG } from '@/components/icon/icons.ts';\nimport { useTouched } from '@/utils.ts';\n\nimport styles from './styles.module.css';\n\nexport type InputProps = React.ComponentPropsWithoutRef<'input'> & {\n  defaultCountryCode?: string;\n  disabled?: boolean;\n  icon?: IconName;\n  label?: string;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  placeholder?: string;\n  type?: 'datetime-local' | 'email' | 'number' | 'password' | 'radio' | 'search' | 'tel' | 'text';\n};\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      defaultCountryCode = '+47',\n      disabled = false,\n      icon,\n      label,\n      placeholder,\n      type = 'text',\n      ...props\n    },\n    ref\n  ) => {\n    const [countryCode, setCountryCode] = useState('');\n    const [phoneNumber, setPhoneNumber] = useState('');\n    const { onChange, value, ...restProps } = props;\n    const { touched, onBlur } = useTouched(value === '');\n\n    type withVars =\n      | (React.CSSProperties & {\n          '--icon-svg'?: string;\n        })\n      | undefined;\n\n    const withVars: withVars =\n      icon && type !== 'radio' && type !== 'datetime-local'\n        ? {\n            '--icon-svg': iconSVG(icon, true),\n          }\n        : undefined;\n\n    useEffect(() => {\n      if (typeof props.onChange === 'function' && type === 'tel') {\n        const target = {\n          name: props.name,\n          value: phoneNumber\n            ? (countryCode || defaultCountryCode).split(' ').join('') +\n              phoneNumber.split(' ').join('')\n            : undefined,\n        } as unknown as HTMLInputElement;\n        // eslint-disable-next-line\n        (props.onChange as any)({ target, currentTarget: target });\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [countryCode, phoneNumber]);\n\n    useEffect(() => {\n      if (type === 'tel' && !props.value) {\n        setPhoneNumber('');\n        setCountryCode('');\n      }\n    }, [props.value, type]);\n\n    const telephoneInput = (\n      <>\n        <input\n          disabled={disabled}\n          hidden\n          onChange={onChange}\n          pattern={undefined}\n          placeholder={placeholder}\n          ref={ref}\n          type={type}\n          value={value}\n        />\n        <input\n          type='text'\n          className={styles.input}\n          disabled={disabled}\n          maxLength={5}\n          onChange={(e) => setCountryCode(e.target.value)}\n          placeholder={defaultCountryCode}\n          value={countryCode}\n        />\n        <input\n          type='tel'\n          className={cx(styles.input, touched && 'touched')}\n          data-icon={icon ? 'true' : undefined}\n          disabled={disabled}\n          maxLength={14}\n          name={undefined}\n          onChange={(e) => setPhoneNumber(e.target.value)}\n          onBlur={onBlur}\n          pattern={props.pattern}\n          style={withVars}\n          value={phoneNumber}\n          {...restProps}\n        />\n      </>\n    );\n\n    return (\n      <label className={styles.label}>\n        {label && <span className={cx(props.required && styles.required)}>{label}</span>}\n        {type === 'tel' ? (\n          telephoneInput\n        ) : (\n          <input\n            ref={ref}\n            className={cx(styles.input, className, touched && 'touched')}\n            data-icon={icon ? 'true' : undefined}\n            disabled={disabled}\n            onBlur={onBlur}\n            placeholder={placeholder}\n            style={withVars}\n            type={type}\n            {...props}\n          />\n        )}\n      </label>\n    );\n  }\n);\n"],"names":["Input","forwardRef","className","defaultCountryCode","disabled","icon","label","placeholder","type","props","ref","countryCode","setCountryCode","useState","phoneNumber","setPhoneNumber","onChange","value","restProps","touched","onBlur","useTouched","withVars","iconSVG","undefined","useEffect","target","name","split","join","currentTarget","telephoneInput","jsxs","Fragment","jsx","styles","input","e","cx","pattern","required"],"mappings":";;;;;;AAkBO,MAAMA,IAAQC,EACnB,CACE;AAAA,EACEC,WAAAA;AAAAA,EACAC,oBAAAA,IAAqB;AAAA,EACrBC,UAAAA,IAAW;AAAA,EACXC,MAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACP,GAAGC;AACL,GACAC,MACG;AACH,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAE,GAC3C,CAACC,GAAaC,CAAc,IAAIF,EAAS,EAAE,GAC3C;AAAA,IAAEG,UAAAA;AAAAA,IAAUC,OAAAA;AAAAA,IAAO,GAAGC;AAAAA,EAAAA,IAAcT,GACpC;AAAA,IAAEU,SAAAA;AAAAA,IAASC,QAAAA;AAAAA,EAAAA,IAAWC,EAAWJ,MAAU,EAAE,GAQ7CK,IACJjB,KAAQG,MAAS,WAAWA,MAAS,mBACjC;AAAA,IACE,cAAce,EAAQlB,GAAM,EAAI;AAAA,EAAA,IAElCmB;AAENC,EAAAA,EAAU,MAAM;AACd,QAAI,OAAOhB,EAAMO,YAAa,cAAcR,MAAS,OAAO;AAC1D,YAAMkB,IAAS;AAAA,QACbC,MAAMlB,EAAMkB;AAAAA,QACZV,OAAOH,KACFH,KAAeR,GAAoByB,MAAM,GAAG,EAAEC,KAAK,EAAE,IACtDf,EAAYc,MAAM,GAAG,EAAEC,KAAK,EAAE,IAC9BL;AAAAA,MAAAA;AAGLf,MAAAA,EAAMO,SAAiB;AAAA,QAAEU,QAAAA;AAAAA,QAAQI,eAAeJ;AAAAA,MAAAA,CAAQ;AAAA,IAC3D;AAAA,EAEF,GAAG,CAACf,GAAaG,CAAW,CAAC,GAE7BW,EAAU,MAAM;AACd,IAAIjB,MAAS,SAAS,CAACC,EAAMQ,UAC3BF,EAAe,EAAE,GACjBH,EAAe,EAAE;AAAA,EAErB,GAAG,CAACH,EAAMQ,OAAOT,CAAI,CAAC;AAEtB,QAAMuB,IACJ,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAAC,SAAA,EACC,UAAA9B,GACA,QAAM,IACN,UAAAY,GACA,SAASQ,QACT,aAAAjB,GACA,KAAAG,GACA,MAAAF,GACA,OAAAS,EAAA,CAAa;AAAA,IAEf,gBAAAiB,EAAC,WACC,MAAK,QACL,WAAWC,EAAOC,OAClB,UAAAhC,GACA,WAAW,GACX,UAAWiC,CAAAA,MAAMzB,EAAeyB,EAAEX,OAAOT,KAAK,GAC9C,aAAad,GACb,OAAOQ,GAAY;AAAA,sBAEpB,SAAA,EACC,MAAK,OACL,WAAW2B,EAAGH,EAAOC,OAAOjB,KAAW,SAAS,GAChD,aAAWd,IAAO,SAASmB,QAC3B,UAAApB,GACA,WAAW,IACX,MAAMoB,QACN,UAAWa,CAAAA,MAAMtB,EAAesB,EAAEX,OAAOT,KAAK,GAC9C,QAAAG,GACA,SAASX,EAAM8B,SACf,OAAOjB,GACP,OAAOR,GACP,GAAII,EAAAA,CAAU;AAAA,EAAA,GAElB;AAGF,SACE,gBAAAc,EAAC,SAAA,EAAM,WAAWG,EAAO7B,OACtBA,UAAAA;AAAAA,IAAAA,KAAS,gBAAA4B,EAAC,UAAK,WAAWI,EAAG7B,EAAM+B,YAAYL,EAAOK,QAAQ,GAAIlC,UAAAA,EAAAA,CAAM;AAAA,IACxEE,MAAS,QACRuB,IAEA,gBAAAG,EAAC,SAAA,EACC,KAAAxB,GACA,WAAW4B,EAAGH,EAAOC,OAAOlC,GAAWiB,KAAW,SAAS,GAC3D,aAAWd,IAAO,SAASmB,QAC3B,UAAApB,GACA,QAAAgB,GACA,aAAAb,GACA,OAAOe,GACP,MAAAd,GACA,GAAIC,EAAAA,CAAM;AAAA,EAAA,GAGhB;AAEJ,CACF;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/input/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { forwardRef, useEffect, useState } from 'react';\n\nimport { IconName, iconSVG } from '@/components/icon/icons.ts';\nimport { useTouched } from '@/utils.ts';\n\nimport styles from './styles.module.css';\n\nexport type InputProps = React.ComponentPropsWithoutRef<'input'> & {\n  defaultCountryCode?: string;\n  disabled?: boolean;\n  icon?: IconName;\n  label?: string;\n  onClick?: React.MouseEventHandler<HTMLInputElement>;\n  placeholder?: string;\n  type?: 'datetime-local' | 'email' | 'number' | 'password' | 'radio' | 'search' | 'tel' | 'text';\n};\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className,\n      defaultCountryCode = '+47',\n      disabled = false,\n      icon,\n      label,\n      placeholder,\n      type = 'text',\n      ...props\n    },\n    ref\n  ) => {\n    const [countryCode, setCountryCode] = useState('');\n    const [phoneNumber, setPhoneNumber] = useState('');\n    const { onChange, value, ...restProps } = props;\n    const { touched, onBlur } = useTouched(value === '');\n\n    type withVars =\n      | (React.CSSProperties & {\n          '--icon-svg'?: string;\n        })\n      | undefined;\n\n    const withVars: withVars =\n      icon && type !== 'radio' && type !== 'datetime-local'\n        ? {\n            '--icon-svg': iconSVG(icon, true),\n          }\n        : undefined;\n\n    useEffect(() => {\n      if (typeof props.onChange === 'function' && type === 'tel') {\n        const target = {\n          name: props.name,\n          value: phoneNumber\n            ? (countryCode || defaultCountryCode).split(' ').join('') +\n              phoneNumber.split(' ').join('')\n            : undefined,\n        } as unknown as HTMLInputElement;\n        // eslint-disable-next-line\n        (props.onChange as any)({ target, currentTarget: target });\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [countryCode, phoneNumber]);\n\n    useEffect(() => {\n      if (type === 'tel' && !props.value) {\n        setPhoneNumber('');\n        setCountryCode('');\n      }\n    }, [props.value, type]);\n\n    const telephoneInput = (\n      <>\n        <input\n          disabled={disabled}\n          hidden\n          onChange={onChange}\n          pattern={undefined}\n          placeholder={placeholder}\n          ref={ref}\n          type={type}\n          value={value}\n        />\n        <input\n          type='text'\n          className={styles.input}\n          disabled={disabled}\n          maxLength={5}\n          onChange={(e) => setCountryCode(e.target.value)}\n          placeholder={defaultCountryCode}\n          value={countryCode}\n        />\n        <input\n          type='tel'\n          className={cx(styles.input, touched && 'touched')}\n          data-icon={icon ? 'true' : undefined}\n          disabled={disabled}\n          maxLength={14}\n          name={undefined}\n          onChange={(e) => setPhoneNumber(e.target.value)}\n          onBlur={onBlur}\n          pattern={props.pattern}\n          style={withVars}\n          value={phoneNumber}\n          {...restProps}\n        />\n      </>\n    );\n\n    return (\n      <label className={styles.label}>\n        {label && <span className={cx(props.required && styles.required)}>{label}</span>}\n        {type === 'tel' ? (\n          telephoneInput\n        ) : (\n          <input\n            ref={ref}\n            className={cx(styles.input, className, touched && 'touched')}\n            data-icon={icon ? 'true' : undefined}\n            disabled={disabled}\n            onBlur={onBlur}\n            placeholder={placeholder}\n            style={withVars}\n            type={type}\n            {...props}\n          />\n        )}\n      </label>\n    );\n  }\n);\n"],"names":["Input","forwardRef","className","defaultCountryCode","disabled","icon","label","placeholder","type","props","ref","countryCode","setCountryCode","useState","phoneNumber","setPhoneNumber","onChange","value","restProps","touched","onBlur","useTouched","withVars","iconSVG","undefined","useEffect","target","name","split","join","currentTarget","telephoneInput","jsxs","Fragment","jsx","styles","input","e","cx","pattern","required"],"mappings":";;;;;;AAkBO,MAAMA,IAAQC,EACnB,CACE;AAAA,EACEC,WAAAA;AAAAA,EACAC,oBAAAA,IAAqB;AAAA,EACrBC,UAAAA,IAAW;AAAA,EACXC,MAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACP,GAAGC;AACL,GACAC,MACG;AACH,QAAM,CAACC,GAAaC,CAAc,IAAIC,EAAS,EAAE,GAC3C,CAACC,GAAaC,CAAc,IAAIF,EAAS,EAAE,GAC3C;AAAA,IAAEG,UAAAA;AAAAA,IAAUC,OAAAA;AAAAA,IAAO,GAAGC;AAAAA,EAAAA,IAAcT,GACpC;AAAA,IAAEU,SAAAA;AAAAA,IAASC,QAAAA;AAAAA,EAAAA,IAAWC,EAAWJ,MAAU,EAAE,GAQ7CK,IACJjB,KAAQG,MAAS,WAAWA,MAAS,mBACjC;AAAA,IACE,cAAce,EAAQlB,GAAM,EAAI;AAAA,EAAA,IAElCmB;AAENC,EAAAA,EAAU,MAAM;AACd,QAAI,OAAOhB,EAAMO,YAAa,cAAcR,MAAS,OAAO;AAC1D,YAAMkB,IAAS;AAAA,QACbC,MAAMlB,EAAMkB;AAAAA,QACZV,OAAOH,KACFH,KAAeR,GAAoByB,MAAM,GAAG,EAAEC,KAAK,EAAE,IACtDf,EAAYc,MAAM,GAAG,EAAEC,KAAK,EAAE,IAC9BL;AAAAA,MAAAA;AAGLf,MAAAA,EAAMO,SAAiB;AAAA,QAAEU,QAAAA;AAAAA,QAAQI,eAAeJ;AAAAA,MAAAA,CAAQ;AAAA,IAC3D;AAAA,EAEF,GAAG,CAACf,GAAaG,CAAW,CAAC,GAE7BW,EAAU,MAAM;AACd,IAAIjB,MAAS,SAAS,CAACC,EAAMQ,UAC3BF,EAAe,EAAE,GACjBH,EAAe,EAAE;AAAA,EAErB,GAAG,CAACH,EAAMQ,OAAOT,CAAI,CAAC;AAEtB,QAAMuB,IACJ,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAAC,SAAA,EACC,UAAA9B,GACA,QAAM,IACN,UAAAY,GACA,SAASQ,QACT,aAAAjB,GACA,KAAAG,GACA,MAAAF,GACA,OAAAS,EAAA,CAAa;AAAA,IAEf,gBAAAiB,EAAC,WACC,MAAK,QACL,WAAWC,EAAOC,OAClB,UAAAhC,GACA,WAAW,GACX,UAAWiC,CAAAA,MAAMzB,EAAeyB,EAAEX,OAAOT,KAAK,GAC9C,aAAad,GACb,OAAOQ,GAAY;AAAA,sBAEpB,SAAA,EACC,MAAK,OACL,WAAW2B,EAAGH,EAAOC,OAAOjB,KAAW,SAAS,GAChD,aAAWd,IAAO,SAASmB,QAC3B,UAAApB,GACA,WAAW,IACX,MAAMoB,QACN,UAAWa,CAAAA,MAAMtB,EAAesB,EAAEX,OAAOT,KAAK,GAC9C,QAAAG,GACA,SAASX,EAAM8B,SACf,OAAOjB,GACP,OAAOR,GACP,GAAII,EAAAA,CAAU;AAAA,EAAA,GAElB;AAGF,2BACG,SAAA,EAAM,WAAWiB,EAAO7B,OAAM,kBAAA,SAC5BA,UAAAA;AAAAA,IAAAA,KAAS,gBAAA4B,EAAC,UAAK,WAAWI,EAAG7B,EAAM+B,YAAYL,EAAOK,QAAQ,GAAIlC,UAAAA,EAAAA,CAAM;AAAA,IACxEE,MAAS,QACRuB,IAEA,gBAAAG,EAAC,SAAA,EACC,KAAAxB,GACA,WAAW4B,EAAGH,EAAOC,OAAOlC,GAAWiB,KAAW,SAAS,GAC3D,aAAWd,IAAO,SAASmB,QAC3B,UAAApB,GACA,QAAAgB,GACA,aAAAb,GACA,OAAOe,GACP,MAAAd,GACA,GAAIC,EAAAA,CAAM;AAAA,EAAA,GAGhB;AAEJ,CACF;"}

package/dist/tokens.css

@@ -0,0 +1,76 @@
+/* generated by `pnpm tokens:build` 🥷 */
+
+:root {
+  --border: var(--border-width) solid var(--color-border);
+  --border-radius: calc(var(--unit) / 1.5);
+  --border-radius-large: calc(var(--unit) * 1.5);
+  --border-width: 1px;
+  --border-width-heavy: 2px;
+  --color-background-light: var(--color-neutral-light);
+  --color-black: rgb(23 23 23);
+  --color-border: var(--color-timberwolf);
+  --color-border-primary: rgb(42 42 42 / 12%);
+  --color-cod-gray: rgb(11 11 11);
+  --color-dark: rgb(180 180 180);
+  --color-draft: rgb(255 255 200 / 80%);
+  --color-electric-violet: rgb(90 35 245);
+  --color-fallback: var(--color-silver);
+  --color-green: rgb(0 146 20);
+  --color-green-dark: rgb(33 69 45);
+  --color-green-light: rgb(209 250 229);
+  --color-highlight: rgb(235 235 235);
+  --color-icon: var(--color-outer-space);
+  --color-mahogany: rgb(136 4 2);
+  --color-neutral: var(--color-timberwolf);
+  --color-neutral-light: var(--color-wild-sand);
+  --color-outer-space: rgb(82 82 82);
+  --color-placeholder-text: var(--color-silver);
+  --color-primary: var(--color-electric-violet);
+  --color-primary-dark: var(--color-purple-heart);
+  --color-purple-heart: rgb(64 25 174);
+  --color-purple-light: rgb(239 233 254);
+  --color-red: rgb(191 6 3);
+  --color-red-light: rgb(235 178 177);
+  --color-silver: rgb(194 194 194);
+  --color-surface-active: rgb(123 79 247 / 20%);
+  --color-text: var(--color-text-primary);
+  --color-text-primary: var(--color-cod-gray);
+  --color-text-secondary: var(--color-outer-space);
+  --color-timberwolf: rgb(223 223 223);
+  --color-translucent: rgba(255 255 255 / 60%);
+  --color-warning: var(--color-red);
+  --color-white: rgb(255 255 255);
+  --color-wild-sand: rgb(245 245 245);
+  --font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+  --font-size: var(--unit);
+  --font-size-h1: calc(var(--unit) * 2);
+  --font-size-h2: calc(var(--unit) * 1.25);
+  --font-size-h3: calc(var(--unit));
+  --font-size-small: calc(var(--unit) * 0.75);
+  --font-weight-bold: 700;
+  --font-weight-normal: 400;
+  --font-weight-semibold: 600;
+  --gradient: linear-gradient(180deg, rgb(255 255 255 / 100%), transparent 50%);
+  --icon-size: calc(var(--unit) * 1.5);
+  --negative-unit: calc(-1 * var(--unit));
+  --negative-unit-large: calc(var(--negative-unit) * 2);
+  --negative-unit-small: calc(var(--negative-unit) / 2);
+  --offset: calc(-2 * var(--unit));
+  --opacity-disabled: var(--opacity-minimal);
+  --opacity-minimal: 0.5;
+  --opacity-visited: var(--opacity-minimal);
+  --padding-box: 0.05px var(--unit);
+  --shadow: var(--shadow-color) var(--unit-micro) var(--unit-micro) var(--unit-tiny);
+  --shadow-big: var(--shadow-color) var(--unit-micro) var(--unit-micro) var(--unit-small);
+  --shadow-color: rgb(0 0 0 / 10%);
+  --transition-delay: 125ms;
+  --transition-duration: 250ms;
+  --transition-duration-long: calc(var(--transition-duration) * 2);
+  --transition-timing-function: ease-out;
+  --unit: 16px;
+  --unit-large: calc(var(--unit) * 2);
+  --unit-micro: calc(var(--unit) / 8);
+  --unit-small: calc(var(--unit) / 2);
+  --unit-tiny: calc(var(--unit) / 4);
+  --z-max: 2147483647;
+}

package/dist/tokens.json

@@ -0,0 +1,334 @@
+{
+  "meta": {
+    "format": "solibo-design-tokens",
+    "packageName": "@solibo/solibo-ui",
+    "packageVersion": "0.4.1",
+    "schemaVersion": 1
+  },
+  "tokens": {
+    "border": {
+      "$type": "string",
+      "$value": "{border.width} solid {color.border}",
+      "radius": {
+        "$type": "dimension",
+        "$value": "calc({unit} / 1.5)",
+        "large": {
+          "$type": "dimension",
+          "$value": "calc({unit} * 1.5)"
+        }
+      },
+      "width": {
+        "$type": "dimension",
+        "$value": "1px",
+        "heavy": {
+          "$type": "dimension",
+          "$value": "2px"
+        }
+      }
+    },
+    "color": {
+      "background": {
+        "light": {
+          "$type": "color",
+          "$value": "{color.neutral.light}"
+        }
+      },
+      "black": {
+        "$type": "color",
+        "$value": "rgb(23 23 23)"
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{color.timberwolf}",
+        "primary": {
+          "$type": "color",
+          "$value": "rgb(42 42 42 / 12%)"
+        }
+      },
+      "cod": {
+        "gray": {
+          "$type": "color",
+          "$value": "rgb(11 11 11)"
+        }
+      },
+      "dark": {
+        "$type": "color",
+        "$value": "rgb(180 180 180)"
+      },
+      "draft": {
+        "$type": "color",
+        "$value": "rgb(255 255 200 / 80%)"
+      },
+      "electric": {
+        "violet": {
+          "$type": "color",
+          "$value": "rgb(90 35 245)"
+        }
+      },
+      "fallback": {
+        "$type": "color",
+        "$value": "{color.silver}"
+      },
+      "green": {
+        "$type": "color",
+        "$value": "rgb(0 146 20)",
+        "dark": {
+          "$type": "color",
+          "$value": "rgb(33 69 45)"
+        },
+        "light": {
+          "$type": "color",
+          "$value": "rgb(209 250 229)"
+        }
+      },
+      "highlight": {
+        "$type": "color",
+        "$value": "rgb(235 235 235)"
+      },
+      "icon": {
+        "$type": "color",
+        "$value": "{color.outer.space}"
+      },
+      "mahogany": {
+        "$type": "color",
+        "$value": "rgb(136 4 2)"
+      },
+      "neutral": {
+        "$type": "color",
+        "$value": "{color.timberwolf}",
+        "light": {
+          "$type": "color",
+          "$value": "{color.wild.sand}"
+        }
+      },
+      "outer": {
+        "space": {
+          "$type": "color",
+          "$value": "rgb(82 82 82)"
+        }
+      },
+      "placeholder": {
+        "text": {
+          "$type": "color",
+          "$value": "{color.silver}"
+        }
+      },
+      "primary": {
+        "$type": "color",
+        "$value": "{color.electric.violet}",
+        "dark": {
+          "$type": "color",
+          "$value": "{color.purple.heart}"
+        }
+      },
+      "purple": {
+        "heart": {
+          "$type": "color",
+          "$value": "rgb(64 25 174)"
+        },
+        "light": {
+          "$type": "color",
+          "$value": "rgb(239 233 254)"
+        }
+      },
+      "red": {
+        "$type": "color",
+        "$value": "rgb(191 6 3)",
+        "light": {
+          "$type": "color",
+          "$value": "rgb(235 178 177)"
+        }
+      },
+      "silver": {
+        "$type": "color",
+        "$value": "rgb(194 194 194)"
+      },
+      "surface": {
+        "active": {
+          "$type": "color",
+          "$value": "rgb(123 79 247 / 20%)"
+        }
+      },
+      "text": {
+        "$type": "color",
+        "$value": "{color.text.primary}",
+        "primary": {
+          "$type": "color",
+          "$value": "{color.cod.gray}"
+        },
+        "secondary": {
+          "$type": "color",
+          "$value": "{color.outer.space}"
+        }
+      },
+      "timberwolf": {
+        "$type": "color",
+        "$value": "rgb(223 223 223)"
+      },
+      "translucent": {
+        "$type": "color",
+        "$value": "rgba(255 255 255 / 60%)"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "{color.red}"
+      },
+      "white": {
+        "$type": "color",
+        "$value": "rgb(255 255 255)"
+      },
+      "wild": {
+        "sand": {
+          "$type": "color",
+          "$value": "rgb(245 245 245)"
+        }
+      }
+    },
+    "font": {
+      "family": {
+        "$type": "fontFamily",
+        "$value": "'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
+      },
+      "size": {
+        "$type": "string",
+        "$value": "{unit}",
+        "h1": {
+          "$type": "dimension",
+          "$value": "calc({unit} * 2)"
+        },
+        "h2": {
+          "$type": "dimension",
+          "$value": "calc({unit} * 1.25)"
+        },
+        "h3": {
+          "$type": "dimension",
+          "$value": "calc({unit})"
+        },
+        "small": {
+          "$type": "dimension",
+          "$value": "calc({unit} * 0.75)"
+        }
+      },
+      "weight": {
+        "bold": {
+          "$type": "fontWeight",
+          "$value": "700"
+        },
+        "normal": {
+          "$type": "fontWeight",
+          "$value": "400"
+        },
+        "semibold": {
+          "$type": "fontWeight",
+          "$value": "600"
+        }
+      }
+    },
+    "gradient": {
+      "$type": "gradient",
+      "$value": "linear-gradient(180deg, rgb(255 255 255 / 100%), transparent 50%)"
+    },
+    "icon": {
+      "size": {
+        "$type": "dimension",
+        "$value": "calc({unit} * 1.5)"
+      }
+    },
+    "negative": {
+      "unit": {
+        "$type": "dimension",
+        "$value": "calc(-1 * {unit})",
+        "large": {
+          "$type": "dimension",
+          "$value": "calc({negative.unit} * 2)"
+        },
+        "small": {
+          "$type": "dimension",
+          "$value": "calc({negative.unit} / 2)"
+        }
+      }
+    },
+    "offset": {
+      "$type": "dimension",
+      "$value": "calc(-2 * {unit})"
+    },
+    "opacity": {
+      "disabled": {
+        "$type": "number",
+        "$value": "{opacity.minimal}"
+      },
+      "minimal": {
+        "$type": "number",
+        "$value": "0.5"
+      },
+      "visited": {
+        "$type": "number",
+        "$value": "{opacity.minimal}"
+      }
+    },
+    "padding": {
+      "box": {
+        "$type": "string",
+        "$value": "0.05px {unit}"
+      }
+    },
+    "shadow": {
+      "$type": "shadow",
+      "$value": "{shadow.color} {unit.micro} {unit.micro} {unit.tiny}",
+      "big": {
+        "$type": "shadow",
+        "$value": "{shadow.color} {unit.micro} {unit.micro} {unit.small}"
+      },
+      "color": {
+        "$type": "shadow",
+        "$value": "rgb(0 0 0 / 10%)"
+      }
+    },
+    "transition": {
+      "delay": {
+        "$type": "duration",
+        "$value": "125ms"
+      },
+      "duration": {
+        "$type": "duration",
+        "$value": "250ms",
+        "long": {
+          "$type": "duration",
+          "$value": "calc({transition.duration} * 2)"
+        }
+      },
+      "timing": {
+        "function": {
+          "$type": "string",
+          "$value": "ease-out"
+        }
+      }
+    },
+    "unit": {
+      "$type": "dimension",
+      "$value": "16px",
+      "large": {
+        "$type": "dimension",
+        "$value": "calc({unit} * 2)"
+      },
+      "micro": {
+        "$type": "dimension",
+        "$value": "calc({unit} / 8)"
+      },
+      "small": {
+        "$type": "dimension",
+        "$value": "calc({unit} / 2)"
+      },
+      "tiny": {
+        "$type": "dimension",
+        "$value": "calc({unit} / 4)"
+      }
+    },
+    "z": {
+      "max": {
+        "$type": "number",
+        "$value": "2147483647"
+      }
+    }
+  }
+}