@1money/component-ui 0.0.1 → 0.0.3

package/es/components/Calendar/style/Calendar.scss

@@ -1,377 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'calendar';
-$cell-size: theme.sizing(component-height, 'md');
-
-.#{theme.$prefix}-#{$component} {
-  &-small {
-    input {
-      height: theme.sizing(component-height, 'lg') !important;
-      line-height: 18px !important;
-    }
-  }
-
-  &.p-invalid input {
-    color: theme.palette(text, 'danger');
-    border-color: theme.palette(border, 'danger');
-    box-shadow: none;
-
-    &:hover {
-      border-color: theme.palette(border, 'danger');
-    }
-  }
-
-  &.#{theme.$prefix}-#{$component}-success input {
-    color: theme.palette(text, 'positive');
-    border-color: theme.palette(border, 'positive');
-    box-shadow: none;
-
-    &:hover {
-      border-color: theme.palette(border, 'positive');
-    }
-  }
-
-  &.p-calendar-disabled {
-    cursor: not-allowed;
-
-    input {
-      background-color: theme.palette(bg, 'disabled');
-      border-color: theme.palette(border, 'disabled');
-      opacity: 1;
-    }
-  }
-
-  &-filled.p-calendar-disabled input {
-    background-color: theme.palette(bg, 'default-secondary');
-    border-color: theme.palette(border, 'disabled');
-  }
-
-  input {
-    height: theme.sizing(component-height, '3xl');
-    padding: theme.spacing(scale, 200) theme.spacing(scale, 400);
-    color: theme.palette(text, 'default');
-
-    @include theme.typography(body, lg);
-
-    background-color: theme.palette(bg, 'default-secondary');
-    border-color: theme.palette(border, 'default');
-    border-style: solid;
-    border-width: 1px;
-    border-radius: theme.shape(300);
-
-    &:hover {
-      border-color: theme.palette(border, 'brand');
-    }
-
-    &::placeholder {
-      color: theme.palette(text, 'default-tertiary');
-      font-weight: 400;
-
-      @include theme.typography(body, md);
-    }
-  }
-
-  &.p-calendar:not(.p-calendar-disabled, .p-invalid, .#{theme.$prefix}-#{$component}-success).p-focus
-    > .p-inputtext {
-    padding: 7px 15px;
-    border-color: theme.palette(border, 'brand');
-    border-width: 2px;
-    box-shadow: none;
-  }
-}
-
-.#{theme.$prefix}-#{$component}-panel {
-  padding: theme.spacing(scale, 600);
-  background-color: theme.palette(bg, 'default');
-  border: 1px solid theme.palette(border, 'neutral-tertiary');
-  border-radius: theme.shape(300);
-  box-shadow: theme.shadows(100);
-
-  .p-datepicker-buttonbar {
-    padding: theme.spacing(scale, 200) 0;
-    border: none;
-
-    .p-button {
-      padding: 0 theme.spacing(scale, 400);
-      color: theme.palette(text, 'default');
-
-      @include theme.typography(body, lg);
-
-      &:hover {
-        color: theme.palette(text, 'brand');
-        background-color: inherit;
-      }
-
-      span {
-        font-weight: 500;
-      }
-    }
-  }
-
-  .p-datepicker-group-container {
-    gap: theme.spacing(scale, 600);
-
-    .p-datepicker-group {
-      display: flex;
-      flex-direction: column;
-      gap: theme.spacing(gap, 300);
-      padding: 0 !important;
-      border: 0 !important;
-
-      .p-datepicker-header {
-        padding: 0;
-        border: none;
-
-        .p-datepicker-title {
-          display: inline-flex;
-          gap: theme.spacing(scale, 100);
-          align-items: center;
-
-          > * {
-            @include theme.typography(title, lg);
-
-            &:hover {
-              color: theme.palette(text, 'brand');
-            }
-          }
-        }
-
-        .p-datepicker-prev,
-        .p-datepicker-next {
-          &:hover {
-            background-color: inherit;
-
-            > i {
-              color: theme.palette(icon, 'brand') !important;
-            }
-          }
-        }
-      }
-
-      .p-datepicker-calendar-container {
-        table {
-          width: var(--content-width, 332px);
-          margin: 0;
-          table-layout: fixed;
-          border-collapse: separate;
-          border-spacing: 0 theme.spacing(scale, 100);
-        }
-
-        .p-datepicker-calendar {
-          thead tr th span {
-            color: theme.palette(text, 'default');
-
-            @include theme.typography(body, lg, $strong: true);
-          }
-
-          tbody tr td {
-            width: $cell-size !important;
-            height: $cell-size;
-            padding: 0 !important;
-
-            &:first-child {
-              border-radius: theme.shape('full') 0 0 theme.shape('full');
-            }
-
-            &:last-child {
-              border-radius: 0 theme.shape('full') theme.shape('full') 0;
-            }
-          }
-
-          tbody tr td span {
-            width: $cell-size !important;
-            max-width: $cell-size !important;
-            height: $cell-size !important;
-            max-height: $cell-size !important;
-            padding: 0 !important;
-            color: theme.palette(text, 'default');
-            border: none;
-            border-radius: theme.shape('full');
-            box-shadow: none;
-
-            @include theme.typography(label, lg);
-
-            &.p-highlight {
-              color: theme.palette(text, 'on-neutral');
-              background-color: theme.palette(bg, 'brand');
-              border-radius: theme.shape('full');
-
-              &:hover {
-                color: theme.palette(text, 'on-neutral');
-                background-color: theme.palette(bg, 'brand');
-              }
-            }
-
-            &.p-disabled {
-              color: theme.palette(text, 'disabled') !important;
-            }
-
-            &:hover {
-              color: theme.palette(text, 'brand');
-              background-color: theme.palette(bg, 'default');
-            }
-          }
-
-          .p-datepicker-today {
-            span {
-              color: theme.palette(text, 'brand');
-              background-color: theme.palette(bg, 'default');
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .p-yearpicker {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: theme.spacing(scale, 400);
-    place-items: center center;
-    text-align: center;
-
-    .p-yearpicker-year {
-      width: auto;
-
-      @include theme.typography(title, lg);
-
-      border: none;
-      box-shadow: none;
-
-      &.p-highlight {
-        color: theme.palette(text, 'on-neutral');
-        background-color: theme.palette(bg, 'brand');
-
-        &:hover {
-          color: theme.palette(text, 'on-neutral');
-          background-color: theme.palette(bg, 'brand');
-        }
-      }
-
-      &:hover {
-        color: theme.palette(text, 'brand');
-        background-color: theme.palette(bg, 'default');
-      }
-    }
-  }
-
-  .p-monthpicker {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: theme.spacing(scale, 400);
-    place-items: center center;
-    text-align: center;
-
-    .p-monthpicker-month {
-      width: auto;
-      padding: theme.spacing(scale, 100) theme.spacing(scale, 400);
-
-      @include theme.typography(title, lg);
-
-      border: none;
-      box-shadow: none;
-
-      &.p-highlight {
-        color: theme.palette(text, 'on-neutral');
-        background-color: theme.palette(bg, 'brand');
-
-        &:hover {
-          color: theme.palette(text, 'on-neutral');
-          background-color: theme.palette(bg, 'brand');
-        }
-      }
-
-      &:hover {
-        color: theme.palette(text, 'brand');
-        background-color: theme.palette(bg, 'default');
-      }
-    }
-  }
-}
-
-.#{theme.$prefix}-#{$component}-wrapper {
-  display: inline-flex;
-  flex-direction: column;
-}
-
-.#{theme.$prefix}-#{$component}-label {
-  margin-bottom: theme.spacing(scale, 200);
-
-  @include theme.typography(label, lg);
-
-  &-required {
-    &::after {
-      margin-left: theme.spacing(scale, 100);
-      color: theme.palette(text, 'danger');
-
-      @include theme.typography(body, lg);
-
-      content: '*';
-    }
-  }
-}
-
-.#{theme.$prefix}-#{$component}-message {
-  display: flex;
-  gap: theme.spacing(scale, 100);
-  align-items: center;
-  justify-content: flex-start;
-  margin-top: theme.spacing(scale, 100);
-  color: theme.palette(text, 'neutral-secondary');
-
-  @include theme.typography(body, sm);
-
-  word-wrap: break-word;
-  word-break: keep-all;
-
-  &-success {
-    color: theme.palette(text, 'positive');
-  }
-
-  &-error {
-    color: theme.palette(text, 'danger');
-  }
-}
-
-// Range selection styles
-.#{theme.$prefix}-#{$component}-p-start {
-  background-color: theme.palette(bg, 'brand-tertiary') !important;
-  border-radius: theme.shape('full') 0 0 theme.shape('full') !important;
-
-  &:last-child {
-    border-radius: theme.shape('full') !important;
-  }
-
-  span {
-    color: theme.palette(text, 'on-neutral') !important;
-    background-color: theme.palette(bg, 'brand') !important;
-    border-radius: theme.shape('full') !important;
-  }
-}
-
-.#{theme.$prefix}-#{$component}-p-end {
-  background-color: theme.palette(bg, 'brand-tertiary') !important;
-  border-radius: 0 theme.shape('full') theme.shape('full') 0 !important;
-
-  &:first-child {
-    border-radius: theme.shape('full') !important;
-  }
-
-  span {
-    color: theme.palette(text, 'on-neutral') !important;
-    background-color: theme.palette(bg, 'brand') !important;
-    border-radius: theme.shape('full') !important;
-  }
-}
-
-.#{theme.$prefix}-#{$component}-p-range {
-  color: theme.palette(text, 'default') !important;
-  background-color: theme.palette(bg, 'brand-tertiary') !important;
-
-  span {
-    &.p-highlight {
-      color: theme.palette(text, 'default') !important;
-      background-color: transparent !important;
-    }
-  }
-}

package/es/components/Carousel/style/Carousel.scss

@@ -1,63 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'carousel';
-$dot-size: 8px;
-$dot-active-size: 12px;
-
-// 4-pointed star clip path
-$star-clip: polygon(
-  50% 0%,
-  62% 38%,
-  100% 50%,
-  62% 62%,
-  50% 100%,
-  38% 62%,
-  0% 50%,
-  38% 38%
-);
-
-.#{theme.$prefix}-#{$component} {
-  display: flex;
-  gap: theme.spacing(gap, 100);
-  align-items: center;
-
-  // ── Individual dot ──
-  &-dot {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    background: none;
-    border: none;
-    cursor: pointer;
-    transition: transform 0.2s ease;
-
-    &::before {
-      display: block;
-      width: $dot-size;
-      height: $dot-size;
-      background-color: theme.palette(bg, 'neutral-secondary');
-      transition:
-        width 0.2s ease,
-        height 0.2s ease,
-        background-color 0.2s ease;
-      content: '';
-      clip-path: $star-clip;
-    }
-
-    &:hover::before {
-      background-color: theme.palette(bg, 'neutral-secondary-hover');
-    }
-
-    // ── Active state ──
-    &-active::before {
-      width: $dot-active-size;
-      height: $dot-active-size;
-      background-color: theme.palette(bg, 'brand');
-    }
-
-    &-active:hover::before {
-      background-color: theme.palette(bg, 'brand');
-    }
-  }
-}

package/es/components/Checkbox/style/Checkbox.scss

@@ -1,235 +0,0 @@
-@use '@/styles/api' as theme;
-@use '@/styles/theme/functions' as theme-internal;
-
-$component: 'checkbox';
-
-@mixin checkbox-box-state($background-color, $border-color) {
-  background-color: $background-color;
-  border-color: $border-color;
-}
-
-// The checkmark is a rotated L-shape (bottom + right borders of a rectangle).
-// Its width:height ratio is 5:8, scaled relative to the checkbox box size (scale-400).
-// The 5/14 and 8/14 fractions produce a visually balanced checkmark within the box.
-@mixin checkbox-checkmark-shape($color, $background-color: transparent) {
-  top: calc(#{theme.spacing(scale, 400)} / 2 - 1px); // vertically center: half box minus border offset
-  inset-inline-start: calc(#{theme.spacing(scale, 400)} / 4 - 1px); // horizontally center: quarter box minus border offset
-  width: calc(5 * #{theme.spacing(scale, 400)} / 14); // 5/14 of box — short arm of checkmark
-  height: calc(8 * #{theme.spacing(scale, 400)} / 14); // 8/14 of box — long arm of checkmark
-  background-color: $background-color;
-  border: 1px solid $color;
-  border-top: 0;
-  border-inline-start: 0;
-}
-
-@mixin checkbox-checkmark-visible($color) {
-  @include checkbox-checkmark-shape($color);
-
-  transform: rotate(45deg) scale(1) translate(-50%, -50%);
-  opacity: 1;
-}
-
-@mixin checkbox-minus-shape($color) {
-  top: 50%;
-  inset-inline-start: 17.5%;
-  width: 65%;
-  height: 7.5%;
-  background-color: $color;
-  border: 0;
-  border-radius: theme.shape(100);
-  transform: translateY(-50%);
-  opacity: 1;
-}
-
-.#{theme.$prefix}-#{$component} {
-  display: inline-flex;
-  gap: theme.spacing(gap, 300);
-  align-items: flex-start;
-  cursor: pointer;
-
-  &-box-wrapper {
-    position: relative;
-    display: flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    height: theme-internal.om-line-height-px(body, lg);
-  }
-
-  &-input {
-    position: absolute;
-    inset: 0;
-    margin: 0;
-    cursor: inherit;
-    opacity: 0;
-  }
-
-  &-box {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: theme.spacing(scale, 400);
-    height: theme.spacing(scale, 400);
-    overflow: hidden;
-    background-color: theme.palette(bg, 'default');
-    border: 1px solid theme.palette(border, 'default-secondary');
-    border-radius: theme.shape(100);
-    transition:
-      background-color 0.2s ease,
-      border-color 0.2s ease,
-      box-shadow 0.2s ease;
-
-    &::after {
-      position: absolute;
-      display: table;
-      box-sizing: border-box;
-
-      @include checkbox-checkmark-shape(theme.palette(icon, 'on-brand'));
-
-      transform: rotate(45deg) scale(0) translate(-50%, -50%);
-      transform-origin: center;
-      opacity: 0;
-      transition:
-        all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6),
-        opacity 0.1s;
-      content: '';
-    }
-  }
-
-  &-input:checked + .#{theme.$prefix}-#{$component}-box {
-    @include checkbox-box-state(
-      theme.palette(bg, 'brand'),
-      theme.palette(bg, 'brand')
-    );
-
-    &::after {
-      @include checkbox-checkmark-visible(theme.palette(icon, 'on-brand'));
-
-      transition:
-        all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s,
-        opacity 0.1s;
-    }
-  }
-
-  &-input:focus-visible + .#{theme.$prefix}-#{$component}-box {
-    border-color: theme.palette(border, 'brand');
-    box-shadow: 0 0 0 1px theme.palette(border, 'brand');
-  }
-
-  &-content {
-    display: flex;
-    flex: 1 0 0;
-    flex-direction: column;
-    justify-content: center;
-    min-width: 0;
-    min-height: 1px;
-  }
-
-  &-label {
-    display: inline;
-  }
-
-  &-description {
-    display: inline;
-  }
-
-  &:not(&-disabled):hover {
-    .#{theme.$prefix}-#{$component}-box {
-      border-color: theme.palette(border, 'default-tertiary');
-    }
-
-    .#{theme.$prefix}-#{$component}-input:checked
-      + .#{theme.$prefix}-#{$component}-box {
-      @include checkbox-box-state(
-        theme.palette(bg, 'brand-hover'),
-        theme.palette(bg, 'brand-hover')
-      );
-    }
-
-    .#{theme.$prefix}-#{$component}-box-wrapper-indeterminate
-      .#{theme.$prefix}-#{$component}-box {
-      @include checkbox-box-state(
-        theme.palette(bg, 'brand-hover'),
-        theme.palette(bg, 'brand-hover')
-      );
-    }
-  }
-
-  &-box-wrapper-indeterminate {
-    .#{theme.$prefix}-#{$component}-box {
-      @include checkbox-box-state(
-        theme.palette(bg, 'brand'),
-        theme.palette(bg, 'brand')
-      );
-
-      &::after {
-        @include checkbox-minus-shape(theme.palette(icon, 'on-brand'));
-      }
-    }
-
-  }
-
-  &-disabled {
-    cursor: not-allowed;
-
-    .#{theme.$prefix}-#{$component}-box {
-      @include checkbox-box-state(
-        theme.palette(bg, 'disabled'),
-        theme.palette(border, 'disabled')
-      );
-    }
-
-    .#{theme.$prefix}-#{$component}-input:checked
-      + .#{theme.$prefix}-#{$component}-box {
-      @include checkbox-box-state(
-        theme.palette(bg, 'disabled'),
-        theme.palette(border, 'disabled')
-      );
-    }
-
-    .#{theme.$prefix}-#{$component}-input:checked
-      + .#{theme.$prefix}-#{$component}-box::after {
-      @include checkbox-checkmark-visible(theme.palette(icon, 'disabled'));
-    }
-
-    .#{theme.$prefix}-#{$component}-box-wrapper-indeterminate
-      .#{theme.$prefix}-#{$component}-box {
-      @include checkbox-box-state(
-        theme.palette(bg, 'disabled'),
-        theme.palette(border, 'disabled')
-      );
-
-      &::after {
-        @include checkbox-minus-shape(theme.palette(icon, 'disabled'));
-      }
-    }
-
-  }
-
-  &-right {
-    .#{theme.$prefix}-#{$component}-box-wrapper {
-      order: 1;
-    }
-
-    .#{theme.$prefix}-#{$component}-content {
-      order: 0;
-    }
-  }
-}
-
-$group-component: 'checkbox-group';
-
-.#{theme.$prefix}-#{$group-component} {
-  display: flex;
-  gap: theme.spacing(gap, 300);
-  align-items: flex-start;
-
-  &-horizontal {
-    flex-flow: row wrap;
-  }
-
-  &-vertical {
-    flex-direction: column;
-  }
-}