fictoan-react 2.0.0-beta.17 → 2.0.0-beta.18

package/dist/components/Form/FormItem/FormItem.d.ts

@@ -1,11 +1,27 @@
 import React from "react";
 import { CommonAndHTMLProps, SpacingTypes } from '../../Element/constants';
 
+export interface FormItemContextValue {
+    helpTextId?: string;
+    errorTextId?: string;
+    describedBy?: string;
+    hasError: boolean;
+    isRequired: boolean;
+}
+export declare const FormItemContext: React.Context<FormItemContextValue | null>;
+export declare const useFormItemContext: () => FormItemContextValue | null;
+export declare const mergeDescribedBy: (...ids: (string | undefined | null)[]) => string | undefined;
+export declare const deriveAriaIds: (baseId: string | undefined, helpText: unknown, errorText: unknown) => {
+    helpTextId?: string;
+    errorTextId?: string;
+    describedBy?: string;
+};
 export type FormItemElementType = HTMLDivElement;
 export interface FormItemProps extends CommonAndHTMLProps<FormItemElementType> {
     label?: string;
     customLabel?: React.ReactNode;
     htmlFor?: string;
+    hideLabel?: boolean;
     helpText?: string | React.ReactNode;
     errorText?: string;
     validationState?: "valid" | "invalid" | null;

package/dist/components/Form/FormItem/FormItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/FormItem/FormItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAK3E,OAAO,iBAAiB,CAAC;AAOzB,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC;AAEjD,MAAM,WAAW,aAAc,SAAQ,kBAAkB,CAAC,mBAAmB,CAAC;IAE1E,KAAgB,CAAC,EAAG,MAAM,CAAC;IAC3B,WAAgB,CAAC,EAAG,KAAK,CAAC,SAAS,CAAC;IACpC,OAAgB,CAAC,EAAG,MAAM,CAAC;IAE3B,QAAgB,CAAC,EAAG,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC7C,SAAgB,CAAC,EAAG,MAAM,CAAC;IAE3B,eAAgB,CAAC,EAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;IAE/C,QAAgB,CAAC,EAAG,OAAO,CAAC;IAC5B,IAAgB,CAAC,EAAG,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IAE3D,UAAgB,CAAC,EAAG,OAAO,CAAC;CAC/B;AAyDD,eAAO,MAAM,QAAQ,sFA+DpB,CAAC"}
+{"version":3,"file":"FormItem.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/FormItem/FormItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAK3E,OAAO,iBAAiB,CAAC;AAUzB,MAAM,WAAW,oBAAoB;IACjC,UAAY,CAAC,EAAG,MAAM,CAAC;IACvB,WAAY,CAAC,EAAG,MAAM,CAAC;IACvB,WAAY,CAAC,EAAG,MAAM,CAAC;IACvB,QAAQ,EAAQ,OAAO,CAAC;IACxB,UAAU,EAAM,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,eAAe,4CAAyD,CAAC;AAEtF,eAAO,MAAM,kBAAkB,QAAQ,oBAAoB,GAAG,IAAyC,CAAC;AAIxG,eAAO,MAAM,gBAAgB,GAAI,GAAG,KAAM,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC,EAAE,KAAI,MAAM,GAAG,SAGnF,CAAC;AAOF,eAAO,MAAM,aAAa,GACtB,QAAW,MAAM,GAAG,SAAS,EAC7B,UAAW,OAAO,EAClB,WAAW,OAAO,KAClB;IAAE,UAAW,CAAC,EAAE,MAAM,CAAC;IAAC,WAAY,CAAC,EAAE,MAAM,CAAC;IAAC,WAAY,CAAC,EAAE,MAAM,CAAA;CAKvE,CAAC;AAGF,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC;AAEjD,MAAM,WAAW,aAAc,SAAQ,kBAAkB,CAAC,mBAAmB,CAAC;IAE1E,KAAgB,CAAC,EAAG,MAAM,CAAC;IAC3B,WAAgB,CAAC,EAAG,KAAK,CAAC,SAAS,CAAC;IACpC,OAAgB,CAAC,EAAG,MAAM,CAAC;IAC3B,SAAgB,CAAC,EAAG,OAAO,CAAC;IAE5B,QAAgB,CAAC,EAAG,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC7C,SAAgB,CAAC,EAAG,MAAM,CAAC;IAE3B,eAAgB,CAAC,EAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;IAE/C,QAAgB,CAAC,EAAG,OAAO,CAAC;IAC5B,IAAgB,CAAC,EAAG,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IAE3D,UAAgB,CAAC,EAAG,OAAO,CAAC;CAC/B;AAyDD,eAAO,MAAM,QAAQ,sFAiFpB,CAAC"}

package/dist/components/Form/FormItem/FormItem.js

@@ -0,0 +1,127 @@
+"use client";
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import c from "react";
+import { Div as d } from "../../Element/Tags.js";
+/* empty css              */
+import { InputLabel as $ } from "../InputLabel/InputLabel.js";
+import { Text as v } from "../../Typography/Text.js";
+import { Element as b } from "../../Element/Element.js";
+const M = c.createContext(null), R = (...e) => {
+  const r = e.filter((o) => !!o);
+  return r.length > 0 ? r.join(" ") : void 0;
+}, W = (e, r, o) => {
+  if (!e) return {};
+  const s = r ? `${e}-help` : void 0, i = o ? `${e}-error` : void 0;
+  return { helpTextId: s, errorTextId: i, describedBy: R(i, s) };
+}, C = ({ state: e }) => e === "valid" ? /* @__PURE__ */ t(
+  "svg",
+  {
+    "data-validation-icon": "valid",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "20",
+    height: "20",
+    children: /* @__PURE__ */ t(
+      "polyline",
+      {
+        points: "3.5 12.5 8.5 17.5 20.5 5.5",
+        fill: "none",
+        stroke: "#0ec05c",
+        strokeMiterlimit: "10",
+        strokeWidth: "2"
+      }
+    )
+  }
+) : /* @__PURE__ */ l(
+  "svg",
+  {
+    "data-validation-icon": "invalid",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    width: "20",
+    height: "20",
+    children: [
+      /* @__PURE__ */ t(
+        "line",
+        {
+          x1: "6.5",
+          y1: "17.5",
+          x2: "18.5",
+          y2: "5.5",
+          fill: "none",
+          stroke: "#ef4343",
+          strokeMiterlimit: "10",
+          strokeWidth: "2"
+        }
+      ),
+      /* @__PURE__ */ t(
+        "line",
+        {
+          x1: "6.5",
+          y1: "5.5",
+          x2: "18.5",
+          y2: "17.5",
+          fill: "none",
+          stroke: "#ef4343",
+          strokeMiterlimit: "10",
+          strokeWidth: "2"
+        }
+      )
+    ]
+  }
+), D = c.forwardRef(
+  ({
+    label: e,
+    customLabel: r,
+    htmlFor: o,
+    hideLabel: s,
+    helpText: i,
+    errorText: n,
+    validationState: a,
+    required: m,
+    size: f,
+    labelFirst: u,
+    children: w,
+    ...x
+  }, g) => {
+    const I = e || r, y = i || n, k = c.useId(), B = o || `form-item-${k.replace(/:/g, "")}`, { helpTextId: h, errorTextId: p, describedBy: N } = W(B, i, n), j = {
+      helpTextId: h,
+      errorTextId: p,
+      describedBy: N,
+      hasError: !!n,
+      isRequired: !!m
+    };
+    return /* @__PURE__ */ t(M.Provider, { value: j, children: /* @__PURE__ */ l(
+      b,
+      {
+        as: "div",
+        "data-form-item": !0,
+        "data-form-spaced": !0,
+        ref: g,
+        role: "group",
+        required: m,
+        className: [f ? `size-${f}` : "", u ? "label-first" : ""].filter(Boolean).join(" ") || void 0,
+        ...x,
+        children: [
+          I && /* @__PURE__ */ l(d, { "data-label-wrapper": !0, "data-has-validation": a ? "true" : void 0, children: [
+            r || e && /* @__PURE__ */ t($, { label: e, htmlFor: o, hideLabel: s }),
+            a && /* @__PURE__ */ t(C, { state: a })
+          ] }),
+          /* @__PURE__ */ t(d, { "data-input-wrapper": !0, children: w }),
+          y && /* @__PURE__ */ l(d, { className: "info-section vertically-center-items", children: [
+            i && /* @__PURE__ */ t(v, { id: h, className: "help-text", children: i }),
+            n && /* @__PURE__ */ t(v, { id: p, role: "alert", className: "error-text", children: n })
+          ] })
+        ]
+      }
+    ) });
+  }
+);
+D.displayName = "FormItem";
+export {
+  D as FormItem,
+  M as FormItemContext,
+  W as deriveAriaIds,
+  R as mergeDescribedBy
+};
+//# sourceMappingURL=FormItem.js.map

package/dist/components/Form/FormItem/FormItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormItem.js","sources":["../../../../src/components/Form/FormItem/FormItem.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { CommonAndHTMLProps, SpacingTypes } from \"../../Element/constants\";\nimport { Div } from \"$tags\";\nimport { Element } from \"$element\";\n\n// STYLES ==============================================================================================================\nimport \"./form-item.css\";\n\n// OTHER ===============================================================================================================\nimport { InputLabel } from \"../InputLabel/InputLabel\";\nimport { Text } from \"../../Typography/Text\";\n\n// CONTEXT /////////////////////////////////////////////////////////////////////////////////////////////////////////////\n// FormItem exposes ids for its help/error text plus aggregate state (hasError,\n// isRequired) so child inputs can wire aria-describedby / aria-invalid /\n// aria-required without each component re-implementing the plumbing.\nexport interface FormItemContextValue {\n    helpTextId  ? : string;\n    errorTextId ? : string;\n    describedBy ? : string;\n    hasError      : boolean;\n    isRequired    : boolean;\n}\n\nexport const FormItemContext = React.createContext<FormItemContextValue | null>(null);\n\nexport const useFormItemContext = () : FormItemContextValue | null => React.useContext(FormItemContext);\n\n// Merge an input's own aria-describedby with whatever FormItem provides.\n// Use in form inputs as: aria-describedby={mergeDescribedBy(ownDescribedBy, ctx?.describedBy)}\nexport const mergeDescribedBy = (...ids : (string | undefined | null)[]) : string | undefined => {\n    const filtered = ids.filter((s) : s is string => Boolean(s));\n    return filtered.length > 0 ? filtered.join(\" \") : undefined;\n};\n\n// Single source of truth for the help/error ids and the describedBy string.\n// FormItem uses it to id its Text nodes; each form input uses the same helper\n// (with the same baseId) to compute aria-describedby on its <input>. Both sides\n// derive identical strings as long as the form input passes `htmlFor` to\n// FormItem and uses the same value as its input id.\nexport const deriveAriaIds = (\n    baseId   : string | undefined,\n    helpText : unknown,\n    errorText: unknown,\n) : { helpTextId ?: string; errorTextId ?: string; describedBy ?: string } => {\n    if (!baseId) return {};\n    const helpTextId = helpText ? `${baseId}-help` : undefined;\n    const errorTextId = errorText ? `${baseId}-error` : undefined;\n    return { helpTextId, errorTextId, describedBy : mergeDescribedBy(errorTextId, helpTextId) };\n};\n\n// TYPES ///////////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport type FormItemElementType = HTMLDivElement;\n\nexport interface FormItemProps extends CommonAndHTMLProps<FormItemElementType> {\n    // Label\n    label           ? : string;\n    customLabel     ? : React.ReactNode;\n    htmlFor         ? : string;\n    hideLabel       ? : boolean;\n    // Info section\n    helpText        ? : string | React.ReactNode;\n    errorText       ? : string;\n    // Validation\n    validationState ? : \"valid\" | \"invalid\" | null;\n    // Form semantics\n    required        ? : boolean;\n    size            ? : Exclude<SpacingTypes, \"nano\" | \"huge\">;\n    // Layout\n    labelFirst      ? : boolean;\n}\n\n// VALIDATION ICON /////////////////////////////////////////////////////////////////////////////////////////////////////\nconst ValidationIcon = ({state} : { state : \"valid\" | \"invalid\" }) => {\n    if (state === \"valid\") {\n        return (\n            <svg\n                data-validation-icon=\"valid\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 24 24\"\n                width=\"20\"\n                height=\"20\"\n            >\n                <polyline\n                    points=\"3.5 12.5 8.5 17.5 20.5 5.5\"\n                    fill=\"none\"\n                    stroke=\"#0ec05c\"\n                    strokeMiterlimit=\"10\"\n                    strokeWidth=\"2\"\n                />\n            </svg>\n        );\n    }\n\n    return (\n        <svg\n            data-validation-icon=\"invalid\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 24 24\"\n            width=\"20\"\n            height=\"20\"\n        >\n            <line\n                x1=\"6.5\"\n                y1=\"17.5\"\n                x2=\"18.5\"\n                y2=\"5.5\"\n                fill=\"none\"\n                stroke=\"#ef4343\"\n                strokeMiterlimit=\"10\"\n                strokeWidth=\"2\"\n            />\n            <line\n                x1=\"6.5\"\n                y1=\"5.5\"\n                x2=\"18.5\"\n                y2=\"17.5\"\n                fill=\"none\"\n                stroke=\"#ef4343\"\n                strokeMiterlimit=\"10\"\n                strokeWidth=\"2\"\n            />\n        </svg>\n    );\n};\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const FormItem = React.forwardRef(\n    (\n        {\n            label,\n            customLabel,\n            htmlFor,\n            hideLabel,\n            helpText,\n            errorText,\n            validationState,\n            required,\n            size,\n            labelFirst,\n            children,\n            ...props\n        } : FormItemProps,\n        ref : React.Ref<FormItemElementType>,\n    ) => {\n        const hasLabel = label || customLabel;\n        const hasInfoSection = helpText || errorText;\n\n        // Stable id base for help/error text. Prefer the explicit `htmlFor` so\n        // ids tie back to the user-visible input id; fall back to React.useId\n        // when the consumer didn't pass one.\n        const reactId = React.useId();\n        const baseId = htmlFor || `form-item-${reactId.replace(/:/g, \"\")}`;\n        const { helpTextId, errorTextId, describedBy } = deriveAriaIds(baseId, helpText, errorText);\n\n        const contextValue : FormItemContextValue = {\n            helpTextId,\n            errorTextId,\n            describedBy,\n            hasError   : Boolean(errorText),\n            isRequired : Boolean(required),\n        };\n\n        return (\n            <FormItemContext.Provider value={contextValue}>\n                <Element<FormItemElementType>\n                    as=\"div\"\n                    data-form-item\n                    data-form-spaced\n                    ref={ref}\n                    role=\"group\"\n                    required={required}\n                    className={[ size ? `size-${size}` : \"\", labelFirst ? \"label-first\" : \"\" ].filter(Boolean)\n                        .join(\" \") || undefined}\n                    {...props}\n                >\n                    {/* LABEL ////////////////////////////////////////////////////////////////////////////////////// */}\n                    {hasLabel && (\n                        <Div data-label-wrapper data-has-validation={validationState ? \"true\" : undefined}>\n                            {customLabel || (label && <InputLabel label={label} htmlFor={htmlFor} hideLabel={hideLabel} />)}\n                            {validationState && <ValidationIcon state={validationState} />}\n                        </Div>\n                    )}\n\n                    {/* INPUT ////////////////////////////////////////////////////////////////////////////////////// */}\n                    <Div data-input-wrapper>\n                        {children}\n                    </Div>\n\n                    {/* INFO SECTION /////////////////////////////////////////////////////////////////////////////// */}\n                    {hasInfoSection && (\n                        <Div className=\"info-section vertically-center-items\">\n                            {helpText && (\n                                <Text id={helpTextId} className=\"help-text\">\n                                    {helpText}\n                                </Text>\n                            )}\n                            {errorText && (\n                                <Text id={errorTextId} role=\"alert\" className=\"error-text\">\n                                    {errorText}\n                                </Text>\n                            )}\n                        </Div>\n                    )}\n                </Element>\n            </FormItemContext.Provider>\n        );\n    },\n);\nFormItem.displayName = \"FormItem\";\n"],"names":["FormItemContext","React","mergeDescribedBy","ids","filtered","s","deriveAriaIds","baseId","helpText","errorText","helpTextId","errorTextId","ValidationIcon","state","jsx","jsxs","FormItem","label","customLabel","htmlFor","hideLabel","validationState","required","size","labelFirst","children","props","ref","hasLabel","hasInfoSection","reactId","describedBy","contextValue","Element","Div","InputLabel","Text"],"mappings":"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"}

package/dist/components/Form/FormItemGroup/FormItemGroup.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import n from "react";
+/* empty css                    */
+import { Element as h } from "../../Element/Element.js";
+const g = n.forwardRef(
+  ({
+    isJoint: e,
+    equalWidthForChildren: a,
+    retainLayout: i,
+    children: m,
+    legend: p,
+    id: s,
+    columns: t,
+    style: o,
+    ...u
+  }, f) => {
+    const d = s || `form-group-${Math.random().toString(36).substring(2, 9)}`;
+    let r = [];
+    return e && r.push("is-joint"), a && r.push("equal-width-for-children"), i && r.push("retain-layout"), t && r.push("with-columns"), /* @__PURE__ */ l(
+      h,
+      {
+        as: "div",
+        "data-form-item-group": !0,
+        "data-form-spaced": !0,
+        ref: f,
+        id: d,
+        role: "group",
+        "aria-label": p,
+        classNames: r,
+        style: t ? { gridTemplateColumns: `repeat(${t}, 1fr)`, ...o } : o,
+        ...u,
+        children: m
+      }
+    );
+  }
+);
+g.displayName = "FormItemGroup";
+export {
+  g as FormItemGroup
+};
+//# sourceMappingURL=FormItemGroup.js.map

package/dist/components/Form/FormItemGroup/FormItemGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormItemGroup.js","sources":["../../../../src/components/Form/FormItemGroup/FormItemGroup.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { CommonAndHTMLProps } from \"../../Element/constants\";\nimport { Element } from \"$element\";\n\n// STYLES ==============================================================================================================\nimport \"./form-item-group.css\";\n\n// prettier-ignore\nexport interface FormItemGroupCustomProps {\n    isJoint               ? : boolean;\n    equalWidthForChildren ? : React.ReactNode;\n    retainLayout          ? : boolean;\n    legend                ? : string;\n    columns               ? : number;\n}\n\nexport type FormItemGroupElementType = HTMLDivElement;\nexport type FormItemGroupProps = Omit<CommonAndHTMLProps<FormItemGroupElementType>, keyof FormItemGroupCustomProps> &\n                                 FormItemGroupCustomProps;\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const FormItemGroup = React.forwardRef(\n    (\n        {\n            isJoint,\n            equalWidthForChildren,\n            retainLayout,\n            children,\n            legend,\n            id,\n            columns,\n            style,\n            ...props\n        } : FormItemGroupProps,\n        ref : React.Ref<FormItemGroupElementType>,\n    ) => {\n        const groupId = id || `form-group-${Math.random().toString(36).substring(2, 9)}`;\n        let classNames = [];\n\n        if (isJoint) {\n            classNames.push(\"is-joint\");\n        }\n\n        if (equalWidthForChildren) {\n            classNames.push(\"equal-width-for-children\");\n        }\n\n        if (retainLayout) {\n            classNames.push(\"retain-layout\");\n        }\n\n        if (columns) {\n            classNames.push(\"with-columns\");\n        }\n\n        return (\n            <Element<FormItemGroupElementType>\n                as=\"div\"\n                data-form-item-group\n                data-form-spaced\n                ref={ref}\n                id={groupId}\n                role=\"group\"\n                aria-label={legend}\n                classNames={classNames}\n                style={columns ? { gridTemplateColumns : `repeat(${columns}, 1fr)`, ...style } : style}\n                {...props}\n            >\n                {children}\n            </Element>\n        );\n    },\n);\nFormItemGroup.displayName = \"FormItemGroup\";\n"],"names":["FormItemGroup","React","isJoint","equalWidthForChildren","retainLayout","children","legend","id","columns","style","props","ref","groupId","classNames","jsx","Element"],"mappings":";;;;AAwBO,MAAMA,IAAgBC,EAAM;AAAA,EAC/B,CACI;AAAA,IACI,SAAAC;AAAA,IACA,uBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC;AAAA,IACA,IAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEPC,MACC;AACD,UAAMC,IAAUL,KAAM,cAAc,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,UAAU,GAAG,CAAC,CAAC;AAC9E,QAAIM,IAAa,CAAA;AAEjB,WAAIX,KACAW,EAAW,KAAK,UAAU,GAG1BV,KACAU,EAAW,KAAK,0BAA0B,GAG1CT,KACAS,EAAW,KAAK,eAAe,GAG/BL,KACAK,EAAW,KAAK,cAAc,GAI9B,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,wBAAoB;AAAA,QACpB,oBAAgB;AAAA,QAChB,KAAAJ;AAAA,QACA,IAAIC;AAAA,QACJ,MAAK;AAAA,QACL,cAAYN;AAAA,QACZ,YAAAO;AAAA,QACA,OAAOL,IAAU,EAAE,qBAAsB,UAAUA,CAAO,UAAU,GAAGC,EAAA,IAAUA;AAAA,QAChF,GAAGC;AAAA,QAEH,UAAAL;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AACAL,EAAc,cAAc;"}

package/dist/components/Form/InputField/InputField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InputField.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/InputField/InputField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAK3D,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGpE,OAAO,mBAAmB,CAAC;AAI3B,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAGjE,MAAM,MAAM,kBAAkB,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;AAChF,MAAM,WAAW,gBAAgB;IAC7B,KAAgB,CAAC,EAAG,MAAM,CAAC;IAC3B,QAAgB,CAAC,EAAG,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC7C,SAAgB,CAAC,EAAG,MAAM,CAAC;IAC3B,YAAgB,CAAC,EAAG,OAAO,CAAC;IAC5B,KAAgB,CAAC,EAAG,OAAO,CAAC;IAC5B,OAAgB,CAAC,EAAG,OAAO,CAAC;IAC5B,eAAgB,CAAC,EAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/C,QAAgB,CAAC,EAAG,OAAO,CAAC;IAC5B,QAAgB,CAAC,EAAG,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,qBAAqB;IAClC,aAAe,CAAC,EAAG,KAAK,CAAC,SAAS,CAAC;IACnC,cAAe,CAAC,EAAG,KAAK,CAAC,SAAS,CAAC;IACnC,aAAe,CAAC,EAAG,MAAM,CAAC;IAC1B,cAAe,CAAC,EAAG,MAAM,CAAC;CAC7B;AAED,MAAM,MAAM,qBAAqB,GAAG,gBAAgB,CAAC;AAErD,MAAM,MAAM,eAAe,GACvB,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC,GAC7F,qBAAqB,GACrB,gBAAgB,GAChB,qBAAqB,GACrB,WAAW,GAAG;IACd,IAAS,CAAC,EAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC1F,IAAS,CAAC,EAAG,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACpD,OAAS,CAAC,EAAG,iBAAiB,CAAC;IAC/B,MAAS,CAAC,EAAG,iBAAiB,CAAC;IAC/B,QAAS,CAAC,EAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC;CAC3C,CAAC;AAGF,eAAO,MAAM,UAAU;WARN,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM;WAC5E,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC;cACtC,iBAAiB;aACjB,iBAAiB;eACjB,kBAAkB,CAAC,MAAM,CAAC;0CA8M1C,CAAC"}
+{"version":3,"file":"InputField.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/InputField/InputField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAK3D,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAGpE,OAAO,mBAAmB,CAAC;AAI3B,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAGjE,MAAM,MAAM,kBAAkB,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;AAChE,MAAM,MAAM,iBAAiB,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;AAChF,MAAM,WAAW,gBAAgB;IAC7B,KAAgB,CAAC,EAAG,MAAM,CAAC;IAC3B,QAAgB,CAAC,EAAG,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAC7C,SAAgB,CAAC,EAAG,MAAM,CAAC;IAC3B,YAAgB,CAAC,EAAG,OAAO,CAAC;IAC5B,KAAgB,CAAC,EAAG,OAAO,CAAC;IAC5B,OAAgB,CAAC,EAAG,OAAO,CAAC;IAC5B,eAAgB,CAAC,EAAG,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;IAC/C,QAAgB,CAAC,EAAG,OAAO,CAAC;IAC5B,QAAgB,CAAC,EAAG,OAAO,CAAC;CAC/B;AAED,MAAM,WAAW,qBAAqB;IAClC,aAAe,CAAC,EAAG,KAAK,CAAC,SAAS,CAAC;IACnC,cAAe,CAAC,EAAG,KAAK,CAAC,SAAS,CAAC;IACnC,aAAe,CAAC,EAAG,MAAM,CAAC;IAC1B,cAAe,CAAC,EAAG,MAAM,CAAC;CAC7B;AAED,MAAM,MAAM,qBAAqB,GAAG,gBAAgB,CAAC;AAErD,MAAM,MAAM,eAAe,GACvB,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC,GAC7F,qBAAqB,GACrB,gBAAgB,GAChB,qBAAqB,GACrB,WAAW,GAAG;IACd,IAAS,CAAC,EAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC1F,IAAS,CAAC,EAAG,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACpD,OAAS,CAAC,EAAG,iBAAiB,CAAC;IAC/B,MAAS,CAAC,EAAG,iBAAiB,CAAC;IAC/B,QAAS,CAAC,EAAG,kBAAkB,CAAC,MAAM,CAAC,CAAC;CAC3C,CAAC;AAGF,eAAO,MAAM,UAAU;WARN,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM;WAC5E,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC;cACtC,iBAAiB;aACjB,iBAAiB;eACjB,kBAAkB,CAAC,MAAM,CAAC;0CAyN1C,CAAC"}

package/dist/components/Form/InputField/InputField.js

@@ -0,0 +1,156 @@
+"use client";
+import { jsxs as I, jsx as N } from "react/jsx-runtime";
+import l, { useRef as y, useState as R, useEffect as ft } from "react";
+import { Div as k } from "../../Element/Tags.js";
+/* empty css                */
+import { deriveAriaIds as ht, FormItem as vt, mergeDescribedBy as yt } from "../FormItem/FormItem.js";
+import { separateWrapperProps as Et } from "../../../utils/propSeparation.js";
+import { Element as bt } from "../../Element/Element.js";
+const wt = l.forwardRef(
+  ({
+    // FormItem props
+    label: E,
+    hideLabel: F,
+    helpText: b,
+    errorText: o,
+    size: W,
+    required: u,
+    // Side elements
+    innerIconLeft: r,
+    innerIconRight: s,
+    innerTextLeft: d,
+    innerTextRight: n,
+    // Validation
+    validateThis: c,
+    valid: St,
+    invalid: A,
+    validationState: C,
+    // Handlers
+    onChange: p,
+    onBlur: m,
+    onFocus: f,
+    // Aria
+    "aria-label": K,
+    "aria-invalid": z,
+    "aria-describedby": G,
+    // Input props
+    id: H,
+    name: J,
+    value: M,
+    defaultValue: O,
+    type: Q = "text",
+    placeholder: U,
+    autoComplete: X,
+    maxLength: Y,
+    minLength: Z,
+    pattern: _,
+    readOnly: q,
+    disabled: x,
+    className: L,
+    ...T
+  }, a) => {
+    const w = y(null), S = y(null), $ = y(null), [tt, et] = R(!1), [at, B] = R(null), it = C ?? (c ? at : null), lt = l.useCallback(
+      (t) => {
+        $.current = t, typeof a == "function" ? a(t) : a && (a.current = t);
+      },
+      [a]
+    ), P = () => {
+      const t = $.current;
+      if (!t || t.value === "") {
+        B(null);
+        return;
+      }
+      B(t.validity.valid ? "valid" : "invalid");
+    }, rt = (t) => {
+      p == null || p(t.target.value), tt && c && P();
+    }, st = (t) => {
+      et(!0), c && P(), m == null || m(t);
+    }, dt = (t) => {
+      f == null || f(t);
+    };
+    ft(() => {
+      const t = (i, v) => {
+        if (!i) return;
+        const e = i.closest("[data-form-item]");
+        e == null || e.style.setProperty(
+          `--side-element-${v}-width`,
+          `${i.getBoundingClientRect().width}px`
+        );
+      };
+      (d || r) && t(w.current, "left"), (n || s) && t(S.current, "right");
+    }, [d, n, r, s]);
+    const V = (t, i, v) => {
+      if (!t) return null;
+      const e = typeof t == "string", D = l.isValidElement(t) ? t.props : {}, mt = !e && l.isValidElement(t) && (D.onClick || D.onKeyDown || t.type === "button" || t.type === "a");
+      return /* @__PURE__ */ N(
+        k,
+        {
+          ref: v,
+          "data-input-side-element": !0,
+          className: `${i} ${e ? "is-text" : "is-icon"} ${mt ? "is-interactive" : ""}`,
+          "aria-hidden": "true",
+          children: t
+        }
+      );
+    }, g = !!(r || d), j = !!(s || n), { wrapperProps: nt, inputProps: ot } = Et(T), ut = l.useId(), h = H || `input-${ut.replace(/:/g, "")}`, { describedBy: ct } = ht(h, b, o), pt = !!o || z || A;
+    return /* @__PURE__ */ I(
+      vt,
+      {
+        label: E,
+        hideLabel: F,
+        htmlFor: h,
+        helpText: b,
+        errorText: o,
+        validationState: it,
+        required: u,
+        size: W,
+        ...nt,
+        children: [
+          /* @__PURE__ */ N(
+            bt,
+            {
+              as: "input",
+              ref: lt,
+              "data-input-field": !0,
+              id: h,
+              name: J,
+              type: Q,
+              value: M,
+              defaultValue: O,
+              placeholder: U || " ",
+              autoComplete: X,
+              maxLength: Y,
+              minLength: Z,
+              pattern: _,
+              readOnly: q,
+              disabled: x,
+              required: u,
+              className: [
+                L,
+                g && "with-left-element",
+                j && "with-right-element"
+              ].filter(Boolean).join(" "),
+              "aria-label": K || E,
+              "aria-invalid": pt || void 0,
+              "aria-required": u,
+              "aria-describedby": yt(G, ct),
+              onChange: rt,
+              onBlur: st,
+              onFocus: dt,
+              ...ot
+            }
+          ),
+          (g || j) && /* @__PURE__ */ I(k, { "data-input-helper": !0, "aria-hidden": "true", children: [
+            V(r || d, "left", w),
+            V(s || n, "right", S)
+          ] })
+        ]
+      }
+    );
+  }
+);
+wt.displayName = "InputField";
+export {
+  wt as InputField
+};
+//# sourceMappingURL=InputField.js.map

package/dist/components/Form/InputField/InputField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputField.js","sources":["../../../../src/components/Form/InputField/InputField.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useEffect, useRef, useState } from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { Div } from \"$tags\";\nimport { Element } from \"$element\";\nimport { SpacingTypes, CommonProps } from \"../../Element/constants\";\n\n// STYLES ==============================================================================================================\nimport \"./input-field.css\";\n\n// OTHER ===============================================================================================================\nimport { FormItem, deriveAriaIds, mergeDescribedBy } from \"../FormItem/FormItem\";\nimport { InputLabelCustomProps } from \"../InputLabel/InputLabel\";\nimport { separateWrapperProps } from \"../../../utils/propSeparation\";\n\nexport type ValueChangeHandler<T = string> = (value: T) => void;\nexport type InputFocusHandler = (e: React.FocusEvent<HTMLInputElement>) => void;\nexport interface InputCommonProps {\n    label           ? : string;\n    helpText        ? : string | React.ReactNode;\n    errorText       ? : string;\n    validateThis    ? : boolean;\n    valid           ? : boolean;\n    invalid         ? : boolean;\n    validationState ? : \"valid\" | \"invalid\" | null;\n    required        ? : boolean;\n    disabled        ? : boolean;\n}\n\nexport interface InputSideElementProps {\n    innerIconLeft  ? : React.ReactNode;\n    innerIconRight ? : React.ReactNode;\n    innerTextLeft  ? : string;\n    innerTextRight ? : string;\n}\n\nexport type InputFieldElementType = HTMLInputElement;\n\nexport type InputFieldProps =\n    Omit<React.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"onBlur\" | \"onFocus\" | \"size\"> &\n    InputLabelCustomProps &\n    InputCommonProps &\n    InputSideElementProps &\n    CommonProps & {\n    type     ? : \"text\" | \"password\" | \"email\" | \"number\" | \"tel\" | \"url\" | \"search\" | \"file\";\n    size     ? : Exclude<SpacingTypes, \"nano\" | \"huge\">;\n    onFocus  ? : InputFocusHandler;\n    onBlur   ? : InputFocusHandler;\n    onChange ? : ValueChangeHandler<string>;\n};\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const InputField = React.forwardRef(\n    (\n        {\n            // FormItem props\n            label,\n            hideLabel,\n            helpText,\n            errorText,\n            size,\n            required,\n            // Side elements\n            innerIconLeft,\n            innerIconRight,\n            innerTextLeft,\n            innerTextRight,\n            // Validation\n            validateThis,\n            valid,\n            invalid,\n            validationState: externalValidationState,\n            // Handlers\n            onChange,\n            onBlur,\n            onFocus,\n            // Aria\n            \"aria-label\": ariaLabel,\n            \"aria-invalid\": ariaInvalid,\n            \"aria-describedby\": ariaDescribedBy,\n            // Input props\n            id,\n            name,\n            value,\n            defaultValue,\n            type = \"text\",\n            placeholder,\n            autoComplete,\n            maxLength,\n            minLength,\n            pattern,\n            readOnly,\n            disabled,\n            className,\n            ...props\n        }: InputFieldProps,\n        ref: React.Ref<InputFieldElementType>\n    ) => {\n        const leftElementRef = useRef<HTMLDivElement>(null);\n        const rightElementRef = useRef<HTMLDivElement>(null);\n        const internalInputRef = useRef<HTMLInputElement>(null);\n\n        const [touched, setTouched] = useState(false);\n        const [internalValidationState, setInternalValidationState] = useState<\"valid\" | \"invalid\" | null>(null);\n\n        // Use external validation state if provided, otherwise use internal\n        const validationState = externalValidationState ?? (validateThis ? internalValidationState : null);\n\n        // Merge refs\n        const mergeRefs = React.useCallback(\n            (el: HTMLInputElement | null) => {\n                (internalInputRef as React.MutableRefObject<HTMLInputElement | null>).current = el;\n                if (typeof ref === \"function\") {\n                    ref(el);\n                } else if (ref) {\n                    (ref as React.MutableRefObject<HTMLInputElement | null>).current = el;\n                }\n            },\n            [ref]\n        );\n\n        const updateValidationState = () => {\n            const input = internalInputRef.current;\n            if (!input || input.value === \"\") {\n                setInternalValidationState(null);\n                return;\n            }\n            setInternalValidationState(input.validity.valid ? \"valid\" : \"invalid\");\n        };\n\n        const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n            onChange?.(e.target.value);\n            if (touched && validateThis) {\n                updateValidationState();\n            }\n        };\n\n        const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n            setTouched(true);\n            if (validateThis) {\n                updateValidationState();\n            }\n            onBlur?.(e);\n        };\n\n        const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {\n            onFocus?.(e);\n        };\n\n        // Side element width calculation\n        useEffect(() => {\n            const updateWidth = (el: HTMLDivElement | null, pos: \"left\" | \"right\") => {\n                if (!el) return;\n                const formItem = el.closest(\"[data-form-item]\") as HTMLElement;\n                formItem?.style.setProperty(\n                    `--side-element-${pos}-width`,\n                    `${el.getBoundingClientRect().width}px`\n                );\n            };\n\n            if (innerTextLeft || innerIconLeft) {\n                updateWidth(leftElementRef.current, \"left\");\n            }\n            if (innerTextRight || innerIconRight) {\n                updateWidth(rightElementRef.current, \"right\");\n            }\n        }, [innerTextLeft, innerTextRight, innerIconLeft, innerIconRight]);\n\n        const renderSideElement = (\n            content: React.ReactNode,\n            position: \"left\" | \"right\",\n            elRef: React.RefObject<HTMLDivElement | null>\n        ) => {\n            if (!content) return null;\n\n            const isText = typeof content === \"string\";\n            const contentProps = React.isValidElement(content) ? (content.props as Record<string, unknown>) : {};\n            const isInteractive =\n                !isText &&\n                React.isValidElement(content) &&\n                (contentProps.onClick ||\n                    contentProps.onKeyDown ||\n                    content.type === \"button\" ||\n                    content.type === \"a\");\n\n            return (\n                <Div\n                    ref={elRef}\n                    data-input-side-element\n                    className={`${position} ${isText ? \"is-text\" : \"is-icon\"} ${isInteractive ? \"is-interactive\" : \"\"}`}\n                    aria-hidden=\"true\"\n                >\n                    {content}\n                </Div>\n            );\n        };\n\n        const hasLeftElement = Boolean(innerIconLeft || innerTextLeft);\n        const hasRightElement = Boolean(innerIconRight || innerTextRight);\n\n        // Separate wrapper-level props (margin, padding, etc.) from input-specific props\n        const { wrapperProps, inputProps } = separateWrapperProps(props);\n\n        // Stable id so help/error text in FormItem can be linked back via\n        // aria-describedby. Falls back to a React.useId when the consumer\n        // doesn't pass one explicitly.\n        const reactId = React.useId();\n        const finalId = id || `input-${reactId.replace(/:/g, \"\")}`;\n        const { describedBy } = deriveAriaIds(finalId, helpText, errorText);\n        const hasError = Boolean(errorText) || ariaInvalid || invalid;\n\n        return (\n            <FormItem\n                label={label}\n                hideLabel={hideLabel}\n                htmlFor={finalId}\n                helpText={helpText}\n                errorText={errorText}\n                validationState={validationState}\n                required={required}\n                size={size}\n                {...wrapperProps}\n            >\n                <Element<InputFieldElementType>\n                    as=\"input\"\n                    ref={mergeRefs}\n                    data-input-field\n                    id={finalId}\n                    name={name}\n                    type={type}\n                    value={value}\n                    defaultValue={defaultValue}\n                    placeholder={placeholder || \" \"}\n                    autoComplete={autoComplete}\n                    maxLength={maxLength}\n                    minLength={minLength}\n                    pattern={pattern}\n                    readOnly={readOnly}\n                    disabled={disabled}\n                    required={required}\n                    className={[\n                        className,\n                        hasLeftElement && \"with-left-element\",\n                        hasRightElement && \"with-right-element\",\n                    ]\n                        .filter(Boolean)\n                        .join(\" \")}\n                    aria-label={ariaLabel || label}\n                    aria-invalid={hasError || undefined}\n                    aria-required={required}\n                    aria-describedby={mergeDescribedBy(ariaDescribedBy, describedBy)}\n                    onChange={handleChange}\n                    onBlur={handleBlur}\n                    onFocus={handleFocus}\n                    {...inputProps}\n                />\n                {(hasLeftElement || hasRightElement) && (\n                    <Div data-input-helper aria-hidden=\"true\">\n                        {renderSideElement(innerIconLeft || innerTextLeft, \"left\", leftElementRef)}\n                        {renderSideElement(innerIconRight || innerTextRight, \"right\", rightElementRef)}\n                    </Div>\n                )}\n            </FormItem>\n        );\n    }\n);\nInputField.displayName = \"InputField\";\n"],"names":["InputField","React","label","hideLabel","helpText","errorText","size","required","innerIconLeft","innerIconRight","innerTextLeft","innerTextRight","validateThis","valid","invalid","externalValidationState","onChange","onBlur","onFocus","ariaLabel","ariaInvalid","ariaDescribedBy","id","name","value","defaultValue","type","placeholder","autoComplete","maxLength","minLength","pattern","readOnly","disabled","className","props","ref","leftElementRef","useRef","rightElementRef","internalInputRef","touched","setTouched","useState","internalValidationState","setInternalValidationState","validationState","mergeRefs","el","updateValidationState","input","handleChange","e","handleBlur","handleFocus","useEffect","updateWidth","pos","formItem","renderSideElement","content","position","elRef","isText","contentProps","isInteractive","jsx","Div","hasLeftElement","hasRightElement","wrapperProps","inputProps","separateWrapperProps","reactId","finalId","describedBy","deriveAriaIds","hasError","jsxs","FormItem","Element","mergeDescribedBy"],"mappings":"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"}

package/dist/components/Form/InputLabel/InputLabel.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as m } from "react/jsx-runtime";
+import s from "react";
+import { Element as p } from "../../Element/Element.js";
+const n = s.forwardRef(
+  ({
+    label: r,
+    hideLabel: t,
+    htmlFor: a,
+    ...l
+  }, o) => {
+    let e = [];
+    return t && e.push("sr-only"), /* @__PURE__ */ m(
+      p,
+      {
+        as: "label",
+        ref: o,
+        htmlFor: a,
+        classNames: e,
+        ...l,
+        children: r
+      }
+    );
+  }
+);
+n.displayName = "InputLabel";
+export {
+  n as InputLabel
+};
+//# sourceMappingURL=InputLabel.js.map

package/dist/components/Form/InputLabel/InputLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputLabel.js","sources":["../../../../src/components/Form/InputLabel/InputLabel.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React from \"react\";\n\n// ELEMENT =============================================================================================================\nimport { CommonAndHTMLProps } from \"../../Element/constants\";\n\n// OTHER ===============================================================================================================\nimport { Element } from \"$element\";\n\n// prettier-ignore\nexport interface InputLabelCustomProps {\n        label     ? : string;\n        htmlFor   ? : string;\n        hideLabel ? : boolean;\n}\n\nexport type InputLabelElementType = HTMLLabelElement;\nexport type InputLabelProps = Omit<CommonAndHTMLProps<InputLabelElementType>, keyof InputLabelCustomProps> &\n    InputLabelCustomProps;\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const InputLabel = React.forwardRef(\n    (\n        {\n            label,\n            hideLabel,\n            htmlFor,\n            ...props\n        }: InputLabelProps,\n        ref: React.Ref<InputLabelElementType>\n    ) => {\n        let classNames = [];\n\n        if (hideLabel) {\n            classNames.push(\"sr-only\");\n        }\n\n        return (\n            <Element<InputLabelElementType>\n                as=\"label\"\n                ref={ref}\n                htmlFor={htmlFor}\n                classNames={classNames}\n                {...props}\n            >\n                {label}\n            </Element>\n        );\n    }\n);\nInputLabel.displayName = \"InputLabel\";\n"],"names":["InputLabel","React","label","hideLabel","htmlFor","props","ref","classNames","jsx","Element"],"mappings":";;;AAqBO,MAAMA,IAAaC,EAAM;AAAA,EAC5B,CACI;AAAA,IACI,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEPC,MACC;AACD,QAAIC,IAAa,CAAA;AAEjB,WAAIJ,KACAI,EAAW,KAAK,SAAS,GAIzB,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,KAAAH;AAAA,QACA,SAAAF;AAAA,QACA,YAAAG;AAAA,QACC,GAAGF;AAAA,QAEH,UAAAH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGb;AACJ;AACAF,EAAW,cAAc;"}

package/dist/components/Form/ListBox/ListBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/ListBox/ListBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAa5F,OAAO,gBAAgB,CAAC;AAMxB,OAAO,EAA2D,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAK1G,eAAO,MAAM,OAAO,kMAoYnB,CAAC"}
+{"version":3,"file":"ListBox.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/ListBox/ListBox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAa5F,OAAO,gBAAgB,CAAC;AAMxB,OAAO,EAA2D,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAK1G,eAAO,MAAM,OAAO,kMAmanB,CAAC"}