@shohojdhara/atomix 0.1.17 → 0.1.18

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

@@ -0,0 +1,255 @@
+@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

@@ -0,0 +1,350 @@
+@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

@@ -0,0 +1,78 @@
+@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

@@ -0,0 +1,21 @@
+@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);
+  }
+}