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

package/dist/design-system/components/_input-number.scss

@@ -0,0 +1,233 @@
+@use '../themes/aurora/typography/typography-utils' as typo;
+
+// ─── Reusable base styles (can be included in other components) ───────────────
+@mixin input-number-base {
+  border: 1px solid var(--er-border-default);
+  border-radius: var(--er-shape-corner-full);
+  background-color: transparent;
+  width: auto;
+  display: flex;
+  align-items: center;
+  box-shadow: none;
+
+  .el-input {
+    flex: 1;
+    order: 2;
+    padding: 0 var(--er-shape-spacing-50);
+
+    .el-input__wrapper {
+      background: transparent;
+      border: none;
+      box-shadow: none !important;
+      align-items: center;
+      justify-content: center;
+      gap: var(--er-shape-spacing-50);
+      padding: 0;
+    }
+  }
+
+  .el-input__inner {
+    color: var(--er-text-primary);
+    text-align: center;
+    background: transparent;
+
+    &::placeholder {
+      color: var(--er-text-muted);
+    }
+  }
+
+  .el-input-number__decrease,
+  .el-input-number__increase {
+    border: none;
+    background: transparent;
+    color: var(--er-icon-primary);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    top: -1px;
+    bottom: 0;
+    position: static;
+
+    &:hover:not(.is-disabled) {
+      background-color: var(--er-surface-hover);
+      color: var(--er-icon-primary);
+    }
+
+    &.is-disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      color: var(--er-icon-primary);
+    }
+
+    .el-icon {
+      width: var(--er-control-height-sm);
+      height: var(--er-control-height-sm);
+    }
+  }
+
+  .el-input-number__decrease {
+    order: 1;
+    left: 0px;
+  }
+  .el-input-number__increase {
+    right: 0px;
+    order: 3;
+  }
+
+  &.is-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    .el-input-number__decrease,
+    .el-input-number__increase {
+      cursor: not-allowed;
+      color: var(--er-icon-primary);
+
+      &:hover {
+        background: transparent;
+      }
+    }
+
+    .el-input__inner {
+      cursor: not-allowed;
+    }
+  }
+
+  &:focus-within,
+  &:hover:not(.is-disabled) {
+    border-color: var(--er-action-primary-hover);
+  }
+}
+
+@mixin input-number-size($height, $button-size, $icon-size, $button-radius) {
+  height: $height !important;
+  min-height: $height !important;
+
+  .el-input-number__decrease,
+  .el-input-number__increase {
+    border-radius: $button-radius;
+    width: $button-size;
+    height: $button-size;
+
+    svg {
+      width: $icon-size;
+      height: $icon-size;
+    }
+  }
+}
+
+// ─── Base ─────────────────────────────────────────────────────────────────────
+
+.custom-input.el-input-number {
+  @include input-number-base;
+
+  .el-input__prefix,
+  .el-input__suffix {
+    position: static;
+    transform: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    height: 100%;
+    min-height: 0;
+    padding: 0;
+    margin: 0;
+    color: var(--er-text-primary);
+    line-height: 1;
+  }
+
+  .el-input__prefix-inner,
+  .el-input__suffix-inner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    line-height: 1;
+    gap: 0;
+
+    > :last-child {
+      margin-right: 0;
+    }
+    > :first-child {
+      margin-left: 0;
+    }
+  }
+
+  .input-prefix,
+  .input-suffix {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    line-height: 1;
+  }
+
+  &:has(.el-input__prefix),
+  &:has(.el-input__suffix) {
+    .el-input__inner {
+      width: 2ch;
+      min-width: 1ch;
+      max-width: 4ch;
+    }
+  }
+
+  // ── SM ──
+  &.sm {
+    @include input-number-size(
+      var(--er-control-height-sm),
+      var(--er-control-height-sm),
+      var(--er-control-height-xxs),
+      var(--er-shape-corner-50)
+    );
+
+    .el-input {
+      .el-input__inner {
+        @include typo.body-sm;
+      }
+
+      input {
+        height: var(--er-control-height-sm);
+      }
+    }
+  }
+
+  // ── MD ──
+  &.md {
+    @include input-number-size(
+      var(--er-control-height-md),
+      var(--er-control-height-md),
+      var(--er-control-height-xs),
+      var(--er-shape-corner-100)
+    );
+
+    .el-input {
+      .el-input__inner {
+        @include typo.body-sm;
+      }
+      input {
+        height: var(--er-control-height-md);
+      }
+    }
+  }
+
+  // ── LG ──
+  &.lg {
+    @include input-number-size(
+      var(--er-control-height-lg),
+      var(--er-control-height-lg),
+      var(--er-control-height-xs),
+      var(--er-shape-corner-150)
+    );
+
+    .el-input {
+      .el-input__inner {
+        @include typo.body-md;
+      }
+      input {
+        height: var(--er-control-height-lg);
+      }
+    }
+  }
+}

package/dist/design-system/components/_input-tag.scss

@@ -0,0 +1,212 @@
+@use '../themes/aurora/typography/typography-utils' as typo;
+
+@mixin input-tag-size($height, $padding, $gap, $radius) {
+  min-height: $height !important;
+  padding: 0 $padding;
+  gap: $gap;
+  border-radius: $radius;
+}
+
+// ─── Base ─────────────────────────────────────────────────────────────────────
+
+.custom-input-tag.el-input-tag {
+  border: 1px solid var(--er-border-default);
+  background-color: var(--er-surface-container);
+  box-shadow: none !important;
+  gap: var(--er-shape-spacing-50);
+  padding: 0;
+
+  .el-input-tag__prefix svg,
+  .el-input-tag__suffix svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  &:focus-within {
+    border-color: var(--er-action-primary-default) !important;
+  }
+
+  &:hover:not(.is-disabled) {
+    box-shadow: none !important;
+    border-color: var(--er-action-primary-hover);
+  }
+
+  .el-input-tag__inner {
+    display: flex;
+    align-items: center;
+    gap: var(--er-shape-spacing-50);
+    @include typo.body-md;
+
+    &.is-right-space,
+    &.is-left-space {
+      margin: 0;
+    }
+  }
+
+  .el-input-tag__input {
+    color: var(--er-text-primary);
+    padding: 0;
+    height: var(--er-control-height-xs);
+    background: transparent;
+    border: none;
+    outline: none;
+    flex: 1;
+    min-width: 0 !important;
+
+    &::placeholder {
+      color: var(--er-text-muted);
+    }
+  }
+
+  // Base icon size = MD (16×16)
+  .el-input-tag__prefix,
+  .el-input-tag__suffix {
+    padding: 0;
+    width: var(--er-control-height-xxs);
+    height: var(--er-control-height-xxs);
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .el-tag {
+    gap: var(--er-shape-spacing-50);
+    border-radius: var(--er-shape-corner-50);
+    background-color: var(--er-surface-muted);
+    height: var(--er-control-height-xs);
+    padding: 0 var(--er-shape-spacing-100);
+
+    .el-tag__content {
+      @include typo.label-md;
+      color: var(--er-text-secondary);
+    }
+
+    .el-tag__close {
+      width: 12px;
+      height: 12px;
+      font-size: 12px;
+      color: var(--er-icon-secondary);
+      margin-left: var(--er-shape-spacing-50);
+      flex-shrink: 0;
+
+      &:hover {
+        background-color: var(--er-surface-hover);
+        color: var(--er-icon-primary);
+      }
+    }
+  }
+
+  // ── SM ──
+  &.sm {
+    @include input-tag-size(
+      var(--er-control-height-sm),
+      var(--er-shape-spacing-75),
+      var(--er-shape-spacing-50),
+      var(--er-shape-corner-75)
+    );
+
+    .el-input-tag__inner {
+      gap: 2px;
+      @include typo.body-sm;
+    }
+
+    .el-input-tag__prefix,
+    .el-input-tag__suffix {
+      width: 12px;
+      height: 12px;
+
+      svg {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  // ── MD ──
+  &.md {
+    @include input-tag-size(
+      var(--er-control-height-md),
+      var(--er-shape-spacing-100),
+      var(--er-shape-spacing-50),
+      var(--er-shape-corner-100)
+    );
+  }
+
+  // ── LG ──
+  &.lg {
+    @include input-tag-size(
+      var(--er-control-height-lg),
+      var(--er-shape-spacing-150),
+      var(--er-shape-spacing-75),
+      var(--er-shape-corner-150)
+    );
+
+    .el-input-tag__input {
+      height: var(--er-control-height-sm);
+    }
+
+    .el-input-tag__prefix,
+    .el-input-tag__suffix {
+      width: var(--er-control-height-xxs);
+      height: var(--er-control-height-xxs);
+    }
+
+    .el-tag {
+      height: var(--er-control-height-sm);
+      padding: 0 var(--er-shape-spacing-75);
+    }
+  }
+
+  // ── XL ──
+  &.xl {
+    @include input-tag-size(
+      var(--er-control-height-xl),
+      var(--er-shape-spacing-200),
+      var(--er-shape-spacing-100),
+      var(--er-shape-corner-150)
+    );
+
+    .el-input-tag__input {
+      height: var(--er-control-height-sm);
+    }
+
+    .el-input-tag__prefix,
+    .el-input-tag__suffix {
+      width: var(--er-control-height-xs);
+      height: var(--er-control-height-xs);
+    }
+
+    .el-tag {
+      height: var(--er-control-height-sm);
+      padding: 0 var(--er-shape-spacing-75);
+    }
+  }
+
+  // ── Disabled ──
+  &.is-disabled {
+    border-color: var(--er-border-default);
+    background-color: var(--er-surface-container);
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    .el-input-tag__input {
+      cursor: not-allowed;
+      color: var(--er-text-secondary);
+
+      &::placeholder {
+        color: var(--er-text-muted);
+      }
+    }
+  }
+
+  // ── Error ──
+  &.is-error {
+    border-color: var(--er-border-danger);
+
+    &:hover:not(.is-disabled) {
+      border-color: var(--er-border-danger);
+    }
+  }
+}

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

@@ -0,0 +1,239 @@
+@use '../themes/aurora/typography/typography-utils' as typo;
+
+@mixin sz($height, $padding, $gap, $radius) {
+  height: $height;
+  padding: 0 $padding;
+  gap: $gap;
+  border-radius: $radius;
+}
+
+// ─── Input ────────────────────────────────────────────────────────────────────
+
+.custom-input.el-input {
+  .el-input__wrapper {
+    border: 1px solid var(--er-border-default);
+    background-color: var(--er-surface-container);
+    box-shadow: none !important;
+
+    &.is-focus {
+      border-color: var(--er-action-primary-default) !important;
+    }
+
+    &:hover:not(.is-disabled),
+    &:focus-within {
+      border-color: var(--er-action-primary-hover);
+    }
+  }
+
+  .el-input__inner {
+    color: var(--er-text-primary);
+
+    &::placeholder {
+      color: var(--er-text-muted);
+    }
+  }
+
+  // ── SM ──
+  &.sm {
+    .el-input__wrapper {
+      @include sz(
+        var(--er-control-height-sm),
+        var(--er-shape-spacing-75),
+        var(--er-shape-spacing-50),
+        var(--er-shape-corner-75)
+      );
+    }
+
+    .el-input__inner {
+      @include typo.body-sm;
+    }
+
+    .el-input__prefix-inner,
+    .el-input__suffix-inner {
+      svg {
+        width: 12px;
+        height: 12px;
+      }
+    }
+  }
+
+  // ── MD ──
+  &.md {
+    .el-input__wrapper {
+      @include sz(
+        var(--er-control-height-md),
+        var(--er-shape-spacing-100),
+        var(--er-shape-spacing-50),
+        var(--er-shape-corner-100)
+      );
+    }
+
+    .el-input__inner {
+      @include typo.body-md;
+    }
+  }
+
+  // ── LG ──
+  &.lg {
+    .el-input__wrapper {
+      @include sz(
+        var(--er-control-height-lg),
+        var(--er-shape-spacing-150),
+        var(--er-shape-spacing-75),
+        var(--er-shape-corner-150)
+      );
+    }
+
+    .el-input__inner {
+      @include typo.body-md;
+    }
+  }
+
+  &.xl {
+    .el-input__wrapper {
+      @include sz(
+        var(--er-control-height-xl),
+        var(--er-shape-spacing-200),
+        var(--er-shape-spacing-100),
+        var(--er-shape-corner-150)
+      );
+    }
+
+    .el-input__prefix-inner,
+    .el-input__suffix-inner {
+      gap: var(--er-shape-spacing-100);
+
+      svg {
+        width: var(--er-control-height-xs);
+        height: var(--er-control-height-xs);
+      }
+    }
+  }
+
+  // ── Error ──
+  &.is-error,
+  &.error,
+  &.is-danger,
+  &.danger {
+    .el-input__wrapper {
+      border-color: var(--er-border-danger);
+
+      &:hover:not(.is-focused) {
+        border-color: var(--er-border-danger) !important;
+      }
+
+      &.is-focused {
+        border-color: var(--er-action-primary-default) !important;
+      }
+    }
+  }
+
+  // ── Success ──
+  &.is-success,
+  &.success {
+    .el-input__wrapper {
+      border-color: var(--er-border-success);
+    }
+  }
+
+  // ── Disabled ──
+  &.is-disabled {
+    .el-input__wrapper {
+      border-color: var(--er-border-default);
+      background-color: var(--er-surface-container);
+      opacity: 0.5;
+
+      &:hover {
+        border-color: var(--er-border-default);
+      }
+    }
+  }
+
+  // ── Icon ──
+  .el-input__suffix,
+  .el-input__prefix {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .el-icon {
+      width: var(--er-control-height-xxs);
+      height: var(--er-control-height-xxs);
+      color: var(--er-icon-secondary);
+    }
+  }
+
+  .el-input__prefix-inner,
+  .el-input__suffix-inner {
+    display: flex;
+    align-items: center;
+    gap: var(--er-shape-spacing-50);
+
+    svg {
+      width: var(--er-control-height-xxs);
+      height: var(--er-control-height-xxs);
+    }
+  }
+
+  .el-input__suffix-inner > :first-child {
+    margin-left: 0;
+  }
+
+  .el-input__prefix-inner > :last-child {
+    margin-right: 0;
+  }
+}
+
+// ─── Textarea ─────────────────────────────────────────────────────────────────
+
+.custom-input.el-textarea {
+  .el-textarea__inner {
+    min-height: 120px;
+    padding: 10px var(--er-shape-spacing-150);
+    border-radius: var(--er-shape-corner-100);
+    border: 1px solid var(--er-border-default);
+    background-color: var(--er-surface-container);
+    box-shadow: none !important;
+    @include typo.body-md;
+    color: var(--er-text-primary);
+
+    &::placeholder {
+      color: var(--er-text-muted);
+    }
+
+    &:focus {
+      border-color: var(--er-action-primary-default) !important;
+    }
+
+    &:hover:not(:disabled) {
+      border-color: var(--er-action-primary-hover);
+      box-shadow: none !important;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      background-color: var(--er-surface-container);
+      border-color: var(--er-border-default);
+    }
+  }
+
+  // ── Error ──
+  &.is-error .el-textarea__inner {
+    border-color: var(--er-border-danger);
+
+    &:hover:not(:disabled) {
+      border-color: var(--er-border-danger);
+    }
+  }
+
+  // ── Counter ──
+  .el-input__count {
+    @include typo.body-sm;
+    color: var(--er-text-muted);
+    background-color: transparent;
+    position: absolute;
+    bottom: -20px;
+    right: 0;
+  }
+}