@grandbazar/ui-baza 1.0.3 → 1.0.4

package/dist/style.css

@@ -178,10 +178,14 @@ select {
     --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%);
+    --color-neutral-300: color-mix(in srgb, var(--color-neutral) 29%, var(--color-white) 71%);
     --color-neutral-340: color-mix(in srgb, var(--color-neutral) 34%, var(--color-white) 66%);
+    --color-neutral-540: color-mix(in srgb, var(--color-neutral) 54.2%, var(--color-white) 45.8%);
 
     --color-neutral-alpha-40: color-mix(in srgb, var(--color-neutral) 4%, var(--color-transparent));
     --color-neutral-alpha-60: color-mix(in srgb, var(--color-neutral) 6%, var(--color-transparent));
+    --color-neutral-alpha-80: color-mix(in srgb, var(--color-neutral) 8%, var(--color-transparent));
+    --color-neutral-alpha-100: color-mix(in srgb, var(--color-neutral) 10%, var(--color-transparent));
     --color-neutral-alpha-120: color-mix(in srgb, var(--color-neutral) 12%, var(--color-transparent));
     --color-neutral-alpha-140: color-mix(in srgb, var(--color-neutral) 14%, var(--color-transparent));
 
@@ -215,6 +219,7 @@ select {
     --radius-image-xs: 10px;
     --radius-image-2xs: 8px;
     --radius-image-3xs: 6px;
+    --radius-full: 9999px;
 
     --size-xs: 12px;
     --size-sm: 14px;
@@ -243,21 +248,96 @@ select {
     --space-6xl: 32px;
     --space-7xl: 40px;
 
-    --transition-timing-function-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --font-weight-regular: 400;
+    --font-weight-medium: 500;
+    --font-weight-bold: 600;
+
     --transition-duration-default: 0.15s;
+
+    --aspect-ratio-square: 1 / 1;
+  }
+}
+@layer ui_baza_components {
+  ._badgeTabsItem_1lept_2 {
+    --badge-tabs-item-border-width: 2px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md);
+    font-weight: var(--font-weight-medium);
+    font-size: var(--size-sm);
+    line-height: var(--line-height-md);
+    cursor: pointer;
+    transition: all var(--transition-duration-default) ease-in-out;
+
+    &:hover {
+      background-color: var(--color-neutral-alpha-40);
+    }
+
+    &._primary_1lept_19 {
+      padding: var(--space-sm);
+      color: var(--color-neutral-540);
+
+      &[aria-selected='true'] {
+        background-color: var(--color-accent);
+        color: var(--color-white);
+
+        &:hover {
+          background-color: var(--color-accent-900);
+        }
+
+        &:disabled {
+          background-color: var(--color-neutral-alpha-60);
+          color: var(--color-neutral-340);
+        }
+      }
+    }
+
+    &._secondary_1lept_38 {
+      padding: calc(var(--space-sm) - var(--badge-tabs-item-border-width));
+      border: var(--badge-tabs-item-border-width) solid var(--color-transparent);
+      color: var(--color-neutral);
+
+      &[aria-selected='true'] {
+        border-color: var(--color-accent);
+
+        &:hover {
+          border-color: var(--color-accent-900);
+          background-color: var(--color-transparent);
+        }
+
+        &:disabled {
+          border-color: var(--color-neutral-alpha-120);
+          color: var(--color-neutral-340);
+        }
+      }
+    }
+
+    &:disabled {
+      color: var(--color-neutral-340);
+    }
   }
 }
 @layer ui_baza_components {
-  ._button_i0j1o_2 {
+  ._badgeTabsRoot_1qkat_2 {
+    display: flex;
+    position: relative;
+    align-items: center;
+    gap: var(--space-md);
+  }
+}
+@layer ui_baza_components {
+  ._button_a42bo_2 {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--space-2xl);
     cursor: pointer;
-    transition: all var(--transition-duration-default) var(--transition-timing-function-ease-in-out);
+    transition: all var(--transition-duration-default) ease-in-out;
 
-    &._accent_i0j1o_10 {
-      &._primary_i0j1o_11 {
+    &._accent_a42bo_10 {
+      &._primary_a42bo_11 {
         background-color: var(--color-accent);
         color: var(--color-white);
 
@@ -275,7 +355,7 @@ select {
         }
       }
 
-      &._secondary_i0j1o_29 {
+      &._secondary_a42bo_29 {
         background-color: var(--color-accent-alpha-100);
         color: var(--color-accent);
 
@@ -293,7 +373,7 @@ select {
         }
       }
 
-      &._tertiary_i0j1o_47 {
+      &._tertiary_a42bo_47 {
         background-color: var(--color-transparent);
         color: var(--color-accent);
 
@@ -312,8 +392,8 @@ select {
       }
     }
 
-    &._neutral_i0j1o_66 {
-      &._primary_i0j1o_11 {
+    &._neutral_a42bo_66 {
+      &._primary_a42bo_11 {
         background-color: var(--color-neutral);
         color: var(--color-white);
 
@@ -331,7 +411,7 @@ select {
         }
       }
 
-      &._secondary_i0j1o_29 {
+      &._secondary_a42bo_29 {
         background-color: var(--color-neutral-alpha-60);
         color: var(--color-neutral);
 
@@ -349,7 +429,7 @@ select {
         }
       }
 
-      &._tertiary_i0j1o_47 {
+      &._tertiary_a42bo_47 {
         background-color: var(--color-transparent);
         color: var(--color-neutral);
 
@@ -368,28 +448,428 @@ select {
       }
     }
 
-    &._lg_i0j1o_122 {
+    &._lg_a42bo_122 {
       min-height: calc(var(--line-height-lg) + var(--space-2xl) * 2);
       padding: var(--space-2xl);
-      border-radius: var(--radius-xl);
+      border-radius: var(--radius-2xl);
       font-size: var(--size-md);
       line-height: var(--line-height-lg);
     }
 
-    &._md_i0j1o_130 {
+    &._md_a42bo_130 {
       min-height: calc(var(--line-height-lg) + var(--space-lg) * 2);
       padding: var(--space-lg);
-      border-radius: var(--radius-lg);
+      border-radius: var(--radius-xl);
       font-size: var(--size-md);
       line-height: var(--line-height-lg);
     }
 
-    &._sm_i0j1o_138 {
+    &._sm_a42bo_138 {
       min-height: calc(var(--line-height-md) + var(--space-sm) * 2);
       padding: var(--space-sm);
+      border-radius: var(--radius-lg);
+      font-size: var(--size-sm);
+      line-height: var(--line-height-md);
+    }
+  }
+}
+@layer ui_baza_components {
+  ._checkboxWrapper_k1shg_2 {
+    --checkbox-size: 24px;
+    --checkbox-icon-size: 20px;
+
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    gap: var(--space-md);
+    color: var(--color-neutral);
+    font-weight: var(--font-weight-medium);
+    font-size: var(--size-md);
+    line-height: var(--line-height-lg);
+    cursor: pointer;
+    transition: color var(--transition-duration-default) ease-in-out;
+
+    &[data-disabled='true'] {
+      color: var(--color-neutral-340);
+      pointer-events: none;
+    }
+  }
+
+  ._icon_k1shg_23 {
+    position: absolute;
+    top: calc((var(--checkbox-size) - var(--checkbox-icon-size)) / 2);
+    left: calc((var(--checkbox-size) - var(--checkbox-icon-size)) / 2);
+
+    width: var(--checkbox-icon-size);
+    height: var(--checkbox-icon-size);
+    color: var(--color-white);
+
+    &[data-disabled='true'] {
+      color: var(--color-neutral-300);
+    }
+  }
+
+  ._checkbox_k1shg_2 {
+    width: var(--checkbox-size);
+    height: var(--checkbox-size);
+    padding: var(--space-2xs);
+    border-radius: var(--radius-sm);
+    background-color: var(--color-neutral-alpha-100);
+    cursor: pointer;
+    transition: all var(--transition-duration-default) ease-in-out;
+
+    &[data-state='checked'],
+    &[data-state='indeterminate'] {
+      background-color: var(--color-accent);
+    }
+
+    &:hover {
+      background-color: var(--color-neutral-alpha-120);
+
+      &[data-state='checked'],
+      &[data-state='indeterminate'] {
+        background-color: var(--color-accent-900);
+      }
+    }
+
+    &:disabled {
+      background-color: var(--color-neutral-alpha-100);
+    }
+  }
+}
+@layer ui_baza_components {
+  ._paginationItem_1ll6p_2 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: var(--aspect-ratio-square);
+    color: var(--color-neutral);
+    font-weight: var(--font-weight-medium);
+    text-align: center;
+    cursor: pointer;
+
+    &:hover,
+    &:active,
+    &:disabled {
+      transition: all var(--transition-duration-default) ease-in-out;
+    }
+
+    &[aria-current='page'] {
+      background-color: var(--color-neutral-alpha-60);
+    }
+
+    &:hover {
+      background-color: var(--color-neutral-alpha-40);
+
+      &[aria-current='page'] {
+        background-color: var(--color-neutral-alpha-80);
+      }
+    }
+
+    &:active {
+      background-color: var(--color-neutral-alpha-60);
+
+      &[aria-current='page'] {
+        background-color: var(--color-neutral-alpha-100);
+      }
+    }
+
+    &:disabled {
+      color: var(--color-neutral-340);
+
+      &[aria-current='page'] {
+        background-color: var(--color-neutral-alpha-60);
+      }
+    }
+
+    &._md_1ll6p_46 {
+      min-height: calc(var(--line-height-lg) + var(--space-lg) * 2);
+      padding-top: var(--space-lg);
+      padding-bottom: var(--space-lg);
+      border-radius: var(--radius-lg);
+      font-size: var(--size-md);
+      line-height: var(--line-height-lg);
+
+      & svg {
+        width: var(--line-height-lg);
+        height: var(--line-height-lg);
+      }
+    }
+
+    &._sm_1ll6p_60 {
+      min-height: calc(var(--line-height-md) + var(--space-sm) * 2);
+      padding-top: var(--space-sm);
+      padding-bottom: var(--space-sm);
       border-radius: var(--radius-md);
       font-size: var(--size-sm);
       line-height: var(--line-height-md);
+
+      & svg {
+        width: var(--line-height-md);
+        height: var(--line-height-md);
+      }
+    }
+  }
+}
+@layer ui_baza_components {
+  ._paginationRoot_c5fwx_2 {
+    display: flex;
+    align-items: center;
+  }
+
+  ._paginationList_c5fwx_7 {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2xs);
+  }
+
+  ._arrowLeft_c5fwx_13 {
+    transform: rotate(180deg);
+  }
+}
+@layer ui_baza_components {
+  ._radioWrapper_13xie_2 {
+    --radio-size: 24px;
+
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    gap: var(--space-md);
+    color: var(--color-neutral);
+    font-weight: var(--font-weight-medium);
+    font-size: var(--size-md);
+    line-height: var(--line-height-lg);
+    cursor: pointer;
+    transition: color var(--transition-duration-default) ease-in-out;
+
+    &[data-disabled='true'] {
+      color: var(--color-neutral-340);
+      pointer-events: none;
+    }
+  }
+
+  ._radio_13xie_2 {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--radio-size);
+    height: var(--radio-size);
+    padding: var(--space-2xs);
+    border-radius: var(--radius-full);
+    background-color: var(--color-neutral-alpha-100);
+    cursor: pointer;
+    transition: all var(--transition-duration-default) ease-in-out;
+
+    &::after {
+      display: block;
+      width: 50%;
+      height: 50%;
+      scale: 0;
+      border-radius: var(--radius-full);
+      background-color: var(--color-white);
+      content: '';
+      opacity: 0;
+      transition: all var(--transition-duration-default) ease-in-out;
+    }
+
+    &:checked {
+      background-color: var(--color-accent);
+
+      &::after {
+        scale: 1;
+        opacity: 1;
+      }
+    }
+
+    &:hover {
+      background-color: var(--color-neutral-alpha-120);
+
+      &:checked {
+        background-color: var(--color-accent-900);
+      }
+    }
+
+    &:disabled {
+      background-color: var(--color-neutral-alpha-100);
+    }
+  }
+}
+@layer ui_baza_components {
+  ._switchWrapper_1yukb_2 {
+    --switch-height: 24px;
+    --switch-width: 44px;
+    --switch-icon-size: 20px;
+    --switch-thumb-size: calc(var(--switch-height) - var(--space-xs) * 2);
+
+    display: inline-flex;
+    position: relative;
+    align-items: center;
+    gap: var(--space-md);
+    color: var(--color-neutral);
+    font-weight: var(--font-weight-medium);
+    font-size: var(--size-md);
+    line-height: var(--line-height-lg);
+    cursor: pointer;
+    transition: color var(--transition-duration-default) ease-in-out;
+
+    &[data-disabled='true'] {
+      color: var(--color-neutral-340);
+      pointer-events: none;
     }
   }
+
+  ._icon_1yukb_25 {
+    position: absolute;
+    top: calc((var(--switch-height) - var(--switch-icon-size)) / 2);
+    left: calc((var(--switch-width) - var(--switch-icon-size)) / 2);
+    width: var(--switch-icon-size);
+    height: var(--switch-icon-size);
+    color: var(--color-white);
+
+    &[data-disabled='true'] {
+      color: var(--color-neutral-300);
+    }
+  }
+
+  ._switch_1yukb_2 {
+    width: var(--switch-width);
+    height: var(--switch-height);
+    border-radius: var(--radius-full);
+    background-color: var(--color-neutral-alpha-100);
+    cursor: pointer;
+    transition: all var(--transition-duration-default) ease-in-out;
+
+    &::after {
+      display: block;
+      position: absolute;
+      top: var(--space-xs);
+      left: var(--space-xs);
+      width: var(--switch-thumb-size);
+      height: var(--switch-thumb-size);
+      border-radius: var(--radius-full);
+      background-color: var(--color-white);
+      content: '';
+      transition: all var(--transition-duration-default) ease-in-out;
+    }
+
+    &[data-state='checked'] {
+      &::after {
+        left: calc(var(--switch-width) - var(--switch-thumb-size) - var(--space-xs));
+      }
+    }
+
+    &[data-state='indeterminate'] {
+      &::after {
+        scale: 0.1;
+        opacity: 0;
+      }
+    }
+
+    &[data-state='checked'],
+    &[data-state='indeterminate'] {
+      background-color: var(--color-accent);
+    }
+
+    &:hover {
+      background-color: var(--color-neutral-alpha-120);
+
+      &[data-state='checked'],
+      &[data-state='indeterminate'] {
+        background-color: var(--color-accent-900);
+      }
+    }
+
+    &:disabled {
+      background-color: var(--color-neutral-alpha-100);
+
+      &::after {
+        background-color: var(--color-neutral-300);
+      }
+    }
+  }
+}
+@layer ui_baza_components {
+  ._tabsItem_beca6_2 {
+    --tabs-item-active-indicator-height: 2px;
+
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    padding-top: var(--space-lg);
+    padding-bottom: var(--space-lg);
+    color: var(--color-neutral-540);
+    font-weight: var(--font-weight-medium);
+    font-size: var(--size-md);
+    line-height: var(--line-height-lg);
+    cursor: pointer;
+    transition: all var(--transition-duration-default) ease-in-out;
+
+    &::after {
+      display: block;
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: var(--tabs-item-active-indicator-height);
+      background-color: var(--color-transparent);
+      content: '';
+      transition: all var(--transition-duration-default) ease-in-out;
+    }
+
+    &[aria-selected='true'] {
+      color: var(--color-neutral);
+    }
+
+    &[aria-selected='true']::after,
+    &:hover::after {
+      background-color: var(--color-accent);
+    }
+
+    &:disabled::after {
+      background-color: var(--color-transparent);
+      color: var(--color-neutral-340);
+    }
+
+    &:disabled {
+      color: var(--color-neutral-340);
+    }
+  }
+}
+@layer ui_baza_components {
+  @keyframes _showAfterDelay_1os90_1 {
+    to {
+      opacity: 1;
+    }
+  }
+
+  ._tabsRoot_1os90_8 {
+    --tabs-active-indicator-height: 2px;
+    --tabs-border-height: 1px;
+    --show-after-delay-animation: _showAfterDelay_1os90_1 calc(var(--transition-duration-default) * 10) forwards;
+
+    display: flex;
+    position: relative;
+    align-items: center;
+    gap: var(--space-md);
+
+    &::after {
+      display: block;
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      height: var(--tabs-border-height);
+      background-color: var(--color-neutral-alpha-120);
+      content: '';
+    }
+  }
+
+  ._indicator_1os90_29 {
+    position: absolute;
+    bottom: 0;
+    height: var(--tabs-active-indicator-height);
+    background-color: var(--color-accent);
+    animation: var(--show-after-delay-animation);
+    opacity: 0;
+    transition: all var(--transition-duration-default) ease-in-out;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grandbazar/ui-baza",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A lightweight and modular UI kit for building modern, accessible web interfaces. Designed for flexibility, scalability, and developer happiness.",
   "repository": {
     "type": "git",
@@ -66,6 +66,7 @@
   "devDependencies": {
     "@eslint/compat": "^1.3.2",
     "@eslint/js": "^9.35.0",
+    "@storybook/addon-a11y": "^9.1.5",
     "@storybook/addon-docs": "^9.1.5",
     "@storybook/react-vite": "^9.1.5",
     "@testing-library/jest-dom": "^6.8.0",
@@ -80,6 +81,7 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",