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

package/dist/design-system/components/_time-picker.scss

@@ -0,0 +1,255 @@
+// ============================================================================
+// TIME PICKER COMPONENT STYLES
+// ============================================================================
+// Source: Figma UI Kit Production - Time Picker (node-id=40508:14241)
+// Based on: EaeraTimePicker.vue (wraps Element Plus ElTimePicker)
+// IMPORTANT: Colors use Layer 3 tokens only
+//
+// ELEMENT PLUS STRUCTURE — Input:
+// .el-date-editor.el-input           ← Root (el-time-picker renders as el-date-editor)
+//   .el-input__wrapper                ← Input container
+//     .el-input__prefix               ← Clock icon
+//     input.el-input__inner           ← Actual input
+//     .el-input__suffix               ← Clear icon (on hover)
+//
+// ELEMENT PLUS STRUCTURE — Panel (teleported):
+// .el-picker-panel                    ← Panel container
+//   .el-time-panel                    ← Time spinner panel
+//     .el-time-panel__content         ← Spinner columns
+//       .el-time-spinner              ← Columns
+//         .el-time-spinner__wrapper   ← Single column
+//           .el-time-spinner__list    ← List
+//             .el-time-spinner__item  ← Individual items
+//     .el-time-panel__footer          ← Cancel / OK buttons
+// ============================================================================
+
+@use '../themes/aurora/typography/typography-utils' as typo;
+
+// ─────────────────────────────────────────────────────────────────────────
+// TIME PICKER INPUT — from Figma (node-id=40508:14241)
+// Figma axes: state (default/hover/focus/typing), is-disabled, is-danger, is-filled, size (sm/md/lg)
+// SM: h-24px, px-6px, border-radius xs (4px)
+// MD: h-32px, px-8px, border-radius sm (8px)
+// LG: h-40px, px-12px, border-radius sm (8px)
+// ─────────────────────────────────────────────────────────────────────────
+
+.custom-time-picker.el-date-editor.el-input {
+  // Remove default El-Plus width
+  width: auto;
+
+  // ─────────────────────────────────────────────────────────────────────
+  // INPUT WRAPPER
+  // Default = MD size (class "md" is applied by component)
+  // Figma (40508:13364): h-32px, px-8px, rounded-sm (8px), border-default, bg-white
+  // ─────────────────────────────────────────────────────────────────────
+
+  .el-input__wrapper {
+    height: var(--er-control-height-md);
+    padding: 0 var(--er-shape-spacing-100);
+    gap: var(--er-shape-spacing-50);
+    border-radius: var(--er-shape-corner-100);
+    border: 1px solid var(--er-border-default);
+    background-color: var(--er-surface-container);
+    box-shadow: none !important;
+
+    // Focus state — Figma (40508:14035): border action/primary-default #3b82f6
+    &.is-focus,
+    &:focus-within {
+      border-color: var(--er-action-primary-default);
+    }
+
+    // Hover state (non-disabled)
+    &:hover:not(.is-disabled) {
+      border-color: var(--er-action-primary-default);
+    }
+  }
+
+  // Input text
+  .el-input__inner {
+    @include typo.body-md;
+    color: var(--er-text-primary);
+
+    &::placeholder {
+      @include typo.body-md;
+      color: var(--er-text-muted);
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────────
+  // SM SIZE — Figma (40508:13231): h-24px
+  // ─────────────────────────────────────────────────────────────────────
+
+  &.sm .el-input__wrapper {
+    height: var(--er-control-height-sm);
+    padding: 0 var(--er-shape-spacing-75);
+    gap: var(--er-shape-spacing-50);
+    border-radius: var(--er-shape-corner-75);
+  }
+
+  &.sm .el-input__inner,
+  &.sm .el-input__inner::placeholder {
+    @include typo.body-sm;
+  }
+
+  &.sm .el-input__inner {
+    color: var(--er-text-primary);
+  }
+
+  &.sm .el-input__inner::placeholder {
+    color: var(--er-text-muted);
+  }
+
+  // ─────────────────────────────────────────────────────────────────────
+  // LG SIZE — Figma (40508:14043): h-40px, px-12px
+  // ─────────────────────────────────────────────────────────────────────
+
+  &.lg .el-input__wrapper {
+    height: var(--er-control-height-lg);
+    padding: 0 var(--er-shape-spacing-150);
+    gap: var(--er-shape-spacing-75);
+    border-radius: var(--er-shape-corner-150);
+  }
+
+  // ─────────────────────────────────────────────────────────────────────
+  // XL SIZE — icon 20×20, px-16px, gap-8px, rounded-corner-150
+  // ─────────────────────────────────────────────────────────────────────
+
+  &.xl .el-input__wrapper {
+    height: var(--er-control-height-xl);
+    padding: 0 var(--er-shape-spacing-200);
+    gap: var(--er-shape-spacing-100);
+    border-radius: var(--er-shape-corner-150);
+  }
+
+  &.xl .el-input__inner,
+  &.xl .el-input__inner::placeholder {
+    @include typo.body-lg;
+  }
+
+  // ─────────────────────────────────────────────────────────────────────
+  // DANGER STATE — Figma (40508:14045): border-danger #ef4444
+  // ─────────────────────────────────────────────────────────────────────
+
+  &.is-danger .el-input__wrapper,
+  &.danger .el-input__wrapper {
+    border-color: var(--er-border-danger);
+
+    &.is-focus,
+    &:focus-within,
+    &:hover {
+      border-color: var(--er-border-danger);
+    }
+  }
+
+  // ─────────────────────────────────────────────────────────────────────
+  // DISABLED STATE — Figma (40508:14047): opacity-50
+  // ─────────────────────────────────────────────────────────────────────
+
+  &.is-disabled .el-input__wrapper {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  // ─────────────────────────────────────────────────────────────────────
+  // ICON (Prefix clock / Suffix clear)
+  // ─────────────────────────────────────────────────────────────────────
+
+  .el-input__prefix,
+  .el-input__suffix {
+    display: flex;
+    align-items: center;
+
+    .el-icon {
+      color: var(--er-icon-secondary);
+
+      &.el-input__icon {
+        width: var(--er-control-height-xxs);
+        height: var(--er-control-height-xxs);
+      }
+
+      &.clear-icon {
+        width: 12px;
+        height: 12px;
+      }
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  &.sm .el-input__prefix .el-icon,
+  &.sm .el-input__suffix .el-icon {
+    &.el-input__icon {
+      width: 12px;
+      height: 12px;
+    }
+
+    &.clear-icon {
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  &.xl .el-input__prefix .el-icon,
+  &.xl .el-input__suffix .el-icon {
+    &.el-input__icon {
+      width: var(--er-control-height-xs);
+      height: var(--er-control-height-xs);
+    }
+
+    &.clear-icon {
+      width: var(--er-control-height-xxs);
+      height: var(--er-control-height-xxs);
+    }
+  }
+}
+
+// ─────────────────────────────────────────────────────────────────────────
+// TIME PICKER PANEL (Teleported dropdown)
+// Figma: white bg, border default, corner-md (12px), shadow level-1
+// ─────────────────────────────────────────────────────────────────────────
+
+.el-time-panel {
+  background: var(--er-surface-container);
+  border: 1px solid var(--er-border-default);
+  border-radius: var(--er-shape-corner-150);
+
+  // Footer — Cancel / OK buttons
+  .el-time-panel__footer {
+    border-top: 1px solid var(--er-border-subtle);
+    padding: var(--er-shape-spacing-50) var(--er-shape-spacing-150);
+
+    .el-time-panel__btn {
+      @include typo.body-sm;
+      color: var(--er-text-secondary);
+
+      &.confirm {
+        color: var(--er-action-primary-default);
+        font-weight: 500;
+      }
+    }
+  }
+
+  // Spinner items
+  .el-time-spinner__item {
+    @include typo.body-md;
+    color: var(--er-text-primary);
+    height: var(--er-control-height-md);
+    line-height: var(--er-control-height-md);
+
+    &:hover:not(.is-disabled):not(.is-active) {
+      background-color: var(--er-surface-brand-subtle);
+    }
+
+    &.is-active {
+      color: var(--er-action-primary-default);
+      font-weight: 500;
+    }
+
+    &.is-disabled {
+      color: var(--er-text-muted);
+    }
+  }
+}

package/dist/design-system/components/_time-select.scss

@@ -0,0 +1,167 @@
+@use '../themes/aurora/typography/typography-utils' as typo;
+@use '../themes/aurora/elevation/elevation-utils' as elevation;
+
+// ============================================================================
+// MIXINS
+// ============================================================================
+
+@mixin select-wrapper-size($height, $padding-x, $radius, $gap) {
+  min-height: $height;
+  padding: 0 $padding-x;
+  border-radius: $radius;
+  gap: $gap;
+}
+
+@mixin dropdown-item-size($height, $padding-x, $radius) {
+  height: $height;
+  padding: 0 $padding-x;
+  border-radius: $radius;
+}
+
+// ============================================================================
+// TIME SELECT INPUT
+// ============================================================================
+
+.custom-time-select.el-select {
+  .el-select__wrapper {
+    @include select-wrapper-size(
+      var(--er-control-height-md),
+      var(--er-shape-spacing-100),
+      var(--er-shape-corner-100),
+      var(--er-shape-spacing-50)
+    );
+
+    background-color: var(--er-surface-container);
+    border: 1px solid var(--er-border-default);
+    box-shadow: none !important;
+
+    &:is(.is-hovering, .is-focused):not(.is-disabled) {
+      border-color: var(--er-action-primary-default);
+    }
+
+    &.is-disabled {
+      opacity: 0.5;
+    }
+  }
+
+  .el-select__placeholder {
+    @include typo.body-md;
+    color: var(--er-text-muted);
+  }
+
+  .el-select__selected-item {
+    @include typo.body-md;
+    color: var(--er-text-primary);
+
+    &.is-transparent {
+      color: var(--er-text-muted);
+    }
+  }
+
+  .el-select__prefix,
+  .el-select__suffix,
+  .el-select__caret {
+    color: var(--er-icon-secondary);
+  }
+
+  .el-select__caret {
+    font-size: var(--typo-body-md-sz);
+  }
+
+  .el-icon {
+    width: var(--er-control-height-xxs);
+    height: var(--er-control-height-xxs);
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  // ==========================================================================
+  // SIZES
+  // ==========================================================================
+
+  &.sm {
+    .el-select__wrapper {
+      @include select-wrapper-size(
+        var(--er-control-height-sm),
+        var(--er-shape-spacing-75),
+        var(--er-shape-corner-75),
+        var(--er-shape-spacing-50)
+      );
+    }
+
+    .el-select__placeholder,
+    .el-select__selected-item {
+      @include typo.body-sm;
+    }
+
+    .el-icon {
+      width: 12px;
+      height: 12px;
+
+      &.el-select__clear {
+        width: 12px;
+        height: 12px;
+      }
+    }
+  }
+
+  &.lg {
+    .el-select__wrapper {
+      @include select-wrapper-size(
+        var(--er-control-height-lg),
+        var(--er-shape-spacing-150),
+        var(--er-shape-corner-150),
+        var(--er-shape-spacing-75)
+      );
+    }
+
+    .el-icon {
+      width: var(--er-control-height-xxs);
+      height: var(--er-control-height-xxs);
+    }
+  }
+
+  &.xl {
+    .el-select__wrapper {
+      @include select-wrapper-size(
+        var(--er-control-height-xl),
+        var(--er-shape-spacing-200),
+        var(--er-shape-corner-150),
+        var(--er-shape-spacing-100)
+      );
+    }
+
+    .el-icon {
+      width: var(--er-control-height-xs);
+      height: var(--er-control-height-xs);
+    }
+  }
+
+  // ========================================================================
+  // DANGER
+  // Danger keeps its color on hover, but on focus we want primary border
+  // ========================================================================
+
+  &:is(.is-danger, .danger) {
+    .el-select__wrapper {
+      border-color: var(--er-border-danger);
+
+      &:is(.is-hovering):not(.is-focused):not(.is-disabled) {
+        border-color: var(--er-border-danger);
+      }
+
+      &.is-focused {
+        border-color: var(--er-action-primary-default) !important;
+      }
+    }
+  }
+}
+
+.custom-time-select-popper.el-popper {
+  .el-select-dropdown__item.is-selected {
+    background: var(--er-action-neutral-subtle-hover)
+  }
+}

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

@@ -0,0 +1,99 @@
+@use '../themes/aurora/typography/typography-utils' as typo;
+
+// ─── Base ─────────────────────────────────────────────────────────────────────
+
+.custom-timeline.el-timeline {
+  width: 100%;
+  padding: 0;
+  margin: 0;
+
+  .el-timeline-item {
+    position: relative;
+    padding-bottom: 16px;
+
+    &:last-child {
+      .el-timeline-item__tail {
+        display: none;
+      }
+    }
+
+    // ── States ──
+    &.is-passed {
+      .el-timeline-item__node {
+        background-color: var(--er-icon-brand);
+      }
+      .el-timeline-item__tail {
+        border-left-color: var(--er-icon-brand);
+      }
+    }
+
+    &.is-current {
+      .el-timeline-item__node {
+        background-color: var(--er-icon-brand);
+      }
+      .el-timeline-item__tail {
+        border-left-color: var(--er-surface-muted);
+      }
+    }
+
+    &:not(.is-passed):not(.is-current) {
+      .el-timeline-item__node {
+        background-color: var(--er-surface-muted);
+      }
+      .el-timeline-item__tail {
+        border-left-color: var(--er-surface-muted);
+      }
+    }
+  }
+
+  .el-timeline-item__timestamp {
+    display: none;
+  }
+
+  .el-timeline-item__node {
+    position: absolute;
+    left: 0;
+    top: 6px;
+    width: 8px;
+    height: 8px;
+    border-radius: var(--er-shape-corner-full);
+    background-color: var(--er-icon-brand);
+    border: none;
+  }
+
+  .el-timeline-item__tail {
+    position: absolute;
+    left: 3.5px;
+    top: 20px;
+    width: 0;
+    height: calc(100% - 20px);
+    border-left: 1px solid var(--er-surface-muted);
+    background: transparent;
+  }
+
+  .el-timeline-item__wrapper {
+    position: relative;
+    top: 0;
+    padding-left: var(--er-shape-spacing-200);
+    padding-bottom: 0;
+  }
+
+  .el-timeline-item__content {
+    width: 100%;
+  }
+
+  .timeline__title {
+    @include typo.body-md;
+    margin: 0;
+    color: var(--er-text-primary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .timeline__description {
+    @include typo.body-sm;
+    margin: 0;
+    color: var(--er-text-muted);
+  }
+}

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

@@ -0,0 +1,19 @@
+@use "../themes/aurora/typography/typography-utils" as typo;
+@use "../themes/aurora/elevation/elevation-utils" as elevation;
+
+// ─── Popper ───────────────────────────────────────────────────────────────────
+
+.custom-tooltip__popper.el-popper {
+  @apply flex items-center px-2 py-1 rounded-lg;
+  background: var(--er-surface-inverse);
+  max-width: 370px;
+  span {
+    @include typo.body-md;
+    color: var(--er-text-inverse);
+    font-variant-numeric: lining-nums tabular-nums;
+  }
+}
+
+.tooltip-no-arrow.custom-tooltip__popper.el-popper .el-popper__arrow {
+  display: none;
+}

package/dist/design-system/components/_topbar-menu.scss

@@ -0,0 +1,67 @@
+// TopbarMenu component — layout wrapper for top navigation bars
+// Figma: Topbar (node-id=40226-9820)
+// Combines prefix (logo/brand), content (horizontal menu), and suffix (actions)
+
+.custom-topbar-menu {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: var(--er-control-height-2xl);
+  padding: 0 var(--er-shape-spacing-300);
+  background: var(--er-surface-container);
+  border-bottom: 1px solid var(--er-border-subtle);
+  box-sizing: border-box;
+
+  &__prefix {
+    display: flex;
+    height: var(--er-control-height-md);
+    max-width: 220px;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    flex: 1 0 0;
+  }
+
+  &__content {
+    display: flex;
+    height: var(--er-control-height-md);
+    justify-content: center;
+    align-items: center;
+    gap: var(--er-shape-spacing-100);
+    flex: 1 0 0;
+    min-width: 0;
+
+    .custom-menu.el-menu--horizontal {
+      height: var(--er-control-height-md);
+      gap: var(--er-shape-spacing-100);
+      background: transparent;
+      border-bottom: none;
+
+      .el-menu-item,
+      .el-sub-menu__title {
+        height: var(--er-control-height-md) !important;
+        padding: 0 8px !important;
+        border-radius: var(--er-shape-corner-100);
+        gap: 8px;
+        border-bottom: none !important;
+        background-color: transparent !important;
+
+        svg {
+          width: 20px;
+          height: 20px;
+          margin-right: 0 !important;
+        }
+      }
+    }
+  }
+
+  &__suffix {
+    display: flex;
+    height: var(--er-control-height-md);
+    max-width: 220px;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--er-shape-spacing-150);
+    flex: 1 0 0;
+  }
+}