@studiocubics/components 0.0.15 → 0.0.16
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{toCamelCase as t,cn as s}from"@studiocubics/utils";import{useState as l,useEffect as o}from"react";import{useRipple as a,eventWithRipple as i}from"../../Misc/Ripple/Ripple.js";import n from"./TextInput.module.css.js";import{InputErrors as c}from"../../Display/InputErrors/InputErrors.js";function p(p){const{startIcon:m,endIcon:d,label:u,error:N,fullWidth:h,disableEndIconGutters:b=!1,disableStartIconGutters:I=!1,disableInputGutters:f,size:v="md",htmlSize:G,onTouchStart:x,onClick:W,onBlur:j,slotProps:z={},className:
|
|
1
|
+
"use client";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{toCamelCase as t,cn as s}from"@studiocubics/utils";import{useState as l,useEffect as o}from"react";import{useRipple as a,eventWithRipple as i}from"../../Misc/Ripple/Ripple.js";import n from"./TextInput.module.css.js";import{InputErrors as c}from"../../Display/InputErrors/InputErrors.js";function p(p){const{startIcon:m,endIcon:d,label:u,error:N,fullWidth:h,disableEndIconGutters:b=!1,disableStartIconGutters:I=!1,disableInputGutters:f,size:v="md",htmlSize:G,onTouchStart:x,onClick:W,onBlur:j,slotProps:z={},type:C="text",className:E,...S}=p,{rippleElements:T,createRipple:y}=a(z.ripple),[R,g]=l(N&&!!N.length),k=p.id??t(u);return o(()=>{g(N&&!!N.length)},[N]),e("div",{...z.root,className:s(z.root?.className,n.root,n[`size_${v}`],h?n.fullWidth:void 0,R?n.errored:void 0),children:[u&&r("label",{...z.label,htmlFor:k,className:s(z.label?.className,n.label),children:u}),e("div",{...z.inputWrapper,className:s(z.inputWrapper?.className,n.inputWrapper),children:[m&&r("span",{...z.startIcon,className:s(n.iconContainer,z.startIcon?.className,I?n.disableGutters:void 0),children:m}),r("input",{...S,type:C,id:k,className:s(E,n.input,f?n.disableGutters:""),onTouchStart:i(y,x),onClick:i(y,W),onBlur:e=>{g(!1),j?.(e)},size:G}),d&&r("span",{...z.endIcon,className:s(n.iconContainer,z.endIcon?.className,b?n.disableGutters:void 0),children:d}),T]}),R&&r(c,{...z.error,className:s(z.error?.className,n.errorText),error:N})]})}export{p as TextInput};
|
|
2
2
|
//# sourceMappingURL=TextInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextInput.js","sources":["../../../src/Inputs/TextInput/TextInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn, toCamelCase } from \"@studiocubics/utils\";\nimport {\n useEffect,\n useState,\n type ComponentProps,\n type ReactNode,\n} from \"react\";\nimport {\n eventWithRipple,\n useRipple,\n type UseRippleProps,\n} from \"../../Misc/Ripple/Ripple\";\nimport styles from \"./TextInput.module.css\";\nimport {\n InputErrors,\n type InputErrorsProps,\n} from \"../../Display/InputErrors/InputErrors\";\n\nexport interface TextInputProps extends Omit<ComponentProps<\"input\">, \"size\"> {\n startIcon?: ReactNode;\n endIcon?: ReactNode;\n label?: string;\n error?: string | string[];\n fullWidth?: boolean;\n /**\n * Use inputSize for <input size=\"10\"/>\n */\n size?: \"sm\" | \"md\" | \"lg\";\n htmlSize?: ComponentProps<\"input\">[\"size\"];\n disableEndIconGutters?: boolean;\n disableStartIconGutters?: boolean;\n disableInputGutters?: boolean;\n slotProps?: {\n ripple?: UseRippleProps;\n startIcon?: ComponentProps<\"span\">;\n endIcon?: ComponentProps<\"span\">;\n root?: ComponentProps<\"div\">;\n inputWrapper?: ComponentProps<\"div\">;\n label?: ComponentProps<\"label\">;\n error?: InputErrorsProps;\n };\n}\n\nexport function TextInput(props: TextInputProps) {\n const {\n startIcon,\n endIcon,\n label,\n error,\n fullWidth,\n disableEndIconGutters = false,\n disableStartIconGutters = false,\n disableInputGutters,\n size = \"md\",\n htmlSize,\n onTouchStart,\n onClick,\n onBlur,\n slotProps = {},\n
|
|
1
|
+
{"version":3,"file":"TextInput.js","sources":["../../../src/Inputs/TextInput/TextInput.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn, toCamelCase } from \"@studiocubics/utils\";\nimport {\n useEffect,\n useState,\n type ComponentProps,\n type ReactNode,\n} from \"react\";\nimport {\n eventWithRipple,\n useRipple,\n type UseRippleProps,\n} from \"../../Misc/Ripple/Ripple\";\nimport styles from \"./TextInput.module.css\";\nimport {\n InputErrors,\n type InputErrorsProps,\n} from \"../../Display/InputErrors/InputErrors\";\n\nexport interface TextInputProps extends Omit<ComponentProps<\"input\">, \"size\"> {\n startIcon?: ReactNode;\n endIcon?: ReactNode;\n label?: string;\n error?: string | string[];\n fullWidth?: boolean;\n /**\n * Use inputSize for <input size=\"10\"/>\n */\n size?: \"sm\" | \"md\" | \"lg\";\n htmlSize?: ComponentProps<\"input\">[\"size\"];\n disableEndIconGutters?: boolean;\n disableStartIconGutters?: boolean;\n disableInputGutters?: boolean;\n slotProps?: {\n ripple?: UseRippleProps;\n startIcon?: ComponentProps<\"span\">;\n endIcon?: ComponentProps<\"span\">;\n root?: ComponentProps<\"div\">;\n inputWrapper?: ComponentProps<\"div\">;\n label?: ComponentProps<\"label\">;\n error?: InputErrorsProps;\n };\n}\n\nexport function TextInput(props: TextInputProps) {\n const {\n startIcon,\n endIcon,\n label,\n error,\n fullWidth,\n disableEndIconGutters = false,\n disableStartIconGutters = false,\n disableInputGutters,\n size = \"md\",\n htmlSize,\n onTouchStart,\n onClick,\n onBlur,\n slotProps = {},\n type = \"text\",\n className,\n ...inputProps\n } = props;\n const { rippleElements, createRipple } = useRipple(slotProps.ripple);\n const [isErrored, setIsErrored] = useState(error && !!error.length);\n const id = props.id ?? toCamelCase(label);\n\n useEffect(() => {\n setIsErrored(error && !!error.length);\n }, [error]);\n\n return (\n <div\n {...slotProps.root}\n className={cn(\n slotProps.root?.className,\n styles.root,\n styles[`size_${size}`],\n fullWidth ? styles.fullWidth : undefined,\n isErrored ? styles.errored : undefined,\n )}\n >\n {label && (\n <label\n {...slotProps.label}\n htmlFor={id}\n className={cn(slotProps.label?.className, styles.label)}\n >\n {label}\n </label>\n )}\n <div\n {...slotProps.inputWrapper}\n className={cn(slotProps.inputWrapper?.className, styles.inputWrapper)}\n >\n {startIcon && (\n <span\n {...slotProps.startIcon}\n className={cn(\n styles.iconContainer,\n slotProps.startIcon?.className,\n disableStartIconGutters ? styles.disableGutters : undefined,\n )}\n >\n {startIcon}\n </span>\n )}\n <input\n {...inputProps}\n type={type}\n id={id}\n className={cn(\n className,\n styles.input,\n disableInputGutters ? styles.disableGutters : \"\",\n )}\n onTouchStart={eventWithRipple(createRipple, onTouchStart)}\n onClick={eventWithRipple(createRipple, onClick)}\n onBlur={(e) => {\n setIsErrored(false);\n onBlur?.(e);\n }}\n size={htmlSize}\n />\n {endIcon && (\n <span\n {...slotProps.endIcon}\n className={cn(\n styles.iconContainer,\n slotProps.endIcon?.className,\n disableEndIconGutters ? styles.disableGutters : undefined,\n )}\n >\n {endIcon}\n </span>\n )}\n {rippleElements}\n </div>\n {isErrored && (\n <InputErrors\n {...slotProps.error}\n className={cn(slotProps.error?.className, styles.errorText)}\n error={error}\n />\n )}\n </div>\n );\n}\n"],"names":["TextInput","props","startIcon","endIcon","label","error","fullWidth","disableEndIconGutters","disableStartIconGutters","disableInputGutters","size","htmlSize","onTouchStart","onClick","onBlur","slotProps","type","className","inputProps","rippleElements","createRipple","useRipple","ripple","isErrored","setIsErrored","useState","length","id","toCamelCase","useEffect","_jsxs","root","cn","styles","undefined","errored","_jsx","htmlFor","children","inputWrapper","iconContainer","disableGutters","input","eventWithRipple","e","InputErrors","errorText"],"mappings":"sWA6CM,SAAUA,EAAUC,GACxB,MAAMC,UACJA,EAASC,QACTA,EAAOC,MACPA,EAAKC,MACLA,EAAKC,UACLA,EAASC,sBACTA,GAAwB,EAAKC,wBAC7BA,GAA0B,EAAKC,oBAC/BA,EAAmBC,KACnBA,EAAO,KAAIC,SACXA,EAAQC,aACRA,EAAYC,QACZA,EAAOC,OACPA,EAAMC,UACNA,EAAY,CAAA,EAAEC,KACdA,EAAO,OAAMC,UACbA,KACGC,GACDjB,GACEkB,eAAEA,EAAcC,aAAEA,GAAiBC,EAAUN,EAAUO,SACtDC,EAAWC,GAAgBC,EAASpB,KAAWA,EAAMqB,QACtDC,EAAK1B,EAAM0B,IAAMC,EAAYxB,GAMnC,OAJAyB,EAAU,KACRL,EAAanB,KAAWA,EAAMqB,SAC7B,CAACrB,IAGFyB,YACMf,EAAUgB,KACdd,UAAWe,EACTjB,EAAUgB,MAAMd,UAChBgB,EAAOF,KACPE,EAAO,QAAQvB,KACfJ,EAAY2B,EAAO3B,eAAY4B,EAC/BX,EAAYU,EAAOE,aAAUD,aAG9B9B,GACCgC,EAAA,QAAA,IACMrB,EAAUX,MACdiC,QAASV,EACTV,UAAWe,EAAGjB,EAAUX,OAAOa,UAAWgB,EAAO7B,OAAMkC,SAEtDlC,IAGL0B,EAAA,MAAA,IACMf,EAAUwB,aACdtB,UAAWe,EAAGjB,EAAUwB,cAActB,UAAWgB,EAAOM,wBAEvDrC,GACCkC,EAAA,OAAA,IACMrB,EAAUb,UACde,UAAWe,EACTC,EAAOO,cACPzB,EAAUb,WAAWe,UACrBT,EAA0ByB,EAAOQ,oBAAiBP,YAGnDhC,IAGLkC,EAAA,QAAA,IACMlB,EACJF,KAAMA,EACNW,GAAIA,EACJV,UAAWe,EACTf,EACAgB,EAAOS,MACPjC,EAAsBwB,EAAOQ,eAAiB,IAEhD7B,aAAc+B,EAAgBvB,EAAcR,GAC5CC,QAAS8B,EAAgBvB,EAAcP,GACvCC,OAAS8B,IACPpB,GAAa,GACbV,IAAS8B,IAEXlC,KAAMC,IAEPR,GACCiC,EAAA,OAAA,IACMrB,EAAUZ,QACdc,UAAWe,EACTC,EAAOO,cACPzB,EAAUZ,SAASc,UACnBV,EAAwB0B,EAAOQ,oBAAiBP,GACjDI,SAEAnC,IAGJgB,KAEFI,GACCa,EAACS,EAAW,IACN9B,EAAUV,MACdY,UAAWe,EAAGjB,EAAUV,OAAOY,UAAWgB,EAAOa,WACjDzC,MAAOA,MAKjB"}
|
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
7
7
|
"private": false,
|
|
8
|
-
"version": "0.0.
|
|
8
|
+
"version": "0.0.16",
|
|
9
9
|
"keywords": [
|
|
10
10
|
"@studiocubics",
|
|
11
11
|
"cubics",
|
|
@@ -34,9 +34,9 @@
|
|
|
34
34
|
"react-dom": ">= 19"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@studiocubics/hooks": "^0.0.
|
|
38
|
-
"@studiocubics/types": "^0.0.
|
|
39
|
-
"@studiocubics/utils": "^0.0.
|
|
37
|
+
"@studiocubics/hooks": "^0.0.16",
|
|
38
|
+
"@studiocubics/types": "^0.0.16",
|
|
39
|
+
"@studiocubics/utils": "^0.0.16"
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@eslint/js": "^9.39.1",
|