@luxfi/ui 7.4.10 → 7.4.12

package/dist/input-group.cjs

@@ -31,11 +31,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 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 useIsomorphicLayoutEffect = typeof window !== "undefined" ? React__namespace.useLayoutEffect : React__namespace.useEffect;
 var InputGroup = React__namespace.forwardRef(
   function InputGroup2(props, ref) {
     const {
@@ -81,7 +77,7 @@ var InputGroup = React__namespace.forwardRef(
         }
       };
     }, [calculateInlinePaddings]);
-    React__namespace.useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       calculateInlinePaddings();
       const resizeHandler = esToolkit.debounce(calculateInlinePaddings, 300);
       const resizeObserver = new ResizeObserver(resizeHandler);
@@ -122,15 +118,18 @@ var InputGroup = React__namespace.forwardRef(
             }
           ),
           React__namespace.Children.map(children, (child) => {
-            if (getComponentDisplayName(child.type) !== "FieldInput") {
+            if (!React__namespace.isValidElement(child)) {
               return child;
             }
+            const start = startElement ? startOffset ?? inlinePaddings?.start : void 0;
+            const end = endElement ? endOffset ?? inlinePaddings?.end : void 0;
+            const px = (v) => typeof v === "number" ? `${v}px` : v;
             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
+              style: {
+                ...child.props.style,
+                ...start !== void 0 && { paddingInlineStart: px(start) },
+                ...end !== void 0 && { paddingInlineEnd: px(end) }
+              }
             });
           }),
           endElement && /* @__PURE__ */ jsxRuntime.jsx(

package/dist/input-group.js

@@ -9,11 +9,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 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 useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
 var InputGroup = React.forwardRef(
   function InputGroup2(props, ref) {
     const {
@@ -59,7 +55,7 @@ var InputGroup = React.forwardRef(
         }
       };
     }, [calculateInlinePaddings]);
-    React.useEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       calculateInlinePaddings();
       const resizeHandler = debounce(calculateInlinePaddings, 300);
       const resizeObserver = new ResizeObserver(resizeHandler);
@@ -100,15 +96,18 @@ var InputGroup = React.forwardRef(
             }
           ),
           React.Children.map(children, (child) => {
-            if (getComponentDisplayName(child.type) !== "FieldInput") {
+            if (!React.isValidElement(child)) {
               return child;
             }
+            const start = startElement ? startOffset ?? inlinePaddings?.start : void 0;
+            const end = endElement ? endOffset ?? inlinePaddings?.end : void 0;
+            const px = (v) => typeof v === "number" ? `${v}px` : v;
             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
+              style: {
+                ...child.props.style,
+                ...start !== void 0 && { paddingInlineStart: px(start) },
+                ...end !== void 0 && { paddingInlineEnd: px(end) }
+              }
             });
           }),
           endElement && /* @__PURE__ */ jsx(

package/dist/input.cjs

@@ -3,8 +3,6 @@
 
 var gui = require('@hanzo/gui');
 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 }; }
@@ -12,31 +10,27 @@ 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 INPUT_BASE = [
-  "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(" ");
-var INPUT_SIZE_CLASSES = {
-  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"
+var SIZE = {
+  xs: { height: 24, paddingHorizontal: 8, fontSize: 12, borderRadius: 4 },
+  sm: { height: 32, paddingHorizontal: 12, fontSize: 14, borderRadius: 6 },
+  md: { height: 40, paddingHorizontal: 16, fontSize: 16, borderRadius: 6 },
+  lg: { height: 48, paddingHorizontal: 16, fontSize: 18, borderRadius: 8 },
+  "2xl": { height: 56, paddingHorizontal: 16, fontSize: 20, borderRadius: 8 }
 };
-var INPUT_VARIANT_CLASSES = {
-  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"
+var VARIANT = {
+  outline: { borderWidth: 1, borderStyle: "solid" },
+  filled: { borderWidth: 0, backgroundColor: "var(--color-input-filled-bg)" },
+  unstyled: { borderWidth: 0, backgroundColor: "transparent", padding: 0, height: "auto" }
+};
+var CONTROL = {
+  width: "100%",
+  outlineWidth: 0,
+  backgroundColor: "var(--color-input-bg)",
+  color: "var(--color-input-fg)",
+  borderColor: "var(--color-input-border)",
+  hoverStyle: { borderColor: "var(--color-input-border-hover)" },
+  focusStyle: { borderColor: "var(--color-input-border-focus)" },
+  disabledStyle: { opacity: 0.4, cursor: "not-allowed" }
 };
 var Input = React__default.default.forwardRef(
   ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
@@ -52,7 +46,10 @@ var Input = React__default.default.forwardRef(
       {
         ref,
         unstyled: true,
-        className: cn(INPUT_BASE, INPUT_SIZE_CLASSES[size], INPUT_VARIANT_CLASSES[variant], className),
+        className: className ? `lux-control ${className}` : "lux-control",
+        ...CONTROL,
+        ...SIZE[size],
+        ...VARIANT[variant],
         ...rest,
         onChange: handleChange
       }
@@ -61,4 +58,7 @@ var Input = React__default.default.forwardRef(
 );
 Input.displayName = "Input";
 
+exports.CONTROL = CONTROL;
 exports.Input = Input;
+exports.SIZE = SIZE;
+exports.VARIANT = VARIANT;

package/dist/input.d.cts

@@ -12,6 +12,26 @@ interface InputProps extends Omit<React__default.ComponentPropsWithRef<'input'>,
      */
     readonly onChangeText?: (text: string) => void;
 }
+declare const SIZE: Record<InputSize, Record<string, number>>;
+declare const VARIANT: Record<InputVariant, Record<string, unknown>>;
+/** The frame every text control shares. */
+declare const CONTROL: {
+    readonly width: "100%";
+    readonly outlineWidth: 0;
+    readonly backgroundColor: "var(--color-input-bg)";
+    readonly color: "var(--color-input-fg)";
+    readonly borderColor: "var(--color-input-border)";
+    readonly hoverStyle: {
+        readonly borderColor: "var(--color-input-border-hover)";
+    };
+    readonly focusStyle: {
+        readonly borderColor: "var(--color-input-border-focus)";
+    };
+    readonly disabledStyle: {
+        readonly opacity: 0.4;
+        readonly cursor: "not-allowed";
+    };
+};
 declare const Input: React__default.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 
-export { Input, type InputProps };
+export { CONTROL, Input, type InputProps, SIZE, VARIANT };

package/dist/input.d.ts

@@ -12,6 +12,26 @@ interface InputProps extends Omit<React__default.ComponentPropsWithRef<'input'>,
      */
     readonly onChangeText?: (text: string) => void;
 }
+declare const SIZE: Record<InputSize, Record<string, number>>;
+declare const VARIANT: Record<InputVariant, Record<string, unknown>>;
+/** The frame every text control shares. */
+declare const CONTROL: {
+    readonly width: "100%";
+    readonly outlineWidth: 0;
+    readonly backgroundColor: "var(--color-input-bg)";
+    readonly color: "var(--color-input-fg)";
+    readonly borderColor: "var(--color-input-border)";
+    readonly hoverStyle: {
+        readonly borderColor: "var(--color-input-border-hover)";
+    };
+    readonly focusStyle: {
+        readonly borderColor: "var(--color-input-border-focus)";
+    };
+    readonly disabledStyle: {
+        readonly opacity: 0.4;
+        readonly cursor: "not-allowed";
+    };
+};
 declare const Input: React__default.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React__default.RefAttributes<HTMLInputElement>>;
 
-export { Input, type InputProps };
+export { CONTROL, Input, type InputProps, SIZE, VARIANT };

package/dist/input.js

@@ -1,36 +1,30 @@
 "use client";
 import { Input as Input$1 } from '@hanzo/gui';
 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 INPUT_BASE = [
-  "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(" ");
-var INPUT_SIZE_CLASSES = {
-  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"
+var SIZE = {
+  xs: { height: 24, paddingHorizontal: 8, fontSize: 12, borderRadius: 4 },
+  sm: { height: 32, paddingHorizontal: 12, fontSize: 14, borderRadius: 6 },
+  md: { height: 40, paddingHorizontal: 16, fontSize: 16, borderRadius: 6 },
+  lg: { height: 48, paddingHorizontal: 16, fontSize: 18, borderRadius: 8 },
+  "2xl": { height: 56, paddingHorizontal: 16, fontSize: 20, borderRadius: 8 }
 };
-var INPUT_VARIANT_CLASSES = {
-  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"
+var VARIANT = {
+  outline: { borderWidth: 1, borderStyle: "solid" },
+  filled: { borderWidth: 0, backgroundColor: "var(--color-input-filled-bg)" },
+  unstyled: { borderWidth: 0, backgroundColor: "transparent", padding: 0, height: "auto" }
+};
+var CONTROL = {
+  width: "100%",
+  outlineWidth: 0,
+  backgroundColor: "var(--color-input-bg)",
+  color: "var(--color-input-fg)",
+  borderColor: "var(--color-input-border)",
+  hoverStyle: { borderColor: "var(--color-input-border-hover)" },
+  focusStyle: { borderColor: "var(--color-input-border-focus)" },
+  disabledStyle: { opacity: 0.4, cursor: "not-allowed" }
 };
 var Input = React.forwardRef(
   ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
@@ -46,7 +40,10 @@ var Input = React.forwardRef(
       {
         ref,
         unstyled: true,
-        className: cn(INPUT_BASE, INPUT_SIZE_CLASSES[size], INPUT_VARIANT_CLASSES[variant], className),
+        className: className ? `lux-control ${className}` : "lux-control",
+        ...CONTROL,
+        ...SIZE[size],
+        ...VARIANT[variant],
         ...rest,
         onChange: handleChange
       }
@@ -55,4 +52,4 @@ var Input = React.forwardRef(
 );
 Input.displayName = "Input";
 
-export { Input };
+export { CONTROL, Input, SIZE, VARIANT };