@moduix/react 2.1.0 → 2.2.4

package/dist/components/tour/Tour.css

@@ -1,291 +0,0 @@
-@layer ui.components {
-  ._5wc7ja_backdrop {
-    z-index: calc(var(--tour-z-index, var(--z-modal)) + var(--layer-index, 0));
-    background-color: var(--tour-backdrop-bg, var(--backdrop-bg, var(--color-overlay)));
-    backdrop-filter: var(--backdrop-filter, blur(var(--tour-backdrop-blur, 4px)));
-
-    &[data-state="open"] {
-      animation: _5wc7ja_tour-backdrop-in var(--tour-backdrop-transition, var(--transition-default));
-    }
-
-    &[data-state="closed"] {
-      animation: _5wc7ja_tour-backdrop-out var(--tour-backdrop-transition, var(--transition-default));
-    }
-  }
-
-  ._5wc7ja_spotlight {
-    z-index: calc(var(--tour-z-index, var(--z-modal)) + var(--tour-layer, 0));
-    box-shadow: var(--tour-spotlight-shadow, 0 0 0 var(--tour-spotlight-ring-width, 2px) var(--color-ring));
-  }
-
-  ._5wc7ja_positioner {
-    z-index: var(--z-index, var(--tour-z-index, var(--z-modal)));
-    max-width: var(--available-width);
-    max-height: var(--available-height);
-    outline: 0;
-
-    &[data-type="dialog"] {
-      overscroll-behavior: contain;
-      padding: var(--tour-positioner-padding, var(--spacing-4));
-      place-items: center;
-      display: grid;
-      position: fixed;
-      inset: 0;
-      overflow-y: auto;
-    }
-
-    &[data-type="floating"] {
-      z-index: var(--tour-z-index, var(--z-modal));
-      margin: var(--tour-floating-offset, var(--spacing-6));
-      position: fixed;
-
-      &[data-placement*="top"] {
-        inset-block-start: 0;
-      }
-
-      &[data-placement*="bottom"] {
-        inset-block-end: 0;
-      }
-
-      &[data-placement*="start"] {
-        inset-inline-start: 0;
-      }
-
-      &[data-placement*="end"] {
-        inset-inline-end: 0;
-      }
-    }
-  }
-
-  ._5wc7ja_content {
-    --arrow-background: var(--tour-arrow-background, var(--tour-bg, var(--color-popover)));
-    --arrow-size: var(--tour-arrow-size, var(--spacing-2-5));
-    box-sizing: border-box;
-    z-index: calc(var(--tour-z-index, var(--z-modal)) + var(--layer-index, 0));
-    gap: var(--tour-gap, var(--spacing-1));
-    width: min(var(--tour-width, 20rem), var(--available-width, 100vw));
-    max-width: min(var(--tour-max-width, calc(100vw - var(--spacing-8))),
-      var(--available-width, 100vw));
-    max-height: min(var(--tour-max-height, 24rem), var(--available-height, 100dvh));
-    padding: var(--tour-padding, var(--spacing-5));
-    border: var(--tour-border-width, var(--border-width-sm)) solid
-      var(--tour-border-color, var(--color-border));
-    border-radius: var(--tour-radius, var(--radius-lg));
-    background-color: var(--tour-bg, var(--color-popover));
-    color: var(--tour-color, var(--color-popover-foreground));
-    box-shadow: var(--tour-shadow, var(--shadow-lg));
-    transform-origin: var(--transform-origin);
-    outline: 0;
-    flex-direction: column;
-    display: flex;
-    position: relative;
-    overflow: visible;
-
-    &[data-state="open"] {
-      animation: _5wc7ja_tour-content-in
-        var(--tour-transition, var(--popup-motion-duration, var(--duration-normal))
-            var(--popup-motion-easing, var(--ease-in-out)))
-        both;
-    }
-
-    &[data-state="closed"] {
-      animation: _5wc7ja_tour-content-out
-        var(--tour-transition, var(--popup-motion-duration, var(--duration-normal))
-            var(--popup-motion-easing, var(--ease-in-out)))
-        both;
-    }
-
-    &[data-type="dialog"] {
-      width: min(var(--tour-dialog-width, 26rem),
-        var(--tour-max-width, calc(100vw - var(--spacing-8))));
-    }
-
-    &[data-type="floating"] {
-      width: min(var(--tour-floating-width, 22rem),
-        var(--tour-max-width, calc(100vw - var(--spacing-8))));
-    }
-  }
-
-  ._5wc7ja_arrow {
-    --arrow-background: var(--tour-arrow-background, var(--tour-bg, var(--color-popover)));
-    --arrow-size: var(--tour-arrow-size, var(--spacing-2-5));
-  }
-
-  ._5wc7ja_arrowTip {
-    border-top: var(--tour-border-width, var(--border-width-sm)) solid
-      var(--tour-arrow-stroke-color, var(--tour-border-color, var(--color-border)));
-    border-left: var(--tour-border-width, var(--border-width-sm)) solid
-      var(--tour-arrow-stroke-color, var(--tour-border-color, var(--color-border)));
-  }
-
-  ._5wc7ja_title {
-    margin: var(--tour-title-margin, 0);
-    color: var(--tour-title-color, var(--tour-color, var(--color-popover-foreground)));
-    font-size: var(--tour-title-font-size, var(--text-md));
-    font-weight: var(--tour-title-font-weight, var(--weight-semibold));
-    line-height: var(--tour-title-line-height, var(--line-height-text-md));
-    padding-inline-end: var(--tour-title-padding-inline-end, var(--spacing-6));
-  }
-
-  ._5wc7ja_description {
-    margin: var(--tour-description-margin, 0);
-    color: var(--tour-description-color, var(--color-muted-foreground));
-    font-size: var(--tour-description-font-size, var(--text-sm));
-    line-height: var(--tour-description-line-height, var(--line-height-text-sm));
-  }
-
-  ._5wc7ja_progressText {
-    margin-top: var(--tour-progress-text-margin-top, var(--spacing-2));
-    color: var(--tour-progress-text-color, var(--color-muted-foreground));
-    font-size: var(--tour-progress-text-font-size, var(--text-xs));
-    line-height: var(--tour-progress-text-line-height, var(--line-height-text-xs));
-    order: 1;
-  }
-
-  ._5wc7ja_closeTrigger {
-    box-sizing: border-box;
-    width: var(--tour-close-trigger-size, var(--spacing-7));
-    height: var(--tour-close-trigger-size, var(--spacing-7));
-    border-radius: var(--tour-close-trigger-radius, var(--radius-md));
-    background: var(--tour-close-trigger-bg, transparent);
-    color: var(--tour-close-trigger-color, var(--color-muted-foreground));
-    font: inherit;
-    cursor: pointer;
-    border: 0;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-    line-height: 1;
-    display: inline-flex;
-    position: absolute;
-    inset-block-start: var(--tour-close-trigger-offset, var(--spacing-4));
-    inset-inline-end: var(--tour-close-trigger-offset, var(--spacing-4));
-
-    & :where(svg) {
-      width: var(--tour-close-trigger-icon-size, var(--spacing-3));
-      height: var(--tour-close-trigger-icon-size, var(--spacing-3));
-    }
-
-    @media (hover: hover) {
-      &:hover {
-        background: var(--tour-close-trigger-bg-hover, var(--color-accent));
-        color: var(--tour-close-trigger-color-hover, var(--tour-color, var(--color-popover-foreground)));
-      }
-    }
-
-    &:focus-visible {
-      outline: var(--tour-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
-        solid var(--tour-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--tour-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) * -1);
-    }
-  }
-
-  ._5wc7ja_closeIcon {
-    --close-button-size: var(--tour-close-trigger-size, var(--spacing-7));
-    --close-button-radius: var(--tour-close-trigger-radius, var(--radius-md));
-    --close-button-icon-size: var(--tour-close-trigger-icon-size, var(--spacing-3));
-    --close-button-bg: var(--tour-close-trigger-bg, transparent);
-    --close-button-bg-hover: var(--tour-close-trigger-bg-hover, var(--color-accent));
-    --close-button-color: var(--tour-close-trigger-color, var(--color-muted-foreground));
-    --close-button-color-hover: var(--tour-close-trigger-color-hover, var(--tour-color, var(--color-popover-foreground)));
-    --close-button-focus-ring-color: var(--tour-focus-ring-color, var(--color-ring));
-    position: absolute;
-    inset-block-start: var(--tour-close-trigger-offset, var(--spacing-4));
-    inset-inline-end: var(--tour-close-trigger-offset, var(--spacing-4));
-  }
-
-  ._5wc7ja_control {
-    justify-content: flex-end;
-    gap: var(--tour-control-gap, var(--spacing-2));
-    margin-top: var(--tour-control-margin-top, var(--spacing-3));
-    flex-wrap: wrap;
-    order: 2;
-    display: flex;
-  }
-
-  ._5wc7ja_actionTrigger {
-    box-sizing: border-box;
-    min-height: var(--tour-action-height, var(--size-sm));
-    justify-content: center;
-    align-items: center;
-    gap: var(--tour-action-gap, var(--spacing-2));
-    padding-block: var(--tour-action-padding-y, var(--spacing-1-5));
-    padding-inline: var(--tour-action-padding-x, var(--spacing-3));
-    border: var(--tour-action-border-width, var(--border-width-sm)) solid
-      var(--tour-action-border-color, var(--color-border));
-    border-radius: var(--tour-action-radius, var(--radius-md));
-    background: var(--tour-action-bg, var(--color-background));
-    color: var(--tour-action-color, var(--color-foreground));
-    font: inherit;
-    font-size: var(--tour-action-font-size, var(--text-sm));
-    font-weight: var(--tour-action-font-weight, var(--weight-medium));
-    line-height: var(--tour-action-line-height, var(--line-height-text-sm));
-    white-space: nowrap;
-    cursor: pointer;
-    transition: background-color var(--tour-action-transition, var(--transition-default)),
-      border-color var(--tour-action-transition, var(--transition-default)),
-      color var(--tour-action-transition, var(--transition-default));
-    text-decoration: none;
-    display: inline-flex;
-
-    &[data-type="next"], &[data-type="close"] {
-      border-color: var(--tour-action-primary-border-color, var(--color-primary));
-      background: var(--tour-action-primary-bg, var(--color-primary));
-      color: var(--tour-action-primary-color, var(--color-primary-foreground));
-    }
-
-    @media (hover: hover) {
-      &:hover:not([data-disabled], :disabled) {
-        background: var(--tour-action-bg-hover, var(--color-accent));
-      }
-
-      &:is([data-type="next"], [data-type="close"]):hover:not([data-disabled], :disabled) {
-        border-color: var(--tour-action-primary-border-color-hover, color-mix(in oklab, var(--color-primary), black 12%));
-        background: var(--tour-action-primary-bg-hover, color-mix(in oklab, var(--color-primary), black 12%));
-      }
-    }
-
-    &:focus-visible {
-      outline: var(--tour-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
-        solid var(--tour-focus-ring-color, var(--color-ring));
-      outline-offset: calc(var(--tour-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) * -1);
-    }
-
-    &[data-disabled], &:disabled {
-      pointer-events: none;
-      opacity: var(--tour-disabled-opacity, var(--opacity-disabled));
-    }
-  }
-
-  @keyframes _5wc7ja_tour-backdrop-in {
-    from {
-      opacity: var(--tour-backdrop-starting-opacity, 0);
-      backdrop-filter: var(--tour-backdrop-starting-blur, none);
-    }
-  }
-
-  @keyframes _5wc7ja_tour-backdrop-out {
-    to {
-      opacity: var(--tour-backdrop-ending-opacity, 0);
-      backdrop-filter: var(--tour-backdrop-ending-blur, none);
-    }
-  }
-
-  @keyframes _5wc7ja_tour-content-in {
-    from {
-      opacity: var(--tour-content-starting-opacity, var(--popup-motion-starting-opacity, 0));
-      translate: var(--tour-content-starting-translate-x, var(--popup-motion-starting-translate-x, 0))
-        var(--tour-content-starting-translate-y, var(--popup-motion-starting-translate-y, 0));
-      scale: var(--tour-content-starting-scale, var(--popup-motion-starting-scale, var(--scale-popup)));
-    }
-  }
-
-  @keyframes _5wc7ja_tour-content-out {
-    to {
-      opacity: var(--tour-content-ending-opacity, var(--popup-motion-ending-opacity, 0));
-      translate: var(--tour-content-ending-translate-x, var(--popup-motion-ending-translate-x, 0))
-        var(--tour-content-ending-translate-y, var(--popup-motion-ending-translate-y, 0));
-      scale: var(--tour-content-ending-scale, var(--popup-motion-ending-scale, var(--scale-popup)));
-    }
-  }
-}

package/dist/components/tree-view/TreeView.css

@@ -1,264 +0,0 @@
-@layer ui.components {
-  .-ZBX5W_root {
-    box-sizing: border-box;
-    width: var(--tree-view-width, 20rem);
-    max-width: var(--tree-view-max-width, 100%);
-    gap: var(--tree-view-root-gap, var(--spacing-2));
-    min-width: 0;
-    color: var(--tree-view-color, var(--color-foreground));
-    flex-direction: column;
-    display: flex;
-
-    &[data-disabled] {
-      opacity: var(--tree-view-disabled-opacity, var(--opacity-disabled));
-    }
-  }
-
-  .-ZBX5W_label {
-    color: var(--tree-view-label-color, var(--tree-view-color, var(--color-foreground)));
-    font-size: var(--tree-view-label-font-size, var(--text-sm));
-    font-weight: var(--tree-view-label-font-weight, var(--weight-medium));
-    line-height: var(--tree-view-label-line-height, var(--line-height-text-sm));
-    user-select: none;
-  }
-
-  .-ZBX5W_tree {
-    min-width: 0;
-    color: var(--tree-view-color, var(--color-foreground));
-    font-size: var(--tree-view-item-font-size, var(--text-sm));
-    line-height: var(--tree-view-item-line-height, var(--line-height-text-sm));
-    flex-direction: column;
-    display: flex;
-  }
-
-  .-ZBX5W_branch {
-    min-width: 0;
-    position: relative;
-  }
-
-  .-ZBX5W_branchControl, .-ZBX5W_item {
-    box-sizing: border-box;
-    width: 100%;
-    min-width: 0;
-    min-height: var(--tree-view-item-min-height, var(--size-sm));
-    align-items: center;
-    gap: var(--tree-view-item-gap, var(--spacing-2));
-    border: var(--tree-view-item-border-width, 0) solid
-      var(--tree-view-item-border-color, transparent);
-    border-radius: var(--tree-view-item-radius, var(--radius-sm));
-    padding-block: var(--tree-view-item-padding-y, var(--spacing-1));
-    background-color: var(--tree-view-item-bg, transparent);
-    color: var(--tree-view-item-color, var(--tree-view-color, var(--color-foreground)));
-    cursor: pointer;
-    font: inherit;
-    outline: var(--tree-view-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
-      solid transparent;
-    outline-offset: calc(var(--tree-view-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) * -1);
-    text-align: start;
-    transition: background-color var(--tree-view-transition, var(--transition-default)),
-      color var(--tree-view-transition, var(--transition-default)),
-      outline-color var(--tree-view-transition, var(--transition-default)),
-      opacity var(--tree-view-transition, var(--transition-default));
-    user-select: none;
-    padding-inline-start: calc(var(--tree-view-item-padding-x, var(--spacing-2)) +
-        ((var(--depth, 1) - 1) * var(--tree-view-indent, 1rem)));
-    padding-inline-end: var(--tree-view-item-padding-x, var(--spacing-2));
-    text-decoration: none;
-    display: flex;
-
-    &:hover {
-      background-color: var(--tree-view-item-hover-bg, var(--color-accent));
-      color: var(--tree-view-item-hover-color, var(--color-accent-foreground));
-    }
-
-    &:focus-visible, &[data-focus] {
-      outline-color: var(--tree-view-focus-ring-color, var(--color-ring));
-    }
-
-    &[data-selected] {
-      background-color: var(--tree-view-item-selected-bg, var(--color-accent));
-      color: var(--tree-view-item-selected-color, var(--color-accent-foreground));
-    }
-
-    &[data-disabled] {
-      color: var(--tree-view-item-disabled-color, var(--color-muted-foreground));
-      cursor: default;
-      opacity: var(--tree-view-disabled-opacity, var(--opacity-disabled));
-    }
-  }
-
-  .-ZBX5W_branchTrigger, .-ZBX5W_branchIndicator, .-ZBX5W_itemIndicator {
-    width: var(--tree-view-indicator-size, var(--spacing-4));
-    height: var(--tree-view-indicator-size, var(--spacing-4));
-    flex: 0 0 var(--tree-view-indicator-size, var(--spacing-4));
-    color: var(--tree-view-indicator-color, currentColor);
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-
-    & svg {
-      width: var(--tree-view-indicator-icon-size, var(--spacing-3-5));
-      height: var(--tree-view-indicator-icon-size, var(--spacing-3-5));
-    }
-  }
-
-  .-ZBX5W_branchTrigger, .-ZBX5W_branchIndicator {
-    transition: transform var(--tree-view-transition, var(--transition-default));
-
-    &[data-state="open"] {
-      transform: rotate(90deg);
-    }
-  }
-
-  .-ZBX5W_branchText, .-ZBX5W_itemText {
-    align-items: center;
-    gap: var(--tree-view-item-text-gap, var(--spacing-2));
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1;
-    min-width: 0;
-    display: inline-flex;
-    overflow: hidden;
-
-    & svg {
-      width: var(--tree-view-node-icon-size, var(--spacing-4));
-      height: var(--tree-view-node-icon-size, var(--spacing-4));
-      flex: 0 0 var(--tree-view-node-icon-size, var(--spacing-4));
-    }
-  }
-
-  .-ZBX5W_branchContent {
-    min-width: 0;
-    position: relative;
-    overflow: hidden;
-
-    &[data-state="open"] {
-      animation: -ZBX5W_tree-view-slide-down var(--tree-view-content-transition-duration, .15s) ease-out,
-        -ZBX5W_tree-view-fade-in var(--tree-view-content-transition-duration, .15s) ease-out;
-    }
-
-    &[data-state="closed"] {
-      animation: -ZBX5W_tree-view-slide-up var(--tree-view-content-transition-duration, .15s) ease-out,
-        -ZBX5W_tree-view-fade-out var(--tree-view-content-transition-duration, .15s) ease-out;
-    }
-  }
-
-  .-ZBX5W_branchIndentGuide {
-    z-index: 1;
-    width: var(--tree-view-indent-guide-width, var(--border-width-sm));
-    background-color: var(--tree-view-indent-guide-color, var(--color-border));
-    top: 0;
-    bottom: 0;
-    position: absolute;
-    inset-inline-start: calc(var(--tree-view-item-padding-x, var(--spacing-2)) +
-        ((var(--depth, 1) - 1) * var(--tree-view-indent, 1rem)) +
-        (var(--tree-view-indicator-size, var(--spacing-4)) / 2));
-  }
-
-  .-ZBX5W_nodeCheckbox {
-    box-sizing: border-box;
-    width: var(--tree-view-checkbox-size, var(--spacing-4));
-    height: var(--tree-view-checkbox-size, var(--spacing-4));
-    flex: 0 0 var(--tree-view-checkbox-size, var(--spacing-4));
-    border: var(--tree-view-checkbox-border-width, var(--border-width-sm)) solid
-      var(--tree-view-checkbox-border-color, var(--color-border));
-    border-radius: var(--tree-view-checkbox-radius, var(--radius-xs));
-    background-color: var(--tree-view-checkbox-bg, var(--color-background));
-    color: var(--tree-view-checkbox-color, var(--color-primary-foreground));
-    outline: var(--tree-view-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
-      solid transparent;
-    outline-offset: var(--tree-view-checkbox-focus-ring-offset, var(--border-width-sm));
-    transition: background-color var(--tree-view-transition, var(--transition-default)),
-      border-color var(--tree-view-transition, var(--transition-default)),
-      outline-color var(--tree-view-transition, var(--transition-default));
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-
-    &[data-state="checked"], &[data-state="indeterminate"] {
-      border-color: var(--tree-view-checkbox-checked-bg, var(--color-primary));
-      background-color: var(--tree-view-checkbox-checked-bg, var(--color-primary));
-    }
-
-    &:focus-visible {
-      outline-color: var(--tree-view-focus-ring-color, var(--color-ring));
-    }
-
-    &[data-disabled] {
-      cursor: default;
-      opacity: var(--tree-view-disabled-opacity, var(--opacity-disabled));
-    }
-
-    & svg {
-      width: var(--tree-view-checkbox-icon-size, var(--spacing-3));
-      height: var(--tree-view-checkbox-icon-size, var(--spacing-3));
-    }
-  }
-
-  .-ZBX5W_nodeCheckboxIndicator {
-    justify-content: center;
-    align-items: center;
-    display: inline-flex;
-  }
-
-  .-ZBX5W_nodeRenameInput {
-    box-sizing: border-box;
-    border: var(--tree-view-rename-input-border-width, var(--border-width-sm)) solid
-      var(--tree-view-rename-input-border-color, var(--color-ring));
-    border-radius: var(--tree-view-rename-input-radius, var(--radius-xs));
-    min-width: 0;
-    padding-block: var(--tree-view-rename-input-padding-y, 0);
-    padding-inline: var(--tree-view-rename-input-padding-x, var(--spacing-1));
-    background-color: var(--tree-view-rename-input-bg, var(--color-background));
-    color: var(--tree-view-rename-input-color, var(--color-foreground));
-    font: inherit;
-    outline: var(--tree-view-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm)))
-      solid transparent;
-    outline-offset: calc(var(--tree-view-focus-ring-width, var(--focus-ring-inset-width, var(--border-width-sm))) * -1);
-    flex: 1;
-
-    &:focus-visible {
-      outline-color: var(--tree-view-focus-ring-color, var(--color-ring));
-    }
-  }
-
-  @keyframes -ZBX5W_tree-view-slide-down {
-    from {
-      height: 0;
-    }
-
-    to {
-      height: var(--height);
-    }
-  }
-
-  @keyframes -ZBX5W_tree-view-slide-up {
-    from {
-      height: var(--height);
-    }
-
-    to {
-      height: 0;
-    }
-  }
-
-  @keyframes -ZBX5W_tree-view-fade-in {
-    from {
-      opacity: .01;
-    }
-
-    to {
-      opacity: 1;
-    }
-  }
-
-  @keyframes -ZBX5W_tree-view-fade-out {
-    from {
-      opacity: 1;
-    }
-
-    to {
-      opacity: .01;
-    }
-  }
-}