@moduix/react 2.1.0 → 2.2.4

package/dist/components/button/Button.css

@@ -1,213 +0,0 @@
-@layer ui.components {
-  .NbN_ya_root {
-    box-sizing: border-box;
-    justify-content: center;
-    align-items: center;
-    gap: var(--button-content-gap, var(--spacing-2));
-    border: var(--button-border-width, var(--border-width-sm)) solid transparent;
-    border-radius: var(--button-radius, var(--radius-md));
-    color: var(--button-color, var(--color-foreground));
-    appearance: none;
-    font: inherit;
-    font-size: var(--button-font-size, var(--text-sm));
-    font-weight: var(--button-font-weight, var(--weight-medium));
-    line-height: var(--button-line-height, var(--line-height-text-sm));
-    user-select: none;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: background-color var(--button-transition, var(--transition-default)),
-      border-color var(--button-transition, var(--transition-default)),
-      color var(--button-transition, var(--transition-default)),
-      opacity var(--button-transition, var(--transition-default)),
-      box-shadow var(--button-transition, var(--transition-default));
-    background-color: #0000;
-    margin: 0;
-    text-decoration: none;
-    display: inline-flex;
-
-    &:focus-visible {
-      outline: var(--button-focus-ring-width, var(--focus-ring-width, var(--border-width-md))) solid
-        var(--button-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--button-focus-ring-offset, var(--button-border-width, var(--border-width-sm))) * -1);
-    }
-
-    &:active:not([data-disabled]) {
-      opacity: .9;
-    }
-
-    &[data-disabled] {
-      opacity: var(--button-disabled-opacity, var(--opacity-disabled));
-      cursor: default;
-      pointer-events: none;
-    }
-
-    &[data-loading] {
-      cursor: progress;
-    }
-
-    & :where(svg) {
-      width: var(--button-icon-size, var(--spacing-4));
-      height: var(--button-icon-size, var(--spacing-4));
-      flex-shrink: 0;
-    }
-
-    & [data-icon="inline-start"], & [data-icon="inline-end"] {
-      flex-shrink: 0;
-      justify-content: center;
-      align-items: center;
-      display: inline-flex;
-    }
-
-    &[data-variant="default"] {
-      border-color: var(--button-default-border-color, var(--color-primary));
-      background-color: var(--button-default-bg, var(--color-primary));
-      color: var(--button-default-color, var(--color-primary-foreground));
-
-      @media (hover: hover) {
-        &:not([data-disabled]):hover {
-          background-color: var(--button-default-bg-hover, color-mix(in srgb, var(--button-default-bg, var(--color-primary)) 88%, black));
-        }
-      }
-    }
-
-    &[data-variant="outline"] {
-      border-color: var(--button-outline-border-color, var(--color-border));
-      background-color: var(--button-outline-bg, var(--color-background));
-      color: var(--button-outline-color, var(--color-foreground));
-
-      @media (hover: hover) {
-        &:not([data-disabled]):hover {
-          background-color: var(--button-outline-bg-hover, var(--color-accent));
-        }
-      }
-    }
-
-    &[data-variant="secondary"] {
-      border-color: var(--button-secondary-border-color, var(--color-secondary));
-      background-color: var(--button-secondary-bg, var(--color-secondary));
-      color: var(--button-secondary-color, var(--color-secondary-foreground));
-
-      @media (hover: hover) {
-        &:not([data-disabled]):hover {
-          background-color: var(--button-secondary-bg-hover, var(--color-accent));
-        }
-      }
-    }
-
-    &[data-variant="destructive"] {
-      border-color: var(--button-destructive-border-color, var(--color-destructive));
-      background-color: var(--button-destructive-bg, var(--color-destructive));
-      color: var(--button-destructive-color, var(--color-destructive-foreground));
-
-      @media (hover: hover) {
-        &:not([data-disabled]):hover {
-          filter: brightness(var(--button-destructive-hover-brightness, .96));
-        }
-      }
-    }
-
-    &[data-variant="destructive-outline"] {
-      border-color: var(--button-destructive-outline-border-color, var(--color-destructive));
-      background-color: var(--button-destructive-outline-bg, var(--color-background));
-      color: var(--button-destructive-outline-color, var(--color-destructive));
-
-      @media (hover: hover) {
-        &:not([data-disabled]):hover {
-          background-color: var(--button-destructive-outline-bg-hover, var(--color-destructive));
-          color: var(--button-destructive-outline-color-hover, var(--button-destructive-color, var(--color-destructive-foreground)));
-        }
-      }
-    }
-
-    &[data-variant="ghost"] {
-      border-color: var(--button-ghost-border-color, transparent);
-      background-color: var(--button-ghost-bg, transparent);
-      color: var(--button-ghost-color, var(--color-foreground));
-
-      @media (hover: hover) {
-        &:not([data-disabled]):hover {
-          background-color: var(--button-ghost-bg-hover, var(--color-accent));
-        }
-      }
-    }
-
-    &[data-variant="link"] {
-      color: var(--button-link-color, var(--color-primary));
-      text-decoration: var(--button-link-text-decoration, underline);
-      text-underline-offset: var(--button-link-underline-offset, .25em);
-      background-color: #0000;
-      border-color: #0000;
-      padding-inline: 0;
-
-      @media (hover: hover) {
-        &:not([data-disabled]):hover {
-          color: var(--button-link-color-hover, var(--color-foreground));
-        }
-      }
-    }
-
-    &[data-size="xs"] {
-      min-height: var(--button-size-xs, var(--size-xs));
-      padding-block: var(--button-padding-y-xs, var(--spacing-0-5));
-      padding-inline: var(--button-padding-x-xs, var(--spacing-2-5));
-      font-size: var(--button-font-size-xs, var(--text-xs));
-      line-height: var(--button-line-height-xs, var(--line-height-text-xs));
-    }
-
-    &[data-size="sm"] {
-      min-height: var(--button-size-sm, var(--size-sm));
-      padding-block: var(--button-padding-y-sm, var(--spacing-1));
-      padding-inline: var(--button-padding-x-sm, var(--spacing-3));
-    }
-
-    &[data-size="md"] {
-      min-height: var(--button-size-md, var(--size-md));
-      padding-block: var(--button-padding-y-md, var(--spacing-1));
-      padding-inline: var(--button-padding-x-md, var(--spacing-4));
-    }
-
-    &[data-size="lg"] {
-      min-height: var(--button-size-lg, var(--size-lg));
-      padding-block: var(--button-padding-y-lg, var(--spacing-1-5));
-      padding-inline: var(--button-padding-x-lg, var(--spacing-5));
-      font-size: var(--button-font-size-lg, var(--text-md));
-      line-height: var(--button-line-height-lg, var(--line-height-text-md));
-    }
-
-    &[data-size="xl"] {
-      min-height: var(--button-size-xl, var(--size-xl));
-      padding-block: var(--button-padding-y-xl, var(--spacing-2));
-      padding-inline: var(--button-padding-x-xl, var(--spacing-6));
-      font-size: var(--button-font-size-xl, var(--text-lg));
-      line-height: var(--button-line-height-xl, var(--line-height-text-lg));
-    }
-
-    &[data-size="icon-sm"], &[data-size="icon-md"], &[data-size="icon-lg"] {
-      gap: 0;
-      padding: 0;
-    }
-
-    &[data-size="icon-sm"] {
-      width: var(--button-size-icon-sm, var(--size-sm));
-      min-width: var(--button-size-icon-sm, var(--size-sm));
-      height: var(--button-size-icon-sm, var(--size-sm));
-    }
-
-    &[data-size="icon-md"] {
-      width: var(--button-size-icon-md, var(--size-md));
-      min-width: var(--button-size-icon-md, var(--size-md));
-      height: var(--button-size-icon-md, var(--size-md));
-    }
-
-    &[data-size="icon-lg"] {
-      width: var(--button-size-icon-lg, var(--size-lg));
-      min-width: var(--button-size-icon-lg, var(--size-lg));
-      height: var(--button-size-icon-lg, var(--size-lg));
-    }
-
-    &[data-variant="link"] {
-      min-height: 0;
-      padding-block: 0;
-    }
-  }
-}

package/dist/components/card/Card.css

@@ -1,164 +0,0 @@
-@layer ui.components {
-  ._2rXk6G_root {
-    --card-padding-default: var(--card-spacing, var(--card-padding, var(--spacing-6)));
-    --card-section-spacing-default: var(--card-spacing, var(--card-body-padding-top, var(--spacing-4)));
-    --card-title-font-size-default: var(--card-title-font-size, var(--text-lg));
-    --card-title-line-height-default: var(--card-title-line-height, var(--line-height-text-lg));
-    box-sizing: border-box;
-    border: var(--card-border-width, var(--card-border-width-default, var(--border-width-sm))) solid
-      var(--card-border-color, var(--color-border));
-    border-radius: var(--card-radius, var(--radius-lg));
-    background-color: var(--card-bg, var(--card-bg-default, var(--color-card)));
-    width: 100%;
-    min-width: 0;
-    color: var(--card-color, var(--color-card-foreground));
-    box-shadow: var(--card-shadow, var(--card-shadow-default, none));
-    flex-direction: column;
-    display: flex;
-    position: relative;
-
-    &:where(a) {
-      text-decoration: none;
-    }
-
-    &[data-size="sm"] {
-      --card-padding-default: var(--card-spacing-sm, var(--card-spacing, var(--card-padding-sm, var(--spacing-4))));
-      --card-section-spacing-default: var(--card-spacing-sm, var(--card-spacing, var(--card-body-padding-top, var(--spacing-4))));
-      --card-title-font-size-default: var(--card-title-font-size-sm, var(--text-md));
-      --card-title-line-height-default: var(--card-title-line-height-sm, var(--line-height-text-md));
-    }
-
-    &[data-size="lg"] {
-      --card-padding-default: var(--card-spacing-lg, var(--card-spacing, var(--card-padding-lg, var(--spacing-8))));
-      --card-section-spacing-default: var(--card-spacing-lg, var(--card-spacing, var(--card-body-padding-top, var(--spacing-4))));
-      --card-title-font-size-default: var(--card-title-font-size-lg, var(--text-xl));
-      --card-title-line-height-default: var(--card-title-line-height-lg, var(--line-height-text-xl));
-    }
-
-    &[data-variant="elevated"] {
-      --card-border-width-default: 0;
-      --card-shadow-default: var(--shadow-md);
-    }
-
-    &[data-variant="subtle"] {
-      --card-border-width-default: 0;
-      --card-bg-default: var(--color-muted);
-    }
-
-    &:has([data-scope="card"][data-part="link"]) :where(a, button, input, select, textarea, [role="button"], [role="checkbox"], [role="menuitem"], [role="switch"], [tabindex]:not([tabindex="-1"])):not([data-scope="card"][data-part="link"]) {
-      z-index: 1;
-      position: relative;
-    }
-  }
-
-  ._2rXk6G_header, ._2rXk6G_body, ._2rXk6G_footer {
-    box-sizing: border-box;
-    min-width: 0;
-    padding-inline: var(--card-padding-default);
-  }
-
-  ._2rXk6G_header {
-    column-gap: var(--card-action-gap, var(--spacing-2));
-    row-gap: var(--card-header-gap, var(--spacing-1));
-    padding-block: var(--card-padding-default) 0;
-    grid-template-columns: minmax(0, 1fr) auto;
-    display: grid;
-  }
-
-  ._2rXk6G_media {
-    border-start-start-radius: inherit;
-    border-start-end-radius: inherit;
-    min-width: 0;
-    overflow: hidden;
-
-    & > :where(img, picture, video, canvas, svg, iframe) {
-      width: 100%;
-      max-width: 100%;
-      display: block;
-    }
-  }
-
-  ._2rXk6G_body {
-    padding-block: var(--card-section-spacing-default) var(--card-padding-default);
-    color: var(--card-body-color, var(--color-muted-foreground));
-    font-size: var(--card-body-font-size, var(--text-sm));
-    line-height: var(--card-body-line-height, var(--line-height-text-sm));
-    overflow-wrap: anywhere;
-
-    &:first-child {
-      padding-block-start: var(--card-padding-default);
-    }
-
-    & > :first-child {
-      margin-top: 0;
-    }
-
-    & > :last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  ._2rXk6G_footer {
-    align-items: center;
-    gap: var(--card-footer-gap, var(--spacing-2));
-    padding-block: 0 var(--card-padding-default);
-    flex-wrap: wrap;
-    display: flex;
-  }
-
-  ._2rXk6G_title {
-    min-width: 0;
-    color: var(--card-title-color, currentColor);
-    font-size: var(--card-title-font-size-default);
-    font-weight: var(--card-title-font-weight, var(--weight-semibold));
-    line-height: var(--card-title-line-height-default);
-    overflow-wrap: anywhere;
-    grid-column: 1;
-    margin: 0;
-  }
-
-  ._2rXk6G_description {
-    min-width: 0;
-    color: var(--card-description-color, var(--color-muted-foreground));
-    font-size: var(--card-description-font-size, var(--text-sm));
-    line-height: var(--card-description-line-height, var(--line-height-text-sm));
-    overflow-wrap: anywhere;
-    grid-column: 1;
-    margin: 0;
-  }
-
-  ._2rXk6G_action {
-    z-index: 1;
-    justify-content: flex-end;
-    align-items: start;
-    gap: var(--card-action-gap, var(--spacing-2));
-    grid-area: 1 / 2 / span 2;
-    justify-self: end;
-    display: inline-flex;
-    position: relative;
-  }
-
-  ._2rXk6G_link {
-    color: inherit;
-    text-decoration: none;
-    position: static;
-
-    &:after {
-      content: "";
-      z-index: 0;
-      border-radius: var(--card-radius, var(--radius-lg));
-      position: absolute;
-      inset: 0;
-    }
-
-    &:focus-visible {
-      outline: 0;
-    }
-
-    &:focus-visible:after {
-      outline: var(--card-focus-ring-width, var(--focus-ring-width, var(--border-width-md))) solid
-        var(--card-focus-ring-color, var(--color-ring));
-      outline-offset: var(--card-focus-ring-offset, var(--border-width-sm));
-    }
-  }
-}

package/dist/components/carousel/Carousel.css

@@ -1,200 +0,0 @@
-@layer ui.components {
-  .NQiVeG_root {
-    gap: var(--carousel-gap, var(--spacing-3));
-    flex-direction: column;
-    width: 100%;
-    min-width: 0;
-    display: flex;
-  }
-
-  .NQiVeG_root[data-orientation="vertical"] {
-    height: var(--carousel-height, 24rem);
-    flex-direction: row;
-    align-items: stretch;
-  }
-
-  .NQiVeG_control {
-    align-items: center;
-    gap: var(--carousel-gap, var(--spacing-3));
-    min-width: 0;
-    display: flex;
-  }
-
-  .NQiVeG_control[data-orientation="vertical"] {
-    flex-direction: column;
-    justify-content: space-between;
-  }
-
-  .NQiVeG_itemGroup {
-    overscroll-behavior-x: contain;
-    overscroll-behavior-y: auto;
-    border-radius: var(--carousel-track-radius, var(--radius-xl));
-    scrollbar-width: none;
-    scroll-behavior: smooth;
-    flex: auto;
-    min-width: 0;
-    min-height: 0;
-    display: flex;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    &[data-dragging] {
-      cursor: grabbing;
-      user-select: none;
-    }
-  }
-
-  .NQiVeG_root[data-orientation="vertical"] > .NQiVeG_itemGroup {
-    overscroll-behavior-x: auto;
-    overscroll-behavior-y: contain;
-    height: 100%;
-  }
-
-  .NQiVeG_item {
-    box-sizing: border-box;
-    min-width: 0;
-    min-height: 0;
-  }
-
-  .NQiVeG_prevTrigger, .NQiVeG_nextTrigger, .NQiVeG_autoplayTrigger {
-    width: var(--carousel-control-size, var(--size-md));
-    height: var(--carousel-control-size, var(--size-md));
-    border: var(--border-width-sm) solid
-      var(--carousel-control-border-color, color-mix(in oklab, var(--color-border) 88%, black 12%));
-    border-radius: var(--radius-full);
-    background-color: var(--carousel-control-bg, color-mix(in oklab, var(--color-background) 92%, var(--color-card) 8%));
-    box-shadow: var(--carousel-control-shadow, var(--shadow-sm));
-    color: var(--carousel-control-color, var(--color-foreground));
-    cursor: pointer;
-    transition: background-color var(--transition-fast),
-      border-color var(--transition-fast),
-      color var(--transition-fast),
-      box-shadow var(--transition-fast),
-      transform var(--transition-fast);
-    flex: none;
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-
-    & svg {
-      width: var(--carousel-control-icon-size, var(--spacing-4));
-      height: var(--carousel-control-icon-size, var(--spacing-4));
-    }
-
-    &:not(:disabled, [data-disabled]):hover {
-      border-color: var(--carousel-control-border-color-hover, color-mix(in oklab, var(--color-border) 50%, var(--color-foreground) 50%));
-      background-color: var(--carousel-control-bg-hover, var(--color-accent));
-      box-shadow: var(--carousel-control-shadow-hover, var(--shadow-md));
-      color: var(--carousel-control-color-hover, var(--color-accent-foreground));
-    }
-
-    &:focus-visible {
-      outline: var(--carousel-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
-        solid var(--carousel-focus-ring-color, var(--color-ring));
-      outline-offset: var(--carousel-focus-ring-offset, var(--focus-ring-offset));
-    }
-
-    &:is(:disabled, [data-disabled]) {
-      cursor: not-allowed;
-      opacity: var(--opacity-disabled);
-    }
-
-    &[data-pressed] {
-      border-color: var(--carousel-control-border-color-hover, color-mix(in oklab, var(--color-border) 50%, var(--color-foreground) 50%));
-      background-color: var(--carousel-control-bg-hover, var(--color-accent));
-      color: var(--carousel-control-color-hover, var(--color-accent-foreground));
-    }
-  }
-
-  .NQiVeG_defaultIcon {
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-  }
-
-  .NQiVeG_root[data-orientation="vertical"] {
-    & .NQiVeG_defaultIcon {
-      & svg {
-        transform: rotate(90deg);
-      }
-    }
-  }
-
-  .NQiVeG_indicatorGroup {
-    justify-content: center;
-    align-items: center;
-    gap: var(--carousel-indicator-gap, var(--spacing-2));
-    display: flex;
-  }
-
-  .NQiVeG_root[data-orientation="vertical"] > .NQiVeG_indicatorGroup, .NQiVeG_control[data-orientation="vertical"] > .NQiVeG_indicatorGroup {
-    flex-direction: column;
-  }
-
-  .NQiVeG_indicator {
-    width: var(--carousel-indicator-size, var(--spacing-2));
-    height: var(--carousel-indicator-size, var(--spacing-2));
-    border-radius: var(--radius-full);
-    background-color: var(--carousel-indicator-bg, color-mix(in oklab, var(--color-muted) 84%, var(--color-background) 16%));
-    cursor: pointer;
-    opacity: .88;
-    transition: inline-size var(--transition-fast),
-      block-size var(--transition-fast),
-      background-color var(--transition-fast),
-      opacity var(--transition-fast);
-    border: 0;
-    padding: 0;
-
-    &:hover {
-      background-color: var(--carousel-indicator-bg-hover, color-mix(in oklab, var(--color-muted) 56%, var(--color-foreground) 44%));
-    }
-
-    &:focus-visible {
-      outline: var(--carousel-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
-        solid var(--carousel-focus-ring-color, var(--color-ring));
-      outline-offset: var(--carousel-focus-ring-offset, var(--focus-ring-offset));
-    }
-
-    &[data-current] {
-      width: calc(var(--carousel-indicator-size, var(--spacing-2)) * 3);
-      background-color: var(--carousel-indicator-bg-current, var(--color-primary));
-      opacity: 1;
-    }
-
-    &:is(:disabled, [data-disabled], [data-readonly]) {
-      cursor: not-allowed;
-      opacity: var(--opacity-disabled);
-    }
-  }
-
-  .NQiVeG_root[data-orientation="vertical"] > .NQiVeG_indicatorGroup .NQiVeG_indicator, .NQiVeG_control[data-orientation="vertical"] > .NQiVeG_indicatorGroup .NQiVeG_indicator {
-    &[data-current] {
-      width: var(--carousel-indicator-size, var(--spacing-2));
-      height: calc(var(--carousel-indicator-size, var(--spacing-2)) * 3);
-    }
-  }
-
-  .NQiVeG_autoplayTrigger {
-    min-width: var(--carousel-autoplay-trigger-min-width, calc(var(--size-md) + var(--spacing-3)));
-  }
-
-  .NQiVeG_autoplayIndicator {
-    min-width: var(--carousel-autoplay-indicator-min-width, var(--spacing-4));
-    font-size: var(--text-xs);
-    font-weight: var(--weight-medium);
-    line-height: var(--line-height-text-xs);
-    text-transform: uppercase;
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-  }
-
-  .NQiVeG_progressText {
-    color: var(--carousel-progress-text-color, var(--color-muted-foreground));
-    font-size: var(--carousel-progress-text-font-size, var(--text-sm));
-    line-height: var(--line-height-text-sm);
-    font-variant-numeric: tabular-nums;
-  }
-}