@grandbazar/ui-baza 1.7.0 → 1.9.0

package/dist/index.cjs

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const bento = require('./bento.cjs');
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const reactDom = require('react-dom');
@@ -51,21 +52,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 +77,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 +1319,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$2 = "_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 +1335,8 @@ const styles$z = {
 	tertiary: tertiary,
 	line: line,
 	neutral: neutral$2,
-	white: white$2,
-	lg: lg$6,
+	white: white$3,
+	lg: lg$7,
 	md: md$9,
 	"md-sm": "_md-sm_11nu9_231",
 	sm: sm$4,
@@ -1348,13 +1349,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
 };
 
@@ -1440,13 +1441,13 @@ function Checkbox({ className, label, indeterminate, ...props }) {
 
 const chip = "_chip_1i1br_2";
 const glass = "_glass_1i1br_36";
-const white$1 = "_white_1i1br_59";
+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$1,
+	white: white$2,
 	pill: pill,
 	icon: icon$2
 };
@@ -1487,22 +1488,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 }) {
@@ -2616,16 +2617,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,
@@ -2636,7 +2643,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({
@@ -2676,6 +2689,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",
@@ -2717,6 +2780,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";
@@ -3827,6 +3891,19 @@ function Tooltip(props) {
 }
 Tooltip.Content = TooltipContent;
 
+exports.BENTO_AUTO_SIZES = bento.BENTO_AUTO_SIZES;
+exports.BENTO_CONFIGURABLE_SIZES = bento.BENTO_CONFIGURABLE_SIZES;
+exports.BENTO_GRIDS = bento.BENTO_GRIDS;
+exports.BENTO_GRID_NAMES = bento.BENTO_GRID_NAMES;
+exports.BENTO_MOBILE_SIZE_BY_DESKTOP = bento.BENTO_MOBILE_SIZE_BY_DESKTOP;
+exports.BENTO_SIZES = bento.BENTO_SIZES;
+exports.BENTO_THIN_SIZES = bento.BENTO_THIN_SIZES;
+exports.BENTO_TILE_SHAPES = bento.BENTO_TILE_SHAPES;
+exports.BENTO_TILE_SHAPE_BY_SIZE = bento.BENTO_TILE_SHAPE_BY_SIZE;
+exports.arrangeBento = bento.arrangeBento;
+exports.arrangeBentoGrids = bento.arrangeBentoGrids;
+exports.countBentoHoles = bento.countBentoHoles;
+exports.toBentoSlot = bento.toBentoSlot;
 exports.Badge = Badge;
 exports.BadgeTabs = BadgeTabs;
 exports.Breadcrumbs = Breadcrumbs;

package/dist/index.d.ts

@@ -6,6 +6,10 @@ import { JSX } from 'react/jsx-runtime';
 import { ReactPortal } from 'react';
 import { SetStateAction } from 'react';
 
+export declare function arrangeBento(slots: readonly TBentoSlot[], { columns, presets, rhythm }: TBentoGridRules): TBentoSize[];
+
+export declare function arrangeBentoGrids(slotsByGrid: Record<TBentoGrid, readonly TBentoSlot[]>): TBentoSizes[];
+
 /**
  * Badge displays a label or indicator with customizable color and size.
  * Supports multiple color schemes and display modes for different contexts.
@@ -50,6 +54,24 @@ declare function BadgeTabsItem({ className, children, isActive, mode, ...props }
 
 declare function BadgeTabsRoot({ className, children, ...props }: TBadgeTabsRootProps): JSX.Element;
 
+export declare const BENTO_AUTO_SIZES: Record<TBentoGrid, readonly TBentoSize[]>;
+
+export declare const BENTO_CONFIGURABLE_SIZES: Record<TBentoGrid, readonly TBentoSize[]>;
+
+export declare const BENTO_GRID_NAMES: readonly ["mobile", "desktop"];
+
+export declare const BENTO_GRIDS: Record<TBentoGrid, TBentoGridRules>;
+
+export declare const BENTO_MOBILE_SIZE_BY_DESKTOP: Record<TBentoSize, TBentoSize>;
+
+export declare const BENTO_SIZES: readonly ["1x1", "2x1", "2x2", "4x1", "4x2", "6x2", "8x2", "8x3", "4x5"];
+
+export declare const BENTO_THIN_SIZES: readonly TBentoSize[];
+
+export declare const BENTO_TILE_SHAPE_BY_SIZE: Record<TBentoSize, TBentoTileShape>;
+
+export declare const BENTO_TILE_SHAPES: readonly ["square", "strip", "wide", "wideStrip", "large", "long", "picture"];
+
 declare function BreadcrumbItem({ children, className, isActive, asChild, ...props }: TBreadcrumbItemProps): JSX.Element;
 
 /**
@@ -138,6 +160,8 @@ declare const CHIP_MODES: readonly ["default", "glass", "white"];
 
 declare const CHIP_SHAPES: readonly ["default", "pill"];
 
+export declare function countBentoHoles(sizes: readonly TBentoSize[], columns: number): number;
+
 export declare function Counter({ className, size, color, ...props }: TCounterProps): JSX.Element;
 
 declare const COUNTER_COLORS: readonly ["red", "accent", "neutral", "secondary", "white"];
@@ -495,16 +519,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
@@ -513,15 +539,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;
 
 /**
@@ -769,6 +800,31 @@ declare type TBadgeTabsRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'c
     children: React.ReactNode;
 };
 
+export declare type TBentoGrid = TArrayElement<typeof BENTO_GRID_NAMES>;
+
+export declare type TBentoGridRules = {
+    columns: number;
+    presets: Partial<Record<number, readonly TBentoSize[]>>;
+    rhythm: readonly TBentoSize[];
+};
+
+export declare type TBentoSize = TArrayElement<typeof BENTO_SIZES>;
+
+export declare type TBentoSizes = Record<TBentoGrid, TBentoSize>;
+
+export declare type TBentoSlot = {
+    preferredSize: TBentoSize | null;
+    allowedSizes: readonly TBentoSize[];
+};
+
+declare type TBentoSlotSource = {
+    allowedSizes: readonly TBentoSize[];
+    sizes: Partial<Record<TBentoGrid, TBentoSize | null>>;
+    defaultSize: TBentoSize | null;
+};
+
+export declare type TBentoTileShape = TArrayElement<typeof BENTO_TILE_SHAPES>;
+
 declare type TBreadcrumbItemProps = TAsChildProps<React.ButtonHTMLAttributes<HTMLButtonElement>> & {
     children: React.ReactNode;
     className?: string;
@@ -930,6 +986,8 @@ declare type TNotificationInlineProps = Omit<React.HTMLAttributes<HTMLDivElement
     onClose?: () => void;
 };
 
+export declare function toBentoSlot(grid: TBentoGrid, { allowedSizes, sizes, defaultSize }: TBentoSlotSource): TBentoSlot;
+
 /**
  * Tooltip is a compound component for displaying contextual hints.
  * Provides a trigger wrapper and content rendering for short descriptions.
@@ -991,6 +1049,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

@@ -1,3 +1,4 @@
+export { BENTO_AUTO_SIZES, BENTO_CONFIGURABLE_SIZES, BENTO_GRIDS, BENTO_GRID_NAMES, BENTO_MOBILE_SIZE_BY_DESKTOP, BENTO_SIZES, BENTO_THIN_SIZES, BENTO_TILE_SHAPES, BENTO_TILE_SHAPE_BY_SIZE, arrangeBento, arrangeBentoGrids, countBentoHoles, toBentoSlot } from './bento.js';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import React, { isValidElement, cloneElement, Fragment, useMemo, useState, useCallback, createContext, useEffect, useRef, useContext, useId, Children } from 'react';
 import { createPortal } from 'react-dom';
@@ -47,21 +48,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 +73,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 +1315,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$2 = "_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 +1331,8 @@ const styles$z = {
 	tertiary: tertiary,
 	line: line,
 	neutral: neutral$2,
-	white: white$2,
-	lg: lg$6,
+	white: white$3,
+	lg: lg$7,
 	md: md$9,
 	"md-sm": "_md-sm_11nu9_231",
 	sm: sm$4,
@@ -1344,13 +1345,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
 };
 
@@ -1436,13 +1437,13 @@ function Checkbox({ className, label, indeterminate, ...props }) {
 
 const chip = "_chip_1i1br_2";
 const glass = "_glass_1i1br_36";
-const white$1 = "_white_1i1br_59";
+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$1,
+	white: white$2,
 	pill: pill,
 	icon: icon$2
 };
@@ -1483,22 +1484,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 }) {
@@ -2612,16 +2613,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,
@@ -2632,7 +2639,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({
@@ -2672,6 +2685,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",
@@ -2713,6 +2776,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";