@purr-react-styled-components/components.text-field 0.0.1

package/dist/_components.d.ts

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

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

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

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

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@purr-react-styled-components/components.text-field",
+  "version": "0.0.1",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "typescript": "*",
+    "react": "*",
+    "styled-components": "*",
+    "clsx": "*",
+    "@purr-react-styled-components/components.helper-text": "0.0.1",
+    "@purr-react-styled-components/components.label": "0.0.1",
+    "@purr-react-styled-components/components.post-adornment": "0.0.1",
+    "@purr-react-styled-components/components.pre-adornment": "0.0.1",
+    "@purr-core/utils.definitions": "0.0.4",
+    "@purr-react-styled-components/utils.helpers": "0.0.1",
+    "@purr-core/hooks.focus-with-callback": "0.0.2",
+    "@purr-core/hooks.sync-state-with-props": "0.0.2"
+  },
+  "devDependencies": {
+    "@purr-react-styled-components/components.icon": "0.0.1"
+  },
+  "author": "@DinhThienPhuc",
+  "license": "ISC",
+  "description": "",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --max-warnings 0"
+  }
+}