@dgshahr/ui-kit 0.0.1

package/dist/TextFieldWrapper-C80myx6j.cjs

@@ -0,0 +1,169 @@
+'use strict';
+
+require('./assets/styles.css');const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const clsx = require('./clsx-BtxeOLZW.cjs');
+;/* empty css                  */
+
+const FieldLabel = (props) => {
+  const { link, labelContent, required } = props;
+  const showLabel = Boolean(labelContent || link?.href);
+  if (showLabel)
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: clsx.clsx("flex mb-2", {
+          "justify-between": labelContent && link?.href,
+          "justify-start": labelContent && !link?.href,
+          "justify-end": !labelContent && link?.href
+        }),
+        children: [
+          labelContent && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "px-0 text-sm font-bold text-right md:mx-0", children: [
+            labelContent,
+            required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ms-2 text-error-500", children: "*" })
+          ] }),
+          link?.href && /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: link.href,
+              className: "font-button-small text-primary-400",
+              children: link.cnotent
+            }
+          )
+        ]
+      }
+    );
+  return null;
+};
+
+const InfoCircleOutlineIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M12.25 3.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M2.5 12a9.75 9.75 0 0 1 9.75-9.75A9.75 9.75 0 0 1 22 12c0 5.384-4.365 9.75-9.75 9.75S2.5 17.384 2.5 12",
+          clipRule: "evenodd"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M12.25 7.541a.75.75 0 0 1 .75.75v.063a.75.75 0 0 1-1.5 0v-.063a.75.75 0 0 1 .75-.75m.006 3.103a.75.75 0 0 1 .75.75v4.3a.75.75 0 0 1-1.5 0v-4.3a.75.75 0 0 1 .75-.75",
+          clipRule: "evenodd"
+        }
+      )
+    ]
+  }
+);
+
+const FieldBottomInfo = (props) => {
+  const { errorMessage, hintMessage, maxLength, value } = props;
+  const showInfo = Boolean(errorMessage || hintMessage || maxLength);
+  if (showInfo)
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: clsx.clsx(
+          "flex font-p3-regular",
+          {
+            "justify-between": (errorMessage || hintMessage) && maxLength,
+            "justify-start": (errorMessage || hintMessage) && !maxLength,
+            "justify-end": !(errorMessage || hintMessage) && maxLength
+          },
+          errorMessage ? "text-error-500" : "text-gray-500"
+        ),
+        children: [
+          (errorMessage || hintMessage) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              InfoCircleOutlineIcon,
+              {
+                width: 16,
+                height: 16
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: errorMessage || hintMessage })
+          ] }),
+          maxLength && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ss02", children: [
+            value?.length ?? 0,
+            "/",
+            maxLength
+          ] })
+        ]
+      }
+    );
+  return null;
+};
+
+const TextFieldWrapper = (props) => {
+  const {
+    labelContent,
+    link,
+    containerClassName,
+    rightIcon,
+    isError,
+    errorMessage,
+    hintMessage,
+    required,
+    maxLength,
+    value: initialValue,
+    onChange,
+    children
+  } = props;
+  const [value, setValue] = react.useState(initialValue?.toString());
+  react.useEffect(() => {
+    setValue(initialValue?.toString());
+  }, [initialValue]);
+  const handleChangeField = (e) => {
+    setValue(e.currentTarget.value);
+    if (onChange) {
+      onChange(e);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FieldLabel,
+      {
+        labelContent,
+        link,
+        required
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: clsx.clsx(
+          "relative cursor-text border border-solid rounded-lg ring-4 flex justify-between gap-x-3 p-3 bg-gray-100 transition-all ring-transparent hover:ring-gray-50 has-[:focus]:bg-white",
+          isError || errorMessage ? "border-error-500 has-[:focus]:ring-error-50" : "border-transparent hover:border-gray-300 has-[:focus]:border-primary-500 has-[:focus]:ring-primary-50",
+          containerClassName
+        ),
+        children: [
+          rightIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-600", children: rightIcon }),
+          children({ handleChangeField, setValue, value })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FieldBottomInfo,
+      {
+        errorMessage,
+        hintMessage,
+        maxLength,
+        value
+      }
+    )
+  ] });
+};
+
+exports.TextFieldWrapper = TextFieldWrapper;

package/dist/TextFieldWrapper-D3oaEPmc.js

@@ -0,0 +1,167 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { c as clsx } from './clsx-ChV9xqsO.js';
+import './assets/styles.css';/* empty css                */
+
+const FieldLabel = (props) => {
+  const { link, labelContent, required } = props;
+  const showLabel = Boolean(labelContent || link?.href);
+  if (showLabel)
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx("flex mb-2", {
+          "justify-between": labelContent && link?.href,
+          "justify-start": labelContent && !link?.href,
+          "justify-end": !labelContent && link?.href
+        }),
+        children: [
+          labelContent && /* @__PURE__ */ jsxs("label", { className: "px-0 text-sm font-bold text-right md:mx-0", children: [
+            labelContent,
+            required && /* @__PURE__ */ jsx("span", { className: "ms-2 text-error-500", children: "*" })
+          ] }),
+          link?.href && /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: link.href,
+              className: "font-button-small text-primary-400",
+              children: link.cnotent
+            }
+          )
+        ]
+      }
+    );
+  return null;
+};
+
+const InfoCircleOutlineIcon = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M12.25 3.75a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5M2.5 12a9.75 9.75 0 0 1 9.75-9.75A9.75 9.75 0 0 1 22 12c0 5.384-4.365 9.75-9.75 9.75S2.5 17.384 2.5 12",
+          clipRule: "evenodd"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          fill: "currentColor",
+          fillRule: "evenodd",
+          d: "M12.25 7.541a.75.75 0 0 1 .75.75v.063a.75.75 0 0 1-1.5 0v-.063a.75.75 0 0 1 .75-.75m.006 3.103a.75.75 0 0 1 .75.75v4.3a.75.75 0 0 1-1.5 0v-4.3a.75.75 0 0 1 .75-.75",
+          clipRule: "evenodd"
+        }
+      )
+    ]
+  }
+);
+
+const FieldBottomInfo = (props) => {
+  const { errorMessage, hintMessage, maxLength, value } = props;
+  const showInfo = Boolean(errorMessage || hintMessage || maxLength);
+  if (showInfo)
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          "flex font-p3-regular",
+          {
+            "justify-between": (errorMessage || hintMessage) && maxLength,
+            "justify-start": (errorMessage || hintMessage) && !maxLength,
+            "justify-end": !(errorMessage || hintMessage) && maxLength
+          },
+          errorMessage ? "text-error-500" : "text-gray-500"
+        ),
+        children: [
+          (errorMessage || hintMessage) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              InfoCircleOutlineIcon,
+              {
+                width: 16,
+                height: 16
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: errorMessage || hintMessage })
+          ] }),
+          maxLength && /* @__PURE__ */ jsxs("span", { className: "ss02", children: [
+            value?.length ?? 0,
+            "/",
+            maxLength
+          ] })
+        ]
+      }
+    );
+  return null;
+};
+
+const TextFieldWrapper = (props) => {
+  const {
+    labelContent,
+    link,
+    containerClassName,
+    rightIcon,
+    isError,
+    errorMessage,
+    hintMessage,
+    required,
+    maxLength,
+    value: initialValue,
+    onChange,
+    children
+  } = props;
+  const [value, setValue] = useState(initialValue?.toString());
+  useEffect(() => {
+    setValue(initialValue?.toString());
+  }, [initialValue]);
+  const handleChangeField = (e) => {
+    setValue(e.currentTarget.value);
+    if (onChange) {
+      onChange(e);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      FieldLabel,
+      {
+        labelContent,
+        link,
+        required
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(
+          "relative cursor-text border border-solid rounded-lg ring-4 flex justify-between gap-x-3 p-3 bg-gray-100 transition-all ring-transparent hover:ring-gray-50 has-[:focus]:bg-white",
+          isError || errorMessage ? "border-error-500 has-[:focus]:ring-error-50" : "border-transparent hover:border-gray-300 has-[:focus]:border-primary-500 has-[:focus]:ring-primary-50",
+          containerClassName
+        ),
+        children: [
+          rightIcon && /* @__PURE__ */ jsx("div", { className: "text-gray-600", children: rightIcon }),
+          children({ handleChangeField, setValue, value })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FieldBottomInfo,
+      {
+        errorMessage,
+        hintMessage,
+        maxLength,
+        value
+      }
+    )
+  ] });
+};
+
+export { TextFieldWrapper as T };