@grandbazar/ui-baza 1.2.16 → 1.2.17

package/dist/index.cjs

@@ -61,7 +61,7 @@ const red$1 = "_red_p5h5n_33";
 const orange = "_orange_p5h5n_38";
 const green = "_green_p5h5n_43";
 const neutral$3 = "_neutral_p5h5n_48";
-const lg$6 = "_lg_p5h5n_53";
+const lg$7 = "_lg_p5h5n_53";
 const md$a = "_md_p5h5n_60";
 const styles$w = {
 	badge: badge,
@@ -74,7 +74,7 @@ const styles$w = {
 	orange: orange,
 	green: green,
 	neutral: neutral$3,
-	lg: lg$6,
+	lg: lg$7,
 	md: md$a
 };
 
@@ -1099,16 +1099,16 @@ function Breadcrumbs({
 }
 Breadcrumbs.Item = BreadcrumbItem;
 
-const button = "_button_17gao_2";
-const accent$2 = "_accent_17gao_11";
-const primary$2 = "_primary_17gao_12";
-const secondary$3 = "_secondary_17gao_30";
-const tertiary = "_tertiary_17gao_48";
-const line = "_line_17gao_49";
-const neutral$2 = "_neutral_17gao_78";
-const lg$5 = "_lg_17gao_145";
-const md$9 = "_md_17gao_153";
-const sm$4 = "_sm_17gao_161";
+const button = "_button_60wps_2";
+const accent$2 = "_accent_60wps_11";
+const primary$2 = "_primary_60wps_12";
+const secondary$3 = "_secondary_60wps_30";
+const tertiary = "_tertiary_60wps_48";
+const line = "_line_60wps_49";
+const neutral$2 = "_neutral_60wps_78";
+const lg$6 = "_lg_60wps_145";
+const md$9 = "_md_60wps_153";
+const sm$4 = "_sm_60wps_161";
 const styles$r = {
 	button: button,
 	accent: accent$2,
@@ -1117,7 +1117,7 @@ const styles$r = {
 	tertiary: tertiary,
 	line: line,
 	neutral: neutral$2,
-	lg: lg$5,
+	lg: lg$6,
 	md: md$9,
 	sm: sm$4
 };
@@ -1125,13 +1125,13 @@ const styles$r = {
 const buttonFunction = "_buttonFunction_o8iku_2";
 const accent$1 = "_accent_o8iku_10";
 const neutral$1 = "_neutral_o8iku_22";
-const lg$4 = "_lg_o8iku_41";
+const lg$5 = "_lg_o8iku_41";
 const md$8 = "_md_o8iku_46";
 const styles$q = {
 	buttonFunction: buttonFunction,
 	accent: accent$1,
 	neutral: neutral$1,
-	lg: lg$4,
+	lg: lg$5,
 	md: md$8
 };
 
@@ -1225,7 +1225,7 @@ function Chip({ isSelected, children, className, disabled, ...props }) {
 }
 
 const root$1 = "_root_ww0fb_2";
-const lg$3 = "_lg_ww0fb_16";
+const lg$4 = "_lg_ww0fb_16";
 const md$7 = "_md_ww0fb_24";
 const red = "_red_ww0fb_32";
 const accent = "_accent_ww0fb_37";
@@ -1234,7 +1234,7 @@ const secondary$2 = "_secondary_ww0fb_47";
 const white = "_white_ww0fb_52";
 const styles$n = {
 	root: root$1,
-	lg: lg$3,
+	lg: lg$4,
 	md: md$7,
 	red: red,
 	accent: accent,
@@ -2481,11 +2481,11 @@ function TextFieldLabel({ className, children, isRequired, ...props }) {
 }
 
 const textFieldRoot = "_textFieldRoot_cs7mv_2";
-const lg$2 = "_lg_cs7mv_38";
+const lg$3 = "_lg_cs7mv_38";
 const md$4 = "_md_cs7mv_70";
 const styles$9 = {
 	textFieldRoot: textFieldRoot,
-	lg: lg$2,
+	lg: lg$3,
 	md: md$4
 };
 
@@ -2587,11 +2587,11 @@ function useSegmentControlContext() {
 }
 
 const segmentControlItem = "_segmentControlItem_178px_2";
-const lg$1 = "_lg_178px_23";
+const lg$2 = "_lg_178px_23";
 const md$3 = "_md_178px_28";
 const styles$7 = {
 	segmentControlItem: segmentControlItem,
-	lg: lg$1,
+	lg: lg$2,
 	md: md$3
 };
 
@@ -2639,13 +2639,13 @@ function useActiveSegment(value) {
 
 const segmentControlRoot = "_segmentControlRoot_pulca_8";
 const showAfterDelay = "_showAfterDelay_pulca_1";
-const lg = "_lg_pulca_19";
+const lg$1 = "_lg_pulca_19";
 const md$2 = "_md_pulca_23";
 const indicator$1 = "_indicator_pulca_28";
 const styles$6 = {
 	segmentControlRoot: segmentControlRoot,
 	showAfterDelay: showAfterDelay,
-	lg: lg,
+	lg: lg$1,
 	md: md$2,
 	indicator: indicator$1
 };
@@ -2672,16 +2672,18 @@ function SegmentControl(props) {
 }
 SegmentControl.Item = SegmentControlItem;
 
-const stepper = "_stepper_gnt3j_2";
-const sm$1 = "_sm_gnt3j_10";
-const md$1 = "_md_gnt3j_17";
-const primary$1 = "_primary_gnt3j_24";
-const secondary$1 = "_secondary_gnt3j_34";
-const value = "_value_gnt3j_43";
+const stepper = "_stepper_1nqr2_2";
+const sm$1 = "_sm_1nqr2_10";
+const md$1 = "_md_1nqr2_17";
+const lg = "_lg_1nqr2_24";
+const primary$1 = "_primary_1nqr2_31";
+const secondary$1 = "_secondary_1nqr2_41";
+const value = "_value_1nqr2_50";
 const styles$5 = {
 	stepper: stepper,
 	sm: sm$1,
 	md: md$1,
+	lg: lg,
 	primary: primary$1,
 	secondary: secondary$1,
 	value: value

package/dist/index.d.ts

@@ -507,7 +507,7 @@ declare function SegmentControlRoot({ className, children, value, size, ...props
  * @param min - Lower bound; the minus button is disabled once reached (expects min <= max)
  * @param max - Upper bound; the plus button is disabled once reached
  * @param step - Positive amount added or subtracted per click (default 1)
- * @param size - Size of the stepper (md, sm)
+ * @param size - Size of the stepper (lg, md, sm)
  * @param mode - Visual mode of the stepper (primary, secondary)
  * @param disabled - Disables both buttons
  */
@@ -515,7 +515,7 @@ export declare function Stepper({ value, onChange, min, max, step, size, mode, d
 
 declare const STEPPER_MODES: readonly ["primary", "secondary"];
 
-declare const STEPPER_SIZES: readonly ["md", "sm"];
+declare const STEPPER_SIZES: readonly ["lg", "md", "sm"];
 
 /**
  * Switch renders a toggle switch input with label and state indicators.

package/dist/index.js

@@ -57,7 +57,7 @@ const red$1 = "_red_p5h5n_33";
 const orange = "_orange_p5h5n_38";
 const green = "_green_p5h5n_43";
 const neutral$3 = "_neutral_p5h5n_48";
-const lg$6 = "_lg_p5h5n_53";
+const lg$7 = "_lg_p5h5n_53";
 const md$a = "_md_p5h5n_60";
 const styles$w = {
 	badge: badge,
@@ -70,7 +70,7 @@ const styles$w = {
 	orange: orange,
 	green: green,
 	neutral: neutral$3,
-	lg: lg$6,
+	lg: lg$7,
 	md: md$a
 };
 
@@ -1095,16 +1095,16 @@ function Breadcrumbs({
 }
 Breadcrumbs.Item = BreadcrumbItem;
 
-const button = "_button_17gao_2";
-const accent$2 = "_accent_17gao_11";
-const primary$2 = "_primary_17gao_12";
-const secondary$3 = "_secondary_17gao_30";
-const tertiary = "_tertiary_17gao_48";
-const line = "_line_17gao_49";
-const neutral$2 = "_neutral_17gao_78";
-const lg$5 = "_lg_17gao_145";
-const md$9 = "_md_17gao_153";
-const sm$4 = "_sm_17gao_161";
+const button = "_button_60wps_2";
+const accent$2 = "_accent_60wps_11";
+const primary$2 = "_primary_60wps_12";
+const secondary$3 = "_secondary_60wps_30";
+const tertiary = "_tertiary_60wps_48";
+const line = "_line_60wps_49";
+const neutral$2 = "_neutral_60wps_78";
+const lg$6 = "_lg_60wps_145";
+const md$9 = "_md_60wps_153";
+const sm$4 = "_sm_60wps_161";
 const styles$r = {
 	button: button,
 	accent: accent$2,
@@ -1113,7 +1113,7 @@ const styles$r = {
 	tertiary: tertiary,
 	line: line,
 	neutral: neutral$2,
-	lg: lg$5,
+	lg: lg$6,
 	md: md$9,
 	sm: sm$4
 };
@@ -1121,13 +1121,13 @@ const styles$r = {
 const buttonFunction = "_buttonFunction_o8iku_2";
 const accent$1 = "_accent_o8iku_10";
 const neutral$1 = "_neutral_o8iku_22";
-const lg$4 = "_lg_o8iku_41";
+const lg$5 = "_lg_o8iku_41";
 const md$8 = "_md_o8iku_46";
 const styles$q = {
 	buttonFunction: buttonFunction,
 	accent: accent$1,
 	neutral: neutral$1,
-	lg: lg$4,
+	lg: lg$5,
 	md: md$8
 };
 
@@ -1221,7 +1221,7 @@ function Chip({ isSelected, children, className, disabled, ...props }) {
 }
 
 const root$1 = "_root_ww0fb_2";
-const lg$3 = "_lg_ww0fb_16";
+const lg$4 = "_lg_ww0fb_16";
 const md$7 = "_md_ww0fb_24";
 const red = "_red_ww0fb_32";
 const accent = "_accent_ww0fb_37";
@@ -1230,7 +1230,7 @@ const secondary$2 = "_secondary_ww0fb_47";
 const white = "_white_ww0fb_52";
 const styles$n = {
 	root: root$1,
-	lg: lg$3,
+	lg: lg$4,
 	md: md$7,
 	red: red,
 	accent: accent,
@@ -2477,11 +2477,11 @@ function TextFieldLabel({ className, children, isRequired, ...props }) {
 }
 
 const textFieldRoot = "_textFieldRoot_cs7mv_2";
-const lg$2 = "_lg_cs7mv_38";
+const lg$3 = "_lg_cs7mv_38";
 const md$4 = "_md_cs7mv_70";
 const styles$9 = {
 	textFieldRoot: textFieldRoot,
-	lg: lg$2,
+	lg: lg$3,
 	md: md$4
 };
 
@@ -2583,11 +2583,11 @@ function useSegmentControlContext() {
 }
 
 const segmentControlItem = "_segmentControlItem_178px_2";
-const lg$1 = "_lg_178px_23";
+const lg$2 = "_lg_178px_23";
 const md$3 = "_md_178px_28";
 const styles$7 = {
 	segmentControlItem: segmentControlItem,
-	lg: lg$1,
+	lg: lg$2,
 	md: md$3
 };
 
@@ -2635,13 +2635,13 @@ function useActiveSegment(value) {
 
 const segmentControlRoot = "_segmentControlRoot_pulca_8";
 const showAfterDelay = "_showAfterDelay_pulca_1";
-const lg = "_lg_pulca_19";
+const lg$1 = "_lg_pulca_19";
 const md$2 = "_md_pulca_23";
 const indicator$1 = "_indicator_pulca_28";
 const styles$6 = {
 	segmentControlRoot: segmentControlRoot,
 	showAfterDelay: showAfterDelay,
-	lg: lg,
+	lg: lg$1,
 	md: md$2,
 	indicator: indicator$1
 };
@@ -2668,16 +2668,18 @@ function SegmentControl(props) {
 }
 SegmentControl.Item = SegmentControlItem;
 
-const stepper = "_stepper_gnt3j_2";
-const sm$1 = "_sm_gnt3j_10";
-const md$1 = "_md_gnt3j_17";
-const primary$1 = "_primary_gnt3j_24";
-const secondary$1 = "_secondary_gnt3j_34";
-const value = "_value_gnt3j_43";
+const stepper = "_stepper_1nqr2_2";
+const sm$1 = "_sm_1nqr2_10";
+const md$1 = "_md_1nqr2_17";
+const lg = "_lg_1nqr2_24";
+const primary$1 = "_primary_1nqr2_31";
+const secondary$1 = "_secondary_1nqr2_41";
+const value = "_value_1nqr2_50";
 const styles$5 = {
 	stepper: stepper,
 	sm: sm$1,
 	md: md$1,
+	lg: lg,
 	primary: primary$1,
 	secondary: secondary$1,
 	value: value

package/dist/style.css

@@ -534,7 +534,7 @@ textarea {
   }
 }
 @layer ui_baza_components {
-  ._button_17gao_2 {
+  ._button_60wps_2 {
     --ring-width: 1px;
 
     display: inline-flex;
@@ -543,8 +543,8 @@ textarea {
     cursor: pointer;
     transition: all var(--transition-duration-default) ease-in-out;
 
-    &._accent_17gao_11 {
-      &._primary_17gao_12 {
+    &._accent_60wps_11 {
+      &._primary_60wps_12 {
         background-color: var(--color-accent);
         color: var(--color-white);
 
@@ -562,7 +562,7 @@ textarea {
         }
       }
 
-      &._secondary_17gao_30 {
+      &._secondary_60wps_30 {
         background-color: var(--color-accent-alpha-100);
         color: var(--color-accent);
 
@@ -580,8 +580,8 @@ textarea {
         }
       }
 
-      &._tertiary_17gao_48,
-      &._line_17gao_49 {
+      &._tertiary_60wps_48,
+      &._line_60wps_49 {
         background-color: var(--color-transparent);
         color: var(--color-accent);
 
@@ -599,7 +599,7 @@ textarea {
         }
       }
 
-      &._line_17gao_49 {
+      &._line_60wps_49 {
         --ring-color: var(--color-accent);
 
         box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
@@ -610,8 +610,8 @@ textarea {
       }
     }
 
-    &._neutral_17gao_78 {
-      &._primary_17gao_12 {
+    &._neutral_60wps_78 {
+      &._primary_60wps_12 {
         background-color: var(--color-neutral);
         color: var(--color-white);
 
@@ -629,7 +629,7 @@ textarea {
         }
       }
 
-      &._secondary_17gao_30 {
+      &._secondary_60wps_30 {
         background-color: var(--color-neutral-alpha-60);
         color: var(--color-neutral);
 
@@ -647,8 +647,8 @@ textarea {
         }
       }
 
-      &._tertiary_17gao_48,
-      &._line_17gao_49 {
+      &._tertiary_60wps_48,
+      &._line_60wps_49 {
         background-color: var(--color-transparent);
         color: var(--color-neutral);
 
@@ -666,7 +666,7 @@ textarea {
         }
       }
 
-      &._line_17gao_49 {
+      &._line_60wps_49 {
         --ring-color: var(--color-neutral-alpha-120);
 
         box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
@@ -677,26 +677,26 @@ textarea {
       }
     }
 
-    &._lg_17gao_145 {
+    &._lg_60wps_145 {
       min-height: calc(var(--line-height-lg) + var(--space-2xl) * 2);
       padding: var(--space-2xl);
-      border-radius: var(--radius-2xl);
+      border-radius: var(--radius-xl);
       font-size: var(--size-md);
       line-height: var(--line-height-lg);
     }
 
-    &._md_17gao_153 {
+    &._md_60wps_153 {
       min-height: calc(var(--line-height-lg) + var(--space-lg) * 2);
       padding: var(--space-lg);
-      border-radius: var(--radius-xl);
+      border-radius: var(--radius-md);
       font-size: var(--size-md);
       line-height: var(--line-height-lg);
     }
 
-    &._sm_17gao_161 {
+    &._sm_60wps_161 {
       min-height: calc(var(--line-height-md) + var(--space-sm) * 2);
       padding: var(--space-sm);
-      border-radius: var(--radius-lg);
+      border-radius: var(--radius-sm);
       font-size: var(--size-sm);
       line-height: var(--line-height-md);
     }
@@ -1660,7 +1660,7 @@ textarea {
   }
 }
 @layer ui_baza_components {
-  ._stepper_gnt3j_2 {
+  ._stepper_1nqr2_2 {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -1668,46 +1668,59 @@ textarea {
 
     --button-disabled-background: var(--color-transparent);
 
-    &._sm_gnt3j_10 {
+    &._sm_1nqr2_10 {
       max-height: calc(var(--line-height-md) + var(--space-sm) * 2);
 
       --stepper-icon-size: var(--size-lg);
-      --stepper-radius: var(--radius-lg);
+      --stepper-radius: var(--radius-sm);
     }
 
-    &._md_gnt3j_17 {
+    &._md_1nqr2_17 {
       max-height: calc(var(--line-height-lg) + var(--space-lg) * 2);
 
+      --stepper-icon-size: var(--size-xl);
+      --stepper-radius: var(--radius-md);
+    }
+
+    &._lg_1nqr2_24 {
+      max-height: calc(var(--line-height-xl) + var(--space-xl) * 2);
+
       --stepper-icon-size: var(--size-xl);
       --stepper-radius: var(--radius-xl);
     }
 
-    &._primary_gnt3j_24 {
+    &._primary_1nqr2_31 {
       background-color: var(--color-accent);
       color: var(--color-white);
 
-      &[data-disabled] {
+      &[data-disabled='true'] {
         background-color: var(--color-neutral-alpha-60);
         color: var(--color-neutral-340);
       }
     }
 
-    &._secondary_gnt3j_34 {
+    &._secondary_1nqr2_41 {
       background-color: var(--color-neutral-alpha-60);
       color: var(--color-neutral);
 
-      &[data-disabled] {
+      &[data-disabled='true'] {
         color: var(--color-neutral-340);
       }
     }
 
-    &._md_gnt3j_17 ._value_gnt3j_43 {
+    &._lg_1nqr2_24 ._value_1nqr2_50 {
+      padding-inline: var(--space-2xl);
+      font-size: var(--size-md);
+      line-height: var(--line-height-lg);
+    }
+
+    &._md_1nqr2_17 ._value_1nqr2_50 {
       padding-inline: var(--space-md);
       font-size: var(--size-md);
       line-height: var(--line-height-lg);
     }
 
-    &._sm_gnt3j_10 ._value_gnt3j_43 {
+    &._sm_1nqr2_10 ._value_1nqr2_50 {
       padding-inline: var(--space-sm);
       font-size: var(--size-sm);
       line-height: var(--line-height-md);
@@ -1718,7 +1731,7 @@ textarea {
       height: var(--stepper-icon-size);
     }
 
-    & ._value_gnt3j_43 {
+    & ._value_1nqr2_50 {
       font-weight: var(--font-weight-medium);
       font-variant-numeric: tabular-nums;
       text-align: center;

package/package.json

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