@plexui/ui 0.19.0 → 0.20.0

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

@@ -1,377 +0,0 @@
-@layer components {.Menu {
-  /* Top-level selector needs to exist */
-}.MenuList {
-  z-index: 50;
-  overflow: auto;
-  width: var(--menu-width, auto);
-  min-width: var(--menu-min-width, 300px);
-  max-width: var(--radix-dropdown-menu-content-available-width);
-  max-height: min(
-    var(--radix-dropdown-menu-content-available-height),
-    var(--menu-max-height, 1200px)
-  );
-  padding: var(--menu-gutter);
-  border-radius: var(--menu-radius);
-  background: var(--color-surface-elevated);
-  box-shadow: var(--shadow), var(--shadow-hairline);
-  color: var(--color-text);
-  font-size: var(--menu-font-size);
-  line-height: var(--menu-line-height);
-  -webkit-overflow-scrolling: touch;
-  pointer-events: auto;
-  /* The transform-origin computed from the content and arrow positions/offsets */
-  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
-  will-change: transform;
-}
-
-  /* Animation states applied to a wrapping parent */
-  .Menu[data-entering] .MenuList {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-
-  .Menu[data-entering-active] .MenuList,
-  .Menu[data-entering][data-interrupted] .MenuList {
-    opacity: 1;
-    transform: scale(1);
-    transition-duration: 0.35s;
-    transition-property: opacity, transform;
-    transition-timing-function: var(--cubic-enter);
-  }
-
-  .Menu[data-exiting] .MenuList {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  .Menu[data-exiting-active] .MenuList,
-  .Menu[data-exiting][data-interrupted] .MenuList {
-    opacity: 0;
-    transform: scale(0.95);
-    transition-duration: 0.2s;
-    transition-property: opacity, transform;
-    transition-timing-function: var(--cubic-exit);
-  }.MenuItemContent {
-  padding: var(--menu-item-padding);
-}
-
-  /* Same "item + subtitle" pattern as the pressable item below. */
-  .MenuItemContent:has(.ItemDescription) {
-    font-weight: var(--font-weight-semibold);
-  }.MenuItem {
-  position: relative;
-  display: block;
-  /* Defaults to inherit from pressable wrapper, this container is not flex */
-  align-items: center;
-  gap: var(--menu-item-gap);
-  padding: var(--menu-item-padding);
-  color: var(--color-text);
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-
-  /* An item with a description keeps its label semibold in every state, so
-     consumers never have to remember a className for the "item + subtitle"
-     pattern. The description's own rule keeps the second line normal. */
-  .MenuItem:has(.ItemDescription) {
-    font-weight: var(--font-weight-semibold);
-  }
-
-  .MenuItem:focus {
-    outline: none;
-  }
-
-  @media (hover: hover) and (pointer: fine) {.MenuItem:hover {
-    /* Prevent links from changing colors */
-    color: var(--color-text);
-}
-}
-
-  .MenuItem::before {
-    position: absolute;
-    inset: 0;
-    display: block;
-    border-radius: calc(var(--menu-radius) - var(--menu-gutter));
-    background: var(--menu-item-background-color);
-    content: "";
-    opacity: 0;
-    transform: scale(var(--scale, 0.98));
-    transition-duration: var(--transition-duration-basic);
-    transition-property: opacity, background-color, transform;
-    transition-timing-function: var(--cubic-enter);
-    will-change: opacity, transform;
-  }
-    .MenuItem[data-state="open"]::before, .MenuItem[data-highlighted]::before {
-      opacity: 1;
-      transform: scale(1);
-    }
-
-    .MenuItem[data-state="open"]:has(.ItemActions:hover)::before, .MenuItem[data-highlighted]:has(.ItemActions:hover)::before {
-      opacity: 0.4;
-    }
-
-    .MenuItem[data-state="open"]:not(:has(.ItemActions:hover)):active::before, .MenuItem[data-highlighted]:not(:has(.ItemActions:hover)):active::before {
-      transform: scale(var(--scale, 0.98));
-    }
-
-    .MenuItem[data-state="open"] .ItemActions, .MenuItem[data-highlighted] .ItemActions {
-      opacity: 1;
-    }
-
-  .MenuItem[data-disabled] {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-    .MenuItem[data-disabled]::before {
-      display: none;
-    }/* Two-line item: label over description, the same anatomy a Select option
-   with a description uses (OptionLeading / OptionDescription there). */.ItemLeading {
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  flex-direction: column;
-}.ItemDescription {
-  font-weight: var(--font-weight-normal);
-  color: var(--color-text-secondary);
-}.PressableInner {
-  position: relative;
-  display: flex;
-  /* Allow flex settings to be applied to the container, for className ergonomics */
-  align-items: inherit;
-  justify-content: inherit;
-  gap: inherit;
-}.ItemActions {
-  /* Prevent adding height to the MenuItem, and horizontally center */
-  display: flex;
-  align-items: center;
-  height: 0;
-  /* Magic number that pulls back the icon an equal gutter from the top/bottom */
-  margin-right: -5px;
-  opacity: 0;
-  transition-duration: var(--transition-duration-basic);
-  transition-property: opacity;
-  transition-timing-function: var(--cubic-enter);
-}.Separator {
-  height: 1px;
-  margin: var(--menu-separator-gutter);
-  background: var(--menu-separator-background-color);
-}.MenuLabel {
-  padding: var(--menu-item-padding);
-  padding-bottom: calc(var(--spacing) * 0.5);
-  color: var(--color-text-tertiary);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-semibold);
-  line-height: var(--line-height-xs);
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}.SubMenuItem {
-  justify-content: space-between;
-}.SubTriggerIcon {
-  /* slight visual offset of svg canvas */
-  margin-right: -2px;
-  opacity: 0.75;
-  transition: opacity var(--transition-duration-basic) var(--transition-ease-basic);
-}
-
-  .SubMenuItem[data-state="open"] .SubTriggerIcon,
-  .SubMenuItem[data-highlighted] .SubTriggerIcon {
-    opacity: 1;
-  }.RadioItem {
-  gap: calc(var(--spacing) * 2);
-}
-
-  :where([data-indicator-position="end"]) .RadioItem {
-    justify-content: space-between;
-    gap: calc(var(--spacing) * 3);
-  }.RadioIndicatorActive {
-  position: relative;
-  display: inline-grid;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-
-  /* Don't play the animation when entering */
-}
-
-  .RadioIndicatorActive::before,
-  .RadioIndicatorActive::after {
-    display: block;
-    content: "";
-    grid-column-start: 1;
-    grid-row-start: 1;
-    place-self: center center;
-    will-change: transform;
-  }
-
-  /* Filled circle */
-  .RadioIndicatorActive::before {
-    width: var(--menu-radio-indicator-size);
-    height: var(--menu-radio-indicator-size);
-    border-radius: var(--radius-full);
-    animation: fade-in 0.4s var(--cubic-enter);
-    background-color: var(--radio-group-indicator-background-color);
-  }
-
-  /*  Empty middle circle */
-  .RadioIndicatorActive::after {
-    width: var(--menu-radio-indicator-hole-size);
-    height: var(--menu-radio-indicator-hole-size);
-    border-radius: var(--radius-full);
-    animation: scale-in 0.4s var(--cubic-enter);
-    background-color: var(--radio-group-indicator-hole-background-color);
-  }
-  [data-entering] .RadioIndicatorActive::before,
-  [data-entering] .RadioIndicatorActive::after {
-    animation-duration: 0s;
-  }.RadioIndicator {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: var(--menu-radio-indicator-size);
-  height: var(--menu-radio-indicator-size);
-  padding: 0;
-  border: none;
-  border-radius: var(--radius-full);
-  background-color: transparent;
-  box-shadow: 0 0 0 1px var(--radio-group-indicator-border-color) inset;
-  cursor: pointer;
-  transition-duration: var(--transition-duration-basic);
-  transition-property: box-shadow;
-  transition-timing-function: var(--transition-ease-basic);
-}
-
-  [data-indicator-position="end"] .RadioIndicator {
-    order: 1;
-  }
-
-  [data-highlighted] .RadioIndicator {
-    box-shadow: 0 0 0 1px var(--radio-group-indicator-border-color-hover) inset;
-  }
-
-  [data-disabled] .RadioIndicator {
-    cursor: not-allowed;
-  }
-
-  /* Can't be focused here anyway */
-  .RadioIndicator:focus {
-    outline: none;
-  }@keyframes scale-in {
-  0% {
-    transform: scale(0);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}.CheckboxItem {
-  gap: calc(var(--spacing) * 2);
-}
-
-  .CheckboxItem:where([data-indicator-position="end"]) {
-    justify-content: space-between;
-    gap: calc(var(--spacing) * 3);
-  }.CheckboxIndicator {
-  flex-shrink: 0;
-  width: var(--menu-checkbox-indicator-size);
-  height: var(--menu-checkbox-indicator-size);
-}
-
-  [data-indicator-position="end"] .CheckboxIndicator {
-    order: 1;
-  }
-
-  [data-indicator-variant="solid"] .CheckboxIndicator {
-    border-radius: var(--radius-full);
-    box-shadow: 0 0 0 1px var(--radio-group-indicator-border-color) inset;
-  }.CheckboxCircle {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: var(--menu-checkbox-indicator-size);
-  height: var(--menu-checkbox-indicator-size);
-  border-radius: var(--radius-full);
-  animation: fade-in 0.5s var(--cubic-enter);
-  background-color: var(--radio-group-indicator-background-color);
-  color: var(--radio-group-indicator-hole-background-color);
-
-  /* Don't play the animation when entering */
-}
-  [data-entering] .CheckboxCircle::before,
-  [data-entering] .CheckboxCircle::after {
-    animation-duration: 0s;
-  }.MenuList[data-layout="horizontal"] {
-  --h-icon-size: 20px;
-  --h-padding: calc(var(--spacing) * 2);
-  --h-gap: calc(var(--spacing) * 1);
-
-  display: flex;
-  flex-direction: row;
-  min-width: auto;
-}
-
-  .MenuList[data-layout="horizontal"][data-size="sm"] {
-    --h-icon-size: 16px;
-    --h-padding: calc(var(--spacing) * 1.5);
-  }
-
-  .MenuList[data-layout="horizontal"][data-size="lg"] {
-    --h-icon-size: 24px;
-    --h-padding: calc(var(--spacing) * 2.5);
-  }
-
-  .MenuList[data-layout="horizontal"] .MenuItem {
-    flex: 1 0 auto;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: var(--h-gap);
-    padding: var(--h-padding);
-    text-align: center;
-    font-size: var(--h-icon-size);
-    line-height: 1;
-  }
-
-  .MenuList[data-layout="horizontal"] .PressableInner {
-    flex-direction: column;
-    align-items: center;
-    gap: var(--h-gap);
-    font-size: var(--font-text-2xs-size);
-    line-height: var(--font-text-2xs-line-height);
-  }
-
-    .MenuList[data-layout="horizontal"] .PressableInner > svg {
-      font-size: var(--h-icon-size);
-    }
-
-  .MenuList[data-layout="horizontal"] .MenuItemContent {
-    flex-direction: column;
-    align-items: center;
-    gap: var(--h-gap);
-    padding: var(--h-padding);
-    text-align: center;
-  }
-
-  .MenuList[data-layout="horizontal"] .Separator {
-    width: 1px;
-    height: auto;
-    align-self: stretch;
-    margin: calc(var(--spacing) * 1) 0;
-  }
-}

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

@@ -1,66 +0,0 @@
-@layer components {.Root {
-  position: relative;
-  --field-error-padding-inline: 0;
-  --field-error-margin-top: 0.5rem;
-}.Cells {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}.GroupGap {
-  width: 8px;
-}.Cell {
-  position: relative;
-  width: 44px;
-  height: 52px;
-  border-radius: var(--floating-input-border-radius);
-  border: 1px solid var(--floating-input-border-color);
-  background-color: var(--floating-input-background);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: text;
-  transition: border-color var(--floating-input-transition-duration) ease-in-out;
-}.Cell:hover:not([data-disabled]) {
-  border-color: var(--floating-input-border-color-hover);
-}.CellFocused {
-  border-color: var(--floating-input-border-color-focus);
-}.Cell[data-invalid] {
-  border-color: var(--floating-input-border-color-invalid);
-}.Cell[data-disabled] {
-  opacity: 0.5;
-  cursor: not-allowed;
-}.CellInput {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1;
-  color: var(--color-text);
-  background: transparent;
-  border: none;
-  outline: none;
-  padding: 0;
-  caret-color: var(--color-text);
-  border-radius: inherit;
-}.CellInput:disabled {
-  cursor: not-allowed;
-}.DotPlaceholder {
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background-color: var(--color-text-tertiary);
-  opacity: 0.5;
-  pointer-events: none;
-}.CellFilled .DotPlaceholder {
-  display: none;
-}.ErrorMessage {
-  margin-top: var(--field-error-margin-top);
-}@media (prefers-reduced-motion: reduce) {
-  .Cell {
-    transition: none;
-  }
-}
-}

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

@@ -1,82 +0,0 @@
-@layer components {.Transition {
-  /* CSS Modules requires a top-level class to create the string map entry */
-}.Popover {
-  z-index: 50;
-  overflow: auto;
-  width: var(--popover-width, auto);
-  min-width: var(--popover-min-width, 300px);
-  max-width: min(var(--popover-max-width, 700px), var(--radix-popover-content-available-width));
-  max-height: var(--radix-popover-content-available-height);
-  border-radius: var(--popover-radius);
-  background: var(--color-surface-elevated);
-  box-shadow: var(--shadow), var(--shadow-hairline);
-  -webkit-overflow-scrolling: touch;
-  transform-origin: var(--radix-popover-content-transform-origin);
-  will-change: transform;
-}
-
-  .Popover:focus {
-    outline: none;
-  }
-
-  .Popover[data-translucent] {
-    backdrop-filter: blur(16px);
-    background: linear-gradient(360deg, rgb(247 247 248 / 50%) 0%, rgb(247 247 248 / 100%) 100%);
-  }
-
-    :where([data-theme="dark"]) .Popover[data-translucent] {
-      background: linear-gradient(360deg, rgb(86 88 105 / 25%) 0%, rgb(86 88 105 / 49%) 100%);
-}
-
-  /* One-off animations */
-  .Popover[data-animate="shake"] {
-    animation: shake 0.4s ease;
-  }
-
-  /* Visibility transitions */
-  .Transition[data-entering] .Popover {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-
-  .Transition[data-entering-active] .Popover,
-  .Transition[data-entering][data-interrupted] .Popover {
-    opacity: 1;
-    transform: scale(1);
-    transition-duration: 0.35s;
-    transition-property: opacity, transform;
-    transition-timing-function: var(--cubic-enter);
-  }
-
-  .Transition[data-exiting] .Popover {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  .Transition[data-exiting-active] .Popover,
-  .Transition[data-exiting][data-interrupted] .Popover {
-    opacity: 0;
-    transform: scale(0.95);
-    transition-duration: 0.2s;
-    transition-property: opacity, transform;
-    transition-timing-function: var(--cubic-exit);
-  }@keyframes shake {
-  0% {
-    transform: translateX(0);
-  }
-
-  20%,
-  60% {
-    transform: translateX(-5px);
-  }
-
-  40%,
-  80% {
-    transform: translateX(5px);
-  }
-
-  100% {
-    transform: translateX(0);
-  }
-}
-}

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

@@ -1,34 +0,0 @@
-@layer components {.Root {
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-  height: var(--progress-height);
-  background: var(--progress-track-color);
-  border-radius: var(--progress-radius);
-  /* Prevent accidental clipping of the translateX indicator */
-  transform: translateZ(0);
-}.Indicator {
-  width: 100%;
-  height: 100%;
-  background: var(--progress-indicator-color);
-  border-radius: inherit;
-  transition: transform var(--progress-transition-duration) var(--progress-transition-ease);
-}
-
-  /* Indeterminate — sweeping animation */
-  .Indicator:where([data-indeterminate]) {
-    transform: translateX(-100%);
-    animation: progress-sweep var(--progress-indeterminate-duration) ease-in-out infinite;
-    width: 40%;
-  }@keyframes progress-sweep {
-  0% {
-    transform: translateX(-100%);
-  }
-  50% {
-    transform: translateX(150%);
-  }
-  100% {
-    transform: translateX(-100%);
-  }
-}
-}