@shohojdhara/atomix 0.1.16 → 0.1.17

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

@@ -1,249 +0,0 @@
-@use '../01-settings/_settings.config' as *;
-@use '../01-settings/_settings.dropdown' as *;
-@use '../02-tools/_tools.rem' as *;
-@use '../02-tools/_tools.animations' as *;
-@use '../02-tools/_tools.spacing' as *;
-
-// Add keyframe animations for dropdown
-@keyframes #{$prefix}dropdown-fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(-15px) scale(0.95);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-}
-
-@keyframes #{$prefix}dropdown-fade-out {
-  from {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-15px) scale(0.95);
-  }
-}
-
-// Add keyframe for toggle icon rotation
-@keyframes #{$prefix}dropdown-icon-rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(-180deg);
-  }
-}
-
-.c-dropdown {
-  $root: &;
-
-  --#{$prefix}dropdown-min-width: #{rem($dropdown-min-width)};
-  --#{$prefix}dropdown-padding-x: #{if($dropdown-padding-x == 0, 0, rem($dropdown-padding-x))};
-  --#{$prefix}dropdown-padding-y: #{rem($dropdown-padding-y)};
-  --#{$prefix}dropdown-spacer: #{rem($dropdown-spacer)};
-  --#{$prefix}dropdown-font-size: #{$dropdown-font-size};
-  --#{$prefix}dropdown-color: #{$dropdown-color};
-  --#{$prefix}dropdown-bg: #{$dropdown-bg};
-  --#{$prefix}dropdown-border-color: #{$dropdown-border-color};
-  --#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
-  --#{$prefix}dropdown-border-width: #{$dropdown-border-width};
-  --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
-  --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
-  --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
-  --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
-  --#{$prefix}dropdown-link-border-radius: #{$dropdown-link-border-radius};
-  --#{$prefix}dropdown-active-color: #{$dropdown-link-active-color};
-  --#{$prefix}dropdown-active-bg: #{$dropdown-link-active-bg};
-  --#{$prefix}dropdown-item-padding-x: #{rem($dropdown-item-padding-x)};
-  --#{$prefix}dropdown-item-padding-y: #{rem($dropdown-item-padding-y)};
-  // Use animation variables from settings
-  --#{$prefix}dropdown-animation-duration: #{$dropdown-animation-duration};
-  --#{$prefix}dropdown-animation-timing: #{$dropdown-animation-timing};
-
-  display: inline-block;
-  position: relative;
-
-  &__toggle {
-    width: 100%;
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    gap: 0.5rem;
-  }
-
-  &__toggle-icon {
-    transition: transform var(--#{$prefix}dropdown-animation-duration) var(--#{$prefix}dropdown-animation-timing);
-    margin-left: 0.25rem;
-  }
-
-  &__menu-wrapper {
-    position: absolute;
-    left: 0;
-    z-index: 99;
-    display: flex;
-    opacity: 0;
-    visibility: hidden;
-    transform-origin: top center;
-    // Improved transitions - shorter and with better easing
-    transition: 
-      opacity var(--#{$prefix}dropdown-animation-duration) var(--#{$prefix}dropdown-animation-timing),
-      visibility var(--#{$prefix}dropdown-animation-duration) var(--#{$prefix}dropdown-animation-timing),
-      transform var(--#{$prefix}dropdown-animation-duration) var(--#{$prefix}dropdown-animation-timing);
-    transform: translateY(-15px) scale(0.95);
-    pointer-events: none;
-    will-change: transform, opacity, visibility;
-
-    &.is-open {
-      opacity: 1;
-      transform: translateY(0) scale(1);
-      visibility: visible;
-      animation: #{$prefix}dropdown-fade-in var(--#{$prefix}dropdown-animation-duration) var(--#{$prefix}dropdown-animation-timing) forwards;
-      pointer-events: auto;
-    }
-
-    &:not(.is-open) {
-      animation: #{$prefix}dropdown-fade-out var(--#{$prefix}dropdown-animation-duration) var(--#{$prefix}dropdown-animation-timing) forwards;
-    }
-
-    // Placement variations - using a mixin to reduce duplication
-    @mixin dropdown-placement($position, $alignment, $property, $value) {
-      &--#{$position}-#{$alignment} {
-        @if $position == 'bottom' {
-          top: 100%;
-          margin-top: var(--#{$prefix}dropdown-spacer);
-          transform-origin: top center;
-        } @else if $position == 'top' {
-          bottom: 100%;
-          margin-bottom: var(--#{$prefix}dropdown-spacer);
-          transform-origin: bottom center;
-        } @else if $position == 'left' {
-          right: 100%;
-          margin-right: var(--#{$prefix}dropdown-spacer);
-          transform-origin: right center;
-        } @else if $position == 'right' {
-          left: 100%;
-          margin-left: var(--#{$prefix}dropdown-spacer);
-          transform-origin: left center;
-        }
-
-        @if $alignment == 'start' {
-          @if $position == 'top' or $position == 'bottom' {
-            left: 0;
-          } @else {
-            top: 0;
-          }
-        } @else if $alignment == 'end' {
-          @if $position == 'top' or $position == 'bottom' {
-            right: 0;
-            left: auto;
-          } @else {
-            bottom: 0;
-          }
-        }
-      }
-    }
-
-    // Apply the mixin for all placement variations
-    @include dropdown-placement('bottom', 'start', 'top', '100%');
-    @include dropdown-placement('bottom', 'end', 'top', '100%');
-    @include dropdown-placement('top', 'start', 'bottom', '100%');
-    @include dropdown-placement('top', 'end', 'bottom', '100%');
-    @include dropdown-placement('left', 'start', 'right', '100%');
-    @include dropdown-placement('left', 'end', 'right', '100%');
-    @include dropdown-placement('right', 'start', 'left', '100%');
-    @include dropdown-placement('right', 'end', 'left', '100%');
-  }
-
-  &__menu-inner {
-    width: 100%;
-    min-width: var(--#{$prefix}dropdown-min-width);
-    border-radius: var(--#{$prefix}dropdown-border-radius);
-    box-shadow: var(--#{$prefix}dropdown-box-shadow);
-    overflow: hidden;
-  }
-
-  &__menu {
-    width: 100%;
-    padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
-    list-style: none;
-    @include mb(0);
-    background-color: var(--#{$prefix}dropdown-bg);
-    border-radius: var(--#{$prefix}dropdown-border-radius);
-    box-shadow: var(--#{$prefix}dropdown-box-shadow);
-    overflow: hidden;
-  }
-
-  &__menu-item {
-    display: block;
-    width: 100%;
-    padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
-    border: 0;
-    border-radius: var(--#{$prefix}dropdown-link-border-radius);
-    background: transparent;
-    color: var(--#{$prefix}dropdown-link-color);
-    font-size: var(--#{$prefix}dropdown-font-size);
-    text-align: left;
-    text-decoration: none;
-    cursor: pointer;
-    transition: all 0.2s ease;
-
-    &:hover, &:focus {
-      color: var(--#{$prefix}dropdown-link-hover-color);
-      background-color: var(--#{$prefix}dropdown-link-hover-bg);
-      outline: none;
-      padding-left: calc(var(--#{$prefix}dropdown-item-padding-x) + 3px);
-    }
-
-    &.is-active {
-      color: var(--#{$prefix}dropdown-active-color);
-      background-color: var(--#{$prefix}dropdown-active-bg);
-    }
-
-    &.is-disabled {
-      color: var(--#{$prefix}dropdown-color);
-      opacity: 0.5;
-      pointer-events: none;
-    }
-  }
-
-  &__menu-item-icon {
-    display: inline-flex;
-    align-items: center;
-    margin-right: 0.5rem;
-  }
-
-  &__divider {
-    height: 1px;
-    margin: 0.5rem 0;
-    background-color: var(--#{$prefix}dropdown-border-color);
-  }
-
-  &__header {
-    display: block;
-    padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
-    margin-bottom: 0;
-    font-size: 0.875em;
-    color: var(--#{$prefix}dropdown-color);
-    white-space: nowrap;
-    opacity: 0.8;
-  }
-
-  // Color variants
-  @each $color in (brand, secondary, tertiary, success, info, warning, error, light, dark) {
-    &--#{$color} {
-      --#{$prefix}dropdown-link-color: var(--#{$prefix}#{$color}-text-emphasis);
-      --#{$prefix}dropdown-link-hover-color: var(--#{$prefix}#{$color}-text-emphasis);
-      --#{$prefix}dropdown-link-hover-bg: var(--#{$prefix}#{$color}-bg-subtle);
-    }
-  }
-
-  
-  &.is-open {
-    #{$root}__toggle-icon {
-      transform: rotate(-180deg);
-    }
-  }
-}

package/src/styles/06-components/_components.edge-panel.scss

@@ -1,309 +0,0 @@
-@use 'sass:map';
-@use '../01-settings/settings.config' as *;
-@use '../01-settings/settings.edge-panel' as *;
-@use '../01-settings/settings.z-layers' as *;
-@use '../02-tools/tools.rem' as *;
-@use '../02-tools/tools.animations' as *;
-
-// EdgePanel SCSS Styling
-.c-edge-panel {
-  $root: &;
-
-  // CSS Custom Properties for Easy Theming
-  --#{$prefix}edge-panel-zindex: #{$edge-panel-zindex};
-  --#{$prefix}edge-panel-width: #{rem($edge-panel-width)};
-  --#{$prefix}edge-panel-height: #{$edge-panel-height};
-  --#{$prefix}edge-panel-padding-x: #{rem($edge-panel-padding-x)};
-  --#{$prefix}edge-panel-padding-y: #{rem($edge-panel-padding-y)};
-  --#{$prefix}edge-panel-bg: #{$edge-panel-bg};
-  --#{$prefix}edge-panel-color: #{$edge-panel-color};
-  --#{$prefix}edge-panel-shadow: #{$edge-panel-shadow};
-  --#{$prefix}edge-panel-backdrop-bg: #{$edge-panel-backdrop-bg};
-  --#{$prefix}edge-panel-backdrop-opacity: #{$edge-panel-backdrop-opacity};
-  --#{$prefix}edge-panel-backdrop-blur: #{$edge-panel-backdrop-blur};
-  --#{$prefix}edge-panel-animation-duration: #{$edge-panel-animation-duration}ms;
-  --#{$prefix}edge-panel-border-color: #{$edge-panel-border-color};
-
-  position: fixed;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  z-index: var(--#{$prefix}edge-panel-zindex);
-
-  // Backdrop Styling
-  &__backdrop {
-    position: absolute;
-    inset: 0;
-    background: var(--#{$prefix}edge-panel-backdrop-bg);
-    backdrop-filter: blur(var(--#{$prefix}edge-panel-backdrop-blur));
-    opacity: 0;
-    z-index: map.get($z-layers, 1);
-    transition: opacity var(--#{$prefix}edge-panel-animation-duration) ease;
-    will-change: opacity;
-    
-    &.is-animating {
-      animation: fadeIn 0.3s ease forwards;
-    }
-    
-    &.is-animating-out {
-      animation: fadeOut 0.3s ease forwards;
-    }
-  }
-
-  // Panel Container
-  &__container {
-    position: absolute;
-    color: var(--#{$prefix}edge-panel-color);
-    width: var(--#{$prefix}edge-panel-width);
-    height: 100%;
-    background-color: var(--#{$prefix}edge-panel-bg);
-    box-shadow: var(--#{$prefix}edge-panel-shadow);
-    z-index: map.get($z-layers, 2);
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    will-change: transform, opacity;
-    
-    &.is-animating {
-      animation: slideIn var(--#{$prefix}edge-panel-animation-duration) cubic-bezier(0.16, 1, 0.3, 1) forwards;
-    }
-    
-    &.is-animating-out {
-      animation: slideOut var(--#{$prefix}edge-panel-animation-duration) cubic-bezier(0.16, 1, 0.3, 1) forwards;
-    }
-  }
-
-  // Panel Header
-  &__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--#{$prefix}edge-panel-padding-y) var(--#{$prefix}edge-panel-padding-x);
-    border-bottom: 1px solid var(--#{$prefix}edge-panel-border-color);
-    flex-shrink: 0;
-  }
-
-  // Close Button
-  &__close {
-    user-select: none;
-    cursor: pointer;
-    padding: 0.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
-    transition: background-color 0.2s ease;
-    
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.05);
-    }
-    
-    &:focus-visible {
-      outline: 2px solid var(--#{$prefix}primary);
-      outline-offset: 2px;
-    }
-  }
-
-  // Panel Body
-  &__body {
-    padding: var(--#{$prefix}edge-panel-padding-y) var(--#{$prefix}edge-panel-padding-x);
-    overflow-y: auto;
-    flex: 1;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  // Variants for Panel Positioning
-  &--start {
-    #{$root}__container {
-      left: 0;
-      top: 0;
-      bottom: 0;
-      border-right: 1px solid var(--#{$prefix}edge-panel-border-color);
-      transform: translateX(-100%);
-      
-      &.is-animating {
-        animation-name: slideInStart;
-      }
-      
-      &.is-animating-out {
-        animation-name: slideOutStart;
-      }
-    }
-  }
-
-  &--end {
-    #{$root}__container {
-      right: 0;
-      top: 0;
-      bottom: 0;
-      left: auto;
-      border-left: 1px solid var(--#{$prefix}edge-panel-border-color);
-      transform: translateX(100%);
-      
-      &.is-animating {
-        animation-name: slideInEnd;
-      }
-      
-      &.is-animating-out {
-        animation-name: slideOutEnd;
-      }
-    }
-  }
-
-  &--top {
-    #{$root}__container {
-      left: 0;
-      right: 0;
-      top: 0;
-      bottom: auto;
-      width: 100%;
-      height: var(--#{$prefix}edge-panel-height);
-      transform: translateY(-100%);
-      border-bottom: 1px solid var(--#{$prefix}edge-panel-border-color);
-      
-      &.is-animating {
-        animation-name: slideInTop;
-      }
-      
-      &.is-animating-out {
-        animation-name: slideOutTop;
-      }
-    }
-  }
-
-  &--bottom {
-    #{$root}__container {
-      left: 0;
-      right: 0;
-      bottom: 0;
-      top: auto;
-      width: 100%;
-      height: var(--#{$prefix}edge-panel-height);
-      transform: translateY(100%);
-      border-top: 1px solid var(--#{$prefix}edge-panel-border-color);
-      
-      &.is-animating {
-        animation-name: slideInBottom;
-      }
-      
-      &.is-animating-out {
-        animation-name: slideOutBottom;
-      }
-    }
-  }
-
-  // Active State (When Open)
-  &.is-open {
-    #{$root}__backdrop {
-      opacity: var(--#{$prefix}edge-panel-backdrop-opacity);
-    }
-
-    #{$root}__container {
-      transform: translateX(0) translateY(0);
-    }
-  }
-  
-  // No animation mode
-  &[data-mode="none"] {
-    #{$root}__container {
-      // Disable all transitions
-      transition: none !important;
-      animation: none !important;
-      
-      &.is-animating,
-      &.is-animating-out {
-        animation: none !important;
-      }
-    }
-    
-    #{$root}__backdrop {
-      transition: none !important;
-      animation: none !important;
-      
-      &.is-animating,
-      &.is-animating-out {
-        animation: none !important;
-      }
-    }
-  }
-}
-
-// Body Modifier When Panel is Open
-.is-edgepanel-open {
-  --#{$prefix}edge-panel-animation-duration: #{$edge-panel-animation-duration}ms;
-  overflow: hidden;
-  
-  &.is-pushed {
-    transition: 
-      padding-left var(--#{$prefix}edge-panel-animation-duration) cubic-bezier(0.16, 1, 0.3, 1),
-      padding-right var(--#{$prefix}edge-panel-animation-duration) cubic-bezier(0.16, 1, 0.3, 1),
-      padding-top var(--#{$prefix}edge-panel-animation-duration) cubic-bezier(0.16, 1, 0.3, 1),
-      padding-bottom var(--#{$prefix}edge-panel-animation-duration) cubic-bezier(0.16, 1, 0.3, 1);
-    
-    // Disable scrolling on iOS
-    position: fixed;
-    width: 100%;
-    height: 100%;
-  }
-  
-  &:not(.is-pushed) {
-    // Disable scrolling on iOS
-    position: fixed;
-    width: 100%;
-    height: 100%;
-  }
-}
-
-
-// Simple fade in animation
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: var(--#{$prefix}edge-panel-backdrop-opacity); }
-}
-
-// Simple fade out animation
-@keyframes fadeOut {
-  from { opacity: var(--#{$prefix}edge-panel-backdrop-opacity); }
-  to { opacity: 0; }
-}
-
-// Position-specific animations
-@keyframes slideInStart {
-  from { transform: translateX(-100%); }
-  to { transform: translateX(0); }
-}
-
-@keyframes slideOutStart {
-  from { transform: translateX(0); }
-  to { transform: translateX(-100%); }
-}
-
-@keyframes slideInEnd {
-  from { transform: translateX(100%); }
-  to { transform: translateX(0); }
-}
-
-@keyframes slideOutEnd {
-  from { transform: translateX(0); }
-  to { transform: translateX(100%); }
-}
-
-@keyframes slideInTop {
-  from { transform: translateY(-100%); }
-  to { transform: translateY(0); }
-}
-
-@keyframes slideOutTop {
-  from { transform: translateY(0); }
-  to { transform: translateY(-100%); }
-}
-
-@keyframes slideInBottom {
-  from { transform: translateY(100%); }
-  to { transform: translateY(0); }
-}
-
-@keyframes slideOutBottom {
-  from { transform: translateY(0); }
-  to { transform: translateY(100%); }
-}

package/src/styles/06-components/_components.form-group.scss

@@ -1,77 +0,0 @@
-@use '../01-settings/settings.config' as *;
-@use '../01-settings/settings.form-group' as *;
-@use '../02-tools/tools.rem' as *;
-
-.c-form-group {
-  $root: &;
-
-  --#{$prefix}input-group-width: #{$input-group-width};
-  --#{$prefix}input-group-label-color: #{$input-group-label-color};
-  --#{$prefix}input-group-label-font-size: #{$input-group-label-font-size};
-  --#{$prefix}input-group-label-margin-bottom: #{rem($input-group-label-margin-bottom)};
-  --#{$prefix}input-group-helper-text-color: #{$input-group-helper-text-color};
-  --#{$prefix}input-group-helper-text-font-size: #{$input-group-helper-text-font-size};
-  --#{$prefix}input-group-helper-text-margin-top: #{rem($input-group-helper-text-margin-top)};
-
-  position: relative;
-  width: 100%;
-  max-width: var(--#{$prefix}input-group-width);
-
-  &__label {
-    display: block;
-    color: var(--#{$prefix}input-group-label-color);
-    font-size: var(--#{$prefix}input-group-label-font-size);
-    margin-bottom: var(--#{$prefix}input-group-label-margin-bottom);
-  }
-
-  &__field {
-    display: inline-block;
-    width: 100%;
-  }
-
-  &__helper {
-    color: var(--#{$prefix}input-group-helper-text-color);
-    font-size: var(--#{$prefix}input-group-helper-text-font-size);
-    margin-top: var(--#{$prefix}input-group-helper-text-margin-top);
-  }
-
-  &--lg {
-     #{$root}__field {
-      @extend .c-input--lg !optional;
-     }
-  }
-
-  &--sm {
-    --#{$prefix}input-group-label-font-size: #{$input-group-label-font-size-sm};
-
-    #{$root}__field {
-      @extend .c-input--sm !optional;
-    }
-  }
-
-  &.is-success {
-    --#{$prefix}input-group-helper-text-color: var(--#{$prefix}success-text-emphasis);
-
-    #{$root}__field {
-      @extend .is-success !optional;
-    }
-  }
-
-  &.is-invalid {
-    --#{$prefix}input-group-helper-text-color: var(--#{$prefix}error-text-emphasis);
-
-    #{$root}__field {
-      @extend .is-invalid !optional;
-    }
-  }
-
-  &:disabled,&.is-disabled {
-    >* {
-      pointer-events: none;
-    }
-
-    #{$root}__field {
-      @extend .is-disabled !optional;
-    }
-  }
-}

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

@@ -1,21 +0,0 @@
-@use '../01-settings/settings.config' as *;
-@use '../01-settings/settings.form' as *;
-@use '../02-tools/tools.rem' as *;
-
-.c-form {
-  --#{$prefix}form-width: #{$form-width};
-  --#{$prefix}form-items-spacer-y: #{rem($form-items-spacer-y)};
-  --#{$prefix}form-items-spacer-x: #{rem($form-items-spacer-x)};
-
-  width: 100%;
-  max-width: var(--#{$prefix}form-width);
-
-  > * + * {
-    margin-top: var(--#{$prefix}form-items-spacer-y);
-  }
-
-  .o-grid {
-    --#{$prefix}gutter-x: var(--#{$prefix}form-items-spacer-x);
-    --#{$prefix}gutter-y: var(--#{$prefix}form-items-spacer-y);
-  }
-}