@grandbazar/ui-baza 1.1.4 → 1.2.0

package/dist/index.cjs

@@ -20,6 +20,27 @@ function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 
+function composeEventHandlers(childHandler, parentHandler) {
+  return (event) => {
+    childHandler?.(event);
+    if (!event.defaultPrevented) {
+      parentHandler?.(event);
+    }
+  };
+}
+
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref != null) {
+        ref.current = node;
+      }
+    }
+  };
+}
+
 function createRange(start, length) {
   return Array.from({ length }, (_, index) => start + index);
 }
@@ -27,38 +48,38 @@ function createRange(start, length) {
 const badge = "_badge_p5h5n_2";
 const primary$3 = "_primary_p5h5n_9";
 const secondary$4 = "_secondary_p5h5n_13";
-const accent$2 = "_accent_p5h5n_18";
+const accent$3 = "_accent_p5h5n_18";
 const violet = "_violet_p5h5n_23";
 const pink = "_pink_p5h5n_28";
 const red$1 = "_red_p5h5n_33";
 const orange = "_orange_p5h5n_38";
 const green = "_green_p5h5n_43";
-const neutral$2 = "_neutral_p5h5n_48";
-const lg$5 = "_lg_p5h5n_53";
-const md$8 = "_md_p5h5n_60";
-const styles$t = {
+const neutral$3 = "_neutral_p5h5n_48";
+const lg$6 = "_lg_p5h5n_53";
+const md$9 = "_md_p5h5n_60";
+const styles$u = {
 	badge: badge,
 	primary: primary$3,
 	secondary: secondary$4,
-	accent: accent$2,
+	accent: accent$3,
 	violet: violet,
 	pink: pink,
 	red: red$1,
 	orange: orange,
 	green: green,
-	neutral: neutral$2,
-	lg: lg$5,
-	md: md$8
+	neutral: neutral$3,
+	lg: lg$6,
+	md: md$9
 };
 
 function Badge({ children, className, size = "lg", color = "accent", mode = "primary", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$t.badge, styles$t[size], styles$t[color], styles$t[mode], className), ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$u.badge, styles$u[size], styles$u[color], styles$u[mode], className), ...props, children });
 }
 
 const badgeTabsItem = "_badgeTabsItem_10lit_2";
 const primary$2 = "_primary_10lit_18";
 const secondary$3 = "_secondary_10lit_36";
-const styles$s = {
+const styles$t = {
 	badgeTabsItem: badgeTabsItem,
 	primary: primary$2,
 	secondary: secondary$3
@@ -71,7 +92,7 @@ function BadgeTabsItem({ className, children, isActive, mode = "primary", ...pro
       type: "button",
       role: "tab",
       "aria-selected": Boolean(isActive),
-      className: classNames(styles$s.badgeTabsItem, styles$s[mode], className),
+      className: classNames(styles$t.badgeTabsItem, styles$t[mode], className),
       ...props,
       children
     }
@@ -79,12 +100,12 @@ function BadgeTabsItem({ className, children, isActive, mode = "primary", ...pro
 }
 
 const badgeTabsRoot = "_badgeTabsRoot_1qkat_2";
-const styles$r = {
+const styles$s = {
 	badgeTabsRoot: badgeTabsRoot
 };
 
 function BadgeTabsRoot({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tablist", className: classNames(styles$r.badgeTabsRoot, className), ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tablist", className: classNames(styles$s.badgeTabsRoot, className), ...props, children });
 }
 
 function BadgeTabs(props) {
@@ -598,38 +619,56 @@ function IconYandex(props) {
 const breadcrumbs = "_breadcrumbs_1bfmb_2";
 const breadcrumbsItem = "_breadcrumbsItem_1bfmb_8";
 const defaultSeparator = "_defaultSeparator_1bfmb_14";
-const styles$q = {
+const styles$r = {
 	breadcrumbs: breadcrumbs,
 	breadcrumbsItem: breadcrumbsItem,
 	defaultSeparator: defaultSeparator
 };
 
+function isEventHandler(key) {
+  return /^on[A-Z]/.test(key);
+}
+
 function Slot({
   children,
+  ref,
   ...props
 }) {
   if (React.isValidElement(children)) {
     const childProps = children.props;
-    const parentProps = props;
-    const mergedProps = {
-      ...childProps,
-      ...parentProps,
-      style: {
-        ...childProps.style,
-        ...parentProps.style
-      },
-      className: classNames(childProps.className, parentProps.className)
-    };
+    const mergedProps = { ...childProps };
+    for (const key of Object.keys(props)) {
+      const parentValue = props[key];
+      const childValue = childProps[key];
+      if (key === "style") {
+        mergedProps.style = {
+          ...childValue,
+          ...parentValue
+        };
+      } else if (key === "className") {
+        mergedProps.className = classNames(childValue, parentValue);
+      } else if (isEventHandler(key) && typeof childValue === "function") {
+        mergedProps[key] = composeEventHandlers(
+          childValue,
+          parentValue
+        );
+      } else {
+        mergedProps[key] = parentValue;
+      }
+    }
+    if (ref) {
+      mergedProps.ref = composeRefs(childProps.ref, ref);
+    }
     return React.cloneElement(children, mergedProps);
   }
   if (React.Children.count(children) > 1) {
-    React.Children.only(null);
+    throw new Error("Slot expects a single child element");
   }
   return null;
 }
 
 const breadcrumbItem = "_breadcrumbItem_cua4v_2";
-const styles$p = {
+const styles$q = {
 	breadcrumbItem: breadcrumbItem
 };
 
@@ -640,7 +679,7 @@ function BreadcrumbItem({ children, className, isActive, asChild, ...props }) {
     {
       "data-active": isActive,
       "data-disabled": props.disabled,
-      className: classNames(styles$p.breadcrumbItem, className),
+      className: classNames(styles$q.breadcrumbItem, className),
       ...isActive && { "aria-current": "page" },
       ...!asChild && { type: "button" },
       ...props,
@@ -652,52 +691,95 @@ function BreadcrumbItem({ children, className, isActive, asChild, ...props }) {
 function Breadcrumbs({
   className,
   children,
-  separator = /* @__PURE__ */ jsxRuntime.jsx(IconChevron, { className: styles$q.defaultSeparator })
+  separator = /* @__PURE__ */ jsxRuntime.jsx(IconChevron, { className: styles$r.defaultSeparator })
 }) {
   const childrenArray = Array.isArray(children) ? children : [children];
   const lastIndex = childrenArray.length - 1;
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "breadcrumb", className, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: styles$q.breadcrumbs, children: childrenArray.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles$q.breadcrumbsItem, children: item }),
-    index < lastIndex && /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles$q.breadcrumbsItem, "aria-hidden": "true", children: separator })
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "breadcrumb", className, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: styles$r.breadcrumbs, children: childrenArray.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles$r.breadcrumbsItem, children: item }),
+    index < lastIndex && /* @__PURE__ */ jsxRuntime.jsx("li", { className: styles$r.breadcrumbsItem, "aria-hidden": "true", children: separator })
   ] }, index)) }) });
 }
 Breadcrumbs.Item = BreadcrumbItem;
 
 const button = "_button_cmbkj_2";
-const accent$1 = "_accent_cmbkj_11";
+const accent$2 = "_accent_cmbkj_11";
 const primary$1 = "_primary_cmbkj_12";
 const secondary$2 = "_secondary_cmbkj_30";
 const tertiary = "_tertiary_cmbkj_48";
 const line = "_line_cmbkj_49";
-const neutral$1 = "_neutral_cmbkj_78";
-const lg$4 = "_lg_cmbkj_145";
-const md$7 = "_md_cmbkj_153";
+const neutral$2 = "_neutral_cmbkj_78";
+const lg$5 = "_lg_cmbkj_145";
+const md$8 = "_md_cmbkj_153";
 const sm$3 = "_sm_cmbkj_161";
-const styles$o = {
+const styles$p = {
 	button: button,
-	accent: accent$1,
+	accent: accent$2,
 	primary: primary$1,
 	secondary: secondary$2,
 	tertiary: tertiary,
 	line: line,
+	neutral: neutral$2,
+	lg: lg$5,
+	md: md$8,
+	sm: sm$3
+};
+
+const buttonFunction = "_buttonFunction_o8iku_2";
+const accent$1 = "_accent_o8iku_10";
+const neutral$1 = "_neutral_o8iku_22";
+const lg$4 = "_lg_o8iku_41";
+const md$7 = "_md_o8iku_46";
+const styles$o = {
+	buttonFunction: buttonFunction,
+	accent: accent$1,
 	neutral: neutral$1,
 	lg: lg$4,
-	md: md$7,
-	sm: sm$3
+	md: md$7
 };
 
+function ButtonFunction({
+  children,
+  className,
+  color = "accent",
+  size = "lg",
+  asChild,
+  ...props
+}) {
+  const Component = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      className: classNames(styles$o.buttonFunction, styles$o[color], styles$o[size], className),
+      ...props.disabled && { "data-disabled": true },
+      ...!asChild && { type: "button" },
+      ...props,
+      children
+    }
+  );
+}
+
 function Button({
   children,
   className,
   color = "accent",
   size = "lg",
   mode = "primary",
-  as = "button",
+  asChild,
   ...props
 }) {
-  const commonClassNames = classNames(styles$o.button, styles$o[color], styles$o[size], styles$o[mode], className);
-  return as === "button" ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: commonClassNames, type: "button", ...props, children }) : /* @__PURE__ */ jsxRuntime.jsx("a", { className: commonClassNames, ...props, children });
+  const Component = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Component,
+    {
+      className: classNames(styles$p.button, styles$p[color], styles$p[size], styles$p[mode], className),
+      ...!asChild && { type: "button" },
+      ...props,
+      children
+    }
+  );
 }
+Button.Function = ButtonFunction;
 
 const checkboxWrapper = "_checkboxWrapper_k1shg_2";
 const icon$2 = "_icon_k1shg_23";

package/dist/index.d.ts

@@ -70,25 +70,31 @@ export declare namespace Breadcrumbs {
 }
 
 /**
- * Button renders a clickable button or anchor element with various styles.
- * Supports polymorphic rendering as either a button or anchor based on the 'as' prop.
+ * Button renders a clickable button element with various styles.
+ * Supports the asChild pattern for polymorphic rendering via Slot.
  *
  * @param color - Color variant of the button (accent, neutral)
  * @param size - Size of the button (lg, md, sm)
  * @param mode - Visual mode of the button (primary, secondary, tertiary, line)
- * @param as - Element type to render (button, a)
+ * @param asChild - When true, merges props onto the child element instead of rendering a button
  * @param children - Content to display inside the button
  */
-export declare function Button(props: TButtonAsButtonProps): React.JSX.Element;
+export declare function Button({ children, className, color, size, mode, asChild, ...props }: TButtonProps): JSX.Element;
 
-export declare function Button(props: TButtonAsAnchorProps): React.JSX.Element;
+export declare namespace Button {
+    var Function: typeof ButtonFunction;
+}
 
 declare const BUTTON_COLORS: readonly ["accent", "neutral"];
 
+declare const BUTTON_FUNCTION_SIZES: readonly ["lg", "md"];
+
 declare const BUTTON_MODES: readonly ["primary", "secondary", "line", "tertiary"];
 
 declare const BUTTON_SIZES: readonly ["lg", "md", "sm"];
 
+declare function ButtonFunction({ children, className, color, size, asChild, ...props }: TButtonFunctionProps): JSX.Element;
+
 /**
  * Checkbox renders a checkbox input with label and state indicators.
  * Supports checked, unchecked, and indeterminate states with visual feedback.
@@ -499,23 +505,21 @@ declare type TBreadcrumbsProps = {
     separator?: default_2.ReactNode;
 };
 
-export declare type TButtonAsAnchorProps = TButtonCommonProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    as: 'a';
-    ref?: React.Ref<HTMLAnchorElement> | null;
-};
-
-export declare type TButtonAsButtonProps = TButtonCommonProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    as?: 'button';
-    ref?: React.Ref<HTMLButtonElement> | null;
-};
-
 declare type TButtonCommonProps = {
     color?: TArrayElement<typeof BUTTON_COLORS>;
     size?: TArrayElement<typeof BUTTON_SIZES>;
     mode?: TArrayElement<typeof BUTTON_MODES>;
+    className?: string;
+};
+
+declare type TButtonFunctionProps = TAsChildProps<React.ButtonHTMLAttributes<HTMLButtonElement>> & {
+    color?: TArrayElement<typeof BUTTON_COLORS>;
+    size?: TArrayElement<typeof BUTTON_FUNCTION_SIZES>;
+    className?: string;
+    disabled?: boolean;
 };
 
-export declare type TButtonProps = TButtonAsButtonProps | TButtonAsAnchorProps;
+export declare type TButtonProps = TAsChildProps<React.ButtonHTMLAttributes<HTMLButtonElement>> & TButtonCommonProps;
 
 export declare type TCalendarDay = {
     date: number;

package/dist/index.js

@@ -16,6 +16,27 @@ function classNames(...classes) {
   return classes.filter(Boolean).join(" ");
 }
 
+function composeEventHandlers(childHandler, parentHandler) {
+  return (event) => {
+    childHandler?.(event);
+    if (!event.defaultPrevented) {
+      parentHandler?.(event);
+    }
+  };
+}
+
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref != null) {
+        ref.current = node;
+      }
+    }
+  };
+}
+
 function createRange(start, length) {
   return Array.from({ length }, (_, index) => start + index);
 }
@@ -23,38 +44,38 @@ function createRange(start, length) {
 const badge = "_badge_p5h5n_2";
 const primary$3 = "_primary_p5h5n_9";
 const secondary$4 = "_secondary_p5h5n_13";
-const accent$2 = "_accent_p5h5n_18";
+const accent$3 = "_accent_p5h5n_18";
 const violet = "_violet_p5h5n_23";
 const pink = "_pink_p5h5n_28";
 const red$1 = "_red_p5h5n_33";
 const orange = "_orange_p5h5n_38";
 const green = "_green_p5h5n_43";
-const neutral$2 = "_neutral_p5h5n_48";
-const lg$5 = "_lg_p5h5n_53";
-const md$8 = "_md_p5h5n_60";
-const styles$t = {
+const neutral$3 = "_neutral_p5h5n_48";
+const lg$6 = "_lg_p5h5n_53";
+const md$9 = "_md_p5h5n_60";
+const styles$u = {
 	badge: badge,
 	primary: primary$3,
 	secondary: secondary$4,
-	accent: accent$2,
+	accent: accent$3,
 	violet: violet,
 	pink: pink,
 	red: red$1,
 	orange: orange,
 	green: green,
-	neutral: neutral$2,
-	lg: lg$5,
-	md: md$8
+	neutral: neutral$3,
+	lg: lg$6,
+	md: md$9
 };
 
 function Badge({ children, className, size = "lg", color = "accent", mode = "primary", ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: classNames(styles$t.badge, styles$t[size], styles$t[color], styles$t[mode], className), ...props, children });
+  return /* @__PURE__ */ jsx("div", { className: classNames(styles$u.badge, styles$u[size], styles$u[color], styles$u[mode], className), ...props, children });
 }
 
 const badgeTabsItem = "_badgeTabsItem_10lit_2";
 const primary$2 = "_primary_10lit_18";
 const secondary$3 = "_secondary_10lit_36";
-const styles$s = {
+const styles$t = {
 	badgeTabsItem: badgeTabsItem,
 	primary: primary$2,
 	secondary: secondary$3
@@ -67,7 +88,7 @@ function BadgeTabsItem({ className, children, isActive, mode = "primary", ...pro
       type: "button",
       role: "tab",
       "aria-selected": Boolean(isActive),
-      className: classNames(styles$s.badgeTabsItem, styles$s[mode], className),
+      className: classNames(styles$t.badgeTabsItem, styles$t[mode], className),
       ...props,
       children
     }
@@ -75,12 +96,12 @@ function BadgeTabsItem({ className, children, isActive, mode = "primary", ...pro
 }
 
 const badgeTabsRoot = "_badgeTabsRoot_1qkat_2";
-const styles$r = {
+const styles$s = {
 	badgeTabsRoot: badgeTabsRoot
 };
 
 function BadgeTabsRoot({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx("div", { role: "tablist", className: classNames(styles$r.badgeTabsRoot, className), ...props, children });
+  return /* @__PURE__ */ jsx("div", { role: "tablist", className: classNames(styles$s.badgeTabsRoot, className), ...props, children });
 }
 
 function BadgeTabs(props) {
@@ -594,38 +615,56 @@ function IconYandex(props) {
 const breadcrumbs = "_breadcrumbs_1bfmb_2";
 const breadcrumbsItem = "_breadcrumbsItem_1bfmb_8";
 const defaultSeparator = "_defaultSeparator_1bfmb_14";
-const styles$q = {
+const styles$r = {
 	breadcrumbs: breadcrumbs,
 	breadcrumbsItem: breadcrumbsItem,
 	defaultSeparator: defaultSeparator
 };
 
+function isEventHandler(key) {
+  return /^on[A-Z]/.test(key);
+}
+
 function Slot({
   children,
+  ref,
   ...props
 }) {
   if (isValidElement(children)) {
     const childProps = children.props;
-    const parentProps = props;
-    const mergedProps = {
-      ...childProps,
-      ...parentProps,
-      style: {
-        ...childProps.style,
-        ...parentProps.style
-      },
-      className: classNames(childProps.className, parentProps.className)
-    };
+    const mergedProps = { ...childProps };
+    for (const key of Object.keys(props)) {
+      const parentValue = props[key];
+      const childValue = childProps[key];
+      if (key === "style") {
+        mergedProps.style = {
+          ...childValue,
+          ...parentValue
+        };
+      } else if (key === "className") {
+        mergedProps.className = classNames(childValue, parentValue);
+      } else if (isEventHandler(key) && typeof childValue === "function") {
+        mergedProps[key] = composeEventHandlers(
+          childValue,
+          parentValue
+        );
+      } else {
+        mergedProps[key] = parentValue;
+      }
+    }
+    if (ref) {
+      mergedProps.ref = composeRefs(childProps.ref, ref);
+    }
     return cloneElement(children, mergedProps);
   }
   if (React.Children.count(children) > 1) {
-    React.Children.only(null);
+    throw new Error("Slot expects a single child element");
   }
   return null;
 }
 
 const breadcrumbItem = "_breadcrumbItem_cua4v_2";
-const styles$p = {
+const styles$q = {
 	breadcrumbItem: breadcrumbItem
 };
 
@@ -636,7 +675,7 @@ function BreadcrumbItem({ children, className, isActive, asChild, ...props }) {
     {
       "data-active": isActive,
       "data-disabled": props.disabled,
-      className: classNames(styles$p.breadcrumbItem, className),
+      className: classNames(styles$q.breadcrumbItem, className),
       ...isActive && { "aria-current": "page" },
       ...!asChild && { type: "button" },
       ...props,
@@ -648,52 +687,95 @@ function BreadcrumbItem({ children, className, isActive, asChild, ...props }) {
 function Breadcrumbs({
   className,
   children,
-  separator = /* @__PURE__ */ jsx(IconChevron, { className: styles$q.defaultSeparator })
+  separator = /* @__PURE__ */ jsx(IconChevron, { className: styles$r.defaultSeparator })
 }) {
   const childrenArray = Array.isArray(children) ? children : [children];
   const lastIndex = childrenArray.length - 1;
-  return /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", className, children: /* @__PURE__ */ jsx("ol", { className: styles$q.breadcrumbs, children: childrenArray.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("li", { className: styles$q.breadcrumbsItem, children: item }),
-    index < lastIndex && /* @__PURE__ */ jsx("li", { className: styles$q.breadcrumbsItem, "aria-hidden": "true", children: separator })
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", className, children: /* @__PURE__ */ jsx("ol", { className: styles$r.breadcrumbs, children: childrenArray.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("li", { className: styles$r.breadcrumbsItem, children: item }),
+    index < lastIndex && /* @__PURE__ */ jsx("li", { className: styles$r.breadcrumbsItem, "aria-hidden": "true", children: separator })
   ] }, index)) }) });
 }
 Breadcrumbs.Item = BreadcrumbItem;
 
 const button = "_button_cmbkj_2";
-const accent$1 = "_accent_cmbkj_11";
+const accent$2 = "_accent_cmbkj_11";
 const primary$1 = "_primary_cmbkj_12";
 const secondary$2 = "_secondary_cmbkj_30";
 const tertiary = "_tertiary_cmbkj_48";
 const line = "_line_cmbkj_49";
-const neutral$1 = "_neutral_cmbkj_78";
-const lg$4 = "_lg_cmbkj_145";
-const md$7 = "_md_cmbkj_153";
+const neutral$2 = "_neutral_cmbkj_78";
+const lg$5 = "_lg_cmbkj_145";
+const md$8 = "_md_cmbkj_153";
 const sm$3 = "_sm_cmbkj_161";
-const styles$o = {
+const styles$p = {
 	button: button,
-	accent: accent$1,
+	accent: accent$2,
 	primary: primary$1,
 	secondary: secondary$2,
 	tertiary: tertiary,
 	line: line,
+	neutral: neutral$2,
+	lg: lg$5,
+	md: md$8,
+	sm: sm$3
+};
+
+const buttonFunction = "_buttonFunction_o8iku_2";
+const accent$1 = "_accent_o8iku_10";
+const neutral$1 = "_neutral_o8iku_22";
+const lg$4 = "_lg_o8iku_41";
+const md$7 = "_md_o8iku_46";
+const styles$o = {
+	buttonFunction: buttonFunction,
+	accent: accent$1,
 	neutral: neutral$1,
 	lg: lg$4,
-	md: md$7,
-	sm: sm$3
+	md: md$7
 };
 
+function ButtonFunction({
+  children,
+  className,
+  color = "accent",
+  size = "lg",
+  asChild,
+  ...props
+}) {
+  const Component = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: classNames(styles$o.buttonFunction, styles$o[color], styles$o[size], className),
+      ...props.disabled && { "data-disabled": true },
+      ...!asChild && { type: "button" },
+      ...props,
+      children
+    }
+  );
+}
+
 function Button({
   children,
   className,
   color = "accent",
   size = "lg",
   mode = "primary",
-  as = "button",
+  asChild,
   ...props
 }) {
-  const commonClassNames = classNames(styles$o.button, styles$o[color], styles$o[size], styles$o[mode], className);
-  return as === "button" ? /* @__PURE__ */ jsx("button", { className: commonClassNames, type: "button", ...props, children }) : /* @__PURE__ */ jsx("a", { className: commonClassNames, ...props, children });
+  const Component = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: classNames(styles$p.button, styles$p[color], styles$p[size], styles$p[mode], className),
+      ...!asChild && { type: "button" },
+      ...props,
+      children
+    }
+  );
 }
+Button.Function = ButtonFunction;
 
 const checkboxWrapper = "_checkboxWrapper_k1shg_2";
 const icon$2 = "_icon_k1shg_23";

package/dist/style.css

@@ -702,6 +702,57 @@ textarea {
     }
   }
 }
+@layer ui_baza_components {
+  ._buttonFunction_o8iku_2 {
+    display: flex;
+    align-items: center;
+    gap: var(--space-md);
+    font-weight: var(--font-weight-bold);
+    cursor: pointer;
+    transition: color var(--transition-duration-default) ease-in-out;
+
+    &._accent_o8iku_10 {
+      color: var(--color-accent);
+
+      &:hover {
+        color: var(--color-accent-900);
+      }
+
+      &:active {
+        color: var(--color-accent-800);
+      }
+    }
+
+    &._neutral_o8iku_22 {
+      color: var(--color-neutral);
+
+      &:hover {
+        color: var(--color-neutral-920);
+      }
+
+      &:active {
+        color: var(--color-neutral-880);
+      }
+    }
+
+    &:disabled,
+    &[data-disabled='true'] {
+      color: var(--color-neutral-340);
+      cursor: default;
+      pointer-events: none;
+    }
+
+    &._lg_o8iku_41 {
+      font-size: var(--size-md);
+      line-height: var(--line-height-lg);
+    }
+
+    &._md_o8iku_46 {
+      font-size: var(--size-sm);
+      line-height: var(--line-height-md);
+    }
+  }
+}
 @layer ui_baza_components {
   ._checkboxWrapper_k1shg_2 {
     --checkbox-size: 24px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grandbazar/ui-baza",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "A lightweight and modular UI kit for building modern, accessible web interfaces. Designed for flexibility, scalability, and developer happiness.",
   "repository": {
     "type": "git",