@1money/component-ui 0.0.1 → 0.0.3

package/lib/components/Space/style/Space.scss

@@ -1,40 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'space';
-$space-column-gap: '--om-space-column-gap';
-$space-row-gap: '--om-space-row-gap';
-$space-gap-fallback: 8px;
-
-.#{theme.$prefix}-#{$component} {
-  display: inline-flex;
-  gap: var(#{$space-row-gap}, #{$space-gap-fallback}) var(#{$space-column-gap}, #{$space-gap-fallback});
-
-  &-vertical {
-    flex-direction: column;
-  }
-
-  &-wrap {
-    flex-wrap: wrap;
-  }
-
-  &-align-start {
-    align-items: flex-start;
-  }
-
-  &-align-end {
-    align-items: flex-end;
-  }
-
-  &-align-center {
-    align-items: center;
-  }
-
-  &-align-baseline {
-    align-items: baseline;
-  }
-
-  &-item,
-  &-split {
-    display: inline-flex;
-  }
-}

package/lib/components/Spinner/style/Spinner.scss

@@ -1,90 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'spinner';
-
-// ── Animations ──
-@keyframes om-spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes om-dash {
-  0% {
-    stroke-dasharray: 1, 150;
-    stroke-dashoffset: 0;
-  }
-
-  50% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -35;
-  }
-
-  100% {
-    stroke-dasharray: 90, 150;
-    stroke-dashoffset: -124;
-  }
-}
-
-.#{theme.$prefix}-#{$component} {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: theme.palette(icon, 'brand');
-
-  // ── SVG circle spinner (default) ──
-  &-circle {
-    width: 100%;
-    height: 100%;
-    animation: om-spin 2s linear infinite;
-  }
-
-  &-path {
-    animation: om-dash 1.5s ease-in-out infinite;
-    stroke: currentcolor;
-    stroke-linecap: round;
-  }
-
-  // ── Shared spin animation for Logo ──
-  &-spin {
-    animation: om-spin 1s linear infinite;
-  }
-
-  // ── Brand (no background) ──
-  &-brand {
-    display: flex;
-    flex-direction: column;
-    gap: theme.spacing(gap, 200);
-    align-items: center;
-  }
-
-  // ── Brand with background ──
-  &-brand#{&}-brand-bg {
-    gap: theme.spacing(gap, 600);
-    border-radius: theme.shape(600);
-  }
-
-  // ── Logo icon color ──
-  &-logo {
-    color: theme.palette(icon, 'brand');
-  }
-
-  // ── Content section ──
-  &-content {
-    display: flex;
-    flex-direction: column;
-    gap: theme.spacing(gap, 200);
-    align-items: center;
-    white-space: nowrap;
-  }
-
-  // ── Text alignment ──
-  &-title,
-  &-body {
-    text-align: center;
-  }
-}

package/lib/components/Step/style/Step.scss

@@ -1,91 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'step';
-
-.#{theme.$prefix}-#{$component} {
-  --om-step-status-success-bg: #{theme.palette(bg, 'positive-tertiary-hover')};
-  --om-step-status-success-fg: #{theme.palette(icon, 'positive')};
-  --om-step-status-error-bg: #{theme.palette(bg, 'danger-tertiary-hover')};
-  --om-step-status-error-fg: #{theme.palette(icon, 'danger')};
-
-  display: flex;
-  flex-direction: column;
-  gap: theme.spacing(gap, 200);
-  width: 100%;
-
-  &-item {
-    display: flex;
-    gap: theme.spacing(gap, 300);
-    align-items: flex-start;
-    width: 100%;
-    min-width: 0;
-  }
-
-  &-indicator-column {
-    display: flex;
-    flex-direction: column;
-    flex-shrink: 0;
-    gap: theme.spacing(gap, 200);
-    align-items: center;
-    align-self: stretch;
-    width: 24px;
-  }
-
-  &-indicator {
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-  }
-
-  &-indicator-number {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: 22px;
-    height: 22px;
-    color: theme.palette(text, 'on-neutral');
-    background-color: theme.palette(bg, 'brand');
-    border-radius: theme.shape('full');
-
-    @include theme.typography(body, md);
-  }
-
-  &-indicator-icon {
-    display: block;
-    flex-shrink: 0;
-  }
-
-  &-connector {
-    flex: 1 0 0;
-    width: 1px;
-    min-height: 1px;
-    background-color: theme.palette(border, 'brand');
-  }
-
-  &-content {
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
-    gap: theme.spacing(gap, 200);
-    min-width: 0;
-  }
-
-  &-content-continuation {
-    padding-bottom: theme.spacing(scale, 400);
-  }
-
-  &-copy {
-    display: flex;
-    flex-direction: column;
-    gap: theme.spacing(gap, 100);
-    min-width: 0;
-  }
-
-  &-tag {
-    display: flex;
-    align-items: center;
-  }
-}

package/lib/components/Switch/style/Switch.scss

@@ -1,126 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'switch';
-$track-width: 40px;
-$track-height: 24px;
-$thumb-size: 20px;
-$thumb-offset: 2px;
-$thumb-travel: $track-width - $thumb-size - $thumb-offset * 2;
-
-.#{theme.$prefix}-#{$component} {
-  display: inline-flex;
-  gap: theme.spacing(gap, 300);
-  align-items: center;
-  cursor: pointer;
-
-  // ── Track wrapper (contains hidden input + visual track) ──
-  &-track-wrapper {
-    position: relative;
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-  }
-
-  // ── Hidden native input ──
-  &-input {
-    position: absolute;
-    inset: 0;
-    margin: 0;
-    cursor: inherit;
-    opacity: 0;
-  }
-
-  // ── Visual track ──
-  &-track {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: $track-width;
-    height: $track-height;
-    background-color: theme.palette(bg, 'neutral-secondary');
-    border-radius: theme.shape('full');
-    transition:
-      background-color 0.2s ease,
-      border-color 0.2s ease;
-  }
-
-  // ── Thumb ──
-  &-thumb {
-    position: absolute;
-    left: $thumb-offset;
-    width: $thumb-size;
-    height: $thumb-size;
-    background-color: theme.palette(bg, 'default');
-    border-radius: theme.shape('full');
-    box-shadow: theme.shadows(100);
-    transform: translateX(0);
-    transition: transform 0.2s ease;
-  }
-
-  // ── Focus ring ──
-  &-input:focus-visible + .#{theme.$prefix}-#{$component}-track {
-    box-shadow: 0 0 0 2px theme.palette(border, 'brand');
-  }
-
-  // ── Label content ──
-  &-content {
-    display: flex;
-    flex: 1 0 0;
-    flex-direction: column;
-    min-width: 0;
-  }
-
-  // ── Description ──
-  &-description {
-    min-height: 20px;
-  }
-
-  // ── Hover ──
-  &:not(&-disabled):hover {
-    .#{theme.$prefix}-#{$component}-track {
-      background-color: theme.palette(bg, 'neutral-secondary-hover');
-    }
-  }
-
-  // ── Checked state ──
-  &-checked {
-    .#{theme.$prefix}-#{$component}-track {
-      background-color: theme.palette(bg, 'brand');
-    }
-
-    .#{theme.$prefix}-#{$component}-thumb {
-      transform: translateX($thumb-travel);
-    }
-  }
-
-  &-checked:not(&-disabled):hover {
-    .#{theme.$prefix}-#{$component}-track {
-      background-color: theme.palette(bg, 'brand-hover');
-    }
-  }
-
-  // ── Disabled state ──
-  &-disabled {
-    cursor: not-allowed;
-
-    .#{theme.$prefix}-#{$component}-track {
-      background-color: theme.palette(bg, 'disabled');
-    }
-
-    .#{theme.$prefix}-#{$component}-thumb {
-      background-color: theme.palette(bg, 'default');
-      box-shadow: none;
-    }
-
-    .#{theme.$prefix}-#{$component}-content {
-      color: theme.palette(text, 'disabled');
-    }
-  }
-
-  // ── Right label placement (label after switch) ──
-  &-right {
-    .#{theme.$prefix}-#{$component}-track-wrapper {
-      order: -1;
-    }
-  }
-}

package/lib/components/Table/style/Table.scss

@@ -1,376 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'om-react-ui-table';
-
-// ========================= Base kernel layout =========================
-.#{$component} {
-  position: relative;
-  box-sizing: border-box;
-
-  // ========================= Wrapper (border, radius) =========================
-  width: 100%;
-  overflow: clip;
-  font-variant: tabular-nums;
-  background: theme.palette(bg, 'default');
-  border: 1px solid theme.palette(border, 'neutral');
-  border-radius: theme.shape(300);
-
-  // Inner table element
-  table {
-    width: 100%;
-    table-layout: fixed;
-    border-collapse: separate;
-    border-spacing: 0;
-  }
-
-  // Header
-  &-thead > tr > th,
-  &-thead > tr > td {
-    position: relative;
-    padding: theme.spacing(component-padding, 300) theme.spacing(component-padding, 400);
-    text-align: start;
-    overflow-wrap: break-word;
-    background: theme.palette(bg, 'default-secondary');
-    border-bottom: 1px solid theme.palette(border, 'neutral');
-
-    @include theme.typography(label, md);
-  }
-
-  // Body cells
-  &-tbody > tr > td {
-    position: relative;
-    padding: theme.spacing(component-padding, 300) theme.spacing(component-padding, 400);
-    vertical-align: middle;
-    overflow-wrap: break-word;
-    border-bottom: 1px solid theme.palette(border, 'neutral');
-
-    @include theme.typography(body, md);
-  }
-
-  // Body row
-  &-tbody > tr {
-    &:last-child > td {
-      border-bottom: 0;
-    }
-
-    // When the last data row is expanded, the expanded <tr> becomes :last-child
-    // and the data row above still shows its border-bottom — remove it to avoid
-    // a double border with the table wrapper's border.
-    &:has(+ .#{$component}-expanded-row:last-child) > td {
-      border-bottom: 0;
-    }
-
-    &:hover > td {
-      background: theme.palette(bg, 'default-secondary');
-    }
-  }
-
-  // ========================= Content wrapper =========================
-  &-content {
-    overflow: auto;
-  }
-
-  &-body {
-    overflow: auto;
-  }
-
-  // ========================= Header holder =========================
-  &-header {
-    overflow: hidden;
-  }
-
-  // ========================= Sticky header =========================
-  &-sticky-holder {
-    position: sticky;
-    z-index: 3;
-    background: theme.palette(bg, 'default');
-  }
-
-  // ========================= Fixed header (scroll.y) =========================
-  &-fixed-header > &-header {
-    overflow: hidden;
-  }
-
-  &-fixed-header > &-body {
-    overflow: auto scroll;
-  }
-
-  // ========================= Fixed columns =========================
-  &-cell-fix-start,
-  &-cell-fix-end {
-    position: sticky !important;
-    z-index: calc(2 + var(--z-offset, 0));
-    background: theme.palette(bg, 'default');
-  }
-
-  &-tbody > tr:hover &-cell-fix-start,
-  &-tbody > tr:hover &-cell-fix-end {
-    background: theme.palette(bg, 'default-secondary');
-  }
-
-  // Header fixed cells need header background
-  &-thead &-cell-fix-start,
-  &-thead &-cell-fix-end {
-    background: theme.palette(bg, 'default-secondary');
-  }
-
-  // ========================= Scroll shadow =========================
-  &-cell-fix-start-shadow::after,
-  &-cell-fix-end-shadow::after {
-    position: absolute;
-    top: 0;
-    bottom: -1px;
-    width: 30px;
-    transition: box-shadow 0.3s;
-    content: '';
-    pointer-events: none;
-  }
-
-  &-cell-fix-start-shadow::after {
-    right: 0;
-    transform: translateX(100%);
-  }
-
-  &-cell-fix-start-shadow-show::after {
-    box-shadow: inset 10px 0 8px -8px rgb(0 0 0 / 8%);
-  }
-
-  &-cell-fix-end-shadow::after {
-    left: 0;
-    transform: translateX(-100%);
-  }
-
-  &-cell-fix-end-shadow-show::after {
-    box-shadow: inset -10px 0 8px -8px rgb(0 0 0 / 8%);
-  }
-
-  // ========================= Expanded row =========================
-  &-expanded-row &-cell {
-    padding: theme.spacing(component-padding, 300);
-    background: theme.palette(bg, 'default-secondary');
-  }
-
-  // ========================= Empty =========================
-  &-placeholder {
-    text-align: center;
-  }
-
-  // ========================= Virtual table body =========================
-  &-tbody-virtual {
-    .#{$component}-row {
-      display: flex;
-
-      &:hover .#{$component}-cell {
-        background: theme.palette(bg, 'default-secondary');
-      }
-    }
-
-    .#{$component}-cell {
-      padding: theme.spacing(component-padding, 300) theme.spacing(component-padding, 400);
-      overflow-wrap: break-word;
-      border-bottom: 1px solid theme.palette(border, 'neutral');
-
-      @include theme.typography(body, md);
-    }
-  }
-
-  &-container,
-  &-content,
-  &-body,
-  &-header {
-    background: inherit;
-  }
-
-  // ========================= Pagination =========================
-  &-pagination {
-    display: flex;
-    justify-content: flex-end;
-    margin-top: theme.spacing(scale, 600);
-  }
-
-  // ========================= Sizes =========================
-  &-small {
-    --table-row-height: 56px;
-    --table-header-height: 40px;
-
-    .#{$component}-thead > tr > th,
-    .#{$component}-thead > tr > td {
-      padding: theme.spacing(component-padding, 200) theme.spacing(component-padding, 300);
-    }
-
-    .#{$component}-tbody > tr > td {
-      padding: theme.spacing(component-padding, 200) theme.spacing(component-padding, 300);
-    }
-  }
-
-  &-large {
-    --table-row-height: 66px;
-    --table-header-height: 48px;
-  }
-
-  // ========================= Variants =========================
-  &-fill {
-    border: 0;
-    border-radius: 0;
-
-    .#{$component}-thead > tr > th,
-    .#{$component}-thead > tr > td {
-      background: transparent;
-    }
-
-    // Fixed cells must retain opaque background to cover scrolling content
-    .#{$component}-thead .#{$component}-cell-fix-start,
-    .#{$component}-thead .#{$component}-cell-fix-end {
-      background: theme.palette(bg, 'default');
-    }
-  }
-
-  &-stroke {
-    .#{$component}-thead > tr > th,
-    .#{$component}-thead > tr > td {
-      border-bottom: none;
-    }
-
-
-    // Spacer columns: no border, no padding
-    .#{$component}-thead > tr > th.#{$component}-cell--spacer,
-    .#{$component}-thead > tr > td.#{$component}-cell--spacer,
-    .#{$component}-tbody > tr > td.#{$component}-cell--spacer {
-      padding: 0;
-      border-bottom: none;
-    }
-  }
-
-  // ========================= Header cell =========================
-  .#{$component}-header-cell {
-    display: inline-flex;
-    gap: 4px;
-    align-items: center;
-  }
-
-  .#{$component}-header-cell__title {
-    color: theme.palette(text, 'default');
-    white-space: nowrap;
-  }
-
-  .#{$component}-header-cell--large {
-    .#{$component}-header-cell__title {
-      @include theme.typography(title, lg);
-    }
-  }
-
-  .#{$component}-header-cell--small {
-    .#{$component}-header-cell__title {
-      @include theme.typography(title, sm, $strong: true);
-    }
-  }
-
-  // ========================= Sort trigger =========================
-  .#{$component}-sort-trigger {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    color: theme.palette(icon, 'default');
-    line-height: 0;
-    background: transparent;
-    border: 0;
-    cursor: pointer;
-
-    &:focus-visible {
-      outline: 2px solid theme.palette(border, 'default');
-      outline-offset: 2px;
-    }
-  }
-
-  .#{$component}-sort-trigger--large {
-    width: 16px;
-    height: 16px;
-  }
-
-  .#{$component}-sort-trigger--small {
-    width: 12px;
-    height: 12px;
-  }
-
-  // ========================= Expand trigger =========================
-  .#{$component}-expand-trigger {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: theme.spacing(scale, 400);
-    height: theme.spacing(scale, 400);
-    padding: 0;
-    color: theme.palette(icon, 'default');
-    background: transparent;
-    border: 0;
-    cursor: pointer;
-    transition: color 0.2s ease;
-
-    &:focus-visible {
-      outline: 2px solid theme.palette(border, 'default');
-      outline-offset: 2px;
-    }
-  }
-
-  .#{$component}-expand-trigger:hover {
-    color: theme.palette(icon, 'default-secondary');
-  }
-
-  .#{$component}-expand-trigger[aria-expanded='true'] {
-    color: theme.palette(icon, 'default');
-
-    &:hover {
-      color: theme.palette(icon, 'default-secondary');
-    }
-  }
-
-  .#{$component}-expand-trigger__icon {
-    transition: transform 0.2s ease;
-  }
-
-  // ========================= Cell content =========================
-  .#{$component}-cell-content {
-    display: inline-flex;
-    gap: 8px;
-    align-items: center;
-  }
-
-  .#{$component}-cell-content__text {
-    display: inline-flex;
-    flex-direction: column;
-    gap: 0;
-  }
-
-  // ========================= Expanded row content =========================
-  .#{$component}-expanded-row {
-    background: theme.palette(bg, 'default');
-  }
-
-  .#{$component}-expanded-row__content {
-    padding: theme.spacing(component-padding, 200) 0 theme.spacing(component-padding, 200);
-  }
-
-}
-
-// ========================= Loading wrapper =========================
-.#{$component}-wrapper {
-  position: relative;
-}
-
-.#{$component}-wrapper--loading {
-  > .#{$component} {
-    opacity: 0.6;
-    user-select: none;
-    pointer-events: none;
-  }
-}
-
-.#{$component}-loading-overlay {
-  position: absolute;
-  inset: 0;
-  z-index: 4;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}