@solibo/solibo-ui 0.3.41 → 0.4.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -8
- package/dist/assets/index.css +1 -1
- package/dist/assets/index26.css +1 -1
- package/dist/components/_collapsible/index.cjs +1 -1
- package/dist/components/_collapsible/index.js +1 -1
- package/dist/components/_dropdown/index.cjs +1 -1
- package/dist/components/_dropdown/index.js +2 -2
- package/dist/components/_portal/index.cjs +1 -1
- package/dist/components/_portal/index.js +2 -2
- package/dist/components/accordion/index.cjs +1 -1
- package/dist/components/accordion/index.cjs.map +1 -1
- package/dist/components/accordion/index.js +11 -17
- package/dist/components/accordion/index.js.map +1 -1
- package/dist/components/button/index.cjs +1 -1
- package/dist/components/button/index.cjs.map +1 -1
- package/dist/components/button/index.js +22 -19
- package/dist/components/button/index.js.map +1 -1
- package/dist/components/dialog/index.cjs +1 -1
- package/dist/components/dialog/index.cjs.map +1 -1
- package/dist/components/dialog/index.js +6 -6
- package/dist/components/dialog/index.js.map +1 -1
- package/dist/components/file/index.cjs +1 -1
- package/dist/components/file/index.cjs.map +1 -1
- package/dist/components/file/index.js +17 -16
- package/dist/components/file/index.js.map +1 -1
- package/dist/components/input/index.cjs +1 -1
- package/dist/components/input/index.cjs.map +1 -1
- package/dist/components/input/index.js +22 -21
- package/dist/components/input/index.js.map +1 -1
- package/dist/components/select/index.cjs +1 -1
- package/dist/components/select/index.js +2 -2
- package/dist/components/textarea/index.cjs +1 -1
- package/dist/components/textarea/index.cjs.map +1 -1
- package/dist/components/textarea/index.js +1 -1
- package/dist/components/textarea/index.js.map +1 -1
- package/dist/components/toggle/index.cjs +1 -1
- package/dist/components/toggle/index.cjs.map +1 -1
- package/dist/components/toggle/index.js +17 -14
- package/dist/components/toggle/index.js.map +1 -1
- package/dist/{index-CfK1ATlt.cjs → index-D0Nzihh-.cjs} +2 -2
- package/dist/{index-CfK1ATlt.cjs.map → index-D0Nzihh-.cjs.map} +1 -1
- package/dist/{index-C_OgUYu-.js → index-s_TTRzH8.js} +2 -2
- package/dist/{index-C_OgUYu-.js.map → index-s_TTRzH8.js.map} +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.d.ts +26 -29
- package/dist/index.js +1 -1
- package/dist/tokens.css +76 -0
- package/dist/tokens.json +334 -0
- package/dist/utils--n2yqjCy.js +45 -0
- package/dist/utils--n2yqjCy.js.map +1 -0
- package/dist/utils-DBzf7CFq.cjs +2 -0
- package/dist/utils-DBzf7CFq.cjs.map +1 -0
- package/package.json +11 -5
- package/dist/utils-BFlnRYx7.js +0 -34
- package/dist/utils-BFlnRYx7.js.map +0 -1
- package/dist/utils-DqVa4K58.cjs +0 -2
- package/dist/utils-DqVa4K58.cjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/input/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport {
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/input/index.tsx"],"sourcesContent":["import cx from 'classix';\nimport { 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.ComponentPropsWithRef<'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 function Input({\n className,\n defaultCountryCode = '+47',\n disabled = false,\n icon,\n label,\n placeholder,\n ref,\n type = 'text',\n ...props\n}: InputProps) {\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"],"names":["Input","className","defaultCountryCode","disabled","icon","label","placeholder","ref","type","props","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,SAASA,EAAM;AAAA,EACpBC,WAAAA;AAAAA,EACAC,oBAAAA,IAAqB;AAAA,EACrBC,UAAAA,IAAW;AAAA,EACXC,MAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,MAAAA,IAAO;AAAA,EACP,GAAGC;AACO,GAAG;AACb,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,IAAcR,GACpC;AAAA,IAAES,SAAAA;AAAAA,IAASC,QAAAA;AAAAA,EAAAA,IAAWC,EAAWJ,MAAU,EAAE,GAQ7CK,IACJjB,KAAQI,MAAS,WAAWA,MAAS,mBACjC;AAAA,IACE,cAAcc,EAAQlB,GAAM,EAAI;AAAA,EAAA,IAElCmB;AAENC,EAAAA,EAAU,MAAM;AACd,QAAI,OAAOf,EAAMM,YAAa,cAAcP,MAAS,OAAO;AAC1D,YAAMiB,IAAS;AAAA,QACbC,MAAMjB,EAAMiB;AAAAA,QACZV,OAAOH,KACFH,KAAeR,GAAoByB,MAAM,GAAG,EAAEC,KAAK,EAAE,IACtDf,EAAYc,MAAM,GAAG,EAAEC,KAAK,EAAE,IAC9BL;AAAAA,MAAAA;AAGLd,MAAAA,EAAMM,SAAiB;AAAA,QAAEU,QAAAA;AAAAA,QAAQI,eAAeJ;AAAAA,MAAAA,CAAQ;AAAA,IAC3D;AAAA,EAEF,GAAG,CAACf,GAAaG,CAAW,CAAC,GAE7BW,EAAU,MAAM;AACd,IAAIhB,MAAS,SAAS,CAACC,EAAMO,UAC3BF,EAAe,EAAE,GACjBH,EAAe,EAAE;AAAA,EAErB,GAAG,CAACF,EAAMO,OAAOR,CAAI,CAAC;AAEtB,QAAMsB,IACJ,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAAC,SAAA,EACC,UAAA9B,GACA,QAAM,IACN,UAAAY,GACA,SAASQ,QACT,aAAAjB,GACA,KAAAC,GACA,MAAAC,GACA,OAAAQ,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,SAASV,EAAM6B,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,EAAG5B,EAAM8B,YAAYL,EAAOK,QAAQ,GAAIlC,UAAAA,EAAAA,CAAM;AAAA,IACxEG,MAAS,QACRsB,IAEA,gBAAAG,EAAC,SAAA,EACC,KAAA1B,GACA,WAAW8B,EAAGH,EAAOC,OAAOlC,GAAWiB,KAAW,SAAS,GAC3D,aAAWd,IAAO,SAASmB,QAC3B,UAAApB,GACA,QAAAgB,GACA,aAAAb,GACA,OAAOe,GACP,MAAAb,GACA,GAAIC,EAAAA,CAAM;AAAA,EAAA,GAGhB;AAEJ;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("../../classix-5H4IWnMA.cjs");require("../../icons-C_cX1FYp.cjs");require("../../utils-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("../../classix-5H4IWnMA.cjs");require("../../icons-C_cX1FYp.cjs");require("../../utils-DBzf7CFq.cjs");const e=require("../../index-D0Nzihh-.cjs");exports.Select=e.Select;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import "react/jsx-runtime";
|
|
2
2
|
import "../../classix-DG18itHa.js";
|
|
3
3
|
import "../../icons-DfmpRbxE.js";
|
|
4
|
-
import "../../utils
|
|
5
|
-
import { S as e } from "../../index-
|
|
4
|
+
import "../../utils--n2yqjCy.js";
|
|
5
|
+
import { S as e } from "../../index-s_TTRzH8.js";
|
|
6
6
|
export {
|
|
7
7
|
e as Select
|
|
8
8
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index42.css');const e=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),y=require("../../utils-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index42.css');const e=require("react/jsx-runtime"),r=require("../../classix-5H4IWnMA.cjs"),y=require("../../utils-DBzf7CFq.cjs"),l=require("../../styles.module-CwroCNAt.cjs"),d="_label_b5yys_1",b="_textarea_b5yys_5",n={label:d,textarea:b},m=({label:t,maxRows:o=12,minRows:c=3,required:s,value:a,...u})=>{const{touched:i,onBlur:x}=y.useTouched(a==="");return e.jsxs("label",{"data-component":"textarea",children:[t&&e.jsx("span",{className:r.t(n.label,s&&l.inputStyles.required),children:t}),e.jsx("textarea",{className:r.t(l.inputStyles.input,n.textarea,i&&"touched"),onBlur:x,...u,required:s,style:{"--min-rows":c,"--max-rows":o},value:a})]})};exports.Textarea=m;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/textarea/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { useTouched } from '@/utils.ts';\n\nimport inputStyles from '../input/styles.module.css';\nimport styles from './styles.module.css';\n\nexport type TextareaProps = React.ComponentPropsWithoutRef<'textarea'> & {\n label?: string;\n maxRows?: number;\n minRows?: number;\n};\n\nexport const Textarea = ({\n label,\n maxRows = 12,\n minRows = 3,\n required,\n value,\n ...props\n}: TextareaProps) => {\n const { touched, onBlur } = useTouched(value === '');\n\n return (\n <label>\n {label && <span className={cx(styles.label, required && inputStyles.required)}>{label}</span>}\n <textarea\n className={cx(inputStyles.input, styles.textarea, touched && 'touched')}\n onBlur={onBlur}\n {...props}\n required={required}\n style={\n {\n '--min-rows': minRows,\n '--max-rows': maxRows,\n } as React.CSSProperties\n }\n value={value}\n
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/textarea/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { useTouched } from '@/utils.ts';\n\nimport inputStyles from '../input/styles.module.css';\nimport styles from './styles.module.css';\n\nexport type TextareaProps = Omit<React.ComponentPropsWithoutRef<'textarea'>, 'children'> & {\n label?: string;\n maxRows?: number;\n minRows?: number;\n};\n\nexport const Textarea = ({\n label,\n maxRows = 12,\n minRows = 3,\n required,\n value,\n ...props\n}: TextareaProps) => {\n const { touched, onBlur } = useTouched(value === '');\n\n return (\n <label>\n {label && <span className={cx(styles.label, required && inputStyles.required)}>{label}</span>}\n <textarea\n className={cx(inputStyles.input, styles.textarea, touched && 'touched')}\n onBlur={onBlur}\n {...props}\n required={required}\n style={\n {\n '--min-rows': minRows,\n '--max-rows': maxRows,\n } as React.CSSProperties\n }\n value={value}\n />\n </label>\n );\n};\n"],"names":["Textarea","label","maxRows","minRows","required","value","props","touched","onBlur","useTouched","jsxs","jsx","cx","styles","inputStyles","input","textarea"],"mappings":"iTAaaA,EAAWA,CAAC,CACvBC,MAAAA,EACAC,QAAAA,EAAU,GACVC,QAAAA,EAAU,EACVC,SAAAA,EACAC,MAAAA,EACA,GAAGC,CACU,IAAM,CACnB,KAAM,CAAEC,QAAAA,EAASC,OAAAA,CAAAA,EAAWC,EAAAA,WAAWJ,IAAU,EAAE,EAEnD,OACEK,EAAAA,KAAC,QAAA,CAAK,iBAAA,WACHT,SAAAA,CAAAA,GAASU,EAAAA,IAAC,OAAA,CAAK,UAAWC,EAAAA,EAAGC,EAAOZ,MAAOG,GAAYU,EAAAA,YAAYV,QAAQ,EAAIH,SAAAA,CAAAA,CAAM,EACtFU,EAAAA,IAAC,WAAA,CACC,UAAWC,EAAAA,EAAGE,EAAAA,YAAYC,MAAOF,EAAOG,SAAUT,GAAW,SAAS,EACtE,OAAAC,KACIF,EACJ,SAAAF,EACA,MACE,CACE,aAAcD,EACd,aAAcD,CAAAA,EAGlB,MAAAG,CAAA,CAAa,CAAA,EAEjB,CAEJ"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs as p, jsx as s } from "react/jsx-runtime";
|
|
2
2
|
import { t as r } from "../../classix-DG18itHa.js";
|
|
3
|
-
import { u } from "../../utils
|
|
3
|
+
import { u } from "../../utils--n2yqjCy.js";
|
|
4
4
|
import { i as o } from "../../styles.module-C_Z8FrR5.js";
|
|
5
5
|
import '../../assets/index42.css';const y = "_label_b5yys_1", b = "_textarea_b5yys_5", l = {
|
|
6
6
|
label: y,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/textarea/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { useTouched } from '@/utils.ts';\n\nimport inputStyles from '../input/styles.module.css';\nimport styles from './styles.module.css';\n\nexport type TextareaProps = React.ComponentPropsWithoutRef<'textarea'> & {\n label?: string;\n maxRows?: number;\n minRows?: number;\n};\n\nexport const Textarea = ({\n label,\n maxRows = 12,\n minRows = 3,\n required,\n value,\n ...props\n}: TextareaProps) => {\n const { touched, onBlur } = useTouched(value === '');\n\n return (\n <label>\n {label && <span className={cx(styles.label, required && inputStyles.required)}>{label}</span>}\n <textarea\n className={cx(inputStyles.input, styles.textarea, touched && 'touched')}\n onBlur={onBlur}\n {...props}\n required={required}\n style={\n {\n '--min-rows': minRows,\n '--max-rows': maxRows,\n } as React.CSSProperties\n }\n value={value}\n
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/textarea/index.tsx"],"sourcesContent":["import cx from 'classix';\n\nimport { useTouched } from '@/utils.ts';\n\nimport inputStyles from '../input/styles.module.css';\nimport styles from './styles.module.css';\n\nexport type TextareaProps = Omit<React.ComponentPropsWithoutRef<'textarea'>, 'children'> & {\n label?: string;\n maxRows?: number;\n minRows?: number;\n};\n\nexport const Textarea = ({\n label,\n maxRows = 12,\n minRows = 3,\n required,\n value,\n ...props\n}: TextareaProps) => {\n const { touched, onBlur } = useTouched(value === '');\n\n return (\n <label>\n {label && <span className={cx(styles.label, required && inputStyles.required)}>{label}</span>}\n <textarea\n className={cx(inputStyles.input, styles.textarea, touched && 'touched')}\n onBlur={onBlur}\n {...props}\n required={required}\n style={\n {\n '--min-rows': minRows,\n '--max-rows': maxRows,\n } as React.CSSProperties\n }\n value={value}\n />\n </label>\n );\n};\n"],"names":["Textarea","label","maxRows","minRows","required","value","props","touched","onBlur","useTouched","jsxs","jsx","cx","styles","inputStyles","input","textarea"],"mappings":";;;;;;;GAaaA,IAAWA,CAAC;AAAA,EACvBC,OAAAA;AAAAA,EACAC,SAAAA,IAAU;AAAA,EACVC,SAAAA,IAAU;AAAA,EACVC,UAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACA,GAAGC;AACU,MAAM;AACnB,QAAM;AAAA,IAAEC,SAAAA;AAAAA,IAASC,QAAAA;AAAAA,EAAAA,IAAWC,EAAWJ,MAAU,EAAE;AAEnD,SACE,gBAAAK,EAAC,SAAA,EAAK,kBAAA,YACHT,UAAAA;AAAAA,IAAAA,KAAS,gBAAAU,EAAC,QAAA,EAAK,WAAWC,EAAGC,EAAOZ,OAAOG,KAAYU,EAAYV,QAAQ,GAAIH,UAAAA,EAAAA,CAAM;AAAA,IACtF,gBAAAU,EAAC,YAAA,EACC,WAAWC,EAAGE,EAAYC,OAAOF,EAAOG,UAAUT,KAAW,SAAS,GACtE,QAAAC,MACIF,GACJ,UAAAF,GACA,OACE;AAAA,MACE,cAAcD;AAAAA,MACd,cAAcD;AAAAA,IAAAA,GAGlB,OAAAG,EAAA,CAAa;AAAA,EAAA,GAEjB;AAEJ;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index2.css');const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/index2.css');const t=require("react/jsx-runtime"),g=require("../loading/index.cjs"),i="_toggle_1rg2x_1",d="_thumb_1rg2x_15",u="_track_1rg2x_25",e={toggle:i,thumb:d,track:u},m=({checked:s,disabled:c,isLoading:o,label:n,onChange:a})=>{const l=s!==void 0&&a===void 0;return t.jsxs("label",{className:e.toggle,onClick:r=>r.stopPropagation(),"data-component":"toggle",children:[t.jsx("input",{checked:s,disabled:c||o,onChange:a,readOnly:l,type:"checkbox"}),t.jsx("span",{"aria-hidden":"true",className:e.track,children:o?t.jsx(g.Loading,{size:24}):t.jsx("span",{className:e.thumb})}),n&&t.jsx("span",{className:"toggle",children:n})]})};exports.Toggle=m;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../src/components/toggle/index.tsx"],"sourcesContent":["import { Loading } from '../loading';\nimport styles from './styles.module.css';\n\nexport type ToggleProps = {\n checked?: boolean;\n disabled?: boolean;\n isLoading?: boolean;\n label?: string;\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n};\n\nexport const Toggle = ({ checked, disabled, isLoading, label, onChange }: ToggleProps) => {\n return (\n <label\n className={styles.toggle}\n onClick={(e) => e.stopPropagation()}\n >\n <input\n checked={checked}\n disabled={disabled || isLoading}\n onChange={onChange}\n type='checkbox'\n />\n <span\n aria-hidden='true'\n className={styles.track}\n >\n {isLoading ? <Loading size={24} /> : <span className={styles.thumb} />}\n </span>\n {label && <span className='toggle'>{label}</span>}\n </label>\n );\n};\n"],"names":["Toggle","checked","disabled","isLoading","label","onChange","jsxs","styles","toggle","e","stopPropagation","jsx","track","Loading","thumb"],"mappings":"gPAWaA,EAASA,CAAC,CAAEC,QAAAA,EAASC,SAAAA,EAAUC,UAAAA,EAAWC,MAAAA,EAAOC,SAAAA,CAAsB,
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../src/components/toggle/index.tsx"],"sourcesContent":["import { Loading } from '../loading';\nimport styles from './styles.module.css';\n\nexport type ToggleProps = {\n checked?: boolean;\n disabled?: boolean;\n isLoading?: boolean;\n label?: string;\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n};\n\nexport const Toggle = ({ checked, disabled, isLoading, label, onChange }: ToggleProps) => {\n const isReadOnly = checked !== undefined && onChange === undefined;\n\n return (\n <label\n className={styles.toggle}\n onClick={(e) => e.stopPropagation()}\n >\n <input\n checked={checked}\n disabled={disabled || isLoading}\n onChange={onChange}\n readOnly={isReadOnly}\n type='checkbox'\n />\n <span\n aria-hidden='true'\n className={styles.track}\n >\n {isLoading ? <Loading size={24} /> : <span className={styles.thumb} />}\n </span>\n {label && <span className='toggle'>{label}</span>}\n </label>\n );\n};\n"],"names":["Toggle","checked","disabled","isLoading","label","onChange","isReadOnly","undefined","jsxs","styles","toggle","e","stopPropagation","jsx","track","Loading","thumb"],"mappings":"gPAWaA,EAASA,CAAC,CAAEC,QAAAA,EAASC,SAAAA,EAAUC,UAAAA,EAAWC,MAAAA,EAAOC,SAAAA,CAAsB,IAAM,CACxF,MAAMC,EAAaL,IAAYM,QAAaF,IAAaE,OAEzD,OACEC,EAAAA,KAAC,QAAA,CACC,UAAWC,EAAOC,OAClB,QAAUC,GAAMA,EAAEC,gBAAAA,EAAkB,iBAAA,SAEpC,SAAA,CAAAC,EAAAA,IAAC,QAAA,CACC,QAAAZ,EACA,SAAUC,GAAYC,EACtB,SAAAE,EACA,SAAUC,EACV,KAAK,UAAA,CAAU,QAEhB,OAAA,CACC,cAAY,OACZ,UAAWG,EAAOK,MAEjBX,SAAAA,EAAYU,EAAAA,IAACE,UAAA,CAAQ,KAAM,KAASF,MAAC,QAAK,UAAWJ,EAAOO,MAAM,EACrE,EACCZ,GAASS,EAAAA,IAAC,OAAA,CAAK,UAAU,SAAUT,SAAAA,CAAAA,CAAM,CAAA,EAC5C,CAEJ"}
|
|
@@ -1,21 +1,24 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { Loading as
|
|
3
|
-
import '../../assets/index2.css';const m = "_toggle_1rg2x_1",
|
|
1
|
+
import { jsxs as g, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { Loading as i } from "../loading/index.js";
|
|
3
|
+
import '../../assets/index2.css';const m = "_toggle_1rg2x_1", d = "_thumb_1rg2x_15", p = "_track_1rg2x_25", o = {
|
|
4
4
|
toggle: m,
|
|
5
|
-
thumb:
|
|
5
|
+
thumb: d,
|
|
6
6
|
track: p
|
|
7
|
-
},
|
|
8
|
-
checked:
|
|
7
|
+
}, u = ({
|
|
8
|
+
checked: s,
|
|
9
9
|
disabled: c,
|
|
10
|
-
isLoading:
|
|
11
|
-
label:
|
|
10
|
+
isLoading: a,
|
|
11
|
+
label: e,
|
|
12
12
|
onChange: r
|
|
13
|
-
}) =>
|
|
14
|
-
|
|
15
|
-
/* @__PURE__ */
|
|
16
|
-
|
|
17
|
-
|
|
13
|
+
}) => {
|
|
14
|
+
const l = s !== void 0 && r === void 0;
|
|
15
|
+
return /* @__PURE__ */ g("label", { className: o.toggle, onClick: (n) => n.stopPropagation(), "data-component": "toggle", children: [
|
|
16
|
+
/* @__PURE__ */ t("input", { checked: s, disabled: c || a, onChange: r, readOnly: l, type: "checkbox" }),
|
|
17
|
+
/* @__PURE__ */ t("span", { "aria-hidden": "true", className: o.track, children: a ? /* @__PURE__ */ t(i, { size: 24 }) : /* @__PURE__ */ t("span", { className: o.thumb }) }),
|
|
18
|
+
e && /* @__PURE__ */ t("span", { className: "toggle", children: e })
|
|
19
|
+
] });
|
|
20
|
+
};
|
|
18
21
|
export {
|
|
19
|
-
|
|
22
|
+
u as Toggle
|
|
20
23
|
};
|
|
21
24
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/toggle/index.tsx"],"sourcesContent":["import { Loading } from '../loading';\nimport styles from './styles.module.css';\n\nexport type ToggleProps = {\n checked?: boolean;\n disabled?: boolean;\n isLoading?: boolean;\n label?: string;\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n};\n\nexport const Toggle = ({ checked, disabled, isLoading, label, onChange }: ToggleProps) => {\n return (\n <label\n className={styles.toggle}\n onClick={(e) => e.stopPropagation()}\n >\n <input\n checked={checked}\n disabled={disabled || isLoading}\n onChange={onChange}\n type='checkbox'\n />\n <span\n aria-hidden='true'\n className={styles.track}\n >\n {isLoading ? <Loading size={24} /> : <span className={styles.thumb} />}\n </span>\n {label && <span className='toggle'>{label}</span>}\n </label>\n );\n};\n"],"names":["Toggle","checked","disabled","isLoading","label","onChange","jsxs","styles","toggle","e","stopPropagation","jsx","track","Loading","thumb"],"mappings":";;;;;;GAWaA,IAASA,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAASC,UAAAA;AAAAA,EAAUC,WAAAA;AAAAA,EAAWC,OAAAA;AAAAA,EAAOC,UAAAA;AAAsB,
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/toggle/index.tsx"],"sourcesContent":["import { Loading } from '../loading';\nimport styles from './styles.module.css';\n\nexport type ToggleProps = {\n checked?: boolean;\n disabled?: boolean;\n isLoading?: boolean;\n label?: string;\n onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;\n};\n\nexport const Toggle = ({ checked, disabled, isLoading, label, onChange }: ToggleProps) => {\n const isReadOnly = checked !== undefined && onChange === undefined;\n\n return (\n <label\n className={styles.toggle}\n onClick={(e) => e.stopPropagation()}\n >\n <input\n checked={checked}\n disabled={disabled || isLoading}\n onChange={onChange}\n readOnly={isReadOnly}\n type='checkbox'\n />\n <span\n aria-hidden='true'\n className={styles.track}\n >\n {isLoading ? <Loading size={24} /> : <span className={styles.thumb} />}\n </span>\n {label && <span className='toggle'>{label}</span>}\n </label>\n );\n};\n"],"names":["Toggle","checked","disabled","isLoading","label","onChange","isReadOnly","undefined","jsxs","styles","toggle","e","stopPropagation","jsx","track","Loading","thumb"],"mappings":";;;;;;GAWaA,IAASA,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAASC,UAAAA;AAAAA,EAAUC,WAAAA;AAAAA,EAAWC,OAAAA;AAAAA,EAAOC,UAAAA;AAAsB,MAAM;AACxF,QAAMC,IAAaL,MAAYM,UAAaF,MAAaE;AAEzD,SACE,gBAAAC,EAAC,SAAA,EACC,WAAWC,EAAOC,QAClB,SAAUC,CAAAA,MAAMA,EAAEC,gBAAAA,GAAkB,kBAAA,UAEpC,UAAA;AAAA,IAAA,gBAAAC,EAAC,SAAA,EACC,SAAAZ,GACA,UAAUC,KAAYC,GACtB,UAAAE,GACA,UAAUC,GACV,MAAK,WAAA,CAAU;AAAA,sBAEhB,QAAA,EACC,eAAY,QACZ,WAAWG,EAAOK,OAEjBX,UAAAA,IAAY,gBAAAU,EAACE,GAAA,EAAQ,MAAM,QAAS,gBAAAF,EAAC,UAAK,WAAWJ,EAAOO,OAAM,GACrE;AAAA,IACCZ,KAAS,gBAAAS,EAAC,QAAA,EAAK,WAAU,UAAUT,UAAAA,EAAAA,CAAM;AAAA,EAAA,GAC5C;AAEJ;"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";require('./assets/index41.css');const t=require("react/jsx-runtime"),n=require("./classix-5H4IWnMA.cjs"),q=require("./icons-C_cX1FYp.cjs"),l=require("./utils-
|
|
2
|
-
//# sourceMappingURL=index-
|
|
1
|
+
"use strict";require('./assets/index41.css');const t=require("react/jsx-runtime"),n=require("./classix-5H4IWnMA.cjs"),q=require("./icons-C_cX1FYp.cjs"),l=require("./utils-DBzf7CFq.cjs"),v=new Set(["aria-activedescendant","aria-autocomplete","aria-busy","aria-controls","aria-describedby","aria-details","aria-disabled","aria-errormessage","aria-expanded","aria-haspopup","aria-hidden","aria-invalid","aria-keyshortcuts","aria-label","aria-labelledby","aria-live","aria-owns","aria-required","aria-roledescription","autoComplete","autoFocus","className","defaultValue","dir","disabled","form","id","multiple","name","onBlur","onChange","onClick","onFocus","onInput","onInvalid","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onPointerDown","onPointerUp","required","role","size","style","tabIndex","title","value"]);function c(r){return Object.fromEntries(Object.entries(r).filter(([e])=>e.startsWith("data-")||e.startsWith("aria-")||v.has(e)))}const y="_select_1gu7m_1",_="_label_1gu7m_24",x="_required_1gu7m_28",s={select:y,label:_,required:x},j=({children:r,label:e,placeholder:i,...a})=>{const{touched:u,onBlur:d}=l.useTouched(a.value===""),h=c(a),{style:m,...p}=h,b={...m,"--icon-svg":q.iconSVG("chevron").replace("currentColor",l.resolveColor("--color-icon"))},o=t.jsxs("select",{className:n.t(s.select,u&&"touched"),onBlur:d,style:b,...p,children:[i&&t.jsx("option",{value:"",hidden:!0,children:i},"placeholder"),r]});return e?t.jsxs("label",{"data-component":"select",children:[t.jsx("span",{className:n.t(s.label,a.required&&s.required),children:e}),o]}):o};exports.Select=j;exports.sanitizeSelectProps=c;
|
|
2
|
+
//# sourceMappingURL=index-D0Nzihh-.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-
|
|
1
|
+
{"version":3,"file":"index-D0Nzihh-.cjs","sources":["../src/components/select/sanitizeSelectProps.ts","../src/components/select/index.tsx"],"sourcesContent":["const selectKeys = new Set([\n 'aria-activedescendant',\n 'aria-autocomplete',\n 'aria-busy',\n 'aria-controls',\n 'aria-describedby',\n 'aria-details',\n 'aria-disabled',\n 'aria-errormessage',\n 'aria-expanded',\n 'aria-haspopup',\n 'aria-hidden',\n 'aria-invalid',\n 'aria-keyshortcuts',\n 'aria-label',\n 'aria-labelledby',\n 'aria-live',\n 'aria-owns',\n 'aria-required',\n 'aria-roledescription',\n 'autoComplete',\n 'autoFocus',\n 'className',\n 'defaultValue',\n 'dir',\n 'disabled',\n 'form',\n 'id',\n 'multiple',\n 'name',\n 'onBlur',\n 'onChange',\n 'onClick',\n 'onFocus',\n 'onInput',\n 'onInvalid',\n 'onKeyDown',\n 'onKeyUp',\n 'onMouseDown',\n 'onMouseUp',\n 'onPointerDown',\n 'onPointerUp',\n 'required',\n 'role',\n 'size',\n 'style',\n 'tabIndex',\n 'title',\n 'value',\n]);\n\nexport function sanitizeSelectProps<T extends Record<string, unknown>>(props: T) {\n return Object.fromEntries(\n Object.entries(props).filter(\n ([key]) => key.startsWith('data-') || key.startsWith('aria-') || selectKeys.has(key)\n )\n ) as Partial<T>;\n}\n","import cx from 'classix';\n\nimport { iconSVG } from '@/components/icon/icons.ts';\nimport { resolveColor, useTouched } from '@/utils.ts';\n\nimport { sanitizeSelectProps } from './sanitizeSelectProps';\nimport styles from './styles.module.css';\n\nexport type SelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {\n children: React.ReactNode;\n label?: string;\n placeholder?: string;\n};\n\ntype withVars = React.CSSProperties & {\n '--icon-svg'?: string;\n};\n\nexport const Select = ({ children, label, placeholder, ...props }: SelectProps) => {\n const { touched, onBlur } = useTouched(props.value === '');\n const selectProps = sanitizeSelectProps(props);\n const { style, ...restSelectProps } = selectProps;\n const withVars = {\n ...style,\n '--icon-svg': iconSVG('chevron').replace('currentColor', resolveColor('--color-icon')),\n } satisfies withVars;\n\n const selectElement = (\n <select\n className={cx(styles.select, touched && 'touched')}\n onBlur={onBlur}\n style={withVars}\n {...restSelectProps}\n >\n {placeholder && (\n <option\n key='placeholder'\n value={''}\n hidden\n >\n {placeholder}\n </option>\n )}\n {children}\n </select>\n );\n\n if (!label) {\n return selectElement;\n }\n\n return (\n <label>\n <span className={cx(styles.label, props.required && styles.required)}>{label}</span>\n {selectElement}\n </label>\n );\n};\n"],"names":["selectKeys","Set","sanitizeSelectProps","props","Object","fromEntries","entries","filter","key","startsWith","has","Select","children","label","placeholder","touched","onBlur","useTouched","value","selectProps","style","restSelectProps","withVars","iconSVG","replace","resolveColor","selectElement","jsxs","cx","styles","select","jsx","required"],"mappings":"0JAAMA,EAAa,IAAIC,IAAI,CACzB,wBACA,oBACA,YACA,gBACA,mBACA,eACA,gBACA,oBACA,gBACA,gBACA,cACA,eACA,oBACA,aACA,kBACA,YACA,YACA,gBACA,uBACA,eACA,YACA,YACA,eACA,MACA,WACA,OACA,KACA,WACA,OACA,SACA,WACA,UACA,UACA,UACA,YACA,YACA,UACA,cACA,YACA,gBACA,cACA,WACA,OACA,OACA,QACA,WACA,QACA,OAAO,CACR,EAEM,SAASC,EAAuDC,EAAU,CAC/E,OAAOC,OAAOC,YACZD,OAAOE,QAAQH,CAAK,EAAEI,OACpB,CAAC,CAACC,CAAG,IAAMA,EAAIC,WAAW,OAAO,GAAKD,EAAIC,WAAW,OAAO,GAAKT,EAAWU,IAAIF,CAAG,CACrF,CACF,CACF,sGCvCaG,EAASA,CAAC,CAAEC,SAAAA,EAAUC,MAAAA,EAAOC,YAAAA,EAAa,GAAGX,CAAmB,IAAM,CACjF,KAAM,CAAEY,QAAAA,EAASC,OAAAA,CAAAA,EAAWC,aAAWd,EAAMe,QAAU,EAAE,EACnDC,EAAcjB,EAAoBC,CAAK,EACvC,CAAEiB,MAAAA,EAAO,GAAGC,CAAAA,EAAoBF,EAChCG,EAAW,CACf,GAAGF,EACH,aAAcG,EAAAA,QAAQ,SAAS,EAAEC,QAAQ,eAAgBC,EAAAA,aAAa,cAAc,CAAC,CAAA,EAGjFC,EACJC,EAAAA,KAAC,SAAA,CACC,UAAWC,EAAAA,EAAGC,EAAOC,OAAQf,GAAW,SAAS,EACjD,OAAAC,EACA,MAAOM,EACP,GAAID,EAEHP,SAAAA,CAAAA,SACE,SAAA,CAEC,MAAO,GACP,OAAM,GAELA,YAJG,aAKN,EAEDF,CAAAA,EACH,EAGF,OAAKC,EAKHc,EAAAA,KAAC,QAAA,CAAK,iBAAA,SACJ,SAAA,CAAAI,EAAAA,IAAC,OAAA,CAAK,UAAWH,EAAAA,EAAGC,EAAOhB,MAAOV,EAAM6B,UAAYH,EAAOG,QAAQ,EAAInB,SAAAA,CAAAA,CAAM,EAC5Ea,CAAAA,EACH,EAPOA,CASX"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as i, jsx as n } from "react/jsx-runtime";
|
|
2
2
|
import { t as l } from "./classix-DG18itHa.js";
|
|
3
3
|
import { i as b } from "./icons-DfmpRbxE.js";
|
|
4
|
-
import { u as f, r as v } from "./utils
|
|
4
|
+
import { u as f, r as v } from "./utils--n2yqjCy.js";
|
|
5
5
|
import './assets/index41.css';const y = /* @__PURE__ */ new Set(["aria-activedescendant", "aria-autocomplete", "aria-busy", "aria-controls", "aria-describedby", "aria-details", "aria-disabled", "aria-errormessage", "aria-expanded", "aria-haspopup", "aria-hidden", "aria-invalid", "aria-keyshortcuts", "aria-label", "aria-labelledby", "aria-live", "aria-owns", "aria-required", "aria-roledescription", "autoComplete", "autoFocus", "className", "defaultValue", "dir", "disabled", "form", "id", "multiple", "name", "onBlur", "onChange", "onClick", "onFocus", "onInput", "onInvalid", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseUp", "onPointerDown", "onPointerUp", "required", "role", "size", "style", "tabIndex", "title", "value"]);
|
|
6
6
|
function _(a) {
|
|
7
7
|
return Object.fromEntries(Object.entries(a).filter(([e]) => e.startsWith("data-") || e.startsWith("aria-") || y.has(e)));
|
|
@@ -38,4 +38,4 @@ export {
|
|
|
38
38
|
j as S,
|
|
39
39
|
_ as s
|
|
40
40
|
};
|
|
41
|
-
//# sourceMappingURL=index-
|
|
41
|
+
//# sourceMappingURL=index-s_TTRzH8.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-
|
|
1
|
+
{"version":3,"file":"index-s_TTRzH8.js","sources":["../src/components/select/sanitizeSelectProps.ts","../src/components/select/index.tsx"],"sourcesContent":["const selectKeys = new Set([\n 'aria-activedescendant',\n 'aria-autocomplete',\n 'aria-busy',\n 'aria-controls',\n 'aria-describedby',\n 'aria-details',\n 'aria-disabled',\n 'aria-errormessage',\n 'aria-expanded',\n 'aria-haspopup',\n 'aria-hidden',\n 'aria-invalid',\n 'aria-keyshortcuts',\n 'aria-label',\n 'aria-labelledby',\n 'aria-live',\n 'aria-owns',\n 'aria-required',\n 'aria-roledescription',\n 'autoComplete',\n 'autoFocus',\n 'className',\n 'defaultValue',\n 'dir',\n 'disabled',\n 'form',\n 'id',\n 'multiple',\n 'name',\n 'onBlur',\n 'onChange',\n 'onClick',\n 'onFocus',\n 'onInput',\n 'onInvalid',\n 'onKeyDown',\n 'onKeyUp',\n 'onMouseDown',\n 'onMouseUp',\n 'onPointerDown',\n 'onPointerUp',\n 'required',\n 'role',\n 'size',\n 'style',\n 'tabIndex',\n 'title',\n 'value',\n]);\n\nexport function sanitizeSelectProps<T extends Record<string, unknown>>(props: T) {\n return Object.fromEntries(\n Object.entries(props).filter(\n ([key]) => key.startsWith('data-') || key.startsWith('aria-') || selectKeys.has(key)\n )\n ) as Partial<T>;\n}\n","import cx from 'classix';\n\nimport { iconSVG } from '@/components/icon/icons.ts';\nimport { resolveColor, useTouched } from '@/utils.ts';\n\nimport { sanitizeSelectProps } from './sanitizeSelectProps';\nimport styles from './styles.module.css';\n\nexport type SelectProps = React.SelectHTMLAttributes<HTMLSelectElement> & {\n children: React.ReactNode;\n label?: string;\n placeholder?: string;\n};\n\ntype withVars = React.CSSProperties & {\n '--icon-svg'?: string;\n};\n\nexport const Select = ({ children, label, placeholder, ...props }: SelectProps) => {\n const { touched, onBlur } = useTouched(props.value === '');\n const selectProps = sanitizeSelectProps(props);\n const { style, ...restSelectProps } = selectProps;\n const withVars = {\n ...style,\n '--icon-svg': iconSVG('chevron').replace('currentColor', resolveColor('--color-icon')),\n } satisfies withVars;\n\n const selectElement = (\n <select\n className={cx(styles.select, touched && 'touched')}\n onBlur={onBlur}\n style={withVars}\n {...restSelectProps}\n >\n {placeholder && (\n <option\n key='placeholder'\n value={''}\n hidden\n >\n {placeholder}\n </option>\n )}\n {children}\n </select>\n );\n\n if (!label) {\n return selectElement;\n }\n\n return (\n <label>\n <span className={cx(styles.label, props.required && styles.required)}>{label}</span>\n {selectElement}\n </label>\n );\n};\n"],"names":["selectKeys","Set","sanitizeSelectProps","props","Object","fromEntries","entries","filter","key","startsWith","has","Select","children","label","placeholder","touched","onBlur","useTouched","value","selectProps","style","restSelectProps","withVars","iconSVG","replace","resolveColor","selectElement","jsxs","cx","styles","select","jsx","required"],"mappings":";;;;AAAA,MAAMA,IAAa,oBAAIC,IAAI,CACzB,yBACA,qBACA,aACA,iBACA,oBACA,gBACA,iBACA,qBACA,iBACA,iBACA,eACA,gBACA,qBACA,cACA,mBACA,aACA,aACA,iBACA,wBACA,gBACA,aACA,aACA,gBACA,OACA,YACA,QACA,MACA,YACA,QACA,UACA,YACA,WACA,WACA,WACA,aACA,aACA,WACA,eACA,aACA,iBACA,eACA,YACA,QACA,QACA,SACA,YACA,SACA,OAAO,CACR;AAEM,SAASC,EAAuDC,GAAU;AAC/E,SAAOC,OAAOC,YACZD,OAAOE,QAAQH,CAAK,EAAEI,OACpB,CAAC,CAACC,CAAG,MAAMA,EAAIC,WAAW,OAAO,KAAKD,EAAIC,WAAW,OAAO,KAAKT,EAAWU,IAAIF,CAAG,CACrF,CACF;AACF;;;;;GCvCaG,IAASA,CAAC;AAAA,EAAEC,UAAAA;AAAAA,EAAUC,OAAAA;AAAAA,EAAOC,aAAAA;AAAAA,EAAa,GAAGX;AAAmB,MAAM;AACjF,QAAM;AAAA,IAAEY,SAAAA;AAAAA,IAASC,QAAAA;AAAAA,EAAAA,IAAWC,EAAWd,EAAMe,UAAU,EAAE,GACnDC,IAAcjB,EAAoBC,CAAK,GACvC;AAAA,IAAEiB,OAAAA;AAAAA,IAAO,GAAGC;AAAAA,EAAAA,IAAoBF,GAChCG,IAAW;AAAA,IACf,GAAGF;AAAAA,IACH,cAAcG,EAAQ,SAAS,EAAEC,QAAQ,gBAAgBC,EAAa,cAAc,CAAC;AAAA,EAAA,GAGjFC,IACJ,gBAAAC,EAAC,UAAA,EACC,WAAWC,EAAGC,EAAOC,QAAQf,KAAW,SAAS,GACjD,QAAAC,GACA,OAAOM,GACP,GAAID,GAEHP,UAAAA;AAAAA,IAAAA,uBACE,UAAA,EAEC,OAAO,IACP,QAAM,IAELA,eAJG,aAKN;AAAA,IAEDF;AAAAA,EAAAA,GACH;AAGF,SAAKC,IAKH,gBAAAc,EAAC,SAAA,EAAK,kBAAA,UACJ,UAAA;AAAA,IAAA,gBAAAI,EAAC,QAAA,EAAK,WAAWH,EAAGC,EAAOhB,OAAOV,EAAM6B,YAAYH,EAAOG,QAAQ,GAAInB,UAAAA,EAAAA,CAAM;AAAA,IAC5Ea;AAAAA,EAAAA,GACH,IAPOA;AASX;"}
|
package/dist/index.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./assets/index.css');const e=require("./components/_avatar/index.cjs"),n=require("./components/_card/index.cjs"),o=require("./components/_collapsible/index.cjs"),r=require("./components/_croppable/index.cjs"),t=require("./components/_dropdown/index.cjs"),i=require("./components/_dropzone/index.cjs"),s=require("./components/_editor/index.cjs"),c=require("./components/_messages/index.cjs"),_=require("./components/_portal/index.cjs"),a=require("./components/_sortable/index.cjs"),d=require("./components/_toasts/index.cjs"),p=require("./components/_widget/index.cjs"),u=require("./components/accordion/index.cjs"),m=require("./components/app-link/index.cjs"),x=require("./components/aside/index.cjs"),l=require("./components/badge/index.cjs"),q=require("./components/banner/index.cjs"),g=require("./components/branding/index.cjs"),b=require("./components/button/index.cjs"),T=require("./components/checkbox/index.cjs"),L=require("./components/controls/index.cjs"),C=require("./components/dialog/index.cjs"),k=require("./components/figure/index.cjs"),A=require("./components/file/index.cjs"),B=require("./components/footer/index.cjs"),F=require("./components/form/index.cjs"),h=require("./components/graph/index.cjs"),v=require("./components/group/index.cjs"),D=require("./components/header/index.cjs"),I=require("./components/icon/index.cjs"),S=require("./components/image/index.cjs"),f=require("./components/input/index.cjs"),y=require("./components/layout/index.cjs"),M=require("./components/link/index.cjs"),w=require("./components/list/index.cjs"),G=require("./components/loading/index.cjs"),z=require("./components/message/index.cjs"),P=require("./components/nav/index.cjs"),E=require("./index-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./assets/index.css');const e=require("./components/_avatar/index.cjs"),n=require("./components/_card/index.cjs"),o=require("./components/_collapsible/index.cjs"),r=require("./components/_croppable/index.cjs"),t=require("./components/_dropdown/index.cjs"),i=require("./components/_dropzone/index.cjs"),s=require("./components/_editor/index.cjs"),c=require("./components/_messages/index.cjs"),_=require("./components/_portal/index.cjs"),a=require("./components/_sortable/index.cjs"),d=require("./components/_toasts/index.cjs"),p=require("./components/_widget/index.cjs"),u=require("./components/accordion/index.cjs"),m=require("./components/app-link/index.cjs"),x=require("./components/aside/index.cjs"),l=require("./components/badge/index.cjs"),q=require("./components/banner/index.cjs"),g=require("./components/branding/index.cjs"),b=require("./components/button/index.cjs"),T=require("./components/checkbox/index.cjs"),L=require("./components/controls/index.cjs"),C=require("./components/dialog/index.cjs"),k=require("./components/figure/index.cjs"),A=require("./components/file/index.cjs"),B=require("./components/footer/index.cjs"),F=require("./components/form/index.cjs"),h=require("./components/graph/index.cjs"),v=require("./components/group/index.cjs"),D=require("./components/header/index.cjs"),I=require("./components/icon/index.cjs"),S=require("./components/image/index.cjs"),f=require("./components/input/index.cjs"),y=require("./components/layout/index.cjs"),M=require("./components/link/index.cjs"),w=require("./components/list/index.cjs"),G=require("./components/loading/index.cjs"),z=require("./components/message/index.cjs"),P=require("./components/nav/index.cjs"),E=require("./index-D0Nzihh-.cjs"),H=require("./components/table/index.cjs"),N=require("./components/textarea/index.cjs"),W=require("./components/toast/index.cjs"),j=require("./components/toggle/index.cjs"),O=require("./components/toolbar/index.cjs");exports.Avatar=e.Avatar;exports.Card=n.Card;exports.Collapsible=o.Collapsible;exports.Croppable=r.Croppable;exports.Dropdown=t.Dropdown;exports.Dropzone=i.Dropzone;exports.Editor=s.Editor;exports.Messages=c.Messages;exports.Portal=_.Portal;exports.Sortable=a.Sortable;exports.Toasts=d.Toasts;exports.Widget=p.Widget;exports.Accordion=u.Accordion;exports.AppLink=m.AppLink;exports.Aside=x.Aside;exports.Badge=l.Badge;exports.Banner=q.Banner;exports.Branding=g.Branding;exports.Button=b.Button;exports.Checkbox=T.Checkbox;exports.Controls=L.Controls;exports.Dialog=C.Dialog;exports.Figure=k.Figure;exports.File=A.File;exports.Footer=B.Footer;exports.Form=F.Form;exports.Graph=h.Graph;exports.Group=v.Group;exports.Header=D.Header;exports.Icon=I.Icon;exports.Image=S.Image;exports.Input=f.Input;exports.Layout=y.Layout;exports.Link=M.Link;exports.List=w.List;exports.Loading=G.Loading;exports.Message=z.Message;exports.Nav=P.Nav;exports.Select=E.Select;exports.Table=H.Table;exports.Textarea=N.Textarea;exports.Toast=W.Toast;exports.Toggle=j.Toggle;exports.Toolbar=O.Toolbar;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
package/dist/index.d.ts
CHANGED
|
@@ -1,22 +1,15 @@
|
|
|
1
|
-
import { ButtonHTMLAttributes } from 'react';
|
|
2
1
|
import { ChangeEvent } from 'react';
|
|
3
2
|
import { default as default_2 } from 'react';
|
|
4
|
-
import { DetailedHTMLProps } from 'react';
|
|
5
|
-
import { ForwardRefExoticComponent } from 'react';
|
|
6
3
|
import { ImgHTMLAttributes } from 'react';
|
|
7
|
-
import { InputHTMLAttributes } from 'react';
|
|
8
4
|
import { JSX } from 'react/jsx-runtime';
|
|
9
5
|
import { ReactNode } from 'react';
|
|
10
|
-
import { RefAttributes } from 'react';
|
|
11
6
|
|
|
12
|
-
export declare const Accordion: ({ children,
|
|
7
|
+
export declare const Accordion: ({ children, open, summary }: AccordionProps) => JSX.Element;
|
|
13
8
|
|
|
14
9
|
declare type AccordionProps = {
|
|
15
10
|
children: React.ReactNode;
|
|
16
|
-
icon?: IconName;
|
|
17
|
-
label?: string;
|
|
18
11
|
open?: boolean;
|
|
19
|
-
summary
|
|
12
|
+
summary: React.ReactNode;
|
|
20
13
|
};
|
|
21
14
|
|
|
22
15
|
export declare const AppLink: ({ label, type }: AppLinkProps) => JSX.Element;
|
|
@@ -73,14 +66,16 @@ declare const brandingSVG: {
|
|
|
73
66
|
logo: string;
|
|
74
67
|
};
|
|
75
68
|
|
|
76
|
-
export declare
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
69
|
+
export declare function Button({ children, className, disabled, icon, onClick, ref, variant, ...props }: ButtonProps): JSX.Element;
|
|
70
|
+
|
|
71
|
+
declare type ButtonProps = React.ComponentPropsWithRef<'button'> & {
|
|
72
|
+
children: React.ReactNode;
|
|
73
|
+
className?: string;
|
|
74
|
+
disabled?: boolean;
|
|
75
|
+
icon?: IconName;
|
|
76
|
+
onClick?: React.MouseEventHandler<HTMLButtonElement>;
|
|
77
|
+
variant?: keyof typeof variants_4;
|
|
78
|
+
};
|
|
84
79
|
|
|
85
80
|
export declare const Card: ({ children, draft, image, onClick, scheduled }: CardProps) => JSX.Element;
|
|
86
81
|
|
|
@@ -187,10 +182,10 @@ declare type FigureProps = {
|
|
|
187
182
|
offset?: 'left' | 'right';
|
|
188
183
|
};
|
|
189
184
|
|
|
190
|
-
declare const File_2: ({ name, onClick, onDelete, url }: FileProps) => JSX.Element;
|
|
185
|
+
declare const File_2: ({ name, onClick, onDelete, ref, url }: FileProps) => JSX.Element;
|
|
191
186
|
export { File_2 as File }
|
|
192
187
|
|
|
193
|
-
declare type FileProps = {
|
|
188
|
+
declare type FileProps = React.ComponentPropsWithRef<'div'> & {
|
|
194
189
|
name: string;
|
|
195
190
|
onClick?: () => void;
|
|
196
191
|
onDelete?: () => void;
|
|
@@ -305,15 +300,17 @@ declare type ImageProps = ImgHTMLAttributes<HTMLImageElement> & {
|
|
|
305
300
|
showOnError?: boolean;
|
|
306
301
|
};
|
|
307
302
|
|
|
308
|
-
export declare
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
303
|
+
export declare function Input({ className, defaultCountryCode, disabled, icon, label, placeholder, ref, type, ...props }: InputProps): JSX.Element;
|
|
304
|
+
|
|
305
|
+
declare type InputProps = React.ComponentPropsWithRef<'input'> & {
|
|
306
|
+
defaultCountryCode?: string;
|
|
307
|
+
disabled?: boolean;
|
|
308
|
+
icon?: IconName;
|
|
309
|
+
label?: string;
|
|
310
|
+
onClick?: React.MouseEventHandler<HTMLInputElement>;
|
|
311
|
+
placeholder?: string;
|
|
312
|
+
type?: 'datetime-local' | 'email' | 'number' | 'password' | 'radio' | 'search' | 'tel' | 'text';
|
|
313
|
+
};
|
|
317
314
|
|
|
318
315
|
export declare const Layout: ({ children, isLoading, feature, ...props }: LayoutProps) => JSX.Element;
|
|
319
316
|
|
|
@@ -437,7 +434,7 @@ declare type TableProps = React.TableHTMLAttributes<HTMLTableElement> & {
|
|
|
437
434
|
|
|
438
435
|
export declare const Textarea: ({ label, maxRows, minRows, required, value, ...props }: TextareaProps) => JSX.Element;
|
|
439
436
|
|
|
440
|
-
declare type TextareaProps = React.ComponentPropsWithoutRef<'textarea'> & {
|
|
437
|
+
declare type TextareaProps = Omit<React.ComponentPropsWithoutRef<'textarea'>, 'children'> & {
|
|
441
438
|
label?: string;
|
|
442
439
|
maxRows?: number;
|
|
443
440
|
minRows?: number;
|
package/dist/index.js
CHANGED
|
@@ -36,7 +36,7 @@ import { List as co } from "./components/list/index.js";
|
|
|
36
36
|
import { Loading as Co } from "./components/loading/index.js";
|
|
37
37
|
import { Message as Ao } from "./components/message/index.js";
|
|
38
38
|
import { Nav as Fo } from "./components/nav/index.js";
|
|
39
|
-
import { S as Do } from "./index-
|
|
39
|
+
import { S as Do } from "./index-s_TTRzH8.js";
|
|
40
40
|
import { Table as So } from "./components/table/index.js";
|
|
41
41
|
import { Textarea as vo } from "./components/textarea/index.js";
|
|
42
42
|
import { Toast as Mo } from "./components/toast/index.js";
|
package/dist/tokens.css
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
/* generated by `pnpm tokens:build` 🥷 */
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
--border: var(--border-width) solid var(--color-border);
|
|
5
|
+
--border-radius: calc(var(--unit) / 1.5);
|
|
6
|
+
--border-radius-large: calc(var(--unit) * 1.5);
|
|
7
|
+
--border-width: 1px;
|
|
8
|
+
--border-width-heavy: 2px;
|
|
9
|
+
--color-background-light: var(--color-neutral-light);
|
|
10
|
+
--color-black: rgb(23 23 23);
|
|
11
|
+
--color-border: var(--color-timberwolf);
|
|
12
|
+
--color-border-primary: rgb(42 42 42 / 12%);
|
|
13
|
+
--color-cod-gray: rgb(11 11 11);
|
|
14
|
+
--color-dark: rgb(180 180 180);
|
|
15
|
+
--color-draft: rgb(255 255 200 / 80%);
|
|
16
|
+
--color-electric-violet: rgb(90 35 245);
|
|
17
|
+
--color-fallback: var(--color-silver);
|
|
18
|
+
--color-green: rgb(0 146 20);
|
|
19
|
+
--color-green-dark: rgb(33 69 45);
|
|
20
|
+
--color-green-light: rgb(209 250 229);
|
|
21
|
+
--color-highlight: rgb(235 235 235);
|
|
22
|
+
--color-icon: var(--color-outer-space);
|
|
23
|
+
--color-mahogany: rgb(136 4 2);
|
|
24
|
+
--color-neutral: var(--color-timberwolf);
|
|
25
|
+
--color-neutral-light: var(--color-wild-sand);
|
|
26
|
+
--color-outer-space: rgb(82 82 82);
|
|
27
|
+
--color-placeholder-text: var(--color-silver);
|
|
28
|
+
--color-primary: var(--color-electric-violet);
|
|
29
|
+
--color-primary-dark: var(--color-purple-heart);
|
|
30
|
+
--color-purple-heart: rgb(64 25 174);
|
|
31
|
+
--color-purple-light: rgb(239 233 254);
|
|
32
|
+
--color-red: rgb(191 6 3);
|
|
33
|
+
--color-red-light: rgb(235 178 177);
|
|
34
|
+
--color-silver: rgb(194 194 194);
|
|
35
|
+
--color-surface-active: rgb(123 79 247 / 20%);
|
|
36
|
+
--color-text: var(--color-text-primary);
|
|
37
|
+
--color-text-primary: var(--color-cod-gray);
|
|
38
|
+
--color-text-secondary: var(--color-outer-space);
|
|
39
|
+
--color-timberwolf: rgb(223 223 223);
|
|
40
|
+
--color-translucent: rgba(255 255 255 / 60%);
|
|
41
|
+
--color-warning: var(--color-red);
|
|
42
|
+
--color-white: rgb(255 255 255);
|
|
43
|
+
--color-wild-sand: rgb(245 245 245);
|
|
44
|
+
--font-family: 'Figtree', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
|
45
|
+
--font-size: var(--unit);
|
|
46
|
+
--font-size-h1: calc(var(--unit) * 2);
|
|
47
|
+
--font-size-h2: calc(var(--unit) * 1.25);
|
|
48
|
+
--font-size-h3: calc(var(--unit));
|
|
49
|
+
--font-size-small: calc(var(--unit) * 0.75);
|
|
50
|
+
--font-weight-bold: 700;
|
|
51
|
+
--font-weight-normal: 400;
|
|
52
|
+
--font-weight-semibold: 600;
|
|
53
|
+
--gradient: linear-gradient(180deg, rgb(255 255 255 / 100%), transparent 50%);
|
|
54
|
+
--icon-size: calc(var(--unit) * 1.5);
|
|
55
|
+
--negative-unit: calc(-1 * var(--unit));
|
|
56
|
+
--negative-unit-large: calc(var(--negative-unit) * 2);
|
|
57
|
+
--negative-unit-small: calc(var(--negative-unit) / 2);
|
|
58
|
+
--offset: calc(-2 * var(--unit));
|
|
59
|
+
--opacity-disabled: var(--opacity-minimal);
|
|
60
|
+
--opacity-minimal: 0.5;
|
|
61
|
+
--opacity-visited: var(--opacity-minimal);
|
|
62
|
+
--padding-box: 0.05px var(--unit);
|
|
63
|
+
--shadow: var(--shadow-color) var(--unit-micro) var(--unit-micro) var(--unit-tiny);
|
|
64
|
+
--shadow-big: var(--shadow-color) var(--unit-micro) var(--unit-micro) var(--unit-small);
|
|
65
|
+
--shadow-color: rgb(0 0 0 / 10%);
|
|
66
|
+
--transition-delay: 125ms;
|
|
67
|
+
--transition-duration: 250ms;
|
|
68
|
+
--transition-duration-long: calc(var(--transition-duration) * 2);
|
|
69
|
+
--transition-timing-function: ease-out;
|
|
70
|
+
--unit: 16px;
|
|
71
|
+
--unit-large: calc(var(--unit) * 2);
|
|
72
|
+
--unit-micro: calc(var(--unit) / 8);
|
|
73
|
+
--unit-small: calc(var(--unit) / 2);
|
|
74
|
+
--unit-tiny: calc(var(--unit) / 4);
|
|
75
|
+
--z-max: 2147483647;
|
|
76
|
+
}
|