@1money/component-ui 0.0.1 → 0.0.2

package/es/components/Radio/style/Radio.scss

@@ -1,431 +0,0 @@
-@use '@/styles/api' as theme;
-@use '@/styles/theme/functions' as theme-internal;
-
-$component: 'radio';
-
-.#{theme.$prefix}-#{$component} {
-  display: inline-flex;
-  gap: theme.spacing(gap, 300);
-  align-items: flex-start;
-  cursor: pointer;
-
-  &-box-wrapper {
-    position: relative;
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    height: theme-internal.om-line-height-px(body, lg);
-  }
-
-  &-input {
-    position: absolute;
-    inset: 0;
-    margin: 0;
-    cursor: inherit;
-    opacity: 0;
-  }
-
-  &-box {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: theme.spacing(scale, 400);
-    height: theme.spacing(scale, 400);
-    overflow: hidden;
-    background-color: theme.palette(bg, 'default');
-    border: 1px solid theme.palette(border, 'default-secondary');
-    border-radius: theme.shape('full');
-    transition:
-      background-color 0.2s ease,
-      border-color 0.2s ease,
-      box-shadow 0.2s ease;
-
-    &::after {
-      position: absolute;
-      width: theme.spacing(scale, 200);
-      height: theme.spacing(scale, 200);
-      background-color: theme.palette(icon, 'on-brand');
-      border-radius: theme.shape('full');
-      transform: scale(0);
-      opacity: 0;
-      transition:
-        transform 0.2s ease,
-        opacity 0.2s ease;
-      content: '';
-    }
-  }
-
-  &-input:checked + .#{theme.$prefix}-#{$component}-box {
-    background-color: theme.palette(bg, 'brand');
-    border-color: theme.palette(bg, 'brand');
-
-    &::after {
-      transform: scale(1);
-      opacity: 1;
-    }
-  }
-
-  &-input:focus-visible + .#{theme.$prefix}-#{$component}-box {
-    border-color: theme.palette(border, 'brand');
-    box-shadow: 0 0 0 1px theme.palette(border, 'brand');
-  }
-
-  &-content {
-    display: flex;
-    flex: 1 0 0;
-    flex-direction: column;
-    min-width: 0;
-  }
-
-  &-label {
-    @include theme.typography(body, lg, $strong: true);
-
-    color: theme.palette(text, 'default');
-  }
-
-  &-description {
-    @include theme.typography(body, md, $strong: true);
-
-    color: theme.palette(text, 'default-tertiary');
-  }
-
-  &-tag {
-    display: inline-flex;
-    margin-top: theme.spacing(gap, 100);
-  }
-
-  &-cell {
-    position: relative;
-    display: block;
-    width: 100%;
-    min-width: 0;
-  }
-
-  &-cell-input {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-    margin: 0;
-    cursor: inherit;
-    opacity: 0;
-  }
-
-  &-cell-panel {
-    --om-radio-cell-icon: #{theme.palette(icon, 'default')};
-    --om-radio-cell-indicator-icon: #{theme.palette(icon, 'on-brand')};
-
-    position: relative;
-    display: flex;
-    gap: theme.spacing(gap, 300);
-    align-items: center;
-    box-sizing: border-box;
-    width: 100%;
-    min-width: 0;
-    background-color: theme.palette(bg, 'default');
-    border: 1px solid theme.palette(border, 'default');
-    border-radius: theme.shape(300);
-    transition:
-      background-color 0.2s ease,
-      border-color 0.2s ease,
-      box-shadow 0.2s ease;
-  }
-
-  &-cell-indicator,
-  &-cell-icon,
-  &-cell-radio {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &-cell-indicator {
-    width: theme.spacing(scale, 800);
-    height: theme.spacing(scale, 800);
-    color: var(--om-radio-cell-icon);
-    background-color: theme.palette(bg, 'neutral-tertiary');
-    border-radius: theme.shape('full');
-    transition:
-      background-color 0.2s ease,
-      color 0.2s ease;
-  }
-
-  &-cell-indicator-compact {
-    width: theme.spacing(scale, 600);
-    height: theme.spacing(scale, 600);
-  }
-
-  &-cell-icon {
-    color: var(--om-radio-cell-icon);
-  }
-
-  &-cell-radio {
-    width: theme.spacing(scale, 400);
-    height: theme.spacing(scale, 400);
-    background-color: theme.palette(bg, 'default');
-    border: 1px solid theme.palette(border, 'default-secondary');
-    border-radius: theme.shape('full');
-    transition:
-      background-color 0.2s ease,
-      border-color 0.2s ease;
-  }
-
-  &-cell-radio-dot {
-    width: theme.spacing(scale, 100);
-    height: theme.spacing(scale, 100);
-    background-color: theme.palette(icon, 'on-brand');
-    border-radius: theme.shape('full');
-    transform: scale(0);
-    opacity: 0;
-    transition:
-      transform 0.2s ease,
-      opacity 0.2s ease;
-  }
-
-  &-cell .#{theme.$prefix}-#{$component}-content {
-    display: flex;
-    flex: 1 0 0;
-    flex-direction: column;
-    min-width: 0;
-  }
-
-  &-cell .#{theme.$prefix}-#{$component}-label {
-    @include theme.typography(body, lg, $strong: true);
-  }
-
-  &-cell .#{theme.$prefix}-#{$component}-description {
-    @include theme.typography(body, md);
-  }
-
-  &-cell-horizontal.#{theme.$prefix}-#{$component}-cell-large {
-    .#{theme.$prefix}-#{$component}-cell-panel {
-      padding: theme.spacing(scale, 400);
-    }
-  }
-
-  &-cell-horizontal.#{theme.$prefix}-#{$component}-cell-medium,
-  &-cell-horizontal.#{theme.$prefix}-#{$component}-cell-small {
-    .#{theme.$prefix}-#{$component}-cell-panel {
-      padding: theme.spacing(scale, 300) theme.spacing(scale, 400);
-    }
-  }
-
-  &-cell-horizontal.#{theme.$prefix}-#{$component}-cell-medium {
-    .#{theme.$prefix}-#{$component}-label {
-      @include theme.typography(body, lg);
-    }
-  }
-
-  &-cell-horizontal.#{theme.$prefix}-#{$component}-cell-small {
-    .#{theme.$prefix}-#{$component}-content {
-      justify-content: center;
-    }
-
-    .#{theme.$prefix}-#{$component}-label {
-      @include theme.typography(body, lg, $strong: true);
-    }
-
-    .#{theme.$prefix}-#{$component}-description {
-      @include theme.typography(body, md, $strong: true);
-    }
-  }
-
-  &-cell-vertical {
-    .#{theme.$prefix}-#{$component}-cell-panel {
-      flex-direction: column;
-      justify-content: center;
-    }
-
-    .#{theme.$prefix}-#{$component}-content {
-      align-items: center;
-      text-align: center;
-    }
-
-    .#{theme.$prefix}-#{$component}-label,
-    .#{theme.$prefix}-#{$component}-description {
-      text-align: center;
-    }
-  }
-
-  &-cell-vertical.#{theme.$prefix}-#{$component}-cell-large {
-    .#{theme.$prefix}-#{$component}-cell-panel {
-      padding: theme.spacing(scale, 600) theme.spacing(scale, 400);
-    }
-  }
-
-  &-cell-vertical.#{theme.$prefix}-#{$component}-cell-medium,
-  &-cell-vertical.#{theme.$prefix}-#{$component}-cell-small {
-    .#{theme.$prefix}-#{$component}-cell-panel {
-      padding: theme.spacing(scale, 400);
-    }
-
-    .#{theme.$prefix}-#{$component}-label {
-      @include theme.typography(body, lg);
-    }
-  }
-
-  &-cell-input:checked + .#{theme.$prefix}-#{$component}-cell-panel {
-    background-color: theme.palette(bg, 'default-secondary');
-    border-color: theme.palette(border, 'brand');
-  }
-
-  &-cell-input:checked
-    + .#{theme.$prefix}-#{$component}-cell-panel
-    .#{theme.$prefix}-#{$component}-cell-indicator {
-    background-color: theme.palette(bg, 'brand');
-  }
-
-  &-cell-input:checked
-    + .#{theme.$prefix}-#{$component}-cell-panel
-    .#{theme.$prefix}-#{$component}-cell-radio {
-    background-color: theme.palette(bg, 'brand');
-    border-color: theme.palette(border, 'brand');
-  }
-
-  &-cell-input:checked
-    + .#{theme.$prefix}-#{$component}-cell-panel
-    .#{theme.$prefix}-#{$component}-cell-radio-dot {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  &-cell-vertical
-    .#{theme.$prefix}-#{$component}-cell-input:checked
-    + .#{theme.$prefix}-#{$component}-cell-panel {
-      border-width: 1px;
-  }
-
-  &-cell-input:focus-visible + .#{theme.$prefix}-#{$component}-cell-panel {
-    border-color: theme.palette(border, 'brand');
-    box-shadow: 0 0 0 1px theme.palette(border, 'brand');
-  }
-
-  &:not(&-disabled):hover {
-    .#{theme.$prefix}-#{$component}-box {
-      border-color: theme.palette(border, 'default-tertiary');
-    }
-
-    .#{theme.$prefix}-#{$component}-input:checked
-      + .#{theme.$prefix}-#{$component}-box {
-      background-color: theme.palette(bg, 'brand-hover');
-      border-color: theme.palette(bg, 'brand-hover');
-    }
-
-    .#{theme.$prefix}-#{$component}-cell-panel {
-      border-color: theme.palette(border, 'default-tertiary');
-    }
-
-    .#{theme.$prefix}-#{$component}-cell-input:checked
-      + .#{theme.$prefix}-#{$component}-cell-panel {
-      border-color: theme.palette(border, 'brand');
-    }
-  }
-
-  &-disabled {
-    cursor: not-allowed;
-
-    .#{theme.$prefix}-#{$component}-box {
-      background-color: theme.palette(bg, 'disabled');
-      border-color: theme.palette(border, 'disabled');
-    }
-
-    .#{theme.$prefix}-#{$component}-input:checked
-      + .#{theme.$prefix}-#{$component}-box {
-      background-color: theme.palette(bg, 'disabled');
-      border-color: theme.palette(border, 'disabled');
-    }
-
-    .#{theme.$prefix}-#{$component}-input:checked
-      + .#{theme.$prefix}-#{$component}-box::after {
-      background-color: theme.palette(icon, 'on-disabled');
-    }
-
-    .#{theme.$prefix}-#{$component}-label,
-    .#{theme.$prefix}-#{$component}-description {
-      color: theme.palette(text, 'disabled');
-    }
-
-    .#{theme.$prefix}-#{$component}-cell-panel {
-      background-color: theme.palette(bg, 'disabled');
-      border-color: theme.palette(border, 'disabled');
-    }
-
-    .#{theme.$prefix}-#{$component}-cell-indicator {
-      color: theme.palette(icon, 'on-disabled');
-      background-color: theme.palette(bg, 'disabled');
-    }
-
-    .#{theme.$prefix}-#{$component}-cell-icon {
-      color: theme.palette(icon, 'disabled');
-    }
-
-    .#{theme.$prefix}-#{$component}-cell-radio {
-      background-color: theme.palette(bg, 'disabled');
-      border-color: theme.palette(border, 'disabled');
-    }
-
-    .#{theme.$prefix}-#{$component}-cell-radio-dot {
-      background-color: theme.palette(icon, 'on-disabled');
-    }
-
-    .#{theme.$prefix}-#{$component}-tag {
-      opacity: theme.opacity('disabled-heavy');
-    }
-  }
-
-  &-right {
-    .#{theme.$prefix}-#{$component}-box-wrapper {
-      order: 1;
-    }
-
-    .#{theme.$prefix}-#{$component}-content {
-      order: 0;
-    }
-
-    .#{theme.$prefix}-#{$component}-cell-indicator,
-    .#{theme.$prefix}-#{$component}-cell-icon,
-    .#{theme.$prefix}-#{$component}-cell-radio {
-      order: 1;
-    }
-
-    .#{theme.$prefix}-#{$component}-cell .#{theme.$prefix}-#{$component}-content {
-      order: 0;
-    }
-  }
-}
-
-$group-component: 'radio-group';
-
-.#{theme.$prefix}-#{$group-component} {
-  display: flex;
-
-  &-vertical {
-    flex-direction: column;
-    gap: theme.spacing(gap, 300);
-  }
-
-  &-horizontal {
-    flex-flow: row wrap;
-    gap: theme.spacing(gap, 600);
-  }
-
-  &-cell.#{theme.$prefix}-#{$group-component}-vertical {
-    gap: theme.spacing(gap, 300);
-
-    > .#{theme.$prefix}-#{$component} {
-      width: 100%;
-    }
-  }
-
-  &-cell.#{theme.$prefix}-#{$group-component}-horizontal {
-    gap: theme.spacing(gap, 300);
-    align-items: stretch;
-
-    > .#{theme.$prefix}-#{$component} {
-      flex: 1 1 0;
-      min-width: 0;
-    }
-  }
-}

package/es/components/Segment/style/Segment.scss

@@ -1,80 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'segment';
-$segment-track-padding: theme.spacing(scale, 100);
-$segment-item-height: calc(theme.spacing(scale, 800) + theme.spacing(scale, 100));
-$segment-item-vertical-padding: theme.spacing(scale, 200);
-$segment-item-horizontal-padding: theme.spacing(component-padding, 400);
-
-.#{theme.$prefix}-#{$component} {
-  display: inline-flex;
-
-  // ── Track (outer container) ──
-  &-track {
-    position: relative;
-    display: inline-flex;
-    gap: theme.spacing(gap, 100);
-    align-items: center;
-    padding: $segment-track-padding;
-    background-color: theme.palette(bg, 'neutral-tertiary');
-    border-radius: theme.shape('full');
-  }
-
-  // ── Sliding indicator (active bg pill) ──
-  &-indicator {
-    position: absolute;
-    top: $segment-track-padding;
-    bottom: $segment-track-padding;
-    left: 0;
-    z-index: 0;
-    background-color: theme.palette(bg, 'neutral');
-    border-radius: theme.shape('full');
-    transition:
-      transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
-      width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
-  }
-
-  // ── Individual segment item ──
-  &-item {
-    position: relative;
-    z-index: 1;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    height: $segment-item-height;
-    padding: $segment-item-vertical-padding $segment-item-horizontal-padding;
-    color: theme.palette(text, 'default-tertiary');
-    background: none;
-    border: none;
-    border-radius: theme.shape('full');
-    outline: none;
-    cursor: pointer;
-    transition: color 0.2s ease;
-
-    @include theme.typography(label, lg);
-
-    // ── Hover state ──
-    &:hover:not(.#{theme.$prefix}-#{$component}-item-disabled):not(
-        .#{theme.$prefix}-#{$component}-item-active
-      ) {
-      color: theme.palette(text, 'default');
-    }
-
-    // ── Active state ──
-    &-active {
-      color: theme.palette(text, 'on-neutral');
-    }
-
-    // ── Disabled state ──
-    &-disabled {
-      color: theme.palette(text, 'disabled');
-      cursor: not-allowed;
-    }
-  }
-
-  // ── Item label ──
-  &-item-label {
-    white-space: nowrap;
-  }
-}