@1money/component-ui 0.0.1 → 0.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@1money/component-ui",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "React Components based on primereact for 1money front-end projects",
   "main": "lib/index.js",
   "module": "es/index.js",

package/es/components/Accordion/style/Accordion.scss

@@ -1,127 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'accordion';
-
-.#{theme.$prefix}-#{$component} {
-  display: flex;
-  flex-direction: column;
-  gap: theme.spacing(gap, 400);
-  width: 100%;
-
-  // ── Accordion Item ──
-  &-item {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-
-    &-disabled {
-      cursor: not-allowed;
-      opacity: theme.opacity('disabled');
-    }
-  }
-
-  // ── Header (clickable trigger) ──
-  &-header {
-    display: flex;
-    gap: theme.spacing(gap, 400);
-    align-items: center;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    color: inherit;
-    text-align: left;
-    background: none;
-    border: none;
-    cursor: pointer;
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
-
-  // ── Title ──
-  &-title {
-    flex: 1 0 0;
-    color: theme.palette(text, 'default');
-  }
-
-  // ── Icon ──
-  &-icon {
-    flex-shrink: 0;
-    color: theme.palette(icon, 'default');
-  }
-
-  // ── Content ──
-  &-content {
-    width: 100%;
-    color: theme.palette(text, 'default');
-  }
-
-  // ══════════════════════════════════════
-  // Variant: Fill
-  // ══════════════════════════════════════
-  &-fill {
-    .#{theme.$prefix}-#{$component}-item {
-      padding: theme.spacing(component-padding, 600);
-      background-color: theme.palette(bg, 'default-secondary');
-    }
-
-    .#{theme.$prefix}-#{$component}-header {
-      &:hover:not(:disabled) {
-        .#{theme.$prefix}-#{$component}-icon {
-          color: theme.palette(icon, 'default-secondary');
-        }
-      }
-    }
-  }
-
-  // ══════════════════════════════════════
-  // Variant: Stroke
-  // ══════════════════════════════════════
-  &-stroke {
-    gap: 0;
-
-    .#{theme.$prefix}-#{$component}-item {
-      padding: theme.spacing(component-padding, 600) 0;
-      border-bottom: 1px solid theme.palette(border, 'neutral');
-    }
-
-    .#{theme.$prefix}-#{$component}-header {
-      &:hover:not(:disabled) {
-        .#{theme.$prefix}-#{$component}-icon {
-          color: theme.palette(icon, 'default-secondary');
-        }
-      }
-    }
-  }
-
-  // ══════════════════════════════════════
-  // Size: Large
-  // ══════════════════════════════════════
-  &-large {
-    .#{theme.$prefix}-#{$component}-content {
-      margin-top: theme.spacing(gap, 600);
-    }
-
-    &.#{theme.$prefix}-#{$component}-fill {
-      .#{theme.$prefix}-#{$component}-item {
-        border-radius: theme.shape(600);
-      }
-    }
-  }
-
-  // ══════════════════════════════════════
-  // Size: Small
-  // ══════════════════════════════════════
-  &-small {
-    .#{theme.$prefix}-#{$component}-content {
-      margin-top: theme.spacing(gap, 400);
-    }
-
-    &.#{theme.$prefix}-#{$component}-fill {
-      .#{theme.$prefix}-#{$component}-item {
-        border-radius: theme.shape(400);
-      }
-    }
-  }
-}

package/es/components/Alert/style/Alert.scss

@@ -1,89 +0,0 @@
-@use '@/styles/api' as theme;
-@use '@/styles/recipes/variants' as variants;
-
-$component: 'alert';
-
-// ── Variant DSL ──
-$alert-variant-schema: variants.om-variant-schema(
-  $component, container-bg, container-border
-);
-$alert-variants: (
-  'info': (
-    container-bg: theme.palette(bg, 'default-secondary'),
-    container-border: transparent,
-  ),
-  'success': (
-    container-bg: theme.palette(bg, 'default'),
-    container-border: theme.palette(border, 'neutral-secondary'),
-  ),
-  'warning': (
-    container-bg: theme.palette(bg, 'warning-tertiary-hover'),
-    container-border: transparent,
-  ),
-  'error': (
-    container-bg: theme.palette(bg, 'danger-tertiary'),
-    container-border: transparent,
-  ),
-);
-
-.#{theme.$prefix}-#{$component} {
-  @include variants.om-variant-default($alert-variants, 'info', $alert-variant-schema);
-
-  display: flex;
-  gap: theme.spacing(gap, 300);
-  align-items: flex-start;
-  padding: theme.spacing(component-padding, 300);
-  background-color: var(--om-alert-container-bg);
-  border: 1px solid var(--om-alert-container-border);
-  border-radius: theme.shape(300);
-
-  // ── Icon ──
-  &-icon {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-  }
-
-  // ── Content area ──
-  &-content {
-    display: flex;
-    flex: 1 0 0;
-    flex-direction: column;
-    gap: theme.spacing(gap, 100);
-    align-items: flex-start;
-    min-width: 0;
-    padding-top: theme.spacing(scale, 200);
-  }
-
-  // ── Title, Body & Link ──
-  // Typography styles handled by TypographyTitle, TypographyBody and TypographyLink components
-
-  // ── Close button ──
-  &-close {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    align-self: flex-start;
-    justify-content: center;
-    padding: 0;
-    color: theme.palette(icon, 'on-neutral-tertiary');
-    background: none;
-    border: none;
-    cursor: pointer;
-
-    // Override IconWrapper inline style (color + --icon-color) so SVG inherits from parent
-    .#{theme.$prefix}-icons-wrapper {
-      color: inherit !important;
-
-      --icon-color: currentcolor;
-    }
-
-    &:hover {
-      color: theme.palette(icon, 'neutral');
-    }
-  }
-
-  // ── Status variants ──
-  @include variants.om-variant-classes($alert-variants, $alert-variant-schema, $default: 'info');
-}

package/es/components/Button/style/Button.scss

@@ -1,190 +0,0 @@
-@use '@/styles/api' as theme;
-@use '@/styles/recipes/variants' as variants;
-
-$component: 'button';
-$button-variant-schema: variants.om-variant-schema(
-  $component, text, bg, hover-bg, disabled-text, disabled-bg
-);
-$button-primary-variant: (
-  text: theme.palette(text, 'on-neutral'),
-  bg: theme.palette(bg, 'brand'),
-  hover-bg: theme.palette(bg, 'brand-hover'),
-  disabled-text: theme.palette(text, 'disabled-white'),
-  disabled-bg: theme.palette(bg, 'disabled-brand'),
-);
-$button-variants: (
-  'primary': $button-primary-variant,
-  'secondary': (
-    text: theme.palette(text, 'brand'),
-    bg: theme.palette(bg, 'brand-secondary'),
-    hover-bg: theme.palette(bg, 'brand-secondary-hover'),
-    disabled-text: theme.palette(text, 'brand-secondary'),
-    disabled-bg: theme.palette(bg, 'brand-tertiary'),
-  ),
-  'grey': (
-    text: theme.palette(text, 'default'),
-    bg: theme.palette(bg, 'neutral-tertiary'),
-    hover-bg: theme.palette(bg, 'neutral-tertiary-hover'),
-    disabled-text: theme.palette(text, 'disabled'),
-    disabled-bg: theme.palette(bg, 'disabled'),
-  ),
-  'black': (
-    text: theme.palette(text, 'on-neutral'),
-    bg: theme.palette(bg, 'neutral'),
-    hover-bg: theme.palette(bg, 'neutral-hover'),
-    disabled-text: theme.palette(text, 'disabled-white'),
-    disabled-bg: theme.palette(bg, 'disabled-black'),
-  ),
-  'white': (
-    text: theme.palette(text, 'default'),
-    bg: theme.palette(bg, 'default'),
-    hover-bg: theme.palette(bg, 'default-hover'),
-    disabled-text: theme.palette(text, 'disabled'),
-    disabled-bg: theme.palette(bg, 'disabled'),
-  ),
-  'danger': (
-    text: theme.palette(text, 'danger'),
-    bg: theme.palette(bg, 'danger-secondary'),
-    hover-bg: theme.palette(bg, 'danger-secondary-hover'),
-    disabled-text: theme.palette(text, 'danger-secondary'),
-    disabled-bg: theme.palette(bg, 'danger-tertiary'),
-  ),
-  'warning': (
-    text: theme.palette(text, 'default'),
-    bg: theme.palette(bg, 'warning'),
-    hover-bg: theme.palette(bg, 'warning-hover'),
-    disabled-text: theme.palette(text, 'disabled'),
-    disabled-bg: theme.palette(bg, 'warning-secondary-hover'),
-  ),
-);
-
-.#{theme.$prefix}-#{$component} {
-  @include variants.om-variant-default($button-variants, 'primary', $button-variant-schema);
-
-  --om-button-gap: #{theme.spacing(gap, 200)};
-
-  display: inline-flex;
-  gap: var(--om-button-gap);
-  align-items: center;
-  justify-content: center;
-  height: 52px;
-  padding: theme.spacing(component-padding, 400);
-  color: var(--om-button-text);
-  line-height: 1.25;
-  background-color: var(--om-button-bg);
-  border: none;
-  border-radius: theme.shape(300);
-  outline: none;
-  box-shadow: none;
-  cursor: pointer;
-
-  &:disabled,
-  &-disabled {
-    color: var(--om-button-disabled-text);
-    background-color: var(--om-button-disabled-bg);
-    cursor: not-allowed;
-  }
-
-  &:hover:not(:disabled) {
-    background-color: var(--om-button-hover-bg);
-  }
-
-  // ── Sizes ──
-  &-medium {
-    height: 40px;
-    padding: theme.spacing(component-padding, 300);
-    line-height: 1.14;
-    border-radius: theme.shape(300);
-  }
-
-  &-small {
-    height: 32px;
-    padding: theme.spacing(component-padding, 200) theme.spacing(component-padding, 300);
-    line-height: 1.33;
-    border-radius: theme.shape(200);
-  }
-
-  &-rounded {
-    border-radius: theme.shape('full');
-  }
-
-  // ── Text variant ──
-  &-text {
-    --om-button-text: #{theme.palette(text, 'brand')};
-    --om-button-hover-text: #{theme.palette(text, 'on-brand-secondary')};
-    --om-button-bg: transparent;
-    --om-button-hover-bg: transparent;
-    --om-button-disabled-text: #{theme.palette(text, 'brand-secondary')};
-    --om-button-disabled-bg: transparent;
-    --om-button-gap: #{theme.spacing(gap, 100)};
-
-    height: auto;
-    padding: 0;
-    border-radius: 0;
-
-    &:hover:not(:disabled) {
-      --om-button-text: var(--om-button-hover-text);
-
-      color: var(--om-button-text);
-    }
-  }
-
-  &-text-danger {
-    --om-button-text: #{theme.palette(text, 'danger')};
-    --om-button-hover-text: #{theme.palette(text, 'on-danger-secondary')};
-    --om-button-disabled-text: #{theme.palette(text, 'danger-secondary')};
-  }
-
-  // Text variant: size-specific line-height
-  &-text#{&}-large {
-    line-height: 1.08;
-  }
-
-  &-text#{&}-medium {
-    line-height: 1.4;
-  }
-
-  &-text#{&}-small {
-    line-height: 1.4;
-  }
-
-  // ── Icon slots ──
-  &-icon-start,
-  &-icon-end {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    color: currentcolor;
-    line-height: 0;
-
-    > .#{theme.$prefix}-icons-wrapper {
-      color: currentcolor;
-    }
-  }
-
-  // ── Loading icon ──
-  &-loading-icon {
-    display: inline-flex;
-    width: 20px;
-    height: 20px;
-
-    &-medium {
-      width: 16px;
-      height: 16px;
-    }
-
-    &-small {
-      width: 14px;
-      height: 14px;
-    }
-
-    // Override Spinner's default brand color to inherit Button text color
-    &.#{theme.$prefix}-spinner {
-      color: inherit;
-    }
-  }
-
-  // ── Color variants ──
-  @include variants.om-variant-classes($button-variants, $button-variant-schema, $default: 'primary');
-}