@purr-react-tailwindcss/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/_types.d.ts

@@ -0,0 +1,28 @@
+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-tailwindcss/components.helper-text';
+import { ILabelProps } from '@purr-react-tailwindcss/components.label';
+import { IPostAdornmentProps } from '@purr-react-tailwindcss/components.post-adornment';
+import { IPreAdornmentProps } from '@purr-react-tailwindcss/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;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    error?: FieldError;
+    isStandalone?: boolean;
+}

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";var v=Object.create;var w=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var M=Object.getOwnPropertyNames;var _=Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var G=(i,t,l,h)=>{if(t&&typeof t=="object"||typeof t=="function")for(let d of M(t))!D.call(i,d)&&d!==l&&w(i,d,{get:()=>t[d],enumerable:!(h=I(t,d))||h.enumerable});return i};var g=(i,t,l)=>(l=i!=null?v(_(i)):{},G(t||!i||!i.__esModule?w(l,"default",{value:i,enumerable:!0}):l,i));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),z=require("clsx"),a=require("react"),J=require("@purr-core/hooks.focus-with-callback"),K=require("@purr-core/hooks.sync-state-with-props"),L=require("@purr-react-tailwindcss/utils.helpers"),Q=a.lazy(()=>import("@purr-react-tailwindcss/components.helper-text").then(i=>({default:i.HelperText}))),U=a.lazy(()=>import("@purr-react-tailwindcss/components.label").then(i=>({default:i.Label}))),X=a.lazy(()=>import("@purr-react-tailwindcss/components.post-adornment").then(i=>({default:i.PostAdornment}))),Y=a.lazy(()=>import("@purr-react-tailwindcss/components.pre-adornment").then(i=>({default:i.PreAdornment}))),C=a.forwardRef(({value:i="",variant:t="standard",onChange:l,onFocus:h,onBlur:d,clear:S,htmlAttributes:N,inputHtmlAttributes:O,labelProps:e,preAdornmentProps:u,postAdornmentProps:n,helperTextProps:f,fullWidth:V=!1,disabled:s=!1,required:j=!1,error:x=null,isStandalone:B=!1},E)=>{const{currentValue:F,setCurrentValue:H}=K(i,B),{captureOnFocus:R,captureOnBlur:W,isFocused:q}=J({onFocus:h,onBlur:d}),$=!!(q||u!=null&&u.children||F),k=y=>{l==null||l(y.target.value,y),H(y.target.value)};return c.jsxs("div",{className:z("relative h-14 rounded transition-all duration-200 ease-in-out",L.getVariantClasses(t,s),"text-field",V&&"text-field--full-width",j&&"text-field--required",s&&"text-field--disabled",x&&"text-field--error",`text-field--variant-${t}`),...N,children:[c.jsx(a.Suspense,{children:!!(e!=null&&e.children)&&c.jsx(U,{...e,variant:t,disabled:s,required:j,isLabelCollapsed:$,isFocused:q,isError:!!x})}),c.jsx(a.Suspense,{children:!!(u!=null&&u.children)&&c.jsx(Y,{...u,hasLabel:!!(e!=null&&e.children),variant:t})}),c.jsx("input",{ref:E,value:F,disabled:s,required:j,onChange:k,onFocus:R,onBlur:W,className:z(L.getInputPaddingClasses(!!(u!=null&&u.children),!!S||!!(n!=null&&n.children),t),"box-border w-full rounded border-none bg-transparent text-base text-white outline-none transition-all duration-200 ease-in-out",e!=null&&e.children?"mt-3 h-11 leading-[2.75rem]":"mt-0 h-14 leading-[3.5rem]","text-field-input",`text-field-input--variant-${t}`,s&&"text-field-input--disabled",j&&"text-field-input--required"),...O}),c.jsx(a.Suspense,{children:!!(n!=null&&n.children)&&c.jsx(X,{...n,clear:S,variant:t})}),c.jsx(a.Suspense,{children:(f==null?void 0:f.children)&&c.jsx(Q,{...f,isError:!!x,variant:t,children:(x==null?void 0:x.message)??(f==null?void 0:f.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,137 @@
+import { jsxs as z, jsx as c } from "react/jsx-runtime";
+import y from "clsx";
+import { lazy as x, forwardRef as I, Suspense as n } from "react";
+import R from "@purr-core/hooks.focus-with-callback";
+import v from "@purr-core/hooks.sync-state-with-props";
+import { getVariantClasses as D, getInputPaddingClasses as G } from "@purr-react-tailwindcss/utils.helpers";
+const J = x(
+  () => import("@purr-react-tailwindcss/components.helper-text").then((u) => ({
+    default: u.HelperText
+  }))
+), K = x(
+  () => import("@purr-react-tailwindcss/components.label").then((u) => ({
+    default: u.Label
+  }))
+), M = x(
+  () => import("@purr-react-tailwindcss/components.post-adornment").then(
+    (u) => ({
+      default: u.PostAdornment
+    })
+  )
+), Q = x(
+  () => import("@purr-react-tailwindcss/components.pre-adornment").then((u) => ({
+    default: u.PreAdornment
+  }))
+), U = I(
+  ({
+    value: u = "",
+    variant: l = "standard",
+    onChange: g,
+    onFocus: C,
+    onBlur: N,
+    clear: w,
+    htmlAttributes: S,
+    inputHtmlAttributes: V,
+    labelProps: i,
+    preAdornmentProps: t,
+    postAdornmentProps: f,
+    helperTextProps: a,
+    fullWidth: j = !1,
+    disabled: e = !1,
+    required: h = !1,
+    error: d = null,
+    isStandalone: B = !1
+  }, E) => {
+    const { currentValue: L, setCurrentValue: H } = v(u, B), { captureOnFocus: O, captureOnBlur: W, isFocused: m } = R({
+      onFocus: C,
+      onBlur: N
+    }), $ = !!(m || t != null && t.children || L), k = (F) => {
+      g == null || g(F.target.value, F), H(F.target.value);
+    };
+    return /* @__PURE__ */ z(
+      "div",
+      {
+        className: y(
+          "relative h-14 rounded transition-all duration-200 ease-in-out",
+          D(l, e),
+          "text-field",
+          j && "text-field--full-width",
+          h && "text-field--required",
+          e && "text-field--disabled",
+          d && "text-field--error",
+          `text-field--variant-${l}`
+        ),
+        ...S,
+        children: [
+          /* @__PURE__ */ c(n, { children: !!(i != null && i.children) && /* @__PURE__ */ c(
+            K,
+            {
+              ...i,
+              variant: l,
+              disabled: e,
+              required: h,
+              isLabelCollapsed: $,
+              isFocused: m,
+              isError: !!d
+            }
+          ) }),
+          /* @__PURE__ */ c(n, { children: !!(t != null && t.children) && /* @__PURE__ */ c(
+            Q,
+            {
+              ...t,
+              hasLabel: !!(i != null && i.children),
+              variant: l
+            }
+          ) }),
+          /* @__PURE__ */ c(
+            "input",
+            {
+              ref: E,
+              value: L,
+              disabled: e,
+              required: h,
+              onChange: k,
+              onFocus: O,
+              onBlur: W,
+              className: y(
+                G(
+                  !!(t != null && t.children),
+                  !!w || !!(f != null && f.children),
+                  l
+                ),
+                "box-border w-full rounded border-none bg-transparent text-base text-white outline-none transition-all duration-200 ease-in-out",
+                i != null && i.children ? "mt-3 h-11 leading-[2.75rem]" : "mt-0 h-14 leading-[3.5rem]",
+                "text-field-input",
+                `text-field-input--variant-${l}`,
+                e && "text-field-input--disabled",
+                h && "text-field-input--required"
+              ),
+              ...V
+            }
+          ),
+          /* @__PURE__ */ c(n, { children: !!(f != null && f.children) && /* @__PURE__ */ c(
+            M,
+            {
+              ...f,
+              clear: w,
+              variant: l
+            }
+          ) }),
+          /* @__PURE__ */ c(n, { children: (a == null ? void 0 : a.children) && /* @__PURE__ */ c(
+            J,
+            {
+              ...a,
+              isError: !!d,
+              variant: l,
+              children: (d == null ? void 0 : d.message) ?? (a == null ? void 0 : a.children) ?? ""
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+U.displayName = "TextField";
+export {
+  U as TextField
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@purr-react-tailwindcss/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": "*",
+    "clsx": "*",
+    "@purr-core/utils.definitions": "0.0.6",
+    "@purr-react-tailwindcss/components.helper-text": "0.0.2",
+    "@purr-react-tailwindcss/components.label": "0.0.2",
+    "@purr-react-tailwindcss/components.post-adornment": "0.0.2",
+    "@purr-react-tailwindcss/components.pre-adornment": "0.0.2",
+    "@purr-core/hooks.focus-with-callback": "0.0.4",
+    "@purr-core/hooks.sync-state-with-props": "0.0.4",
+    "@purr-react-tailwindcss/utils.helpers": "0.0.1"
+  },
+  "devDependencies": {
+    "@purr-react-tailwindcss/components.icon": "0.0.2"
+  },
+  "author": "@DinhThienPhuc",
+  "license": "ISC",
+  "description": "",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --max-warnings 0"
+  }
+}