@1money/component-ui 0.0.1 → 0.0.2

package/lib/components/Grid/style/Grid.scss

@@ -1,184 +0,0 @@
-@use '@/styles/api' as theme;
-@use 'sass:math';
-
-$component-row: 'grid-row';
-$component-col: 'grid-col';
-$grid-columns: 12;
-$grid-index-start: 1;
-$grid-col-min-height: 1px;
-$grid-col-max-width: 100%;
-$grid-gutter-divisor: 2;
-$grid-gutter-fallback: 0px;
-$grid-col-flex-fallback: 0 0 auto;
-$grid-var-gutter-x: '--om-grid-gutter-x';
-$grid-var-gutter-y: '--om-grid-gutter-y';
-$grid-var-gutter-x-sm: '--om-grid-gutter-x-sm';
-$grid-var-gutter-y-sm: '--om-grid-gutter-y-sm';
-$grid-var-gutter-x-md: '--om-grid-gutter-x-md';
-$grid-var-gutter-y-md: '--om-grid-gutter-y-md';
-$grid-var-gutter-x-lg: '--om-grid-gutter-x-lg';
-$grid-var-gutter-y-lg: '--om-grid-gutter-y-lg';
-$grid-var-justify: '--om-grid-justify';
-$grid-var-justify-sm: '--om-grid-justify-sm';
-$grid-var-justify-md: '--om-grid-justify-md';
-$grid-var-justify-lg: '--om-grid-justify-lg';
-$grid-var-col-flex: '--om-grid-col-flex';
-$grid-var-col-flex-sm: '--om-grid-col-flex-sm';
-$grid-var-col-flex-md: '--om-grid-col-flex-md';
-$grid-var-col-flex-lg: '--om-grid-col-flex-lg';
-$grid-justify-fallback: flex-start;
-
-.#{theme.$prefix}-#{$component-row} {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: var(#{$grid-var-justify}, #{$grid-justify-fallback});
-  margin-right: calc(var(#{$grid-var-gutter-x}, #{$grid-gutter-fallback}) / -#{$grid-gutter-divisor});
-  margin-left: calc(var(#{$grid-var-gutter-x}, #{$grid-gutter-fallback}) / -#{$grid-gutter-divisor});
-  row-gap: var(#{$grid-var-gutter-y}, #{$grid-gutter-fallback});
-
-  &-no-wrap {
-    flex-wrap: nowrap;
-  }
-
-  &-align-top {
-    align-items: flex-start;
-  }
-
-  &-align-middle {
-    align-items: center;
-  }
-
-  &-align-bottom {
-    align-items: flex-end;
-  }
-
-  &-align-stretch {
-    align-items: stretch;
-  }
-
-  &-justify-start {
-    justify-content: flex-start;
-  }
-
-  &-justify-end {
-    justify-content: flex-end;
-  }
-
-  &-justify-center {
-    justify-content: center;
-  }
-
-  &-justify-space-between {
-    justify-content: space-between;
-  }
-
-  &-justify-space-around {
-    justify-content: space-around;
-  }
-
-  &-justify-space-evenly {
-    justify-content: space-evenly;
-  }
-}
-
-@include theme.down(lg) {
-  .#{theme.$prefix}-#{$component-row} {
-    justify-content: var(#{$grid-var-justify-lg}, var(#{$grid-var-justify}, #{$grid-justify-fallback}));
-  }
-}
-
-@include theme.down(md) {
-  .#{theme.$prefix}-#{$component-row} {
-    justify-content: var(#{$grid-var-justify-md}, var(#{$grid-var-justify}, #{$grid-justify-fallback}));
-  }
-}
-
-@include theme.down(sm) {
-  .#{theme.$prefix}-#{$component-row} {
-    justify-content: var(#{$grid-var-justify-sm}, var(#{$grid-var-justify}, #{$grid-justify-fallback}));
-  }
-}
-
-.#{theme.$prefix}-#{$component-col} {
-  position: relative;
-  flex: var(#{$grid-var-col-flex}, #{$grid-col-flex-fallback});
-  max-width: $grid-col-max-width;
-  min-height: $grid-col-min-height;
-  padding-right: calc(var(#{$grid-var-gutter-x}, #{$grid-gutter-fallback}) / #{$grid-gutter-divisor});
-  padding-left: calc(var(#{$grid-var-gutter-x}, #{$grid-gutter-fallback}) / #{$grid-gutter-divisor});
-}
-
-@mixin make-col-classes($infix: '') {
-  @for $i from $grid-index-start through $grid-columns {
-    .#{theme.$prefix}-#{$component-col}#{$infix}-#{$i} {
-      flex: 0 0 math.percentage(math.div($i, $grid-columns));
-      max-width: math.percentage(math.div($i, $grid-columns));
-    }
-
-    .#{theme.$prefix}-#{$component-col}#{$infix}-offset-#{$i} {
-      margin-left: math.percentage(math.div($i, $grid-columns));
-    }
-
-    .#{theme.$prefix}-#{$component-col}#{$infix}-order-#{$i} {
-      order: $i;
-    }
-
-    .#{theme.$prefix}-#{$component-col}#{$infix}-push-#{$i} {
-      left: math.percentage(math.div($i, $grid-columns));
-    }
-
-    .#{theme.$prefix}-#{$component-col}#{$infix}-pull-#{$i} {
-      right: math.percentage(math.div($i, $grid-columns));
-    }
-  }
-}
-
-@include make-col-classes('');
-
-@include theme.down(lg) {
-  .#{theme.$prefix}-#{$component-col} {
-    flex: var(#{$grid-var-col-flex-lg}, var(#{$grid-var-col-flex}, #{$grid-col-flex-fallback}));
-    padding-right: calc(var(#{$grid-var-gutter-x-lg}, var(#{$grid-var-gutter-x}, #{$grid-gutter-fallback})) / #{$grid-gutter-divisor});
-    padding-left: calc(var(#{$grid-var-gutter-x-lg}, var(#{$grid-var-gutter-x}, #{$grid-gutter-fallback})) / #{$grid-gutter-divisor});
-  }
-
-  .#{theme.$prefix}-#{$component-row} {
-    margin-right: calc(var(#{$grid-var-gutter-x-lg}, var(#{$grid-var-gutter-x}, #{$grid-gutter-fallback})) / -#{$grid-gutter-divisor});
-    margin-left: calc(var(#{$grid-var-gutter-x-lg}, var(#{$grid-var-gutter-x}, #{$grid-gutter-fallback})) / -#{$grid-gutter-divisor});
-    row-gap: var(#{$grid-var-gutter-y-lg}, var(#{$grid-var-gutter-y}, #{$grid-gutter-fallback}));
-  }
-
-  @include make-col-classes('-lg');
-}
-
-@include theme.down(md) {
-  .#{theme.$prefix}-#{$component-col} {
-    flex: var(#{$grid-var-col-flex-md}, var(#{$grid-var-col-flex}, #{$grid-col-flex-fallback}));
-    padding-right: calc(var(#{$grid-var-gutter-x-md}, var(#{$grid-var-gutter-x}, #{$grid-gutter-fallback})) / #{$grid-gutter-divisor});
-    padding-left: calc(var(#{$grid-var-gutter-x-md}, var(#{$grid-var-gutter-x}, #{$grid-gutter-fallback})) / #{$grid-gutter-divisor});
-  }
-
-  .#{theme.$prefix}-#{$component-row} {
-    margin-right: calc(var(#{$grid-var-gutter-x-md}, var(#{$grid-var-gutter-x}, #{$grid-gutter-fallback})) / -#{$grid-gutter-divisor});
-    margin-left: calc(var(#{$grid-var-gutter-x-md}, var(#{$grid-var-gutter-x}, #{$grid-gutter-fallback})) / -#{$grid-gutter-divisor});
-    row-gap: var(#{$grid-var-gutter-y-md}, var(#{$grid-var-gutter-y}, #{$grid-gutter-fallback}));
-  }
-
-  @include make-col-classes('-md');
-}
-
-@include theme.down(sm) {
-  .#{theme.$prefix}-#{$component-col} {
-    flex: var(#{$grid-var-col-flex-sm}, var(#{$grid-var-col-flex}, #{$grid-col-flex-fallback}));
-    padding-right: calc(var(#{$grid-var-gutter-x-sm}, var(#{$grid-var-gutter-x}, #{$grid-gutter-fallback})) / #{$grid-gutter-divisor});
-    padding-left: calc(var(#{$grid-var-gutter-x-sm}, var(#{$grid-var-gutter-x}, #{$grid-gutter-fallback})) / #{$grid-gutter-divisor});
-  }
-
-  .#{theme.$prefix}-#{$component-row} {
-    margin-right: calc(var(#{$grid-var-gutter-x-sm}, var(#{$grid-var-gutter-x}, #{$grid-gutter-fallback})) / -#{$grid-gutter-divisor});
-    margin-left: calc(var(#{$grid-var-gutter-x-sm}, var(#{$grid-var-gutter-x}, #{$grid-gutter-fallback})) / -#{$grid-gutter-divisor});
-    row-gap: var(#{$grid-var-gutter-y-sm}, var(#{$grid-var-gutter-y}, #{$grid-gutter-fallback}));
-  }
-
-  @include make-col-classes('-sm');
-}

package/lib/components/Icons/style/Icons.scss

@@ -1,85 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'icons';
-
-.#{theme.$prefix}-#{$component} {
-  &-wrapper {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--icon-width);
-    height: var(--icon-height);
-    color: var(--icon-color);
-    font-style: normal;
-  }
-
-  *:not(g, defs, clipPath, linearGradient, [fill], [stroke], [stroke-width]) {
-    fill: currentcolor;
-  }
-
-  *:not(g, defs, clipPath, linearGradient)[stroke-width]:not([stroke], [fill]) {
-    stroke: currentcolor;
-  }
-
-  &-logo-with-words {
-    display: inline-flex;
-    align-items: center;
-    font-style: normal;
-
-    i {
-      &:nth-last-child(1) {
-        padding-left: 5%;
-      }
-    }
-
-    &-with-network {
-      i {
-        &:nth-child(2),
-        &:nth-child(3) {
-          padding-left: 2.5%;
-        }
-      }
-    }
-  }
-
-  &-logo-with-beta {
-    display: inline-flex;
-    align-items: center;
-    font-style: normal;
-
-    i:nth-of-type(2) {
-      padding-left: 4%;
-    }
-
-    i:nth-of-type(3) {
-      align-self: flex-end;
-      margin-bottom: calc(var(--logo-height) * 0.125);
-      padding-left: 1px;
-    }
-  }
-}
-
-
-
-.#{theme.$prefix}-#{$component}-hover-wrapper {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px;
-  background-color: theme.palette(bg, default-secondary);
-  border-radius: theme.shape(200);
-
-  &:hover {
-    background-color: theme.palette(bg, default-secondary-hover);
-    cursor: pointer;
-  }
-
-  &-disabled {
-    cursor: not-allowed;
-    opacity: theme.opacity(disabled);
-
-    &:hover {
-      background-color: theme.palette(bg, default-secondary);
-    }
-  }
-}

package/lib/components/Input/Amount/style/Amount.scss

@@ -1,89 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'input';
-
-.#{theme.$prefix}-#{$component} {
-  // ── Amount: action button (e.g. "Use Max") ──
-  &-amount-action {
-    @include theme.typography(body, lg, $strong: true);
-
-    display: inline-flex;
-    align-items: center;
-    padding: 0;
-    color: theme.palette(text, 'brand');
-    white-space: nowrap;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-
-    &:disabled {
-      color: theme.palette(text, 'brand-secondary');
-      cursor: not-allowed;
-    }
-  }
-
-  // ── Amount: vertical divider ──
-  &-amount-divider {
-    width: 1px;
-    height: theme.spacing(component-padding, 400);
-    background-color: theme.palette(border, 'default');
-  }
-
-  // ── Amount: currency selector button ──
-  &-amount-currency {
-    display: inline-flex;
-    gap: theme.spacing(gap, 200);
-    align-items: center;
-    padding: 0;
-    color: theme.palette(text, 'default-tertiary');
-    background: transparent;
-    border: none;
-    cursor: pointer;
-
-    &:disabled {
-      color: theme.palette(text, 'disabled');
-      cursor: not-allowed;
-    }
-  }
-
-  // ── Amount: currency icon wrapper ──
-  &-amount-currency-icon {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    border-radius: theme.shape('full');
-
-    > img {
-      display: block;
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-  }
-
-  // ── Amount: currency label text ──
-  &-amount-currency-label {
-    @include theme.typography(body, lg);
-
-    white-space: nowrap;
-  }
-
-  // ── Amount: small size overrides ──
-  &-small &-amount-action {
-    @include theme.typography(body, md, $strong: true);
-  }
-
-  &-small &-amount-divider {
-    height: theme.spacing(component-padding, 400);
-  }
-
-  &-small &-amount-currency {
-    gap: 6px;
-  }
-
-  &-small &-amount-currency-label {
-    @include theme.typography(body, md);
-  }
-}

package/lib/components/Input/FieldShell/FieldShell.scss

@@ -1,62 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'input';
-
-.#{theme.$prefix}-#{$component} {
-  display: flex;
-  flex-direction: column;
-  gap: theme.spacing(gap, 200);
-  width: 100%;
-
-  &-label-row {
-    display: inline-flex;
-    gap: theme.spacing(gap, 100);
-    align-items: center;
-  }
-
-  &-label {
-    display: inline;
-    padding: 0;
-    cursor: pointer;
-  }
-
-  &-required {
-    color: theme.palette(text, 'danger');
-  }
-
-  &-error-msg {
-    display: flex;
-    gap: theme.spacing(gap, 100);
-    align-items: center;
-    color: theme.palette(text, 'default-tertiary');
-  }
-
-  &-error-msg-icon {
-    flex-shrink: 0;
-  }
-
-  &-control-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: theme.spacing(gap, '050');
-  }
-
-  // ── Status: feedback colors ──
-  &-error &-error-msg {
-    color: theme.palette(text, 'danger');
-  }
-
-  &-warning &-error-msg {
-    color: theme.palette(text, 'warning');
-  }
-
-  &-success &-error-msg {
-    color: theme.palette(text, 'positive');
-  }
-
-  // ── Disabled: text colors ──
-  &-disabled &-label,
-  &-disabled &-error-msg {
-    color: theme.palette(text, 'disabled');
-  }
-}

package/lib/components/Input/Input/Input.scss

@@ -1,131 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'input';
-
-.#{theme.$prefix}-#{$component} {
-  &-control {
-    display: flex;
-    gap: theme.spacing(gap, 200);
-    align-items: center;
-    box-sizing: border-box;
-    width: 100%;
-    height: theme.sizing(component-height, '3xl');
-    padding: 0 theme.spacing(component-padding, 400);
-    background-color: theme.palette(bg, 'default-secondary');
-    border: 1px solid theme.palette(border, 'default');
-    border-radius: theme.shape(300);
-    transition:
-      border-color 0.2s ease,
-      box-shadow 0.2s ease,
-      background-color 0.2s ease;
-  }
-
-  &-control:hover {
-    border-color: theme.palette(border, 'default-tertiary');
-  }
-
-  &-control:focus-within {
-    border-color: theme.palette(border, 'brand');
-    box-shadow: 0 0 0 1px theme.palette(border, 'brand');
-  }
-
-  &-control-disabled {
-    cursor: not-allowed;
-  }
-
-  &-field {
-    @include theme.typography(body, lg);
-
-    flex: 1 1 auto;
-    width: 100%;
-    color: theme.palette(text, 'default');
-    background: transparent;
-    border: none;
-    outline: none;
-
-    &::placeholder {
-      color: theme.palette(text, 'neutral-secondary');
-    }
-
-    &:not(:placeholder-shown) {
-      font-weight: 500;
-    }
-  }
-
-  &-prefix,
-  &-suffix {
-    display: inline-flex;
-    gap: theme.spacing(gap, 200);
-    align-items: center;
-    color: theme.palette(text, 'default-tertiary');
-  }
-
-  &-action {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    color: theme.palette(icon, 'default-tertiary');
-    background: transparent;
-    border: none;
-    cursor: pointer;
-  }
-
-  &-action:disabled {
-    color: theme.palette(icon, 'disabled');
-    cursor: not-allowed;
-  }
-
-  // ── Size ──
-  &-small &-control {
-    height: theme.sizing(component-height, 'lg');
-    padding: 0 theme.spacing(component-padding, 400);
-    border-radius: theme.shape(200);
-  }
-
-  &-small &-field {
-    @include theme.typography(body, md);
-  }
-
-  // ── Status ──
-  &-error &-control,
-  &-error &-control:hover,
-  &-error &-control:focus-within {
-    border-color: theme.palette(border, 'danger');
-    box-shadow: 0 0 0 1px theme.palette(border, 'danger');
-  }
-
-  &-warning &-control,
-  &-warning &-control:hover,
-  &-warning &-control:focus-within {
-    border-color: theme.palette(border, 'warning');
-    box-shadow: none;
-  }
-
-  &-success &-control,
-  &-success &-control:hover,
-  &-success &-control:focus-within {
-    border-color: theme.palette(border, 'positive');
-    box-shadow: none;
-  }
-
-  // ── Read-only ──
-  &-readonly &-control,
-  &-readonly &-control:hover,
-  &-readonly &-control:focus-within {
-    background-color: theme.palette(bg, 'neutral-tertiary');
-    border-color: transparent;
-    box-shadow: none;
-  }
-
-  // ── Disabled ──
-  &-disabled &-control {
-    background-color: theme.palette(bg, 'disabled');
-    border-color: theme.palette(border, 'default');
-    cursor: not-allowed;
-  }
-
-  &-disabled &-field {
-    color: theme.palette(text, 'disabled');
-  }
-}

package/lib/components/Input/OTP/OTP.scss

@@ -1,75 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'input';
-
-.#{theme.$prefix}-#{$component} {
-  &-otp {
-    display: flex;
-    gap: theme.spacing(gap, 200);
-  }
-
-  &-otp-cell {
-    @include theme.typography(body, lg);
-
-    width: 54px;
-    height: theme.sizing(component-height, '3xl');
-    color: theme.palette(text, 'default');
-    font-weight: 500;
-    text-align: center;
-    background-color: theme.palette(bg, 'default-secondary');
-    border: 1px solid theme.palette(border, 'default');
-    border-radius: theme.shape(300);
-    outline: none;
-  }
-
-  &-otp-cell:hover:not(:disabled) {
-    border-color: theme.palette(border, 'default-tertiary');
-  }
-
-  &-error &-otp-cell:hover:not(:disabled) {
-    border-color: theme.palette(border, 'danger');
-  }
-
-  &-warning &-otp-cell:hover:not(:disabled) {
-    border-color: theme.palette(border, 'warning');
-  }
-
-  &-success &-otp-cell:hover:not(:disabled) {
-    border-color: theme.palette(border, 'positive');
-  }
-
-  &-otp-cell:focus {
-    border-color: theme.palette(border, 'brand');
-    box-shadow: 0 0 0 1px theme.palette(border, 'brand');
-  }
-
-  // ── Size ──
-  &-small &-otp-cell {
-    width: theme.sizing(component-height, 'lg');
-    height: theme.sizing(component-height, 'lg');
-    border-radius: theme.shape(200);
-  }
-
-  // ── Status ──
-  &-error &-otp-cell {
-    color: theme.palette(text, 'danger');
-    border-color: theme.palette(border, 'danger');
-    box-shadow: 0 0 0 1px theme.palette(border, 'danger');
-  }
-
-  &-warning &-otp-cell {
-    border-color: theme.palette(border, 'warning');
-  }
-
-  &-success &-otp-cell {
-    border-color: theme.palette(border, 'positive');
-  }
-
-  // ── Disabled ──
-  &-disabled &-otp-cell {
-    color: theme.palette(text, 'disabled');
-    background-color: theme.palette(bg, 'disabled');
-    border-color: theme.palette(border, 'default');
-    cursor: not-allowed;
-  }
-}

package/lib/components/Input/TextArea/TextArea.scss

@@ -1,87 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'input';
-
-.#{theme.$prefix}-#{$component} {
-  &-textarea-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: theme.spacing(gap, 200);
-    align-items: stretch;
-    width: 100%;
-    min-height: 120px;
-    padding: theme.spacing(component-padding, 300) theme.spacing(component-padding, 400);
-    background-color: theme.palette(bg, 'default-secondary');
-    border: 1px solid theme.palette(border, 'default');
-    border-radius: theme.shape(300);
-    transition:
-      border-color 0.2s ease,
-      box-shadow 0.2s ease,
-      background-color 0.2s ease;
-  }
-
-  &-textarea-wrapper:hover {
-    border-color: theme.palette(border, 'default-tertiary');
-  }
-
-  &-textarea-wrapper:focus-within {
-    border-color: theme.palette(border, 'brand');
-    box-shadow: 0 0 0 1px theme.palette(border, 'brand');
-  }
-
-  &-textarea {
-    @include theme.typography(body, lg);
-
-    flex: 1 1 auto;
-    width: 100%;
-    color: theme.palette(text, 'default');
-    background: transparent;
-    border: none;
-    outline: none;
-    resize: none;
-
-    &::placeholder {
-      color: theme.palette(text, 'neutral-secondary');
-    }
-
-    &:not(:placeholder-shown) {
-      font-weight: 500;
-    }
-  }
-
-  &-count {
-    text-align: right;
-  }
-
-  // ── Size ──
-  &-small &-textarea-wrapper {
-    min-height: theme.sizing(component-height, 'lg');
-    padding: theme.spacing(component-padding, 200);
-    border-radius: theme.shape(200);
-  }
-
-  // ── Status ──
-  &-error &-textarea-wrapper {
-    border-color: theme.palette(border, 'danger');
-    box-shadow: 0 0 0 1px theme.palette(border, 'danger');
-  }
-
-  &-warning &-textarea-wrapper {
-    border-color: theme.palette(border, 'warning');
-  }
-
-  &-success &-textarea-wrapper {
-    border-color: theme.palette(border, 'positive');
-  }
-
-  // ── Disabled ──
-  &-disabled &-textarea-wrapper {
-    background-color: theme.palette(bg, 'disabled');
-    border-color: theme.palette(border, 'default');
-    cursor: not-allowed;
-  }
-
-  &-disabled &-textarea {
-    color: theme.palette(text, 'disabled');
-  }
-}