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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purr-react-styled-components/components.text-field",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "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/utils.helpers": "0.0.6",
-    "@purr-core/hooks.focus-with-callback": "0.0.7",
-    "@purr-core/hooks.sync-state-with-props": "0.0.7"
+    "@purr-react-styled-components/components.post-adornment": "0.0.8",
+    "@purr-react-styled-components/components.pre-adornment": "0.0.8",
+    "@purr-core/utils.definitions": "0.0.11",
+    "@purr-react-styled-components/utils.helpers": "0.0.7",
+    "@purr-core/hooks.focus-with-callback": "0.0.8",
+    "@purr-core/hooks.sync-state-with-props": "0.0.8"
   },
   "devDependencies": {
-    "@purr-react-styled-components/components.icon": "0.0.6"
+    "@purr-react-styled-components/components.icon": "0.0.8"
   },
   "author": "@DinhThienPhuc",
   "license": "ISC",
@@ -44,6 +42,8 @@
   "scripts": {
     "dev": "vite build --watch",
     "build": "tsc && vite build",
+    "build:vite": "tsc && vite build",
+    "build:tsup": "tsup",
     "lint": "eslint . --ext ts,tsx --max-warnings 0"
   }
 }

package/dist/_components.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { ITextFieldProps } from './_types';
-
-export declare const TextField: React.ForwardRefExoticComponent<ITextFieldProps & React.RefAttributes<HTMLInputElement>>;

package/dist/_style.d.ts

@@ -1,15 +0,0 @@
-import { TTextFieldVariant } from './_types';
-
-export declare const Styled: {
-    Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-        $fullWidth: boolean;
-        $disabled: boolean;
-        $variant: TTextFieldVariant;
-    }>> & string;
-    Input: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {
-        $variant: TTextFieldVariant;
-        $hasPreAdornment: boolean;
-        $hasPostAdornment: boolean;
-        $hasLabel: boolean;
-    }>> & string;
-};

package/dist/_types.d.ts

@@ -1,29 +0,0 @@
-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';
-
-export type TTextFieldVariant = "standard" | "outlined" | "filled";
-export interface ITextFieldProps {
-    value?: string;
-    variant?: TTextFieldVariant;
-    onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
-    onFocus?: FocusEventHandler<HTMLInputElement>;
-    onBlur?: FocusEventHandler<HTMLInputElement>;
-    clear?: () => void;
-    htmlAttributes?: HTMLAttributes<HTMLDivElement> & IExtendable;
-    inputHtmlAttributes?: InputHTMLAttributes<HTMLInputElement> & IExtendable;
-    labelProps?: ILabelProps;
-    preAdornmentProps?: IPreAdornmentProps;
-    postAdornmentProps?: IPostAdornmentProps;
-    helperTextProps?: IHelperTextProps;
-    className?: string;
-    fullWidth?: boolean;
-    disabled?: boolean;
-    required?: boolean;
-    error?: FieldError;
-    isStandalone?: boolean;
-}

package/dist/index.cjs

@@ -1 +0,0 @@
-"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;

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-export * from './_components';
-export * from './_types';

package/dist/index.js

@@ -1,81 +0,0 @@
-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({
-    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({
-    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) => {
-  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);
-  };
-  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) ?? "" }) })
-  ] });
-});
-Y.displayName = "TextField";
-export {
-  Y as TextField
-};