@1money/component-ui 0.0.1 → 0.0.3

package/es/components/Input/Trade/Trade.scss

@@ -1,184 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'input';
-
-.#{theme.$prefix}-#{$component} {
-  &-trade {
-    display: flex;
-    flex-direction: column;
-    gap: theme.spacing(gap, 200);
-    width: 100%;
-  }
-
-  &-trade-main {
-    padding-bottom: theme.spacing(scale, 200);
-    border-bottom: 1px solid theme.palette(border, 'default');
-    transition: border-color 0.2s ease;
-  }
-
-  &-trade-value-line {
-    display: flex;
-    gap: theme.spacing(gap, 200);
-    align-items: center;
-  }
-
-  &-trade-symbol {
-    @include theme.typography(display, lg);
-
-    flex-shrink: 0;
-    color: theme.palette(text, 'brand');
-  }
-
-  &-trade-input-wrapper {
-    display: flex;
-    flex: 1 1 auto;
-    align-items: center;
-    min-width: 0;
-  }
-
-  &-trade-field {
-    @include theme.typography(display, lg);
-
-    flex: 1 1 auto;
-    width: 100%;
-    min-width: 0;
-    color: theme.palette(text, 'brand');
-    background: transparent;
-    border: none;
-    outline: none;
-
-    &::placeholder {
-      color: theme.palette(text, 'brand');
-    }
-  }
-
-  &-trade-unit {
-    @include theme.typography(display, lg);
-
-    flex-shrink: 0;
-    color: theme.palette(text, 'brand');
-  }
-
-  &-trade-unit-placeholder {
-    color: theme.palette(text, 'neutral-tertiary');
-  }
-
-  &-trade-max {
-    @include theme.typography(body, sm, $strong: true);
-
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    padding: theme.spacing(component-padding, 200);
-    color: theme.palette(text, 'default');
-    background-color: theme.palette(bg, 'neutral-tertiary');
-    border: none;
-    border-radius: theme.shape(200);
-    cursor: pointer;
-
-    &:hover:not(:disabled) {
-      background-color: theme.palette(bg, 'neutral-tertiary-hover');
-    }
-
-    &:disabled {
-      color: theme.palette(text, 'disabled');
-      background-color: theme.palette(bg, 'disabled');
-      cursor: not-allowed;
-    }
-  }
-
-  &-trade-subline {
-    display: flex;
-    gap: theme.spacing(gap, 100);
-    align-items: center;
-    padding-top: theme.spacing(scale, 200);
-  }
-
-  &-trade-swap {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    color: theme.palette(icon, 'default-tertiary');
-    background: transparent;
-    border: none;
-    transform: rotate(-90deg);
-    cursor: pointer;
-
-    &:disabled {
-      color: theme.palette(icon, 'disabled');
-      cursor: not-allowed;
-    }
-  }
-
-  &-trade-exchange {
-    @include theme.typography(body, lg, $strong: true);
-
-    color: theme.palette(text, 'brand');
-  }
-
-  &-trade-error-msg {
-    @include theme.typography(body, sm);
-
-    display: flex;
-    gap: theme.spacing(gap, 100);
-    align-items: center;
-    color: theme.palette(text, 'default-tertiary');
-  }
-
-  // ── Focus ──
-  &-trade:focus-within {
-    .#{theme.$prefix}-#{$component}-trade-main {
-      padding-bottom: calc(#{theme.spacing(scale, 200)} - 1px);
-      border-bottom: 2px solid theme.palette(border, 'brand');
-    }
-  }
-
-  // ── Error ──
-  &-trade-error {
-    .#{theme.$prefix}-#{$component}-trade-symbol,
-    .#{theme.$prefix}-#{$component}-trade-field,
-    .#{theme.$prefix}-#{$component}-trade-unit {
-      color: theme.palette(text, 'danger');
-    }
-
-    .#{theme.$prefix}-#{$component}-trade-field::placeholder {
-      color: theme.palette(text, 'danger');
-    }
-
-    .#{theme.$prefix}-#{$component}-trade-main {
-      border-bottom-color: theme.palette(border, 'danger');
-    }
-
-    .#{theme.$prefix}-#{$component}-trade-error-msg {
-      color: theme.palette(text, 'danger');
-    }
-  }
-
-  // ── Disabled ──
-  &-trade-disabled {
-    .#{theme.$prefix}-#{$component}-trade-symbol,
-    .#{theme.$prefix}-#{$component}-trade-field,
-    .#{theme.$prefix}-#{$component}-trade-unit,
-    .#{theme.$prefix}-#{$component}-trade-unit-placeholder {
-      color: theme.palette(text, 'disabled');
-    }
-
-    .#{theme.$prefix}-#{$component}-trade-field::placeholder {
-      color: theme.palette(text, 'disabled');
-    }
-
-    .#{theme.$prefix}-#{$component}-trade-main {
-      border-bottom-color: theme.palette(border, 'disabled');
-    }
-
-    .#{theme.$prefix}-#{$component}-trade-exchange {
-      color: theme.palette(text, 'disabled');
-    }
-
-    .#{theme.$prefix}-#{$component}-trade-error-msg {
-      color: theme.palette(text, 'disabled');
-    }
-  }
-}

package/es/components/Modal/style/Modal.scss

@@ -1,254 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'modal';
-$dialog-width-small: 450px;
-$dialog-width-large: 740px;
-$dialog-transition-duration: 200ms;
-
-.#{theme.$prefix}-#{$component}-root {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-}
-
-.#{theme.$prefix}-#{$component}-overlay {
-  position: absolute;
-  inset: 0;
-  background-color: theme.palette(bg, 'scrim-dark');
-  opacity: 0;
-  transition: opacity $dialog-transition-duration ease;
-}
-
-.#{theme.$prefix}-#{$component}-wrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  padding: theme.spacing(scale, 400);
-  pointer-events: none;
-}
-
-.#{theme.$prefix}-#{$component} {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  justify-content: flex-start;
-  width: min(100%, $dialog-width-small);
-  max-height: calc(100vh - #{theme.spacing(scale, 800)});
-  overflow: hidden;
-  background-color: theme.palette(bg, 'default');
-  border: 1px solid theme.palette(border, 'neutral');
-  border-radius: theme.shape(600);
-  outline: none;
-  box-shadow: theme.shadows('200');
-  transform: translateY(theme.spacing(scale, 400));
-  opacity: 0;
-  transition:
-    opacity $dialog-transition-duration ease,
-    transform $dialog-transition-duration ease;
-  pointer-events: auto;
-
-  &-small {
-    width: min(100%, $dialog-width-small);
-  }
-
-  &-large {
-    width: min(100%, $dialog-width-large);
-  }
-
-  &-full-width {
-    width: calc(100vw - #{theme.spacing(scale, 800)});
-    max-width: none;
-  }
-
-  &-with-media {
-    .#{theme.$prefix}-#{$component}-inner {
-      padding-top: theme.spacing(scale, 800);
-    }
-  }
-
-  &-media {
-    width: 100%;
-    overflow: hidden;
-    background-color: theme.palette(bg, 'default-tertiary');
-  }
-
-  &-inner {
-    display: flex;
-    flex-direction: column;
-    gap: theme.spacing(gap, 600);
-    width: 100%;
-    padding: theme.spacing(scale, 1000) theme.spacing(scale, 1000) theme.spacing(scale, 800);
-  }
-
-  &-header {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    min-height: 24px;
-  }
-
-  &-control {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    padding: 0;
-    color: theme.palette(icon, 'default-tertiary');
-    background: transparent;
-    border: none;
-    cursor: pointer;
-
-    .#{theme.$prefix}-icons-wrapper {
-      --icon-color: currentcolor;
-    }
-
-    &:hover {
-      color: theme.palette(icon, 'default');
-    }
-  }
-
-  &-control-close {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-    z-index: 1;
-  }
-
-  &-body {
-    display: flex;
-    flex-direction: column;
-    gap: theme.spacing(gap, 600);
-    width: 100%;
-    min-width: 0;
-  }
-
-  &-summary {
-    display: flex;
-    flex-direction: column;
-    gap: theme.spacing(gap, 300);
-    width: 100%;
-    min-width: 0;
-  }
-
-  &-illustration {
-    display: inline-flex;
-    align-items: center;
-    justify-content: flex-start;
-    line-height: 0;
-  }
-
-  &-copy {
-    display: flex;
-    flex-direction: column;
-    gap: theme.spacing(gap, 300);
-    width: 100%;
-    min-width: 0;
-  }
-
-  &-title,
-  &-description,
-  &-content {
-    width: 100%;
-    min-width: 0;
-  }
-
-  &-title {
-    color: theme.palette(text, 'default');
-  }
-
-  &-description {
-    color: theme.palette(text, 'default-secondary');
-  }
-
-  &-content {
-    display: flex;
-    flex-direction: column;
-    gap: theme.spacing(gap, 300);
-  }
-
-  &-footer {
-    display: flex;
-    gap: theme.spacing(gap, 300);
-    width: 100%;
-
-    &-small {
-      flex-direction: column;
-      align-items: stretch;
-    }
-
-    &-large {
-      align-items: stretch;
-    }
-  }
-
-  &-action-button {
-    width: 100%;
-    min-height: 52px;
-    border-radius: theme.shape(300);
-
-    &.#{theme.$prefix}-button {
-      justify-content: center;
-    }
-  }
-
-  &-action-button-cancel.#{theme.$prefix}-button {
-    color: theme.palette(text, 'default');
-    background-color: theme.palette(bg, 'neutral-tertiary');
-
-    &:hover:not(:disabled) {
-      background-color: theme.palette(bg, 'neutral-secondary');
-    }
-  }
-
-  &-footer-large > .#{theme.$prefix}-#{$component}-action-button {
-    flex: 1 1 0;
-  }
-}
-
-.#{theme.$prefix}-#{$component}-root-open {
-  .#{theme.$prefix}-#{$component}-overlay {
-    opacity: 1;
-  }
-
-  .#{theme.$prefix}-#{$component} {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-.#{theme.$prefix}-#{$component}-root-closed {
-  .#{theme.$prefix}-#{$component}-overlay {
-    opacity: 0;
-  }
-
-  .#{theme.$prefix}-#{$component} {
-    transform: translateY(theme.spacing(scale, 400));
-    opacity: 0;
-  }
-}
-
-@include theme.down(sm) {
-  .#{theme.$prefix}-#{$component} {
-    &-wrapper {
-      align-items: flex-end;
-    }
-
-    &-full-width {
-      width: 100%;
-    }
-
-    &-inner {
-      padding-right: theme.spacing(scale, 800);
-      padding-left: theme.spacing(scale, 800);
-    }
-
-    &-footer-large {
-      flex-direction: column;
-    }
-  }
-}

package/es/components/Navigation/style/Nav.scss

@@ -1,174 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'nav';
-
-.#{theme.$prefix}-#{$component} {
-  display: flex;
-  flex-direction: column;
-  width: 280px;
-  height: 100%;
-  padding: theme.spacing(scale, 1000) theme.spacing(scale, 400) theme.spacing(scale, 600);
-  background-color: theme.palette(bg, 'default');
-  border-right: 1px solid theme.palette(border, 'neutral');
-
-  // ── Content ──
-  &-content {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    min-height: 0;
-    overflow-y: auto;
-  }
-
-  // ── Divider ──
-  &-divider {
-    height: 1px;
-    background-color: theme.palette(border, 'neutral');
-  }
-
-  // ── Group ──
-  &-group {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &-group-header {
-    display: flex;
-    align-items: center;
-    min-height: theme.sizing(component-height, 'md');
-    padding: theme.spacing(scale, 200) theme.spacing(scale, 400);
-    color: theme.palette(text, 'default-secondary');
-    border-radius: theme.shape(300);
-  }
-
-  &-group-header-content {
-    display: flex;
-    flex: 1;
-    gap: theme.spacing(gap, 200);
-    align-items: center;
-    min-width: 0;
-  }
-
-  &-group-header-icon {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    color: theme.palette(icon, 'default-secondary');
-  }
-
-  &-group-header-label {
-    flex: 1;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &-group-header .#{theme.$prefix}-typography {
-    color: inherit;
-  }
-
-  // ── Item ──
-  &-item-wrapper {
-    display: flex;
-    flex-direction: column;
-  }
-
-  &-item {
-    display: flex;
-    gap: theme.spacing(scale, 600);
-    align-items: center;
-    width: 100%;
-    min-height: theme.sizing(component-height, 'md');
-    padding: theme.spacing(scale, 200) theme.spacing(scale, 400);
-    padding-left: calc(#{theme.spacing(scale, 400)} + var(--om-nav-indent, 0) * #{theme.spacing(scale, 600)});
-    color: theme.palette(text, 'default-secondary');
-    background-color: transparent;
-    border: none;
-    border-radius: theme.shape(300);
-    cursor: pointer;
-
-    .#{theme.$prefix}-typography {
-      color: inherit;
-    }
-
-    // L2 hover: text turns brand blue
-    &[data-depth='1']:hover:not(:disabled) {
-      color: theme.palette(text, 'brand');
-    }
-
-    // L3+ hover: text darkens to default
-    &:not([data-depth='1']):hover:not(:disabled) {
-      color: theme.palette(text, 'default');
-    }
-
-    &-content {
-      display: flex;
-      flex: 1;
-      align-items: center;
-      min-width: 0;
-    }
-
-    &-label {
-      flex: 1;
-      overflow: hidden;
-      white-space: nowrap;
-      text-align: left;
-      text-overflow: ellipsis;
-    }
-
-    &-suffix {
-      flex-shrink: 0;
-    }
-
-    &-arrow {
-      display: inline-flex;
-      flex-shrink: 0;
-      align-items: center;
-      color: theme.palette(icon, 'default-secondary');
-      transition: transform 200ms ease-in-out;
-
-      &-open {
-        transform: rotate(-180deg);
-      }
-    }
-
-    &-link {
-      display: flex;
-      color: inherit;
-      text-decoration: none;
-    }
-
-    // ── Active (selected) state ──
-    &-active {
-      color: theme.palette(text, 'brand');
-    }
-
-    // ── Disabled state ──
-    &-disabled {
-      color: theme.palette(text, 'disabled');
-      cursor: not-allowed;
-
-      &:hover {
-        color: theme.palette(text, 'disabled');
-      }
-    }
-  }
-
-  // ── Submenu (expandable children) ──
-  &-submenu {
-    display: grid;
-    grid-template-rows: 0fr;
-    transition: grid-template-rows 200ms ease-in-out;
-
-    &-open {
-      grid-template-rows: 1fr;
-    }
-  }
-
-  &-submenu-inner {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-  }
-}