@grandbazar/ui-baza 1.5.4 → 1.6.0

package/dist/index.cjs

@@ -51,35 +51,56 @@ function omit(object, ...keys) {
   return Object.fromEntries(filteredEntries);
 }
 
-const badge = "_badge_1s8y9_2";
-const primary$4 = "_primary_1s8y9_9";
-const secondary$5 = "_secondary_1s8y9_13";
-const accent$4 = "_accent_1s8y9_18";
-const violet = "_violet_1s8y9_23";
-const pink = "_pink_1s8y9_28";
-const red$1 = "_red_1s8y9_33";
-const orange = "_orange_1s8y9_38";
-const green = "_green_1s8y9_43";
-const neutral$3 = "_neutral_1s8y9_48";
-const lg$7 = "_lg_1s8y9_53";
-const md$a = "_md_1s8y9_60";
+const badge = "_badge_x6ia4_2";
+const primary$4 = "_primary_x6ia4_9";
+const secondary$5 = "_secondary_x6ia4_13";
+const glass$1 = "_glass_x6ia4_18";
+const accent$5 = "_accent_x6ia4_23";
+const violet = "_violet_x6ia4_28";
+const pink = "_pink_x6ia4_33";
+const red$1 = "_red_x6ia4_38";
+const orange = "_orange_x6ia4_43";
+const green$1 = "_green_x6ia4_48";
+const neutral$3 = "_neutral_x6ia4_54";
+const lg$7 = "_lg_x6ia4_59";
+const md$a = "_md_x6ia4_66";
+const sm$5 = "_sm_x6ia4_73";
+const pill$2 = "_pill_x6ia4_80";
 const styles$E = {
 	badge: badge,
 	primary: primary$4,
 	secondary: secondary$5,
-	accent: accent$4,
+	glass: glass$1,
+	accent: accent$5,
 	violet: violet,
 	pink: pink,
 	red: red$1,
 	orange: orange,
-	green: green,
+	green: green$1,
 	neutral: neutral$3,
 	lg: lg$7,
-	md: md$a
+	md: md$a,
+	sm: sm$5,
+	pill: pill$2
 };
 
-function Badge({ children, className, size = "lg", color = "accent", mode = "primary", ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames(styles$E.badge, styles$E[size], styles$E[color], styles$E[mode], className), ...props, children });
+function Badge({
+  children,
+  className,
+  size = "lg",
+  color = "accent",
+  mode = "primary",
+  shape = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classNames(styles$E.badge, styles$E[size], styles$E[color], styles$E[mode], styles$E[shape], className),
+      ...props,
+      children
+    }
+  );
 }
 
 const badgeTabsItem = "_badgeTabsItem_10lit_2";
@@ -1290,37 +1311,48 @@ function Breadcrumbs({
 }
 Breadcrumbs.Item = BreadcrumbItem;
 
-const button = "_button_1waqk_2";
-const accent$3 = "_accent_1waqk_11";
-const primary$2 = "_primary_1waqk_12";
-const secondary$3 = "_secondary_1waqk_30";
-const tertiary = "_tertiary_1waqk_48";
-const line = "_line_1waqk_49";
-const neutral$2 = "_neutral_1waqk_78";
-const lg$6 = "_lg_1waqk_145";
-const md$9 = "_md_1waqk_153";
-const sm$4 = "_sm_1waqk_161";
+const button = "_button_11nu9_2";
+const accent$4 = "_accent_11nu9_12";
+const primary$2 = "_primary_11nu9_13";
+const secondary$3 = "_secondary_11nu9_31";
+const tertiary = "_tertiary_11nu9_49";
+const line = "_line_11nu9_50";
+const neutral$2 = "_neutral_11nu9_79";
+const white$1 = "_white_11nu9_146";
+const lg$6 = "_lg_11nu9_213";
+const md$9 = "_md_11nu9_222";
+const sm$4 = "_sm_11nu9_240";
+const pill$1 = "_pill_11nu9_249";
+const circle = "_circle_11nu9_250";
+const square = "_square_11nu9_255";
+const elevated = "_elevated_11nu9_266";
 const styles$z = {
 	button: button,
-	accent: accent$3,
+	accent: accent$4,
 	primary: primary$2,
 	secondary: secondary$3,
 	tertiary: tertiary,
 	line: line,
 	neutral: neutral$2,
+	white: white$1,
 	lg: lg$6,
 	md: md$9,
-	sm: sm$4
+	"md-sm": "_md-sm_11nu9_231",
+	sm: sm$4,
+	pill: pill$1,
+	circle: circle,
+	square: square,
+	elevated: elevated
 };
 
 const buttonFunction = "_buttonFunction_o8iku_2";
-const accent$2 = "_accent_o8iku_10";
+const accent$3 = "_accent_o8iku_10";
 const neutral$1 = "_neutral_o8iku_22";
 const lg$5 = "_lg_o8iku_41";
 const md$8 = "_md_o8iku_46";
 const styles$y = {
 	buttonFunction: buttonFunction,
-	accent: accent$2,
+	accent: accent$3,
 	neutral: neutral$1,
 	lg: lg$5,
 	md: md$8
@@ -1353,6 +1385,8 @@ function Button({
   color = "accent",
   size = "lg",
   mode = "primary",
+  shape = "default",
+  elevated,
   asChild,
   ...props
 }) {
@@ -1360,7 +1394,15 @@ function Button({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Component,
     {
-      className: classNames(styles$z.button, styles$z[color], styles$z[size], styles$z[mode], className),
+      className: classNames(
+        styles$z.button,
+        styles$z[color],
+        styles$z[size],
+        styles$z[mode],
+        styles$z[shape],
+        elevated ? styles$z.elevated : void 0,
+        className
+      ),
       ...!asChild && { type: "button" },
       ...props,
       children
@@ -1370,11 +1412,11 @@ function Button({
 Button.Function = ButtonFunction;
 
 const checkboxWrapper = "_checkboxWrapper_k1shg_2";
-const icon$2 = "_icon_k1shg_23";
+const icon$3 = "_icon_k1shg_23";
 const checkbox = "_checkbox_k1shg_2";
 const styles$x = {
 	checkboxWrapper: checkboxWrapper,
-	icon: icon$2,
+	icon: icon$3,
 	checkbox: checkbox
 };
 
@@ -1396,21 +1438,48 @@ function Checkbox({ className, label, indeterminate, ...props }) {
   );
 }
 
-const chip = "_chip_dj4kw_2";
+const chip = "_chip_nge5j_2";
+const glass = "_glass_nge5j_36";
+const pill = "_pill_nge5j_59";
+const icon$2 = "_icon_nge5j_63";
 const styles$w = {
-	chip: chip
+	chip: chip,
+	glass: glass,
+	pill: pill,
+	icon: icon$2
 };
 
-function Chip({ isSelected, children, className, disabled, ...props }) {
+function prependToChild(child, node) {
+  if (!node || !React.isValidElement(child)) {
+    return child;
+  }
+  return React.cloneElement(child, void 0, node, child.props.children);
+}
+function Chip({
+  isSelected,
+  children,
+  className,
+  disabled,
+  icon,
+  shape = "default",
+  mode = "default",
+  asChild,
+  ...props
+}) {
+  const Component = asChild ? Slot : "div";
+  const iconElement = icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$w.icon, "aria-hidden": "true", children: icon }) : void 0;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    Component,
     {
-      className: classNames(styles$w.chip, className),
+      className: classNames(styles$w.chip, styles$w[shape], styles$w[mode], className),
       "data-selected": isSelected,
       "data-disabled": disabled,
       "aria-disabled": disabled,
       ...props,
-      children
+      children: asChild ? prependToChild(children, iconElement) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        iconElement,
+        children
+      ] })
     }
   );
 }
@@ -1419,7 +1488,7 @@ const root$1 = "_root_ww0fb_2";
 const lg$4 = "_lg_ww0fb_16";
 const md$7 = "_md_ww0fb_24";
 const red = "_red_ww0fb_32";
-const accent$1 = "_accent_ww0fb_37";
+const accent$2 = "_accent_ww0fb_37";
 const neutral = "_neutral_ww0fb_42";
 const secondary$2 = "_secondary_ww0fb_47";
 const white = "_white_ww0fb_52";
@@ -1428,7 +1497,7 @@ const styles$v = {
 	lg: lg$4,
 	md: md$7,
 	red: red,
-	accent: accent$1,
+	accent: accent$2,
 	neutral: neutral,
 	secondary: secondary$2,
 	white: white
@@ -2353,7 +2422,7 @@ DropdownMenu.Item = DropdownItem;
 DropdownMenu.Portal = DropdownPortal;
 
 const notificationInline = "_notificationInline_1kerp_2";
-const accent = "_accent_1kerp_10";
+const accent$1 = "_accent_1kerp_10";
 const negative = "_negative_1kerp_16";
 const positive = "_positive_1kerp_22";
 const warning = "_warning_1kerp_28";
@@ -2369,7 +2438,7 @@ const description = "_description_1kerp_100";
 const actions = "_actions_1kerp_108";
 const styles$o = {
 	notificationInline: notificationInline,
-	accent: accent,
+	accent: accent$1,
 	negative: negative,
 	positive: positive,
 	warning: warning,
@@ -2545,26 +2614,33 @@ function Pagination(props) {
 }
 Pagination.Item = PaginationItem;
 
-const root = "_root_33gbh_2";
-const segment = "_segment_33gbh_10";
-const flexGrow = "_flexGrow_33gbh_19";
-const fill$1 = "_fill_33gbh_23";
-const trail = "_trail_33gbh_28";
-const sm$2 = "_sm_33gbh_32";
-const md$5 = "_md_33gbh_36";
+const root = "_root_1lyc4_2";
+const segment = "_segment_1lyc4_10";
+const flexGrow = "_flexGrow_1lyc4_19";
+const fill$1 = "_fill_1lyc4_23";
+const trail = "_trail_1lyc4_28";
+const xs = "_xs_1lyc4_32";
+const sm$2 = "_sm_1lyc4_36";
+const md$5 = "_md_1lyc4_40";
+const accent = "_accent_1lyc4_44";
+const green = "_green_1lyc4_48";
 const styles$l = {
 	root: root,
 	segment: segment,
 	flexGrow: flexGrow,
 	fill: fill$1,
 	trail: trail,
+	xs: xs,
 	sm: sm$2,
-	md: md$5
+	md: md$5,
+	accent: accent,
+	green: green
 };
 
 function ProgressBarLinear({
   className,
   size = "md",
+  color = "accent",
   percent,
   showFillOnZero,
   ...props
@@ -2573,7 +2649,7 @@ function ProgressBarLinear({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: classNames(styles$l.root, styles$l[size], className),
+      className: classNames(styles$l.root, styles$l[size], styles$l[color], className),
       role: "progressbar",
       "aria-valuenow": clampedPercent,
       "aria-valuemin": 0,
@@ -2601,6 +2677,7 @@ function ProgressBarLinear({
 function ProgressBarSteps({
   className,
   size = "md",
+  color = "accent",
   currentStep,
   totalSteps,
   ...props
@@ -2621,7 +2698,7 @@ function ProgressBarSteps({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: classNames(styles$l.root, styles$l[size], className),
+      className: classNames(styles$l.root, styles$l[size], styles$l[color], className),
       role: "progressbar",
       "aria-valuenow": clampedCurrent,
       "aria-valuemin": 0,

package/dist/index.d.ts

@@ -10,17 +10,20 @@ import { SetStateAction } from 'react';
  * Badge displays a label or indicator with customizable color and size.
  * Supports multiple color schemes and display modes for different contexts.
  *
- * @param size - Size of the badge (lg, md)
- * @param color - Color scheme (accent, violet, pink, red, orange, green, neutral)
- * @param mode - Display mode (primary, secondary)
+ * @param size - Size of the badge (lg, md, sm)
+ * @param color - Color scheme (accent, violet, pink, red, orange, green, neutral); ignored in glass mode
+ * @param mode - Display mode (primary, secondary, glass); glass is a translucent white badge for colored backgrounds
+ * @param shape - Corner shape (default, pill); pill rounds the corners fully without changing paddings
  */
-export declare function Badge({ children, className, size, color, mode, ...props }: TBadgeProps): JSX.Element;
+export declare function Badge({ children, className, size, color, mode, shape, ...props }: TBadgeProps): JSX.Element;
 
 declare const BADGE_COLORS: readonly ["accent", "violet", "pink", "red", "orange", "green", "neutral"];
 
-declare const BADGE_MODES: readonly ["primary", "secondary"];
+declare const BADGE_MODES: readonly ["primary", "secondary", "glass"];
 
-declare const BADGE_SIZES: readonly ["lg", "md"];
+declare const BADGE_SHAPES: readonly ["default", "pill"];
+
+declare const BADGE_SIZES: readonly ["lg", "md", "sm"];
 
 declare const BADGE_TABS_ITEM_MODES: readonly ["primary", "secondary"];
 
@@ -74,25 +77,31 @@ export declare namespace Breadcrumbs {
  * 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 color - Color variant of the button (accent, neutral, white); white is an inverted variant for colored backgrounds
+ * @param size - Size of the button (lg, md, sm, md-sm); md-sm is 40px high
  * @param mode - Visual mode of the button (primary, secondary, tertiary, line)
+ * @param shape - Corner shape (default, pill, circle, square); circle and square render a square icon button as wide as the size is high
+ * @param elevated - Whether to cast a floating shadow, e.g. for a button over an image
  * @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({ children, className, color, size, mode, asChild, ...props }: TButtonPropsWithAsChild): JSX.Element;
+export declare function Button({ children, className, color, size, mode, shape, elevated, asChild, ...props }: TButtonPropsWithAsChild): JSX.Element;
 
 export declare namespace Button {
     var Function: typeof ButtonFunction;
 }
 
-declare const BUTTON_COLORS: readonly ["accent", "neutral"];
+declare const BUTTON_COLORS: readonly ["accent", "neutral", "white"];
+
+declare const BUTTON_FUNCTION_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 const BUTTON_SHAPES: readonly ["default", "pill", "circle", "square"];
+
+declare const BUTTON_SIZES: readonly ["lg", "md", "sm", "md-sm"];
 
 declare function ButtonFunction({ children, className, color, size, asChild, ...props }: TButtonFunctionProps): JSX.Element;
 
@@ -111,13 +120,22 @@ export declare function Checkbox({ className, label, indeterminate, ...props }:
 /**
  * Chip renders a compact, selectable tag element.
  * Supports selected and disabled states for interactive filtering and selection.
+ * Supports the asChild pattern for polymorphic rendering via Slot, e.g. to render the chip as a link.
  *
  * @param isSelected - Whether the chip is in selected state
  * @param disabled - Whether the chip is disabled
+ * @param icon - Leading icon; inherits the text color, accent while the chip is not selected
+ * @param shape - Corner shape (default, pill)
+ * @param mode - Visual mode (default, glass); glass is a translucent white chip for colored backgrounds
+ * @param asChild - When true, merges props onto the child element instead of rendering a div
  * @param className - Additional CSS classes
  * @param children - Content to display inside the chip
  */
-export declare function Chip({ isSelected, children, className, disabled, ...props }: TChipProps): JSX.Element;
+export declare function Chip({ isSelected, children, className, disabled, icon, shape, mode, asChild, ...props }: TChipProps): JSX.Element;
+
+declare const CHIP_MODES: readonly ["default", "glass"];
+
+declare const CHIP_SHAPES: readonly ["default", "pill"];
 
 export declare function Counter({ className, size, color, ...props }: TCounterProps): JSX.Element;
 
@@ -476,13 +494,16 @@ declare function PaginationItem({ className, children, size, isCurrent, ...props
 
 declare function PaginationRoot({ totalPages, currentPage, size, maxVisiblePages, showArrows, className, onPageChange, renderItem: PaginationItem, renderIconChevron: IconChevron, renderEllipsis: Ellipsis, ...props }: TPaginationRootProps): JSX.Element;
 
-declare const PROGRESS_BAR_SIZES: readonly ["sm", "md"];
+declare const PROGRESS_BAR_COLORS: readonly ["accent", "green"];
+
+declare const PROGRESS_BAR_SIZES: readonly ["sm", "md", "xs"];
 
 /**
  * ProgressBar is a compound component for displaying progress indicators.
  * Provides flexible building blocks for linear and step-based progress visualization.
  *
- * @param size - Size variant of the progress bar (sm, md)
+ * @param size - Size variant of the progress bar (sm, md, xs)
+ * @param color - Fill color (accent, green); the track stays the same
  * @param percent - Progress percentage (0-100)
  * @param showFillOnZero - Whether to render the fill segment at 0%
  * @param className - Additional CSS classes
@@ -498,9 +519,9 @@ export declare namespace ProgressBar {
     var Steps: typeof ProgressBarSteps;
 }
 
-declare function ProgressBarLinear({ className, size, percent, showFillOnZero, ...props }: TProgressBarLinearProps): JSX.Element;
+declare function ProgressBarLinear({ className, size, color, percent, showFillOnZero, ...props }: TProgressBarLinearProps): JSX.Element;
 
-declare function ProgressBarSteps({ className, size, currentStep, totalSteps, ...props }: TProgressBarStepsProps): JSX.Element;
+declare function ProgressBarSteps({ className, size, color, currentStep, totalSteps, ...props }: TProgressBarStepsProps): JSX.Element;
 
 /**
  * RadioButton renders a radio input with label and visual indicator.
@@ -735,6 +756,7 @@ declare type TBadgeProps = React.HTMLAttributes<HTMLDivElement> & {
     size?: TArrayElement<typeof BADGE_SIZES>;
     color?: TArrayElement<typeof BADGE_COLORS>;
     mode?: TArrayElement<typeof BADGE_MODES>;
+    shape?: TArrayElement<typeof BADGE_SHAPES>;
 };
 
 declare type TBadgeTabsItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -763,11 +785,13 @@ declare type TButtonCommonProps = {
     color?: TArrayElement<typeof BUTTON_COLORS>;
     size?: TArrayElement<typeof BUTTON_SIZES>;
     mode?: TArrayElement<typeof BUTTON_MODES>;
+    shape?: TArrayElement<typeof BUTTON_SHAPES>;
+    elevated?: boolean;
     className?: string;
 };
 
 declare type TButtonFunctionProps = TAsChildProps<React.ButtonHTMLAttributes<HTMLButtonElement>> & {
-    color?: TArrayElement<typeof BUTTON_COLORS>;
+    color?: TArrayElement<typeof BUTTON_FUNCTION_COLORS>;
     size?: TArrayElement<typeof BUTTON_FUNCTION_SIZES>;
     className?: string;
     disabled?: boolean;
@@ -792,9 +816,13 @@ declare type TCheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
     ref?: React.RefObject<HTMLInputElement | null>;
 };
 
-declare type TChipProps = React.HTMLAttributes<HTMLDivElement> & {
+declare type TChipProps = TAsChildProps<React.HTMLAttributes<HTMLDivElement>> & {
     isSelected?: boolean;
     disabled?: boolean;
+    icon?: React.ReactNode;
+    shape?: TArrayElement<typeof CHIP_SHAPES>;
+    mode?: TArrayElement<typeof CHIP_MODES>;
+    className?: string;
 };
 
 declare type TCounterProps = React.HTMLAttributes<HTMLDivElement> & {
@@ -957,12 +985,14 @@ declare type TPortalPlacement = {
 
 declare type TProgressBarLinearProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
     size?: TArrayElement<typeof PROGRESS_BAR_SIZES>;
+    color?: TArrayElement<typeof PROGRESS_BAR_COLORS>;
     percent: number;
     showFillOnZero?: boolean;
 };
 
 declare type TProgressBarStepsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
     size?: TArrayElement<typeof PROGRESS_BAR_SIZES>;
+    color?: TArrayElement<typeof PROGRESS_BAR_COLORS>;
     currentStep: number;
     totalSteps: number;
 };

package/dist/index.js

@@ -47,35 +47,56 @@ function omit(object, ...keys) {
   return Object.fromEntries(filteredEntries);
 }
 
-const badge = "_badge_1s8y9_2";
-const primary$4 = "_primary_1s8y9_9";
-const secondary$5 = "_secondary_1s8y9_13";
-const accent$4 = "_accent_1s8y9_18";
-const violet = "_violet_1s8y9_23";
-const pink = "_pink_1s8y9_28";
-const red$1 = "_red_1s8y9_33";
-const orange = "_orange_1s8y9_38";
-const green = "_green_1s8y9_43";
-const neutral$3 = "_neutral_1s8y9_48";
-const lg$7 = "_lg_1s8y9_53";
-const md$a = "_md_1s8y9_60";
+const badge = "_badge_x6ia4_2";
+const primary$4 = "_primary_x6ia4_9";
+const secondary$5 = "_secondary_x6ia4_13";
+const glass$1 = "_glass_x6ia4_18";
+const accent$5 = "_accent_x6ia4_23";
+const violet = "_violet_x6ia4_28";
+const pink = "_pink_x6ia4_33";
+const red$1 = "_red_x6ia4_38";
+const orange = "_orange_x6ia4_43";
+const green$1 = "_green_x6ia4_48";
+const neutral$3 = "_neutral_x6ia4_54";
+const lg$7 = "_lg_x6ia4_59";
+const md$a = "_md_x6ia4_66";
+const sm$5 = "_sm_x6ia4_73";
+const pill$2 = "_pill_x6ia4_80";
 const styles$E = {
 	badge: badge,
 	primary: primary$4,
 	secondary: secondary$5,
-	accent: accent$4,
+	glass: glass$1,
+	accent: accent$5,
 	violet: violet,
 	pink: pink,
 	red: red$1,
 	orange: orange,
-	green: green,
+	green: green$1,
 	neutral: neutral$3,
 	lg: lg$7,
-	md: md$a
+	md: md$a,
+	sm: sm$5,
+	pill: pill$2
 };
 
-function Badge({ children, className, size = "lg", color = "accent", mode = "primary", ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: classNames(styles$E.badge, styles$E[size], styles$E[color], styles$E[mode], className), ...props, children });
+function Badge({
+  children,
+  className,
+  size = "lg",
+  color = "accent",
+  mode = "primary",
+  shape = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames(styles$E.badge, styles$E[size], styles$E[color], styles$E[mode], styles$E[shape], className),
+      ...props,
+      children
+    }
+  );
 }
 
 const badgeTabsItem = "_badgeTabsItem_10lit_2";
@@ -1286,37 +1307,48 @@ function Breadcrumbs({
 }
 Breadcrumbs.Item = BreadcrumbItem;
 
-const button = "_button_1waqk_2";
-const accent$3 = "_accent_1waqk_11";
-const primary$2 = "_primary_1waqk_12";
-const secondary$3 = "_secondary_1waqk_30";
-const tertiary = "_tertiary_1waqk_48";
-const line = "_line_1waqk_49";
-const neutral$2 = "_neutral_1waqk_78";
-const lg$6 = "_lg_1waqk_145";
-const md$9 = "_md_1waqk_153";
-const sm$4 = "_sm_1waqk_161";
+const button = "_button_11nu9_2";
+const accent$4 = "_accent_11nu9_12";
+const primary$2 = "_primary_11nu9_13";
+const secondary$3 = "_secondary_11nu9_31";
+const tertiary = "_tertiary_11nu9_49";
+const line = "_line_11nu9_50";
+const neutral$2 = "_neutral_11nu9_79";
+const white$1 = "_white_11nu9_146";
+const lg$6 = "_lg_11nu9_213";
+const md$9 = "_md_11nu9_222";
+const sm$4 = "_sm_11nu9_240";
+const pill$1 = "_pill_11nu9_249";
+const circle = "_circle_11nu9_250";
+const square = "_square_11nu9_255";
+const elevated = "_elevated_11nu9_266";
 const styles$z = {
 	button: button,
-	accent: accent$3,
+	accent: accent$4,
 	primary: primary$2,
 	secondary: secondary$3,
 	tertiary: tertiary,
 	line: line,
 	neutral: neutral$2,
+	white: white$1,
 	lg: lg$6,
 	md: md$9,
-	sm: sm$4
+	"md-sm": "_md-sm_11nu9_231",
+	sm: sm$4,
+	pill: pill$1,
+	circle: circle,
+	square: square,
+	elevated: elevated
 };
 
 const buttonFunction = "_buttonFunction_o8iku_2";
-const accent$2 = "_accent_o8iku_10";
+const accent$3 = "_accent_o8iku_10";
 const neutral$1 = "_neutral_o8iku_22";
 const lg$5 = "_lg_o8iku_41";
 const md$8 = "_md_o8iku_46";
 const styles$y = {
 	buttonFunction: buttonFunction,
-	accent: accent$2,
+	accent: accent$3,
 	neutral: neutral$1,
 	lg: lg$5,
 	md: md$8
@@ -1349,6 +1381,8 @@ function Button({
   color = "accent",
   size = "lg",
   mode = "primary",
+  shape = "default",
+  elevated,
   asChild,
   ...props
 }) {
@@ -1356,7 +1390,15 @@ function Button({
   return /* @__PURE__ */ jsx(
     Component,
     {
-      className: classNames(styles$z.button, styles$z[color], styles$z[size], styles$z[mode], className),
+      className: classNames(
+        styles$z.button,
+        styles$z[color],
+        styles$z[size],
+        styles$z[mode],
+        styles$z[shape],
+        elevated ? styles$z.elevated : void 0,
+        className
+      ),
       ...!asChild && { type: "button" },
       ...props,
       children
@@ -1366,11 +1408,11 @@ function Button({
 Button.Function = ButtonFunction;
 
 const checkboxWrapper = "_checkboxWrapper_k1shg_2";
-const icon$2 = "_icon_k1shg_23";
+const icon$3 = "_icon_k1shg_23";
 const checkbox = "_checkbox_k1shg_2";
 const styles$x = {
 	checkboxWrapper: checkboxWrapper,
-	icon: icon$2,
+	icon: icon$3,
 	checkbox: checkbox
 };
 
@@ -1392,21 +1434,48 @@ function Checkbox({ className, label, indeterminate, ...props }) {
   );
 }
 
-const chip = "_chip_dj4kw_2";
+const chip = "_chip_nge5j_2";
+const glass = "_glass_nge5j_36";
+const pill = "_pill_nge5j_59";
+const icon$2 = "_icon_nge5j_63";
 const styles$w = {
-	chip: chip
+	chip: chip,
+	glass: glass,
+	pill: pill,
+	icon: icon$2
 };
 
-function Chip({ isSelected, children, className, disabled, ...props }) {
+function prependToChild(child, node) {
+  if (!node || !isValidElement(child)) {
+    return child;
+  }
+  return cloneElement(child, void 0, node, child.props.children);
+}
+function Chip({
+  isSelected,
+  children,
+  className,
+  disabled,
+  icon,
+  shape = "default",
+  mode = "default",
+  asChild,
+  ...props
+}) {
+  const Component = asChild ? Slot : "div";
+  const iconElement = icon ? /* @__PURE__ */ jsx("span", { className: styles$w.icon, "aria-hidden": "true", children: icon }) : void 0;
   return /* @__PURE__ */ jsx(
-    "div",
+    Component,
     {
-      className: classNames(styles$w.chip, className),
+      className: classNames(styles$w.chip, styles$w[shape], styles$w[mode], className),
       "data-selected": isSelected,
       "data-disabled": disabled,
       "aria-disabled": disabled,
       ...props,
-      children
+      children: asChild ? prependToChild(children, iconElement) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        iconElement,
+        children
+      ] })
     }
   );
 }
@@ -1415,7 +1484,7 @@ const root$1 = "_root_ww0fb_2";
 const lg$4 = "_lg_ww0fb_16";
 const md$7 = "_md_ww0fb_24";
 const red = "_red_ww0fb_32";
-const accent$1 = "_accent_ww0fb_37";
+const accent$2 = "_accent_ww0fb_37";
 const neutral = "_neutral_ww0fb_42";
 const secondary$2 = "_secondary_ww0fb_47";
 const white = "_white_ww0fb_52";
@@ -1424,7 +1493,7 @@ const styles$v = {
 	lg: lg$4,
 	md: md$7,
 	red: red,
-	accent: accent$1,
+	accent: accent$2,
 	neutral: neutral,
 	secondary: secondary$2,
 	white: white
@@ -2349,7 +2418,7 @@ DropdownMenu.Item = DropdownItem;
 DropdownMenu.Portal = DropdownPortal;
 
 const notificationInline = "_notificationInline_1kerp_2";
-const accent = "_accent_1kerp_10";
+const accent$1 = "_accent_1kerp_10";
 const negative = "_negative_1kerp_16";
 const positive = "_positive_1kerp_22";
 const warning = "_warning_1kerp_28";
@@ -2365,7 +2434,7 @@ const description = "_description_1kerp_100";
 const actions = "_actions_1kerp_108";
 const styles$o = {
 	notificationInline: notificationInline,
-	accent: accent,
+	accent: accent$1,
 	negative: negative,
 	positive: positive,
 	warning: warning,
@@ -2541,26 +2610,33 @@ function Pagination(props) {
 }
 Pagination.Item = PaginationItem;
 
-const root = "_root_33gbh_2";
-const segment = "_segment_33gbh_10";
-const flexGrow = "_flexGrow_33gbh_19";
-const fill$1 = "_fill_33gbh_23";
-const trail = "_trail_33gbh_28";
-const sm$2 = "_sm_33gbh_32";
-const md$5 = "_md_33gbh_36";
+const root = "_root_1lyc4_2";
+const segment = "_segment_1lyc4_10";
+const flexGrow = "_flexGrow_1lyc4_19";
+const fill$1 = "_fill_1lyc4_23";
+const trail = "_trail_1lyc4_28";
+const xs = "_xs_1lyc4_32";
+const sm$2 = "_sm_1lyc4_36";
+const md$5 = "_md_1lyc4_40";
+const accent = "_accent_1lyc4_44";
+const green = "_green_1lyc4_48";
 const styles$l = {
 	root: root,
 	segment: segment,
 	flexGrow: flexGrow,
 	fill: fill$1,
 	trail: trail,
+	xs: xs,
 	sm: sm$2,
-	md: md$5
+	md: md$5,
+	accent: accent,
+	green: green
 };
 
 function ProgressBarLinear({
   className,
   size = "md",
+  color = "accent",
   percent,
   showFillOnZero,
   ...props
@@ -2569,7 +2645,7 @@ function ProgressBarLinear({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames(styles$l.root, styles$l[size], className),
+      className: classNames(styles$l.root, styles$l[size], styles$l[color], className),
       role: "progressbar",
       "aria-valuenow": clampedPercent,
       "aria-valuemin": 0,
@@ -2597,6 +2673,7 @@ function ProgressBarLinear({
 function ProgressBarSteps({
   className,
   size = "md",
+  color = "accent",
   currentStep,
   totalSteps,
   ...props
@@ -2617,7 +2694,7 @@ function ProgressBarSteps({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: classNames(styles$l.root, styles$l[size], className),
+      className: classNames(styles$l.root, styles$l[size], styles$l[color], className),
       role: "progressbar",
       "aria-valuenow": clampedCurrent,
       "aria-valuemin": 0,

package/dist/style.css

@@ -251,6 +251,12 @@ textarea {
     --color-white: #ffffff;
     --color-transparent: transparent;
 
+    --color-white-alpha-500: color-mix(in srgb, var(--color-white) 50%, var(--color-transparent));
+    --color-white-alpha-400: color-mix(in srgb, var(--color-white) 40%, var(--color-transparent));
+    --color-white-alpha-300: color-mix(in srgb, var(--color-white) 30%, var(--color-transparent));
+    --color-white-alpha-200: color-mix(in srgb, var(--color-white) 20%, var(--color-transparent));
+    --color-white-alpha-100: color-mix(in srgb, var(--color-white) 10%, var(--color-transparent));
+
     --color-neutral: #111217;
     --color-neutral-920: color-mix(in srgb, var(--color-neutral) 92.1%, var(--color-white) 7.9%);
     --color-neutral-880: color-mix(in srgb, var(--color-neutral) 87.8%, var(--color-white) 12.2%);
@@ -292,6 +298,7 @@ textarea {
     --color-orange-alpha-100: color-mix(in srgb, var(--color-orange) 10%, var(--color-transparent));
 
     --color-green: #00d06f;
+    --color-green-900: color-mix(in srgb, var(--color-green) 55%, var(--color-neutral));
     --color-green-alpha-500: color-mix(in srgb, var(--color-green) 50%, var(--color-transparent));
     --color-green-alpha-100: color-mix(in srgb, var(--color-green) 10%, var(--color-transparent));
 
@@ -350,6 +357,12 @@ textarea {
     --font-weight-medium: 500;
     --font-weight-bold: 600;
 
+    --shadow-card:
+      0 1px 2px color-mix(in srgb, var(--color-neutral) 4%, var(--color-transparent)),
+      0 8px 24px color-mix(in srgb, var(--color-neutral) 6%, var(--color-transparent));
+    --shadow-floating-button: 0 4px 14px color-mix(in srgb, var(--color-neutral) 16%, var(--color-transparent));
+    --shadow-capsule: 0 6px 20px color-mix(in srgb, var(--color-neutral) 10%, var(--color-transparent));
+
     --transition-duration-default: 0.15s;
 
     --aspect-ratio-square: 1 / 1;
@@ -358,70 +371,87 @@ textarea {
   }
 }
 @layer ui_baza_components {
-  ._badge_1s8y9_2 {
+  ._badge_x6ia4_2 {
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--color-white);
     font-weight: var(--font-weight-bold);
 
-    &._primary_1s8y9_9 {
+    &._primary_x6ia4_9 {
       background-color: var(--badge-color);
     }
 
-    &._secondary_1s8y9_13 {
+    &._secondary_x6ia4_13 {
       background-color: var(--badge-color-alpha);
-      color: var(--badge-color);
+      color: var(--badge-color-on-alpha, var(--badge-color));
+    }
+
+    &._glass_x6ia4_18 {
+      background-color: var(--color-white-alpha-200);
+      color: var(--color-white);
     }
 
-    &._accent_1s8y9_18 {
+    &._accent_x6ia4_23 {
       --badge-color: var(--color-accent);
       --badge-color-alpha: var(--color-accent-alpha-100);
     }
 
-    &._violet_1s8y9_23 {
+    &._violet_x6ia4_28 {
       --badge-color: var(--color-violet);
       --badge-color-alpha: var(--color-violet-alpha-100);
     }
 
-    &._pink_1s8y9_28 {
+    &._pink_x6ia4_33 {
       --badge-color: var(--color-pink);
       --badge-color-alpha: var(--color-pink-alpha-100);
     }
 
-    &._red_1s8y9_33 {
+    &._red_x6ia4_38 {
       --badge-color: var(--color-red);
       --badge-color-alpha: var(--color-red-alpha-100);
     }
 
-    &._orange_1s8y9_38 {
+    &._orange_x6ia4_43 {
       --badge-color: var(--color-orange);
       --badge-color-alpha: var(--color-orange-alpha-100);
     }
 
-    &._green_1s8y9_43 {
+    &._green_x6ia4_48 {
       --badge-color: var(--color-green);
       --badge-color-alpha: var(--color-green-alpha-100);
+      --badge-color-on-alpha: var(--color-green-900);
     }
 
-    &._neutral_1s8y9_48 {
+    &._neutral_x6ia4_54 {
       --badge-color: var(--color-neutral);
       --badge-color-alpha: var(--color-neutral-alpha-60);
     }
 
-    &._lg_1s8y9_53 {
+    &._lg_x6ia4_59 {
       padding: var(--space-sm);
       border-radius: var(--radius-md);
       font-size: var(--size-sm);
       line-height: var(--line-height-md);
     }
 
-    &._md_1s8y9_60 {
+    &._md_x6ia4_66 {
       padding: var(--space-xs);
       border-radius: var(--radius-sm);
       font-size: var(--size-xs);
       line-height: var(--line-height-sm);
     }
+
+    &._sm_x6ia4_73 {
+      padding: 0 var(--space-lg);
+      border-radius: var(--radius-sm);
+      font-size: var(--size-xs);
+      line-height: var(--line-height-lg);
+    }
+
+    &._pill_x6ia4_80 {
+      border-radius: var(--radius-full);
+    }
   }
 }
 @layer ui_baza_components {
@@ -539,17 +569,18 @@ textarea {
   }
 }
 @layer ui_baza_components {
-  ._button_1waqk_2 {
+  ._button_11nu9_2 {
     --ring-width: 1px;
 
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    min-height: var(--button-height);
     cursor: pointer;
     transition: all var(--transition-duration-default) ease-in-out;
 
-    &._accent_1waqk_11 {
-      &._primary_1waqk_12 {
+    &._accent_11nu9_12 {
+      &._primary_11nu9_13 {
         background-color: var(--color-accent);
         color: var(--color-white);
 
@@ -567,7 +598,7 @@ textarea {
         }
       }
 
-      &._secondary_1waqk_30 {
+      &._secondary_11nu9_31 {
         background-color: var(--color-accent-alpha-100);
         color: var(--color-accent);
 
@@ -585,8 +616,8 @@ textarea {
         }
       }
 
-      &._tertiary_1waqk_48,
-      &._line_1waqk_49 {
+      &._tertiary_11nu9_49,
+      &._line_11nu9_50 {
         background-color: var(--color-transparent);
         color: var(--color-accent);
 
@@ -604,7 +635,7 @@ textarea {
         }
       }
 
-      &._line_1waqk_49 {
+      &._line_11nu9_50 {
         --ring-color: var(--color-accent);
 
         box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
@@ -615,8 +646,8 @@ textarea {
       }
     }
 
-    &._neutral_1waqk_78 {
-      &._primary_1waqk_12 {
+    &._neutral_11nu9_79 {
+      &._primary_11nu9_13 {
         background-color: var(--color-neutral);
         color: var(--color-white);
 
@@ -634,7 +665,7 @@ textarea {
         }
       }
 
-      &._secondary_1waqk_30 {
+      &._secondary_11nu9_31 {
         background-color: var(--color-neutral-alpha-60);
         color: var(--color-neutral);
 
@@ -652,8 +683,8 @@ textarea {
         }
       }
 
-      &._tertiary_1waqk_48,
-      &._line_1waqk_49 {
+      &._tertiary_11nu9_49,
+      &._line_11nu9_50 {
         background-color: var(--color-transparent);
         color: var(--color-neutral);
 
@@ -671,7 +702,7 @@ textarea {
         }
       }
 
-      &._line_1waqk_49 {
+      &._line_11nu9_50 {
         --ring-color: var(--color-neutral-alpha-120);
 
         box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
@@ -682,29 +713,135 @@ textarea {
       }
     }
 
-    &._lg_1waqk_145 {
-      min-height: calc(var(--line-height-lg) + var(--space-2xl) * 2);
+    &._white_11nu9_146 {
+      &._primary_11nu9_13 {
+        background-color: var(--color-white);
+        color: var(--color-neutral);
+
+        &:hover {
+          background-color: var(--color-neutral-40);
+        }
+
+        &:active {
+          background-color: var(--color-neutral-80);
+        }
+
+        &:disabled {
+          background-color: var(--button-disabled-background, var(--color-white-alpha-100));
+          color: var(--color-white-alpha-500);
+        }
+      }
+
+      &._secondary_11nu9_31 {
+        background-color: var(--color-white-alpha-200);
+        color: var(--color-white);
+
+        &:hover {
+          background-color: var(--color-white-alpha-300);
+        }
+
+        &:active {
+          background-color: var(--color-white-alpha-400);
+        }
+
+        &:disabled {
+          background-color: var(--button-disabled-background, var(--color-white-alpha-100));
+          color: var(--color-white-alpha-500);
+        }
+      }
+
+      &._tertiary_11nu9_49,
+      &._line_11nu9_50 {
+        background-color: var(--color-transparent);
+        color: var(--color-white);
+
+        &:hover {
+          background-color: var(--color-white-alpha-100);
+        }
+
+        &:active {
+          background-color: var(--color-white-alpha-200);
+        }
+
+        &:disabled {
+          background-color: var(--button-disabled-background, var(--color-transparent));
+          color: var(--color-white-alpha-500);
+        }
+      }
+
+      &._line_11nu9_50 {
+        --ring-color: var(--color-white-alpha-300);
+
+        box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
+
+        &:disabled {
+          --ring-color: var(--color-white-alpha-200);
+        }
+      }
+    }
+
+    &._lg_11nu9_213 {
+      --button-height: calc(var(--line-height-lg) + var(--space-2xl) * 2);
+
       padding: var(--space-2xl);
       border-radius: var(--radius-xl);
       font-size: var(--size-md);
       line-height: var(--line-height-lg);
     }
 
-    &._md_1waqk_153 {
-      min-height: calc(var(--line-height-lg) + var(--space-lg) * 2);
+    &._md_11nu9_222 {
+      --button-height: calc(var(--line-height-lg) + var(--space-lg) * 2);
+
       padding: var(--space-lg);
       border-radius: var(--radius-lg);
       font-size: var(--size-md);
       line-height: var(--line-height-lg);
     }
 
-    &._sm_1waqk_161 {
-      min-height: calc(var(--line-height-md) + var(--space-sm) * 2);
+    &._md-sm_11nu9_231 {
+      --button-height: calc(var(--line-height-lg) + var(--space-md) * 2);
+
+      padding: var(--space-md);
+      border-radius: var(--radius-lg);
+      font-size: var(--size-md);
+      line-height: var(--line-height-lg);
+    }
+
+    &._sm_11nu9_240 {
+      --button-height: calc(var(--line-height-md) + var(--space-sm) * 2);
+
       padding: var(--space-sm);
       border-radius: var(--radius-md);
       font-size: var(--size-sm);
       line-height: var(--line-height-md);
     }
+
+    &._pill_11nu9_249,
+    &._circle_11nu9_250 {
+      border-radius: var(--radius-full);
+    }
+
+    &._circle_11nu9_250,
+    &._square_11nu9_255 {
+      flex-shrink: 0;
+      aspect-ratio: var(--aspect-ratio-square);
+      width: var(--button-height);
+      padding-inline: 0;
+    }
+
+    &._square_11nu9_255 {
+      border-radius: var(--radius-xl);
+    }
+
+    &._elevated_11nu9_266 {
+      box-shadow: var(--shadow-floating-button);
+    }
+
+    &._line_11nu9_50._elevated_11nu9_266 {
+      box-shadow:
+        inset 0 0 0 var(--ring-width) var(--ring-color),
+        var(--shadow-floating-button);
+    }
   }
 }
 @layer ui_baza_components {
@@ -823,7 +960,9 @@ textarea {
   }
 }
 @layer ui_baza_components {
-  ._chip_dj4kw_2 {
+  ._chip_nge5j_2 {
+    --chip-icon-size: 16px;
+
     display: flex;
     align-items: center;
     justify-content: center;
@@ -854,6 +993,53 @@ textarea {
       color: var(--color-neutral-340);
       pointer-events: none;
     }
+
+    &._glass_nge5j_36 {
+      background-color: var(--color-white-alpha-200);
+      color: var(--color-white);
+
+      &:hover {
+        background-color: var(--color-white-alpha-300);
+      }
+
+      &[data-selected='true'] {
+        background-color: var(--color-white);
+        color: var(--color-neutral);
+
+        &:hover {
+          background-color: var(--color-neutral-40);
+        }
+      }
+
+      &[data-disabled='true'] {
+        background-color: var(--color-white-alpha-100);
+        color: var(--color-white-alpha-500);
+      }
+    }
+
+    &._pill_nge5j_59 {
+      border-radius: var(--radius-full);
+    }
+
+    ._icon_nge5j_63 {
+      display: flex;
+      flex-shrink: 0;
+      width: var(--chip-icon-size);
+      height: var(--chip-icon-size);
+      margin-inline-end: var(--space-sm);
+      color: var(--color-accent);
+
+      & > svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &[data-selected='true'] ._icon_nge5j_63,
+    &[data-disabled='true'] ._icon_nge5j_63,
+    &._glass_nge5j_36 ._icon_nge5j_63 {
+      color: inherit;
+    }
   }
 }
 @layer ui_baza_components {
@@ -1318,7 +1504,7 @@ textarea {
   }
 }
 @layer ui_baza_components {
-  ._root_33gbh_2 {
+  ._root_1lyc4_2 {
     display: flex;
     align-items: center;
     width: 100%;
@@ -1326,7 +1512,7 @@ textarea {
     gap: var(--space-xs);
   }
 
-  ._segment_33gbh_10 {
+  ._segment_1lyc4_10 {
     min-width: var(--progress-bar-height);
     height: 100%;
     border-radius: var(--radius-5xl);
@@ -1335,26 +1521,38 @@ textarea {
       width var(--transition-duration-default) ease-in-out;
   }
 
-  ._flexGrow_33gbh_19 {
+  ._flexGrow_1lyc4_19 {
     flex: 1 1 0;
   }
 
-  ._fill_33gbh_23 {
+  ._fill_1lyc4_23 {
     width: var(--clamped-percent);
-    background-color: var(--color-accent);
+    background-color: var(--progress-bar-fill-color);
   }
 
-  ._trail_33gbh_28 {
+  ._trail_1lyc4_28 {
     background-color: var(--color-neutral-alpha-60);
   }
 
-  ._sm_33gbh_32 {
+  ._xs_1lyc4_32 {
+    --progress-bar-height: 5px;
+  }
+
+  ._sm_1lyc4_36 {
     --progress-bar-height: 8px;
   }
 
-  ._md_33gbh_36 {
+  ._md_1lyc4_40 {
     --progress-bar-height: 12px;
   }
+
+  ._accent_1lyc4_44 {
+    --progress-bar-fill-color: var(--color-accent);
+  }
+
+  ._green_1lyc4_48 {
+    --progress-bar-fill-color: var(--color-green-900);
+  }
 }
 @layer ui_baza_components {
   ._radioWrapper_13xie_2 {

package/package.json

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