zenkit-css 1.0.0

package/scss/components/_select.scss

@@ -0,0 +1,412 @@
+// ========================================
+// ZenKit - Select Component
+// Custom dropdown select styling
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Select Wrapper
+// ----------------------------------------
+.select {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+
+// ----------------------------------------
+// Select Trigger (the visible button)
+// ----------------------------------------
+.select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: var(--text-primary);
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: $border-radius;
+  cursor: pointer;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+  &:hover {
+    border-color: var(--primary);
+  }
+
+  &:focus,
+  &.is-open {
+    border-color: var(--primary);
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
+  }
+
+  &.is-disabled {
+    background-color: var(--bg-secondary);
+    cursor: not-allowed;
+    opacity: 0.65;
+  }
+}
+
+.select-trigger-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+
+.select-trigger-placeholder {
+  color: var(--text-muted);
+}
+
+.select-trigger-arrow {
+  display: flex;
+  align-items: center;
+  margin-left: 0.5rem;
+  color: var(--text-muted);
+  transition: transform 0.2s ease;
+
+  .is-open & {
+    transform: rotate(180deg);
+  }
+}
+
+.select-trigger-clear {
+  display: flex;
+  align-items: center;
+  margin-left: 0.25rem;
+  padding: 0.125rem;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: 50%;
+  transition: color 0.15s ease, background-color 0.15s ease;
+
+  &:hover {
+    color: var(--text-primary);
+    background-color: var(--bg-tertiary);
+  }
+}
+
+// ----------------------------------------
+// Select Dropdown
+// ----------------------------------------
+.select-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: $z-dropdown;
+  display: none;
+  width: 100%;
+  max-height: 256px;
+  margin-top: 4px;
+  overflow-y: auto;
+  background-color: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: $border-radius;
+  box-shadow: $shadow-lg;
+
+  &.is-open {
+    display: block;
+  }
+
+  &.select-dropdown-up {
+    top: auto;
+    bottom: 100%;
+    margin-top: 0;
+    margin-bottom: 4px;
+  }
+}
+
+// ----------------------------------------
+// Select Search
+// ----------------------------------------
+.select-search {
+  position: sticky;
+  top: 0;
+  padding: 0.5rem;
+  background-color: var(--bg-primary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.select-search-input {
+  width: 100%;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  border: 1px solid var(--border-color);
+  border-radius: $border-radius-sm;
+
+  &:focus {
+    border-color: var(--primary);
+    outline: 0;
+    box-shadow: 0 0 0 0.15rem rgba(var(--primary-rgb), 0.25);
+  }
+}
+
+// ----------------------------------------
+// Select Options
+// ----------------------------------------
+.select-options {
+  padding: 0.25rem 0;
+  margin: 0;
+  list-style: none;
+}
+
+.select-option {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background-color: var(--bg-secondary);
+  }
+
+  &.is-selected {
+    color: var(--primary);
+    background-color: rgba(var(--primary-rgb), 0.1);
+  }
+
+  &.is-highlighted {
+    background-color: var(--bg-secondary);
+  }
+
+  &.is-disabled {
+    color: var(--text-muted);
+    cursor: not-allowed;
+    opacity: 0.5;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}
+
+.select-option-icon {
+  display: flex;
+  align-items: center;
+  margin-right: 0.5rem;
+}
+
+.select-option-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.select-option-check {
+  display: none;
+  margin-left: 0.5rem;
+  color: var(--primary);
+
+  .is-selected & {
+    display: flex;
+  }
+}
+
+// ----------------------------------------
+// Select Option Group
+// ----------------------------------------
+.select-group {
+  &:not(:first-child) {
+    border-top: 1px solid var(--border-color);
+    margin-top: 0.25rem;
+    padding-top: 0.25rem;
+  }
+}
+
+.select-group-label {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+// ----------------------------------------
+// Select Empty State
+// ----------------------------------------
+.select-empty {
+  padding: 1rem;
+  text-align: center;
+  color: var(--text-muted);
+}
+
+// ----------------------------------------
+// Multi Select
+// ----------------------------------------
+.select-multiple .select-trigger {
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  min-height: calc(2.5rem + 2px);
+  padding: 0.25rem 0.5rem;
+}
+
+.select-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  flex: 1;
+}
+
+.select-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.875rem;
+  background-color: var(--bg-tertiary);
+  border-radius: $border-radius-sm;
+}
+
+.select-tag-remove {
+  display: flex;
+  align-items: center;
+  padding: 0.125rem;
+  margin-left: 0.125rem;
+  margin-right: -0.25rem;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: 50%;
+  transition: color 0.15s ease, background-color 0.15s ease;
+
+  &:hover {
+    color: var(--danger);
+    background-color: rgba(var(--danger-rgb), 0.1);
+  }
+}
+
+.select-max-tag {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  background-color: var(--bg-secondary);
+  border-radius: $border-radius-sm;
+}
+
+// ----------------------------------------
+// Select Sizes
+// ----------------------------------------
+.select-sm .select-trigger {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.875rem;
+  min-height: calc(1.875rem + 2px);
+}
+
+.select-sm .select-option {
+  padding: 0.375rem 0.5rem;
+  font-size: 0.875rem;
+}
+
+.select-lg .select-trigger {
+  padding: 0.75rem 1rem;
+  font-size: 1.125rem;
+  min-height: calc(3rem + 2px);
+}
+
+.select-lg .select-option {
+  padding: 0.625rem 1rem;
+  font-size: 1.125rem;
+}
+
+// ----------------------------------------
+// Select Variants
+// ----------------------------------------
+// Borderless
+.select-borderless .select-trigger {
+  border-color: transparent;
+  background-color: transparent;
+
+  &:hover,
+  &:focus,
+  &.is-open {
+    border-color: transparent;
+    background-color: var(--bg-secondary);
+    box-shadow: none;
+  }
+}
+
+// Filled
+.select-filled .select-trigger {
+  border-color: transparent;
+  background-color: var(--bg-secondary);
+
+  &:hover {
+    background-color: var(--bg-tertiary);
+  }
+
+  &:focus,
+  &.is-open {
+    border-color: var(--primary);
+    background-color: var(--bg-primary);
+  }
+}
+
+// ----------------------------------------
+// Select States
+// ----------------------------------------
+.select-error .select-trigger {
+  border-color: var(--danger);
+
+  &:focus,
+  &.is-open {
+    box-shadow: 0 0 0 0.2rem rgba(var(--danger-rgb), 0.25);
+  }
+}
+
+.select-warning .select-trigger {
+  border-color: var(--warning);
+
+  &:focus,
+  &.is-open {
+    box-shadow: 0 0 0 0.2rem rgba(var(--warning-rgb), 0.25);
+  }
+}
+
+.select-success .select-trigger {
+  border-color: var(--success);
+
+  &:focus,
+  &.is-open {
+    box-shadow: 0 0 0 0.2rem rgba(var(--success-rgb), 0.25);
+  }
+}
+
+// ----------------------------------------
+// Select Loading
+// ----------------------------------------
+.select-loading .select-trigger-arrow {
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+// ----------------------------------------
+// Virtual Scroll (for large lists)
+// ----------------------------------------
+.select-virtual {
+  .select-dropdown {
+    max-height: none;
+  }
+
+  .select-options {
+    position: relative;
+  }
+
+  .select-option {
+    position: absolute;
+    left: 0;
+    right: 0;
+  }
+}

package/scss/components/_spinners.scss

@@ -0,0 +1,229 @@
+// ========================================
+// ZenKit - Spinners
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Spinner Border (Default)
+// ----------------------------------------
+.spinner-border {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  vertical-align: -0.125em;
+  border: 0.25em solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: spinner-border 0.75s linear infinite;
+}
+
+@keyframes spinner-border {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// ----------------------------------------
+// Spinner Grow
+// ----------------------------------------
+.spinner-grow {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  vertical-align: -0.125em;
+  background-color: currentColor;
+  border-radius: 50%;
+  opacity: 0;
+  animation: spinner-grow 0.75s linear infinite;
+}
+
+@keyframes spinner-grow {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+// ----------------------------------------
+// Spinner Sizes
+// ----------------------------------------
+.spinner-border-sm {
+  width: 1rem;
+  height: 1rem;
+  border-width: 0.2em;
+}
+
+.spinner-grow-sm {
+  width: 1rem;
+  height: 1rem;
+}
+
+.spinner-border-lg {
+  width: 3rem;
+  height: 3rem;
+  border-width: 0.3em;
+}
+
+.spinner-grow-lg {
+  width: 3rem;
+  height: 3rem;
+}
+
+// ----------------------------------------
+// Spinner Colors
+// ----------------------------------------
+.spinner-primary {
+  color: var(--primary);
+}
+
+.spinner-secondary {
+  color: var(--gray-600);
+}
+
+.spinner-success {
+  color: var(--success);
+}
+
+.spinner-danger {
+  color: var(--danger);
+}
+
+.spinner-warning {
+  color: var(--warning);
+}
+
+.spinner-info {
+  color: var(--info);
+}
+
+.spinner-light {
+  color: var(--gray-100);
+}
+
+.spinner-dark {
+  color: var(--gray-800);
+}
+
+.spinner-white {
+  color: var(--white);
+}
+
+// ----------------------------------------
+// Dots Spinner
+// ----------------------------------------
+.spinner-dots {
+  display: inline-flex;
+  gap: 0.25rem;
+
+  span {
+    width: 0.5rem;
+    height: 0.5rem;
+    background-color: currentColor;
+    border-radius: 50%;
+    animation: spinner-dots 1.4s infinite ease-in-out both;
+
+    &:nth-child(1) {
+      animation-delay: -0.32s;
+    }
+
+    &:nth-child(2) {
+      animation-delay: -0.16s;
+    }
+  }
+}
+
+@keyframes spinner-dots {
+  0%, 80%, 100% {
+    transform: scale(0);
+  }
+  40% {
+    transform: scale(1);
+  }
+}
+
+// ----------------------------------------
+// Pulse Spinner
+// ----------------------------------------
+.spinner-pulse {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  background-color: currentColor;
+  border-radius: 50%;
+  animation: spinner-pulse 1s ease-in-out infinite;
+}
+
+@keyframes spinner-pulse {
+  0% {
+    transform: scale(0);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+
+// ----------------------------------------
+// Ring Spinner
+// ----------------------------------------
+.spinner-ring {
+  display: inline-block;
+  width: 2rem;
+  height: 2rem;
+  border: 3px solid var(--gray-200);
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: spinner-border 0.75s linear infinite;
+}
+
+// ----------------------------------------
+// Loading Overlay
+// ----------------------------------------
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: var(--z-modal);
+}
+
+.loading-overlay-light {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+// ----------------------------------------
+// Button Spinner
+// ----------------------------------------
+.btn .spinner-border,
+.btn .spinner-grow {
+  width: 1rem;
+  height: 1rem;
+  border-width: 0.15em;
+  vertical-align: middle;
+}
+
+.btn-sm .spinner-border,
+.btn-sm .spinner-grow {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.btn-lg .spinner-border,
+.btn-lg .spinner-grow {
+  width: 1.25rem;
+  height: 1.25rem;
+}