@almadar/ui 5.26.2 → 5.28.0

package/dist/components/marketing/atoms/AnimatedGraphic.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
+import type { AssetUrl } from '@almadar/core';
 export type GraphicAnimation = 'draw' | 'fill' | 'pulse' | 'morph';
 export interface AnimatedGraphicProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Additional CSS classes applied to the root element. */
     className?: string;
     /** URL to an SVG file. Fetched and inlined to enable stroke/fill animations. */
-    src?: string;
+    src?: AssetUrl;
     /** Inline SVG string. Takes precedence over src if both provided. */
     svgContent?: string;
     /** Animation type applied to SVG paths/shapes */

package/dist/components/marketing/molecules/FeatureCard.d.ts

@@ -5,9 +5,9 @@
  * Composes Card, VStack, Icon, Typography, and Button atoms.
  */
 import React from 'react';
+import { type IconInput } from '../../core/atoms/Icon';
 export interface FeatureCardProps {
-    /** Icon name (Lucide string) or ReactNode */
-    icon?: string | React.ReactNode;
+    icon?: IconInput;
     /** Feature title */
     title: string;
     /** Feature description */

package/dist/components/marketing/molecules/MarketingFooter.d.ts

@@ -6,6 +6,7 @@
  * Uses @almadar/ui theme CSS variables for consistent branding.
  */
 import React from 'react';
+import type { AssetUrl } from '@almadar/core';
 export interface FooterLinkItem {
     label: string;
     href: string;
@@ -15,7 +16,7 @@ export interface FooterLinkColumn {
     items: FooterLinkItem[];
 }
 export interface FooterLogo {
-    src: string;
+    src: AssetUrl;
     alt: string;
     href?: string;
 }

package/dist/components/marketing/molecules/StepFlow.d.ts

@@ -5,11 +5,12 @@
  * Composes Center, Typography, Icon, HStack, VStack, Box, and Divider atoms.
  */
 import React from 'react';
+import { type IconInput } from '../../core/atoms/Icon';
 export interface StepItemProps {
     number?: number;
     title: string;
     description: string;
-    icon?: string;
+    icon?: IconInput;
 }
 export interface StepFlowProps {
     steps: StepItemProps[];

package/dist/components/marketing/molecules/TeamCard.d.ts

@@ -5,12 +5,13 @@
  * Composes Card, VStack, Avatar, and Typography atoms.
  */
 import React from 'react';
+import type { AssetUrl } from '@almadar/core';
 export interface TeamCardProps {
     name: string;
     nameAr?: string;
     role: string;
     bio: string;
-    avatar?: string | {
+    avatar?: AssetUrl | {
         initials: string;
     };
     className?: string;

package/dist/components/marketing/organisms/book/BookCoverPage.d.ts

@@ -8,13 +8,14 @@
  * - Emits: UI:BOOK_START
  */
 import React from 'react';
+import type { AssetUrl } from '@almadar/core';
 export interface BookCoverPageProps {
     /** Additional CSS classes */
     className?: string;
     title: string;
     subtitle?: string;
     author?: string;
-    coverImageUrl?: string;
+    coverImageUrl?: AssetUrl;
     direction?: 'rtl' | 'ltr';
 }
 export declare const BookCoverPage: React.FC<BookCoverPageProps>;

package/dist/components/marketing/templates/AboutPageTemplate.d.ts

@@ -5,6 +5,7 @@
  * Pure function: no hooks, no callbacks, no local state.
  */
 import React from 'react';
+import type { AssetUrl } from '@almadar/core';
 import type { TemplateProps } from '../../core/templates/types';
 import type { LinkAction } from '../../core/atoms/types';
 interface AboutHero {
@@ -23,7 +24,7 @@ interface TeamMemberContent {
     nameAr?: string;
     role: string;
     bio: string;
-    avatar?: string;
+    avatar?: AssetUrl;
 }
 interface CaseStudyContent {
     id: string;

package/dist/components/marketing/templates/AuthLayout.d.ts

@@ -1,11 +1,12 @@
 import React from "react";
+import type { AssetUrl } from "@almadar/core";
 export interface AuthLayoutProps {
     /** App name */
     appName?: string;
     /** Logo component or URL */
     logo?: React.ReactNode;
     /** Background image URL */
-    backgroundImage?: string;
+    backgroundImage?: AssetUrl;
     /** Show branding panel on the side */
     showBranding?: boolean;
     /** Branding panel content */

package/dist/components/marketing/templates/LandingPageTemplate.d.ts

@@ -6,6 +6,7 @@
  * Pure function: no hooks, no callbacks, no local state.
  */
 import React from 'react';
+import type { IconInput } from '../../core/atoms/Icon';
 import type { TemplateProps } from '../../core/templates/types';
 import type { LinkAction, ImageSource } from '../../core/atoms/types';
 interface MarketingHero {
@@ -23,7 +24,7 @@ interface MarketingHero {
 }
 interface FeatureContent {
     id?: string;
-    icon?: string;
+    icon?: IconInput;
     title: string;
     description: string;
     href?: string;
@@ -37,7 +38,7 @@ interface StepContent {
     id?: string;
     title: string;
     description: string;
-    icon?: string;
+    icon?: IconInput;
 }
 interface ShowcaseContent {
     id: string;

package/dist/docs/index.cjs

@@ -4056,6 +4056,7 @@ var variantStyles3, paddingStyles2, shadowStyles2, lookStyles; exports.Card = vo
 var init_Card = __esm({
   "components/core/atoms/Card.tsx"() {
     init_cn();
+    init_useEventBus();
     variantStyles3 = {
       default: [
         "bg-card",
@@ -4119,8 +4120,15 @@ var init_Card = __esm({
         shadow,
         look = "elevated",
         children,
+        action,
+        onClick,
         ...props
       }, ref) => {
+        const eventBus = useEventBus();
+        const handleClick = action ? (e) => {
+          eventBus.emit(`UI:${action}`, {});
+          onClick?.(e);
+        } : onClick;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -4134,6 +4142,7 @@ var init_Card = __esm({
               shadow && shadowStyles2[shadow],
               className
             ),
+            onClick: handleClick,
             ...props,
             children: [
               (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
@@ -4764,6 +4773,7 @@ var init_Input = __esm({
     init_cn();
     init_Icon();
     init_useTranslate();
+    init_useEventBus();
     exports.Input = React7__default.default.forwardRef(
       ({
         className,
@@ -4782,9 +4792,17 @@ var init_Input = __esm({
         ...props
       }, ref) => {
         const { t } = useTranslate();
+        const eventBus = useEventBus();
         const type = inputType || htmlType || "text";
+        const resolveIconNode = (i, cls) => {
+          if (!i) return null;
+          if (typeof i === "string") return /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: i, className: cls });
+          const C = i;
+          return /* @__PURE__ */ jsxRuntime.jsx(C, { className: cls });
+        };
+        const iconCls = "h-icon-default w-icon-default";
         const IconComponent = typeof iconProp === "string" ? resolveIcon(iconProp) : iconProp;
-        const resolvedLeftIcon = leftIcon || IconComponent && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: "h-icon-default w-icon-default" });
+        const resolvedLeftIcon = (leftIcon ? resolveIconNode(leftIcon, iconCls) : null) || IconComponent && /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { className: iconCls });
         const showClearButton = clearable && value && String(value).length > 0;
         const isMultiline = type === "textarea";
         const baseClassName = cn(
@@ -4800,6 +4818,22 @@ var init_Input = __esm({
           (rightIcon || showClearButton) && "pr-10",
           className
         );
+        const handleChange = (e) => {
+          if (typeof onChange === "string") {
+            const target = e.target;
+            const payload = type === "checkbox" ? { checked: target.checked } : { value: target.value };
+            eventBus.emit(`UI:${onChange}`, payload);
+          } else {
+            onChange?.(e);
+          }
+        };
+        const handleClear = () => {
+          if (typeof onClear === "string") {
+            eventBus.emit(`UI:${onClear}`, {});
+          } else {
+            onClear?.();
+          }
+        };
         if (type === "select") {
           return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full", children: [
             resolvedLeftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-muted-foreground", children: resolvedLeftIcon }),
@@ -4808,7 +4842,7 @@ var init_Input = __esm({
               {
                 ref,
                 value,
-                onChange,
+                onChange: handleChange,
                 className: cn(baseClassName, "appearance-none pr-10", className),
                 ...props,
                 children: [
@@ -4826,7 +4860,7 @@ var init_Input = __esm({
             {
               ref,
               value,
-              onChange,
+              onChange: handleChange,
               rows,
               className: baseClassName,
               ...props
@@ -4840,7 +4874,7 @@ var init_Input = __esm({
               ref,
               type: "checkbox",
               checked: props.checked,
-              onChange,
+              onChange: handleChange,
               className: cn(
                 "h-icon-default w-icon-default rounded-sm",
                 "border-border",
@@ -4860,7 +4894,7 @@ var init_Input = __esm({
               ref,
               type,
               value,
-              onChange,
+              onChange: handleChange,
               className: baseClassName,
               ...props
             }
@@ -4869,12 +4903,12 @@ var init_Input = __esm({
             "button",
             {
               type: "button",
-              onClick: onClear,
+              onClick: handleClear,
               className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground hover:text-foreground",
               children: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: "x", className: "h-icon-default w-icon-default" })
             }
           ),
-          rightIcon && !showClearButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground", children: rightIcon })
+          rightIcon && !showClearButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground", children: resolveIconNode(rightIcon, iconCls) })
         ] });
       }
     );
@@ -5131,12 +5165,22 @@ var Textarea;
 var init_Textarea = __esm({
   "components/core/atoms/Textarea.tsx"() {
     init_cn();
+    init_useEventBus();
     Textarea = React7__default.default.forwardRef(
-      ({ className, error, ...props }, ref) => {
+      ({ className, error, onChange, ...props }, ref) => {
+        const eventBus = useEventBus();
+        const handleChange = (e) => {
+          if (typeof onChange === "string") {
+            eventBus.emit(`UI:${onChange}`, { value: e.target.value });
+          } else {
+            onChange?.(e);
+          }
+        };
         return /* @__PURE__ */ jsxRuntime.jsx(
           "textarea",
           {
             ref,
+            onChange: handleChange,
             className: cn(
               "block w-full border-[length:var(--border-width)] shadow-sm",
               "px-3 py-2 text-sm text-foreground",
@@ -5205,7 +5249,7 @@ var init_Badge = __esm({
           md: "h-icon-default w-icon-default",
           lg: "h-icon-default w-icon-default"
         };
-        const resolvedIcon = typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: icon, className: iconSizes[size] }) : icon;
+        const resolvedIcon = typeof icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: icon, className: iconSizes[size] }) : icon ? /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { icon, className: iconSizes[size] }) : null;
         return /* @__PURE__ */ jsxRuntime.jsxs(
           "span",
           {
@@ -6604,7 +6648,7 @@ function DocSearch({
             onChange: handleChange,
             onFocus: handleFocus,
             onKeyDown: handleKeyDown,
-            leftIcon: /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: "search", size: "sm", className: "text-muted-foreground" }),
+            leftIcon: "search",
             clearable: query.length > 0,
             onClear: () => {
               setQuery("");
@@ -6662,7 +6706,6 @@ var init_DocSearch = __esm({
     init_Stack();
     init_Stack();
     init_Typography();
-    init_Icon();
     init_Input();
     init_useTranslate();
   }

package/dist/docs/index.d.cts

@@ -168,36 +168,10 @@ interface TypographyProps {
 }
 declare const Typography: React.FC<TypographyProps>;
 
-type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "default";
-type ButtonSize = "sm" | "md" | "lg";
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Additional CSS classes applied to the root element. */
-    className?: string;
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-    isLoading?: boolean;
-    /** Left icon as ReactNode, Lucide component, or string name (e.g. "plus", "trash") */
-    leftIcon?: React.ReactNode | LucideIcon | string;
-    /** Right icon as ReactNode, Lucide component, or string name */
-    rightIcon?: React.ReactNode | LucideIcon | string;
-    /** Alias for leftIcon */
-    icon?: React.ReactNode | LucideIcon | string;
-    /** Alias for rightIcon */
-    iconRight?: React.ReactNode | LucideIcon | string;
-    /** Declarative event name — emits UI:{action} via eventBus on click */
-    action?: EventKey;
-    /** Payload to include with the action event */
-    actionPayload?: EventPayload;
-    /** Button label text (alternative to children for schema-driven rendering) */
-    label?: string;
-    /** Disable the button (greys out, blocks click events) */
-    disabled?: boolean;
-}
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-
 /**
  * Cross-cutting atom-level prop shapes shared across the design system.
  */
+
 /**
  * Canonical semantic color palette.  Values are the Tailwind / CSS-var token
  * names that every component in the design system understands.  Prefer this
@@ -234,13 +208,22 @@ type UiError = {
 type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 type IconAnimation = 'spin' | 'pulse' | 'none';
 
+/**
+ * Canonical icon-input type: a Lucide component reference OR a canonical
+ * kebab-case icon name string. The single source of truth for every
+ * icon-bearing prop across `@almadar/ui` — pattern-sync's parser maps this
+ * union to the `icon` config type, so the factory inspector renders an
+ * IconPicker and a string name resolves via `resolveIcon`. Never declare an
+ * icon prop as `React.ReactNode` (it collapses to a non-editable `node`).
+ */
+type IconInput = LucideIcon | string;
 interface IconProps {
     /**
      * Lucide icon component (preferred for type-safe usage), OR a canonical
      * kebab-case icon name string — a string is treated exactly like `name` so
      * trait/factory authors can pass an icon by name through the `icon` prop.
      */
-    icon?: LucideIcon | string;
+    icon?: IconInput;
     /** Icon name as string (resolved from iconMap) */
     name?: string;
     /** Size of the icon */
@@ -258,6 +241,33 @@ interface IconProps {
 }
 declare const Icon: React.FC<IconProps>;
 
+type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "success" | "warning" | "default";
+type ButtonSize = "sm" | "md" | "lg";
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Additional CSS classes applied to the root element. */
+    className?: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    isLoading?: boolean;
+    /** Left icon: a Lucide component or a canonical icon name string (e.g. "plus", "trash"). */
+    leftIcon?: IconInput;
+    /** Right icon: a Lucide component or a canonical icon name string. */
+    rightIcon?: IconInput;
+    /** Alias for leftIcon */
+    icon?: IconInput;
+    /** Alias for rightIcon */
+    iconRight?: IconInput;
+    /** Declarative event name — emits UI:{action} via eventBus on click */
+    action?: EventKey;
+    /** Payload to include with the action event */
+    actionPayload?: EventPayload;
+    /** Button label text (alternative to children for schema-driven rendering) */
+    label?: string;
+    /** Disable the button (greys out, blocks click events) */
+    disabled?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
 type CardShadow = "none" | "sm" | "md" | "lg";
 /**
  * Layer 2 visual treatment for the card pattern — orthogonal to the semantic
@@ -279,6 +289,8 @@ interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     look?: CardLook;
     /** Card content */
     children?: React.ReactNode;
+    /** Declarative event key emitted on click for trait dispatch */
+    action?: EventKey;
 }
 declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 
@@ -330,21 +342,20 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "
     /** Input type - supports 'select' and 'textarea' in addition to standard types */
     inputType?: "text" | "email" | "password" | "number" | "tel" | "url" | "search" | "date" | "datetime-local" | "time" | "checkbox" | "select" | "textarea";
     error?: string;
-    leftIcon?: React.ReactNode;
-    rightIcon?: React.ReactNode;
-    /** Lucide icon component for left side (convenience prop), or a canonical
-     *  kebab-case icon name string (resolved via `resolveIcon`). */
-    icon?: LucideIcon | string;
+    leftIcon?: IconInput;
+    rightIcon?: IconInput;
+    /** Lucide icon component or canonical kebab-case icon name string for left side */
+    icon?: IconInput;
     /** Show clear button when input has value */
     clearable?: boolean;
-    /** Callback when clear button is clicked */
-    onClear?: () => void;
+    /** Callback or declarative event key when clear button is clicked */
+    onClear?: (() => void) | EventKey;
     /** Options for select type */
     options?: SelectOption[];
     /** Rows for textarea type */
     rows?: number;
-    /** onChange handler - accepts events from input, select, or textarea */
-    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>;
+    /** onChange handler or declarative event key for trait dispatch */
+    onChange?: React.ChangeEventHandler<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement> | EventKey;
 }
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLSelectElement | HTMLInputElement | HTMLTextAreaElement>>;
 

package/dist/docs/index.js

@@ -4011,6 +4011,7 @@ var variantStyles3, paddingStyles2, shadowStyles2, lookStyles, Card, CardHeader,
 var init_Card = __esm({
   "components/core/atoms/Card.tsx"() {
     init_cn();
+    init_useEventBus();
     variantStyles3 = {
       default: [
         "bg-card",
@@ -4074,8 +4075,15 @@ var init_Card = __esm({
         shadow,
         look = "elevated",
         children,
+        action,
+        onClick,
         ...props
       }, ref) => {
+        const eventBus = useEventBus();
+        const handleClick = action ? (e) => {
+          eventBus.emit(`UI:${action}`, {});
+          onClick?.(e);
+        } : onClick;
         return /* @__PURE__ */ jsxs(
           "div",
           {
@@ -4089,6 +4097,7 @@ var init_Card = __esm({
               shadow && shadowStyles2[shadow],
               className
             ),
+            onClick: handleClick,
             ...props,
             children: [
               (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
@@ -4719,6 +4728,7 @@ var init_Input = __esm({
     init_cn();
     init_Icon();
     init_useTranslate();
+    init_useEventBus();
     Input = React7.forwardRef(
       ({
         className,
@@ -4737,9 +4747,17 @@ var init_Input = __esm({
         ...props
       }, ref) => {
         const { t } = useTranslate();
+        const eventBus = useEventBus();
         const type = inputType || htmlType || "text";
+        const resolveIconNode = (i, cls) => {
+          if (!i) return null;
+          if (typeof i === "string") return /* @__PURE__ */ jsx(Icon, { name: i, className: cls });
+          const C = i;
+          return /* @__PURE__ */ jsx(C, { className: cls });
+        };
+        const iconCls = "h-icon-default w-icon-default";
         const IconComponent = typeof iconProp === "string" ? resolveIcon(iconProp) : iconProp;
-        const resolvedLeftIcon = leftIcon || IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: "h-icon-default w-icon-default" });
+        const resolvedLeftIcon = (leftIcon ? resolveIconNode(leftIcon, iconCls) : null) || IconComponent && /* @__PURE__ */ jsx(IconComponent, { className: iconCls });
         const showClearButton = clearable && value && String(value).length > 0;
         const isMultiline = type === "textarea";
         const baseClassName = cn(
@@ -4755,6 +4773,22 @@ var init_Input = __esm({
           (rightIcon || showClearButton) && "pr-10",
           className
         );
+        const handleChange = (e) => {
+          if (typeof onChange === "string") {
+            const target = e.target;
+            const payload = type === "checkbox" ? { checked: target.checked } : { value: target.value };
+            eventBus.emit(`UI:${onChange}`, payload);
+          } else {
+            onChange?.(e);
+          }
+        };
+        const handleClear = () => {
+          if (typeof onClear === "string") {
+            eventBus.emit(`UI:${onClear}`, {});
+          } else {
+            onClear?.();
+          }
+        };
         if (type === "select") {
           return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
             resolvedLeftIcon && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-muted-foreground", children: resolvedLeftIcon }),
@@ -4763,7 +4797,7 @@ var init_Input = __esm({
               {
                 ref,
                 value,
-                onChange,
+                onChange: handleChange,
                 className: cn(baseClassName, "appearance-none pr-10", className),
                 ...props,
                 children: [
@@ -4781,7 +4815,7 @@ var init_Input = __esm({
             {
               ref,
               value,
-              onChange,
+              onChange: handleChange,
               rows,
               className: baseClassName,
               ...props
@@ -4795,7 +4829,7 @@ var init_Input = __esm({
               ref,
               type: "checkbox",
               checked: props.checked,
-              onChange,
+              onChange: handleChange,
               className: cn(
                 "h-icon-default w-icon-default rounded-sm",
                 "border-border",
@@ -4815,7 +4849,7 @@ var init_Input = __esm({
               ref,
               type,
               value,
-              onChange,
+              onChange: handleChange,
               className: baseClassName,
               ...props
             }
@@ -4824,12 +4858,12 @@ var init_Input = __esm({
             "button",
             {
               type: "button",
-              onClick: onClear,
+              onClick: handleClear,
               className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground hover:text-foreground",
               children: /* @__PURE__ */ jsx(Icon, { name: "x", className: "h-icon-default w-icon-default" })
             }
           ),
-          rightIcon && !showClearButton && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground", children: rightIcon })
+          rightIcon && !showClearButton && /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center text-muted-foreground", children: resolveIconNode(rightIcon, iconCls) })
         ] });
       }
     );
@@ -5086,12 +5120,22 @@ var Textarea;
 var init_Textarea = __esm({
   "components/core/atoms/Textarea.tsx"() {
     init_cn();
+    init_useEventBus();
     Textarea = React7.forwardRef(
-      ({ className, error, ...props }, ref) => {
+      ({ className, error, onChange, ...props }, ref) => {
+        const eventBus = useEventBus();
+        const handleChange = (e) => {
+          if (typeof onChange === "string") {
+            eventBus.emit(`UI:${onChange}`, { value: e.target.value });
+          } else {
+            onChange?.(e);
+          }
+        };
         return /* @__PURE__ */ jsx(
           "textarea",
           {
             ref,
+            onChange: handleChange,
             className: cn(
               "block w-full border-[length:var(--border-width)] shadow-sm",
               "px-3 py-2 text-sm text-foreground",
@@ -5160,7 +5204,7 @@ var init_Badge = __esm({
           md: "h-icon-default w-icon-default",
           lg: "h-icon-default w-icon-default"
         };
-        const resolvedIcon = typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: iconSizes[size] }) : icon;
+        const resolvedIcon = typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: icon, className: iconSizes[size] }) : icon ? /* @__PURE__ */ jsx(Icon, { icon, className: iconSizes[size] }) : null;
         return /* @__PURE__ */ jsxs(
           "span",
           {
@@ -6559,7 +6603,7 @@ function DocSearch({
             onChange: handleChange,
             onFocus: handleFocus,
             onKeyDown: handleKeyDown,
-            leftIcon: /* @__PURE__ */ jsx(Icon, { name: "search", size: "sm", className: "text-muted-foreground" }),
+            leftIcon: "search",
             clearable: query.length > 0,
             onClear: () => {
               setQuery("");
@@ -6617,7 +6661,6 @@ var init_DocSearch = __esm({
     init_Stack();
     init_Stack();
     init_Typography();
-    init_Icon();
     init_Input();
     init_useTranslate();
   }