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

package/dist/_components.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { IFormFieldProps } from './_types';
+
+export declare const FormField: ({ children, className, htmlAttributes, label, helperText, errorMessage, }: IFormFieldProps) => React.JSX.Element;

package/dist/_style.d.ts

@@ -0,0 +1,6 @@
+export declare const Styled: {
+    Container: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    HelperText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    ExplainText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    ErrorMessage: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+};

package/dist/_types.d.ts

@@ -0,0 +1,11 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { IExtendable } from '@purr-core/utils.definitions';
+
+export interface IFormFieldProps extends IExtendable {
+    label?: ReactNode;
+    htmlAttributes?: HTMLAttributes<HTMLElement> & IExtendable;
+    children?: ReactNode;
+    className?: string;
+    helperText?: ReactNode;
+    errorMessage?: ReactNode;
+}

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("clsx"),e=require("styled-components"),i={Container:e.div.withConfig({displayName:"_style__Container",componentId:"sc-4mt1q9-0"})(["display:flex;flex-direction:column;row-gap:8px;position:relative;"]),HelperText:e.div.withConfig({displayName:"_style__HelperText",componentId:"sc-4mt1q9-1"})(["color:#00000073;"]),ExplainText:e.div.withConfig({displayName:"_style__ExplainText",componentId:"sc-4mt1q9-2"})(["position:absolute;bottom:0px;color:#00000073;"]),ErrorMessage:e.div.withConfig({displayName:"_style__ErrorMessage",componentId:"sc-4mt1q9-3"})(["position:absolute;bottom:-21px;color:#ff4d4f;"])},m=({children:l,className:n,htmlAttributes:a,label:s,helperText:o,errorMessage:r})=>t.jsxs(i.Container,{...a,className:d("form-field",!!s&&"form-field--has-label",!!o&&"form-field--has-helper-text",n),children:[s,l,!!o&&t.jsx(i.HelperText,{className:"form-field__helper-text",children:o}),!!r&&t.jsx(i.ErrorMessage,{className:"form-field__error-message",children:r})]});exports.FormField=m;

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,36 @@
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import d from "clsx";
+import e from "styled-components";
+const t = {
+  Container: e.div.withConfig({
+    displayName: "_style__Container",
+    componentId: "sc-4mt1q9-0"
+  })(["display:flex;flex-direction:column;row-gap:8px;position:relative;"]),
+  HelperText: e.div.withConfig({
+    displayName: "_style__HelperText",
+    componentId: "sc-4mt1q9-1"
+  })(["color:#00000073;"]),
+  ExplainText: e.div.withConfig({
+    displayName: "_style__ExplainText",
+    componentId: "sc-4mt1q9-2"
+  })(["position:absolute;bottom:0px;color:#00000073;"]),
+  ErrorMessage: e.div.withConfig({
+    displayName: "_style__ErrorMessage",
+    componentId: "sc-4mt1q9-3"
+  })(["position:absolute;bottom:-21px;color:#ff4d4f;"])
+}, x = ({
+  children: l,
+  className: m,
+  htmlAttributes: n,
+  label: i,
+  helperText: o,
+  errorMessage: r
+}) => /* @__PURE__ */ a(t.Container, { ...n, className: d("form-field", !!i && "form-field--has-label", !!o && "form-field--has-helper-text", m), children: [
+  i,
+  l,
+  !!o && /* @__PURE__ */ s(t.HelperText, { className: "form-field__helper-text", children: o }),
+  !!r && /* @__PURE__ */ s(t.ErrorMessage, { className: "form-field__error-message", children: r })
+] });
+export {
+  x as FormField
+};

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@purr-react-styled-components/components.form-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-core/utils.definitions": "0.0.10",
+    "@purr-core/utils.helpers": "0.0.10"
+  },
+  "author": "@DinhThienPhuc",
+  "license": "ISC",
+  "description": "",
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite build --watch",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --max-warnings 0"
+  }
+}