@bubo-squared/ui-framework 0.1.92 → 0.1.93

package/dist/index.d.cts

@@ -14,8 +14,8 @@ declare const buttonVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps$1 extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
-    suffixIcon?: React$1.ReactNode;
-    prefixIcon?: React$1.ReactNode;
+    trailingIcon?: React$1.ReactNode;
+    leadingIcon?: React$1.ReactNode;
 }
 declare const Button: React$1.ForwardRefExoticComponent<ButtonProps$1 & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -55,8 +55,8 @@ declare const linkButtonVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface LinkButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof linkButtonVariants> {
     asChild?: boolean;
-    suffixIcon?: React$1.ReactNode;
-    prefixIcon?: React$1.ReactNode;
+    trailingIcon?: React$1.ReactNode;
+    leadingIcon?: React$1.ReactNode;
 }
 declare const LinkButton: React$1.ForwardRefExoticComponent<LinkButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -337,6 +337,7 @@ interface SearchInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEle
     placeholder?: string;
     leadingIcon?: React$1.ReactNode;
     showLeadingIcon?: boolean;
+    trailingIcon?: React$1.ReactNode | null;
     size?: SearchInputSize;
     disabled?: boolean;
 }
@@ -412,12 +413,12 @@ interface ToggleProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>
 }
 declare const Toggle: React$1.FC<ToggleProps>;
 
-type WebsiteInputHierarchy = "prefix" | "suffix";
+type WebsiteInputHierarchy = "leading" | "trailing";
 interface WebsiteInputProps extends Omit<TextInputProps, "leadingIcon" | "trailingIcon"> {
     /**
      * Position of the protocol add-on (label + icon).
-     * - "prefix": add-on on the left side of the field
-     * - "suffix": add-on on the right side of the field
+     * - "leading": add-on on the left side of the field
+     * - "trailing": add-on on the right side of the field
      */
     hierarchy?: WebsiteInputHierarchy;
     /**

package/dist/index.d.ts

@@ -14,8 +14,8 @@ declare const buttonVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps$1 extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
-    suffixIcon?: React$1.ReactNode;
-    prefixIcon?: React$1.ReactNode;
+    trailingIcon?: React$1.ReactNode;
+    leadingIcon?: React$1.ReactNode;
 }
 declare const Button: React$1.ForwardRefExoticComponent<ButtonProps$1 & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -55,8 +55,8 @@ declare const linkButtonVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface LinkButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof linkButtonVariants> {
     asChild?: boolean;
-    suffixIcon?: React$1.ReactNode;
-    prefixIcon?: React$1.ReactNode;
+    trailingIcon?: React$1.ReactNode;
+    leadingIcon?: React$1.ReactNode;
 }
 declare const LinkButton: React$1.ForwardRefExoticComponent<LinkButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
 
@@ -337,6 +337,7 @@ interface SearchInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEle
     placeholder?: string;
     leadingIcon?: React$1.ReactNode;
     showLeadingIcon?: boolean;
+    trailingIcon?: React$1.ReactNode | null;
     size?: SearchInputSize;
     disabled?: boolean;
 }
@@ -412,12 +413,12 @@ interface ToggleProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>
 }
 declare const Toggle: React$1.FC<ToggleProps>;
 
-type WebsiteInputHierarchy = "prefix" | "suffix";
+type WebsiteInputHierarchy = "leading" | "trailing";
 interface WebsiteInputProps extends Omit<TextInputProps, "leadingIcon" | "trailingIcon"> {
     /**
      * Position of the protocol add-on (label + icon).
-     * - "prefix": add-on on the left side of the field
-     * - "suffix": add-on on the right side of the field
+     * - "leading": add-on on the left side of the field
+     * - "trailing": add-on on the right side of the field
      */
     hierarchy?: WebsiteInputHierarchy;
     /**

package/dist/index.js

@@ -76,8 +76,8 @@ var Button = React.forwardRef(
       size = "md",
       asChild = false,
       children,
-      suffixIcon,
-      prefixIcon,
+      trailingIcon,
+      leadingIcon,
       ...rest
     } = props;
     const Comp = asChild ? Slot : "button";
@@ -88,9 +88,9 @@ var Button = React.forwardRef(
         ref,
         ...rest,
         children: [
-          prefixIcon && /* @__PURE__ */ jsx2("div", { className: cn(buttonIconVariants({ size })), children: prefixIcon }),
+          leadingIcon && /* @__PURE__ */ jsx2("div", { className: cn(buttonIconVariants({ size })), children: leadingIcon }),
           /* @__PURE__ */ jsx2("div", { className: cn(buttonTextVariants({ size })), children }),
-          suffixIcon && /* @__PURE__ */ jsx2("div", { className: cn(buttonIconVariants({ size })), children: suffixIcon })
+          trailingIcon && /* @__PURE__ */ jsx2("div", { className: cn(buttonIconVariants({ size })), children: trailingIcon })
         ]
       }
     );
@@ -294,8 +294,8 @@ var LinkButton = React4.forwardRef(
       size = "sm",
       asChild = false,
       children,
-      suffixIcon,
-      prefixIcon,
+      trailingIcon,
+      leadingIcon,
       ...rest
     } = props;
     const Comp = asChild ? Slot3 : "button";
@@ -306,9 +306,9 @@ var LinkButton = React4.forwardRef(
         ref,
         ...rest,
         children: [
-          prefixIcon && /* @__PURE__ */ jsx6("div", { className: cn(linkButtonIconVariants({ size })), children: prefixIcon }),
+          leadingIcon && /* @__PURE__ */ jsx6("div", { className: cn(linkButtonIconVariants({ size })), children: leadingIcon }),
           /* @__PURE__ */ jsx6("div", { className: cn(linkButtonTextVariants({ size })), children }),
-          suffixIcon && /* @__PURE__ */ jsx6("div", { className: cn(linkButtonIconVariants({ size })), children: suffixIcon })
+          trailingIcon && /* @__PURE__ */ jsx6("div", { className: cn(linkButtonIconVariants({ size })), children: trailingIcon })
         ]
       }
     );
@@ -2084,6 +2084,7 @@ var SearchInput = (props) => {
     className,
     leadingIcon,
     showLeadingIcon = true,
+    trailingIcon,
     ...inputProps
   } = props;
   const inputRef = React28.useRef(null);
@@ -2091,6 +2092,7 @@ var SearchInput = (props) => {
     if (disabled) return;
     inputRef.current?.focus();
   };
+  const showTrailingIcon = !!trailingIcon;
   return /* @__PURE__ */ jsx30("div", { className: "flex flex-col gap-2 items-start min-w-[343px]", children: /* @__PURE__ */ jsx30("div", { className: "relative w-full", children: /* @__PURE__ */ jsxs20(
     InputShell,
     {
@@ -2115,7 +2117,8 @@ var SearchInput = (props) => {
             style: { marginBottom: 0 },
             ...inputProps
           }
-        )
+        ),
+        showTrailingIcon && /* @__PURE__ */ jsx30("span", { className: cn("cursor-pointer", iconWrapperVariants2({ size, disabled: !!disabled })), children: trailingIcon })
       ]
     }
   ) }) });
@@ -2903,7 +2906,7 @@ import "react";
 import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
 var WebsiteInput = (props) => {
   const {
-    hierarchy = "prefix",
+    hierarchy = "leading",
     protocolLabel = "http://",
     icon,
     size = "large",
@@ -2911,7 +2914,7 @@ var WebsiteInput = (props) => {
     className,
     ...rest
   } = props;
-  const isPrefix = hierarchy === "prefix";
+  const isLeading = hierarchy === "leading";
   const baseClass = cn(
     "[&>span]:w-[unset] hover:bg-[unset]",
     !disabled && "[&:not(:focus-within):hover]:shadow-[0_0_0_var(--focus-ring-spread)_var(--background-secondary-hover)]",
@@ -2929,18 +2932,18 @@ var WebsiteInput = (props) => {
     "border-(--border-secondary)",
     // divider color
     disabled && "border-(--border-secondary-disabled) hover:border-(--border-secondary-disabled)",
-    isPrefix ? "border-r" : "border-l"
+    isLeading ? "border-r" : "border-l"
   );
   const iconWrapperClass = cn(
     "flex items-center justify-center shrink-0",
     size === "extra-large" ? "[&>svg]:w-6 [&>svg]:h-6" : "[&>svg]:w-5 [&>svg]:h-5",
     disabled ? "text-(--icon-primary-disabled)" : "text-(--icon-primary) group-hover:text-(--icon-primary-hover) group-focus-within:text-(--icon-primary-focus)"
   );
-  const prefixAddon = /* @__PURE__ */ jsxs25("div", { className: baseAddonClass, children: [
+  const leadingAddon = /* @__PURE__ */ jsxs25("div", { className: baseAddonClass, children: [
     /* @__PURE__ */ jsx35("div", { className: addonTextClass, children: protocolLabel }),
     icon != null && /* @__PURE__ */ jsx35("span", { className: iconWrapperClass, children: icon })
   ] });
-  const suffixAddon = /* @__PURE__ */ jsxs25("div", { className: baseAddonClass, children: [
+  const trailingAddon = /* @__PURE__ */ jsxs25("div", { className: baseAddonClass, children: [
     icon != null && /* @__PURE__ */ jsx35("span", { className: iconWrapperClass, children: icon }),
     /* @__PURE__ */ jsx35("div", { className: addonTextClass, children: protocolLabel })
   ] });
@@ -2951,8 +2954,8 @@ var WebsiteInput = (props) => {
       size,
       disabled,
       className: cn(baseClass, className),
-      leadingIcon: isPrefix ? prefixAddon : void 0,
-      trailingIcon: !isPrefix ? suffixAddon : void 0
+      leadingIcon: isLeading ? leadingAddon : void 0,
+      trailingIcon: !isLeading ? trailingAddon : void 0
     }
   );
 };