@luxfi/ui 7.3.2 → 7.4.2

package/dist/switch.cjs

@@ -1,7 +1,7 @@
 "use client";
 'use strict';
 
-var RadixSwitch = require('@radix-ui/react-switch');
+var gui = require('@hanzo/gui');
 var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -25,7 +25,6 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var RadixSwitch__namespace = /*#__PURE__*/_interopNamespace(RadixSwitch);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/switch.tsx
@@ -37,17 +36,17 @@ var NOOP = () => {
 var SIZE_CLASSES = {
   sm: {
     root: "h-4 w-7",
-    thumb: "h-3 w-3 data-[state=checked]:translate-x-3",
+    thumb: "h-3 w-3",
     label: "text-xs"
   },
   md: {
     root: "h-5 w-9",
-    thumb: "h-4 w-4 data-[state=checked]:translate-x-4",
+    thumb: "h-4 w-4",
     label: "text-sm"
   },
   lg: {
     root: "h-6 w-11",
-    thumb: "h-5 w-5 data-[state=checked]:translate-x-5",
+    thumb: "h-5 w-5",
     label: "text-base"
   }
 };
@@ -78,9 +77,7 @@ var SwitchBase = React__namespace.forwardRef(
         if (!isControlled) {
           setInternalChecked(nextChecked);
         }
-        if (onCheckedChange) {
-          onCheckedChange({ checked: nextChecked });
-        }
+        onCheckedChange?.({ checked: nextChecked });
       },
       [isControlled, onCheckedChange]
     );
@@ -101,8 +98,9 @@ var SwitchBase = React__namespace.forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs(
-            RadixSwitch__namespace.Root,
+            gui.Switch,
             {
+              unstyled: true,
               checked: checkedState,
               onCheckedChange: handleCheckedChange,
               disabled,
@@ -117,12 +115,13 @@ var SwitchBase = React__namespace.forwardRef(
               children: [
                 trackLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center text-[8px] font-bold text-white pointer-events-none", children: checkedState ? trackLabel.on : trackLabel.off }),
                 /* @__PURE__ */ jsxRuntime.jsx(
-                  RadixSwitch__namespace.Thumb,
+                  gui.Switch.Thumb,
                   {
+                    unstyled: true,
+                    "data-thumb": true,
+                    transition: "quicker",
                     className: cn(
                       "block rounded-full bg-white shadow-sm",
-                      "transition-transform duration-200",
-                      "translate-x-0.5",
                       sizeClasses.thumb
                     ),
                     children: thumbLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center h-full w-full text-[8px]", children: checkedState ? thumbLabel.on : thumbLabel.off })

package/dist/switch.js

@@ -1,5 +1,5 @@
 "use client";
-import * as RadixSwitch from '@radix-ui/react-switch';
+import { Switch } from '@hanzo/gui';
 import * as React from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -14,22 +14,22 @@ var NOOP = () => {
 var SIZE_CLASSES = {
   sm: {
     root: "h-4 w-7",
-    thumb: "h-3 w-3 data-[state=checked]:translate-x-3",
+    thumb: "h-3 w-3",
     label: "text-xs"
   },
   md: {
     root: "h-5 w-9",
-    thumb: "h-4 w-4 data-[state=checked]:translate-x-4",
+    thumb: "h-4 w-4",
     label: "text-sm"
   },
   lg: {
     root: "h-6 w-11",
-    thumb: "h-5 w-5 data-[state=checked]:translate-x-5",
+    thumb: "h-5 w-5",
     label: "text-base"
   }
 };
 var SwitchBase = React.forwardRef(
-  function Switch(props, ref) {
+  function Switch$1(props, ref) {
     const {
       inputProps,
       children,
@@ -55,9 +55,7 @@ var SwitchBase = React.forwardRef(
         if (!isControlled) {
           setInternalChecked(nextChecked);
         }
-        if (onCheckedChange) {
-          onCheckedChange({ checked: nextChecked });
-        }
+        onCheckedChange?.({ checked: nextChecked });
       },
       [isControlled, onCheckedChange]
     );
@@ -78,8 +76,9 @@ var SwitchBase = React.forwardRef(
         ...rest,
         children: [
           /* @__PURE__ */ jsxs(
-            RadixSwitch.Root,
+            Switch,
             {
+              unstyled: true,
               checked: checkedState,
               onCheckedChange: handleCheckedChange,
               disabled,
@@ -94,12 +93,13 @@ var SwitchBase = React.forwardRef(
               children: [
                 trackLabel && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center text-[8px] font-bold text-white pointer-events-none", children: checkedState ? trackLabel.on : trackLabel.off }),
                 /* @__PURE__ */ jsx(
-                  RadixSwitch.Thumb,
+                  Switch.Thumb,
                   {
+                    unstyled: true,
+                    "data-thumb": true,
+                    transition: "quicker",
                     className: cn(
                       "block rounded-full bg-white shadow-sm",
-                      "transition-transform duration-200",
-                      "translate-x-0.5",
                       sizeClasses.thumb
                     ),
                     children: thumbLabel && /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center h-full w-full text-[8px]", children: checkedState ? thumbLabel.on : thumbLabel.off })

package/dist/tag.cjs

@@ -1,12 +1,11 @@
 "use client";
 'use strict';
 
-var React3 = require('react');
+var React4 = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
-var core = require('@hanzogui/core');
+var gui = require('@hanzo/gui');
 var jsxRuntime = require('react/jsx-runtime');
-var tooltip = require('@hanzogui/tooltip');
 var usehooks = require('@uidotdev/usehooks');
 
 function _interopNamespace(e) {
@@ -27,14 +26,14 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 
 // src/tag.tsx
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
 var CLOSE_ICON_PATH = "M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z";
-var CloseButtonFrame = core.styled(core.View, {
+var CloseButtonFrame = gui.styled(gui.View, {
   name: "LuxCloseButton",
   render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Close" }),
   role: "button",
@@ -68,7 +67,7 @@ var CLOSE_BUTTON_CLASSES = [
   "hover:text-[var(--hover-color,currentColor)]",
   "disabled:opacity-40"
 ].join(" ");
-var CloseButton = React3__namespace.forwardRef(function CloseButton2(props, ref) {
+var CloseButton = React4__namespace.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
     CloseButtonFrame,
@@ -215,7 +214,7 @@ var SKELETON_CLASSES = [
   "bg-[length:200%_100%]"
 ].join(" ");
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
-var Skeleton = React3__namespace.forwardRef(
+var Skeleton = React4__namespace.forwardRef(
   function Skeleton2(props, ref) {
     const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
     const shimStyle = shimToStyle(props);
@@ -224,10 +223,10 @@ var Skeleton = React3__namespace.forwardRef(
     const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
     const htmlRest = stripShims(allRest);
     if (!loading) {
-      if (asChild && React3__namespace.isValidElement(children)) return children;
+      if (asChild && React4__namespace.isValidElement(children)) return children;
       return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
     }
-    if (asChild && React3__namespace.isValidElement(children)) {
+    if (asChild && React4__namespace.isValidElement(children)) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         Component,
         {
@@ -253,7 +252,7 @@ var Skeleton = React3__namespace.forwardRef(
     );
   }
 );
-React3__namespace.forwardRef(
+React4__namespace.forwardRef(
   function SkeletonCircle2(props, ref) {
     const { size = 40, loading = true, className, ...rest } = props;
     const dimension = typeof size === "number" ? `${size}px` : size;
@@ -269,7 +268,7 @@ React3__namespace.forwardRef(
     );
   }
 );
-React3__namespace.forwardRef(
+React4__namespace.forwardRef(
   function SkeletonText2(props, ref) {
     const { noOfLines = 3, loading = true, className, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -282,26 +281,24 @@ React3__namespace.forwardRef(
     )) });
   }
 );
-var LG_BREAKPOINT = 1024;
-function useIsMobile() {
-  const [isMobile, setIsMobile] = React3__namespace.useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.innerWidth < LG_BREAKPOINT;
-  });
-  React3__namespace.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${LG_BREAKPOINT - 1}px)`);
-    const handler = (e) => setIsMobile(e.matches);
-    setIsMobile(mql.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, []);
-  return isMobile;
+var TOUCH_PX = 1024;
+function useBelow(px) {
+  const [below, setBelow] = React4__namespace.useState(false);
+  React4__namespace.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${px - 1}px)`);
+    const apply = () => setBelow(mql.matches);
+    apply();
+    mql.addEventListener("change", apply);
+    return () => mql.removeEventListener("change", apply);
+  }, [px]);
+  return below;
 }
+var useIsTouch = () => useBelow(TOUCH_PX);
 function mapPlacement(p) {
   if (!p) return void 0;
   return p;
 }
-var Tooltip = React3__namespace.forwardRef(
+var Tooltip = React4__namespace.forwardRef(
   function Tooltip2(props, ref) {
     const {
       showArrow: showArrowProp,
@@ -320,28 +317,28 @@ var Tooltip = React3__namespace.forwardRef(
       interactive,
       positioning
     } = props;
-    const [open, setOpen] = React3__namespace.useState(defaultOpen);
-    const timeoutRef = React3__namespace.useRef(null);
-    const isMobile = useIsMobile();
-    const handleOpenChange = React3__namespace.useCallback((nextOpen) => {
+    const [open, setOpen] = React4__namespace.useState(defaultOpen);
+    const timeoutRef = React4__namespace.useRef(null);
+    const isMobile = useIsTouch();
+    const handleOpenChange = React4__namespace.useCallback((nextOpen) => {
       setOpen(nextOpen);
       onOpenChange?.({ open: nextOpen });
     }, [onOpenChange]);
-    const handleOpenChangeManual = React3__namespace.useCallback((nextOpen) => {
+    const handleOpenChangeManual = React4__namespace.useCallback((nextOpen) => {
       timeoutRef.current && window.clearTimeout(timeoutRef.current);
       timeoutRef.current = window.setTimeout(() => {
         setOpen(nextOpen);
         onOpenChange?.({ open: nextOpen });
       }, nextOpen ? openDelay : closeDelay);
     }, [closeDelay, openDelay, onOpenChange]);
-    const handleClickAway = React3__namespace.useCallback(() => {
+    const handleClickAway = React4__namespace.useCallback(() => {
       handleOpenChangeManual(false);
     }, [handleOpenChangeManual]);
     const triggerRef = usehooks.useClickAway(handleClickAway);
-    const handleTriggerClick = React3__namespace.useCallback(() => {
+    const handleTriggerClick = React4__namespace.useCallback(() => {
       handleOpenChangeManual(!open);
     }, [handleOpenChangeManual, open]);
-    const handleContentClick = React3__namespace.useCallback((event) => {
+    const handleContentClick = React4__namespace.useCallback((event) => {
       event.stopPropagation();
       if (interactive) {
         const closestLink = event.target?.closest("a");
@@ -350,7 +347,7 @@ var Tooltip = React3__namespace.forwardRef(
         }
       }
     }, [interactive, handleOpenChangeManual]);
-    React3__namespace.useEffect(() => {
+    React4__namespace.useEffect(() => {
       return () => {
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
@@ -363,8 +360,8 @@ var Tooltip = React3__namespace.forwardRef(
     const isPopover = variant === "popover";
     const placement = mapPlacement(positioning?.placement) ?? "top";
     const offset = positioning?.offset?.mainAxis ?? 4;
-    return /* @__PURE__ */ jsxRuntime.jsx(tooltip.TooltipGroup, { delay: openDelay, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      tooltip.Tooltip,
+    return /* @__PURE__ */ jsxRuntime.jsx(gui.TooltipGroup, { delay: openDelay, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      gui.Tooltip,
       {
         open,
         onOpenChange: handleOpenChange,
@@ -374,7 +371,7 @@ var Tooltip = React3__namespace.forwardRef(
         unstyled: true,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
-            tooltip.Tooltip.Trigger,
+            gui.Tooltip.Trigger,
             {
               ref: open ? triggerRef : void 0,
               asChild: true,
@@ -384,7 +381,7 @@ var Tooltip = React3__namespace.forwardRef(
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsxs(
-            tooltip.Tooltip.Content,
+            gui.Tooltip.Content,
             {
               ref,
               unstyled: true,
@@ -401,7 +398,7 @@ var Tooltip = React3__namespace.forwardRef(
               ...contentProps,
               children: [
                 showArrow && /* @__PURE__ */ jsxRuntime.jsx(
-                  tooltip.Tooltip.Arrow,
+                  gui.Tooltip.Arrow,
                   {
                     unstyled: true,
                     className: cn(
@@ -441,7 +438,7 @@ var TAG_SELECTED_CLASSES = [
   "hover:opacity-76"
 ].join(" ");
 var TAG_DISABLED_CLASSES = "opacity-40 pointer-events-none cursor-not-allowed";
-var Tag = React3__namespace.forwardRef(
+var Tag = React4__namespace.forwardRef(
   function Tag2(props, ref) {
     const {
       variant,

package/dist/tag.js

@@ -1,10 +1,9 @@
 "use client";
-import * as React3 from 'react';
+import * as React4 from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { styled, View } from '@hanzogui/core';
+import { styled, View, TooltipGroup, Tooltip as Tooltip$1 } from '@hanzo/gui';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { TooltipGroup, Tooltip as Tooltip$1 } from '@hanzogui/tooltip';
 import { useClickAway } from '@uidotdev/usehooks';
 
 // src/tag.tsx
@@ -46,7 +45,7 @@ var CLOSE_BUTTON_CLASSES = [
   "hover:text-[var(--hover-color,currentColor)]",
   "disabled:opacity-40"
 ].join(" ");
-var CloseButton = React3.forwardRef(function CloseButton2(props, ref) {
+var CloseButton = React4.forwardRef(function CloseButton2(props, ref) {
   const { variant: _variant, size: _size, className, children, ...rest } = props;
   return /* @__PURE__ */ jsx(
     CloseButtonFrame,
@@ -193,7 +192,7 @@ var SKELETON_CLASSES = [
   "bg-[length:200%_100%]"
 ].join(" ");
 var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
-var Skeleton = React3.forwardRef(
+var Skeleton = React4.forwardRef(
   function Skeleton2(props, ref) {
     const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
     const shimStyle = shimToStyle(props);
@@ -202,10 +201,10 @@ var Skeleton = React3.forwardRef(
     const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
     const htmlRest = stripShims(allRest);
     if (!loading) {
-      if (asChild && React3.isValidElement(children)) return children;
+      if (asChild && React4.isValidElement(children)) return children;
       return /* @__PURE__ */ jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
     }
-    if (asChild && React3.isValidElement(children)) {
+    if (asChild && React4.isValidElement(children)) {
       return /* @__PURE__ */ jsx(
         Component,
         {
@@ -231,7 +230,7 @@ var Skeleton = React3.forwardRef(
     );
   }
 );
-React3.forwardRef(
+React4.forwardRef(
   function SkeletonCircle2(props, ref) {
     const { size = 40, loading = true, className, ...rest } = props;
     const dimension = typeof size === "number" ? `${size}px` : size;
@@ -247,7 +246,7 @@ React3.forwardRef(
     );
   }
 );
-React3.forwardRef(
+React4.forwardRef(
   function SkeletonText2(props, ref) {
     const { noOfLines = 3, loading = true, className, ...rest } = props;
     return /* @__PURE__ */ jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
@@ -260,26 +259,24 @@ React3.forwardRef(
     )) });
   }
 );
-var LG_BREAKPOINT = 1024;
-function useIsMobile() {
-  const [isMobile, setIsMobile] = React3.useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.innerWidth < LG_BREAKPOINT;
-  });
-  React3.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${LG_BREAKPOINT - 1}px)`);
-    const handler = (e) => setIsMobile(e.matches);
-    setIsMobile(mql.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, []);
-  return isMobile;
+var TOUCH_PX = 1024;
+function useBelow(px) {
+  const [below, setBelow] = React4.useState(false);
+  React4.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${px - 1}px)`);
+    const apply = () => setBelow(mql.matches);
+    apply();
+    mql.addEventListener("change", apply);
+    return () => mql.removeEventListener("change", apply);
+  }, [px]);
+  return below;
 }
+var useIsTouch = () => useBelow(TOUCH_PX);
 function mapPlacement(p) {
   if (!p) return void 0;
   return p;
 }
-var Tooltip = React3.forwardRef(
+var Tooltip = React4.forwardRef(
   function Tooltip2(props, ref) {
     const {
       showArrow: showArrowProp,
@@ -298,28 +295,28 @@ var Tooltip = React3.forwardRef(
       interactive,
       positioning
     } = props;
-    const [open, setOpen] = React3.useState(defaultOpen);
-    const timeoutRef = React3.useRef(null);
-    const isMobile = useIsMobile();
-    const handleOpenChange = React3.useCallback((nextOpen) => {
+    const [open, setOpen] = React4.useState(defaultOpen);
+    const timeoutRef = React4.useRef(null);
+    const isMobile = useIsTouch();
+    const handleOpenChange = React4.useCallback((nextOpen) => {
       setOpen(nextOpen);
       onOpenChange?.({ open: nextOpen });
     }, [onOpenChange]);
-    const handleOpenChangeManual = React3.useCallback((nextOpen) => {
+    const handleOpenChangeManual = React4.useCallback((nextOpen) => {
       timeoutRef.current && window.clearTimeout(timeoutRef.current);
       timeoutRef.current = window.setTimeout(() => {
         setOpen(nextOpen);
         onOpenChange?.({ open: nextOpen });
       }, nextOpen ? openDelay : closeDelay);
     }, [closeDelay, openDelay, onOpenChange]);
-    const handleClickAway = React3.useCallback(() => {
+    const handleClickAway = React4.useCallback(() => {
       handleOpenChangeManual(false);
     }, [handleOpenChangeManual]);
     const triggerRef = useClickAway(handleClickAway);
-    const handleTriggerClick = React3.useCallback(() => {
+    const handleTriggerClick = React4.useCallback(() => {
       handleOpenChangeManual(!open);
     }, [handleOpenChangeManual, open]);
-    const handleContentClick = React3.useCallback((event) => {
+    const handleContentClick = React4.useCallback((event) => {
       event.stopPropagation();
       if (interactive) {
         const closestLink = event.target?.closest("a");
@@ -328,7 +325,7 @@ var Tooltip = React3.forwardRef(
         }
       }
     }, [interactive, handleOpenChangeManual]);
-    React3.useEffect(() => {
+    React4.useEffect(() => {
       return () => {
         if (timeoutRef.current) {
           clearTimeout(timeoutRef.current);
@@ -419,7 +416,7 @@ var TAG_SELECTED_CLASSES = [
   "hover:opacity-76"
 ].join(" ");
 var TAG_DISABLED_CLASSES = "opacity-40 pointer-events-none cursor-not-allowed";
-var Tag = React3.forwardRef(
+var Tag = React4.forwardRef(
   function Tag2(props, ref) {
     const {
       variant,

package/dist/textarea.cjs

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var gui = require('@hanzo/gui');
 var React = require('react');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -38,13 +39,22 @@ var TEXTAREA_VARIANT_CLASSES = {
   unstyled: "border-0 bg-transparent p-0"
 };
 var Textarea = React__default.default.forwardRef(
-  ({ size = "md", variant = "outline", className, ...rest }, ref) => {
+  ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
+    const handleChange = React__default.default.useCallback(
+      (event) => {
+        onChange?.(event);
+        onChangeText?.(event.target.value);
+      },
+      [onChange, onChangeText]
+    );
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "textarea",
+      gui.TextArea,
       {
         ref,
+        unstyled: true,
         className: cn(TEXTAREA_BASE, TEXTAREA_SIZE_CLASSES[size], TEXTAREA_VARIANT_CLASSES[variant], className),
-        ...rest
+        ...rest,
+        onChange: handleChange
       }
     );
   }

package/dist/textarea.d.cts

@@ -5,6 +5,8 @@ type TextareaVariant = 'outline' | 'filled' | 'unstyled';
 interface TextareaProps extends Omit<React__default.ComponentPropsWithRef<'textarea'>, 'size'> {
     readonly size?: TextareaSize;
     readonly variant?: TextareaVariant;
+    /** Tamagui / React-Native convention — bridged to native `onChange` (see Input). */
+    readonly onChangeText?: (text: string) => void;
 }
 declare const Textarea: React__default.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React__default.RefAttributes<HTMLTextAreaElement>>;
 

package/dist/textarea.d.ts

@@ -5,6 +5,8 @@ type TextareaVariant = 'outline' | 'filled' | 'unstyled';
 interface TextareaProps extends Omit<React__default.ComponentPropsWithRef<'textarea'>, 'size'> {
     readonly size?: TextareaSize;
     readonly variant?: TextareaVariant;
+    /** Tamagui / React-Native convention — bridged to native `onChange` (see Input). */
+    readonly onChangeText?: (text: string) => void;
 }
 declare const Textarea: React__default.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React__default.RefAttributes<HTMLTextAreaElement>>;
 

package/dist/textarea.js

@@ -1,4 +1,5 @@
 "use client";
+import { TextArea } from '@hanzo/gui';
 import React from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -32,13 +33,22 @@ var TEXTAREA_VARIANT_CLASSES = {
   unstyled: "border-0 bg-transparent p-0"
 };
 var Textarea = React.forwardRef(
-  ({ size = "md", variant = "outline", className, ...rest }, ref) => {
+  ({ size = "md", variant = "outline", className, onChange, onChangeText, ...rest }, ref) => {
+    const handleChange = React.useCallback(
+      (event) => {
+        onChange?.(event);
+        onChangeText?.(event.target.value);
+      },
+      [onChange, onChangeText]
+    );
     return /* @__PURE__ */ jsx(
-      "textarea",
+      TextArea,
       {
         ref,
+        unstyled: true,
         className: cn(TEXTAREA_BASE, TEXTAREA_SIZE_CLASSES[size], TEXTAREA_VARIANT_CLASSES[variant], className),
-        ...rest
+        ...rest,
+        onChange: handleChange
       }
     );
   }