@1money/component-ui 0.0.1 → 0.0.3

package/lib/components/Pagination/style/Pagination.scss

@@ -1,95 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'pagination';
-$pagination-control-size: calc(#{theme.spacing(scale, 400)} + #{theme.spacing(scale, 500)});
-
-.#{theme.$prefix}-#{$component} {
-  display: inline-flex;
-  align-items: center;
-
-  &-list {
-    display: inline-flex;
-    gap: theme.spacing(gap, 200);
-    align-items: center;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
-
-  &-item {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-  }
-
-  &-button,
-  &-ellipsis {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-height: $pagination-control-size;
-    padding: theme.spacing(component-padding, 200) theme.spacing(component-padding, 300);
-    color: theme.palette(text, 'default');
-    white-space: nowrap;
-    background-color: transparent;
-    border: none;
-    border-radius: theme.shape(200);
-    font-variant-numeric: tabular-nums;
-  }
-
-  &-button {
-    gap: theme.spacing(gap, 200);
-    cursor: pointer;
-
-    &:hover:not(:disabled) {
-      background-color: theme.palette(bg, 'default-hover');
-    }
-
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 2px theme.palette(border, 'brand');
-    }
-  }
-
-  &-button-page {
-    min-width: max(
-      #{$pagination-control-size},
-      calc(2ch + #{theme.spacing(component-padding, 300)} + #{theme.spacing(component-padding, 300)})
-    );
-  }
-
-  &-button-current {
-    color: theme.palette(text, 'on-neutral');
-    background-color: theme.palette(bg, 'brand');
-
-    &:hover:not(:disabled) {
-      background-color: theme.palette(bg, 'brand-hover');
-    }
-  }
-
-  &-button-disabled {
-    color: theme.palette(text, 'disabled');
-    cursor: not-allowed;
-
-    &:hover {
-      background-color: transparent;
-    }
-  }
-
-  &-icon {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &-ellipsis {
-    padding-right: theme.spacing(component-padding, 400);
-    padding-left: theme.spacing(component-padding, 400);
-    cursor: default;
-  }
-
-  &-disabled {
-    cursor: not-allowed;
-  }
-}

package/lib/components/Popconfirm/style/Popconfirm.scss

@@ -1,264 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'popconfirm';
-$cls: #{theme.$prefix}-#{$component};
-$arrow-width: 36px;
-$arrow-height: 10px;
-$arrow-inner-width: 34px;
-$arrow-inner-height: 9px;
-$arrow-overlap: 2px;
-$arrow-inset: theme.spacing(scale, 500);
-$arrow-shape: polygon(0 0, 100% 0, 100% 22%, 62% 22%, 50% 100%, 38% 22%, 0 22%);
-
-.#{$cls}-overlay {
-  padding: 0;
-  background: transparent;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  filter: drop-shadow(#{theme.shadows(200)});
-}
-
-.#{$cls} {
-  position: relative;
-  z-index: 0;
-  display: flex;
-  flex-direction: column;
-  gap: theme.spacing(gap, 100);
-  width: 300px;
-  max-width: min(400px, calc(100vw - #{theme.spacing(component-padding, 400)} * 2));
-  padding: theme.spacing(component-padding, 400);
-  background-color: theme.palette(bg, 'default');
-  border: 1px solid theme.palette(border, 'neutral');
-  border-radius: theme.shape(200);
-  isolation: isolate;
-
-  &::before {
-    position: absolute;
-    z-index: -1;
-    width: $arrow-width;
-    height: $arrow-height;
-    background-color: theme.palette(bg, 'default');
-    opacity: 0;
-    content: '';
-    clip-path: $arrow-shape;
-    pointer-events: none;
-  }
-
-  &::after {
-    position: absolute;
-    z-index: -1;
-    width: $arrow-inner-width;
-    height: $arrow-inner-height;
-    background-color: theme.palette(bg, 'default');
-    opacity: 0;
-    content: '';
-    clip-path: $arrow-shape;
-    pointer-events: none;
-  }
-
-  &-no-arrow {
-    &::before {
-      display: none;
-    }
-  }
-
-  &-header {
-    display: flex;
-    gap: theme.spacing(gap, 200);
-    align-items: flex-start;
-    width: 100%;
-  }
-
-  &-icon {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    line-height: 0;
-  }
-
-  &-content {
-    display: flex;
-    flex: 1 0 0;
-    flex-direction: column;
-    gap: theme.spacing(gap, 100);
-    align-items: flex-start;
-    min-width: 0;
-  }
-
-  &-title {
-    @include theme.typography(title, md, $strong: true);
-
-    width: 100%;
-    color: theme.palette(text, 'default');
-  }
-
-  &-body {
-    @include theme.typography(body, md);
-
-    width: 100%;
-    color: theme.palette(text, 'default-tertiary');
-  }
-
-  &-actions {
-    display: flex;
-    gap: theme.spacing(gap, 300);
-    align-items: center;
-    justify-content: flex-end;
-    width: 100%;
-    padding-top: theme.spacing(component-padding, 300);
-  }
-}
-
-.#{$cls}-overlay[data-side='top'] .#{$cls}:not(.#{$cls}-no-arrow)::before {
-  bottom: calc(-#{$arrow-height} + #{$arrow-overlap});
-  left: 50%;
-  background-color: theme.palette(border, 'neutral');
-  transform: translateX(-50%);
-  opacity: 1;
-}
-
-.#{$cls}-overlay[data-side='top'] .#{$cls}:not(.#{$cls}-no-arrow)::after {
-  bottom: calc(-#{$arrow-inner-height} + #{$arrow-overlap});
-  left: 50%;
-  transform: translateX(-50%);
-  opacity: 1;
-}
-
-.#{$cls}-overlay[data-side='top'][data-align='start'] .#{$cls}:not(.#{$cls}-no-arrow)::before {
-  left: $arrow-inset;
-  transform: none;
-}
-
-.#{$cls}-overlay[data-side='top'][data-align='start'] .#{$cls}:not(.#{$cls}-no-arrow)::after {
-  left: calc(#{$arrow-inset} + 1px);
-  transform: none;
-}
-
-.#{$cls}-overlay[data-side='top'][data-align='end'] .#{$cls}:not(.#{$cls}-no-arrow)::before {
-  right: $arrow-inset;
-  left: auto;
-  transform: none;
-}
-
-.#{$cls}-overlay[data-side='top'][data-align='end'] .#{$cls}:not(.#{$cls}-no-arrow)::after {
-  right: calc(#{$arrow-inset} + 1px);
-  left: auto;
-  transform: none;
-}
-
-.#{$cls}-overlay[data-side='bottom'] .#{$cls}:not(.#{$cls}-no-arrow)::before {
-  top: calc(-#{$arrow-height} + #{$arrow-overlap});
-  left: 50%;
-  background-color: theme.palette(border, 'neutral');
-  transform: translateX(-50%) rotate(180deg);
-  opacity: 1;
-}
-
-.#{$cls}-overlay[data-side='bottom'] .#{$cls}:not(.#{$cls}-no-arrow)::after {
-  top: calc(-#{$arrow-inner-height} + #{$arrow-overlap});
-  left: 50%;
-  transform: translateX(-50%) rotate(180deg);
-  opacity: 1;
-}
-
-.#{$cls}-overlay[data-side='bottom'][data-align='start'] .#{$cls}:not(.#{$cls}-no-arrow)::before {
-  left: $arrow-inset;
-  transform: rotate(180deg);
-}
-
-.#{$cls}-overlay[data-side='bottom'][data-align='start'] .#{$cls}:not(.#{$cls}-no-arrow)::after {
-  left: calc(#{$arrow-inset} + 1px);
-  transform: rotate(180deg);
-}
-
-.#{$cls}-overlay[data-side='bottom'][data-align='end'] .#{$cls}:not(.#{$cls}-no-arrow)::before {
-  right: $arrow-inset;
-  left: auto;
-  transform: rotate(180deg);
-}
-
-.#{$cls}-overlay[data-side='bottom'][data-align='end'] .#{$cls}:not(.#{$cls}-no-arrow)::after {
-  right: calc(#{$arrow-inset} + 1px);
-  left: auto;
-  transform: rotate(180deg);
-}
-
-.#{$cls}-overlay[data-side='left'] .#{$cls}:not(.#{$cls}-no-arrow)::before {
-  top: 50%;
-  right: calc(-#{$arrow-height} + #{$arrow-overlap});
-  background-color: theme.palette(border, 'neutral');
-  transform: translateY(-50%) rotate(-90deg);
-  opacity: 1;
-}
-
-.#{$cls}-overlay[data-side='left'] .#{$cls}:not(.#{$cls}-no-arrow)::after {
-  top: 50%;
-  right: calc(-#{$arrow-inner-height} + #{$arrow-overlap});
-  transform: translateY(-50%) rotate(-90deg);
-  opacity: 1;
-}
-
-.#{$cls}-overlay[data-side='left'][data-align='start'] .#{$cls}:not(.#{$cls}-no-arrow)::before {
-  top: $arrow-inset;
-  transform: rotate(-90deg);
-}
-
-.#{$cls}-overlay[data-side='left'][data-align='start'] .#{$cls}:not(.#{$cls}-no-arrow)::after {
-  top: calc(#{$arrow-inset} + 1px);
-  transform: rotate(-90deg);
-}
-
-.#{$cls}-overlay[data-side='right'] .#{$cls}:not(.#{$cls}-no-arrow)::before {
-  top: 50%;
-  left: calc(-#{$arrow-height} + #{$arrow-overlap});
-  background-color: theme.palette(border, 'neutral');
-  transform: translateY(-50%) rotate(90deg);
-  opacity: 1;
-}
-
-.#{$cls}-overlay[data-side='right'] .#{$cls}:not(.#{$cls}-no-arrow)::after {
-  top: 50%;
-  left: calc(-#{$arrow-inner-height} + #{$arrow-overlap});
-  transform: translateY(-50%) rotate(90deg);
-  opacity: 1;
-}
-
-.#{$cls}-overlay[data-side='left'][data-align='end'] .#{$cls}:not(.#{$cls}-no-arrow)::before,
-.#{$cls}-overlay[data-side='right'][data-align='end'] .#{$cls}:not(.#{$cls}-no-arrow)::before {
-  top: auto;
-  bottom: $arrow-inset;
-}
-
-.#{$cls}-overlay[data-side='left'][data-align='end'] .#{$cls}:not(.#{$cls}-no-arrow)::after,
-.#{$cls}-overlay[data-side='right'][data-align='end'] .#{$cls}:not(.#{$cls}-no-arrow)::after {
-  top: auto;
-  bottom: calc(#{$arrow-inset} + 1px);
-}
-
-.#{$cls}-overlay[data-side='left'][data-align='end'] .#{$cls}:not(.#{$cls}-no-arrow)::before,
-.#{$cls}-overlay[data-side='left'][data-align='end'] .#{$cls}:not(.#{$cls}-no-arrow)::after {
-  transform: rotate(-90deg);
-}
-
-.#{$cls}-overlay[data-side='right'][data-align='start'] .#{$cls}:not(.#{$cls}-no-arrow)::before {
-  top: $arrow-inset;
-  transform: rotate(90deg);
-}
-
-.#{$cls}-overlay[data-side='right'][data-align='start'] .#{$cls}:not(.#{$cls}-no-arrow)::after {
-  top: calc(#{$arrow-inset} + 1px);
-  transform: rotate(90deg);
-}
-
-.#{$cls}-overlay[data-side='right'][data-align='end'] .#{$cls}:not(.#{$cls}-no-arrow)::before,
-.#{$cls}-overlay[data-side='right'][data-align='end'] .#{$cls}:not(.#{$cls}-no-arrow)::after {
-  transform: rotate(90deg);
-}
-
-@include theme.down(sm) {
-  .#{$cls} {
-    width: min(300px, calc(100vw - #{theme.spacing(component-padding, 400)} * 2));
-  }
-}

package/lib/components/ProForm/style/ProForm.scss

@@ -1,118 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'proform';
-
-// ─── ProForm Root ────────────────────────────────────────────
-.#{theme.$prefix}-#{$component} {
-  width: 100%;
-}
-
-// ─── Submitter ───────────────────────────────────────────────
-.#{theme.$prefix}-#{$component}-submitter {
-  display: flex;
-  gap: theme.spacing(gap, 200);
-  align-items: center;
-  padding-top: theme.spacing(gap, 300);
-}
-
-// ─── ProFormList ─────────────────────────────────────────────
-.#{theme.$prefix}-#{$component}-list {
-  display: flex;
-  flex-direction: column;
-  gap: theme.spacing(gap, 200);
-  width: 100%;
-}
-
-.#{theme.$prefix}-#{$component}-list-label {
-  display: block;
-}
-
-.#{theme.$prefix}-#{$component}-list-content {
-  display: flex;
-  flex-direction: column;
-  gap: theme.spacing(gap, 200);
-}
-
-.#{theme.$prefix}-#{$component}-list-actions {
-  display: flex;
-  flex-direction: column;
-  gap: theme.spacing(gap, 100);
-}
-
-.#{theme.$prefix}-#{$component}-list-row-actions {
-  display: flex;
-  gap: theme.spacing(gap, 100);
-  align-items: center;
-}
-
-// ─── ModalForm ───────────────────────────────────────────────
-.#{theme.$prefix}-#{$component}-modal-form {
-  width: 100%;
-}
-
-// ─── DrawerForm ──────────────────────────────────────────────
-.#{theme.$prefix}-#{$component}-drawer-form {
-  width: 100%;
-}
-
-// ─── ProFormGroup ────────────────────────────────────────────
-.#{theme.$prefix}-#{$component}-group {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-}
-
-.#{theme.$prefix}-#{$component}-group-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-bottom: theme.spacing(gap, 200);
-  cursor: pointer;
-  user-select: none;
-}
-
-.#{theme.$prefix}-#{$component}-group-title {
-  display: flex;
-  gap: theme.spacing(gap, 100);
-  align-items: center;
-}
-
-.#{theme.$prefix}-#{$component}-group-arrow {
-  display: inline-block;
-  transition: transform 0.2s;
-}
-
-.#{theme.$prefix}-#{$component}-group-body {
-  display: flex;
-  flex-direction: column;
-  gap: theme.spacing(gap, 200);
-}
-
-// ─── ProFormFieldSet ─────────────────────────────────────────
-.#{theme.$prefix}-#{$component}-fieldset {
-  display: flex;
-  align-items: flex-start;
-}
-
-// ─── QueryFilter ─────────────────────────────────────────────
-.#{theme.$prefix}-#{$component}-query-filter {
-  display: flex;
-  flex-wrap: wrap;
-  gap: theme.spacing(gap, 200);
-  align-items: flex-end;
-  width: 100%;
-}
-
-.#{theme.$prefix}-#{$component}-query-filter-actions {
-  display: flex;
-  gap: theme.spacing(gap, 200);
-  align-items: center;
-  height: theme.sizing(component-height, '3xl');
-  margin-left: auto;
-}
-
-.#{theme.$prefix}-#{$component}-query-filter-split {
-  width: 1px;
-  height: 24px;
-  background-color: theme.palette(border, 'default-secondary');
-}

package/lib/components/Progress/style/Progress.scss

@@ -1,120 +0,0 @@
-@use '@/styles/api' as theme;
-@use '@/styles/recipes/variants' as variants;
-
-$component: 'progress';
-$progress-variant-schema: variants.om-variant-schema(
-  $component,
-  rail-bg
-);
-$progress-variants: (
-  'gray': (
-    rail-bg: theme.palette(bg, 'default-tertiary'),
-  ),
-  'white': (
-    rail-bg: theme.palette(bg, 'default'),
-  ),
-);
-
-.#{theme.$prefix}-#{$component} {
-  @include variants.om-variant-default($progress-variants, 'gray', $progress-variant-schema);
-
-  --om-progress-track-color: #{theme.palette(bg, 'brand')};
-  --om-progress-info-color: #{theme.palette(text, 'default')};
-  --om-progress-feedback-color: #{theme.palette(text, 'danger')};
-  --om-progress-feedback-icon-color: #{theme.palette(icon, 'danger')};
-
-  display: flex;
-  flex-direction: column;
-  gap: theme.spacing(gap, 300);
-  width: theme.sizing(scale, 100);
-
-  &-info {
-    width: theme.sizing(scale, 100);
-    color: var(--om-progress-info-color);
-  }
-
-  &-bar,
-  &-rail {
-    width: theme.sizing(scale, 100);
-  }
-
-  &-rail {
-    height: theme.spacing(scale, 100);
-    overflow: hidden;
-    background-color: var(--om-progress-rail-bg);
-    border-radius: theme.shape('full');
-  }
-
-  &-track {
-    height: theme.sizing(scale, 100);
-    background-color: var(--om-progress-track-color);
-    border-radius: inherit;
-    transition: width 160ms ease;
-  }
-
-  &-feedback {
-    display: flex;
-    gap: theme.spacing(gap, 100);
-    align-items: center;
-    width: theme.sizing(scale, 100);
-    color: var(--om-progress-feedback-color);
-  }
-
-  &-feedback-icon {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    color: var(--om-progress-feedback-icon-color);
-
-    .#{theme.$prefix}-icons-wrapper {
-      --icon-color: currentcolor;
-    }
-  }
-
-  &-feedback-text {
-    color: inherit;
-  }
-
-  &-placement-left {
-    .#{theme.$prefix}-#{$component}-info {
-      text-align: left;
-    }
-
-    .#{theme.$prefix}-#{$component}-feedback {
-      justify-content: flex-start;
-    }
-  }
-
-  &-placement-right {
-    .#{theme.$prefix}-#{$component}-info {
-      text-align: right;
-    }
-
-    .#{theme.$prefix}-#{$component}-feedback {
-      justify-content: flex-end;
-    }
-  }
-
-  &-state-default {
-    --om-progress-track-color: #{theme.palette(bg, 'brand')};
-    --om-progress-info-color: #{theme.palette(text, 'default')};
-  }
-
-  &-state-success {
-    --om-progress-track-color: #{theme.palette(bg, 'positive')};
-    --om-progress-info-color: #{theme.palette(text, 'default')};
-  }
-
-  &-state-error {
-    --om-progress-track-color: #{theme.palette(bg, 'danger')};
-    --om-progress-info-color: #{theme.palette(text, 'danger')};
-  }
-
-  &-state-not-started {
-    --om-progress-track-color: #{theme.palette(bg, 'brand')};
-    --om-progress-info-color: #{theme.palette(text, 'default')};
-  }
-
-  @include variants.om-variant-classes($progress-variants, $progress-variant-schema, $default: 'gray');
-}