@grandbazar/ui-baza 1.1.3 → 1.1.5

package/dist/index.cjs

@@ -27,38 +27,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 +71,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 +79,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,7 +598,7 @@ 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
@@ -629,7 +629,7 @@ function Slot({
 }
 
 const breadcrumbItem = "_breadcrumbItem_cua4v_2";
-const styles$p = {
+const styles$q = {
 	breadcrumbItem: breadcrumbItem
 };
 
@@ -640,7 +640,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,40 +652,74 @@ 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,
@@ -695,9 +729,10 @@ function Button({
   as = "button",
   ...props
 }) {
-  const commonClassNames = classNames(styles$o.button, styles$o[color], styles$o[size], styles$o[mode], className);
+  const commonClassNames = classNames(styles$p.button, styles$p[color], styles$p[size], styles$p[mode], className);
   return as === "button" ? /* @__PURE__ */ jsxRuntime.jsx("button", { className: commonClassNames, type: "button", ...props, children }) : /* @__PURE__ */ jsxRuntime.jsx("a", { className: commonClassNames, ...props, children });
 }
+Button.Function = ButtonFunction;
 
 const checkboxWrapper = "_checkboxWrapper_k1shg_2";
 const icon$2 = "_icon_k1shg_23";

package/dist/index.d.ts

@@ -83,12 +83,20 @@ export declare function Button(props: TButtonAsButtonProps): React.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.
@@ -515,6 +523,13 @@ declare type TButtonCommonProps = {
     mode?: TArrayElement<typeof BUTTON_MODES>;
 };
 
+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 TCalendarDay = {
@@ -717,16 +732,16 @@ declare type TTagProps = React.HTMLAttributes<HTMLDivElement> & {
     disabled?: boolean;
 };
 
-declare type TTextFieldAreaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+declare type TTextFieldAreaProps = TWithRef<React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
     isInvalid?: boolean;
     floatingLabel?: string;
     floatingLabelSuffix?: string;
-};
+}, HTMLTextAreaElement>;
 
-declare type TTextFieldInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+declare type TTextFieldInputProps = TWithRef<React.InputHTMLAttributes<HTMLInputElement> & {
     isInvalid?: boolean;
     floatingLabel?: string;
-};
+}, HTMLInputElement>;
 
 declare type TTextFieldLabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & {
     isRequired?: boolean;
@@ -736,6 +751,10 @@ declare type TTextFieldRootProps = React.HTMLAttributes<HTMLDivElement> & {
     size?: TArrayElement<typeof TEXT_FIELD_SIZES>;
 };
 
+declare type TWithRef<TProps, TElement = HTMLElement> = TProps & {
+    ref?: React.Ref<TElement>;
+};
+
 /**
  * Manages month and year navigation state for DatePicker.
  * Provides navigation handlers and current month/year values.

package/dist/index.js

@@ -23,38 +23,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 +67,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 +75,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,7 +594,7 @@ 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
@@ -625,7 +625,7 @@ function Slot({
 }
 
 const breadcrumbItem = "_breadcrumbItem_cua4v_2";
-const styles$p = {
+const styles$q = {
 	breadcrumbItem: breadcrumbItem
 };
 
@@ -636,7 +636,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,40 +648,74 @@ 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,
@@ -691,9 +725,10 @@ function Button({
   as = "button",
   ...props
 }) {
-  const commonClassNames = classNames(styles$o.button, styles$o[color], styles$o[size], styles$o[mode], className);
+  const commonClassNames = classNames(styles$p.button, styles$p[color], styles$p[size], styles$p[mode], className);
   return as === "button" ? /* @__PURE__ */ jsx("button", { className: commonClassNames, type: "button", ...props, children }) : /* @__PURE__ */ jsx("a", { className: commonClassNames, ...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.3",
+  "version": "1.1.5",
   "description": "A lightweight and modular UI kit for building modern, accessible web interfaces. Designed for flexibility, scalability, and developer happiness.",
   "repository": {
     "type": "git",