@luxfi/ui 5.5.3 → 5.6.0

package/dist/input-group.cjs

@@ -0,0 +1,155 @@
+"use client";
+'use strict';
+
+var esToolkit = require('es-toolkit');
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/input-group.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function getComponentDisplayName(type) {
+  if (typeof type === "string") return void 0;
+  if ("displayName" in type) return type.displayName;
+  return void 0;
+}
+var InputGroup = React__namespace.forwardRef(
+  function InputGroup2(props, ref) {
+    const {
+      startElement,
+      startElementProps,
+      endElement,
+      endElementProps,
+      children,
+      startOffset,
+      endOffset,
+      className,
+      ...rest
+    } = props;
+    const startElementRef = React__namespace.useRef(null);
+    const endElementRef = React__namespace.useRef(null);
+    const groupRef = React__namespace.useRef(null);
+    const [inlinePaddings, setInlinePaddings] = React__namespace.useState();
+    const calculateInlinePaddings = React__namespace.useCallback(() => {
+      const startWidth = startElementRef.current?.getBoundingClientRect().width ?? 0;
+      const endWidth = endElementRef.current?.getBoundingClientRect().width ?? 0;
+      setInlinePaddings({
+        start: startWidth,
+        end: endWidth
+      });
+    }, []);
+    React__namespace.useEffect(() => {
+      if (!groupRef.current) return;
+      let timeoutId;
+      const intersectionObserver = new IntersectionObserver(
+        (entries) => {
+          const entry = entries[0];
+          if (entry && entry.isIntersecting) {
+            timeoutId = setTimeout(calculateInlinePaddings, 50);
+          }
+        },
+        { threshold: 0.01 }
+      );
+      intersectionObserver.observe(groupRef.current);
+      return () => {
+        intersectionObserver.disconnect();
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+      };
+    }, [calculateInlinePaddings]);
+    React__namespace.useEffect(() => {
+      calculateInlinePaddings();
+      const resizeHandler = esToolkit.debounce(calculateInlinePaddings, 300);
+      const resizeObserver = new ResizeObserver(resizeHandler);
+      if (groupRef.current) {
+        resizeObserver.observe(groupRef.current);
+      }
+      return function cleanup() {
+        resizeObserver.disconnect();
+      };
+    }, [calculateInlinePaddings]);
+    const combinedRef = React__namespace.useCallback((node) => {
+      groupRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    }, [ref]);
+    const { className: startClassName, ...startRest } = startElementProps ?? {};
+    const { className: endClassName, ...endRest } = endElementProps ?? {};
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: combinedRef,
+        className: cn("relative flex w-full items-center", className),
+        ...rest,
+        children: [
+          startElement && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: startElementRef,
+              className: cn(
+                "pointer-events-none absolute inset-y-0 left-0 z-[1] flex items-center text-[var(--chakra-colors-input-element)]",
+                startClassName
+              ),
+              ...startRest,
+              children: startElement
+            }
+          ),
+          React__namespace.Children.map(children, (child) => {
+            if (getComponentDisplayName(child.type) !== "FieldInput") {
+              return child;
+            }
+            return React__namespace.cloneElement(child, {
+              ...startElement && { ps: startOffset ?? (inlinePaddings?.start ? `${inlinePaddings.start}px` : void 0) },
+              ...endElement && { pe: endOffset ?? (inlinePaddings?.end ? `${inlinePaddings.end}px` : void 0) },
+              // hide input value and placeholder for the first render
+              value: inlinePaddings ? child.props.value : void 0,
+              placeholder: inlinePaddings ? child.props.placeholder : void 0
+            });
+          }),
+          endElement && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: endElementRef,
+              className: cn(
+                "pointer-events-none absolute inset-y-0 right-0 z-[1] flex items-center text-[var(--chakra-colors-input-element)]",
+                endClassName
+              ),
+              ...endRest,
+              children: endElement
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+InputGroup.displayName = "InputGroup";
+
+exports.InputGroup = InputGroup;

package/dist/input-group.js

@@ -0,0 +1,133 @@
+"use client";
+import { debounce } from 'es-toolkit';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/input-group.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function getComponentDisplayName(type) {
+  if (typeof type === "string") return void 0;
+  if ("displayName" in type) return type.displayName;
+  return void 0;
+}
+var InputGroup = React.forwardRef(
+  function InputGroup2(props, ref) {
+    const {
+      startElement,
+      startElementProps,
+      endElement,
+      endElementProps,
+      children,
+      startOffset,
+      endOffset,
+      className,
+      ...rest
+    } = props;
+    const startElementRef = React.useRef(null);
+    const endElementRef = React.useRef(null);
+    const groupRef = React.useRef(null);
+    const [inlinePaddings, setInlinePaddings] = React.useState();
+    const calculateInlinePaddings = React.useCallback(() => {
+      const startWidth = startElementRef.current?.getBoundingClientRect().width ?? 0;
+      const endWidth = endElementRef.current?.getBoundingClientRect().width ?? 0;
+      setInlinePaddings({
+        start: startWidth,
+        end: endWidth
+      });
+    }, []);
+    React.useEffect(() => {
+      if (!groupRef.current) return;
+      let timeoutId;
+      const intersectionObserver = new IntersectionObserver(
+        (entries) => {
+          const entry = entries[0];
+          if (entry && entry.isIntersecting) {
+            timeoutId = setTimeout(calculateInlinePaddings, 50);
+          }
+        },
+        { threshold: 0.01 }
+      );
+      intersectionObserver.observe(groupRef.current);
+      return () => {
+        intersectionObserver.disconnect();
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+      };
+    }, [calculateInlinePaddings]);
+    React.useEffect(() => {
+      calculateInlinePaddings();
+      const resizeHandler = debounce(calculateInlinePaddings, 300);
+      const resizeObserver = new ResizeObserver(resizeHandler);
+      if (groupRef.current) {
+        resizeObserver.observe(groupRef.current);
+      }
+      return function cleanup() {
+        resizeObserver.disconnect();
+      };
+    }, [calculateInlinePaddings]);
+    const combinedRef = React.useCallback((node) => {
+      groupRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    }, [ref]);
+    const { className: startClassName, ...startRest } = startElementProps ?? {};
+    const { className: endClassName, ...endRest } = endElementProps ?? {};
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: combinedRef,
+        className: cn("relative flex w-full items-center", className),
+        ...rest,
+        children: [
+          startElement && /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: startElementRef,
+              className: cn(
+                "pointer-events-none absolute inset-y-0 left-0 z-[1] flex items-center text-[var(--chakra-colors-input-element)]",
+                startClassName
+              ),
+              ...startRest,
+              children: startElement
+            }
+          ),
+          React.Children.map(children, (child) => {
+            if (getComponentDisplayName(child.type) !== "FieldInput") {
+              return child;
+            }
+            return React.cloneElement(child, {
+              ...startElement && { ps: startOffset ?? (inlinePaddings?.start ? `${inlinePaddings.start}px` : void 0) },
+              ...endElement && { pe: endOffset ?? (inlinePaddings?.end ? `${inlinePaddings.end}px` : void 0) },
+              // hide input value and placeholder for the first render
+              value: inlinePaddings ? child.props.value : void 0,
+              placeholder: inlinePaddings ? child.props.placeholder : void 0
+            });
+          }),
+          endElement && /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: endElementRef,
+              className: cn(
+                "pointer-events-none absolute inset-y-0 right-0 z-[1] flex items-center text-[var(--chakra-colors-input-element)]",
+                endClassName
+              ),
+              ...endRest,
+              children: endElement
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+InputGroup.displayName = "InputGroup";
+
+export { InputGroup };

package/dist/input.cjs

@@ -0,0 +1,65 @@
+"use client";
+'use strict';
+
+var classVarianceAuthority = require('class-variance-authority');
+var React = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/input.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var inputVariants = classVarianceAuthority.cva(
+  [
+    "w-full appearance-none outline-none transition-colors",
+    "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
+    "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
+    "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
+    "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
+    "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
+    "disabled:opacity-40 disabled:cursor-not-allowed",
+    "read-only:opacity-70",
+    "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        xs: "h-6 px-2 text-xs rounded",
+        sm: "h-8 px-3 text-sm rounded-md",
+        md: "h-10 px-4 text-base rounded-md",
+        lg: "h-12 px-4 text-lg rounded-lg",
+        "2xl": "h-14 px-4 text-xl rounded-lg"
+      },
+      variant: {
+        outline: "border border-solid",
+        filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
+        unstyled: "border-0 bg-transparent p-0 h-auto"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "outline"
+    }
+  }
+);
+var Input = React__default.default.forwardRef(
+  ({ size, variant, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref,
+        className: cn(inputVariants({ size, variant }), className),
+        ...rest
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+exports.Input = Input;

package/dist/input.js

@@ -0,0 +1,59 @@
+"use client";
+import { cva } from 'class-variance-authority';
+import React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/input.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var inputVariants = cva(
+  [
+    "w-full appearance-none outline-none transition-colors",
+    "bg-[var(--color-input-bg)] text-[var(--color-input-fg)] border-[var(--color-input-border)]",
+    "placeholder:text-[var(--color-input-placeholder,theme(colors.gray.400))]",
+    "hover:border-[var(--color-input-border-hover,theme(colors.gray.400))]",
+    "focus:border-[var(--color-input-border-focus,theme(colors.blue.500))]",
+    "focus:placeholder:text-[var(--color-input-placeholder-focus,theme(colors.gray.300))]",
+    "disabled:opacity-40 disabled:cursor-not-allowed",
+    "read-only:opacity-70",
+    "data-[invalid]:border-[var(--color-input-border-invalid,theme(colors.red.500))]"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        xs: "h-6 px-2 text-xs rounded",
+        sm: "h-8 px-3 text-sm rounded-md",
+        md: "h-10 px-4 text-base rounded-md",
+        lg: "h-12 px-4 text-lg rounded-lg",
+        "2xl": "h-14 px-4 text-xl rounded-lg"
+      },
+      variant: {
+        outline: "border border-solid",
+        filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
+        unstyled: "border-0 bg-transparent p-0 h-auto"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "outline"
+    }
+  }
+);
+var Input = React.forwardRef(
+  ({ size, variant, className, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        className: cn(inputVariants({ size, variant }), className),
+        ...rest
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };