@1money/component-ui 0.0.1 → 0.0.3

package/lib/components/Select/style/Select.scss

@@ -1,480 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'select';
-
-.#{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-text {
-    display: inline;
-  }
-
-  &-required {
-    color: theme.palette(text, 'danger');
-  }
-
-  &-info {
-    display: inline-flex;
-    align-items: center;
-    color: theme.palette(icon, 'default-tertiary');
-  }
-
-  &-description-text {
-    display: block;
-  }
-
-  &-trigger {
-    display: flex;
-    gap: theme.spacing(gap, 200);
-    align-items: center;
-    width: 100%;
-    min-width: 120px;
-    color: inherit;
-    text-align: left;
-    border: 1px solid theme.palette(border, 'default');
-    cursor: pointer;
-    transition:
-      background-color 0.2s ease,
-      border-color 0.2s ease,
-      box-shadow 0.2s ease;
-  }
-
-  &-trigger-large {
-    min-height: theme.sizing(component-height, '3xl');
-    padding: theme.spacing(component-padding, 300);
-    border-radius: theme.shape(300);
-  }
-
-  &-trigger-small {
-    min-height: theme.sizing(component-height, 'lg');
-    padding: theme.spacing(component-padding, 200) theme.spacing(component-padding, 300);
-    border-radius: theme.shape(200);
-  }
-
-  &-trigger-fill {
-    background-color: theme.palette(bg, 'default-secondary');
-  }
-
-  &-trigger-stroke {
-    background-color: transparent;
-  }
-
-  &-trigger-frameless {
-    justify-content: flex-start;
-    width: auto;
-    min-width: auto;
-    min-height: auto;
-    padding: 0;
-    background: transparent;
-    border: none;
-    border-radius: 0;
-  }
-
-  &-trigger:not(&-trigger-disabled):hover {
-    border-color: theme.palette(border, 'default-tertiary');
-  }
-
-  &-trigger-frameless:not(&-trigger-disabled):hover {
-    border-color: transparent;
-  }
-
-  &-trigger-open {
-    border-color: theme.palette(border, 'brand');
-    box-shadow: inset 0 0 0 1px theme.palette(border, 'brand');
-  }
-
-  &-trigger-error {
-    border-color: theme.palette(border, 'danger');
-  }
-
-  &-trigger-warning {
-    border-color: theme.palette(border, 'warning');
-  }
-
-  &-trigger-success {
-    border-color: theme.palette(border, 'positive');
-  }
-
-  &-trigger-disabled {
-    color: theme.palette(text, 'disabled');
-    background-color: theme.palette(bg, 'disabled');
-    border-color: theme.palette(border, 'disabled');
-    box-shadow: none;
-    cursor: not-allowed;
-  }
-
-  &-trigger-error,
-  &-trigger-warning,
-  &-trigger-success,
-  &-trigger-frameless {
-    box-shadow: none;
-  }
-
-  &-trigger-disabled .#{theme.$prefix}-#{$component}-prefix,
-  &-trigger-disabled .#{theme.$prefix}-#{$component}-icon {
-    color: theme.palette(icon, 'disabled');
-  }
-
-  &-content {
-    display: flex;
-    flex: 1 1 auto;
-    gap: theme.spacing(gap, 200);
-    align-items: center;
-    min-width: 0;
-  }
-
-  &-prefix {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    color: theme.palette(icon, 'default-tertiary');
-  }
-
-  &-value,
-  &-placeholder {
-    display: inline-flex;
-    flex: 1 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &-value-large {
-    @include theme.typography(body, lg, $strong: true);
-  }
-
-  &-value-small {
-    @include theme.typography(body, md, $strong: true);
-  }
-
-  &-placeholder-large {
-    @include theme.typography(body, lg);
-  }
-
-  &-placeholder-small {
-    @include theme.typography(body, md);
-  }
-
-  &-value {
-    color: theme.palette(text, 'default');
-  }
-
-  &-value-multiple {
-    display: flex;
-    flex-wrap: wrap;
-    gap: theme.spacing(gap, 200);
-    align-content: flex-start;
-    align-items: center;
-    max-height: 88px;
-    overflow: hidden;
-    white-space: normal;
-    text-overflow: clip;
-  }
-
-  &-placeholder {
-    color: theme.palette(text, 'neutral-secondary');
-  }
-
-  &-value-disabled,
-  &-placeholder-disabled {
-    color: theme.palette(text, 'disabled');
-  }
-
-  &-icon {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    color: theme.palette(icon, 'default');
-  }
-
-  &-trigger-multiple-filled {
-    padding-top: theme.spacing(gap, 200);
-    padding-bottom: theme.spacing(gap, 200);
-  }
-
-  &-tag {
-    @include theme.typography(body, sm, $strong: true);
-
-    display: inline-flex;
-    flex-shrink: 0;
-    gap: theme.spacing(gap, 100);
-    align-items: center;
-    justify-content: center;
-    max-width: 100%;
-    padding: theme.spacing(scale, 100) theme.spacing(component-padding, 200);
-    color: theme.palette(text, 'default-tertiary');
-    background-color: theme.palette(bg, 'neutral-tertiary');
-    border-radius: theme.shape('full');
-  }
-
-  &-tag-label {
-    min-width: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &-tag-remove {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    color: currentcolor;
-  }
-
-  &-collapsed-values {
-    display: inline-flex;
-    flex: 1 1 auto;
-    gap: theme.spacing(gap, 100);
-    align-items: center;
-    min-width: 0;
-  }
-
-  &-collapsed-values-list {
-    min-width: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &-collapsed-values-extra {
-    flex-shrink: 0;
-    color: theme.palette(text, 'default-secondary');
-  }
-
-  &-collapsed-values-extra-disabled {
-    color: theme.palette(text, 'disabled');
-  }
-
-  &-feedback {
-    display: inline-flex;
-    gap: theme.spacing(gap, 100);
-    align-items: flex-start;
-    color: theme.palette(text, 'default-secondary');
-  }
-
-  &-feedback-error {
-    color: theme.palette(text, 'danger');
-  }
-
-  &-feedback-warning {
-    color: theme.palette(text, 'warning');
-  }
-
-  &-feedback-success {
-    color: theme.palette(text, 'positive');
-  }
-
-  &-feedback-disabled {
-    color: theme.palette(text, 'disabled');
-  }
-
-  &-feedback-icon {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    margin-top: 1px;
-  }
-
-  &-panel {
-    z-index: 1500;
-    display: flex;
-    flex-direction: column;
-    padding: theme.spacing(component-padding, 200);
-    overflow: hidden;
-    background-color: theme.palette(bg, 'default');
-    border: 1px solid theme.palette(border, 'neutral-tertiary');
-    border-radius: theme.shape(300);
-    box-shadow: theme.shadows(100);
-  }
-
-  &-search {
-    display: flex;
-    flex-shrink: 0;
-    gap: theme.spacing(gap, 200);
-    align-items: center;
-    width: 100%;
-    min-height: theme.sizing(component-height, '3xl');
-    margin-bottom: theme.spacing(gap, 200);
-    padding: theme.spacing(component-padding, 300) theme.spacing(component-padding, 400);
-    background-color: theme.palette(bg, 'default');
-    border: 1px solid theme.palette(border, 'default');
-    border-radius: theme.shape(300);
-    transition:
-      border-color 0.2s ease,
-      box-shadow 0.2s ease;
-  }
-
-  &-search:hover {
-    border-color: theme.palette(border, 'default-tertiary');
-  }
-
-  &-search:focus-within {
-    border-color: theme.palette(border, 'brand');
-    box-shadow: inset 0 0 0 1px theme.palette(border, 'brand');
-  }
-
-  &-search-icon {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    color: theme.palette(icon, 'default');
-  }
-
-  &-search-input {
-    @include theme.typography(body, md);
-
-    flex: 1 1 auto;
-    min-width: 0;
-    color: theme.palette(text, 'default');
-    background: transparent;
-    border: none;
-    outline: none;
-  }
-
-  &-search-input::placeholder {
-    color: theme.palette(text, 'neutral-secondary');
-  }
-
-  &-panel-body {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    gap: theme.spacing(gap, '050');
-    min-height: 0;
-    overflow-y: auto;
-  }
-
-  &-panel-footer {
-    flex-shrink: 0;
-    width: 100%;
-    padding-top: theme.spacing(gap, 300);
-    padding-bottom: theme.spacing(gap, 100);
-    border-top: 1px solid theme.palette(border, 'neutral-secondary');
-  }
-
-  &-group {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-  }
-
-  &-group + &-group {
-    padding-top: theme.spacing(gap, 200);
-  }
-
-  &-group-label {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    margin-bottom: theme.spacing(gap, 200);
-    padding-top: theme.spacing(gap, 200);
-    color: theme.palette(text, 'default');
-  }
-
-  &-option {
-    display: flex;
-    gap: theme.spacing(gap, 300);
-    align-items: center;
-    width: 100%;
-    min-height: 40px;
-    padding: theme.spacing(component-padding, 200) theme.spacing(component-padding, 200);
-    color: theme.palette(text, 'default');
-    text-align: left;
-    background: transparent;
-    border: none;
-    border-radius: theme.shape(200);
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-  }
-
-  &-option:focus,
-  &-option:focus-visible {
-    outline: none;
-    box-shadow: none;
-  }
-
-  &-option:hover,
-  &-option-active,
-  &-option-selected {
-    background-color: theme.palette(bg, 'default-secondary');
-  }
-
-  &-option-disabled {
-    color: theme.palette(text, 'disabled');
-    background-color: transparent;
-    cursor: not-allowed;
-  }
-
-  &-option-content {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    gap: theme.spacing(gap, '050');
-    min-width: 0;
-  }
-
-  &-option-label {
-    min-width: 0;
-    overflow: hidden;
-    color: currentcolor;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &-option-description {
-    min-width: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &-option-check {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    width: 16px;
-    height: 16px;
-    margin-left: auto;
-    color: theme.palette(icon, 'brand');
-  }
-
-  &-empty {
-    padding: theme.spacing(component-padding, 200);
-    text-align: center;
-  }
-
-  &-frameless {
-    width: auto;
-  }
-
-  &-frameless .#{theme.$prefix}-#{$component}-value-large,
-  &-frameless .#{theme.$prefix}-#{$component}-placeholder-large {
-    @include theme.typography(body, lg);
-
-    color: theme.palette(text, 'default-tertiary');
-  }
-
-  &-frameless .#{theme.$prefix}-#{$component}-value-small,
-  &-frameless .#{theme.$prefix}-#{$component}-placeholder-small {
-    @include theme.typography(body, md);
-
-    color: theme.palette(text, 'default-tertiary');
-  }
-
-  &-frameless.#{theme.$prefix}-#{$component}-disabled {
-    color: theme.palette(text, 'disabled');
-  }
-}

package/lib/components/Skeleton/style/Skeleton.scss

@@ -1,47 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'skeleton';
-
-.#{theme.$prefix}-#{$component} {
-  position: relative;
-  overflow: hidden;
-  background-color: theme.palette(bg, 'neutral-tertiary-hover');
-  border-radius: theme.shape(100);
-
-  &::after {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-    background: linear-gradient(
-      90deg,
-      transparent,
-      theme.palette(bg, 'scrim-light'),
-      transparent
-    );
-    transform: translateX(-100%);
-    animation: om-skeleton-wave 1.2s infinite;
-    content: '';
-  }
-
-  // ── Shape: circle ──
-  &-circle {
-    border-radius: theme.shape('full');
-  }
-
-  // ── Animation: none ──
-  &-none::after {
-    animation: none;
-  }
-}
-
-/* stylelint-disable at-rule-prelude-no-invalid */
-@keyframes om-skeleton-wave {
-  from {
-    transform: translateX(-100%);
-  }
-
-  to {
-    transform: translateX(100%);
-  }
-}
-/* stylelint-enable at-rule-prelude-no-invalid */

package/lib/components/Slider/style/Slider.scss

@@ -1,182 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'slider';
-$track-height: 8px;
-$filled-track-height: 6px;
-$knob-size: 12px;
-
-.#{theme.$prefix}-#{$component} {
-  display: flex;
-  flex-direction: column;
-  gap: theme.spacing(gap, 300);
-  width: 100%;
-  min-width: 120px;
-
-  // ── Label row ──
-  &-label-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  &-label {
-    flex: 1 0 0;
-    color: theme.palette(text, 'default');
-  }
-
-  &-output {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    color: theme.palette(text, 'default');
-    white-space: nowrap;
-    text-align: right;
-  }
-
-  // ── Track area ──
-  &-track-wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: $knob-size;
-    cursor: pointer;
-  }
-
-  // ── Hidden native input ──
-  &-input {
-    position: absolute;
-    z-index: 2;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    cursor: inherit;
-    opacity: 0;
-    -webkit-appearance: none;
-    appearance: none;
-
-    &::-webkit-slider-thumb {
-      width: $knob-size;
-      height: $knob-size;
-      cursor: pointer;
-      -webkit-appearance: none;
-    }
-
-    &::-moz-range-thumb {
-      width: $knob-size;
-      height: $knob-size;
-      background: transparent;
-      border: none;
-      cursor: pointer;
-    }
-  }
-
-  // ── Visual track ──
-  &-track {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: $track-height;
-    overflow: hidden;
-    background-color: theme.palette(bg, 'default-tertiary');
-    border-radius: theme.shape('full');
-    pointer-events: none;
-  }
-
-  // ── Filled portion of track ──
-  &-fill {
-    height: $filled-track-height;
-    background-color: theme.palette(bg, 'neutral');
-    border-radius: theme.shape('full');
-    pointer-events: none;
-  }
-
-  // ── Knob ──
-  &-knob {
-    position: absolute;
-    z-index: 1;
-    width: $knob-size;
-    height: $knob-size;
-    background-color: theme.palette(bg, 'neutral');
-    border-radius: theme.shape('full');
-    transform: translateX(-50%);
-    transition: box-shadow 0.15s ease;
-    pointer-events: none;
-  }
-
-  // ── Knob end (disabled state endpoint indicator) ──
-  &-knob-end {
-    position: absolute;
-    right: 0;
-    z-index: 1;
-    width: $knob-size;
-    height: $knob-size;
-    background-color: theme.palette(bg, 'neutral');
-    border-radius: theme.shape('full');
-    pointer-events: none;
-  }
-
-  // ── Focus ring ──
-  &-input:focus-visible ~ .#{theme.$prefix}-#{$component}-knob {
-    box-shadow: 0 0 0 2px theme.palette(border, 'brand');
-  }
-
-  // ── Hover ──
-  &:not(&-disabled) &-track-wrapper:hover {
-    .#{theme.$prefix}-#{$component}-knob {
-      box-shadow: theme.shadows(100);
-    }
-  }
-
-  // ── Description ──
-  &-description {
-    width: 100%;
-    color: theme.palette(text, 'default-tertiary');
-  }
-
-  // ── Disabled state ──
-  &-disabled {
-    cursor: not-allowed;
-
-    .#{theme.$prefix}-#{$component}-track-wrapper {
-      cursor: not-allowed;
-    }
-
-    .#{theme.$prefix}-#{$component}-input {
-      cursor: not-allowed;
-    }
-
-    .#{theme.$prefix}-#{$component}-label {
-      color: theme.palette(text, 'disabled');
-    }
-
-    .#{theme.$prefix}-#{$component}-output {
-      color: theme.palette(text, 'disabled');
-    }
-
-    .#{theme.$prefix}-#{$component}-track {
-      background-color: theme.palette(bg, 'default-tertiary');
-    }
-
-    .#{theme.$prefix}-#{$component}-fill {
-      background-color: transparent;
-    }
-
-    .#{theme.$prefix}-#{$component}-knob {
-      background-color: theme.palette(bg, 'disabled');
-      border: 0.75px solid theme.palette(border, 'default');
-    }
-
-    .#{theme.$prefix}-#{$component}-knob-end {
-      background-color: theme.palette(bg, 'disabled');
-      border: 0.75px solid theme.palette(border, 'default');
-    }
-
-    .#{theme.$prefix}-#{$component}-description {
-      color: theme.palette(text, 'disabled');
-    }
-  }
-}