@eaera-com/eaera-widgets-v2 0.1.63 → 0.1.65

package/dist/design-system/components/_tabs.scss

@@ -0,0 +1,260 @@
+@use '../themes/aurora/typography/typography-utils' as typo;
+
+@mixin tab-size($height, $padding) {
+  .el-tabs__item {
+    height: $height;
+    padding: 0 $padding;
+
+    &:nth-child(2),
+    &:last-child {
+      padding-left: $padding;
+      padding-right: $padding;
+    }
+
+    @content;
+  }
+}
+
+// ─── Base ─────────────────────────────────────────────────────────────────────
+
+.custom-tab.el-tabs {
+  .el-tabs__header {
+    margin-bottom: 0;
+  }
+
+  .el-tabs__content {
+    padding-top: var(--er-shape-spacing-200);
+  }
+
+  .el-tabs__nav-wrap::after {
+    background-color: var(--er-border-subtle);
+    height: 1px;
+  }
+
+  .el-tabs__nav {
+    border: none;
+  }
+
+  .el-tabs__active-bar {
+    height: 2px;
+    background-color: var(--er-action-primary-default);
+  }
+
+  .el-tabs__item {
+    height: var(--er-control-height-lg);
+    padding: 0 var(--er-shape-spacing-150);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    user-select: none;
+    @include typo.label-lg;
+    color: var(--er-text-secondary) !important;
+
+    &.is-active {
+      color: var(--er-action-primary-default) !important;
+    }
+
+    &.is-disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    // Icon only tab
+    &:has(.custom-tab__label.tab-icon-only) {
+      display: flex;
+      padding: 0;
+      justify-content: center;
+      align-items: center;
+      aspect-ratio: 1 / 1;
+    }
+  }
+
+  // Tab label wrapper
+  .custom-tab__label {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--er-shape-spacing-50);
+
+    &.tab-icon-only {
+      height: 100%;
+      gap: 0;
+
+      .custom-tab__label-text {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  // Prefix icon
+  .custom-tab__label-prefix {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  // Label text
+  .custom-tab__label-text {
+    @include typo.label-lg;
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+
+  // Badge
+  .custom-tab__label-badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+
+    .tab-badge {
+      display: inline-flex;
+      height: 16px;
+      min-width: 16px;
+      padding: 0 4px;
+      justify-content: center;
+      align-items: center;
+      border-radius: var(--er-shape-corner-50);
+
+      &.badge-filled {
+        background: var(--er-surface-neutral-subtle);
+        @include typo.label-sm;
+      }
+
+      &.badge-ghost {
+        color: var(--er-text-secondary);
+        background: transparent;
+        opacity: 0.5;
+        @include typo.label-md;
+      }
+    }
+  }
+
+  .is-active {
+    .badge-filled {
+      background: var(--er-surface-brand-subtle) !important
+    }
+
+    .badge-ghost {
+      color: var(--er-text-brand) !important
+    }
+  }
+
+  .el-tabs__item:has(.custom-tab__label.tab-icon-only) .custom-tab__label-prefix svg,
+  .el-tabs__item:has(.custom-tab__label.tab-icon-only) .custom-tab__label-text svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  // ── LG ──
+  &.lg {
+    @include tab-size(var(--er-control-height-lg), var(--er-shape-spacing-150));
+
+    .el-tabs__nav {
+      gap: var(--er-shape-spacing-150);
+    }
+
+    .el-tabs__item:has(.custom-tab__label.tab-icon-only) {
+      width: var(--er-control-height-lg);
+      min-width: var(--er-control-height-lg);
+    }
+  }
+
+  // ── MD ──
+  &.md {
+    @include tab-size(var(--er-control-height-md), var(--er-shape-spacing-100));
+
+    .el-tabs__nav {
+      gap: var(--er-shape-spacing-100);
+    }
+
+    .el-tabs__item:has(.custom-tab__label.tab-icon-only) {
+      width: var(--er-control-height-md);
+      min-width: var(--er-control-height-md);
+    }
+  }
+
+  // ── Border ──
+  &.variant-border {
+    .el-tabs__active-bar {
+      display: none;
+    }
+
+    .el-tabs__item {
+      &.is-active::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background-color: var(--er-action-primary-default);
+        z-index: 1;
+      }
+
+      &:hover.is-active:not(.is-disabled)::after {
+        background-color: var(--er-action-primary-hover);
+      }
+
+      &:hover:not(.is-active):not(.is-disabled)::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background-color: var(--er-action-neutral-hover);
+        z-index: 0;
+      }
+
+      &:nth-child(2),
+      &:last-child {
+        &.is-active::after {
+          background-color: var(--er-action-primary-default);
+        }
+
+        &:hover.is-active:not(.is-disabled)::after {
+          background-color: var(--er-action-primary-hover);
+        }
+      }
+    }
+  }
+
+  // ── Ghost ──
+  &.variant-ghost {
+    .el-tabs__nav-wrap::after {
+      display: none;
+    }
+
+    .el-tabs__active-bar {
+      display: none;
+    }
+
+    .el-tabs__item {
+      border-radius: var(--er-shape-corner-100);
+
+      &:hover:not(.is-active):not(.is-disabled) {
+        background-color: var(--er-action-neutral-subtle-hover);
+      }
+
+      &.is-active {
+        background-color: var(--er-action-primary-subtle);
+      }
+
+      &:hover.is-active:not(.is-disabled) {
+        background-color: var(--er-action-primary-subtle-hover);
+      }
+    }
+  }
+}

package/dist/design-system/components/_tag.scss

@@ -0,0 +1,208 @@
+@use '../themes/aurora/typography/typography-utils' as typo;
+
+@mixin tag-fill-variant($bg, $text) {
+  background-color: $bg;
+  color: $text !important;
+}
+
+@mixin tag-plain-variant($border, $text) {
+  border-color: $border;
+  color: $text;
+}
+
+// ─── Base ─────────────────────────────────────────────────────────────────────
+
+.custom-tag.el-tag {
+  @include typo.label-md;
+  gap: var(--er-shape-spacing-50);
+  &.md {
+    height: var(--er-control-height-sm);
+    padding: 0 var(--er-shape-spacing-100);
+    border-radius: var(--er-shape-corner-100);
+  }
+
+  &.sm {
+    height: var(--er-control-height-xs);
+    padding: 0 var(--er-shape-spacing-75);
+    border-radius: var(--er-shape-corner-75);
+  }
+
+  &.is-round {
+    border-radius: var(--er-shape-corner-full);
+  }
+
+  .el-tag__close {
+    margin-left: 0;
+    color: inherit;
+    background-color: transparent;
+
+    &:hover {
+      background-color: transparent;
+      color: inherit;
+    }
+  }
+
+  // ── Fill ──
+  &.el-tag--light {
+    border-color: transparent;
+
+    &.primary {
+      @include tag-fill-variant(var(--er-surface-brand-subtle), var(--er-text-brand));
+    }
+
+    &.warning {
+      @include tag-fill-variant(var(--er-surface-warning-subtle), var(--er-text-warning));
+    }
+
+    &.danger {
+      @include tag-fill-variant(var(--er-surface-danger-subtle), var(--er-text-danger));
+    }
+
+    &.info {
+      @include tag-fill-variant(var(--er-surface-information-subtle), var(--er-text-information));
+    }
+
+    &.success {
+      @include tag-fill-variant(var(--er-surface-success-subtle), var(--er-text-success));
+    }
+
+    &.default {
+      @include tag-fill-variant(var(--er-surface-neutral-subtle), var(--er-text-secondary));
+    }
+  }
+
+  // ── Plain ──
+  &.el-tag--plain {
+    background-color: transparent;
+
+    &.primary {
+      @include tag-plain-variant(var(--er-border-brand-subtle), var(--er-text-brand));
+    }
+
+    &.warning {
+      @include tag-plain-variant(var(--er-border-warning-subtle), var(--er-text-warning));
+    }
+
+    &.danger {
+      @include tag-plain-variant(var(--er-border-danger-subtle), var(--er-text-danger));
+    }
+
+    &.info {
+      @include tag-plain-variant(var(--er-border-information-subtle), var(--er-text-information));
+    }
+
+    &.success {
+      @include tag-plain-variant(var(--er-border-success-subtle), var(--er-text-success));
+    }
+
+    &.default {
+      @include tag-plain-variant(var(--er-border-default), var(--er-text-secondary));
+    }
+  }
+
+  // ─── Status variant ───────────────────────────────────────────────────────
+  // Figma: 42.1 Status (dot indicator) | 42.2 Status Icon (icon slot)
+  // Variant axes: style (fill / plain / ghost) × status × size
+  //
+  // Style → effect prop mapping:
+  //   fill  = effect='light'  (el-tag--light)
+  //   plain = effect='plain'  (el-tag--plain)
+  //   ghost = effect='light' + ghost=true  (.is-ghost)
+  //
+  // status colors: warning | danger | information | success | disable | brand (=primary)
+  // ─────────────────────────────────────────────────────────────────────────
+  &.is-status {
+    // Always pill shape
+    border-radius: var(--er-shape-corner-full) !important;
+
+    // Align dot/icon and text in a flex row with 4px gap
+    .el-tag__content {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--er-shape-corner-50);
+
+      .custom-tag__prefix svg {
+        width: 6px;
+        height: 6px;
+      }
+    }
+
+    // ── Ghost style — no bg, no border, no padding ─────────────────────────
+    // Figma: is-ghost=yes → bare dot/icon + text, no container
+    &.is-ghost {
+      background-color: transparent !important;
+      border-color: transparent !important;
+      padding: 0;
+    }
+
+    // ── Fill — disable status (unique tokens, not in regular tag colors) ────
+    // Figma: bg=surface/subtle (#fafafa), text=text/disabled (#a1a1aa)
+    &.el-tag--light.disable {
+      background-color: var(--er-surface-neutral-subtle);
+      color: var(--er-text-muted);
+      border-color: transparent;
+    }
+
+    // ── Plain — disable status ──────────────────────────────────────────────
+    // Figma: border=border/disabled, text=text/disabled
+    &.el-tag--plain.disable {
+      background-color: transparent;
+      color: var(--er-text-muted);
+      border-color: var(--er-border-default);
+    }
+  }
+
+  &.is-loading {
+    // Always pill shape like status
+    border-radius: var(--er-shape-corner-full) !important;
+
+    // ─── Loading variant ─────────────────────────────────────────────────────────
+    // Source: EaeraTag.vue — Lucide Loader icon (size 16) + "Processing" label
+    // Rendered inside el-tag. The Loader icon spins via CSS; the label is static
+    // i18n text and no animated dots are used.
+    // ─────────────────────────────────────────────────────────────────────────────
+
+    .custom-tag__loader {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+    }
+
+    .custom-tag__loader-icon {
+      animation: tag-loader-spin 1.5s linear infinite;
+    }
+
+    @keyframes tag-loader-spin {
+      100% {
+        transform: rotate(1turn);
+      }
+    }
+
+    // Align loader icon and text in a flex row
+    .el-tag__content {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--er-shape-corner-50);
+    }
+
+    // ── Ghost style ─────────────────────────
+    &.is-ghost {
+      background-color: transparent !important;
+      border-color: transparent !important;
+      padding: 0;
+    }
+
+    // ── Fill — fixed default color tokens ────
+    &.el-tag--light {
+      @include tag-fill-variant(var(--er-surface-neutral-subtle), var(--er-text-secondary));
+      border-color: transparent;
+    }
+
+    // ── Plain — fixed default color tokens ────
+    &.el-tag--plain {
+      @include tag-plain-variant(var(--er-border-default), var(--er-text-secondary));
+      background-color: transparent;
+    }
+  }
+}