@plexui/ui 0.19.0 → 0.20.0

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

@@ -1,246 +0,0 @@
-@layer components {.ProgressSteps {
-  width: 100%;
-
-  /* Local CSS vars, overridden by data-size */
-  --indicator-size: var(--progress-steps-indicator-size-md);
-  --row-gap: var(--progress-steps-row-gap-md);
-  --content-gap: var(--progress-steps-content-gap-md);
-  --step-padding: var(--progress-steps-step-padding-md);
-  --font-size: var(--progress-steps-font-size-md);
-  --icon-size: var(--progress-steps-icon-size-md);
-}
-
-  /* =============================================
-    Sizes
-  ============================================= */
-  .ProgressSteps:where([data-size="sm"]) {
-    --indicator-size: var(--progress-steps-indicator-size-sm);
-    --row-gap: var(--progress-steps-row-gap-sm);
-    --content-gap: var(--progress-steps-content-gap-sm);
-    --step-padding: var(--progress-steps-step-padding-sm);
-    --font-size: var(--progress-steps-font-size-sm);
-    --icon-size: var(--progress-steps-icon-size-sm);
-  }
-
-  .ProgressSteps:where([data-size="md"]) {
-    --indicator-size: var(--progress-steps-indicator-size-md);
-    --row-gap: var(--progress-steps-row-gap-md);
-    --content-gap: var(--progress-steps-content-gap-md);
-    --step-padding: var(--progress-steps-step-padding-md);
-    --font-size: var(--progress-steps-font-size-md);
-    --icon-size: var(--progress-steps-icon-size-md);
-  }
-
-  .ProgressSteps:where([data-size="lg"]) {
-    --indicator-size: var(--progress-steps-indicator-size-lg);
-    --row-gap: var(--progress-steps-row-gap-lg);
-    --content-gap: var(--progress-steps-content-gap-lg);
-    --step-padding: var(--progress-steps-step-padding-lg);
-    --font-size: var(--progress-steps-font-size-lg);
-    --icon-size: var(--progress-steps-icon-size-lg);
-  }
-
-  /* =============================================
-    Colors
-  ============================================= */
-  .ProgressSteps:where([data-color="success"]) {
-    --progress-steps-connector-color-completed: var(--color-background-success-solid);
-    --progress-steps-indicator-background-active: var(--color-background-success-solid);
-    --progress-steps-indicator-background-completed: var(--color-background-success-solid);
-    --progress-steps-indicator-text-active: var(--color-text-success-solid);
-    --progress-steps-indicator-text-completed: var(--color-text-success-solid);
-    --progress-steps-minimal-color-completed: var(--color-background-success-solid);
-  }.List {
-  display: flex;
-  flex-direction: column;
-  gap: 0; /* connector fills the gap */
-  width: 100%;
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-  .List:where([data-orientation="horizontal"]) {
-    display: grid;
-    gap: var(--row-gap);
-    grid-auto-columns: 1fr;
-    grid-auto-flow: column;
-  }/* =============================================
-  Step
-============================================= */.Step {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  gap: var(--content-gap);
-  min-height: calc(var(--indicator-size) + var(--row-gap));
-}[data-orientation="horizontal"] .Step {
-  overflow: visible; /* Allow connector to extend into next cell */
-  flex-direction: column;
-  align-items: center;
-  gap: var(--content-gap);
-  min-width: 0; /* Prevent grid blowout */
-  text-align: center;
-}.StepIndicator {
-  position: relative;
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: var(--indicator-size);
-  height: var(--indicator-size);
-  border-radius: var(--radius-full);
-  background: var(--progress-steps-indicator-background);
-  color: var(--progress-steps-indicator-text);
-  font-size: var(--font-size);
-  font-weight: var(--font-weight-medium);
-  transition-duration: var(--transition-duration-basic);
-  transition-property: background-color, color;
-  transition-timing-function: var(--transition-ease-basic);
-}
-
-  /* State: active */
-  [data-state="active"] .StepIndicator {
-    background: var(--progress-steps-indicator-background-active);
-    color: var(--progress-steps-indicator-text-active);
-  }
-
-  /* State: completed */
-  [data-state="completed"] .StepIndicator {
-    background: var(--progress-steps-indicator-background-completed);
-    color: var(--progress-steps-indicator-text-completed);
-  }
-
-  /* Icon sizing */
-  .StepIndicator svg:where(:not([data-no-autosize])) {
-    width: var(--icon-size);
-    height: var(--icon-size);
-  }.StepConnector {
-  position: absolute;
-  top: var(--indicator-size);
-  left: calc(var(--indicator-size) / 2 - var(--progress-steps-connector-width) / 2);
-  width: var(--progress-steps-connector-width);
-  height: calc(100% - var(--indicator-size) + var(--row-gap));
-  border-radius: var(--radius-full);
-  background: var(--progress-steps-connector-color);
-  transition: background-color var(--transition-duration-basic) var(--transition-ease-basic);
-
-  /* Dashed connector (incomplete steps only, vertical) */
-
-  /* Dashed connector (incomplete steps only, horizontal) */
-}
-
-  /* Completed state: connector is dark */
-  [data-state="completed"] .StepConnector {
-    background: var(--progress-steps-connector-color-completed);
-  }
-
-  /* Horizontal connector */
-  [data-orientation="horizontal"] .StepConnector {
-    top: calc(var(--indicator-size) / 2 - var(--progress-steps-connector-width) / 2);
-    left: calc(50% + var(--indicator-size) / 2);
-    width: calc(100% + var(--row-gap) - var(--indicator-size));
-    height: var(--progress-steps-connector-width);
-  }
-  [data-connector="dashed"] [data-state="active"] .StepConnector,
-  [data-connector="dashed"] [data-state="inactive"] .StepConnector {
-    background: repeating-linear-gradient(
-      to bottom,
-      var(--progress-steps-connector-color) 0,
-      var(--progress-steps-connector-color) var(--progress-steps-connector-dash-length),
-      transparent var(--progress-steps-connector-dash-length),
-      transparent
-        calc(var(--progress-steps-connector-dash-length) + var(--progress-steps-connector-dash-gap))
-    );
-  }
-  [data-orientation="horizontal"][data-connector="dashed"] [data-state="active"] .StepConnector,
-  [data-orientation="horizontal"][data-connector="dashed"] [data-state="inactive"] .StepConnector {
-    background: repeating-linear-gradient(
-      to right,
-      var(--progress-steps-connector-color) 0,
-      var(--progress-steps-connector-color) var(--progress-steps-connector-dash-length),
-      transparent var(--progress-steps-connector-dash-length),
-      transparent
-        calc(var(--progress-steps-connector-dash-length) + var(--progress-steps-connector-dash-gap))
-    );
-  }.StepContent {
-  min-width: 0; /* Allow text truncation */
-  padding-bottom: var(--row-gap);
-}
-
-  .StepContent:empty {
-    display: none;
-    padding-bottom: 0;
-  }[data-orientation="horizontal"] .StepContent {
-  overflow: visible;
-  width: 100%;
-  max-width: 100%;
-  padding-top: calc(var(--spacing) * 2);
-  padding-bottom: 0;
-}.StepTitle {
-  /* Center title vertically with indicator: (indicator-size - line-height) / 2 */
-  padding-top: calc((var(--indicator-size) - var(--font-text-sm-line-height)) / 2);
-  color: var(--progress-steps-title-color);
-  font-size: var(--font-text-sm-size);
-  font-weight: var(--progress-steps-title-font-weight);
-  line-height: var(--font-text-sm-line-height);
-}
-
-  [data-state="inactive"] .StepTitle {
-    color: var(--progress-steps-title-color-inactive);
-  }
-
-  [data-orientation="horizontal"] .StepTitle {
-    padding-top: 0;
-  }.StepDescription {
-  color: var(--progress-steps-description-color);
-  font-size: var(--font-text-sm-size);
-  line-height: var(--font-text-sm-line-height);
-}
-
-  [data-state="inactive"] .StepDescription {
-    color: var(--progress-steps-description-color-inactive);
-  }
-
-  /* Add top margin when following a Title */
-  .StepTitle + .StepDescription {
-    margin-top: calc(var(--spacing) * 0.5);
-  }
-
-  /* Center description with indicator when no Title */
-  .StepDescription:first-child {
-    padding-top: calc((var(--indicator-size) - var(--font-text-sm-line-height)) / 2);
-  }/* =============================================
-  Minimal Variant
-============================================= */.Minimal {
-  width: auto;
-  --segment-gap: var(--progress-steps-minimal-gap-md);
-  --segment-height: var(--progress-steps-minimal-height-md);
-  --segment-width: var(--progress-steps-minimal-width-md);
-}
-
-  .Minimal:where([data-size="sm"]) {
-    --segment-gap: var(--progress-steps-minimal-gap-sm);
-    --segment-height: var(--progress-steps-minimal-height-sm);
-    --segment-width: var(--progress-steps-minimal-width-sm);
-  }
-
-  .Minimal:where([data-size="lg"]) {
-    --segment-gap: var(--progress-steps-minimal-gap-lg);
-    --segment-height: var(--progress-steps-minimal-height-lg);
-    --segment-width: var(--progress-steps-minimal-width-lg);
-  }.MinimalList {
-  display: flex;
-  gap: var(--segment-gap);
-}.MinimalSegment {
-  width: var(--segment-width);
-  height: var(--segment-height);
-  border-radius: var(--progress-steps-minimal-radius);
-  background: var(--progress-steps-minimal-color-upcoming);
-  transition: background-color var(--transition-duration-basic) var(--transition-ease-basic);
-}
-
-  .MinimalSegment[data-state="completed"] {
-    background: var(--progress-steps-minimal-color-completed);
-  }
-}

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

@@ -1,137 +0,0 @@
-@layer components {.RadioGroup {
-  display: flex;
-  gap: var(--radio-group-row-gap);
-}
-
-  .RadioGroup:where([data-direction="col"]) {
-    flex-direction: column;
-    gap: var(--radio-group-col-gap);
-  }.RadioLabel {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: flex-start;
-  gap: var(--radio-group-item-gap);
-  cursor: pointer;
-  font-size: var(--radio-group-item-font-size);
-  line-height: var(--radio-group-item-line-height);
-}
-    .RadioLabel[data-orientation="right"]:where([data-block]) {
-      justify-content: space-between;
-    }
-
-  .RadioLabel[data-disabled] {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  .RadioLabel[data-block] {
-    display: flex;
-    width: 100%;
-  }/* Creates centered alignment with `line-height` of the label */.RadioIndicatorWrapper {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  height: var(--radio-group-item-line-height);
-}
-
-  /* Radix pushes the inputs off screen in a weird way that
-    messes with error overlays */
-  .RadioIndicatorWrapper > input {
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: 1px !important;
-    transform: none !important;
-  }
-
-  .RadioLabel[data-orientation="right"] .RadioIndicatorWrapper {
-    order: 1;
-  }.RadioItem {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: var(--radio-group-indicator-size);
-  height: var(--radio-group-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);
-}
-    @media (hover: hover) and (pointer: fine) {.RadioItem:where(:not([data-disabled])):hover {
-      box-shadow: 0 0 0 1px var(--radio-group-indicator-border-color-hover) inset;
-}
-}
-
-  .RadioItem[data-disabled] {
-    cursor: not-allowed;
-  }
-
-  .RadioItem:focus {
-    outline: none;
-  }
-
-  .RadioItem:focus-visible {
-    outline: 2px solid var(--color-ring);
-    outline-offset: 2px;
-  }.RadioIndicator {
-  position: relative;
-  display: inline-grid;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-}
-
-  .RadioIndicator::before,
-  .RadioIndicator::after {
-    display: block;
-    content: "";
-    grid-column-start: 1;
-    grid-row-start: 1;
-    place-self: center center;
-    will-change: transform;
-  }
-
-  /* Filled circle */
-  .RadioIndicator::before {
-    width: var(--radio-group-indicator-size);
-    height: var(--radio-group-indicator-size);
-    border-radius: var(--radius-full);
-    animation: fade-in 0.6s var(--cubic-enter);
-    background-color: var(--radio-group-indicator-background-color);
-  }
-
-  /*  Empty middle circle */
-  .RadioIndicator::after {
-    width: var(--radio-group-indicator-hole-size);
-    height: var(--radio-group-indicator-hole-size);
-    border-radius: var(--radius-full);
-    animation: scale-in 0.6s var(--cubic-enter);
-    background-color: var(--radio-group-indicator-hole-background-color);
-  }@keyframes scale-in {
-  0% {
-    transform: scale(0);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-}

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

@@ -1,310 +0,0 @@
-@layer components {/* =============================================
-  Custom Select
-============================================= */.Menu {
-  /* Top-level selector needs to exist */
-}.MenuList {
-  z-index: 50;
-  /* Default to the width of the trigger */
-  width: var(--select-list-width, var(--radix-popover-trigger-width));
-  min-width: var(--select-list-min-width, var(--radix-popover-trigger-width));
-  max-width: var(--select-list-max-width, none);
-  border-radius: var(--menu-radius);
-  background: var(--color-surface-elevated);
-  box-shadow: var(--shadow), var(--shadow-hairline);
-  font-size: var(--menu-font-size);
-  line-height: var(--menu-line-height);
-  /* The transform-origin computed from the content and arrow positions/offsets */
-  transform-origin: var(--radix-popover-content-transform-origin);
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  will-change: opacity, 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);
-  }.MenuInner {
-  display: flex;
-  flex-direction: column;
-  /* The remaining height between the trigger and the boundary edge */
-  max-height: min(
-    var(--select-list-max-height, 400px),
-    var(--radix-popover-content-available-height)
-  );
-}
-
-  .MenuInner:focus {
-    outline: 0;
-  }/* =============================================
-  Options
-============================================= */.OptionsList {
-  overflow: auto;
-  flex: 1;
-  padding: var(--menu-gutter);
-}.Option {
-  position: relative;
-  padding: var(--menu-item-padding);
-  cursor: pointer;
-  overflow-wrap: anywhere;
-  /* When keyboard navigation snaps item into scrollable view, ensure 20px of spacing to show additional items below */
-  scroll-margin: 15px 0;
-}
-
-  .Option::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;
-  }
-
-  .Option[data-selected] {
-    font-weight: var(--font-weight-semibold);
-  }
-
-  /* Options with a description automatically keep their title semibold in
-     every state (highlighted, selected, idle). This is the "item + subtitle"
-     pattern — don't make consumers (or AI generating demos) remember to pass
-     `optionClassName="font-semibold"`. OptionDescription's own rule below
-     keeps the description text at normal weight. */
-  .Option:has(.OptionDescription) {
-    font-weight: var(--font-weight-semibold);
-  }
-    .Option[data-highlight]::before {
-      opacity: 1;
-      transform: scale(1);
-    }
-
-    .Option[data-highlight]:active::before {
-      transform: scale(var(--scale, 0.98));
-    }
-
-  .Option[data-disabled] {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-    .Option[data-disabled]::before {
-      display: none;
-    }/* Option layout — three-column flex row so title+description stack as a
-   leading group, and the indicator (start or end) sits as a dedicated
-   trailing/leading column. This is what makes description never leak under
-   the end-position checkmark column. Do not inline indicators inside
-   `.OptionInner` again — it breaks the layout contract consumers rely on. */.PressableInner {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  gap: var(--menu-item-gap);
-}.OptionLeading {
-  display: flex;
-  flex: 1;
-  min-width: 0;
-  flex-direction: column;
-}.OptionInner {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--menu-item-gap);
-}/* End-position indicator gets pushed against the right edge of PressableInner.
-   Start-position sits at the natural first column. */.PressableInner > .OptionIndicatorSlot[data-position="end"] {
-  margin-left: auto;
-}.OptionCheck {
-  display: block;
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-}.OptionIndicatorSlot {
-  display: flex;
-  align-items: center;
-  flex-grow: 0;
-  flex-shrink: 0;
-  width: 16px;
-  /* Follow the title's first line box, independently of description height. */
-  height: 1lh;
-}.OptionDescription {
-  font-weight: var(--font-weight-normal);
-  color: var(--color-text-secondary);
-}/* Group heading — a section label, not an option. Same size and weight as the
-   options made it read as a disabled row, so it carries its own type level:
-   smaller, semibold, secondary color. A rule between sections and the extra
-   space above it do the separating, the way a grouped menu does it on GitHub
-   (Sort by / Order). The rule bleeds past the list gutter to the popover edge
-   and the first section never gets one. */.OptionGroupHeading {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--menu-item-gap);
-  padding: var(--menu-item-padding);
-  margin-top: calc(var(--spacing) * 2);
-  font-size: var(--font-text-xs-size);
-  line-height: var(--font-text-xs-line-height);
-  font-weight: var(--font-weight-semibold);
-  color: var(--color-text-secondary);
-}
-
-  .OptionGroupHeading:not(:first-child)::before {
-    position: absolute;
-    top: calc(calc(var(--spacing) * 1) * -1);
-    inset-inline: calc(var(--menu-gutter) * -1);
-    border-top: 1px solid var(--menu-separator-background-color);
-    content: "";
-  }
-
-  .OptionGroupHeading:first-child {
-    margin-top: 0;
-  }.OptionHardLimitHeading {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--menu-item-gap);
-  padding: var(--menu-item-padding);
-  color: var(--color-text-secondary);
-}.OptionsLimit {
-  color: var(--link-primary-text-color);
-  font-weight: var(--font-weight-medium);
-}/* =============================================
-  Action
-============================================= */.Action {
-  position: relative;
-  padding: var(--menu-item-padding);
-  border-radius: calc(var(--menu-radius) - var(--menu-gutter));
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-
-  /* Background shape */
-  .Action::before {
-    position: absolute;
-    inset: 0;
-    display: block;
-    border-radius: calc(var(--menu-radius) - var(--menu-gutter));
-    content: "";
-    opacity: 0;
-    transform: scale(var(--scale, 0.98));
-    transition-duration: 0.15s;
-    transition-property: opacity, background-color, transform;
-    transition-timing-function: var(--cubic-enter);
-    will-change: opacity, transform;
-  }
-  .Action::before, :where([data-theme="light"]) .Action::before {
-background: var(--gray-100);
-}
-  :where([data-theme="dark"]) .Action::before {
-background: var(--gray-25);
-}
-
-  /* Focus ring */
-  .Action::after {
-    position: absolute;
-    inset: 0;
-    display: block;
-    border-radius: calc(var(--menu-radius) - var(--menu-gutter));
-    content: "";
-    pointer-events: none;
-    transition-duration: 0.15s;
-    transition-property: box-shadow, transform;
-    transition-timing-function: var(--cubic-enter);
-  }
-
-  @media (hover: hover) and (pointer: fine) {
-    .Action:hover::before {
-      opacity: 1;
-      transform: scale(1);
-    }
-}
-
-  .Action:focus {
-    outline: none;
-  }
-
-  .Action:focus-visible::after {
-    box-shadow: 0 0 0 2px var(--color-ring);
-  }
-
-  .Action:active::before,
-  .Action:active::after {
-    transform: scale(var(--scale, 0.98));
-  }
-
-  .Action svg {
-    flex-shrink: 0;
-    width: 16px;
-    height: 16px;
-  }.ActionInner {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--menu-item-gap);
-}.ActionsContainer {
-  position: relative;
-  padding: var(--menu-gutter);
-  border-top: 1px solid var(--menu-separator-background-color);
-}
-
-  .ActionsContainer::before {
-    position: absolute;
-    bottom: 100%;
-    left: 0;
-    width: 100%;
-    height: 9px;
-    margin-bottom: 1px;
-    background: var(--color-surface-elevated);
-    content: "";
-    -webkit-mask-image: linear-gradient(180deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
-            mask-image: linear-gradient(180deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 100%));
-    pointer-events: none;
-  }/* =============================================
-  Search
-============================================= */.Search {
-  position: relative;
-  padding: var(--menu-gutter) var(--menu-gutter) 0;
-}/* Override fill for Search icon to apply fill-secondary class correctly *//* Need !important to override fill="currentColor" attribute in SVG path *//* Target SVG with fill prop and its path children */.Search svg[fill],
-.Search svg[fill] path {
-  fill: var(--color-text-secondary) !important;
-}/* Also target by class for fallback */.Search svg.fill-secondary,
-.Search svg.fill-secondary path {
-  fill: var(--color-text-secondary) !important;
-}.SearchEmpty {
-  padding: var(--menu-gutter);
-  margin: calc(var(--spacing) * 4) 0;
-}
-
-  .SearchEmpty[data-text-only] {
-    color: var(--color-text-secondary);
-    text-align: center;
-  }
-}