@grandbazar/ui-baza 1.6.0 → 1.7.1

package/dist/index.cjs

@@ -51,21 +51,21 @@ function omit(object, ...keys) {
   return Object.fromEntries(filteredEntries);
 }
 
-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 badge = "_badge_7i4v4_2";
+const primary$4 = "_primary_7i4v4_9";
+const secondary$5 = "_secondary_7i4v4_13";
+const glass$1 = "_glass_7i4v4_18";
+const accent$5 = "_accent_7i4v4_23";
+const violet = "_violet_7i4v4_28";
+const pink = "_pink_7i4v4_33";
+const red$1 = "_red_7i4v4_38";
+const orange = "_orange_7i4v4_43";
+const green = "_green_7i4v4_48";
+const neutral$3 = "_neutral_7i4v4_53";
+const lg$8 = "_lg_7i4v4_58";
+const md$a = "_md_7i4v4_65";
+const sm$5 = "_sm_7i4v4_72";
+const pill$2 = "_pill_7i4v4_79";
 const styles$E = {
 	badge: badge,
 	primary: primary$4,
@@ -76,9 +76,9 @@ const styles$E = {
 	pink: pink,
 	red: red$1,
 	orange: orange,
-	green: green$1,
+	green: green,
 	neutral: neutral$3,
-	lg: lg$7,
+	lg: lg$8,
 	md: md$a,
 	sm: sm$5,
 	pill: pill$2
@@ -1318,8 +1318,8 @@ 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 white$3 = "_white_11nu9_146";
+const lg$7 = "_lg_11nu9_213";
 const md$9 = "_md_11nu9_222";
 const sm$4 = "_sm_11nu9_240";
 const pill$1 = "_pill_11nu9_249";
@@ -1334,8 +1334,8 @@ const styles$z = {
 	tertiary: tertiary,
 	line: line,
 	neutral: neutral$2,
-	white: white$1,
-	lg: lg$6,
+	white: white$3,
+	lg: lg$7,
 	md: md$9,
 	"md-sm": "_md-sm_11nu9_231",
 	sm: sm$4,
@@ -1348,13 +1348,13 @@ const styles$z = {
 const buttonFunction = "_buttonFunction_o8iku_2";
 const accent$3 = "_accent_o8iku_10";
 const neutral$1 = "_neutral_o8iku_22";
-const lg$5 = "_lg_o8iku_41";
+const lg$6 = "_lg_o8iku_41";
 const md$8 = "_md_o8iku_46";
 const styles$y = {
 	buttonFunction: buttonFunction,
 	accent: accent$3,
 	neutral: neutral$1,
-	lg: lg$5,
+	lg: lg$6,
 	md: md$8
 };
 
@@ -1438,13 +1438,15 @@ function Checkbox({ className, label, indeterminate, ...props }) {
   );
 }
 
-const chip = "_chip_nge5j_2";
-const glass = "_glass_nge5j_36";
-const pill = "_pill_nge5j_59";
-const icon$2 = "_icon_nge5j_63";
+const chip = "_chip_1i1br_2";
+const glass = "_glass_1i1br_36";
+const white$2 = "_white_1i1br_59";
+const pill = "_pill_1i1br_67";
+const icon$2 = "_icon_1i1br_71";
 const styles$w = {
 	chip: chip,
 	glass: glass,
+	white: white$2,
 	pill: pill,
 	icon: icon$2
 };
@@ -1485,22 +1487,22 @@ function Chip({
 }
 
 const root$1 = "_root_ww0fb_2";
-const lg$4 = "_lg_ww0fb_16";
+const lg$5 = "_lg_ww0fb_16";
 const md$7 = "_md_ww0fb_24";
 const red = "_red_ww0fb_32";
 const accent$2 = "_accent_ww0fb_37";
 const neutral = "_neutral_ww0fb_42";
 const secondary$2 = "_secondary_ww0fb_47";
-const white = "_white_ww0fb_52";
+const white$1 = "_white_ww0fb_52";
 const styles$v = {
 	root: root$1,
-	lg: lg$4,
+	lg: lg$5,
 	md: md$7,
 	red: red,
 	accent: accent$2,
 	neutral: neutral,
 	secondary: secondary$2,
-	white: white
+	white: white$1
 };
 
 function Counter({ className, size = "lg", color = "red", ...props }) {
@@ -2614,16 +2616,22 @@ function Pagination(props) {
 }
 Pagination.Item = PaginationItem;
 
-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 root = "_root_1dvnf_2";
+const segment = "_segment_1dvnf_10";
+const flexGrow = "_flexGrow_1dvnf_19";
+const fill$1 = "_fill_1dvnf_23";
+const trail = "_trail_1dvnf_28";
+const xs = "_xs_1dvnf_32";
+const sm$2 = "_sm_1dvnf_36";
+const md$5 = "_md_1dvnf_40";
+const accent = "_accent_1dvnf_44";
+const white = "_white_1dvnf_48";
+const ring = "_ring_1dvnf_55";
+const ringSvg = "_ringSvg_1dvnf_68";
+const ringTrack = "_ringTrack_1dvnf_76";
+const ringFill = "_ringFill_1dvnf_81";
+const ringLabel = "_ringLabel_1dvnf_88";
+const lg$4 = "_lg_1dvnf_102";
 const styles$l = {
 	root: root,
 	segment: segment,
@@ -2634,7 +2642,13 @@ const styles$l = {
 	sm: sm$2,
 	md: md$5,
 	accent: accent,
-	green: green
+	white: white,
+	ring: ring,
+	ringSvg: ringSvg,
+	ringTrack: ringTrack,
+	ringFill: ringFill,
+	ringLabel: ringLabel,
+	lg: lg$4
 };
 
 function ProgressBarLinear({
@@ -2674,6 +2688,56 @@ function ProgressBarLinear({
   );
 }
 
+const PROGRESS_RING_STROKE_WIDTHS = {
+  sm: 12,
+  md: 11,
+  lg: 9.5
+};
+
+function ProgressBarRing({
+  className,
+  size = "md",
+  color = "accent",
+  percent,
+  children,
+  ...props
+}) {
+  const clampedPercent = Math.min(100, Math.max(0, percent));
+  const strokeWidth = PROGRESS_RING_STROKE_WIDTHS[size];
+  const radius = 50 - strokeWidth / 2;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: classNames(styles$l.ring, styles$l[size], styles$l[color], className),
+      role: "progressbar",
+      "aria-valuenow": clampedPercent,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuetext": `${clampedPercent} percent complete`,
+      "aria-label": "Progress",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: styles$l.ringSvg, viewBox: "0 0 100 100", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { className: styles$l.ringTrack, cx: "50", cy: "50", r: radius, strokeWidth }),
+          Boolean(clampedPercent) && /* @__PURE__ */ jsxRuntime.jsx(
+            "circle",
+            {
+              className: styles$l.ringFill,
+              cx: "50",
+              cy: "50",
+              r: radius,
+              strokeWidth,
+              pathLength: 100,
+              strokeDasharray: `${clampedPercent} 100`
+            }
+          )
+        ] }),
+        children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$l.ringLabel, children })
+      ]
+    }
+  );
+}
+
 function ProgressBarSteps({
   className,
   size = "md",
@@ -2715,6 +2779,7 @@ function ProgressBar(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(ProgressBarLinear, { ...props });
 }
 ProgressBar.Steps = ProgressBarSteps;
+ProgressBar.Ring = ProgressBarRing;
 
 const radioWrapper = "_radioWrapper_13xie_2";
 const radio = "_radio_13xie_2";

package/dist/index.d.ts

@@ -126,14 +126,15 @@ export declare function Checkbox({ className, label, indeterminate, ...props }:
  * @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 mode - Visual mode (default, glass, white); glass is a translucent white chip for colored backgrounds,
+ *   white is a solid white chip for light-grey surfaces
  * @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, icon, shape, mode, asChild, ...props }: TChipProps): JSX.Element;
 
-declare const CHIP_MODES: readonly ["default", "glass"];
+declare const CHIP_MODES: readonly ["default", "glass", "white"];
 
 declare const CHIP_SHAPES: readonly ["default", "pill"];
 
@@ -494,16 +495,18 @@ 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_COLORS: readonly ["accent", "green"];
+declare const PROGRESS_BAR_COLORS: readonly ["accent", "white"];
 
 declare const PROGRESS_BAR_SIZES: readonly ["sm", "md", "xs"];
 
+declare const PROGRESS_RING_SIZES: readonly ["sm", "md", "lg"];
+
 /**
  * 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, xs)
- * @param color - Fill color (accent, green); the track stays the same
+ * @param color - Fill color (accent, white); white sits on a white-alpha track for dark and accent surfaces
  * @param percent - Progress percentage (0-100)
  * @param showFillOnZero - Whether to render the fill segment at 0%
  * @param className - Additional CSS classes
@@ -512,15 +515,20 @@ declare const PROGRESS_BAR_SIZES: readonly ["sm", "md", "xs"];
  * <ProgressBar percent={50} size="md" />
  *
  * <ProgressBar.Steps currentStep={2} totalSteps={5} />
+ *
+ * <ProgressBar.Ring percent={60}>3/5</ProgressBar.Ring>
  */
 export declare function ProgressBar(props: React.ComponentProps<typeof ProgressBarLinear>): JSX.Element;
 
 export declare namespace ProgressBar {
     var Steps: typeof ProgressBarSteps;
+    var Ring: typeof ProgressBarRing;
 }
 
 declare function ProgressBarLinear({ className, size, color, percent, showFillOnZero, ...props }: TProgressBarLinearProps): JSX.Element;
 
+declare function ProgressBarRing({ className, size, color, percent, children, ...props }: TProgressBarRingProps): JSX.Element;
+
 declare function ProgressBarSteps({ className, size, color, currentStep, totalSteps, ...props }: TProgressBarStepsProps): JSX.Element;
 
 /**
@@ -990,6 +998,12 @@ declare type TProgressBarLinearProps = Omit<React.HTMLAttributes<HTMLDivElement>
     showFillOnZero?: boolean;
 };
 
+declare type TProgressBarRingProps = React.HTMLAttributes<HTMLDivElement> & {
+    size?: TArrayElement<typeof PROGRESS_RING_SIZES>;
+    color?: TArrayElement<typeof PROGRESS_BAR_COLORS>;
+    percent: number;
+};
+
 declare type TProgressBarStepsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
     size?: TArrayElement<typeof PROGRESS_BAR_SIZES>;
     color?: TArrayElement<typeof PROGRESS_BAR_COLORS>;

package/dist/index.js

@@ -47,21 +47,21 @@ function omit(object, ...keys) {
   return Object.fromEntries(filteredEntries);
 }
 
-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 badge = "_badge_7i4v4_2";
+const primary$4 = "_primary_7i4v4_9";
+const secondary$5 = "_secondary_7i4v4_13";
+const glass$1 = "_glass_7i4v4_18";
+const accent$5 = "_accent_7i4v4_23";
+const violet = "_violet_7i4v4_28";
+const pink = "_pink_7i4v4_33";
+const red$1 = "_red_7i4v4_38";
+const orange = "_orange_7i4v4_43";
+const green = "_green_7i4v4_48";
+const neutral$3 = "_neutral_7i4v4_53";
+const lg$8 = "_lg_7i4v4_58";
+const md$a = "_md_7i4v4_65";
+const sm$5 = "_sm_7i4v4_72";
+const pill$2 = "_pill_7i4v4_79";
 const styles$E = {
 	badge: badge,
 	primary: primary$4,
@@ -72,9 +72,9 @@ const styles$E = {
 	pink: pink,
 	red: red$1,
 	orange: orange,
-	green: green$1,
+	green: green,
 	neutral: neutral$3,
-	lg: lg$7,
+	lg: lg$8,
 	md: md$a,
 	sm: sm$5,
 	pill: pill$2
@@ -1314,8 +1314,8 @@ 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 white$3 = "_white_11nu9_146";
+const lg$7 = "_lg_11nu9_213";
 const md$9 = "_md_11nu9_222";
 const sm$4 = "_sm_11nu9_240";
 const pill$1 = "_pill_11nu9_249";
@@ -1330,8 +1330,8 @@ const styles$z = {
 	tertiary: tertiary,
 	line: line,
 	neutral: neutral$2,
-	white: white$1,
-	lg: lg$6,
+	white: white$3,
+	lg: lg$7,
 	md: md$9,
 	"md-sm": "_md-sm_11nu9_231",
 	sm: sm$4,
@@ -1344,13 +1344,13 @@ const styles$z = {
 const buttonFunction = "_buttonFunction_o8iku_2";
 const accent$3 = "_accent_o8iku_10";
 const neutral$1 = "_neutral_o8iku_22";
-const lg$5 = "_lg_o8iku_41";
+const lg$6 = "_lg_o8iku_41";
 const md$8 = "_md_o8iku_46";
 const styles$y = {
 	buttonFunction: buttonFunction,
 	accent: accent$3,
 	neutral: neutral$1,
-	lg: lg$5,
+	lg: lg$6,
 	md: md$8
 };
 
@@ -1434,13 +1434,15 @@ function Checkbox({ className, label, indeterminate, ...props }) {
   );
 }
 
-const chip = "_chip_nge5j_2";
-const glass = "_glass_nge5j_36";
-const pill = "_pill_nge5j_59";
-const icon$2 = "_icon_nge5j_63";
+const chip = "_chip_1i1br_2";
+const glass = "_glass_1i1br_36";
+const white$2 = "_white_1i1br_59";
+const pill = "_pill_1i1br_67";
+const icon$2 = "_icon_1i1br_71";
 const styles$w = {
 	chip: chip,
 	glass: glass,
+	white: white$2,
 	pill: pill,
 	icon: icon$2
 };
@@ -1481,22 +1483,22 @@ function Chip({
 }
 
 const root$1 = "_root_ww0fb_2";
-const lg$4 = "_lg_ww0fb_16";
+const lg$5 = "_lg_ww0fb_16";
 const md$7 = "_md_ww0fb_24";
 const red = "_red_ww0fb_32";
 const accent$2 = "_accent_ww0fb_37";
 const neutral = "_neutral_ww0fb_42";
 const secondary$2 = "_secondary_ww0fb_47";
-const white = "_white_ww0fb_52";
+const white$1 = "_white_ww0fb_52";
 const styles$v = {
 	root: root$1,
-	lg: lg$4,
+	lg: lg$5,
 	md: md$7,
 	red: red,
 	accent: accent$2,
 	neutral: neutral,
 	secondary: secondary$2,
-	white: white
+	white: white$1
 };
 
 function Counter({ className, size = "lg", color = "red", ...props }) {
@@ -2610,16 +2612,22 @@ function Pagination(props) {
 }
 Pagination.Item = PaginationItem;
 
-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 root = "_root_1dvnf_2";
+const segment = "_segment_1dvnf_10";
+const flexGrow = "_flexGrow_1dvnf_19";
+const fill$1 = "_fill_1dvnf_23";
+const trail = "_trail_1dvnf_28";
+const xs = "_xs_1dvnf_32";
+const sm$2 = "_sm_1dvnf_36";
+const md$5 = "_md_1dvnf_40";
+const accent = "_accent_1dvnf_44";
+const white = "_white_1dvnf_48";
+const ring = "_ring_1dvnf_55";
+const ringSvg = "_ringSvg_1dvnf_68";
+const ringTrack = "_ringTrack_1dvnf_76";
+const ringFill = "_ringFill_1dvnf_81";
+const ringLabel = "_ringLabel_1dvnf_88";
+const lg$4 = "_lg_1dvnf_102";
 const styles$l = {
 	root: root,
 	segment: segment,
@@ -2630,7 +2638,13 @@ const styles$l = {
 	sm: sm$2,
 	md: md$5,
 	accent: accent,
-	green: green
+	white: white,
+	ring: ring,
+	ringSvg: ringSvg,
+	ringTrack: ringTrack,
+	ringFill: ringFill,
+	ringLabel: ringLabel,
+	lg: lg$4
 };
 
 function ProgressBarLinear({
@@ -2670,6 +2684,56 @@ function ProgressBarLinear({
   );
 }
 
+const PROGRESS_RING_STROKE_WIDTHS = {
+  sm: 12,
+  md: 11,
+  lg: 9.5
+};
+
+function ProgressBarRing({
+  className,
+  size = "md",
+  color = "accent",
+  percent,
+  children,
+  ...props
+}) {
+  const clampedPercent = Math.min(100, Math.max(0, percent));
+  const strokeWidth = PROGRESS_RING_STROKE_WIDTHS[size];
+  const radius = 50 - strokeWidth / 2;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: classNames(styles$l.ring, styles$l[size], styles$l[color], className),
+      role: "progressbar",
+      "aria-valuenow": clampedPercent,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuetext": `${clampedPercent} percent complete`,
+      "aria-label": "Progress",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("svg", { className: styles$l.ringSvg, viewBox: "0 0 100 100", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("circle", { className: styles$l.ringTrack, cx: "50", cy: "50", r: radius, strokeWidth }),
+          Boolean(clampedPercent) && /* @__PURE__ */ jsx(
+            "circle",
+            {
+              className: styles$l.ringFill,
+              cx: "50",
+              cy: "50",
+              r: radius,
+              strokeWidth,
+              pathLength: 100,
+              strokeDasharray: `${clampedPercent} 100`
+            }
+          )
+        ] }),
+        children && /* @__PURE__ */ jsx("span", { className: styles$l.ringLabel, children })
+      ]
+    }
+  );
+}
+
 function ProgressBarSteps({
   className,
   size = "md",
@@ -2711,6 +2775,7 @@ function ProgressBar(props) {
   return /* @__PURE__ */ jsx(ProgressBarLinear, { ...props });
 }
 ProgressBar.Steps = ProgressBarSteps;
+ProgressBar.Ring = ProgressBarRing;
 
 const radioWrapper = "_radioWrapper_13xie_2";
 const radio = "_radio_13xie_2";

package/dist/style.css

@@ -298,7 +298,6 @@ 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));
 
@@ -371,85 +370,84 @@ textarea {
   }
 }
 @layer ui_baza_components {
-  ._badge_x6ia4_2 {
+  ._badge_7i4v4_2 {
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--color-white);
     font-weight: var(--font-weight-bold);
 
-    &._primary_x6ia4_9 {
+    &._primary_7i4v4_9 {
       background-color: var(--badge-color);
     }
 
-    &._secondary_x6ia4_13 {
+    &._secondary_7i4v4_13 {
       background-color: var(--badge-color-alpha);
-      color: var(--badge-color-on-alpha, var(--badge-color));
+      color: var(--badge-color);
     }
 
-    &._glass_x6ia4_18 {
+    &._glass_7i4v4_18 {
       background-color: var(--color-white-alpha-200);
       color: var(--color-white);
     }
 
-    &._accent_x6ia4_23 {
+    &._accent_7i4v4_23 {
       --badge-color: var(--color-accent);
       --badge-color-alpha: var(--color-accent-alpha-100);
     }
 
-    &._violet_x6ia4_28 {
+    &._violet_7i4v4_28 {
       --badge-color: var(--color-violet);
       --badge-color-alpha: var(--color-violet-alpha-100);
     }
 
-    &._pink_x6ia4_33 {
+    &._pink_7i4v4_33 {
       --badge-color: var(--color-pink);
       --badge-color-alpha: var(--color-pink-alpha-100);
     }
 
-    &._red_x6ia4_38 {
+    &._red_7i4v4_38 {
       --badge-color: var(--color-red);
       --badge-color-alpha: var(--color-red-alpha-100);
     }
 
-    &._orange_x6ia4_43 {
+    &._orange_7i4v4_43 {
       --badge-color: var(--color-orange);
       --badge-color-alpha: var(--color-orange-alpha-100);
     }
 
-    &._green_x6ia4_48 {
+    &._green_7i4v4_48 {
       --badge-color: var(--color-green);
       --badge-color-alpha: var(--color-green-alpha-100);
-      --badge-color-on-alpha: var(--color-green-900);
     }
 
-    &._neutral_x6ia4_54 {
+    &._neutral_7i4v4_53 {
       --badge-color: var(--color-neutral);
       --badge-color-alpha: var(--color-neutral-alpha-60);
     }
 
-    &._lg_x6ia4_59 {
+    &._lg_7i4v4_58 {
       padding: var(--space-sm);
       border-radius: var(--radius-md);
       font-size: var(--size-sm);
       line-height: var(--line-height-md);
     }
 
-    &._md_x6ia4_66 {
+    &._md_7i4v4_65 {
       padding: var(--space-xs);
       border-radius: var(--radius-sm);
       font-size: var(--size-xs);
       line-height: var(--line-height-sm);
     }
 
-    &._sm_x6ia4_73 {
+    &._sm_7i4v4_72 {
       padding: 0 var(--space-lg);
       border-radius: var(--radius-sm);
       font-size: var(--size-xs);
       line-height: var(--line-height-lg);
     }
 
-    &._pill_x6ia4_80 {
+    &._pill_7i4v4_79 {
       border-radius: var(--radius-full);
     }
   }
@@ -960,7 +958,7 @@ textarea {
   }
 }
 @layer ui_baza_components {
-  ._chip_nge5j_2 {
+  ._chip_1i1br_2 {
     --chip-icon-size: 16px;
 
     display: flex;
@@ -994,7 +992,7 @@ textarea {
       pointer-events: none;
     }
 
-    &._glass_nge5j_36 {
+    &._glass_1i1br_36 {
       background-color: var(--color-white-alpha-200);
       color: var(--color-white);
 
@@ -1017,11 +1015,19 @@ textarea {
       }
     }
 
-    &._pill_nge5j_59 {
+    &._white_1i1br_59:not([data-selected='true'], [data-disabled='true']) {
+      background-color: var(--color-white);
+
+      &:hover {
+        background-color: var(--color-neutral-40);
+      }
+    }
+
+    &._pill_1i1br_67 {
       border-radius: var(--radius-full);
     }
 
-    ._icon_nge5j_63 {
+    ._icon_1i1br_71 {
       display: flex;
       flex-shrink: 0;
       width: var(--chip-icon-size);
@@ -1035,9 +1041,9 @@ textarea {
       }
     }
 
-    &[data-selected='true'] ._icon_nge5j_63,
-    &[data-disabled='true'] ._icon_nge5j_63,
-    &._glass_nge5j_36 ._icon_nge5j_63 {
+    &[data-selected='true'] ._icon_1i1br_71,
+    &[data-disabled='true'] ._icon_1i1br_71,
+    &._glass_1i1br_36 ._icon_1i1br_71 {
       color: inherit;
     }
   }
@@ -1504,7 +1510,7 @@ textarea {
   }
 }
 @layer ui_baza_components {
-  ._root_1lyc4_2 {
+  ._root_1dvnf_2 {
     display: flex;
     align-items: center;
     width: 100%;
@@ -1512,7 +1518,7 @@ textarea {
     gap: var(--space-xs);
   }
 
-  ._segment_1lyc4_10 {
+  ._segment_1dvnf_10 {
     min-width: var(--progress-bar-height);
     height: 100%;
     border-radius: var(--radius-5xl);
@@ -1521,37 +1527,92 @@ textarea {
       width var(--transition-duration-default) ease-in-out;
   }
 
-  ._flexGrow_1lyc4_19 {
+  ._flexGrow_1dvnf_19 {
     flex: 1 1 0;
   }
 
-  ._fill_1lyc4_23 {
+  ._fill_1dvnf_23 {
     width: var(--clamped-percent);
     background-color: var(--progress-bar-fill-color);
   }
 
-  ._trail_1lyc4_28 {
-    background-color: var(--color-neutral-alpha-60);
+  ._trail_1dvnf_28 {
+    background-color: var(--progress-bar-trail-color, var(--color-neutral-alpha-60));
   }
 
-  ._xs_1lyc4_32 {
+  ._xs_1dvnf_32 {
     --progress-bar-height: 5px;
   }
 
-  ._sm_1lyc4_36 {
+  ._sm_1dvnf_36 {
     --progress-bar-height: 8px;
   }
 
-  ._md_1lyc4_40 {
+  ._md_1dvnf_40 {
     --progress-bar-height: 12px;
   }
 
-  ._accent_1lyc4_44 {
+  ._accent_1dvnf_44 {
     --progress-bar-fill-color: var(--color-accent);
   }
 
-  ._green_1lyc4_48 {
-    --progress-bar-fill-color: var(--color-green-900);
+  ._white_1dvnf_48 {
+    --progress-bar-fill-color: var(--color-white);
+    --progress-bar-trail-color: var(--color-white-alpha-300);
+  }
+}
+
+@layer ui_baza_components {
+  ._ring_1dvnf_55 {
+    display: inline-flex;
+    position: relative;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    width: var(--progress-ring-size);
+    height: var(--progress-ring-size);
+    font-weight: 600;
+    font-size: var(--progress-ring-font-size);
+    line-height: 1;
+  }
+
+  ._ringSvg_1dvnf_68 {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    inset: 0;
+    transform: rotate(-90deg);
+  }
+
+  ._ringTrack_1dvnf_76 {
+    fill: none;
+    stroke: var(--progress-bar-trail-color, var(--color-neutral-alpha-80));
+  }
+
+  ._ringFill_1dvnf_81 {
+    fill: none;
+    stroke: var(--progress-bar-fill-color);
+    stroke-linecap: round;
+    transition: stroke-dasharray var(--transition-duration-default) ease-in-out;
+  }
+
+  ._ringLabel_1dvnf_88 {
+    position: relative;
+  }
+
+  ._ring_1dvnf_55._sm_1dvnf_36 {
+    --progress-ring-size: 34px;
+    --progress-ring-font-size: 10px;
+  }
+
+  ._ring_1dvnf_55._md_1dvnf_40 {
+    --progress-ring-size: 44px;
+    --progress-ring-font-size: 12px;
+  }
+
+  ._ring_1dvnf_55._lg_1dvnf_102 {
+    --progress-ring-size: 84px;
+    --progress-ring-font-size: 20px;
   }
 }
 @layer ui_baza_components {

package/package.json

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