@shohojdhara/atomix 0.2.6 → 0.2.8

package/CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.8] - 2025-01-28
+
+## [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

@@ -2368,12 +2368,76 @@ a, a:hover {
 .c-btn--icon {
   --atomix-btn-padding-x: var(--atomix-btn-padding-y);
 }
+.c-btn--full-width {
+  width: 100%;
+}
+.c-btn--block {
+  display: block;
+  width: 100%;
+}
+.c-btn--loading {
+  position: relative;
+  pointer-events: none;
+  cursor: wait;
+}
+.c-btn--loading::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: var(--atomix-btn-border-radius);
+  z-index: 0;
+}
+.c-btn--active {
+  --atomix-btn-bg: var(--atomix-btn-active-bg, var(--atomix-btn-hover-bg));
+  --atomix-btn-color: var(--atomix-btn-active-color, var(--atomix-btn-hover-color));
+  --atomix-btn-border-color: var(--atomix-btn-active-border-color, var(--atomix-btn-hover-border-color));
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+.c-btn--selected {
+  --atomix-btn-border-width: 2px;
+  --atomix-btn-border-color: var(--atomix-brand-border-subtle, var(--atomix-primary));
+  box-shadow: 0 0 0 2px rgba(var(--atomix-primary-rgb, 124, 58, 237), 0.2);
+}
+.c-btn__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.c-btn__icon--start {
+  order: -1;
+}
+.c-btn__icon--end {
+  order: 1;
+}
+.c-btn__label {
+  display: inline-block;
+}
+.c-btn__spinner {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-right: 0.5rem;
+}
+.c-btn__spinner:last-child {
+  margin-right: 0;
+  margin-left: 0.5rem;
+}
+.c-btn:focus-visible {
+  outline: 2px solid var(--atomix-brand-border-subtle, var(--atomix-primary));
+  outline-offset: 2px;
+  box-shadow: var(--atomix-btn-focus-box-shadow);
+}
 .c-btn:disabled, .c-btn--disabled, fieldset:disabled .c-btn {
   color: var(--atomix-btn-disabled-color);
   pointer-events: none;
   background-color: var(--atomix-btn-disabled-bg);
   border-color: var(--atomix-btn-disabled-border-color);
   opacity: var(--atomix-btn-disabled-opacity);
+  cursor: not-allowed;
+}
+.c-btn:disabled:focus-visible, .c-btn--disabled:focus-visible, fieldset:disabled .c-btn:focus-visible {
+  outline: none;
 }
 .c-btn--glass {
   background-color: color-mix(in srgb, var(--atomix-btn-bg) 50%, transparent);
@@ -2381,6 +2445,22 @@ a, a:hover {
 .c-btn--glass:hover {
   background-color: color-mix(in srgb, var(--atomix-btn-hover-bg) 50%, transparent);
 }
+@media (prefers-reduced-motion: reduce) {
+  .c-btn {
+    transition: none;
+  }
+  .c-btn__spinner {
+    animation-duration: 2s;
+  }
+}
+@media (prefers-contrast: high) {
+  .c-btn {
+    border-width: 2px;
+  }
+  .c-btn:focus-visible {
+    outline-width: 3px;
+  }
+}
 .c-datepicker {
   --atomix-datepicker-width: 19rem;
   --atomix-datepicker-padding-x: 0.5rem;
@@ -2843,6 +2923,19 @@ a, a:hover {
   transition-timing-function: ease-in-out;
   transition-delay: 0s;
   background-color: var(--atomix-card-bg);
+  display: block;
+  text-decoration: none;
+  color: inherit;
+}
+.c-card[href] {
+  display: block;
+  text-decoration: none !important;
+  color: inherit !important;
+  cursor: pointer;
+}
+.c-card[href]:hover, .c-card[href]:focus, .c-card[href]:visited, .c-card[href]:active {
+  text-decoration: none !important;
+  color: inherit !important;
 }
 .c-card__header {
   margin-bottom: var(--atomix-card-header-spacer-y);
@@ -2920,15 +3013,204 @@ a, a:hover {
   padding: var(--atomix-card-row-spacer-y) var(--atomix-card-row-spacer-x);
   padding-top: 0;
 }
+.c-card--sm {
+  --atomix-card-spacer-y: 0.5rem;
+  --atomix-card-spacer-x: 0.5rem;
+  --atomix-card-title-font-size: var(--atomix-font-size-sm);
+  --atomix-card-text-font-size: var(--atomix-font-size-xs);
+}
+.c-card--lg {
+  --atomix-card-spacer-y: 1.5rem;
+  --atomix-card-spacer-x: 1.5rem;
+  --atomix-card-title-font-size: var(--atomix-font-size-lg);
+  --atomix-card-text-font-size: var(--atomix-font-size-base);
+}
+.c-card--filled {
+  background-color: var(--atomix-card-bg);
+}
+.c-card--outlined {
+  background-color: transparent;
+  border-width: var(--atomix-card-border-width);
+}
+.c-card--ghost {
+  background-color: transparent;
+  border: none;
+}
+.c-card--elevated {
+  box-shadow: var(--atomix-box-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+}
+.c-card--elevation-none {
+  box-shadow: none;
+}
+.c-card--elevation-sm {
+  box-shadow: var(--atomix-box-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+}
+.c-card--elevation-md {
+  box-shadow: var(--atomix-box-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+}
+.c-card--elevation-lg {
+  box-shadow: var(--atomix-box-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
+}
+.c-card--elevation-xl {
+  box-shadow: var(--atomix-box-shadow-xl, 0 20px 25px rgba(0, 0, 0, 0.1));
+}
+.c-card--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.c-card--loading {
+  position: relative;
+  pointer-events: none;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  overflow: hidden;
+}
+.c-card--loading::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-color: rgba(255, 255, 255, 0.7);
+  -webkit-backdrop-filter: blur(1px);
+          backdrop-filter: blur(1px);
+  z-index: 1;
+  border-radius: var(--atomix-card-border-radius);
+}
+[data-theme=dark] .c-card--loading::before, .c-card--loading.dark::before {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.c-card--selected {
+  --atomix-card-border-color: var(--atomix-brand-border-subtle);
+  --atomix-card-border-width: 2px;
+  box-shadow: var(--atomix-box-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+}
+.c-card--interactive {
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+}
+.c-card--interactive:hover:not(.c-card--interactive--disabled) {
+  transform: translateY(-2px);
+  box-shadow: var(--atomix-box-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
+}
+.c-card--interactive:active:not(.c-card--interactive--disabled) {
+  transform: translateY(0);
+}
+.c-card--primary {
+  --atomix-card-bg: var(--atomix-brand-bg-subtle);
+  --atomix-card-bg-hover: var(--atomix-brand-bg-subtle);
+  --atomix-card-border-color: var(--atomix-brand-border-subtle);
+  --atomix-card-title-color: var(--atomix-brand-text-emphasis);
+}
+.c-card--secondary {
+  --atomix-card-bg: var(--atomix-secondary-bg-subtle);
+  --atomix-card-bg-hover: var(--atomix-secondary-bg-subtle);
+  --atomix-card-border-color: var(--atomix-secondary-border-subtle);
+  --atomix-card-title-color: var(--atomix-secondary-text-emphasis);
+}
+.c-card--success {
+  --atomix-card-bg: var(--atomix-success-bg-subtle);
+  --atomix-card-bg-hover: var(--atomix-success-bg-subtle);
+  --atomix-card-border-color: var(--atomix-success-border-subtle);
+  --atomix-card-title-color: var(--atomix-success-text-emphasis);
+}
+.c-card--info {
+  --atomix-card-bg: var(--atomix-info-bg-subtle);
+  --atomix-card-bg-hover: var(--atomix-info-bg-subtle);
+  --atomix-card-border-color: var(--atomix-info-border-subtle);
+  --atomix-card-title-color: var(--atomix-info-text-emphasis);
+}
+.c-card--warning {
+  --atomix-card-bg: var(--atomix-warning-bg-subtle);
+  --atomix-card-bg-hover: var(--atomix-warning-bg-subtle);
+  --atomix-card-border-color: var(--atomix-warning-border-subtle);
+  --atomix-card-title-color: var(--atomix-warning-text-emphasis);
+}
+.c-card--error {
+  --atomix-card-bg: var(--atomix-error-bg-subtle);
+  --atomix-card-bg-hover: var(--atomix-error-bg-subtle);
+  --atomix-card-border-color: var(--atomix-error-border-subtle);
+  --atomix-card-title-color: var(--atomix-error-text-emphasis);
+}
+.c-card--light {
+  --atomix-card-bg: var(--atomix-light);
+  --atomix-card-bg-hover: var(--atomix-light-hover);
+  --atomix-card-border-color: var(--atomix-light);
+  --atomix-card-title-color: var(--atomix-dark);
+  --atomix-card-text-color: rgba(0, 0, 0, 0.7);
+}
+.c-card--dark {
+  --atomix-card-bg: var(--atomix-dark);
+  --atomix-card-bg-hover: var(--atomix-dark-hover);
+  --atomix-card-border-color: var(--atomix-dark);
+  --atomix-card-title-color: var(--atomix-light);
+  --atomix-card-text-color: rgba(255, 255, 255, 0.8);
+}
 .c-card--glass {
   max-width: none;
   background-color: color-mix(in srgb, var(--atomix-card-bg) 50%, transparent);
 }
+.c-card__loading {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 2;
+  border-radius: var(--atomix-card-border-radius);
+  pointer-events: none;
+}
+.c-card__spinner {
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 4px solid;
+  border-color: var(--atomix-border-primary, rgba(0, 0, 0, 0.15));
+  border-top-color: var(--atomix-brand-text-emphasis, var(--atomix-primary, #7c3aed));
+  border-right-color: var(--atomix-brand-text-emphasis, var(--atomix-primary, #7c3aed));
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  background-color: transparent;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  display: block;
+}
+.c-card:focus-visible {
+  outline: 2px solid var(--atomix-brand-border-subtle);
+  outline-offset: 2px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .c-card {
+    transition: none;
+  }
+  .c-card--interactive:hover:not(.c-card--disabled) {
+    transform: none;
+  }
+  .c-card__spinner {
+    animation: none;
+    border-top-color: transparent;
+  }
+}
+@media (prefers-contrast: high) {
+  .c-card {
+    border-width: 2px;
+  }
+  .c-card--selected {
+    border-width: 3px;
+  }
+}
 .is-elevated .c-card {
   box-shadow: var(--atomix-box-shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.175));
   z-index: 1;
   transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
 .c-chart {
   --atomix-chart-primary-color: var(--atomix-primary);
   --atomix-chart-secondary-color: var(--atomix-secondary);
@@ -6297,7 +6579,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;
@@ -6367,6 +6649,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);
@@ -9993,24 +10315,52 @@ a, a:hover {
   --atomix-tooltip-bg: var(--atomix-invert-bg-subtle);
   --atomix-tooltip-font-size: 0.75rem;
   --atomix-tooltip-font-weight: 400;
-  --atomix-tooltip-color: var(--atomix-invert-text-emphasis);
+  --atomix-tooltip-color: var(--atomix-invert-text);
   --atomix-tooltip-border-radius: 0.5rem;
   --atomix-tooltip-border-width: ;
   --atomix-tooltip-border-color: ;
   --atomix-tooltip-box-shadow: ;
   --atomix-tooltip-arrow-size: 0.75rem;
+  --atomix-tooltip-offset: 0.75rem;
   position: absolute;
-  bottom: calc(100% + var(--atomix-tooltip-arrow-size));
-  left: 50%;
   width: -moz-max-content;
   width: max-content;
   height: -moz-max-content;
   height: max-content;
   max-width: var(--atomix-tooltip-max-width);
-  transform: translateX(-50%);
   pointer-events: none;
   z-index: 1000;
 }
+.c-tooltip--top, .c-tooltip--top-left, .c-tooltip--top-right {
+  bottom: calc(100% + var(--atomix-tooltip-offset));
+  transform-origin: bottom center;
+}
+.c-tooltip--bottom, .c-tooltip--bottom-left, .c-tooltip--bottom-right {
+  top: calc(100% + var(--atomix-tooltip-offset));
+  transform-origin: top center;
+}
+.c-tooltip--left {
+  right: calc(100% + var(--atomix-tooltip-offset));
+  top: 50%;
+  transform: translateY(-50%);
+  transform-origin: right center;
+}
+.c-tooltip--right {
+  left: calc(100% + var(--atomix-tooltip-offset));
+  top: 50%;
+  transform: translateY(-50%);
+  transform-origin: left center;
+}
+.c-tooltip--top, .c-tooltip--bottom {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.c-tooltip--top-left, .c-tooltip--bottom-left {
+  left: 0;
+}
+.c-tooltip--top-right, .c-tooltip--bottom-right {
+  right: 0;
+}
 .c-tooltip__content {
   position: relative;
   color: var(--atomix-tooltip-color);
@@ -10019,10 +10369,12 @@ a, a:hover {
   padding: var(--atomix-tooltip-padding-y) var(--atomix-tooltip-padding-x);
   background-color: var(--atomix-tooltip-bg);
   border-radius: var(--atomix-tooltip-border-radius);
+  box-shadow: var(--atomix-tooltip-box-shadow);
   z-index: 2;
   opacity: 0;
+  pointer-events: auto;
+  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   transform: scale(0.95);
-  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
 }
 .c-tooltip__content.is-active {
   opacity: 1;
@@ -10030,71 +10382,37 @@ a, a:hover {
 }
 .c-tooltip__arrow {
   position: absolute;
-  bottom: calc(var(--atomix-tooltip-arrow-size) / -2);
-  left: 50%;
-  transform: translateX(-50%) rotate(45deg);
   width: var(--atomix-tooltip-arrow-size);
   height: var(--atomix-tooltip-arrow-size);
   background-color: var(--atomix-tooltip-bg);
   z-index: 1;
-}
-.c-tooltip--top-left {
-  left: auto;
-  right: calc(100% - var(--atomix-tooltip-arrow-size) * 2);
-  transform: translateX(0);
-}
-.c-tooltip--top-left .c-tooltip__arrow {
-  left: auto;
-  right: var(--atomix-tooltip-arrow-size);
   transform: rotate(45deg);
 }
-.c-tooltip--top-right {
-  left: calc(100% - var(--atomix-tooltip-arrow-size) * 2);
-  transform: translateX(0);
+.c-tooltip--top .c-tooltip__arrow, .c-tooltip--top-left .c-tooltip__arrow, .c-tooltip--top-right .c-tooltip__arrow {
+  bottom: calc(var(--atomix-tooltip-arrow-size) / -2);
 }
-.c-tooltip--top-right .c-tooltip__arrow {
-  left: var(--atomix-tooltip-arrow-size);
-  transform: rotate(45deg);
+.c-tooltip--bottom .c-tooltip__arrow, .c-tooltip--bottom-left .c-tooltip__arrow, .c-tooltip--bottom-right .c-tooltip__arrow {
+  top: calc(var(--atomix-tooltip-arrow-size) / -2);
 }
-.c-tooltip--right {
-  left: calc(100% + var(--atomix-tooltip-arrow-size));
+.c-tooltip--left .c-tooltip__arrow {
+  right: calc(var(--atomix-tooltip-arrow-size) / -2);
   top: 50%;
-  transform: translateY(-50%);
+  transform: translateY(-50%) rotate(45deg);
 }
 .c-tooltip--right .c-tooltip__arrow {
   left: calc(var(--atomix-tooltip-arrow-size) / -2);
   top: 50%;
-  bottom: auto;
-  transform: rotate(45deg) translateY(-50%);
-  transform-origin: top;
-}
-.c-tooltip--left {
-  left: auto;
-  right: calc(100% + var(--atomix-tooltip-arrow-size));
-  top: 50%;
-  transform: translateY(-50%);
-}
-.c-tooltip--left .c-tooltip__arrow {
-  left: auto;
-  top: 50%;
-  bottom: auto;
-  right: calc(var(--atomix-tooltip-arrow-size) / -5);
-  transform: rotate(45deg) translateY(-50%);
-}
-.c-tooltip--bottom {
-  top: calc(100% + var(--atomix-tooltip-arrow-size));
+  transform: translateY(-50%) rotate(45deg);
 }
-.c-tooltip--bottom .c-tooltip__arrow {
-  top: calc(var(--atomix-tooltip-arrow-size) / -2);
-  bottom: auto;
+.c-tooltip--top .c-tooltip__arrow, .c-tooltip--bottom .c-tooltip__arrow {
+  left: 50%;
+  transform: translateX(-50%) rotate(45deg);
 }
-.c-tooltip--bottom-left {
-  top: calc(100% + var(--atomix-tooltip-arrow-size));
-  left: 0;
+.c-tooltip--top-left .c-tooltip__arrow, .c-tooltip--bottom-left .c-tooltip__arrow {
+  left: var(--atomix-tooltip-arrow-size);
 }
-.c-tooltip--bottom-right {
-  top: calc(100% + var(--atomix-tooltip-arrow-size));
-  right: 0;
+.c-tooltip--top-right .c-tooltip__arrow, .c-tooltip--bottom-right .c-tooltip__arrow {
+  right: var(--atomix-tooltip-arrow-size);
 }
 .c-upload {
   --atomix-upload-width: 31.25rem;