@plexui/ui 0.19.1 → 0.20.1

package/dist/es/components/SelectControl/SelectControl.module.css

@@ -1,558 +0,0 @@
-@layer components {.SelectControl {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--select-control-gap);
-  flex-shrink: 0;
-  height: var(--select-control-size);
-  padding: 0 var(--select-control-gutter);
-  border-radius: var(--select-control-radius);
-  color: var(--input-text-color);
-  cursor: pointer;
-  font-size: var(--select-control-font-size);
-  font-weight: var(--select-control-font-weight);
-  line-height: var(--font-text-md-line-height);
-  text-align: left;
-  transition-duration: var(--transition-duration-basic);
-  transition-property: color;
-  transition-timing-function: var(--transition-ease-basic);
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  white-space: nowrap;
-}
-
-  .SelectControl:where([data-optically-align="start"]) {
-    margin-inline-start: calc(var(--select-control-gutter) * -1);
-  }
-
-    .SelectControl:where([data-optically-align="start"])[data-pill] {
-      margin-inline-start: calc(
-        var(--select-control-gutter) * var(--control-gutter-pill-scaling) * -1
-      );
-    }
-
-  .SelectControl:where([data-optically-align="end"]) {
-    margin-inline-end: calc(var(--select-control-gutter) * -1);
-  }
-
-    .SelectControl:where([data-optically-align="end"])[data-pill] {
-      margin-inline-end: calc(
-        var(--select-control-gutter) * var(--control-gutter-pill-scaling) * -1
-      );
-    }
-
-  /* Background / shape of the button */
-  .SelectControl::before {
-    position: absolute;
-    inset: 0;
-    display: block;
-    border-radius: inherit;
-    content: "";
-    transition-duration: var(--transition-duration-basic);
-    transition-property: opacity, background-color, transform, box-shadow, border-color;
-    transition-timing-function: var(--transition-ease-basic);
-    /* Composite layer seems required in some cases to avoid visual artifacts. */
-    will-change: transform;
-  }
-
-  /* Focus ring */
-  .SelectControl::after {
-    position: absolute;
-    inset: 0;
-    display: block;
-    border-radius: inherit;
-    content: "";
-    pointer-events: none;
-    transition-duration: var(--transition-duration-basic);
-    transition-property: transform;
-    transition-timing-function: var(--transition-ease-basic);
-    /* Composite layer seems required in some cases to avoid visual artifacts. */
-    will-change: transform;
-  }
-
-  .SelectControl:focus {
-    outline: none;
-  }
-    .SelectControl:focus-visible::after {
-      outline: 2px solid var(--button-ring-color, var(--color-ring));
-      outline-offset: var(--select-control-ring-offset, 2px);
-    }
-
-  /* =============================================
-    Sizes
-  ============================================= */
-  .SelectControl:where([data-size="3xs"]) {
-    --select-control-size: var(--control-size-3xs);
-    --select-control-gutter: var(--control-gutter-2xs);
-    --select-control-font-size: var(--control-font-size-sm);
-    --select-control-gap: 4px;
-    --select-control-radius: var(--control-radius-sm);
-    --start-icon-size: var(--control-icon-size-xs);
-    --start-icon-offset: 0;
-    --start-icon-pill-offset: 0;
-    --clear-size: 14px;
-    --clear-icon-size: 13px;
-    --clear-iso-size: 12px;
-    --clear-iso-icon-size: 10px;
-    --clear-iso-offset: -1px;
-    --clear-iso-pill-offset: -2px;
-    --dropdown-icon-offset: 0;
-    --dropdown-icon-pill-offset: 0;
-    --dropdown-icon-width: 6px;
-    --dropdown-icon-height: 9px;
-    --dropdown-chevron-icon-width: 8px;
-    --dropdown-chevron-icon-height: 5px;
-    --indicator-wrapper-gap: calc(var(--spacing) * 1);
-    --indicator-wrapper-gutter: 0;
-  }
-
-  .SelectControl:where([data-size="2xs"]) {
-    --select-control-size: var(--control-size-2xs);
-    --select-control-gutter: var(--control-gutter-xs);
-    --select-control-font-size: var(--control-font-size-sm);
-    --select-control-gap: 6px;
-    --select-control-radius: var(--control-radius-sm);
-    --start-icon-size: var(--control-icon-size-sm);
-    --start-icon-offset: 0;
-    --start-icon-pill-offset: -1px;
-    --clear-size: 16px;
-    --clear-icon-size: 13px;
-    --clear-iso-size: 14px;
-    --clear-iso-icon-size: 12px;
-    --clear-iso-offset: -2px;
-    --clear-iso-pill-offset: -4px;
-    --dropdown-icon-offset: 0;
-    --dropdown-icon-pill-offset: 0;
-    --dropdown-icon-width: 6px;
-    --dropdown-icon-height: 9px;
-    --dropdown-chevron-icon-width: 8px;
-    --dropdown-chevron-icon-height: 5px;
-    --indicator-wrapper-gap: calc(var(--spacing) * 1);
-    --indicator-wrapper-gutter: 0;
-  }
-
-  .SelectControl:where([data-size="xs"]) {
-    --select-control-size: var(--control-size-xs);
-    --select-control-gutter: var(--control-gutter-xs);
-    --select-control-font-size: var(--control-font-size-md);
-    --select-control-gap: 6px;
-    --select-control-radius: var(--control-radius-sm);
-    --start-icon-size: var(--control-icon-size-sm);
-    --start-icon-offset: -1px;
-    --start-icon-pill-offset: -1px;
-    --clear-size: 18px;
-    --clear-icon-size: 14px;
-    --clear-iso-size: 16px;
-    --clear-iso-icon-size: 12px;
-    --clear-iso-offset: -2px;
-    --clear-iso-pill-offset: -4px;
-    --dropdown-icon-offset: 0;
-    --dropdown-icon-pill-offset: 0;
-    --dropdown-icon-width: 7px;
-    --dropdown-icon-height: 11px;
-    --dropdown-chevron-icon-width: 9px;
-    --dropdown-chevron-icon-height: 5px;
-    --indicator-wrapper-gap: calc(var(--spacing) * 1);
-    --indicator-wrapper-gutter: 0;
-  }
-
-  .SelectControl:where([data-size="sm"]) {
-    --select-control-size: var(--control-size-sm);
-    --select-control-gutter: var(--control-gutter-sm);
-    --select-control-font-size: var(--control-font-size-md);
-    --select-control-gap: 8px;
-    --select-control-radius: var(--control-radius-sm);
-    --start-icon-size: var(--control-icon-size-sm);
-    --start-icon-offset: -1px;
-    --start-icon-pill-offset: -2px;
-    --clear-size: 18px;
-    --clear-icon-size: 14px;
-    --clear-iso-size: 16px;
-    --clear-iso-icon-size: 12px;
-    --clear-iso-offset: -3px;
-    --clear-iso-pill-offset: -6px;
-    --dropdown-icon-offset: 0;
-    --dropdown-icon-pill-offset: -2px;
-    --dropdown-icon-width: 7px;
-    --dropdown-icon-height: 11px;
-    --dropdown-chevron-icon-width: 9px;
-    --dropdown-chevron-icon-height: 5px;
-    --indicator-wrapper-gap: calc(var(--spacing) * 1);
-    --indicator-wrapper-gutter: 0;
-  }
-
-  .SelectControl:where([data-size="md"]) {
-    --select-control-size: var(--control-size-md);
-    --select-control-gutter: var(--control-gutter-md);
-    --select-control-font-size: var(--control-font-size-md);
-    --select-control-gap: 8px;
-    --select-control-radius: var(--control-radius-md);
-    --start-icon-size: var(--control-icon-size-md);
-    --start-icon-offset: -1px;
-    --start-icon-pill-offset: -4px;
-    --clear-size: 22px;
-    --clear-icon-size: 15px;
-    --clear-iso-size: 18px;
-    --clear-iso-icon-size: 14px;
-    --clear-iso-offset: -4px;
-    --clear-iso-pill-offset: -7px;
-    --dropdown-icon-offset: 0;
-    --dropdown-icon-pill-offset: -2px;
-    --dropdown-icon-width: 8px;
-    --dropdown-icon-height: 12px;
-    --dropdown-chevron-icon-width: 11px;
-    --dropdown-chevron-icon-height: 6px;
-    --indicator-wrapper-gap: calc(var(--spacing) * 1);
-    --indicator-wrapper-gutter: calc(var(--spacing) * 0);
-  }
-
-  .SelectControl:where([data-size="lg"]) {
-    --select-control-size: var(--control-size-lg);
-    --select-control-gutter: var(--control-gutter-md);
-    --select-control-font-size: var(--control-font-size-md);
-    --select-control-gap: 8px;
-    --select-control-radius: var(--control-radius-lg);
-    --start-icon-size: var(--control-icon-size-md);
-    --start-icon-offset: -2px;
-    --start-icon-pill-offset: -4px;
-    --clear-size: 22px;
-    --clear-icon-size: 15px;
-    --clear-iso-size: 18px;
-    --clear-iso-icon-size: 14px;
-    --clear-iso-offset: -2px;
-    --clear-iso-pill-offset: -6px;
-    --dropdown-icon-offset: 0;
-    --dropdown-icon-pill-offset: -2px;
-    --dropdown-icon-width: 8px;
-    --dropdown-icon-height: 12px;
-    --dropdown-chevron-icon-width: 11px;
-    --dropdown-chevron-icon-height: 6px;
-    --indicator-wrapper-gap: calc(var(--spacing) * 1.5);
-    --indicator-wrapper-gutter: calc(var(--spacing) * 0);
-  }
-
-  .SelectControl:where([data-size="xl"]) {
-    --select-control-size: var(--control-size-xl);
-    --select-control-gutter: var(--control-gutter-lg);
-    --select-control-font-size: var(--control-font-size-md);
-    --select-control-gap: 8px;
-    --select-control-radius: var(--control-radius-xl);
-    --start-icon-size: var(--control-icon-size-md);
-    --start-icon-offset: -2px;
-    --start-icon-pill-offset: -4px;
-    --clear-size: 24px;
-    --clear-icon-size: 16px;
-    --clear-iso-size: 18px;
-    --clear-iso-icon-size: 14px;
-    --clear-iso-offset: -2px;
-    --clear-iso-pill-offset: -7px;
-    --dropdown-icon-offset: 0;
-    --dropdown-icon-pill-offset: -2px;
-    --dropdown-icon-width: 8px;
-    --dropdown-icon-height: 12px;
-    --dropdown-chevron-icon-width: 11px;
-    --dropdown-chevron-icon-height: 6px;
-    --indicator-wrapper-gap: calc(var(--spacing) * 1);
-    --indicator-wrapper-gutter: calc(var(--spacing) * 0.5);
-  }
-
-  .SelectControl:where([data-size="2xl"]) {
-    --select-control-size: var(--control-size-2xl);
-    --select-control-gutter: var(--control-gutter-lg);
-    --select-control-font-size: var(--control-font-size-lg);
-    --select-control-gap: 10px;
-    --select-control-radius: var(--control-radius-xl);
-    --start-icon-size: var(--control-icon-size-lg);
-    --start-icon-offset: -2px;
-    --start-icon-pill-offset: -4px;
-    --clear-size: 24px;
-    --clear-icon-size: 16px;
-    --clear-iso-size: 20px;
-    --clear-iso-icon-size: 15px;
-    --clear-iso-offset: -2px;
-    --clear-iso-pill-offset: -7px;
-    --dropdown-icon-offset: 0;
-    --dropdown-icon-pill-offset: -2px;
-    --dropdown-icon-width: 8px;
-    --dropdown-icon-height: 12px;
-    --dropdown-chevron-icon-width: 11px;
-    --dropdown-chevron-icon-height: 6px;
-    --indicator-wrapper-gap: calc(var(--spacing) * 1.5);
-    --indicator-wrapper-gutter: calc(var(--spacing) * 1);
-  }
-
-  .SelectControl:where([data-size="3xl"]) {
-    --select-control-size: var(--control-size-3xl);
-    --select-control-gutter: var(--control-gutter-xl);
-    --select-control-font-size: var(--control-font-size-lg);
-    --select-control-gap: 10px;
-    --select-control-radius: var(--control-radius-xl);
-    --start-icon-size: var(--control-icon-size-lg);
-    --start-icon-offset: -2px;
-    --start-icon-pill-offset: -4px;
-    --clear-size: 24px;
-    --clear-icon-size: 16px;
-    --clear-iso-size: 20px;
-    --clear-iso-icon-size: 15px;
-    --clear-iso-offset: -2px;
-    --clear-iso-pill-offset: -7px;
-    --dropdown-icon-offset: 0;
-    --dropdown-icon-pill-offset: -3px;
-    --dropdown-icon-width: 9px;
-    --dropdown-icon-height: 13px;
-    --dropdown-chevron-icon-width: 12px;
-    --dropdown-chevron-icon-height: 7px;
-    --indicator-wrapper-gap: calc(var(--spacing) * 1.5);
-    --indicator-wrapper-gutter: calc(var(--spacing) * 1);
-  }
-
-  /* =============================================
-    Pill
-  ============================================= */
-  .SelectControl:where([data-pill]) {
-    --select-control-radius: var(--radius-full);
-
-    padding: 0 calc(var(--select-control-gutter) * var(--control-gutter-pill-scaling));
-  }
-
-  /* =============================================
-    Block
-  ============================================= */
-  .SelectControl:where([data-block]) {
-    width: 100%;
-  }
-
-  /* =============================================
-    Ghost variant
-  ============================================= */
-  .SelectControl[data-variant="ghost"] {
-    --select-control-background-color: var(--color-background-primary-ghost-hover);
-    --select-control-ring-offset: -1px;
-  }
-
-    .SelectControl[data-variant="ghost"]::before {
-      background-color: var(--select-control-background-color);
-      opacity: 0;
-      transform: scale(var(--scale));
-    }
-      .SelectControl[data-variant="ghost"][aria-expanded="true"]::before, .SelectControl[data-variant="ghost"][data-state="open"]::before {
-        opacity: 0.6;
-        transform: scale(1);
-      }
-      @media (hover: hover) and (pointer: fine) {
-        .SelectControl[data-variant="ghost"]:where(:not([data-disabled])):hover::before {
-          opacity: 1;
-          transform: scale(1);
-        }
-}
-          .SelectControl[data-variant="ghost"]:where(:not([data-disabled])):not(:has(button:active)):active::before {
-            --select-control-background-color: var(--color-background-primary-ghost-active);
-
-            opacity: 1;
-            transform: scale(var(--scale));
-          }
-
-          .SelectControl[data-variant="ghost"]:where(:not([data-disabled])):not(:has(button:active)):active::after {
-            transform: scale(var(--scale));
-          }
-        .SelectControl[data-variant="ghost"]:where(:not([data-disabled]))[data-invalid]::before {
-          --select-control-background-color: transparent;
-
-          box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
-          opacity: 1;
-          transform: scale(1);
-        }
-
-        @media (hover: hover) and (pointer: fine) {
-          .SelectControl[data-variant="ghost"]:where(:not([data-disabled]))[data-invalid]:hover::before {
-            --select-control-background-color: var(--color-background-primary-ghost-hover);
-          }
-}
-
-  /* =============================================
-    Soft variant
-  ============================================= */
-  .SelectControl[data-variant="soft"] {
-    --select-control-background-color: var(--color-background-primary-soft-alpha);
-  }
-
-    .SelectControl[data-variant="soft"]::before {
-      background-color: var(--select-control-background-color);
-    }
-      .SelectControl[data-variant="soft"][aria-expanded="true"]::before, .SelectControl[data-variant="soft"][data-state="open"]::before {
-        --select-control-background-color: var(--color-background-primary-soft-alpha-hover);
-      }
-      @media (hover: hover) and (pointer: fine) {
-        .SelectControl[data-variant="soft"]:where(:not([data-disabled])):hover::before {
-          --select-control-background-color: var(--color-background-primary-soft-alpha-hover);
-        }
-}
-          .SelectControl[data-variant="soft"]:where(:not([data-disabled])):not(:has(button:active)):active::before {
-            --select-control-background-color: var(--color-background-primary-soft-alpha-active);
-          }
-
-          .SelectControl[data-variant="soft"]:where(:not([data-disabled])):not(:has(button:active)):active::before,
-          .SelectControl[data-variant="soft"]:where(:not([data-disabled])):not(:has(button:active)):active::after {
-            transform: scale(var(--scale));
-          }
-
-      .SelectControl[data-variant="soft"]:where(:not([data-disabled]))[data-invalid]::before {
-        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
-      }
-
-  /* =============================================
-    Outline variant
-  ============================================= */
-  .SelectControl[data-variant="outline"] {
-    --select-control-border-color: var(--input-outline-border-color);
-    --select-control-ring-offset: -1px;
-  }
-
-    .SelectControl[data-variant="outline"]::before {
-      background-color: transparent;
-      box-shadow: 0 0 0 1px var(--select-control-border-color) inset;
-    }
-
-    .SelectControl[data-variant="outline"][aria-expanded="true"],
-    .SelectControl[data-variant="outline"][data-state="open"] {
-      --select-control-border-color: var(--input-outline-border-color-hover);
-    }
-      @media (hover: hover) and (pointer: fine) {.SelectControl[data-variant="outline"]:where(:not([data-disabled])):hover {
-        --select-control-border-color: var(--input-outline-border-color-hover);
-}
-}
-          .SelectControl[data-variant="outline"]:where(:not([data-disabled])):not(:has(button:active)):active::before {
-            transform: scale(var(--scale));
-          }
-
-          .SelectControl[data-variant="outline"]:where(:not([data-disabled])):not(:has(button:active)):active::after {
-            transform: scale(var(--scale));
-          }
-
-      .SelectControl[data-variant="outline"]:where(:not([data-disabled]))[data-invalid]::before {
-        --select-control-border-color: var(--input-border-color-invalid);
-      }
-
-  /* =============================================
-    Invalid
-  ============================================= */
-  .SelectControl:where([data-invalid]) {
-    --button-ring-color: var(--color-ring-danger);
-  }
-
-  /* =============================================
-    Hover
-  ============================================= */
-    @media (hover: hover) and (pointer: fine) {
-      .SelectControl:not([data-disabled]):hover .Clear,
-      .SelectControl:not([data-disabled]):hover .DropdownIcon {
-        opacity: 1;
-      }
-}
-
-  /* =============================================
-    Placeholder (e.g., "not `selected`")
-  ============================================= */
-  .SelectControl[data-selected="false"] {
-    color: var(--input-placeholder-text-color);
-    font-weight: var(--font-weight-normal);
-  }
-
-  /* =============================================
-    Disabled
-  ============================================= */
-  .SelectControl[data-disabled][data-variant] {
-    /* Matches disabled styling of Buttons, which is nice. */
-    --select-control-background-color: var(--color-background-disabled);
-    --select-control-border-color: var(--color-border-disabled);
-
-    color: var(--color-text-disabled);
-    cursor: not-allowed;
-  }
-
-    .SelectControl[data-disabled][data-variant] .DropdownIcon {
-      color: var(--color-text-disabled);
-    }
-
-    /* Don't press while disabled */
-    .SelectControl[data-disabled][data-variant]:active::before {
-      transform: scale(1);
-    }.TriggerText {
-  position: relative;
-  overflow: hidden;
-  flex: 1;
-  max-width: 100%;
-  color: inherit;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}.IndicatorWrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: var(--indicator-wrapper-gap);
-  padding-left: var(--indicator-wrapper-gutter);
-}.StartIcon {
-  position: relative;
-  width: var(--start-icon-size);
-  height: var(--start-icon-size);
-  margin-left: var(--start-icon-offset);
-}
-
-  :where(.SelectControl[data-pill]) .StartIcon {
-    margin-left: var(--start-icon-pill-offset);
-  }.Clear {
-  --button-size: var(--clear-size);
-  --button-icon-size: var(--clear-icon-size);
-
-  position: relative;
-  opacity: 0.75;
-}
-
-  .Clear[data-variant="solid"] {
-    --button-size: var(--clear-iso-size);
-    --button-icon-size: var(--clear-iso-icon-size);
-  }
-
-  [data-state="open"] .Clear,
-  .Clear:focus-visible {
-    opacity: 1;
-  }
-
-  .Clear[data-only-child] {
-    margin-right: var(--clear-iso-offset);
-  }
-
-    :where(.SelectControl[data-pill]) .Clear[data-only-child] {
-      margin-right: var(--clear-iso-pill-offset);
-    }.DropdownIcon {
-  position: relative;
-  width: var(--dropdown-icon-width, 8px);
-  height: var(--dropdown-icon-height, 12px);
-  margin-right: var(--dropdown-icon-offset);
-  color: var(--color-text-secondary);
-  opacity: 0.75;
-  transition-duration: var(--transition-duration-basic);
-  transition-property: opacity;
-  transition-timing-function: var(--transition-ease-basic);
-  will-change: opacity;
-}
-
-  :where(.SelectControl[data-pill]) .DropdownIcon {
-    margin-right: var(--dropdown-icon-pill-offset);
-  }
-
-  [data-state="open"] .DropdownIcon {
-    opacity: 1;
-  }.DropdownIconChevron {
-  width: var(--dropdown-chevron-icon-width, 11px);
-  height: var(--dropdown-chevron-icon-height, 6px);
-}/* Shares margin offset with dropdown indicator */.LoadingIndicator {
-  margin-right: var(--dropdown-icon-offset);
-}
-
-  :where(.SelectControl[data-pill]) .LoadingIndicator {
-    margin-right: var(--dropdown-icon-pill-offset);
-  }
-}

package/dist/es/components/Separator/Separator.module.css

@@ -1,16 +0,0 @@
-@layer components {.Separator {
-  flex-shrink: 0;
-  background: var(--separator-color);
-}
-
-  .Separator[data-orientation="horizontal"] {
-    width: 100%;
-    height: var(--separator-thickness);
-  }
-
-  .Separator[data-orientation="vertical"] {
-    width: var(--separator-thickness);
-    height: 100%;
-    min-height: 1em;
-  }
-}

package/dist/es/components/ShimmerText/ShimmerText.module.css

@@ -1,43 +0,0 @@
-@layer components {.Shimmer {
-
-  display: inline-block;
-  animation-delay: 0.6s;
-  animation-duration: 3s;
-  animation-iteration-count: infinite;
-  animation-name: shimmer;
-  background: currentcolor
-    linear-gradient(to left, currentcolor, var(--shimmer-highlight) 50%, currentcolor);
-  -webkit-background-clip: text;
-          background-clip: text;
-  background-position: -100% top;
-  background-repeat: no-repeat;
-  background-size: 50% 200%;
-  -webkit-text-fill-color: transparent;
-}.Shimmer, :where([data-theme="light"]) .Shimmer {
-
---shimmer-highlight: var(--gray-200);
-}:where([data-theme="dark"]) .Shimmer {
-
---shimmer-highlight: var(--gray-900);
-}
-
-  /* Preference: disable animations entirely, rather than leaving potentially *many* animations paused in the DOM. */
-  .Shimmer[data-idle] {
-    animation: none;
-    background: none;
-    background-clip: unset;
-    -webkit-text-fill-color: unset;
-  }@keyframes shimmer {
-  0% {
-    background-position: -100% top;
-  }
-
-  70% {
-    background-position: 250% top;
-  }
-
-  100% {
-    background-position: 250% top;
-  }
-}
-}