@shohojdhara/atomix 0.2.5 → 0.2.7

package/CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.7] - 2025-01-27
+
 ## [0.1.25] - 2025-07-02
 
 ### Fixed

package/README.md

@@ -136,12 +136,12 @@ Notes:
 Atomix provides 40+ production-ready components organized into categories:
 
 - **Actions**: [Button](src/components/Button), [Dropdown](src/components/Dropdown), [Pagination](src/components/Pagination)
-- **Data Display**: [Badge](src/components/Badge), [Card](src/components/Card), [Table](src/components/Table)
-- **Feedback**: [Alert](src/components/Alert), [Loader](src/components/Loader), [Progress](src/components/Progress)
+- **Data Display**: [Badge](src/components/Badge), [Card](src/components/Card), [DataTable](src/components/DataTable)
+- **Feedback**: [Callout](src/components/Callout), [Spinner](src/components/Spinner), [Progress](src/components/Progress)
 - **Forms**: [Checkbox](src/components/Checkbox), [Input](src/components/Input), [Select](src/components/Select)
 - **Navigation**: [Breadcrumb](src/components/Breadcrumb), [Navbar](src/components/Navbar), [Tabs](src/components/Tabs)
 - **Surfaces**: [Accordion](src/components/Accordion), [Callout](src/components/Callout), [Modal](src/components/Modal)
-- **Utilities**: [ColorModeToggle](src/components/ColorModeToggle), [Portal](src/components/Portal), [ThemeProvider](src/components/ThemeProvider)
+- **Utilities**: [ColorModeToggle](src/components/ColorModeToggle), [Icon](src/components/Icon), [AtomixGlass](src/components/AtomixGlass), [AtomixLogo](src/components/AtomixLogo)
 
 ## Design Tokens
 

package/dist/atomix.css

@@ -1730,7 +1730,7 @@ a, a:hover {
   position: relative;
   --atomix-glass-radius: var(--atomix-radius-md, 16px);
   --atomix-glass-transform: none;
-  --atomix-glass-transition: opacity var(--atomix-transition-duration, 0.2s) ease-out;
+  --atomix-glass-transition: all var(--atomix-transition-duration, 0s) ease-out;
   --atomix-glass-position: absolute;
   --atomix-glass-container-width: 100%;
   --atomix-glass-container-height: 100%;
@@ -1821,7 +1821,7 @@ a, a:hover {
   height: var(--atomix-glass-container-height);
   position: relative;
   border-radius: var(--atomix-glass-radius);
-  transition: border-radius 0.25s ease-out;
+  transition: var(--atomix-glass-transition);
 }
 .c-atomix-glass__inner {
   width: var(--atomix-glass-container-width);
@@ -1869,6 +1869,7 @@ a, a:hover {
 }
 .c-atomix-glass__background-layer--dark.c-atomix-glass__background-layer--over-light {
   opacity: var(--atomix-opacity-50, 0.5);
+  z-index: -1;
 }
 .c-atomix-glass__background-layer--black.c-atomix-glass__background-layer--over-light {
   opacity: var(--atomix-opacity-25, 0.25);
@@ -4402,23 +4403,50 @@ a, a:hover {
   cursor: pointer;
   padding: 0.5rem;
   border-radius: 50%;
-  transition: background-color 0.2s ease;
+  transition: background-color 0.2s ease, opacity 0.2s ease;
   color: var(--atomix-body-color);
 }
-.c-color-mode-toggle:hover {
+.c-color-mode-toggle:hover:not(:disabled) {
   background-color: rgba(0, 0, 0, 0.05);
 }
-.c-color-mode-toggle:focus {
+.c-color-mode-toggle:focus-visible {
   outline: none;
   box-shadow: 0 0 0 2px var(--atomix-primary);
 }
+.c-color-mode-toggle:active:not(:disabled) {
+  transform: scale(0.95);
+}
 .c-color-mode-toggle svg {
-  width: 1.5rem;
-  height: 1.5rem;
+  display: block;
+  transition: transform 0.2s ease;
+}
+.c-color-mode-toggle--sm {
+  padding: 0.375rem;
+}
+.c-color-mode-toggle--md {
+  padding: 0.5rem;
+}
+.c-color-mode-toggle--lg {
+  padding: 0.625rem;
+}
+.c-color-mode-toggle--disabled, .c-color-mode-toggle:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
 }
-[data-atomix-theme=dark] .c-color-mode-toggle:hover {
+[data-atomix-theme=dark] .c-color-mode-toggle:hover:not(:disabled) {
   background-color: rgba(255, 255, 255, 0.1);
 }
+@media (prefers-reduced-motion: reduce) {
+  .c-color-mode-toggle {
+    transition: none;
+  }
+  .c-color-mode-toggle svg {
+    transition: none;
+  }
+  .c-color-mode-toggle:active:not(:disabled) {
+    transform: none;
+  }
+}
 .c-countdown {
   --atomix-countdown-color: var(--atomix-body-color);
   --atomix-countdown-font-size: 1rem;
@@ -6269,7 +6297,7 @@ a, a:hover {
   inset: 0;
   background-color: var(--atomix-hero-overlay);
   opacity: var(--atomix-hero-overlay-opacity);
-  z-index: 0;
+  z-index: 1;
 }
 .c-hero__container {
   position: relative;
@@ -6339,6 +6367,46 @@ a, a:hover {
 .c-hero--full-vh {
   min-height: 100vh;
 }
+.c-hero__slider {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  z-index: 0;
+}
+.c-hero__slider-item {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  transition: opacity var(--slider-transition-duration, 1000ms) ease-in-out;
+  pointer-events: none;
+}
+.c-hero__slider-item img,
+.c-hero__slider-item video {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center;
+     object-position: center;
+}
+.c-hero__slider-item--active {
+  opacity: 1;
+  pointer-events: auto;
+  z-index: 1;
+}
+.c-hero__slider--fade .c-hero__slider-item {
+  transition: opacity var(--slider-transition-duration, 1000ms) ease-in-out;
+}
+.c-hero__slider--slide .c-hero__slider-item {
+  transform: translateX(100%);
+  transition: transform var(--slider-transition-duration, 1000ms) ease-in-out;
+}
+.c-hero__slider--slide .c-hero__slider-item--active {
+  transform: translateX(0);
+}
+.c-hero__slider--custom .c-hero__slider-item {
+  transition: all var(--slider-transition-duration, 1000ms) ease-in-out;
+}
 .c-form-group {
   --atomix-input-group-width: 100%;
   --atomix-input-group-label-color: var(--atomix-secondary-text-emphasis);