@moduix/react 2.1.0 → 2.2.4

package/dist/components/steps/Steps.css

@@ -1,284 +0,0 @@
-@layer ui.components {
-  ._1tbAxa_root {
-    box-sizing: border-box;
-    width: 100%;
-    max-width: var(--steps-max-width, 52rem);
-    min-width: 0;
-    color: var(--steps-color, var(--color-foreground));
-    display: flex;
-
-    &[data-orientation="horizontal"] {
-      gap: var(--steps-root-gap, var(--spacing-4));
-      flex-direction: column;
-    }
-
-    &[data-orientation="vertical"] {
-      align-items: stretch;
-      gap: var(--steps-vertical-gap, var(--spacing-6));
-      flex-direction: row;
-    }
-  }
-
-  ._1tbAxa_list {
-    width: 100%;
-    min-width: 0;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    display: flex;
-
-    &[data-orientation="horizontal"] {
-      flex-direction: row;
-      align-items: center;
-    }
-
-    &[data-orientation="vertical"] {
-      align-items: flex-start;
-      gap: var(--steps-gap, var(--spacing-4));
-      flex-direction: column;
-      flex: none;
-      width: fit-content;
-    }
-  }
-
-  ._1tbAxa_item {
-    align-items: center;
-    gap: var(--steps-trigger-gap, var(--spacing-3));
-    flex: 1 1 0;
-    min-width: 0;
-    display: flex;
-    position: relative;
-
-    &:last-child {
-      flex: none;
-
-      & ._1tbAxa_separator {
-        display: none;
-      }
-    }
-
-    &[data-orientation="vertical"] {
-      min-height: var(--steps-vertical-item-min-height, 4rem);
-      flex: none;
-      align-items: flex-start;
-    }
-  }
-
-  ._1tbAxa_trigger {
-    z-index: 1;
-    align-items: center;
-    gap: var(--steps-trigger-gap, var(--spacing-3));
-    border-radius: var(--steps-trigger-radius, var(--radius-md));
-    min-width: 0;
-    color: inherit;
-    font: inherit;
-    text-align: left;
-    user-select: none;
-    cursor: pointer;
-    background: none;
-    border: 0;
-    outline: none;
-    padding: 0;
-    text-decoration: none;
-    display: inline-flex;
-    position: relative;
-
-    &[data-orientation="vertical"] {
-      align-items: flex-start;
-    }
-
-    &:focus-visible ._1tbAxa_indicator {
-      outline: var(--steps-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
-        solid var(--steps-focus-ring-color, var(--color-ring));
-      outline-offset: var(--steps-focus-ring-offset, var(--focus-ring-offset));
-    }
-
-    &[data-incomplete] {
-      color: var(--steps-trigger-color-incomplete, inherit);
-    }
-
-    @media (hover: hover) {
-      &:hover ._1tbAxa_indicator[data-incomplete] {
-        border-color: var(--steps-indicator-border-color-hover, var(--steps-indicator-border-color-current, var(--color-foreground)));
-        color: var(--steps-indicator-color-hover, var(--steps-indicator-color-current, var(--color-foreground)));
-      }
-    }
-  }
-
-  ._1tbAxa_indicator {
-    box-sizing: border-box;
-    width: var(--steps-indicator-size, var(--spacing-8));
-    height: var(--steps-indicator-size, var(--spacing-8));
-    border: var(--steps-indicator-border-width, var(--border-width-sm)) solid
-      var(--steps-indicator-border-color, var(--color-border));
-    border-radius: var(--steps-indicator-radius, var(--radius-full));
-    background-color: var(--steps-indicator-bg, var(--color-background));
-    color: var(--steps-indicator-color, var(--color-muted-foreground));
-    font-size: var(--steps-indicator-font-size, var(--text-sm));
-    font-weight: var(--steps-indicator-font-weight, var(--weight-semibold));
-    transition: background-color var(--transition-default),
-      border-color var(--transition-default),
-      color var(--transition-default),
-      opacity var(--transition-default);
-    flex: none;
-    justify-content: center;
-    align-items: center;
-    line-height: 1;
-    display: inline-flex;
-
-    & :where(svg) {
-      width: var(--steps-indicator-icon-size, var(--spacing-3-5));
-      height: var(--steps-indicator-icon-size, var(--spacing-3-5));
-    }
-
-    &[data-current] {
-      border-color: var(--steps-indicator-border-color-current, var(--steps-indicator-border-color-complete, var(--color-foreground)));
-      background-color: var(--steps-indicator-bg-current, var(--steps-indicator-bg, var(--color-background)));
-      color: var(--steps-indicator-color-current, var(--color-foreground));
-    }
-
-    &[data-complete] {
-      border-color: var(--steps-indicator-border-color-complete, var(--color-foreground));
-      background-color: var(--steps-indicator-bg-complete, var(--color-foreground));
-      color: var(--steps-indicator-color-complete, var(--color-background));
-    }
-  }
-
-  ._1tbAxa_separator {
-    height: var(--steps-separator-thickness, var(--border-width-sm));
-    min-width: var(--steps-separator-min-width, var(--spacing-8));
-    margin-inline: var(--steps-separator-inset, var(--spacing-2));
-    background-color: var(--steps-separator-color, var(--color-border));
-    pointer-events: none;
-    flex: auto;
-
-    &[data-complete] {
-      background-color: var(--steps-separator-color-complete, var(--color-foreground));
-    }
-
-    &[data-orientation="vertical"] {
-      top: calc(var(--steps-indicator-size, var(--spacing-8)) +
-          var(--steps-separator-inset, var(--spacing-2)));
-      bottom: calc(var(--steps-gap, var(--spacing-4)) * -1);
-      left: calc(var(--steps-indicator-size, var(--spacing-8)) / 2);
-      width: var(--steps-separator-thickness, var(--border-width-sm));
-      min-width: 0;
-      height: auto;
-      margin-inline: 0;
-      position: absolute;
-      translate: -50%;
-    }
-  }
-
-  ._1tbAxa_content, ._1tbAxa_completedContent {
-    box-sizing: border-box;
-    min-height: var(--steps-content-min-height, 10rem);
-    min-width: 0;
-    padding-block: var(--steps-content-padding-y, var(--spacing-4));
-    padding-inline: var(--steps-content-padding-x, var(--spacing-4));
-    border-radius: var(--steps-content-radius, var(--radius-md));
-    background-color: var(--steps-content-bg, var(--color-muted));
-    color: var(--steps-content-color, var(--color-foreground));
-    font-size: var(--steps-content-font-size, var(--text-sm));
-    line-height: var(--steps-content-line-height, var(--line-height-text-sm));
-    outline: none;
-    place-items: center;
-    display: grid;
-
-    &[hidden]:not([hidden="until-found"]) {
-      display: none;
-    }
-
-    &[data-orientation="vertical"] {
-      flex: auto;
-    }
-
-    &:focus-visible {
-      outline: var(--steps-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
-        solid var(--steps-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--steps-focus-ring-offset, var(--focus-ring-offset)) * -1);
-    }
-  }
-
-  ._1tbAxa_completedContent {
-    color: var(--steps-completed-content-color, var(--color-foreground));
-    font-weight: var(--steps-completed-content-font-weight, var(--weight-medium));
-    text-align: center;
-  }
-
-  ._1tbAxa_prevTrigger, ._1tbAxa_nextTrigger {
-    box-sizing: border-box;
-    min-height: var(--steps-action-height, var(--size-sm));
-    justify-content: center;
-    align-items: center;
-    gap: var(--steps-action-gap, var(--spacing-2));
-    border: var(--steps-action-border-width, var(--border-width-sm)) solid
-      var(--steps-action-border-color, var(--color-border));
-    border-radius: var(--steps-action-radius, var(--radius-md));
-    padding-block: var(--steps-action-padding-y, var(--spacing-1-5));
-    padding-inline: var(--steps-action-padding-x, var(--spacing-3));
-    background-color: var(--steps-action-bg, var(--color-background));
-    color: var(--steps-action-color, var(--color-foreground));
-    font: inherit;
-    font-size: var(--steps-action-font-size, var(--text-sm));
-    line-height: var(--steps-action-line-height, var(--line-height-text-sm));
-    cursor: pointer;
-    transition: background-color var(--transition-default),
-      border-color var(--transition-default),
-      color var(--transition-default),
-      opacity var(--transition-default);
-    outline: none;
-    text-decoration: none;
-    display: inline-flex;
-
-    @media (hover: hover) {
-      &:hover:not(:disabled):not([data-disabled]) {
-        background-color: var(--steps-action-bg-hover, var(--color-accent));
-      }
-    }
-
-    &:focus-visible {
-      outline: var(--steps-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
-        solid var(--steps-focus-ring-color, var(--color-ring));
-      outline-offset: var(--steps-focus-ring-offset, var(--focus-ring-offset));
-    }
-
-    &:is(:disabled, [data-disabled]) {
-      opacity: var(--steps-disabled-opacity, var(--opacity-disabled));
-      cursor: default;
-    }
-  }
-
-  ._1tbAxa_nextTrigger {
-    border-color: var(--steps-next-action-border-color, var(--color-foreground));
-    background-color: var(--steps-next-action-bg, var(--color-foreground));
-    color: var(--steps-next-action-color, var(--color-background));
-
-    @media (hover: hover) {
-      &:hover:not(:disabled):not([data-disabled]) {
-        background-color: var(--steps-next-action-bg-hover, var(--color-foreground));
-      }
-    }
-  }
-
-  ._1tbAxa_progress {
-    width: 100%;
-    height: var(--steps-progress-height, var(--border-width-md));
-    border-radius: var(--steps-progress-radius, var(--radius-full));
-    background-color: var(--steps-progress-bg, var(--color-border));
-    display: block;
-    position: relative;
-    overflow: hidden;
-
-    &:before {
-      content: "";
-      width: var(--percent, 0%);
-      border-radius: inherit;
-      background-color: var(--steps-progress-fill-bg, var(--color-foreground));
-      transition: width var(--transition-default);
-      position: absolute;
-      inset-block: 0;
-      inset-inline-start: 0;
-    }
-  }
-}

package/dist/components/swap/Swap.css

@@ -1,45 +0,0 @@
-@layer ui.components {
-  .jqWswG_root {
-    vertical-align: middle;
-    grid-template-areas: "jqWswG_swap";
-    place-items: center;
-    display: inline-grid;
-  }
-
-  .jqWswG_indicator {
-    color: inherit;
-    grid-area: jqWswG_swap;
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-
-    &[data-state="open"] {
-      animation: jqWswG_swap-enter var(--swap-transition, var(--transition-default));
-    }
-
-    &[data-state="closed"] {
-      animation: jqWswG_swap-exit var(--swap-transition, var(--transition-default));
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .jqWswG_indicator[data-state] {
-      animation-duration: 1ms;
-      animation-delay: 0s;
-    }
-  }
-
-  @keyframes jqWswG_swap-enter {
-    from {
-      opacity: var(--swap-enter-starting-opacity, 0);
-      transform: scale(var(--swap-enter-starting-scale, .92));
-    }
-  }
-
-  @keyframes jqWswG_swap-exit {
-    to {
-      opacity: var(--swap-exit-ending-opacity, 0);
-      transform: scale(var(--swap-exit-ending-scale, .92));
-    }
-  }
-}

package/dist/components/switch/Switch.css

@@ -1,130 +0,0 @@
-@layer ui.components {
-  .PUgkqa_root {
-    align-items: center;
-    gap: var(--switch-gap, var(--spacing-2));
-    vertical-align: middle;
-    cursor: pointer;
-    width: fit-content;
-    display: inline-flex;
-
-    &[data-disabled], &[data-readonly] {
-      cursor: default;
-    }
-
-    &[data-disabled] {
-      opacity: var(--switch-disabled-opacity, var(--opacity-disabled));
-    }
-  }
-
-  .PUgkqa_control {
-    box-sizing: border-box;
-    width: var(--switch-width, 3rem);
-    height: var(--switch-height, var(--size-xs));
-    --switch-thumb-translate-default: calc(var(--switch-width, 3rem) - var(--switch-thumb-size, var(--spacing-5)) -
-        (var(--switch-padding, var(--spacing-0-5)) * 2) -
-        (var(--switch-border-width, var(--border-width-sm)) * 2));
-    border: var(--switch-border-width, var(--border-width-sm)) solid
-      var(--switch-border-color, var(--color-border));
-    border-radius: var(--switch-radius, var(--radius-full));
-    padding: var(--switch-padding, var(--spacing-0-5));
-    background-color: var(--switch-bg, var(--color-muted));
-    user-select: none;
-    transition: background-color var(--switch-transition, var(--transition-default)),
-      border-color var(--switch-transition, var(--transition-default)),
-      opacity var(--switch-transition, var(--transition-default));
-    outline: 0;
-    flex-shrink: 0;
-    align-items: center;
-    line-height: 0;
-    display: inline-flex;
-    position: relative;
-
-    &[data-state="checked"] {
-      border-color: var(--switch-border-color-checked, var(--color-primary));
-      background-color: var(--switch-bg-checked, var(--color-primary));
-    }
-
-    &[data-focus-visible] {
-      outline: var(--switch-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
-        solid var(--switch-focus-ring-color, var(--color-ring));
-      outline-offset: var(--switch-focus-ring-offset, var(--border-width-sm));
-    }
-
-    @media (hover: hover) {
-      &[data-state="unchecked"][data-hover]:not([data-readonly], [data-disabled]) {
-        background-color: var(--switch-bg-hover, var(--color-accent));
-      }
-
-      &[data-state="checked"][data-hover]:not([data-readonly], [data-disabled]) {
-        background-color: var(--switch-bg-checked-hover, var(--switch-bg-checked, var(--color-primary)));
-      }
-    }
-  }
-
-  .PUgkqa_root[data-size="xs"] .PUgkqa_control {
-    --switch-width: var(--switch-width-xs, 1.75rem);
-    --switch-height: var(--switch-height-xs, 1rem);
-    --switch-thumb-size: var(--switch-thumb-size-xs, var(--spacing-3));
-  }
-
-  .PUgkqa_root[data-size="sm"] .PUgkqa_control {
-    --switch-width: var(--switch-width-sm, 2.25rem);
-    --switch-height: var(--switch-height-sm, 1.25rem);
-    --switch-thumb-size: var(--switch-thumb-size-sm, var(--spacing-4));
-  }
-
-  .PUgkqa_root[data-size="md"] .PUgkqa_control {
-    --switch-width: var(--switch-width-md, 2.75rem);
-    --switch-height: var(--switch-height-md, var(--size-xs));
-    --switch-thumb-size: var(--switch-thumb-size-md, var(--spacing-5));
-  }
-
-  .PUgkqa_root[data-size="lg"] .PUgkqa_control {
-    --switch-width: var(--switch-width-lg, 3.25rem);
-    --switch-height: var(--switch-height-lg, 1.75rem);
-    --switch-thumb-size: var(--switch-thumb-size-lg, var(--size-xs));
-  }
-
-  .PUgkqa_root[data-size="xl"] .PUgkqa_control {
-    --switch-width: var(--switch-width-xl, 3.75rem);
-    --switch-height: var(--switch-height-xl, var(--size-sm));
-    --switch-thumb-size: var(--switch-thumb-size-xl, var(--spacing-7));
-  }
-
-  .PUgkqa_thumb {
-    width: var(--switch-thumb-size, var(--spacing-5));
-    height: var(--switch-thumb-size, var(--spacing-5));
-    border: var(--switch-thumb-border-width, 0) solid var(--switch-thumb-border-color, transparent);
-    border-radius: var(--switch-thumb-radius, var(--radius-full));
-    background-color: var(--switch-thumb-bg-unchecked, var(--switch-thumb-bg, var(--color-background)));
-    color: var(--switch-thumb-color-unchecked, var(--switch-thumb-color, var(--color-muted)));
-    box-shadow: var(--switch-thumb-shadow, var(--shadow-sm));
-    transition: transform var(--switch-thumb-transition, var(--switch-transition, var(--transition-default))),
-      background-color var(--switch-transition, var(--transition-default)),
-      color var(--switch-transition, var(--transition-default));
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-    transform: translateX(0);
-
-    &[data-state="checked"] {
-      background-color: var(--switch-thumb-bg-checked, var(--switch-thumb-bg, var(--color-primary-foreground)));
-      color: var(--switch-thumb-color-checked, var(--switch-thumb-color, var(--color-primary)));
-      transform: translateX(var(--switch-thumb-translate, var(--switch-thumb-translate-default)));
-    }
-
-    & > svg {
-      width: var(--switch-thumb-icon-size, 65%);
-      height: var(--switch-thumb-icon-size, 65%);
-      flex-shrink: 0;
-    }
-  }
-
-  .PUgkqa_label {
-    color: var(--switch-label-color, var(--color-foreground));
-    font-size: var(--switch-label-font-size, var(--text-sm));
-    font-weight: var(--switch-label-font-weight, var(--weight-medium));
-    line-height: var(--switch-label-line-height, var(--line-height-text-sm));
-    user-select: none;
-  }
-}

package/dist/components/table/Table.css

@@ -1,162 +0,0 @@
-@layer ui.components {
-  .-X2Dga_scrollArea {
-    box-sizing: border-box;
-    isolation: isolate;
-    border: var(--table-scroll-area-border-width, var(--table-border-width, var(--border-width-sm)))
-      solid var(--table-scroll-area-border-color, var(--table-border-color, var(--color-border)));
-    border-radius: var(--table-scroll-area-radius, var(--radius-lg));
-    background-color: var(--table-scroll-area-bg, var(--color-card));
-    width: 100%;
-    min-width: 0;
-    box-shadow: var(--table-scroll-area-shadow, none);
-    position: relative;
-    overflow-x: auto;
-  }
-
-  .-X2Dga_root {
-    --table-cell-padding-x-default: var(--table-cell-padding-x, var(--spacing-4));
-    --table-cell-padding-y-default: var(--table-cell-padding-y, var(--spacing-3));
-    --table-empty-padding-y-default: calc(var(--table-cell-padding-y-default) * 2);
-    box-sizing: border-box;
-    border-collapse: collapse;
-    border-spacing: 0;
-    width: 100%;
-    color: var(--table-color, var(--color-foreground));
-    font-family: var(--table-font-family, inherit);
-    font-size: var(--table-font-size, var(--text-sm));
-    line-height: var(--table-line-height, var(--line-height-text-sm));
-    text-align: left;
-    isolation: isolate;
-
-    &[data-size="sm"] {
-      --table-cell-padding-x-default: var(--table-cell-padding-x, var(--spacing-3));
-      --table-cell-padding-y-default: var(--table-cell-padding-y, var(--spacing-2));
-      font-size: var(--table-font-size-sm, var(--text-xs));
-      line-height: var(--table-line-height-sm, var(--line-height-text-xs));
-    }
-
-    &[data-size="lg"] {
-      --table-cell-padding-x-default: var(--table-cell-padding-x, var(--spacing-5));
-      --table-cell-padding-y-default: var(--table-cell-padding-y, var(--spacing-4));
-      font-size: var(--table-font-size-lg, var(--text-md));
-      line-height: var(--table-line-height-lg, var(--line-height-text-md));
-    }
-
-    &[data-variant="outline"] {
-      border: var(--table-border-width, var(--border-width-sm)) solid
-        var(--table-border-color, var(--color-border));
-    }
-  }
-
-  .-X2Dga_caption {
-    box-sizing: border-box;
-    color: var(--table-caption-color, var(--color-muted-foreground));
-    font-size: var(--table-caption-font-size, var(--text-sm));
-    line-height: var(--table-caption-line-height, var(--line-height-text-sm));
-    padding-inline: var(--table-caption-padding-x, var(--table-cell-padding-x-default));
-    text-align: left;
-    text-wrap: pretty;
-
-    &[data-side="top"] {
-      caption-side: top;
-      padding-block: var(--table-caption-padding-edge, var(--spacing-2))
-        var(--table-caption-padding-y, var(--spacing-3));
-    }
-
-    &[data-side="bottom"] {
-      caption-side: bottom;
-      padding-block: var(--table-caption-padding-y, var(--spacing-3))
-        var(--table-caption-padding-edge, var(--spacing-2));
-    }
-  }
-
-  .-X2Dga_row {
-    transition: var(--table-row-transition, background-color var(--transition-default));
-  }
-
-  .-X2Dga_header .-X2Dga_row, .-X2Dga_body .-X2Dga_row {
-    border-bottom: var(--table-border-width, var(--border-width-sm)) solid
-      var(--table-border-color, var(--color-border));
-  }
-
-  .-X2Dga_root[data-striped] .-X2Dga_body .-X2Dga_row:nth-child(2n):not([data-empty]) {
-    background-color: var(--table-row-bg-striped, color-mix(in oklab, var(--color-muted) 35%, transparent));
-  }
-
-  .-X2Dga_root[data-interactive] .-X2Dga_body .-X2Dga_row:not([data-empty]):hover {
-    background-color: var(--table-row-bg-hover, var(--color-muted));
-  }
-
-  .-X2Dga_root[data-show-column-border] :is(.-X2Dga_columnHeader, .-X2Dga_cell):not(:last-child) {
-    border-inline-end: var(--table-column-border-width, var(--table-border-width, var(--border-width-sm)))
-      solid var(--table-column-border-color, var(--table-border-color, var(--color-border)));
-  }
-
-  .-X2Dga_root[data-sticky-header] .-X2Dga_header {
-    z-index: var(--table-sticky-header-z-index, 3);
-    background-color: var(--table-sticky-header-bg, var(--table-scroll-area-bg, var(--color-card)));
-    position: sticky;
-    inset-block-start: 0;
-  }
-
-  .-X2Dga_body .-X2Dga_row:last-child {
-    border-bottom: 0;
-  }
-
-  .-X2Dga_footer {
-    border-top: var(--table-border-width, var(--border-width-sm)) solid
-      var(--table-border-color, var(--color-border));
-    background-color: var(--table-footer-bg, var(--color-muted));
-    color: var(--table-footer-color, var(--table-color, var(--color-foreground)));
-    font-weight: var(--table-footer-font-weight, var(--weight-medium));
-  }
-
-  .-X2Dga_columnHeader, .-X2Dga_cell {
-    z-index: 0;
-    padding-block: var(--table-cell-padding-y-default);
-    padding-inline: var(--table-cell-padding-x-default);
-    vertical-align: middle;
-    position: relative;
-
-    &[data-sticky="start"] {
-      z-index: var(--table-sticky-column-z-index, 2);
-      background-color: var(--table-sticky-column-bg, var(--table-scroll-area-bg, var(--color-card)));
-      position: sticky;
-      inset-inline-start: 0;
-    }
-
-    &[data-sticky="end"] {
-      z-index: var(--table-sticky-column-z-index, 2);
-      background-color: var(--table-sticky-column-bg, var(--table-scroll-area-bg, var(--color-card)));
-      position: sticky;
-      inset-inline-end: 0;
-    }
-  }
-
-  .-X2Dga_root[data-sticky-header] .-X2Dga_header .-X2Dga_columnHeader[data-sticky] {
-    z-index: var(--table-sticky-intersection-z-index, 4);
-  }
-
-  .-X2Dga_columnHeader {
-    color: var(--table-column-header-color, var(--color-muted-foreground));
-    font-weight: var(--table-column-header-font-weight, var(--weight-medium));
-    text-align: inherit;
-    white-space: nowrap;
-  }
-
-  .-X2Dga_cell {
-    color: inherit;
-  }
-
-  .-X2Dga_numeric {
-    text-align: end;
-    white-space: nowrap;
-    font-variant-numeric: tabular-nums;
-  }
-
-  .-X2Dga_empty {
-    padding-block: var(--table-empty-padding-y, var(--table-empty-padding-y-default));
-    color: var(--table-empty-color, var(--color-muted-foreground));
-    text-align: center;
-  }
-}