@grandbazar/ui-baza 1.1.1 → 1.1.2

package/dist/index.cjs

@@ -552,21 +552,23 @@ function Breadcrumbs({
 }
 Breadcrumbs.Item = BreadcrumbItem;
 
-const button = "_button_1pg2t_2";
-const accent$1 = "_accent_1pg2t_9";
-const primary$1 = "_primary_1pg2t_10";
-const secondary$2 = "_secondary_1pg2t_28";
-const tertiary = "_tertiary_1pg2t_46";
-const neutral$1 = "_neutral_1pg2t_65";
-const lg$4 = "_lg_1pg2t_121";
-const md$7 = "_md_1pg2t_129";
-const sm$3 = "_sm_1pg2t_137";
+const button = "_button_cmbkj_2";
+const accent$1 = "_accent_cmbkj_11";
+const primary$1 = "_primary_cmbkj_12";
+const secondary$2 = "_secondary_cmbkj_30";
+const tertiary = "_tertiary_cmbkj_48";
+const line = "_line_cmbkj_49";
+const neutral$1 = "_neutral_cmbkj_78";
+const lg$4 = "_lg_cmbkj_145";
+const md$7 = "_md_cmbkj_153";
+const sm$3 = "_sm_cmbkj_161";
 const styles$o = {
 	button: button,
 	accent: accent$1,
 	primary: primary$1,
 	secondary: secondary$2,
 	tertiary: tertiary,
+	line: line,
 	neutral: neutral$1,
 	lg: lg$4,
 	md: md$7,

package/dist/index.d.ts

@@ -75,7 +75,7 @@ export declare namespace Breadcrumbs {
  *
  * @param color - Color variant of the button (accent, neutral)
  * @param size - Size of the button (lg, md, sm)
- * @param mode - Visual mode of the button (primary, secondary, tertiary)
+ * @param mode - Visual mode of the button (primary, secondary, tertiary, line)
  * @param as - Element type to render (button, a)
  * @param children - Content to display inside the button
  */
@@ -85,7 +85,7 @@ export declare function Button(props: TButtonAsAnchorProps): React.JSX.Element;
 
 declare const BUTTON_COLORS: readonly ["accent", "neutral"];
 
-declare const BUTTON_MODES: readonly ["primary", "secondary", "tertiary"];
+declare const BUTTON_MODES: readonly ["primary", "secondary", "line", "tertiary"];
 
 declare const BUTTON_SIZES: readonly ["lg", "md", "sm"];
 

package/dist/index.js

@@ -548,21 +548,23 @@ function Breadcrumbs({
 }
 Breadcrumbs.Item = BreadcrumbItem;
 
-const button = "_button_1pg2t_2";
-const accent$1 = "_accent_1pg2t_9";
-const primary$1 = "_primary_1pg2t_10";
-const secondary$2 = "_secondary_1pg2t_28";
-const tertiary = "_tertiary_1pg2t_46";
-const neutral$1 = "_neutral_1pg2t_65";
-const lg$4 = "_lg_1pg2t_121";
-const md$7 = "_md_1pg2t_129";
-const sm$3 = "_sm_1pg2t_137";
+const button = "_button_cmbkj_2";
+const accent$1 = "_accent_cmbkj_11";
+const primary$1 = "_primary_cmbkj_12";
+const secondary$2 = "_secondary_cmbkj_30";
+const tertiary = "_tertiary_cmbkj_48";
+const line = "_line_cmbkj_49";
+const neutral$1 = "_neutral_cmbkj_78";
+const lg$4 = "_lg_cmbkj_145";
+const md$7 = "_md_cmbkj_153";
+const sm$3 = "_sm_cmbkj_161";
 const styles$o = {
 	button: button,
 	accent: accent$1,
 	primary: primary$1,
 	secondary: secondary$2,
 	tertiary: tertiary,
+	line: line,
 	neutral: neutral$1,
 	lg: lg$4,
 	md: md$7,

package/dist/style.css

@@ -534,15 +534,17 @@ textarea {
   }
 }
 @layer ui_baza_components {
-  ._button_1pg2t_2 {
+  ._button_cmbkj_2 {
+    --ring-width: 1px;
+
     display: inline-flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all var(--transition-duration-default) ease-in-out;
 
-    &._accent_1pg2t_9 {
-      &._primary_1pg2t_10 {
+    &._accent_cmbkj_11 {
+      &._primary_cmbkj_12 {
         background-color: var(--color-accent);
         color: var(--color-white);
 
@@ -560,7 +562,7 @@ textarea {
         }
       }
 
-      &._secondary_1pg2t_28 {
+      &._secondary_cmbkj_30 {
         background-color: var(--color-accent-alpha-100);
         color: var(--color-accent);
 
@@ -578,7 +580,8 @@ textarea {
         }
       }
 
-      &._tertiary_1pg2t_46 {
+      &._tertiary_cmbkj_48,
+      &._line_cmbkj_49 {
         background-color: var(--color-transparent);
         color: var(--color-accent);
 
@@ -595,10 +598,20 @@ textarea {
           color: var(--color-neutral-340);
         }
       }
+
+      &._line_cmbkj_49 {
+        --ring-color: var(--color-accent);
+
+        box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
+
+        &:disabled {
+          --ring-color: var(--color-neutral-alpha-120);
+        }
+      }
     }
 
-    &._neutral_1pg2t_65 {
-      &._primary_1pg2t_10 {
+    &._neutral_cmbkj_78 {
+      &._primary_cmbkj_12 {
         background-color: var(--color-neutral);
         color: var(--color-white);
 
@@ -616,7 +629,7 @@ textarea {
         }
       }
 
-      &._secondary_1pg2t_28 {
+      &._secondary_cmbkj_30 {
         background-color: var(--color-neutral-alpha-60);
         color: var(--color-neutral);
 
@@ -634,7 +647,8 @@ textarea {
         }
       }
 
-      &._tertiary_1pg2t_46 {
+      &._tertiary_cmbkj_48,
+      &._line_cmbkj_49 {
         background-color: var(--color-transparent);
         color: var(--color-neutral);
 
@@ -651,9 +665,19 @@ textarea {
           color: var(--color-neutral-340);
         }
       }
+
+      &._line_cmbkj_49 {
+        --ring-color: var(--color-neutral-alpha-120);
+
+        box-shadow: inset 0 0 0 var(--ring-width) var(--ring-color);
+
+        &:disabled {
+          --ring-color: var(--color-neutral-alpha-120);
+        }
+      }
     }
 
-    &._lg_1pg2t_121 {
+    &._lg_cmbkj_145 {
       min-height: calc(var(--line-height-lg) + var(--space-2xl) * 2);
       padding: var(--space-2xl);
       border-radius: var(--radius-2xl);
@@ -661,7 +685,7 @@ textarea {
       line-height: var(--line-height-lg);
     }
 
-    &._md_1pg2t_129 {
+    &._md_cmbkj_153 {
       min-height: calc(var(--line-height-lg) + var(--space-lg) * 2);
       padding: var(--space-lg);
       border-radius: var(--radius-xl);
@@ -669,7 +693,7 @@ textarea {
       line-height: var(--line-height-lg);
     }
 
-    &._sm_1pg2t_137 {
+    &._sm_cmbkj_161 {
       min-height: calc(var(--line-height-md) + var(--space-sm) * 2);
       padding: var(--space-sm);
       border-radius: var(--radius-lg);

package/package.json

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