@plexui/ui 0.19.0 → 0.20.0

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

@@ -1,84 +0,0 @@
-@layer components {/* Overrides sonner's inline `z-index: 999999999` with a tamed, token-friendly
-   value. Consumers can lower it via `--z-toast` if their app pushes something
-   legitimately higher (rare — toasts should sit above modals and headers). */.Toaster:where([data-sonner-toaster]) {
-  z-index: var(--z-toast, 100000) !important;
-}/* Sonner reads --normal-bg / --normal-text / --normal-border / --border-radius
-   from the Toaster element (wired up in Toaster.tsx). The rules below only
-   layer on things sonner's stylesheet doesn't cover on its own. */.Toast {
-  --toast-icon-color: currentColor;
-
-  /* Shrink to fit: short toasts don't pad out empty space, long ones wrap
-     at the Toaster's --width. Sonner positions toasts absolutely, so we set
-     left/right: 0 + auto margins to center without touching its transform. */
-  width: -moz-max-content !important;
-  width: max-content !important;
-  max-width: var(--width) !important;
-  left: 0 !important;
-  right: 0 !important;
-  margin-inline: auto !important;
-  /* Tight gap between icon and content; action button gets extra breathing
-     room via its own margin-left below. */
-  gap: calc(var(--spacing) * 2) !important;
-  padding: calc(var(--spacing) * 3) !important;
-  font-size: var(--font-text-sm-size);
-  line-height: var(--font-text-sm-line-height);
-  /* Sonner's own stylesheet lives outside any @layer and hardcodes a light
-     drop shadow — we need !important to land our layered token value.
-     Same shadow + hairline combo as Menu / Popover for visual parity. */
-  box-shadow: var(--shadow), var(--shadow-hairline) !important;
-}.Title {
-  color: var(--color-text);
-  font-size: var(--font-text-sm-size);
-  line-height: var(--font-text-sm-line-height);
-  /* Sonner pins font-weight: 500; keep that for title-only toasts and only
-     lift to semibold when a description sits alongside (so the title is
-     visually anchored against the secondary text). */
-  font-weight: var(--font-weight-medium);
-  text-wrap: pretty;
-}.Content:has(.Description) .Title {
-  font-weight: var(--font-weight-semibold) !important;
-}.Description {
-  color: var(--color-text-secondary);
-  font-size: var(--font-text-sm-size);
-  line-height: var(--font-text-sm-line-height);
-  text-wrap: pretty;
-}.Content {
-  gap: 0 !important;
-}.Icon {
-  color: var(--toast-icon-color);
-}
-
-  .Icon > svg {
-    width: 20px;
-    height: 20px;
-  }.ActionButton {
-  margin-left: calc(var(--spacing) * 2) !important;
-  background: var(--color-background-primary-solid) !important;
-  color: var(--color-text-primary-solid) !important;
-  font-weight: var(--font-weight-medium);
-}
-
-  .ActionButton:hover {
-    background: var(--color-background-primary-solid-hover) !important;
-  }.CancelButton {
-  color: var(--color-text-secondary) !important;
-  font-weight: var(--font-weight-medium);
-}/* =============================================
-  Centered text variant — shrink-to-fit is already the default
-============================================= */.Compact {
-  justify-content: center;
-}.Compact .Title,
-.Compact .Description {
-  text-align: center;
-}/* =============================================
-  Semantic variants — driven by tokens
-============================================= */.Success {
-  --toast-icon-color: var(--color-text-success-outline);
-}.Error {
-  --toast-icon-color: var(--color-text-danger-outline);
-}.Warning {
-  --toast-icon-color: var(--color-text-warning-outline);
-}.Info {
-  --toast-icon-color: var(--color-text-info-outline);
-}
-}

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

@@ -1,91 +0,0 @@
-@layer components {.Tooltip {
-  z-index: 50;
-  max-width: 300px;
-  border-radius: var(--radius-md);
-  /* animation-duration: 0.3s; */
-  /* animation-name: scale-in; */
-  /* animation-timing-function: var(--cubic-enter); */
-  background: var(--color-surface-elevated);
-  box-shadow: var(--shadow), var(--shadow-hairline);
-  font-size: 14px;
-  line-height: 1.45;
-  /* transform-origin: var(--radix-tooltip-content-transform-origin); */
-  /* transition: background-color 0.15s ease; */
-
-  /* &[data-state="closed"] {
-    animation: scale-out 0.2s var(--cubic-exit);
-  } */
-}
-
-  /*
-   * Default cursor is slightly more pleasing than text cursor,
-   * if a tooltip transitions between clickable -> non-clickable (e.g., CopyTooltip)
-   */
-  .Tooltip[data-clickable="false"] {
-    cursor: default;
-  }
-
-  .Tooltip[data-clickable="true"] {
-    cursor: pointer;
-  }
-    @media (hover: hover) and (pointer: fine) {.Tooltip[data-compact="true"][data-clickable="true"]:hover {
-      background: var(--gray-600);
-      color: var(--gray-0);
-}
-}
-
-  .Tooltip[data-gutter-size="sm"] {
-    padding: 8px 12px;
-  }
-
-  .Tooltip[data-gutter-size="md"] {
-    padding: 12px 16px;
-  }
-
-  .Tooltip[data-gutter-size="lg"] {
-    padding: 14px 18px;
-  }
-
-  .Tooltip[data-compact="true"] {
-    padding: 2px 8px;
-    background: var(--gray-700);
-    color: var(--gray-0);
-    font-size: 14px;
-  }@keyframes scale-in {
-  from {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}@keyframes scale-out {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  to {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-}.TriggerDecorator {
-  display: inline-flex;
-  cursor: pointer;
-  -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
-  text-decoration-color: transparent;
-  /* transition: text-decoration 0.2s var(--cubic-exit); */
-}
-
-  .TriggerDecorator:focus {
-    outline: 0;
-  }
-
-  .TriggerDecorator[data-state*="open"] {
-    text-decoration-color: var(--color-text-tertiary);
-    transition-timing-function: var(--cubic-enter);
-  }
-}

package/dist/es/components/Transition/Animate.module.css

@@ -1,54 +0,0 @@
-@layer components {.TransitionItem {
-  will-change: var(--tg-will-change);
-
-  /* Removing natural DOM position allows multiple layers to occupy the same space without stacking */
-
-  /* Interruptions should not experience delay */
-}
-  [data-transition-position="absolute"] .TransitionItem[data-exiting],
-  
-  [data-transition-position="absolute"] .TransitionItem:not([data-exiting]) + .TransitionItem[data-entering] {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-  }
-
-  .TransitionItem[data-entering] {
-    filter: var(--tg-initial-filter);
-    opacity: var(--tg-initial-opacity);
-    transform: var(--tg-initial-transform);
-  }
-
-  .TransitionItem[data-exiting] {
-    filter: var(--tg-enter-filter);
-    opacity: var(--tg-enter-opacity);
-    transform: var(--tg-enter-transform);
-  }
-
-  .TransitionItem[data-entering-active],
-  .TransitionItem[data-entering][data-interrupted] {
-    filter: var(--tg-enter-filter);
-    opacity: var(--tg-enter-opacity);
-    transform: var(--tg-enter-transform);
-    transition:
-      opacity var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
-      transform var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
-      filter var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay);
-  }
-
-  .TransitionItem[data-exiting-active],
-  .TransitionItem[data-exiting][data-interrupted] {
-    filter: var(--tg-exit-filter, none);
-    opacity: var(--tg-exit-opacity, 0);
-    transform: var(--tg-exit-transform, none);
-    transition:
-      opacity var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
-      transform var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
-      filter var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay);
-  }
-  .TransitionItem[data-entering][data-interrupted],
-  .TransitionItem[data-exiting][data-interrupted] {
-    transition-delay: 0ms;
-  }
-}

package/dist/es/components/Transition/AnimateLayout.module.css

@@ -1,101 +0,0 @@
-@layer components {.Layout {
-  position: relative;
-  display: block;
-  flex-shrink: 0;
-  transition-property: height, width;
-
-  /* The container is considered to have three directional states by the latest action: */
-  /* - "in": (default) a new child entered with no other siblings present */
-}
-
-  .Layout[data-clip="true"] {
-    overflow: hidden;
-  }
-  /* - "move": a new child entered while another sibling was present */
-  .Layout[data-direction="in"] {
-    transition-delay: var(--tg-layout-enter-delay);
-    transition-duration: var(--tg-layout-enter-duration);
-    transition-timing-function: var(--tg-layout-enter-timing-function);
-  }
-  /* - "out": a child exited */
-
-  .Layout[data-direction="out"] {
-    transition-delay: var(--tg-layout-exit-delay);
-    transition-duration: var(--tg-layout-exit-duration);
-    transition-timing-function: var(--tg-layout-exit-timing-function);
-  }
-
-  /* "move" defaults to "in" values */
-  .Layout[data-direction="move"] {
-    transition-delay: var(--tg-layout-move-delay);
-    transition-duration: var(--tg-layout-move-duration);
-    transition-timing-function: var(--tg-layout-move-timing-function);
-  }
-
-  /* Interruptions should not experience delays */
-  .Layout[data-interrupted="true"] {
-    transition-delay: 0ms;
-  }.TransitionItem {
-  flex-shrink: 0;
-  will-change: var(--tg-will-change, auto);
-
-  /* Interruptions are allowed to experience delay, as opposed to <Animate> */
-  /* This is because they may involve interplay with a non-clipped container, which then creates */
-  /* unintended visual artifacts if the interruption is not delayed. */
-}
-
-  .TransitionItem[data-entering],
-  .TransitionItem[data-exiting] {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-  }
-
-    .Layout[data-dimension="width"] > .TransitionItem[data-entering], .Layout[data-dimension="width"] > .TransitionItem[data-exiting] {
-      width: auto;
-    }
-
-    .Layout[data-item-anchor="end"] > .TransitionItem[data-entering], .Layout[data-item-anchor="end"] > .TransitionItem[data-exiting] {
-      top: initial;
-      bottom: 0;
-    }
-
-    .Layout[data-item-anchor="end"][data-dimension="width"] > .TransitionItem[data-entering], .Layout[data-item-anchor="end"][data-dimension="width"] > .TransitionItem[data-exiting] {
-      right: 0;
-      left: initial;
-    }
-
-  .TransitionItem[data-entering] {
-    filter: var(--tg-initial-filter);
-    opacity: var(--tg-initial-opacity);
-    transform: var(--tg-initial-transform);
-  }
-
-  .TransitionItem[data-exiting] {
-    filter: var(--tg-enter-filter);
-    opacity: var(--tg-enter-opacity);
-    transform: var(--tg-enter-transform);
-  }
-  .TransitionItem[data-entering-active],
-  .TransitionItem[data-entering][data-interrupted] {
-    filter: var(--tg-enter-filter);
-    opacity: var(--tg-enter-opacity);
-    transform: var(--tg-enter-transform);
-    transition:
-      opacity var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
-      transform var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
-      filter var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay);
-  }
-
-  .TransitionItem[data-exiting-active],
-  .TransitionItem[data-exiting][data-interrupted] {
-    filter: var(--tg-exit-filter);
-    opacity: var(--tg-exit-opacity);
-    transform: var(--tg-exit-transform);
-    transition:
-      opacity var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
-      transform var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
-      filter var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay);
-  }
-}

package/dist/es/components/Transition/AnimateLayoutGroup.module.css

@@ -1,72 +0,0 @@
-@layer components {.LayoutItem {
-  position: relative;
-  flex-shrink: 0;
-
-  /* Enter & Exit staging occurs in JS */
-}
-
-  .LayoutItem[data-entering-active],
-  .LayoutItem[data-entering][data-interrupted] {
-    transition:
-      height var(--tg-layout-enter-duration) var(--tg-layout-enter-timing-function)
-        var(--tg-layout-enter-delay),
-      width var(--tg-layout-enter-duration) var(--tg-layout-enter-timing-function)
-        var(--tg-layout-enter-delay);
-  }
-
-  .LayoutItem[data-exiting-active],
-  .LayoutItem[data-exiting][data-interrupted] {
-    transition:
-      height var(--tg-layout-exit-duration) var(--tg-layout-exit-timing-function)
-        var(--tg-layout-exit-delay),
-      width var(--tg-layout-exit-duration) var(--tg-layout-exit-timing-function)
-        var(--tg-layout-exit-delay);
-  }.TransitionItem {
-  display: block;
-  will-change: var(--tg-will-change);
-
-  /* Interruptions are allowed to experience delay, as opposed to <Animate> */
-  /* This is because they may involve interplay with a non-clipped container, which then creates */
-  /* unintended visual artifacts if the interruption is not delayed. */
-}
-
-  .LayoutItem[data-entering] > .TransitionItem {
-    filter: var(--tg-initial-filter);
-    opacity: var(--tg-initial-opacity);
-    transform: var(--tg-initial-transform);
-  }
-
-  .LayoutItem[data-exiting] > .TransitionItem {
-    filter: var(--tg-enter-filter);
-    opacity: var(--tg-enter-opacity);
-    transform: var(--tg-enter-transform);
-  }
-
-  /* Width cannot be measured like height can in some scenarios */
-  .LayoutItem[data-entering] > .TransitionItem[data-dimension="width"] {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-  .LayoutItem[data-entering-active] > .TransitionItem,
-  .LayoutItem[data-entering][data-interrupted] > .TransitionItem {
-    filter: var(--tg-enter-filter);
-    opacity: var(--tg-enter-opacity);
-    transform: var(--tg-enter-transform);
-    transition:
-      opacity var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
-      transform var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay),
-      filter var(--tg-enter-duration) var(--tg-enter-timing-function) var(--tg-enter-delay);
-  }
-
-  .LayoutItem[data-exiting-active] > .TransitionItem,
-  .LayoutItem[data-exiting][data-interrupted] > .TransitionItem {
-    filter: var(--tg-exit-filter);
-    opacity: var(--tg-exit-opacity, 0);
-    transform: var(--tg-exit-transform);
-    transition:
-      opacity var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
-      transform var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay),
-      filter var(--tg-exit-duration) var(--tg-exit-timing-function) var(--tg-exit-delay);
-  }
-}

package/dist/es/components/Transition/TransitionGroup.module.css

@@ -1,4 +0,0 @@
-@layer components {.TransitionGroupChild {
-  display: block;
-}
-}