@1money/component-ui 0.0.1 → 0.0.2

package/lib/components/CoachMark/style/CoachMark.scss

@@ -1,176 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'coach-mark';
-$icon-size: 56px;
-$btn-width: 80px;
-$dismiss-size: 24px;
-$arrow-width: 36px;
-$arrow-height: 9px;
-$arrow-side-offset: calc(-1 * ($arrow-width + $arrow-height) / 2);
-$card-width: 450px;
-
-.#{theme.$prefix}-#{$component} {
-  --coach-mark-arrow-offset: 50%;
-
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  width: $card-width;
-  max-width: 100%;
-  padding: theme.spacing(scale, 1000) theme.spacing(scale, 1000) theme.spacing(scale, 800);
-  background-color: theme.palette(bg, 'default');
-  border: 1px solid theme.palette(border, 'neutral');
-  border-radius: theme.shape(600);
-  box-shadow: theme.shadows(200);
-
-  // ── Content ──
-  &-content {
-    display: flex;
-    flex-direction: column;
-    gap: theme.spacing(gap, 600);
-    align-items: flex-start;
-    width: 100%;
-  }
-
-  &-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: $icon-size;
-    height: $icon-size;
-    color: theme.palette(icon, 'on-brand');
-    background: radial-gradient(
-      circle at bottom left,
-      theme.palette(bg, 'brand') 0%,
-      theme.palette(bg, 'brand-secondary') 50%,
-      theme.palette(bg, 'default-secondary') 100%
-    );
-    border-radius: theme.shape(full);
-  }
-
-  &-text {
-    display: flex;
-    flex-direction: column;
-    gap: theme.spacing(gap, 200);
-    width: 100%;
-  }
-
-  // ── Footer ──
-  &-footer {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    margin-top: theme.spacing(scale, 600);
-    padding-top: theme.spacing(scale, 600);
-    border-top: 1px solid theme.palette(border, 'neutral-secondary');
-  }
-
-  // ── Buttons ──
-  &-btn {
-    display: flex;
-    gap: theme.spacing(gap, 200);
-    align-items: center;
-    justify-content: center;
-    width: $btn-width;
-    padding: theme.spacing(component-padding, 300);
-    white-space: nowrap;
-    text-align: center;
-    border: none;
-    border-radius: theme.shape(300);
-    cursor: pointer;
-
-    @include theme.typography(body, md, true);
-
-    &-back {
-      color: theme.palette(text, 'brand');
-      background-color: theme.palette(bg, 'brand-secondary');
-
-      &:hover {
-        background-color: theme.palette(bg, 'brand-secondary-hover');
-      }
-
-      &:disabled {
-        color: theme.palette(text, 'brand-secondary');
-        background-color: theme.palette(bg, 'brand-tertiary');
-        cursor: default;
-      }
-    }
-
-    &-next {
-      color: theme.palette(text, 'on-neutral');
-      background-color: theme.palette(bg, 'brand');
-    }
-
-  }
-
-  // ── Dismiss ──
-  &-dismiss {
-    position: absolute;
-    top: theme.spacing(scale, 400);
-    right: theme.spacing(scale, 400);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: $dismiss-size;
-    height: $dismiss-size;
-    padding: 0;
-    color: theme.palette(icon, 'default-tertiary');
-    background: none;
-    border: none;
-    border-radius: theme.shape(200);
-    cursor: pointer;
-
-    &:hover {
-      color: theme.palette(icon, 'default-secondary');
-    }
-  }
-
-  // ── Arrow (SVG) ──
-  &-arrow {
-    position: absolute;
-    width: $arrow-width;
-    height: $arrow-height;
-    overflow: visible;
-    pointer-events: none;
-  }
-
-  &-arrow-fill {
-    fill: theme.palette(bg, 'default');
-  }
-
-  &-arrow-stroke {
-    fill: none;
-    stroke: theme.palette(border, 'neutral');
-    stroke-width: 1;
-    stroke-linecap: round;
-  }
-
-  // Top placement: arrow at bottom, pointing down
-  &-top &-arrow {
-    bottom: -$arrow-height;
-    left: var(--coach-mark-arrow-offset);
-    transform: translateX(-50%) rotate(180deg);
-  }
-
-  // Bottom placement: arrow at top, pointing up
-  &-bottom &-arrow {
-    top: -$arrow-height;
-    left: var(--coach-mark-arrow-offset);
-    transform: translateX(-50%);
-  }
-
-  // Right placement: arrow at left, pointing left
-  &-right &-arrow {
-    top: var(--coach-mark-arrow-offset);
-    left: $arrow-side-offset;
-    transform: translateY(-50%) rotate(-90deg);
-  }
-
-  // Left placement: arrow at right, pointing right
-  &-left &-arrow {
-    top: var(--coach-mark-arrow-offset);
-    right: $arrow-side-offset;
-    transform: translateY(-50%) rotate(90deg);
-  }
-}

package/lib/components/Copy/style/Copy.scss

@@ -1,35 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'copy';
-
-.#{theme.$prefix}-#{$component} {
-  cursor: pointer;
-
-  &-copied {
-    cursor: default;
-  }
-
-  &-inner {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: theme.spacing(component-padding, 300);
-    background-color: theme.palette(bg, 'neutral-tertiary');
-    border-radius: theme.shape(300);
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-
-    &:hover {
-      background-color: theme.palette(bg, 'neutral-tertiary-hover');
-    }
-
-    &-copied {
-      background-color: theme.palette(bg, 'positive-tertiary');
-      cursor: default;
-
-      &:hover {
-        background-color: theme.palette(bg, 'positive-tertiary');
-      }
-    }
-  }
-}

package/lib/components/Divider/style/Divider.scss

@@ -1,149 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'divider';
-
-.#{theme.$prefix}-#{$component} {
-  border-block-start: 0;
-  border-block-end: 0;
-  border-inline-start: 0;
-  border-inline-end: 0;
-  border-color: theme.palette(border, default);
-
-  // ── Horizontal ──────────────────────────────────────────────
-  &-horizontal {
-    display: flex;
-    align-items: center;
-    clear: both;
-    width: 100%;
-    min-width: 100%;
-    margin: theme.spacing(scale, 300) 0;
-    border-block-start: 1px solid theme.palette(border, default);
-
-    &.#{theme.$prefix}-#{$component}-with-text {
-      margin: theme.spacing(scale, 200) 0;
-      border-block-start: 0;
-      white-space: nowrap;
-      text-align: center;
-
-      &::before,
-      &::after {
-        position: relative;
-        width: 50%;
-        border-block-start: 1px solid transparent;
-        border-block-start-color: inherit;
-        border-block-end: 0;
-        transform: translateY(50%);
-        content: '';
-      }
-    }
-
-    &.#{theme.$prefix}-#{$component}-with-text-left {
-      &::before {
-        width: 5%;
-      }
-
-      &::after {
-        width: 95%;
-      }
-    }
-
-    &.#{theme.$prefix}-#{$component}-with-text-right {
-      &::before {
-        width: 95%;
-      }
-
-      &::after {
-        width: 5%;
-      }
-    }
-
-    &.#{theme.$prefix}-#{$component}-no-default-margin {
-      &.#{theme.$prefix}-#{$component}-with-text-left {
-        &::before {
-          width: 0;
-        }
-
-        &::after {
-          width: 100%;
-        }
-      }
-
-      &.#{theme.$prefix}-#{$component}-with-text-right {
-        &::before {
-          width: 100%;
-        }
-
-        &::after {
-          width: 0;
-        }
-      }
-    }
-  }
-
-  // ── Vertical ────────────────────────────────────────────────
-  &-vertical {
-    position: relative;
-    display: inline-block;
-    height: 0.9em;
-    margin: 0 theme.spacing(scale, 100);
-    vertical-align: middle;
-    border-inline-start: 1px solid theme.palette(border, default);
-  }
-
-  // ── Inner text ──────────────────────────────────────────────
-  &-inner-text {
-    display: inline-block;
-    padding: 0 theme.spacing(scale, 200);
-    color: theme.palette(text, default);
-
-    @include theme.typography(body, md);
-  }
-
-  // ── Plain style ─────────────────────────────────────────────
-  &-plain &-inner-text {
-    font-weight: 400;
-  }
-
-  // ── Dashed variant ──────────────────────────────────────────
-  &-dashed {
-    background: none;
-    border-style: dashed;
-    border-width: 1px 0 0;
-
-    &.#{theme.$prefix}-#{$component}-with-text {
-      border-style: unset;
-
-      &::before,
-      &::after {
-        border-style: dashed none none;
-      }
-    }
-
-    &.#{theme.$prefix}-#{$component}-vertical {
-      border-inline-start-style: dashed;
-      border-width: 0 0 0 1px;
-    }
-  }
-
-  // ── Dotted variant ──────────────────────────────────────────
-  &-dotted {
-    background: none;
-    border-style: dotted;
-    border-width: 1px 0 0;
-
-    &.#{theme.$prefix}-#{$component}-with-text {
-      border-style: unset;
-
-      &::before,
-      &::after {
-        border-style: dotted none none;
-      }
-    }
-
-    &.#{theme.$prefix}-#{$component}-vertical {
-      border-inline-start-style: dotted;
-      border-width: 0 0 0 1px;
-    }
-  }
-
-}

package/lib/components/Drawer/style/Drawer.scss

@@ -1,163 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'drawer';
-$transition-duration: 300ms;
-
-// ---- Root ----
-.#{theme.$prefix}-#{$component}-root {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-}
-
-// ---- Overlay / mask ----
-.#{theme.$prefix}-#{$component}-overlay {
-  position: absolute;
-  inset: 0;
-  background-color: theme.palette(bg, 'scrim-dark');
-  opacity: 0;
-  transition: opacity $transition-duration ease-in-out;
-}
-
-// ---- Panel (the drawer itself) ----
-.#{theme.$prefix}-#{$component} {
-  position: fixed;
-  z-index: 1;
-  display: flex;
-  flex-direction: column;
-  background-color: theme.palette(bg, 'default');
-  outline: none;
-  box-shadow: theme.shadows('200');
-  transition: transform $transition-duration ease-in-out;
-  pointer-events: auto;
-
-  // Placement anchors + closed-state transform.
-  // 100% refers to the element's own width/height, so the panel
-  // slides exactly off-screen regardless of the size prop.
-  &-top {
-    top: 0;
-    right: 0;
-    left: 0;
-    width: 100%;
-    transform: translate3d(0, -100%, 0);
-  }
-
-  &-bottom {
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    transform: translate3d(0, 100%, 0);
-  }
-
-  &-left {
-    top: 0;
-    bottom: 0;
-    left: 0;
-    transform: translate3d(-100%, 0, 0);
-  }
-
-  &-right {
-    top: 0;
-    right: 0;
-    bottom: 0;
-    transform: translate3d(100%, 0, 0);
-  }
-
-  // ---- Header ----
-  &-header {
-    display: flex;
-    flex-shrink: 0;
-    gap: theme.spacing(gap, 300);
-    align-items: flex-start;
-    justify-content: space-between;
-    padding: theme.spacing(scale, 600) theme.spacing(scale, 400) theme.spacing(scale, 400);
-  }
-
-  &-header-main {
-    display: flex;
-    flex: 1;
-    gap: theme.spacing(gap, 200);
-    align-items: center;
-    min-width: 0;
-  }
-
-  // ---- Title ----
-  &-title {
-    flex: 1;
-    min-width: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  // ---- Close / control button ----
-  &-control {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    width: theme.spacing(scale, 500);
-    height: theme.spacing(scale, 500);
-    padding: 0;
-    color: theme.palette(icon, 'default-tertiary');
-    background: transparent;
-    border: none;
-    cursor: pointer;
-
-    .#{theme.$prefix}-icons-wrapper {
-      --icon-color: currentcolor;
-    }
-
-    &:hover {
-      color: theme.palette(icon, 'default');
-    }
-  }
-
-  // ---- Body ----
-  &-body {
-    flex: 1;
-    min-height: 0;
-    padding: theme.spacing(scale, 400);
-    overflow: auto;
-  }
-
-  // ---- Footer ----
-  &-footer {
-    flex-shrink: 0;
-    padding:
-      theme.spacing(scale, 400)
-      theme.spacing(scale, 400)
-      theme.spacing(scale, 600);
-    border-top: 1px solid theme.palette(border, 'neutral');
-  }
-}
-
-// ---- Open / Closed state driven by root modifier class ----
-.#{theme.$prefix}-#{$component}-root-open {
-  .#{theme.$prefix}-#{$component}-overlay {
-    opacity: 1;
-  }
-
-  .#{theme.$prefix}-#{$component} {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-.#{theme.$prefix}-#{$component}-root-closed {
-  pointer-events: none;
-
-  .#{theme.$prefix}-#{$component}-overlay {
-    opacity: 0;
-  }
-}
-
-// ---- Responsive: full-width on small screens ----
-@include theme.down(sm) {
-  .#{theme.$prefix}-#{$component} {
-    &-right,
-    &-left {
-      width: 100% !important;
-    }
-  }
-}

package/lib/components/Dropdown/style/Dropdown.scss

@@ -1,2 +0,0 @@
-// Dropdown uses Trigger's base styles.
-// This file is kept for backward compatibility with existing style imports.

package/lib/components/Empty/style/Empty.scss

@@ -1,53 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'empty';
-
-.#{theme.$prefix}-#{$component} {
-  display: flex;
-  flex-direction: column;
-  gap: theme.spacing(gap, 200);
-  align-items: center;
-  justify-content: center;
-  padding: theme.spacing(scale, 800) theme.spacing(scale, 600);
-  overflow: hidden;
-  text-align: center;
-  border-radius: theme.shape(300);
-
-  // ── Variant: stroke (default) ──
-  &-stroke {
-    background-color: theme.palette(bg, 'default-secondary');
-    border: 1px solid theme.palette(border, 'neutral');
-  }
-
-  // ── Variant: fill ──
-  &-fill {
-    background-color: transparent;
-    border: none;
-  }
-
-  // ── Icon ──
-  &-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: theme.palette(icon, 'neutral-secondary');
-  }
-
-  // ── Content (title + description) ──
-  &-content {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    color: theme.palette(text, 'neutral-secondary');
-  }
-
-  // ── Title & Description ──
-  // Typography styles handled by TypographyTitle and TypographyBody components
-
-  // ── Action ──
-  &-action {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}

package/lib/components/Flex/style/Flex.scss

@@ -1,70 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'flex';
-$flex-gap-fallback: 0px;
-$flex-var-gap: '--om-flex-gap';
-
-.#{theme.$prefix}-#{$component} {
-  display: flex;
-  gap: var(#{$flex-var-gap}, #{$flex-gap-fallback});
-
-  &-vertical {
-    flex-direction: column;
-  }
-
-  &-wrap-wrap {
-    flex-wrap: wrap;
-  }
-
-  &-wrap-nowrap {
-    flex-wrap: nowrap;
-  }
-
-  &-wrap-wrap-reverse {
-    flex-wrap: wrap-reverse;
-  }
-
-  &-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;
-  }
-
-  &-align-start {
-    align-items: flex-start;
-  }
-
-  &-align-end {
-    align-items: flex-end;
-  }
-
-  &-align-center {
-    align-items: center;
-  }
-
-  &-align-baseline {
-    align-items: baseline;
-  }
-
-  &-align-stretch {
-    align-items: stretch;
-  }
-}

package/lib/components/Form/style/Form.scss

@@ -1,57 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'form';
-
-// ─── Form Root ───────────────────────────────────────────────
-.#{theme.$prefix}-#{$component} {
-  width: 100%;
-
-}
-
-// ─── FormItem Root ───────────────────────────────────────────
-.#{theme.$prefix}-#{$component}-item {
-  margin-bottom: theme.spacing(gap, 300);
-
-  &-small {
-    margin-bottom: theme.spacing(gap, 200);
-  }
-}
-
-// ─── Label ───────────────────────────────────────────────────
-.#{theme.$prefix}-#{$component}-item-label-wrapper {
-  &-vertical {
-    margin-bottom: theme.spacing(gap, 200);
-  }
-}
-
-.#{theme.$prefix}-#{$component}-item-label {
-  display: inline;
-  padding: 0;
-
-  &-required {
-    &::before {
-      margin-right: theme.spacing(gap, '050');
-      color: theme.palette(text, 'danger');
-      content: '*';
-    }
-  }
-
-}
-
-// ─── Label Alignment ─────────────────────────────────────────
-.#{theme.$prefix}-#{$component}-item-label-wrapper-left {
-  text-align: left;
-}
-
-.#{theme.$prefix}-#{$component}-item-label-wrapper-right {
-  text-align: right;
-}
-
-// ─── Error & Help Messages ───────────────────────────────────
-.#{theme.$prefix}-#{$component}-item-error {
-  margin-top: theme.spacing(gap, '050');
-}
-
-.#{theme.$prefix}-#{$component}-item-help {
-  margin-top: theme.spacing(gap, '050');
-}