@ck-ui/component-library 0.1.5 → 0.3.0

package/dist/components/TextArea/index.js

@@ -0,0 +1,135 @@
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import * as _ from "react";
+import { useState as d, useRef as F, useEffect as k } from "react";
+import '../../assets/index-BOXxnraF.css';const I = "_label_16th2_15", Z = "_mandatory_16th2_23", A = "_counter_16th2_32", P = "_focused_16th2_74", W = "_error_16th2_78", q = "_disabled_16th2_109", e = {
+  "ckds-text-area-wrapper": "_ckds-text-area-wrapper_16th2_1",
+  "top-section": "_top-section_16th2_9",
+  label: I,
+  mandatory: Z,
+  counter: A,
+  "text-area-container": "_text-area-container_16th2_40",
+  "text-area": "_text-area_16th2_40",
+  focused: P,
+  error: W,
+  "read-only": "_read-only_16th2_82",
+  "no-resize": "_no-resize_16th2_86",
+  "resize-icon": "_resize-icon_16th2_90",
+  "helper-text": "_helper-text_16th2_95",
+  "error-text": "_error-text_16th2_102",
+  disabled: q
+}, D = (r) => /* @__PURE__ */ _.createElement("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...r }, /* @__PURE__ */ _.createElement("path", { d: "M9.33333 10.5001L10.5 9.33345L9.33333 10.5001ZM6.41667 10.5001L10.5 6.41678L6.41667 10.5001ZM3.5 10.5L10.5 3.5L3.5 10.5Z", fill: "#737373" }), /* @__PURE__ */ _.createElement("path", { d: "M9.33333 10.5001L10.5 9.33345M6.41667 10.5001L10.5 6.41678M3.5 10.5L10.5 3.5", stroke: "#737373", strokeWidth: 0.875, strokeLinecap: "round", strokeLinejoin: "round" })), J = ({
+  name: r,
+  label: h,
+  value: n = "",
+  placeholder: v = "",
+  onChange: f,
+  onBlur: p,
+  error: l,
+  helperText: a,
+  disabled: s = !1,
+  readOnly: u = !1,
+  maxLength: x = 100,
+  rows: z = 4,
+  resize: m = !1,
+  showCounter: M = !0,
+  className: R = "",
+  mandatory: E = !1
+}) => {
+  const [S, $] = d(!1), [j, g] = d(n.length), i = F(null), [w, B] = d({
+    left: 0,
+    top: 0
+  });
+  k(() => {
+    if (!i.current) return;
+    const t = i.current, b = () => {
+      const N = t.getBoundingClientRect();
+      B({
+        left: N.width - 20,
+        top: N.height - 18
+      });
+    };
+    b();
+    const L = new ResizeObserver(() => {
+      b();
+    });
+    return L.observe(t), () => L.disconnect();
+  }, []), k(() => {
+    g(n.length);
+  }, [n]);
+  const C = (t) => {
+    g(t.target.value.length), f && f(t);
+  }, y = !!l;
+  return /* @__PURE__ */ c("div", { className: `${e["ckds-text-area-wrapper"]} ${R}`, children: [
+    /* @__PURE__ */ c("div", { className: e["top-section"], children: [
+      h && /* @__PURE__ */ o(
+        "label",
+        {
+          htmlFor: r,
+          className: `${e.label} ${E ? e?.mandatory : ""} ${s ? e.disabled : ""} `,
+          children: h
+        }
+      ),
+      M && /* @__PURE__ */ c(
+        "span",
+        {
+          className: `${e.counter} ${s ? e.disabled : ""}`,
+          children: [
+            j,
+            "/",
+            x
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ c("div", { className: e["text-area-container"], children: [
+      /* @__PURE__ */ o(
+        "textarea",
+        {
+          ref: i,
+          id: r,
+          name: r,
+          value: n,
+          placeholder: v,
+          rows: z,
+          maxLength: x,
+          disabled: s,
+          readOnly: u,
+          onChange: C,
+          onFocus: () => $(!0),
+          onBlur: (t) => {
+            $(!1), p && p(t);
+          },
+          className: `
+          ${e["text-area"]}
+          ${S ? e.focused : ""}
+          ${y ? e.error : ""}
+          ${s ? e.disabled : ""}
+          ${u ? e["read-only"] : ""}
+          ${!m && e["no-resize"]}
+        `
+        }
+      ),
+      m && /* @__PURE__ */ o(
+        D,
+        {
+          className: e["resize-icon"],
+          style: {
+            left: `${w.left}px`,
+            top: `${w.top}px`
+          }
+        }
+      )
+    ] }),
+    l && /* @__PURE__ */ o("span", { className: ` ${y ? e["error-text"] : ""}`, children: l }),
+    a && (typeof a == "string" ? /* @__PURE__ */ o(
+      "span",
+      {
+        className: `${e["helper-text"]} ${s ? e.disabled : ""}`,
+        children: a
+      }
+    ) : a)
+  ] });
+};
+export {
+  J as default
+};

package/dist/components/TextField/_types/textField.types.d.ts

@@ -0,0 +1,67 @@
+import { ChangeEvent, FocusEvent, KeyboardEvent, ReactNode } from 'react';
+import { ButtonSize, ButtonVariant } from '../../CKButton/_types/button.types';
+export interface PrefixConfig {
+    text: string;
+    style: string;
+}
+export interface SuffixConfig {
+    text?: string;
+    icon?: ReactNode;
+    style?: string;
+}
+export interface ToolTipConfig {
+    label: string;
+    component: ReactNode;
+}
+export interface ShowInfoMessageConfig {
+    isEnabled?: boolean;
+    component?: ReactNode;
+}
+export interface ActionButtonConfig {
+    buttonText?: string;
+    btnVariant?: ButtonVariant;
+    btnsize?: ButtonSize;
+}
+export interface TextFieldProps {
+    type?: string;
+    name?: string;
+    value?: string;
+    label?: string;
+    error?: string;
+    helperText?: ReactNode;
+    placeHolder?: string;
+    handleChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onBlurHandler?: (event: FocusEvent<HTMLInputElement>) => void;
+    onFocusHandler?: (event: FocusEvent<HTMLInputElement>) => void;
+    onKeyDownHandler?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    toggleIcon?: boolean;
+    toggleActionButton?: boolean;
+    toggleCallback?: (type?: string, name?: string) => void;
+    toggleActionBtnCallback?: (type?: string, name?: string) => void;
+    selectedVisibilityIcon?: ReactNode;
+    inputIcon?: string | ReactNode;
+    prefixIcon?: ReactNode;
+    inputClass?: string;
+    parentClass?: string;
+    labelClass?: string;
+    suffix?: SuffixConfig;
+    prefix?: PrefixConfig;
+    touched?: boolean;
+    disabled?: boolean;
+    disabledClass?: string;
+    filledStyle?: string;
+    autoComplete?: string;
+    toolTip?: ToolTipConfig;
+    maxLength?: number | null;
+    showLabel?: boolean;
+    showInfoMessage?: ShowInfoMessageConfig;
+    actionButtonConfig?: ActionButtonConfig;
+    labelDescription?: string | ReactNode | (() => ReactNode);
+    disableOnWheel?: boolean;
+    size?: "small" | "medium" | "large";
+    readOnly?: boolean;
+    clearable?: boolean;
+    onClear?: (type?: string, name?: string) => void;
+    mandatory?: boolean;
+}
+//# sourceMappingURL=textField.types.d.ts.map

package/dist/components/TextField/_types/textField.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textField.types.d.ts","sourceRoot":"","sources":["../../../../lib/components/TextField/_types/textField.types.ts"],"names":[],"mappings":"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"}

package/dist/components/TextField/_types/textField.types.js

@@ -0,0 +1 @@
+

package/dist/components/TextField/index.d.ts

@@ -0,0 +1,4 @@
+import { TextFieldProps } from './_types/textField.types';
+export declare function TextField({ type, name, handleChange, value, label, error, placeHolder, toggleIcon, toggleActionButton, toggleCallback, toggleActionBtnCallback, selectedVisibilityIcon, inputIcon, inputClass, suffix, prefixIcon, parentClass, showLabel, touched, onBlurHandler, disabled, disabledClass, filledStyle, autoComplete, toolTip, maxLength, prefix, showInfoMessage, actionButtonConfig, labelDescription, disableOnWheel, onFocusHandler, onKeyDownHandler, mandatory, helperText, readOnly, clearable, onClear, size, }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
+export default TextField;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TextField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/TextField/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAE/D,wBAAgB,SAAS,CAAC,EACxB,IAAa,EACb,IAAI,EACJ,YAAY,EACZ,KAAU,EACV,KAAU,EACV,KAAK,EACL,WAAW,EACX,UAAU,EACV,kBAAkB,EAClB,cAAc,EACd,uBAAuB,EACvB,sBAAsB,EACtB,SAAS,EACT,UAAe,EACf,MAAM,EACN,UAAU,EACV,WAAgB,EAChB,SAAgB,EAChB,OAAO,EACP,aAAa,EACb,QAAgB,EAChB,aAAkB,EAClB,WAAgB,EAChB,YAAmB,EACnB,OAAO,EACP,SAAgB,EAChB,MAAM,EACN,eAAoB,EACpB,kBAAuB,EACvB,gBAAqB,EACrB,cAAsB,EACtB,cAAc,EACd,gBAAgB,EAChB,SAAiB,EACjB,UAAU,EACV,QAAgB,EAChB,SAAiB,EACjB,OAAO,EACP,IAAe,GAChB,EAAE,cAAc,2CAwLhB;AAED,eAAe,SAAS,CAAC"}