@purr-react-styled-components/components.text-field 0.0.6 → 0.0.7

package/dist/_types.d.ts

@@ -1,8 +1,6 @@
 import { ChangeEvent, FocusEventHandler, HTMLAttributes, InputHTMLAttributes } from 'react';
 import { FieldError } from 'react-hook-form';
 import { IExtendable } from '@purr-core/utils.definitions';
-import { IHelperTextProps } from '@purr-react-styled-components/components.helper-text';
-import { ILabelProps } from '@purr-react-styled-components/components.label';
 import { IPostAdornmentProps } from '@purr-react-styled-components/components.post-adornment';
 import { IPreAdornmentProps } from '@purr-react-styled-components/components.pre-adornment';
 
@@ -16,10 +14,8 @@ export interface ITextFieldProps {
     clear?: () => void;
     htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
     inputHtmlAttributes?: InputHTMLAttributes<HTMLInputElement> & IExtendable;
-    labelProps?: ILabelProps;
     preAdornmentProps?: IPreAdornmentProps;
     postAdornmentProps?: IPostAdornmentProps;
-    helperTextProps?: IHelperTextProps;
     className?: string;
     fullWidth?: boolean;
     disabled?: boolean;

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";var H=Object.create;var q=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var G=(i,t,e,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let d of W(t))!D.call(i,d)&&d!==e&&q(i,d,{get:()=>t[d],enumerable:!(l=M(t,d))||l.enumerable});return i};var g=(i,t,e)=>(e=i!=null?H(b(i)):{},G(t||!i||!i.__esModule?q(e,"default",{value:i,enumerable:!0}):e,i));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),w=require("clsx"),u=require("react"),J=require("@purr-core/hooks.focus-with-callback"),K=require("@purr-core/hooks.sync-state-with-props"),S=require("styled-components"),Q=require("@purr-react-styled-components/utils.helpers"),U=i=>{let t=0,e=0;const l=(i==null?void 0:i.$variant)==="standard"?0:14;return i!=null&&i.$hasPreAdornment?t=32+l:t=l,i!=null&&i.$hasPostAdornment?e=32+l:e=l,S.css(["padding:0px ","px 0px ","px;"],e,t)},z={Container:S.div.withConfig({displayName:"_style__Container",componentId:"sc-8htvm-0"})(["transition:all 200ms ease-in-out;position:relative;width:",";height:56px;border-radius:4px;",";"],({$fullWidth:i})=>i?"100%":"210px",Q.getVariantStyle),Input:S.input.withConfig({displayName:"_style__Input",componentId:"sc-8htvm-1"})(["box-sizing:border-box;transition:all 200ms ease-in-out;width:100%;margin-top:",";height:",";line-height:",";background-color:transparent;color:#ffffff;border-radius:4px;border:none;font-size:16px;",";&:focus-visible{outline:none;}&:disabled{color:#ffffff80;}"],({$hasLabel:i})=>i?"12px":"0px",({$hasLabel:i})=>i?"44px":"56px",({$hasLabel:i})=>i?"44px":"56px",U)},X=u.lazy(()=>import("@purr-react-styled-components/components.helper-text").then(i=>({default:i.HelperText}))),Y=u.lazy(()=>import("@purr-react-styled-components/components.label").then(i=>({default:i.Label}))),Z=u.lazy(()=>import("@purr-react-styled-components/components.post-adornment").then(i=>({default:i.PostAdornment}))),T=u.lazy(()=>import("@purr-react-styled-components/components.pre-adornment").then(i=>({default:i.PreAdornment}))),C=u.forwardRef(({value:i="",variant:t="standard",onChange:e,onFocus:l,onBlur:d,clear:$,htmlAttributes:L,inputHtmlAttributes:I,labelProps:n,preAdornmentProps:c,postAdornmentProps:f,helperTextProps:x,className:N="",fullWidth:v=!1,disabled:h=!1,required:y=!1,error:s=null,isStandalone:O=!1},R)=>{const{currentValue:F,setCurrentValue:V}=K(i,O),{captureOnFocus:k,captureOnBlur:m,isFocused:_}=J({onFocus:l,onBlur:d}),B=!!(_||c!=null&&c.children||F),E=j=>{e==null||e(j.target.value,j),V(j.target.value)};return a.jsxs(z.Container,{...L,$fullWidth:v,$variant:t,$disabled:h,className:w("text-field",v&&"text-field--full-width",y&&"text-field--required",h&&"text-field--disabled",s&&"text-field--error",`text-field--variant-${t}`,N),children:[a.jsx(u.Suspense,{children:!!(n!=null&&n.children)&&a.jsx(Y,{...n,variant:t,disabled:h,required:y,isLabelCollapsed:B,isFocused:_,isError:!!s})}),a.jsx(u.Suspense,{children:!!(c!=null&&c.children)&&a.jsx(T,{...c,hasLabel:!!(n!=null&&n.children),variant:t})}),a.jsx(z.Input,{...I,$variant:t,$hasPreAdornment:!!(c!=null&&c.children),$hasPostAdornment:!!$||!!(f!=null&&f.children),$hasLabel:!!(n!=null&&n.children),ref:R,value:F,disabled:h,required:y,onChange:E,onFocus:k,onBlur:m,className:w("text-field-input",`text-field-input--variant-${t}`,h&&"text-field-input--disabled",y&&"text-field-input--required")}),a.jsx(u.Suspense,{children:!!(f!=null&&f.children)&&a.jsx(Z,{...f,clear:$,variant:t})}),a.jsx(u.Suspense,{children:(x==null?void 0:x.children)&&a.jsx(X,{...x,isError:!!s,variant:t,children:(s==null?void 0:s.message)??(x==null?void 0:x.children)??""})})]})});C.displayName="TextField";exports.TextField=C;
+"use strict";var T=Object.create;var y=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var R=Object.getPrototypeOf,V=Object.prototype.hasOwnProperty;var k=(e,t,i,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of O(t))!V.call(e,a)&&a!==i&&y(e,a,{get:()=>t[a],enumerable:!(l=L(t,a))||l.enumerable});return e};var b=(e,t,i)=>(i=e!=null?T(R(e)):{},k(t||!e||!e.__esModule?y(i,"default",{value:e,enumerable:!0}):i,e));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),$=require("clsx"),c=require("react"),B=require("@purr-core/hooks.focus-with-callback"),M=require("@purr-core/hooks.sync-state-with-props"),h=require("styled-components"),W=require("@purr-react-styled-components/utils.helpers"),D=e=>{let t=0,i=0;const l=(e==null?void 0:e.$variant)==="standard"?0:14;return e!=null&&e.$hasPreAdornment?t=32+l:t=l,e!=null&&e.$hasPostAdornment?i=32+l:i=l,h.css(["padding:0px ","px 0px ","px;"],i,t)},o={Container:h.div.withConfig({displayName:"_style__Container",componentId:"sc-8htvm-0"})(["transition:all 200ms ease-in-out;position:relative;width:",";height:56px;border-radius:4px;",";"],({$fullWidth:e})=>e?"100%":"210px",W.getVariantStyle),Input:h.input.withConfig({displayName:"_style__Input",componentId:"sc-8htvm-1"})(["box-sizing:border-box;transition:all 200ms ease-in-out;width:100%;margin-top:",";height:",";line-height:",";background-color:transparent;color:#ffffff;border-radius:4px;border:none;font-size:16px;",";&:focus-visible{outline:none;}&:disabled{color:#ffffff80;}"],({$hasLabel:e})=>e?"12px":"0px",({$hasLabel:e})=>e?"44px":"56px",({$hasLabel:e})=>e?"44px":"56px",D)},E=c.lazy(()=>import("@purr-react-styled-components/components.post-adornment").then(e=>({default:e.PostAdornment}))),G=c.lazy(()=>import("@purr-react-styled-components/components.pre-adornment").then(e=>({default:e.PreAdornment}))),S=c.forwardRef(({value:e="",variant:t="standard",onChange:i,onFocus:l,onBlur:a,clear:r,htmlAttributes:v,inputHtmlAttributes:j,preAdornmentProps:n,postAdornmentProps:u,className:q="",fullWidth:g=!1,disabled:s=!1,required:f=!1,error:_=null,isStandalone:w=!1},F)=>{const{currentValue:C,setCurrentValue:I}=M(e,w),{captureOnFocus:N,captureOnBlur:m}=B({onFocus:l,onBlur:a}),z=x=>{i==null||i(x.target.value,x),I(x.target.value)};return d.jsxs(o.Container,{...v,$fullWidth:g,$variant:t,$disabled:s,className:$("text-field",g&&"text-field--full-width",f&&"text-field--required",s&&"text-field--disabled",_&&"text-field--error",`text-field--variant-${t}`,q),children:[d.jsx(c.Suspense,{children:!!(n!=null&&n.children)&&d.jsx(G,{...n,hasLabel:!0,variant:t})}),d.jsx(o.Input,{...j,$variant:t,$hasPreAdornment:!!(n!=null&&n.children),$hasPostAdornment:!!r||!!(u!=null&&u.children),$hasLabel:!0,ref:F,value:C,disabled:s,required:f,onChange:z,onFocus:N,onBlur:m,className:$("text-field-input",`text-field-input--variant-${t}`,s&&"text-field-input--disabled",f&&"text-field-input--required")}),d.jsx(c.Suspense,{children:!!(u!=null&&u.children)&&d.jsx(E,{...u,clear:r,variant:t})})]})});S.displayName="TextField";exports.TextField=S;

package/dist/index.js

@@ -1,81 +1,72 @@
-import { jsxs as O, jsx as f } from "react/jsx-runtime";
-import w from "clsx";
-import { lazy as m, forwardRef as R, Suspense as g } from "react";
-import W from "@purr-core/hooks.focus-with-callback";
-import M from "@purr-core/hooks.sync-state-with-props";
-import C, { css as D } from "styled-components";
-import { getVariantStyle as G } from "@purr-react-styled-components/utils.helpers";
-const J = (i) => {
-  let t = 0, n = 0;
-  const l = (i == null ? void 0 : i.$variant) === "standard" ? 0 : 14;
-  return i != null && i.$hasPreAdornment ? t = 32 + l : t = l, i != null && i.$hasPostAdornment ? n = 32 + l : n = l, D(["padding:0px ", "px 0px ", "px;"], n, t);
-}, F = {
-  Container: C.div.withConfig({
+import { jsxs as L, jsx as n } from "react/jsx-runtime";
+import s from "clsx";
+import { lazy as g, forwardRef as V, Suspense as r } from "react";
+import j from "@purr-core/hooks.focus-with-callback";
+import k from "@purr-core/hooks.sync-state-with-props";
+import m, { css as B } from "styled-components";
+import { getVariantStyle as O } from "@purr-react-styled-components/utils.helpers";
+const R = (t) => {
+  let e = 0, i = 0;
+  const f = (t == null ? void 0 : t.$variant) === "standard" ? 0 : 14;
+  return t != null && t.$hasPreAdornment ? e = 32 + f : e = f, t != null && t.$hasPostAdornment ? i = 32 + f : i = f, B(["padding:0px ", "px 0px ", "px;"], i, e);
+}, o = {
+  Container: m.div.withConfig({
     displayName: "_style__Container",
     componentId: "sc-8htvm-0"
   })(["transition:all 200ms ease-in-out;position:relative;width:", ";height:56px;border-radius:4px;", ";"], ({
-    $fullWidth: i
-  }) => i ? "100%" : "210px", G),
-  Input: C.input.withConfig({
+    $fullWidth: t
+  }) => t ? "100%" : "210px", O),
+  Input: m.input.withConfig({
     displayName: "_style__Input",
     componentId: "sc-8htvm-1"
   })(["box-sizing:border-box;transition:all 200ms ease-in-out;width:100%;margin-top:", ";height:", ";line-height:", ";background-color:transparent;color:#ffffff;border-radius:4px;border:none;font-size:16px;", ";&:focus-visible{outline:none;}&:disabled{color:#ffffff80;}"], ({
-    $hasLabel: i
-  }) => i ? "12px" : "0px", ({
-    $hasLabel: i
-  }) => i ? "44px" : "56px", ({
-    $hasLabel: i
-  }) => i ? "44px" : "56px", J)
-}, K = m(() => import("@purr-react-styled-components/components.helper-text").then((i) => ({
-  default: i.HelperText
-}))), Q = m(() => import("@purr-react-styled-components/components.label").then((i) => ({
-  default: i.Label
-}))), U = m(() => import("@purr-react-styled-components/components.post-adornment").then((i) => ({
-  default: i.PostAdornment
-}))), X = m(() => import("@purr-react-styled-components/components.pre-adornment").then((i) => ({
-  default: i.PreAdornment
-}))), Y = R(({
-  value: i = "",
-  variant: t = "standard",
-  onChange: n,
-  onFocus: l,
-  onBlur: L,
-  clear: $,
-  htmlAttributes: _,
-  inputHtmlAttributes: I,
-  labelProps: a,
-  preAdornmentProps: e,
-  postAdornmentProps: c,
-  helperTextProps: d,
-  className: N = "",
-  fullWidth: s = !1,
-  disabled: h = !1,
-  required: x = !1,
-  error: u = null,
-  isStandalone: z = !1
-}, V) => {
+    $hasLabel: t
+  }) => t ? "12px" : "0px", ({
+    $hasLabel: t
+  }) => t ? "44px" : "56px", ({
+    $hasLabel: t
+  }) => t ? "44px" : "56px", R)
+}, T = g(() => import("@purr-react-styled-components/components.post-adornment").then((t) => ({
+  default: t.PostAdornment
+}))), W = g(() => import("@purr-react-styled-components/components.pre-adornment").then((t) => ({
+  default: t.PreAdornment
+}))), M = V(({
+  value: t = "",
+  variant: e = "standard",
+  onChange: i,
+  onFocus: f,
+  onBlur: y,
+  clear: x,
+  htmlAttributes: b,
+  inputHtmlAttributes: $,
+  preAdornmentProps: l,
+  postAdornmentProps: a,
+  className: v = "",
+  fullWidth: h = !1,
+  disabled: d = !1,
+  required: u = !1,
+  error: S = null,
+  isStandalone: w = !1
+}, _) => {
   const {
-    currentValue: S,
-    setCurrentValue: j
-  } = M(i, z), {
-    captureOnFocus: k,
-    captureOnBlur: B,
-    isFocused: v
-  } = W({
-    onFocus: l,
-    onBlur: L
-  }), E = !!(v || e != null && e.children || S), H = (y) => {
-    n == null || n(y.target.value, y), j(y.target.value);
+    currentValue: C,
+    setCurrentValue: F
+  } = k(t, w), {
+    captureOnFocus: I,
+    captureOnBlur: N
+  } = j({
+    onFocus: f,
+    onBlur: y
+  }), z = (c) => {
+    i == null || i(c.target.value, c), F(c.target.value);
   };
-  return /* @__PURE__ */ O(F.Container, { ..._, $fullWidth: s, $variant: t, $disabled: h, className: w("text-field", s && "text-field--full-width", x && "text-field--required", h && "text-field--disabled", u && "text-field--error", `text-field--variant-${t}`, N), children: [
-    /* @__PURE__ */ f(g, { children: !!(a != null && a.children) && /* @__PURE__ */ f(Q, { ...a, variant: t, disabled: h, required: x, isLabelCollapsed: E, isFocused: v, isError: !!u }) }),
-    /* @__PURE__ */ f(g, { children: !!(e != null && e.children) && /* @__PURE__ */ f(X, { ...e, hasLabel: !!(a != null && a.children), variant: t }) }),
-    /* @__PURE__ */ f(F.Input, { ...I, $variant: t, $hasPreAdornment: !!(e != null && e.children), $hasPostAdornment: !!$ || !!(c != null && c.children), $hasLabel: !!(a != null && a.children), ref: V, value: S, disabled: h, required: x, onChange: H, onFocus: k, onBlur: B, className: w("text-field-input", `text-field-input--variant-${t}`, h && "text-field-input--disabled", x && "text-field-input--required") }),
-    /* @__PURE__ */ f(g, { children: !!(c != null && c.children) && /* @__PURE__ */ f(U, { ...c, clear: $, variant: t }) }),
-    /* @__PURE__ */ f(g, { children: (d == null ? void 0 : d.children) && /* @__PURE__ */ f(K, { ...d, isError: !!u, variant: t, children: (u == null ? void 0 : u.message) ?? (d == null ? void 0 : d.children) ?? "" }) })
+  return /* @__PURE__ */ L(o.Container, { ...b, $fullWidth: h, $variant: e, $disabled: d, className: s("text-field", h && "text-field--full-width", u && "text-field--required", d && "text-field--disabled", S && "text-field--error", `text-field--variant-${e}`, v), children: [
+    /* @__PURE__ */ n(r, { children: !!(l != null && l.children) && /* @__PURE__ */ n(W, { ...l, hasLabel: !0, variant: e }) }),
+    /* @__PURE__ */ n(o.Input, { ...$, $variant: e, $hasPreAdornment: !!(l != null && l.children), $hasPostAdornment: !!x || !!(a != null && a.children), $hasLabel: !0, ref: _, value: C, disabled: d, required: u, onChange: z, onFocus: I, onBlur: N, className: s("text-field-input", `text-field-input--variant-${e}`, d && "text-field-input--disabled", u && "text-field-input--required") }),
+    /* @__PURE__ */ n(r, { children: !!(a != null && a.children) && /* @__PURE__ */ n(T, { ...a, clear: x, variant: e }) })
   ] });
 });
-Y.displayName = "TextField";
+M.displayName = "TextField";
 export {
-  Y as TextField
+  M as TextField
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purr-react-styled-components/components.text-field",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -25,17 +25,15 @@
     "react": "*",
     "styled-components": "*",
     "clsx": "*",
-    "@purr-react-styled-components/components.helper-text": "0.0.6",
-    "@purr-react-styled-components/components.label": "0.0.6",
-    "@purr-react-styled-components/components.post-adornment": "0.0.6",
-    "@purr-react-styled-components/components.pre-adornment": "0.0.6",
-    "@purr-core/utils.definitions": "0.0.9",
+    "@purr-react-styled-components/components.post-adornment": "0.0.7",
+    "@purr-react-styled-components/components.pre-adornment": "0.0.7",
+    "@purr-core/utils.definitions": "0.0.10",
     "@purr-react-styled-components/utils.helpers": "0.0.6",
     "@purr-core/hooks.focus-with-callback": "0.0.7",
     "@purr-core/hooks.sync-state-with-props": "0.0.7"
   },
   "devDependencies": {
-    "@purr-react-styled-components/components.icon": "0.0.6"
+    "@purr-react-styled-components/components.icon": "0.0.7"
   },
   "author": "@DinhThienPhuc",
   "license": "ISC",