@1money/component-ui 0.0.1 → 0.0.2

package/lib/components/Tabs/style/Tabs.scss

@@ -1,100 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'tabs';
-
-.#{theme.$prefix}-#{$component} {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-
-  // ── Header (tab bar) ──
-  &-header {
-    position: relative;
-    display: flex;
-    gap: theme.spacing(scale, 0);
-    align-items: center;
-    overflow-x: auto;
-
-    // Hide scrollbar
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-
-  // ── Individual tab ──
-  &-tab {
-    display: inline-flex;
-    flex-shrink: 0;
-    gap: theme.spacing(gap, 100);
-    align-items: center;
-    justify-content: center;
-    height: theme.sizing(component-height, '2xl');
-    padding: theme.spacing(scale, 100) theme.spacing(component-padding, 400);
-    color: theme.palette(text, 'default-tertiary');
-    background: none;
-    border: none;
-    border-bottom: 1px solid theme.palette(border, 'neutral');
-    border-radius: theme.shape(100) theme.shape(100) 0 0;
-    outline: none;
-    cursor: pointer;
-    transition: color 0.2s ease;
-
-    @include theme.typography(title, md, $strong: true);
-
-    // ── Hover state ──
-    &:hover:not(.#{theme.$prefix}-#{$component}-tab-disabled):not(
-        .#{theme.$prefix}-#{$component}-tab-active
-      ) {
-      color: theme.palette(text, 'default');
-    }
-
-    // ── Active state ──
-    &-active {
-      color: theme.palette(text, 'default');
-    }
-
-    // ── Disabled state ──
-    &-disabled {
-      color: theme.palette(text, 'disabled');
-      cursor: not-allowed;
-    }
-  }
-
-  // ── Sliding indicator ──
-  &-indicator {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 2px;
-    background-color: #000;
-    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);
-  }
-
-  // ── Tab label ──
-  &-tab-label {
-    white-space: nowrap;
-  }
-
-  // ── Tab badge ──
-  &-tab-badge {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: theme.spacing(scale, 100) theme.spacing(scale, 200);
-    color: theme.palette(text, 'default-tertiary');
-    background-color: theme.palette(bg, 'neutral-tertiary');
-    border-radius: theme.shape('full');
-
-    @include theme.typography(body, sm, $strong: true);
-  }
-
-  // ── Panel ──
-  &-panel {
-    padding: theme.spacing(scale, 400) 0;
-  }
-}

package/lib/components/Tag/style/Tag.scss

@@ -1,103 +0,0 @@
-@use '@/styles/api' as theme;
-@use '@/styles/recipes/variants' as variants;
-
-$component: 'tag';
-
-// ── Variant DSL ──
-$tag-variant-schema: variants.om-variant-schema($component, text, bg);
-$tag-variants: (
-  'neutral': (
-    text: theme.palette(text, 'default-tertiary'),
-    bg: theme.palette(bg, 'neutral-tertiary'),
-  ),
-  'warning': (
-    text: theme.palette(text, 'warning'),
-    bg: theme.palette(bg, 'warning-secondary-hover'),
-  ),
-  'negative': (
-    text: theme.palette(text, 'danger'),
-    bg: theme.palette(bg, 'danger-tertiary-hover'),
-  ),
-  'success': (
-    text: theme.palette(text, 'positive'),
-    bg: theme.palette(bg, 'positive-tertiary-hover'),
-  ),
-  'recommended': (
-    text: theme.palette(text, 'brand'),
-    bg: theme.palette(bg, 'brand-tertiary'),
-  ),
-  'black': (
-    text: theme.palette(text, 'default'),
-    bg: theme.palette(bg, 'default-tertiary'),
-  ),
-);
-
-.#{theme.$prefix}-#{$component} {
-  @include variants.om-variant-default($tag-variants, 'neutral', $tag-variant-schema);
-
-  display: inline-flex;
-  gap: theme.spacing(gap, 100);
-  align-items: center;
-  justify-content: center;
-  height: 24px;
-  padding: 0 theme.spacing(component-padding, 200);
-  color: var(--om-tag-text);
-  background-color: var(--om-tag-bg);
-  border: none;
-  border-radius: theme.shape('full');
-  cursor: default;
-
-  // ── Size: medium ──
-  &-medium {
-    height: 20px;
-  }
-
-  // ── Size: small ──
-  &-small {
-    gap: theme.spacing(gap, '050');
-    height: 16px;
-    padding: 0 theme.spacing(scale, 100);
-
-  }
-
-  // ── Icon ──
-  &-icon {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    color: inherit;
-  }
-
-  // ── Label ──
-  &-label {
-    flex-shrink: 0;
-    white-space: nowrap;
-  }
-
-  &-label-large,
-  &-label-medium {
-    line-height: 1.33;
-  }
-
-  &-label-small {
-    line-height: 1.08;
-  }
-
-  // ── Remove button ──
-  &-remove {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    color: inherit;
-    cursor: pointer;
-
-    &:hover {
-      opacity: theme.opacity('disabled-heavy');
-    }
-  }
-
-  // ── Color variants ──
-  @include variants.om-variant-classes($tag-variants, $tag-variant-schema, $default: 'neutral');
-}

package/lib/components/Tooltip/style/Tooltip.scss

@@ -1,95 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'tooltip';
-$cls: #{theme.$prefix}-#{$component};
-
-// ── Override react-tooltip defaults ──
-.#{$cls}[role='tooltip'] {
-  display: flex;
-  flex-direction: column;
-  gap: theme.spacing(scale, 0);
-  align-items: center;
-  min-width: 48px;
-  max-width: 400px;
-  padding: theme.spacing(scale, 200) theme.spacing(scale, 300);
-  color: theme.palette(text, 'on-neutral');
-  background-color: theme.palette(bg, 'neutral');
-  border-radius: theme.shape('200');
-  box-shadow: theme.shadows('200');
-  opacity: 1;
-
-  // ── Title ──
-  .#{$cls}-title {
-    @include theme.typography(title, sm, $strong: true);
-  }
-
-  // ── Body ──
-  .#{$cls}-body {
-    @include theme.typography(body, sm, $strong: true);
-  }
-
-  // ── Title variant layout ──
-  &.#{$cls}-with-title {
-    align-items: flex-start;
-    text-align: left;
-  }
-
-  // ── Arrow ──
-  .#{$cls}-arrow {
-    background-color: theme.palette(bg, 'neutral');
-    border-radius: 0;
-    -webkit-mask-position: center;
-    mask-position: center;
-    -webkit-mask-repeat: no-repeat;
-    mask-repeat: no-repeat;
-    -webkit-mask-size: 100% 100%;
-    mask-size: 100% 100%;
-  }
-
-  // SVG beak paths shared by both orientations
-  $beak-paths: '%3Cpath d=%22M17.3146 7.35495L10.3664 0.8154C9.80987 0.291642 9.07447 0 8.31027 0H27.6897C26.9255 0 26.1901 0.291642 25.6336 0.815401L18.6854 7.35495C18.3003 7.71735 17.6997 7.71735 17.3146 7.35495Z%22 fill=%22%23000000%22/%3E%3Cpath d=%22M8 0.5H8.34315C9.40401 0.5 10.4214 0.921427 11.1716 1.67157L17.2929 7.79289C17.6834 8.18342 18.3166 8.18342 18.7071 7.79289L24.8284 1.67157C25.5786 0.921426 26.596 0.5 27.6569 0.5H28%22 stroke=%22%23000000%22 stroke-linecap=%22round%22/%3E';
-  $h-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 36 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E#{$beak-paths}%3C/svg%3E");
-  $v-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 9 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(0 36) rotate(-90)'%3E#{$beak-paths}%3C/g%3E%3C/svg%3E");
-
-  &[class*='react-tooltip__place-top'] > .#{$cls}-arrow,
-  &[class*='react-tooltip__place-bottom'] > .#{$cls}-arrow {
-    width: 36px;
-    height: 9px;
-    -webkit-mask-image: $h-mask;
-    mask-image: $h-mask;
-  }
-
-  &[class*='react-tooltip__place-left'] > .#{$cls}-arrow,
-  &[class*='react-tooltip__place-right'] > .#{$cls}-arrow {
-    width: 9px;
-    height: 36px;
-    -webkit-mask-image: $v-mask;
-    mask-image: $v-mask;
-  }
-
-  &[class*='react-tooltip__place-top'] > .#{$cls}-arrow {
-    bottom: -8px !important;
-    transform: none;
-  }
-
-  &[class*='react-tooltip__place-bottom'] > .#{$cls}-arrow {
-    top: -8px !important;
-    transform: rotate(180deg);
-  }
-
-  &[class*='react-tooltip__place-left'] > .#{$cls}-arrow {
-    right: -8px !important;
-    transform: none;
-  }
-
-  &[class*='react-tooltip__place-right'] > .#{$cls}-arrow {
-    left: -8px !important;
-    transform: rotate(180deg);
-  }
-}
-
-@include theme.down(sm) {
-  .#{$cls}[role='tooltip'] {
-    max-width: 300px;
-  }
-}

package/lib/components/Trigger/style/Trigger.scss

@@ -1,18 +0,0 @@
-@use '@/styles/api' as theme;
-
-.om-trigger {
-  &-panel {
-    z-index: 1500;
-    padding: theme.spacing(component-padding, 200);
-    background-color: theme.palette(bg, 'default');
-    border: 1px solid theme.palette(border, 'neutral-tertiary');
-    border-radius: theme.shape(300);
-    box-shadow: theme.shadows(100);
-  }
-
-  &-arrow {
-    fill: theme.palette(bg, 'default');
-    stroke: theme.palette(border, 'neutral-tertiary');
-    stroke-width: 1px;
-  }
-}

package/lib/components/Typography/style/Typography.scss

@@ -1,132 +0,0 @@
-@use 'sass:map';
-@use '@/styles/api' as theme;
-
-$component: 'typography';
-$typography-categories: (
-  display: (xl, lg, md, sm, xs),
-  headline: (lg, md, sm, xs),
-  title: (lg, md, sm),
-  body: (lg, md, sm),
-  label: (xl, lg, md, sm, xs),
-);
-$strong-categories: (title, body, label);
-$link-sizes: (md, sm);
-
-.#{theme.$prefix}-#{$component} {
-  margin: 0;
-  color: inherit;
-  text-decoration-color: currentcolor;
-
-  // Category + size variants
-  @each $category, $sizes in $typography-categories {
-    @each $size in $sizes {
-      &-#{$category}-#{$size} {
-        @include theme.typography($category, $size);
-      }
-    }
-  }
-
-  // Link variants (includes brand color)
-  @each $size in $link-sizes {
-    &-link-#{$size} {
-      @include theme.typography(link, $size);
-
-      color: theme.palette(text, 'brand');
-    }
-  }
-
-  // Strong variants for title, body, and label
-  @each $category in $strong-categories {
-    $sizes: map.get($typography-categories, $category);
-
-    @each $size in $sizes {
-      &-#{$category}-#{$size}.#{theme.$prefix}-#{$component}-strong {
-        @include theme.typography($category, $size, $strong: true);
-      }
-    }
-  }
-
-  &-italic {
-    font-style: italic;
-  }
-
-  &-underline {
-    text-decoration-line: underline;
-  }
-
-  &-delete {
-    text-decoration-line: line-through;
-  }
-
-  &-underline-delete {
-    text-decoration-line: underline line-through;
-  }
-
-  &-ellipsis {
-    position: relative;
-    display: block;
-    min-width: 0;
-    max-width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  &-ellipsis-measure {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    visibility: hidden;
-    pointer-events: none;
-  }
-
-  &-copyable-wrapper {
-    display: inline-flex;
-    gap: theme.spacing(gap, 100);
-    align-items: center;
-    min-width: 0;
-    max-width: 100%;
-  }
-
-  &-copyable-wrapper-inline {
-    display: inline-flex;
-    vertical-align: bottom;
-  }
-
-  &-copyable-wrapper-block {
-    display: flex;
-    align-items: flex-start;
-    width: 100%;
-  }
-
-  &-copyable-content {
-    flex: 1 1 auto;
-    min-width: 0;
-  }
-
-  // Semantic color tokens — derived from the design system's text scale
-  @each $token in map.keys(map.get(theme.$om-theme-scales, 'text')) {
-    &-color-#{$token} {
-      color: theme.palette(text, $token);
-    }
-  }
-
-  &-disabled {
-    color: theme.palette(text, 'disabled');
-    cursor: not-allowed;
-  }
-
-  // Link hover and disabled states
-  @each $size in $link-sizes {
-    &-link-#{$size}:hover {
-      color: theme.palette(text, 'brand');
-    }
-
-    &-link-#{$size}.#{theme.$prefix}-#{$component}-disabled {
-      color: theme.palette(text, 'disabled');
-      pointer-events: none;
-    }
-  }
-}

package/lib/components/Upload/style/Upload.scss

@@ -1,44 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'upload';
-
-.#{theme.$prefix}-#{$component} {
-  display: flex;
-  flex-direction: column;
-  gap: theme.spacing(scale, 200);
-  align-items: flex-start;
-
-  &-input {
-    display: none;
-  }
-
-  &-label {
-    color: theme.palette(text, 'default');
-  }
-
-  &-description {
-    color: theme.palette(text, 'default-tertiary');
-  }
-
-  &-slot {
-    display: flex;
-    flex-direction: column;
-    gap: 0;
-    width: 100%;
-  }
-
-  &-error-msg {
-    display: flex;
-    gap: theme.spacing(scale, 100);
-    align-items: flex-start;
-    color: theme.palette(text, 'danger');
-
-    &-text {
-      color: inherit !important;
-    }
-  }
-
-  &-disabled {
-    cursor: not-allowed;
-  }
-}

package/lib/components/Upload/style/UploadFileBar.scss

@@ -1,94 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'upload-file-bar';
-
-.#{theme.$prefix}-#{$component} {
-  display: flex;
-  gap: theme.spacing(gap, 300);
-  align-items: center;
-  width: 100%;
-
-  &-inner {
-    position: relative;
-    display: inline-flex;
-    flex-grow: 1;
-    gap: theme.spacing(gap, 200);
-    align-items: center;
-    justify-content: space-between;
-    min-width: 120px;
-    height: theme.sizing(component-height, 'lg');
-    padding: theme.spacing(scale, 300) theme.spacing(scale, 400);
-    overflow: hidden;
-    color: theme.palette(text, 'brand');
-    background-color: theme.palette(bg, 'default-secondary');
-    border: 1px solid theme.palette(border, 'default');
-    border-radius: theme.shape(300);
-  }
-
-  &-name {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    color: inherit !important;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  &-success {
-    .#{theme.$prefix}-#{$component}-inner {
-      color: theme.palette(text, 'brand');
-    }
-
-    .#{theme.$prefix}-#{$component}-icon-file {
-      color: theme.palette(icon, 'brand') !important;
-    }
-  }
-
-  &-failure {
-    .#{theme.$prefix}-#{$component}-inner {
-      color: theme.palette(text, 'danger');
-    }
-
-    .#{theme.$prefix}-#{$component}-icon-file {
-      color: theme.palette(icon, 'danger') !important;
-    }
-  }
-
-  &:hover {
-    .#{theme.$prefix}-#{$component}-inner {
-      border-color: theme.palette(border, 'default-tertiary');
-    }
-  }
-
-  &-failure:hover {
-    .#{theme.$prefix}-#{$component}-inner {
-      border-color: theme.palette(text, 'default');
-    }
-  }
-
-  &-icon {
-    &-status {
-      margin-left: auto;
-    }
-
-    &-remove {
-      flex-shrink: 0;
-      color: theme.palette(icon, 'default');
-      cursor: pointer;
-    }
-  }
-
-  &-message {
-    position: absolute;
-    bottom: -18px;
-    left: 0;
-    display: inline-flex;
-    gap: theme.spacing(scale, 100);
-    align-items: center;
-    color: theme.palette(text, 'danger');
-
-    > * {
-      color: inherit !important;
-    }
-  }
-}

package/lib/components/VirtualList/style/VirtualList.scss

@@ -1,5 +0,0 @@
-@use '@/styles/api' as theme;
-
-.#{theme.$prefix}-virtual-list {
-  --#{theme.$prefix}-virtual-list-scrollbar-bg: rgb(0 0 0 / 50%);
-}

package/lib/styles/_api.scss

@@ -1,5 +0,0 @@
-// Styles API — single public entrypoint for component and business SCSS.
-// Usage: @use '@/styles/api' as theme;
-$prefix: 'om-react-ui' !default;
-
-@forward './public';

package/lib/styles/_settings.scss

@@ -1,5 +0,0 @@
-// Global settings — shared configuration consumed by all style layers.
-// This file sits below the tokens layer and must have zero @use dependencies
-// on any other style module to avoid circular imports.
-
-$om-sys-prefix: 'om' !default;

package/lib/styles/index.scss

@@ -1,2 +0,0 @@
-// Styles bundle entrypoint — loads the generated utility layer and root theme variables.
-@use 'utilities';

package/lib/styles/public/_index.scss

@@ -1,2 +0,0 @@
-@forward './theme';
-@forward './system';

package/lib/styles/public/_system.scss

@@ -1 +0,0 @@
-@forward '../system/public' show sx;

package/lib/styles/public/_theme.scss

@@ -1,3 +0,0 @@
-@forward '../theme/values' show palette, spacing, shape, shadows, sizing, opacity;
-@forward '../theme/mixins' show typography, up, down, between, only, respond;
-@forward '../theme/scales' show $om-sys-prefix, $om-theme-scales;

package/lib/styles/recipes/_index.scss

@@ -1 +0,0 @@
-@forward './variants';