@moduix/react 2.2.0 → 2.2.4

package/dist/components/scroll-area/ScrollArea.css

@@ -1,167 +0,0 @@
-@layer moduix.components {
-  .xqtLha_root {
-    box-sizing: border-box;
-    width: var(--moduix-scroll-area-width, 100%);
-    height: var(--moduix-scroll-area-height, 100%);
-    min-width: 0;
-    min-height: 0;
-    color: var(--moduix-scroll-area-color, var(--moduix-color-foreground));
-    position: relative;
-  }
-
-  .xqtLha_viewport {
-    box-sizing: border-box;
-    border-radius: var(--moduix-scroll-area-radius, var(--moduix-radius-md));
-    background-color: var(--moduix-scroll-area-bg, transparent);
-    overscroll-behavior: contain;
-    scrollbar-width: none;
-    --_scroll-area-block-fade-mask: linear-gradient(to bottom,
-      transparent 0,
-      black
-        min(var(--moduix-scroll-area-fade-start-size, var(--moduix-scroll-area-fade-size, var(--moduix-spacing-10))),
-          var(--scroll-area-overflow-y-start, 0px)),
-      black
-        calc(100% -
-            min(var(--moduix-scroll-area-fade-end-size, var(--moduix-scroll-area-fade-size, var(--moduix-spacing-10))),
-              var(--scroll-area-overflow-y-end, 0px))),
-      transparent 100%);
-    outline: 0;
-    width: 100%;
-    min-width: 0;
-    height: 100%;
-    min-height: 0;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    .xqtLha_root[data-fade] & {
-      mask-image: var(--_scroll-area-block-fade-mask);
-      mask-repeat: no-repeat;
-    }
-
-    &:focus-visible {
-      outline: var(--moduix-scroll-area-focus-ring-width, var(--moduix-focus-ring-inset-width, var(--moduix-border-width-sm)))
-        solid var(--moduix-scroll-area-focus-ring-color, var(--moduix-color-ring));
-      outline-offset: var(--moduix-scroll-area-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
-    }
-  }
-
-  .xqtLha_content {
-    box-sizing: border-box;
-    padding: var(--moduix-scroll-area-content-padding, 0);
-    display: block;
-  }
-
-  .xqtLha_scrollbar {
-    --_scroll-area-scrollbar-margin: var(--moduix-scroll-area-scrollbar-margin, var(--moduix-spacing-1));
-    --_scroll-area-scrollbar-hit-area-size: var(--moduix-scroll-area-scrollbar-hit-area-size, var(--moduix-spacing-5));
-    box-sizing: border-box;
-    padding: var(--moduix-scroll-area-scrollbar-padding, 0);
-    border-radius: var(--moduix-scroll-area-scrollbar-radius, var(--moduix-radius-md));
-    background-color: var(--moduix-scroll-area-scrollbar-bg, transparent);
-    opacity: var(--moduix-scroll-area-scrollbar-hidden-opacity, 0);
-    pointer-events: none;
-    user-select: none;
-    touch-action: none;
-    transition: opacity var(--moduix-scroll-area-transition, var(--moduix-transition-default)),
-      width var(--moduix-scroll-area-thumb-hover-transition, var(--moduix-transition-fast)),
-      height var(--moduix-scroll-area-thumb-hover-transition, var(--moduix-transition-fast));
-    justify-content: center;
-    display: flex;
-    position: absolute;
-
-    &:before {
-      content: "";
-      position: absolute;
-    }
-
-    &[data-orientation="vertical"] {
-      top: 0;
-      inset-inline-end: 0;
-      bottom: var(--corner-height, 0px);
-      width: var(--moduix-scroll-area-scrollbar-size, var(--moduix-spacing-1));
-      margin-block: var(--_scroll-area-scrollbar-margin);
-      margin-inline-end: var(--_scroll-area-scrollbar-margin);
-
-      &:before {
-        width: var(--_scroll-area-scrollbar-hit-area-size);
-        height: 100%;
-        left: 50%;
-        transform: translateX(-50%);
-      }
-
-      &:not([data-overflow-y]) {
-        display: none;
-      }
-
-      &:hover, &[data-dragging] {
-        width: calc(var(--moduix-scroll-area-scrollbar-size, var(--moduix-spacing-1)) +
-            var(--moduix-scroll-area-thumb-hover-increase, 2px));
-      }
-    }
-
-    &[data-orientation="horizontal"] {
-      inset-inline-start: 0;
-      inset-inline-end: var(--corner-width, 0px);
-      height: var(--moduix-scroll-area-scrollbar-size, var(--moduix-spacing-1));
-      margin-inline: var(--_scroll-area-scrollbar-margin);
-      flex-direction: column;
-      margin-block-end: var(--_scroll-area-scrollbar-margin);
-      bottom: 0;
-
-      &:before {
-        width: 100%;
-        height: var(--_scroll-area-scrollbar-hit-area-size);
-        bottom: 50%;
-        left: 0;
-        right: 0;
-        transform: translateY(50%);
-      }
-
-      &:not([data-overflow-x]) {
-        display: none;
-      }
-
-      &:hover, &[data-dragging] {
-        height: calc(var(--moduix-scroll-area-scrollbar-size, var(--moduix-spacing-1)) +
-            var(--moduix-scroll-area-thumb-hover-increase, 2px));
-      }
-    }
-
-    &[data-hover], &[data-scrolling] {
-      opacity: var(--moduix-scroll-area-scrollbar-visible-opacity, 1);
-      pointer-events: auto;
-    }
-
-    &[data-scrolling] {
-      transition-duration: 0s;
-    }
-
-    .xqtLha_root[data-variant="always"] & {
-      opacity: var(--moduix-scroll-area-scrollbar-visible-opacity, 1);
-      pointer-events: auto;
-    }
-  }
-
-  .xqtLha_thumb {
-    box-sizing: border-box;
-    border-radius: var(--moduix-scroll-area-thumb-radius, var(--moduix-radius-full));
-    background-color: var(--moduix-scroll-area-thumb-bg, var(--moduix-color-border));
-
-    &[data-orientation="vertical"] {
-      width: 100%;
-      min-height: var(--moduix-scroll-area-thumb-min-size, var(--moduix-size-xs));
-    }
-
-    &[data-orientation="horizontal"] {
-      height: 100%;
-      min-width: var(--moduix-scroll-area-thumb-min-size, var(--moduix-size-xs));
-    }
-  }
-
-  .xqtLha_corner {
-    box-sizing: border-box;
-    background-color: var(--moduix-scroll-area-corner-bg, var(--moduix-scroll-area-scrollbar-bg, transparent));
-  }
-}

package/dist/components/separator/Separator.css

@@ -1,45 +0,0 @@
-@layer moduix.components {
-  .Jd5mwa_root {
-    border: 0;
-    border-color: var(--moduix-separator-color, var(--moduix-color-border));
-    border-style: var(--moduix-separator-border-style, var(--moduix-separator-variant-border-style, solid));
-    flex-shrink: 0;
-    display: block;
-
-    &[data-size="xs"] {
-      --moduix-separator-size-thickness: var(--moduix-separator-thickness-xs, .5px);
-    }
-
-    &[data-size="sm"] {
-      --moduix-separator-size-thickness: var(--moduix-separator-thickness-sm, var(--moduix-border-width-sm));
-    }
-
-    &[data-size="md"] {
-      --moduix-separator-size-thickness: var(--moduix-separator-thickness-md, var(--moduix-border-width-md));
-    }
-
-    &[data-size="lg"] {
-      --moduix-separator-size-thickness: var(--moduix-separator-thickness-lg, 3px);
-    }
-
-    &[data-variant="dashed"] {
-      --moduix-separator-variant-border-style: dashed;
-    }
-
-    &[data-variant="dotted"] {
-      --moduix-separator-variant-border-style: dotted;
-    }
-
-    &[data-orientation="horizontal"] {
-      width: var(--moduix-separator-length-horizontal, 100%);
-      border-block-start-width: var(--moduix-separator-thickness, var(--moduix-separator-size-thickness, var(--moduix-border-width-sm)));
-      height: 0;
-    }
-
-    &[data-orientation="vertical"] {
-      width: 0;
-      height: var(--moduix-separator-length-vertical, 1em);
-      border-inline-start-width: var(--moduix-separator-thickness, var(--moduix-separator-size-thickness, var(--moduix-border-width-sm)));
-    }
-  }
-}

package/dist/components/skeleton/Skeleton.css

@@ -1,31 +0,0 @@
-@layer moduix.components {
-  .ahClzq_root {
-    border-radius: var(--moduix-skeleton-border-radius, var(--moduix-radius-md));
-    width: 100%;
-    display: block;
-    overflow: hidden;
-
-    &[data-state="loading"] {
-      height: var(--moduix-skeleton-height, var(--moduix-spacing-4));
-      animation: var(--moduix-skeleton-animation, var(--moduix-animation-pulse));
-      background: var(--moduix-skeleton-bg, color-mix(in oklab,
-          var(--moduix-color-muted-foreground) 18%,
-          var(--moduix-color-background)));
-      color: #0000;
-      pointer-events: none;
-      user-select: none;
-
-      & > * {
-        visibility: hidden;
-      }
-
-      &[data-variant="none"] {
-        animation: none;
-      }
-
-      @media (prefers-reduced-motion: reduce) {
-        animation: none;
-      }
-    }
-  }
-}

package/dist/components/swap/Swap.css

@@ -1,45 +0,0 @@
-@layer moduix.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(--moduix-swap-transition, var(--moduix-transition-default));
-    }
-
-    &[data-state="closed"] {
-      animation: jqWswG_swap-exit var(--moduix-swap-transition, var(--moduix-transition-default));
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .jqWswG_indicator[data-state] {
-      animation-duration: 1ms;
-      animation-delay: 0s;
-    }
-  }
-
-  @keyframes jqWswG_swap-enter {
-    from {
-      opacity: var(--moduix-swap-enter-starting-opacity, 0);
-      transform: scale(var(--moduix-swap-enter-starting-scale, .92));
-    }
-  }
-
-  @keyframes jqWswG_swap-exit {
-    to {
-      opacity: var(--moduix-swap-exit-ending-opacity, 0);
-      transform: scale(var(--moduix-swap-exit-ending-scale, .92));
-    }
-  }
-}

package/dist/components/text/Text.css

@@ -1,87 +0,0 @@
-@layer moduix.components {
-  .j--K1a_root {
-    font-family: var(--moduix-text-font-family, inherit);
-    font-size: var(--moduix-text-font-size-md, var(--moduix-text-md));
-    font-weight: var(--moduix-text-font-weight-regular, var(--moduix-weight-regular));
-    line-height: var(--moduix-text-line-height-md, var(--moduix-line-height-text-md));
-    letter-spacing: var(--moduix-text-letter-spacing, 0);
-    color: var(--moduix-text-default-color, var(--moduix-color-foreground));
-    text-align: start;
-    overflow-wrap: break-word;
-    margin: 0;
-
-    &[data-size="xs"] {
-      font-size: var(--moduix-text-font-size-xs, var(--moduix-text-xs));
-      line-height: var(--moduix-text-line-height-xs, var(--moduix-line-height-text-xs));
-    }
-
-    &[data-size="sm"] {
-      font-size: var(--moduix-text-font-size-sm, var(--moduix-text-sm));
-      line-height: var(--moduix-text-line-height-sm, var(--moduix-line-height-text-sm));
-    }
-
-    &[data-size="lg"] {
-      font-size: var(--moduix-text-font-size-lg, var(--moduix-text-lg));
-      line-height: var(--moduix-text-line-height-lg, var(--moduix-line-height-text-lg));
-    }
-
-    &[data-size="xl"] {
-      font-size: var(--moduix-text-font-size-xl, var(--moduix-text-xl));
-      line-height: var(--moduix-text-line-height-xl, var(--moduix-line-height-text-xl));
-    }
-
-    &[data-weight="medium"] {
-      font-weight: var(--moduix-text-font-weight-medium, var(--moduix-weight-medium));
-    }
-
-    &[data-weight="semibold"] {
-      font-weight: var(--moduix-text-font-weight-semibold, var(--moduix-weight-semibold));
-    }
-
-    &[data-weight="bold"] {
-      font-weight: var(--moduix-text-font-weight-bold, var(--moduix-weight-bold));
-    }
-
-    &[data-tone="muted"] {
-      color: var(--moduix-text-muted-color, var(--moduix-color-muted-foreground));
-    }
-
-    &[data-tone="subtle"] {
-      color: var(--moduix-text-subtle-color, var(--moduix-color-secondary-foreground));
-    }
-
-    &[data-tone="primary"] {
-      color: var(--moduix-text-primary-color, var(--moduix-color-primary));
-    }
-
-    &[data-tone="destructive"] {
-      color: var(--moduix-text-destructive-color, var(--moduix-color-destructive));
-    }
-
-    &[data-align="left"] {
-      text-align: left;
-    }
-
-    &[data-align="center"] {
-      text-align: center;
-    }
-
-    &[data-align="right"] {
-      text-align: right;
-    }
-
-    &[data-truncate] {
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    }
-
-    &[data-line-clamp] {
-      white-space: normal;
-      -webkit-line-clamp: var(--moduix-text-line-clamp);
-      -webkit-box-orient: vertical;
-      display: -webkit-box;
-      overflow: hidden;
-    }
-  }
-}

package/dist/components/toggle/Toggle.css

@@ -1,167 +0,0 @@
-@layer moduix.components {
-  .aGZbbW_root {
-    box-sizing: border-box;
-    justify-content: center;
-    align-items: center;
-    gap: var(--moduix-toggle-content-gap, var(--moduix-spacing-2));
-    min-height: var(--moduix-toggle-size-md, var(--moduix-size-md));
-    border-style: solid;
-    border-width: var(--moduix-toggle-border-width, var(--moduix-border-width-sm));
-    border-radius: var(--moduix-toggle-radius, var(--moduix-radius-md));
-    padding-block: var(--moduix-toggle-padding-y-md, var(--moduix-spacing-1));
-    padding-inline: var(--moduix-toggle-padding-x-md, var(--moduix-spacing-4));
-    color: var(--moduix-toggle-color, var(--moduix-color-foreground));
-    appearance: none;
-    font: inherit;
-    font-size: var(--moduix-toggle-font-size, var(--moduix-text-sm));
-    font-weight: var(--moduix-toggle-font-weight, var(--moduix-weight-medium));
-    line-height: var(--moduix-toggle-line-height, var(--moduix-line-height-text-sm));
-    user-select: none;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: background-color var(--moduix-toggle-transition, var(--moduix-transition-default)),
-      border-color var(--moduix-toggle-transition, var(--moduix-transition-default)),
-      color var(--moduix-toggle-transition, var(--moduix-transition-default)),
-      opacity var(--moduix-toggle-transition, var(--moduix-transition-default));
-    background-color: #0000;
-    border-color: #0000;
-    margin: 0;
-    display: inline-flex;
-
-    &:focus-visible {
-      outline: var(--moduix-toggle-focus-ring-width, var(--moduix-focus-ring-width, var(--moduix-border-width-md)))
-        solid var(--moduix-toggle-focus-ring-color, var(--moduix-color-ring));
-      outline-offset: var(--moduix-toggle-focus-ring-offset, var(--moduix-focus-ring-inset-offset));
-    }
-
-    &[data-disabled] {
-      opacity: var(--moduix-toggle-disabled-opacity, var(--moduix-opacity-disabled));
-      cursor: default;
-      pointer-events: none;
-    }
-
-    & :where(svg) {
-      width: var(--moduix-toggle-icon-size, var(--moduix-spacing-4));
-      height: var(--moduix-toggle-icon-size, var(--moduix-spacing-4));
-      flex-shrink: 0;
-      display: block;
-    }
-
-    &[data-variant="default"] {
-      border-color: var(--moduix-toggle-default-border-color, var(--moduix-color-secondary));
-      background-color: var(--moduix-toggle-default-bg, var(--moduix-color-secondary));
-      color: var(--moduix-toggle-default-color, var(--moduix-toggle-color, var(--moduix-color-secondary-foreground)));
-
-      @media (hover: hover) {
-        &[data-state="off"]:not([data-disabled]):hover {
-          background-color: var(--moduix-toggle-default-bg-hover, var(--moduix-color-accent));
-        }
-      }
-
-      &[data-state="off"]:not([data-disabled]):active {
-        background-color: var(--moduix-toggle-default-bg-active, var(--moduix-color-accent));
-      }
-
-      &[data-state="on"] {
-        border-color: var(--moduix-toggle-default-border-color-pressed, var(--moduix-color-primary));
-        background-color: var(--moduix-toggle-default-bg-pressed, var(--moduix-color-primary));
-        color: var(--moduix-toggle-default-color-pressed, var(--moduix-color-primary-foreground));
-      }
-    }
-
-    &[data-variant="outline"] {
-      border-color: var(--moduix-toggle-outline-border-color, var(--moduix-color-border));
-      background-color: var(--moduix-toggle-outline-bg, var(--moduix-color-background));
-      color: var(--moduix-toggle-outline-color, var(--moduix-toggle-color, var(--moduix-color-foreground)));
-
-      @media (hover: hover) {
-        &[data-state="off"]:not([data-disabled]):hover {
-          background-color: var(--moduix-toggle-outline-bg-hover, var(--moduix-color-accent));
-        }
-      }
-
-      &[data-state="off"]:not([data-disabled]):active {
-        background-color: var(--moduix-toggle-outline-bg-active, var(--moduix-color-accent));
-      }
-
-      &[data-state="on"] {
-        border-color: var(--moduix-toggle-outline-border-color-pressed, var(--moduix-color-primary));
-        background-color: var(--moduix-toggle-outline-bg-pressed, var(--moduix-color-primary));
-        color: var(--moduix-toggle-outline-color-pressed, var(--moduix-color-primary-foreground));
-      }
-    }
-
-    &[data-variant="ghost"] {
-      border-color: var(--moduix-toggle-ghost-border-color, transparent);
-      background-color: var(--moduix-toggle-ghost-bg, transparent);
-      color: var(--moduix-toggle-ghost-color, var(--moduix-toggle-color, var(--moduix-color-foreground)));
-
-      @media (hover: hover) {
-        &[data-state="off"]:not([data-disabled]):hover {
-          background-color: var(--moduix-toggle-ghost-bg-hover, var(--moduix-color-accent));
-        }
-      }
-
-      &[data-state="off"]:not([data-disabled]):active {
-        background-color: var(--moduix-toggle-ghost-bg-active, var(--moduix-color-accent));
-      }
-
-      &[data-state="on"] {
-        background-color: var(--moduix-toggle-ghost-bg-pressed, var(--moduix-color-accent));
-        color: var(--moduix-toggle-ghost-color-pressed, var(--moduix-color-foreground));
-      }
-    }
-
-    &[data-size="xs"] {
-      min-height: var(--moduix-toggle-size-xs, var(--moduix-size-xs));
-      padding-block: var(--moduix-toggle-padding-y-xs, var(--moduix-spacing-0-5));
-      padding-inline: var(--moduix-toggle-padding-x-xs, var(--moduix-spacing-2-5));
-      font-size: var(--moduix-toggle-font-size-xs, var(--moduix-text-xs));
-      line-height: var(--moduix-toggle-line-height-xs, var(--moduix-line-height-text-xs));
-    }
-
-    &[data-size="sm"] {
-      min-height: var(--moduix-toggle-size-sm, var(--moduix-size-sm));
-      padding-block: var(--moduix-toggle-padding-y-sm, var(--moduix-spacing-1));
-      padding-inline: var(--moduix-toggle-padding-x-sm, var(--moduix-spacing-3));
-    }
-
-    &[data-size="lg"] {
-      min-height: var(--moduix-toggle-size-lg, var(--moduix-size-lg));
-      padding-block: var(--moduix-toggle-padding-y-lg, var(--moduix-spacing-1-5));
-      padding-inline: var(--moduix-toggle-padding-x-lg, var(--moduix-spacing-5));
-      font-size: var(--moduix-toggle-font-size-lg, var(--moduix-text-md));
-      line-height: var(--moduix-toggle-line-height-lg, var(--moduix-line-height-text-md));
-    }
-
-    &[data-size="icon-sm"], &[data-size="icon-md"], &[data-size="icon-lg"] {
-      gap: 0;
-      padding: 0;
-    }
-
-    &[data-size="icon-sm"] {
-      width: var(--moduix-toggle-size-icon-sm, var(--moduix-size-sm));
-      min-width: var(--moduix-toggle-size-icon-sm, var(--moduix-size-sm));
-      height: var(--moduix-toggle-size-icon-sm, var(--moduix-size-sm));
-    }
-
-    &[data-size="icon-md"] {
-      width: var(--moduix-toggle-size-icon-md, var(--moduix-size-md));
-      min-width: var(--moduix-toggle-size-icon-md, var(--moduix-size-md));
-      height: var(--moduix-toggle-size-icon-md, var(--moduix-size-md));
-    }
-
-    &[data-size="icon-lg"] {
-      width: var(--moduix-toggle-size-icon-lg, var(--moduix-size-lg));
-      min-width: var(--moduix-toggle-size-icon-lg, var(--moduix-size-lg));
-      height: var(--moduix-toggle-size-icon-lg, var(--moduix-size-lg));
-    }
-  }
-
-  .aGZbbW_indicator {
-    color: inherit;
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-  }
-}