@luxfi/ui 5.5.3 → 5.6.0

package/dist/field.cjs

@@ -0,0 +1,183 @@
+"use client";
+'use strict';
+
+var LabelPrimitive = require('@radix-ui/react-label');
+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 LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/field.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var space = String.fromCharCode(32);
+function getComponentDisplayName(type) {
+  if (typeof type === "string") return void 0;
+  if ("displayName" in type) return type.displayName;
+  return void 0;
+}
+var Field = React__namespace.forwardRef(
+  function Field2(props, ref) {
+    const {
+      label,
+      children,
+      helperText,
+      errorText,
+      optionalText,
+      size,
+      required,
+      disabled,
+      readOnly,
+      invalid,
+      floating,
+      id,
+      className,
+      style
+    } = props;
+    if (floating && label) {
+      const injectedProps2 = {
+        className: "peer",
+        placeholder: " ",
+        size,
+        floating,
+        disabled,
+        readOnly
+      };
+      const labelElement = /* @__PURE__ */ jsxRuntime.jsxs(
+        LabelPrimitive__namespace.Root,
+        {
+          className: cn(
+            "absolute left-3 top-1/2 -translate-y-1/2",
+            "text-[var(--color-input-placeholder,theme(colors.gray.400))]",
+            "pointer-events-none select-none",
+            "origin-top-left transition-all duration-150",
+            "peer-focus:top-1 peer-focus:translate-y-0 peer-focus:scale-75",
+            "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:scale-75"
+          ),
+          htmlFor: id,
+          children: [
+            label,
+            required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]", "aria-hidden": "true", children: "*" }),
+            !required && optionalText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm", children: optionalText }),
+            errorText && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))] text-sm", children: [
+              "-",
+              space,
+              errorText
+            ] })
+          ]
+        }
+      );
+      const helperTextElement = helperText ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]", children: helperText }) : null;
+      const child2 = React__namespace.Children.only(children);
+      const isInputGroup = getComponentDisplayName(child2.type) === "InputGroup";
+      if (isInputGroup) {
+        const inputElement2 = React__namespace.cloneElement(
+          React__namespace.Children.only(child2.props.children),
+          injectedProps2
+        );
+        const groupInputElement = React__namespace.cloneElement(
+          child2,
+          {},
+          inputElement2,
+          labelElement
+        );
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref,
+            id,
+            className: cn("relative w-full", className),
+            style,
+            "data-disabled": disabled || void 0,
+            "data-readonly": readOnly || void 0,
+            "data-invalid": invalid || void 0,
+            children: [
+              groupInputElement,
+              helperTextElement
+            ]
+          }
+        );
+      }
+      const inputElement = React__namespace.cloneElement(child2, injectedProps2);
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          id,
+          className: cn("relative w-full", className),
+          style,
+          "data-disabled": disabled || void 0,
+          "data-readonly": readOnly || void 0,
+          "data-invalid": invalid || void 0,
+          children: [
+            inputElement,
+            labelElement,
+            helperTextElement
+          ]
+        }
+      );
+    }
+    const injectedProps = {
+      size
+    };
+    const child = React__namespace.Children.only(children);
+    const clonedChild = React__namespace.cloneElement(child, injectedProps);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        id,
+        className: cn("flex flex-col gap-1", className),
+        style,
+        "data-disabled": disabled || void 0,
+        "data-readonly": readOnly || void 0,
+        "data-invalid": invalid || void 0,
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsxs(
+            LabelPrimitive__namespace.Root,
+            {
+              className: cn(
+                "text-sm font-medium text-[var(--color-field-label,theme(colors.gray.700))]",
+                "dark:text-[var(--color-field-label,theme(colors.gray.300))]",
+                disabled && "opacity-40"
+              ),
+              htmlFor: id,
+              children: [
+                label,
+                required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]", "aria-hidden": "true", children: "*" }),
+                !required && optionalText && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm font-normal", children: optionalText })
+              ]
+            }
+          ),
+          clonedChild,
+          helperText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]", children: helperText }),
+          errorText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--color-fg-error,theme(colors.red.500))]", children: errorText })
+        ]
+      }
+    );
+  }
+);
+
+exports.Field = Field;

package/dist/field.js

@@ -0,0 +1,160 @@
+"use client";
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/field.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var space = String.fromCharCode(32);
+function getComponentDisplayName(type) {
+  if (typeof type === "string") return void 0;
+  if ("displayName" in type) return type.displayName;
+  return void 0;
+}
+var Field = React.forwardRef(
+  function Field2(props, ref) {
+    const {
+      label,
+      children,
+      helperText,
+      errorText,
+      optionalText,
+      size,
+      required,
+      disabled,
+      readOnly,
+      invalid,
+      floating,
+      id,
+      className,
+      style
+    } = props;
+    if (floating && label) {
+      const injectedProps2 = {
+        className: "peer",
+        placeholder: " ",
+        size,
+        floating,
+        disabled,
+        readOnly
+      };
+      const labelElement = /* @__PURE__ */ jsxs(
+        LabelPrimitive.Root,
+        {
+          className: cn(
+            "absolute left-3 top-1/2 -translate-y-1/2",
+            "text-[var(--color-input-placeholder,theme(colors.gray.400))]",
+            "pointer-events-none select-none",
+            "origin-top-left transition-all duration-150",
+            "peer-focus:top-1 peer-focus:translate-y-0 peer-focus:scale-75",
+            "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:scale-75"
+          ),
+          htmlFor: id,
+          children: [
+            label,
+            required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]", "aria-hidden": "true", children: "*" }),
+            !required && optionalText && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm", children: optionalText }),
+            errorText && /* @__PURE__ */ jsxs("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))] text-sm", children: [
+              "-",
+              space,
+              errorText
+            ] })
+          ]
+        }
+      );
+      const helperTextElement = helperText ? /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]", children: helperText }) : null;
+      const child2 = React.Children.only(children);
+      const isInputGroup = getComponentDisplayName(child2.type) === "InputGroup";
+      if (isInputGroup) {
+        const inputElement2 = React.cloneElement(
+          React.Children.only(child2.props.children),
+          injectedProps2
+        );
+        const groupInputElement = React.cloneElement(
+          child2,
+          {},
+          inputElement2,
+          labelElement
+        );
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref,
+            id,
+            className: cn("relative w-full", className),
+            style,
+            "data-disabled": disabled || void 0,
+            "data-readonly": readOnly || void 0,
+            "data-invalid": invalid || void 0,
+            children: [
+              groupInputElement,
+              helperTextElement
+            ]
+          }
+        );
+      }
+      const inputElement = React.cloneElement(child2, injectedProps2);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          id,
+          className: cn("relative w-full", className),
+          style,
+          "data-disabled": disabled || void 0,
+          "data-readonly": readOnly || void 0,
+          "data-invalid": invalid || void 0,
+          children: [
+            inputElement,
+            labelElement,
+            helperTextElement
+          ]
+        }
+      );
+    }
+    const injectedProps = {
+      size
+    };
+    const child = React.Children.only(children);
+    const clonedChild = React.cloneElement(child, injectedProps);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        id,
+        className: cn("flex flex-col gap-1", className),
+        style,
+        "data-disabled": disabled || void 0,
+        "data-readonly": readOnly || void 0,
+        "data-invalid": invalid || void 0,
+        children: [
+          label && /* @__PURE__ */ jsxs(
+            LabelPrimitive.Root,
+            {
+              className: cn(
+                "text-sm font-medium text-[var(--color-field-label,theme(colors.gray.700))]",
+                "dark:text-[var(--color-field-label,theme(colors.gray.300))]",
+                disabled && "opacity-40"
+              ),
+              htmlFor: id,
+              children: [
+                label,
+                required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]", "aria-hidden": "true", children: "*" }),
+                !required && optionalText && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm font-normal", children: optionalText })
+              ]
+            }
+          ),
+          clonedChild,
+          helperText && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]", children: helperText }),
+          errorText && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--color-fg-error,theme(colors.red.500))]", children: errorText })
+        ]
+      }
+    );
+  }
+);
+
+export { Field };

package/dist/heading.cjs

@@ -0,0 +1,46 @@
+"use client";
+'use strict';
+
+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/heading.tsx
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var LEVEL_TAG = {
+  "1": "h1",
+  "2": "h2",
+  "3": "h3"
+};
+var LEVEL_CLASSES = {
+  "1": "text-[18px] leading-[24px] font-medium lg:text-[32px] lg:leading-[40px] lg:tracking-[-0.5px]",
+  "2": "text-[16px] leading-[24px] font-medium lg:text-[24px] lg:leading-[32px]",
+  "3": "text-[14px] leading-[20px] font-semibold lg:text-[18px] lg:leading-[24px] lg:font-medium"
+};
+var BASE_CLASSES = "font-heading text-heading";
+var Heading = React__default.default.forwardRef(
+  function Heading2({ level, className, mb, size: _size, style: styleProp, ...rest }, ref) {
+    const Tag = level ? LEVEL_TAG[level] : "h2";
+    const levelClasses = level ? LEVEL_CLASSES[level] : void 0;
+    const shimStyle = { ...styleProp };
+    if (mb !== void 0) shimStyle.marginBottom = typeof mb === "number" ? `${mb * 4}px` : mb;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Tag,
+      {
+        ref,
+        className: cn(BASE_CLASSES, levelClasses, className),
+        style: Object.keys(shimStyle).length > 0 ? shimStyle : void 0,
+        ...rest
+      }
+    );
+  }
+);
+
+exports.Heading = Heading;

package/dist/heading.js

@@ -0,0 +1,40 @@
+"use client";
+import React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/heading.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var LEVEL_TAG = {
+  "1": "h1",
+  "2": "h2",
+  "3": "h3"
+};
+var LEVEL_CLASSES = {
+  "1": "text-[18px] leading-[24px] font-medium lg:text-[32px] lg:leading-[40px] lg:tracking-[-0.5px]",
+  "2": "text-[16px] leading-[24px] font-medium lg:text-[24px] lg:leading-[32px]",
+  "3": "text-[14px] leading-[20px] font-semibold lg:text-[18px] lg:leading-[24px] lg:font-medium"
+};
+var BASE_CLASSES = "font-heading text-heading";
+var Heading = React.forwardRef(
+  function Heading2({ level, className, mb, size: _size, style: styleProp, ...rest }, ref) {
+    const Tag = level ? LEVEL_TAG[level] : "h2";
+    const levelClasses = level ? LEVEL_CLASSES[level] : void 0;
+    const shimStyle = { ...styleProp };
+    if (mb !== void 0) shimStyle.marginBottom = typeof mb === "number" ? `${mb * 4}px` : mb;
+    return /* @__PURE__ */ jsx(
+      Tag,
+      {
+        ref,
+        className: cn(BASE_CLASSES, levelClasses, className),
+        style: Object.keys(shimStyle).length > 0 ? shimStyle : void 0,
+        ...rest
+      }
+    );
+  }
+);
+
+export { Heading };