@mdigital_ui/ui 0.4.0 → 0.4.2

package/dist/chunk-GOLARX5K.js

@@ -0,0 +1,310 @@
+import { spinner_default } from './chunk-Y4XAXZHB.js';
+import { getValidationStatus, cn, statusMessageVariants, iconSizes } from './chunk-NGYLRX6F.js';
+import { cva } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import React, { useId, useMemo } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var floatInputVariants = cva(
+  "peer w-full placeholder:text-transparent rounded-md disabled:opacity-50 disabled:cursor-not-allowed read-only:bg-surface read-only:cursor-default outline-none text-text-primary transition-[border-color] duration-200 border border-border focus:border-primary focus:ring-1 focus:ring-primary/20 bg-background",
+  {
+    variants: {
+      status: {
+        default: "",
+        error: "border-error focus:border-error focus:ring-error/20",
+        warning: "border-warning focus:border-warning focus:ring-warning/20",
+        info: "border-info focus:border-info focus:ring-info/20",
+        success: "border-success focus:border-success focus:ring-success/20"
+      },
+      size: {
+        xs: "h-9 pt-3.5 px-2 text-xs",
+        sm: "h-10 pt-4 px-3 text-sm",
+        md: "h-12 pt-5 px-3 text-base",
+        lg: "h-14 pt-5 px-4 text-lg"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: "max-w-full"
+      }
+    },
+    defaultVariants: {
+      status: "default",
+      size: "md",
+      fullWidth: true
+    }
+  }
+);
+var floatLabelVariants = cva(
+  "absolute pointer-events-none transition-[top,font-size,color] duration-200 text-text-secondary origin-left",
+  {
+    variants: {
+      size: {
+        xs: "left-2 text-xs top-2.5 peer-focus:top-1 peer-focus:text-[10px] peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-[10px]",
+        sm: "left-3 text-sm top-2.5 peer-focus:top-1.5 peer-focus:text-[10px] peer-[:not(:placeholder-shown)]:top-1.5 peer-[:not(:placeholder-shown)]:text-[10px]",
+        md: "left-3 text-base top-3 peer-focus:top-2 peer-focus:text-xs peer-[:not(:placeholder-shown)]:top-2 peer-[:not(:placeholder-shown)]:text-xs",
+        lg: "left-4 text-lg top-3.5 peer-focus:top-2.5 peer-focus:text-xs peer-[:not(:placeholder-shown)]:top-2.5 peer-[:not(:placeholder-shown)]:text-xs"
+      },
+      status: {
+        default: "",
+        error: "peer-focus:text-error",
+        warning: "peer-focus:text-warning",
+        info: "peer-focus:text-info",
+        success: "peer-focus:text-success"
+      },
+      hasLeftIcon: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        size: "xs",
+        hasLeftIcon: true,
+        className: "left-8"
+      },
+      {
+        size: "sm",
+        hasLeftIcon: true,
+        className: "left-10"
+      },
+      {
+        size: "md",
+        hasLeftIcon: true,
+        className: "left-10"
+      },
+      {
+        size: "lg",
+        hasLeftIcon: true,
+        className: "left-10"
+      }
+    ],
+    defaultVariants: {
+      size: "md",
+      status: "default",
+      hasLeftIcon: false
+    }
+  }
+);
+var FloatInput = React.memo(
+  ({
+    size = "md",
+    label,
+    error,
+    warning,
+    info,
+    success,
+    helperText,
+    leftIcon,
+    rightIcon,
+    clearable = false,
+    onClear,
+    loading = false,
+    fullWidth = true,
+    className,
+    classNames,
+    value,
+    onChange,
+    ref,
+    ...props
+  }) => {
+    const [internalValue, setInternalValue] = React.useState("");
+    const currentValue = value !== void 0 ? value : internalValue;
+    const uniqueId = useId();
+    const inputId = props.id || `float-input-${uniqueId}`;
+    const helperId = `float-input-helper-${uniqueId}`;
+    const loadingId = `float-input-loading-${uniqueId}`;
+    const labelId = `float-input-label-${uniqueId}`;
+    const { status, message: helperMessage } = useMemo(
+      () => getValidationStatus({ error, warning, info, success, helperText }),
+      [error, warning, info, success, helperText]
+    );
+    const handleChange = React.useCallback(
+      (e) => {
+        if (value === void 0) setInternalValue(e.target.value);
+        onChange?.(e);
+      },
+      [value, onChange]
+    );
+    const handleClear = React.useCallback(() => {
+      if (value === void 0) setInternalValue("");
+      onClear?.();
+    }, [value, onClear]);
+    const showClear = clearable && currentValue && !props.disabled && !props.readOnly;
+    const hasRightIcon = rightIcon || showClear || loading;
+    const ariaDescribedBy = useMemo(() => {
+      const parts = [];
+      if (helperMessage) parts.push(helperId);
+      if (loading) parts.push(loadingId);
+      return parts.length > 0 ? parts.join(" ") : void 0;
+    }, [helperMessage, helperId, loading, loadingId]);
+    const rootClass = useMemo(
+      () => cn(
+        "float-input_root",
+        "w-full flex flex-col relative",
+        !fullWidth && "inline-block",
+        classNames?.root
+      ),
+      [fullWidth, classNames?.root]
+    );
+    const wrapperClass = useMemo(
+      () => cn(
+        "float-input_wrapper",
+        "relative w-full",
+        loading && "opacity-50 cursor-not-allowed",
+        classNames?.wrapper
+      ),
+      [loading, classNames?.wrapper]
+    );
+    const leftIconClass = useMemo(() => {
+      const sizeClasses = {
+        xs: "left-2",
+        sm: "left-3",
+        md: "left-3",
+        lg: "left-4"
+      };
+      return cn(
+        "float-input_leftIcon",
+        "absolute flex items-center h-full top-0 text-text-secondary",
+        sizeClasses[size],
+        classNames?.leftIcon
+      );
+    }, [size, classNames?.leftIcon]);
+    const inputClass = useMemo(() => {
+      const leftPadding = leftIcon ? {
+        xs: "pl-8",
+        sm: "pl-10",
+        md: "pl-10",
+        lg: "pl-11"
+      }[size] : "";
+      const rightPadding = hasRightIcon ? {
+        xs: "pr-8",
+        sm: "pr-8",
+        md: "pr-8",
+        lg: "pr-10"
+      }[size] : "";
+      return cn(
+        "float-input_input",
+        floatInputVariants({ status, size, fullWidth }),
+        leftPadding,
+        rightPadding,
+        className,
+        classNames?.input
+      );
+    }, [
+      status,
+      size,
+      fullWidth,
+      leftIcon,
+      hasRightIcon,
+      className,
+      classNames?.input
+    ]);
+    const labelClass = useMemo(
+      () => cn(
+        "float-input_label",
+        floatLabelVariants({ size, status, hasLeftIcon: !!leftIcon }),
+        classNames?.label
+      ),
+      [size, status, leftIcon, classNames?.label]
+    );
+    const rightIconClass = useMemo(() => {
+      const sizeClasses = {
+        xs: "right-2",
+        sm: "right-3",
+        md: "right-3",
+        lg: "right-4"
+      };
+      return cn(
+        "float-input_rightIcon",
+        "absolute flex gap-2 items-center h-full top-0 text-text-secondary",
+        sizeClasses[size],
+        classNames?.rightIcon
+      );
+    }, [size, classNames?.rightIcon]);
+    const clearButtonClass = useMemo(
+      () => cn(
+        "float-input_clearButton",
+        "flex items-center h-full top-0 text-text-secondary hover:text-text-primary transition-colors",
+        classNames?.clearButton
+      ),
+      [classNames?.clearButton]
+    );
+    const helperClass = useMemo(
+      () => cn(
+        "float-input_helper",
+        statusMessageVariants({ status }),
+        "mt-0.5",
+        status === "error" ? classNames?.error : classNames?.helper
+      ),
+      [status, classNames?.error, classNames?.helper]
+    );
+    const iconSize = iconSizes[size];
+    return /* @__PURE__ */ jsxs("div", { "data-slot": "root", className: rootClass, children: [
+      /* @__PURE__ */ jsxs("div", { "data-slot": "wrapper", className: wrapperClass, children: [
+        leftIcon && /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "leftIcon",
+            className: leftIconClass,
+            "aria-hidden": "true",
+            children: leftIcon
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref,
+            id: inputId,
+            "data-slot": "input",
+            className: inputClass,
+            value: currentValue,
+            onChange: handleChange,
+            placeholder: " ",
+            "aria-invalid": status === "error",
+            "aria-busy": loading,
+            "aria-describedby": ariaDescribedBy,
+            "aria-labelledby": labelId,
+            ...props
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            id: labelId,
+            htmlFor: inputId,
+            "data-slot": "label",
+            className: labelClass,
+            children: [
+              label,
+              props.required && /* @__PURE__ */ jsx("span", { className: "text-error ml-0.5", children: "*" })
+            ]
+          }
+        ),
+        (hasRightIcon || rightIcon) && /* @__PURE__ */ jsxs("div", { "data-slot": "rightIcon", className: rightIconClass, children: [
+          showClear && !loading && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleClear,
+              "data-slot": "clearButton",
+              className: clearButtonClass,
+              "aria-label": "Clear input",
+              children: /* @__PURE__ */ jsx(X, { className: iconSize, "aria-hidden": "true" })
+            }
+          ),
+          loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(spinner_default, { "aria-hidden": "true", size }),
+            /* @__PURE__ */ jsx("span", { id: loadingId, className: "sr-only", children: "Loading" })
+          ] }) : rightIcon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: rightIcon })
+        ] })
+      ] }),
+      helperMessage && /* @__PURE__ */ jsx("p", { id: helperId, "data-slot": "helper", className: helperClass, children: helperMessage })
+    ] });
+  }
+);
+FloatInput.displayName = "FloatInput";
+var float_input_default = FloatInput;
+
+export { float_input_default };
+//# sourceMappingURL=chunk-GOLARX5K.js.map
+//# sourceMappingURL=chunk-GOLARX5K.js.map

package/dist/chunk-GOLARX5K.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/float-input/index.tsx"],"names":[],"mappings":"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","file":"chunk-GOLARX5K.js","sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { X } from \"lucide-react\";\nimport React, { useId, useMemo } from \"react\";\n\nimport Spinner from \"../spinner\";\n\nimport {\n  cn,\n  getValidationStatus,\n  iconSizes,\n  statusMessageVariants,\n} from \"../utils\";\nimport type { FloatInputProps } from \"./types\";\n\nconst floatInputVariants = cva(\n  \"peer w-full placeholder:text-transparent rounded-md disabled:opacity-50 disabled:cursor-not-allowed read-only:bg-surface read-only:cursor-default outline-none text-text-primary transition-[border-color] duration-200 border border-border focus:border-primary focus:ring-1 focus:ring-primary/20 bg-background\",\n  {\n    variants: {\n      status: {\n        default: \"\",\n        error: \"border-error focus:border-error focus:ring-error/20\",\n        warning: \"border-warning focus:border-warning focus:ring-warning/20\",\n        info: \"border-info focus:border-info focus:ring-info/20\",\n        success: \"border-success focus:border-success focus:ring-success/20\",\n      },\n      size: {\n        xs: \"h-9 pt-3.5 px-2 text-xs\",\n        sm: \"h-10 pt-4 px-3 text-sm\",\n        md: \"h-12 pt-5 px-3 text-base\",\n        lg: \"h-14 pt-5 px-4 text-lg\",\n      },\n      fullWidth: {\n        true: \"w-full\",\n        false: \"max-w-full\",\n      },\n    },\n    defaultVariants: {\n      status: \"default\",\n      size: \"md\",\n      fullWidth: true,\n    },\n  },\n);\n\nconst floatLabelVariants = cva(\n  \"absolute pointer-events-none transition-[top,font-size,color] duration-200 text-text-secondary origin-left\",\n  {\n    variants: {\n      size: {\n        xs: \"left-2 text-xs top-2.5 peer-focus:top-1 peer-focus:text-[10px] peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-[10px]\",\n        sm: \"left-3 text-sm top-2.5 peer-focus:top-1.5 peer-focus:text-[10px] peer-[:not(:placeholder-shown)]:top-1.5 peer-[:not(:placeholder-shown)]:text-[10px]\",\n        md: \"left-3 text-base top-3 peer-focus:top-2 peer-focus:text-xs peer-[:not(:placeholder-shown)]:top-2 peer-[:not(:placeholder-shown)]:text-xs\",\n        lg: \"left-4 text-lg top-3.5 peer-focus:top-2.5 peer-focus:text-xs peer-[:not(:placeholder-shown)]:top-2.5 peer-[:not(:placeholder-shown)]:text-xs\",\n      },\n      status: {\n        default: \"\",\n        error: \"peer-focus:text-error\",\n        warning: \"peer-focus:text-warning\",\n        info: \"peer-focus:text-info\",\n        success: \"peer-focus:text-success\",\n      },\n      hasLeftIcon: {\n        true: \"\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        size: \"xs\",\n        hasLeftIcon: true,\n        className: \"left-8\",\n      },\n      {\n        size: \"sm\",\n        hasLeftIcon: true,\n        className: \"left-10\",\n      },\n      {\n        size: \"md\",\n        hasLeftIcon: true,\n        className: \"left-10\",\n      },\n      {\n        size: \"lg\",\n        hasLeftIcon: true,\n        className: \"left-10\",\n      },\n    ],\n    defaultVariants: {\n      size: \"md\",\n      status: \"default\",\n      hasLeftIcon: false,\n    },\n  },\n);\n\nconst FloatInput = React.memo<FloatInputProps>(\n  ({\n    size = \"md\",\n    label,\n    error,\n    warning,\n    info,\n    success,\n    helperText,\n    leftIcon,\n    rightIcon,\n    clearable = false,\n    onClear,\n    loading = false,\n    fullWidth = true,\n    className,\n    classNames,\n    value,\n    onChange,\n    ref,\n    ...props\n  }) => {\n    const [internalValue, setInternalValue] = React.useState(\"\");\n    const currentValue = value !== undefined ? value : internalValue;\n\n    // Generate unique IDs for accessibility\n    const uniqueId = useId();\n    const inputId = props.id || `float-input-${uniqueId}`;\n    const helperId = `float-input-helper-${uniqueId}`;\n    const loadingId = `float-input-loading-${uniqueId}`;\n    const labelId = `float-input-label-${uniqueId}`;\n\n    // Use shared validation status utility - memoized\n    const { status, message: helperMessage } = useMemo(\n      () => getValidationStatus({ error, warning, info, success, helperText }),\n      [error, warning, info, success, helperText],\n    );\n\n    const handleChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        if (value === undefined) setInternalValue(e.target.value);\n        onChange?.(e);\n      },\n      [value, onChange],\n    );\n\n    const handleClear = React.useCallback(() => {\n      if (value === undefined) setInternalValue(\"\");\n      onClear?.();\n    }, [value, onClear]);\n\n    const showClear =\n      clearable && currentValue && !props.disabled && !props.readOnly;\n    const hasRightIcon = rightIcon || showClear || loading;\n\n    // Memoize aria-describedby to avoid array recreation on every render\n    const ariaDescribedBy = useMemo(() => {\n      const parts: string[] = [];\n      if (helperMessage) parts.push(helperId);\n      if (loading) parts.push(loadingId);\n      return parts.length > 0 ? parts.join(\" \") : undefined;\n    }, [helperMessage, helperId, loading, loadingId]);\n\n    // Memoize expensive className computations\n    const rootClass = useMemo(\n      () =>\n        cn(\n          \"float-input_root\",\n          \"w-full flex flex-col relative\",\n          !fullWidth && \"inline-block\",\n          classNames?.root,\n        ),\n      [fullWidth, classNames?.root],\n    );\n\n    const wrapperClass = useMemo(\n      () =>\n        cn(\n          \"float-input_wrapper\",\n          \"relative w-full\",\n          loading && \"opacity-50 cursor-not-allowed\",\n          classNames?.wrapper,\n        ),\n      [loading, classNames?.wrapper],\n    );\n\n    const leftIconClass = useMemo(() => {\n      const sizeClasses = {\n        xs: \"left-2\",\n        sm: \"left-3\",\n        md: \"left-3\",\n        lg: \"left-4\",\n      };\n      return cn(\n        \"float-input_leftIcon\",\n        \"absolute flex items-center h-full top-0 text-text-secondary\",\n        sizeClasses[size],\n        classNames?.leftIcon,\n      );\n    }, [size, classNames?.leftIcon]);\n\n    const inputClass = useMemo(() => {\n      const leftPadding = leftIcon\n        ? {\n            xs: \"pl-8\",\n            sm: \"pl-10\",\n            md: \"pl-10\",\n            lg: \"pl-11\",\n          }[size]\n        : \"\";\n\n      const rightPadding = hasRightIcon\n        ? {\n            xs: \"pr-8\",\n            sm: \"pr-8\",\n            md: \"pr-8\",\n            lg: \"pr-10\",\n          }[size]\n        : \"\";\n\n      return cn(\n        \"float-input_input\",\n        floatInputVariants({ status, size, fullWidth }),\n        leftPadding,\n        rightPadding,\n        className,\n        classNames?.input,\n      );\n    }, [\n      status,\n      size,\n      fullWidth,\n      leftIcon,\n      hasRightIcon,\n      className,\n      classNames?.input,\n    ]);\n\n    const labelClass = useMemo(\n      () =>\n        cn(\n          \"float-input_label\",\n          floatLabelVariants({ size, status, hasLeftIcon: !!leftIcon }),\n          classNames?.label,\n        ),\n      [size, status, leftIcon, classNames?.label],\n    );\n\n    const rightIconClass = useMemo(() => {\n      const sizeClasses = {\n        xs: \"right-2\",\n        sm: \"right-3\",\n        md: \"right-3\",\n        lg: \"right-4\",\n      };\n      return cn(\n        \"float-input_rightIcon\",\n        \"absolute flex gap-2 items-center h-full top-0 text-text-secondary\",\n        sizeClasses[size],\n        classNames?.rightIcon,\n      );\n    }, [size, classNames?.rightIcon]);\n\n    const clearButtonClass = useMemo(\n      () =>\n        cn(\n          \"float-input_clearButton\",\n          \"flex items-center h-full top-0 text-text-secondary hover:text-text-primary transition-colors\",\n          classNames?.clearButton,\n        ),\n      [classNames?.clearButton],\n    );\n\n    const helperClass = useMemo(\n      () =>\n        cn(\n          \"float-input_helper\",\n          statusMessageVariants({ status }),\n          \"mt-0.5\",\n          status === \"error\" ? classNames?.error : classNames?.helper,\n        ),\n      [status, classNames?.error, classNames?.helper],\n    );\n\n    const iconSize = iconSizes[size];\n\n    return (\n      <div data-slot=\"root\" className={rootClass}>\n        <div data-slot=\"wrapper\" className={wrapperClass}>\n          {leftIcon && (\n            <div\n              data-slot=\"leftIcon\"\n              className={leftIconClass}\n              aria-hidden=\"true\"\n            >\n              {leftIcon}\n            </div>\n          )}\n          <input\n            ref={ref}\n            id={inputId}\n            data-slot=\"input\"\n            className={inputClass}\n            value={currentValue}\n            onChange={handleChange}\n            placeholder=\" \"\n            aria-invalid={status === \"error\"}\n            aria-busy={loading}\n            aria-describedby={ariaDescribedBy}\n            aria-labelledby={labelId}\n            {...props}\n          />\n          <label\n            id={labelId}\n            htmlFor={inputId}\n            data-slot=\"label\"\n            className={labelClass}\n          >\n            {label}\n            {props.required && <span className=\"text-error ml-0.5\">*</span>}\n          </label>\n          {(hasRightIcon || rightIcon) && (\n            <div data-slot=\"rightIcon\" className={rightIconClass}>\n              {showClear && !loading && (\n                <button\n                  type=\"button\"\n                  onClick={handleClear}\n                  data-slot=\"clearButton\"\n                  className={clearButtonClass}\n                  aria-label=\"Clear input\"\n                >\n                  <X className={iconSize} aria-hidden=\"true\" />\n                </button>\n              )}\n              {loading ? (\n                <>\n                  <Spinner aria-hidden=\"true\" size={size} />\n                  <span id={loadingId} className=\"sr-only\">\n                    Loading\n                  </span>\n                </>\n              ) : (\n                rightIcon && <span aria-hidden=\"true\">{rightIcon}</span>\n              )}\n            </div>\n          )}\n        </div>\n        {helperMessage && (\n          <p id={helperId} data-slot=\"helper\" className={helperClass}>\n            {helperMessage}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\n\nFloatInput.displayName = \"FloatInput\";\n\nexport type * from \"./types\";\nexport default FloatInput;\n"]}