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

package/dist/index.cjs

@@ -1 +1,31 @@
-"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;
+'use strict';var m=require('clsx'),r=require('react'),z=require('@purr-core/hooks.focus-with-callback'),M=require('@purr-core/hooks.sync-state-with-props'),x=require('styled-components'),utils_helpers=require('@purr-react-styled-components/utils.helpers');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var m__default=/*#__PURE__*/_interopDefault(m);var r__default=/*#__PURE__*/_interopDefault(r);var z__default=/*#__PURE__*/_interopDefault(z);var M__default=/*#__PURE__*/_interopDefault(M);var x__default=/*#__PURE__*/_interopDefault(x);var w=e=>{let t=0,i=0,n=e?.$variant==="standard"?0:14;return e?.$hasPreAdornment?t=32+n:t=n,e?.$hasPostAdornment?i=32+n:i=n,x.css`
+    padding: 0px ${i}px 0px ${t}px;
+  `},f={Container:x__default.default.div`
+    transition: all 200ms ease-in-out;
+    position: relative;
+    width: ${({$fullWidth:e})=>e?"100%":"210px"};
+    height: 56px;
+    border-radius: 4px;
+    ${utils_helpers.getVariantStyle};
+  `,Input:x__default.default.input`
+    box-sizing: border-box;
+    transition: all 200ms ease-in-out;
+    width: 100%;
+    margin-top: ${({$hasLabel:e})=>e?"12px":"0px"};
+    height: ${({$hasLabel:e})=>e?"44px":"56px"};
+    line-height: ${({$hasLabel:e})=>e?"44px":"56px"};
+    background-color: transparent;
+    color: #ffffff;
+    border-radius: 4px;
+    border: none;
+    font-size: 16px;
+    ${w};
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    &:disabled {
+      color: #ffffff80;
+    }
+  `};var N=r.lazy(()=>import('@purr-react-styled-components/components.post-adornment').then(e=>({default:e.PostAdornment}))),W=r.lazy(()=>import('@purr-react-styled-components/components.pre-adornment').then(e=>({default:e.PreAdornment}))),k=r.forwardRef(({value:e="",variant:t="standard",onChange:i,onFocus:n,onBlur:c,clear:u,htmlAttributes:b,inputHtmlAttributes:g,preAdornmentProps:a,postAdornmentProps:l,className:T="",fullWidth:p=false,disabled:o=false,required:d=false,error:v=null,isStandalone:P=false},y)=>{let{currentValue:F,setCurrentValue:S}=M__default.default(e,P),{captureOnFocus:C,captureOnBlur:A}=z__default.default({onFocus:n,onBlur:c}),V=s=>{i?.(s.target.value,s),S(s.target.value);};return r__default.default.createElement(f.Container,{...b,$fullWidth:p,$variant:t,$disabled:o,className:m__default.default("text-field",p&&"text-field--full-width",d&&"text-field--required",o&&"text-field--disabled",v&&"text-field--error",`text-field--variant-${t}`,T)},r__default.default.createElement(r.Suspense,null,!!a?.children&&r__default.default.createElement(W,{...a,hasLabel:true,variant:t})),r__default.default.createElement(f.Input,{...g,$variant:t,$hasPreAdornment:!!a?.children,$hasPostAdornment:!!u||!!l?.children,$hasLabel:true,ref:y,value:F,disabled:o,required:d,onChange:V,onFocus:C,onBlur:A,className:m__default.default("text-field-input",`text-field-input--variant-${t}`,o&&"text-field-input--disabled",d&&"text-field-input--required")}),r__default.default.createElement(r.Suspense,null,!!l?.children&&r__default.default.createElement(N,{...l,clear:u,variant:t})))});k.displayName="TextField";exports.TextField=k;

package/dist/{_types.d.ts → index.d.cts}

@@ -1,11 +1,11 @@
-import { ChangeEvent, FocusEventHandler, HTMLAttributes, InputHTMLAttributes } from 'react';
+import React, { ChangeEvent, FocusEventHandler, HTMLAttributes, InputHTMLAttributes } from 'react';
 import { FieldError } from 'react-hook-form';
 import { IExtendable } from '@purr-core/utils.definitions';
 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 {
+type TTextFieldVariant = "standard" | "outlined" | "filled";
+interface ITextFieldProps {
     value?: string;
     variant?: TTextFieldVariant;
     onChange?: (value: string, e: ChangeEvent<HTMLInputElement>) => void;
@@ -23,3 +23,7 @@ export interface ITextFieldProps {
     error?: FieldError;
     isStandalone?: boolean;
 }
+
+declare const TextField: React.ForwardRefExoticComponent<ITextFieldProps & React.RefAttributes<HTMLInputElement>>;
+
+export { type ITextFieldProps, type TTextFieldVariant, TextField };

package/dist/index.d.ts

@@ -1,2 +1,29 @@
-export * from './_components';
-export * from './_types';
+import React, { ChangeEvent, FocusEventHandler, HTMLAttributes, InputHTMLAttributes } from 'react';
+import { FieldError } from 'react-hook-form';
+import { IExtendable } from '@purr-core/utils.definitions';
+import { IPostAdornmentProps } from '@purr-react-styled-components/components.post-adornment';
+import { IPreAdornmentProps } from '@purr-react-styled-components/components.pre-adornment';
+
+type TTextFieldVariant = "standard" | "outlined" | "filled";
+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;
+    preAdornmentProps?: IPreAdornmentProps;
+    postAdornmentProps?: IPostAdornmentProps;
+    className?: string;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    error?: FieldError;
+    isStandalone?: boolean;
+}
+
+declare const TextField: React.ForwardRefExoticComponent<ITextFieldProps & React.RefAttributes<HTMLInputElement>>;
+
+export { type ITextFieldProps, type TTextFieldVariant, TextField };

package/dist/index.js

@@ -1,72 +1,31 @@
-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: 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: 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: 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__ */ 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 }) })
-  ] });
-});
-M.displayName = "TextField";
-export {
-  M as TextField
-};
+import m from'clsx';import r,{lazy,forwardRef,Suspense}from'react';import z from'@purr-core/hooks.focus-with-callback';import M from'@purr-core/hooks.sync-state-with-props';import x,{css}from'styled-components';import {getVariantStyle}from'@purr-react-styled-components/utils.helpers';var w=e=>{let t=0,i=0,n=e?.$variant==="standard"?0:14;return e?.$hasPreAdornment?t=32+n:t=n,e?.$hasPostAdornment?i=32+n:i=n,css`
+    padding: 0px ${i}px 0px ${t}px;
+  `},f={Container:x.div`
+    transition: all 200ms ease-in-out;
+    position: relative;
+    width: ${({$fullWidth:e})=>e?"100%":"210px"};
+    height: 56px;
+    border-radius: 4px;
+    ${getVariantStyle};
+  `,Input:x.input`
+    box-sizing: border-box;
+    transition: all 200ms ease-in-out;
+    width: 100%;
+    margin-top: ${({$hasLabel:e})=>e?"12px":"0px"};
+    height: ${({$hasLabel:e})=>e?"44px":"56px"};
+    line-height: ${({$hasLabel:e})=>e?"44px":"56px"};
+    background-color: transparent;
+    color: #ffffff;
+    border-radius: 4px;
+    border: none;
+    font-size: 16px;
+    ${w};
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    &:disabled {
+      color: #ffffff80;
+    }
+  `};var N=lazy(()=>import('@purr-react-styled-components/components.post-adornment').then(e=>({default:e.PostAdornment}))),W=lazy(()=>import('@purr-react-styled-components/components.pre-adornment').then(e=>({default:e.PreAdornment}))),k=forwardRef(({value:e="",variant:t="standard",onChange:i,onFocus:n,onBlur:c,clear:u,htmlAttributes:b,inputHtmlAttributes:g,preAdornmentProps:a,postAdornmentProps:l,className:T="",fullWidth:p=false,disabled:o=false,required:d=false,error:v=null,isStandalone:P=false},y)=>{let{currentValue:F,setCurrentValue:S}=M(e,P),{captureOnFocus:C,captureOnBlur:A}=z({onFocus:n,onBlur:c}),V=s=>{i?.(s.target.value,s),S(s.target.value);};return r.createElement(f.Container,{...b,$fullWidth:p,$variant:t,$disabled:o,className:m("text-field",p&&"text-field--full-width",d&&"text-field--required",o&&"text-field--disabled",v&&"text-field--error",`text-field--variant-${t}`,T)},r.createElement(Suspense,null,!!a?.children&&r.createElement(W,{...a,hasLabel:true,variant:t})),r.createElement(f.Input,{...g,$variant:t,$hasPreAdornment:!!a?.children,$hasPostAdornment:!!u||!!l?.children,$hasLabel:true,ref:y,value:F,disabled:o,required:d,onChange:V,onFocus:C,onBlur:A,className:m("text-field-input",`text-field-input--variant-${t}`,o&&"text-field-input--disabled",d&&"text-field-input--required")}),r.createElement(Suspense,null,!!l?.children&&r.createElement(N,{...l,clear:u,variant:t})))});k.displayName="TextField";export{k as TextField};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purr-react-styled-components/components.text-field",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -25,15 +25,15 @@
     "react": "*",
     "styled-components": "*",
     "clsx": "*",
-    "@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"
+    "@purr-react-styled-components/components.post-adornment": "0.0.9",
+    "@purr-core/utils.definitions": "0.0.12",
+    "@purr-react-styled-components/utils.helpers": "0.0.8",
+    "@purr-core/hooks.sync-state-with-props": "0.0.9",
+    "@purr-react-styled-components/components.pre-adornment": "0.0.9",
+    "@purr-core/hooks.focus-with-callback": "0.0.9"
   },
   "devDependencies": {
-    "@purr-react-styled-components/components.icon": "0.0.7"
+    "@purr-react-styled-components/components.icon": "0.0.9"
   },
   "author": "@DinhThienPhuc",
   "license": "ISC",
@@ -42,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;
-};