@shohojdhara/atomix 0.2.6 → 0.2.8

package/src/styles/06-components/_components.card.scss

@@ -1,7 +1,9 @@
 @use 'sass:map';
 @use '../01-settings/settings.config' as *;
 @use '../01-settings/settings.card' as *;
+@use '../01-settings/settings.spacing' as spacing;
 @use '../01-settings/settings.border-radius' as *;
+@use '../01-settings/settings.maps' as maps;
 @use '../02-tools/tools.rem' as *;
 @use '../02-tools/tools.animations' as *;
 @use '../02-tools/tools.object-fit' as *;
@@ -44,6 +46,28 @@
 
   @include dynamic-background(var(--#{$prefix}card-bg));
 
+  // Link card support - ensure anchor elements behave like block elements
+  display: block;
+  text-decoration: none;
+  color: inherit;
+
+  // Reset anchor element default styles when card is used as a link
+  // This needs higher specificity to override global link styles
+  &[href] {
+    display: block;
+    text-decoration: none !important;
+    color: inherit !important;
+    cursor: pointer;
+
+    &:hover,
+    &:focus,
+    &:visited,
+    &:active {
+      text-decoration: none !important;
+      color: inherit !important;
+    }
+  }
+
   &__header {
     margin-bottom: var(--#{$prefix}card-header-spacer-y);
   }
@@ -138,13 +162,201 @@
     }
   }
 
+ 
+
+  &--sm {
+    --#{$prefix}card-spacer-y: #{rem(map.get(spacing.$spacing-sizes, 2))}; // 8px
+    --#{$prefix}card-spacer-x: #{rem(map.get(spacing.$spacing-sizes, 2))}; // 8px
+    --#{$prefix}card-title-font-size: var(--#{$prefix}font-size-sm);
+    --#{$prefix}card-text-font-size: var(--#{$prefix}font-size-xs);
+  }
+
+  // &--md is the default size, no modifier needed
+
+  &--lg {
+    --#{$prefix}card-spacer-y: #{rem(map.get(spacing.$spacing-sizes, 6))}; // 24px
+    --#{$prefix}card-spacer-x: #{rem(map.get(spacing.$spacing-sizes, 6))}; // 24px
+    --#{$prefix}card-title-font-size: var(--#{$prefix}font-size-lg);
+    --#{$prefix}card-text-font-size: var(--#{$prefix}font-size-base);
+  }
+
+  &--filled {
+    // Default appearance - solid background
+    @include dynamic-background(var(--#{$prefix}card-bg));
+  }
+
+  &--outlined {
+    background-color: transparent;
+    border-width: var(--#{$prefix}card-border-width);
+  }
+
+  &--ghost {
+    background-color: transparent;
+    border: none;
+  }
+
+  &--elevated {
+    box-shadow: var(--#{$prefix}box-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+  }
+
+  &--elevation-none {
+    box-shadow: none;
+  }
+
+  &--elevation-sm {
+    box-shadow: var(--#{$prefix}box-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+  }
+
+  &--elevation-md {
+    box-shadow: var(--#{$prefix}box-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+  }
+
+  &--elevation-lg {
+    box-shadow: var(--#{$prefix}box-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
+  }
+
+  &--elevation-xl {
+    box-shadow: var(--#{$prefix}box-shadow-xl, 0 20px 25px rgba(0, 0, 0, 0.1));
+  }
+
+  &--disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+    pointer-events: none;
+    user-select: none;
+  }
+
+  &--loading {
+    position: relative;
+    pointer-events: none;
+    user-select: none;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: rgba(255, 255, 255, 0.7);
+      backdrop-filter: blur(1px);
+      z-index: 1;
+      border-radius: var(--#{$prefix}card-border-radius);
+    }
+
+    // Dark theme support
+    [data-theme='dark'] &,
+    &.dark {
+      &::before {
+        background-color: rgba(0, 0, 0, 0.5);
+      }
+    }
+  }
+
+  &--selected {
+    --#{$prefix}card-border-color: var(--#{$prefix}brand-border-subtle);
+    --#{$prefix}card-border-width: 2px;
+    box-shadow: var(--#{$prefix}box-shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
+  }
+
+  &--interactive {
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+
+    &:hover:not(&--disabled) {
+      transform: translateY(-2px);
+      box-shadow: var(--#{$prefix}box-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
+    }
+
+    &:active:not(&--disabled) {
+      transform: translateY(0);
+    }
+  }
+
+  @each $color, $value in maps.$theme-colors {
+    &--#{$color} {
+      @if ($color == 'primary') {
+        --#{$prefix}card-bg: var(--#{$prefix}brand-bg-subtle);
+        --#{$prefix}card-bg-hover: var(--#{$prefix}brand-bg-subtle);
+        --#{$prefix}card-border-color: var(--#{$prefix}brand-border-subtle);
+        --#{$prefix}card-title-color: var(--#{$prefix}brand-text-emphasis);
+      } @else if ($color == 'dark') {
+        --#{$prefix}card-bg: var(--#{$prefix}dark);
+        --#{$prefix}card-bg-hover: var(--#{$prefix}dark-hover);
+        --#{$prefix}card-border-color: var(--#{$prefix}dark);
+        --#{$prefix}card-title-color: var(--#{$prefix}light);
+        --#{$prefix}card-text-color: rgba(255, 255, 255, 0.8);
+      } @else if ($color == 'light') {
+        --#{$prefix}card-bg: var(--#{$prefix}light);
+        --#{$prefix}card-bg-hover: var(--#{$prefix}light-hover);
+        --#{$prefix}card-border-color: var(--#{$prefix}light);
+        --#{$prefix}card-title-color: var(--#{$prefix}dark);
+        --#{$prefix}card-text-color: rgba(0, 0, 0, 0.7);
+      } @else {
+        --#{$prefix}card-bg: var(--#{$prefix}#{$color}-bg-subtle);
+        --#{$prefix}card-bg-hover: var(--#{$prefix}#{$color}-bg-subtle);
+        --#{$prefix}card-border-color: var(--#{$prefix}#{$color}-border-subtle);
+        --#{$prefix}card-title-color: var(--#{$prefix}#{$color}-text-emphasis);
+      }
+    }
+  }
+
   &--glass {
     max-width: none;
     @include dynamic-background(var(--#{$prefix}card-bg), $background-transparency-enable: true);
   }
+
+  &__loading {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+    border-radius: var(--#{$prefix}card-border-radius);
+    pointer-events: none;
+  }
+
+  &__spinner {
+    width: 2.5rem;
+    height: 2.5rem;
+    border: 4px solid;
+    border-color: var(--#{$prefix}border-primary, rgba(0, 0, 0, 0.15));
+    border-top-color: var(--#{$prefix}brand-text-emphasis, var(--#{$prefix}primary, #7c3aed));
+    border-right-color: var(--#{$prefix}brand-text-emphasis, var(--#{$prefix}primary, #7c3aed));
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    background-color: transparent;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    display: block;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--#{$prefix}brand-border-subtle);
+    outline-offset: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+
+    &--interactive:hover:not(&--disabled) {
+      transform: none;
+    }
+
+    &__spinner {
+      animation: none;
+      border-top-color: transparent;
+    }
+  }
+
+  @media (prefers-contrast: high) {
+    border-width: 2px;
+
+    &--selected {
+      border-width: 3px;
+    }
+  }
 }
 
-// Elevation effect for ElevationCard
 .is-elevated {
   .c-card {
     box-shadow: var(--#{$prefix}box-shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.175));
@@ -152,3 +364,9 @@
     transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   }
 }
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/styles/06-components/_components.hero.scss

@@ -60,7 +60,7 @@
     inset: 0;
     @include dynamic-background(var(--#{$prefix}hero-overlay));
     opacity: var(--#{$prefix}hero-overlay-opacity);
-    z-index: 0;
+    z-index: 1;
   }
 
   &__container {
@@ -145,4 +145,54 @@
   &--full-vh {
     min-height: 100vh;
   }
+
+  &__slider {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+    z-index: 0;
+  }
+
+  &__slider-item {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    transition: opacity var(--slider-transition-duration, 1000ms) ease-in-out;
+    pointer-events: none;
+
+    img,
+    video {
+      @include square(100%);
+      @include object-fit(cover);
+    }
+
+    &--active {
+      opacity: 1;
+      pointer-events: auto;
+      z-index: 1;
+    }
+  }
+
+  &__slider--fade {
+    .c-hero__slider-item {
+      transition: opacity var(--slider-transition-duration, 1000ms) ease-in-out;
+    }
+  }
+
+  &__slider--slide {
+    .c-hero__slider-item {
+      transform: translateX(100%);
+      transition: transform var(--slider-transition-duration, 1000ms) ease-in-out;
+
+      &--active {
+        transform: translateX(0);
+      }
+    }
+  }
+
+  &__slider--custom {
+    .c-hero__slider-item {
+      transition: all var(--slider-transition-duration, 1000ms) ease-in-out;
+    }
+  }
 }

package/src/styles/06-components/_components.tooltip.scss

@@ -19,17 +19,61 @@
   --#{$prefix}tooltip-border-color: #{$tooltip-border-color};
   --#{$prefix}tooltip-box-shadow: #{$tooltip-box-shadow};
   --#{$prefix}tooltip-arrow-size: #{rem($tooltip-arrow-size)};
+  --#{$prefix}tooltip-offset: #{rem($tooltip-arrow-size)}; // Default offset
 
   position: absolute;
-  bottom: calc(100% + var(--#{$prefix}tooltip-arrow-size));
-  left: 50%;
   width: max-content;
   height: max-content;
   max-width: var(--#{$prefix}tooltip-max-width);
-  transform: translateX(-50%);
-  pointer-events: none;
+  pointer-events: none; // Wrapper shouldn't block clicks, but content might
   z-index: 1000;
 
+  // Base positioning logic
+  &--top,
+  &--top-left,
+  &--top-right {
+    bottom: calc(100% + var(--#{$prefix}tooltip-offset));
+    transform-origin: bottom center;
+  }
+
+  &--bottom,
+  &--bottom-left,
+  &--bottom-right {
+    top: calc(100% + var(--#{$prefix}tooltip-offset));
+    transform-origin: top center;
+  }
+
+  &--left {
+    right: calc(100% + var(--#{$prefix}tooltip-offset));
+    top: 50%;
+    transform: translateY(-50%);
+    transform-origin: right center;
+  }
+
+  &--right {
+    left: calc(100% + var(--#{$prefix}tooltip-offset));
+    top: 50%;
+    transform: translateY(-50%);
+    transform-origin: left center;
+  }
+
+  // Horizontal alignment for top/bottom
+  &--top,
+  &--bottom {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  &--top-left,
+  &--bottom-left {
+    left: 0;
+  }
+
+  &--top-right,
+  &--bottom-right {
+    right: 0;
+  }
+
   &__content {
     position: relative;
     color: var(--#{$prefix}tooltip-color);
@@ -38,12 +82,20 @@
     padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
     @include dynamic-background(var(--#{$prefix}tooltip-bg));
     border-radius: var(--#{$prefix}tooltip-border-radius);
+    box-shadow: var(--#{$prefix}tooltip-box-shadow);
     z-index: 2;
     opacity: 0;
-    transform: scale(0.95);
+    pointer-events: auto; // Allow interaction with tooltip content
+
+    // Animation
     transition:
-      opacity 0.2s ease-out,
-      transform 0.2s ease-out;
+      opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+      transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+
+    // Initial states for animation based on position would be complex to do purely generically here without separate classes
+    // So we stick to a simple scale/fade
+    transform: scale(0.95);
+
     &.is-active {
       opacity: 1;
       transform: scale(1);
@@ -52,81 +104,52 @@
 
   &__arrow {
     position: absolute;
-    bottom: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
-    left: 50%;
-    transform: translateX(-50%) rotate(45deg);
-    @include square(var(--#{$prefix}tooltip-arrow-size));
+    width: var(--#{$prefix}tooltip-arrow-size);
+    height: var(--#{$prefix}tooltip-arrow-size);
     @include dynamic-background(var(--#{$prefix}tooltip-bg));
     z-index: 1;
+    transform: rotate(45deg);
   }
 
-  &--top-left {
-    left: auto;
-    right: calc(100% - var(--#{$prefix}tooltip-arrow-size) * 2);
-    transform: translateX(0);
-
-    #{$root}__arrow {
-      left: auto;
-      right: var(--#{$prefix}tooltip-arrow-size);
-      transform: rotate(45deg);
-    }
+  // Arrow positioning
+  &--top &__arrow,
+  &--top-left &__arrow,
+  &--top-right &__arrow {
+    bottom: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
   }
 
-  &--top-right {
-    left: calc(100% - var(--#{$prefix}tooltip-arrow-size) * 2);
-    transform: translateX(0);
-
-    #{$root}__arrow {
-      left: var(--#{$prefix}tooltip-arrow-size);
-      transform: rotate(45deg);
-    }
+  &--bottom &__arrow,
+  &--bottom-left &__arrow,
+  &--bottom-right &__arrow {
+    top: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
   }
 
-  &--right {
-    left: calc(100% + var(--#{$prefix}tooltip-arrow-size));
+  &--left &__arrow {
+    right: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
     top: 50%;
-    transform: translateY(-50%);
-
-    #{$root}__arrow {
-      left: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
-      top: 50%;
-      bottom: auto;
-      transform: rotate(45deg) translateY(-50%);
-      transform-origin: top;
-    }
+    transform: translateY(-50%) rotate(45deg);
   }
 
-  &--left {
-    left: auto;
-    right: calc(100% + var(--#{$prefix}tooltip-arrow-size));
+  &--right &__arrow {
+    left: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
     top: 50%;
-    transform: translateY(-50%);
-
-    #{$root}__arrow {
-      left: auto;
-      top: 50%;
-      bottom: auto;
-      right: calc(var(--#{$prefix}tooltip-arrow-size) / -5);
-      transform: rotate(45deg) translateY(-50%);
-    }
+    transform: translateY(-50%) rotate(45deg);
   }
 
-  &--bottom {
-    top: calc(100% + var(--#{$prefix}tooltip-arrow-size));
-
-    #{$root}__arrow {
-      top: calc(var(--#{$prefix}tooltip-arrow-size) / -2);
-      bottom: auto;
-    }
+  // Arrow horizontal alignment
+  &--top &__arrow,
+  &--bottom &__arrow {
+    left: 50%;
+    transform: translateX(-50%) rotate(45deg);
   }
 
-  &--bottom-left {
-    top: calc(100% + var(--#{$prefix}tooltip-arrow-size));
-    left: 0;
+  &--top-left &__arrow,
+  &--bottom-left &__arrow {
+    left: var(--#{$prefix}tooltip-arrow-size);
   }
 
-  &--bottom-right {
-    top: calc(100% + var(--#{$prefix}tooltip-arrow-size));
-    right: 0;
+  &--top-right &__arrow,
+  &--bottom-right &__arrow {
+    right: var(--#{$prefix}tooltip-arrow-size);
   }
-}
+}

package/src/components/Tab/index.ts

@@ -1,2 +0,0 @@
-export { Tab } from './Tab';
-export type { TabProps, TabItemProps } from './Tab';