@plexui/ui 0.19.0 → 0.20.0

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

@@ -1,17 +0,0 @@
-@layer components {.Skeleton {
-  background-color: var(--skeleton-background);
-  border-radius: var(--skeleton-radius);
-  animation: skeleton-pulse 1.5s ease-in-out infinite;
-}.Skeleton[data-circle] {
-  border-radius: var(--radius-full);
-}@keyframes skeleton-pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-
-  50% {
-    opacity: 0.5;
-  }
-}
-}

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

@@ -1,203 +0,0 @@
-@layer components {
-  @media (hover: hover) and (pointer: fine) {
-    .SliderWrap:hover .Reset[data-hide="false"] {
-      cursor: pointer;
-      opacity: 1;
-      transition:
-        visibility 0ms,
-        opacity 250ms ease;
-      visibility: visible;
-    }
-  }.Slider {
-  position: relative;
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding-bottom: 6px;
-  touch-action: none;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-
-  /* Animate thumb position for single-mode programmatic changes */
-  .Slider .Thumb {
-    transition: left var(--slider-duration) var(--cubic-move);
-  }/* =============================================
-   Vertical orientation
-============================================= */.SliderWrap[data-orientation="vertical"] {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  height: var(--slider-vertical-height, 200px);
-}.SliderWrap[data-orientation="vertical"] .SliderLabel {
-  margin-bottom: 8px;
-}.SliderWrap[data-orientation="vertical"] .SliderContainer {
-  height: 100%;
-  width: auto;
-}.SliderWrap[data-orientation="vertical"] .Slider {
-  flex-direction: column;
-  width: auto;
-  height: 100%;
-  padding-bottom: 0;
-  padding-right: 6px;
-}.SliderWrap[data-orientation="vertical"] .Track {
-  width: 4px;
-  height: 100%;
-}.SliderWrap[data-orientation="vertical"] .Range {
-  width: 100%;
-  height: auto;
-}.SliderWrap[data-orientation="vertical"] .Thumb {
-  transition: none;
-}.Track {
-  position: relative;
-  flex-grow: 1;
-  width: 100%;
-  height: 4px;
-  border-radius: var(--radius-2xs);
-  background: var(--slider-track-color);
-}.Range {
-  position: absolute;
-  height: 100%;
-  border-radius: var(--radius-2xs);
-  background: var(--slider-range-color);
-  transition: right var(--slider-duration) var(--cubic-move);
-}.Thumb {
-  position: relative;
-  display: block;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: var(--gray-0);
-  box-shadow: inset 0 0 0 2px var(--slider-range-color);
-  cursor: grab;
-  outline: none;
-}
-
-  .Thumb:focus-visible {
-    box-shadow: inset 0 0 0 2px var(--green-600);
-    outline: none;
-  }
-
-  .Thumb:focus {
-    box-shadow: inset 0 0 0 2px var(--slider-range-color);
-  }
-
-  .Thumb:active {
-    cursor: grabbing;
-  }
-
-  .Thumb:disabled {
-    pointer-events: none;
-  }.SliderLabel {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 4px;
-  margin-bottom: 8px;
-  color: var(--color-text);
-  font-size: 14px;
-}.Reset {
-  /* Ensures cursor switches back immediately after clicking reset button. */
-  cursor: default;
-  opacity: 0;
-  transition:
-    visibility 0ms ease 250ms,
-    opacity 250ms ease;
-  visibility: hidden;
-}
-
-  /* Custom overrides outside the design system. Using the data attribute to win the specificity war. */
-  .Reset[data-size="2xs"] {
-    width: 22px;
-    height: 22px;
-  }
-
-    .Reset[data-size="2xs"] svg {
-      width: 14px;
-      height: 14px;
-    }.SliderValue {
-  overflow: hidden;
-  display: flex;
-  align-items: baseline;
-  justify-content: flex-end;
-  gap: 2px;
-  height: 26px;
-  padding: 0 4px;
-  border: 0.5px solid transparent;
-  border-radius: var(--radius-sm);
-  margin-right: -4px;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background: transparent;
-  cursor: text;
-  outline: none;
-  text-align: center;
-  transition: border-color 250ms ease;
-}
-
-  @media (min-width: 768px) {
-    .SliderValue {
-    height: 22px;
-    }
-  }
-
-  .SliderWrap:hover .SliderValue:not(:focus-within) {
-    border-color: var(--gray-200);
-  }
-
-  .SliderValue:focus-within {
-    border-color: var(--gray-500);
-  }.ValueInput {
-  height: 100%;
-  padding: 0;
-  border: 0;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background: transparent;
-  color: var(--color-text);
-  font-size: 16px;
-  font-variant-numeric: tabular-nums;
-  outline: none;
-  text-align: left;
-  transition: width 100ms ease;
-}
-
-  @media (min-width: 768px) {
-    .ValueInput {
-    font-size: 13px;
-    }
-  }.ValueUnit {
-  color: var(--color-text-secondary);
-  font-size: 12px;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}.SliderContainer {
-  position: relative;
-  width: 100%;
-}.MarksContainer {
-  position: relative;
-  width: 100%;
-  margin-top: 4px;
-}.Mark {
-  position: absolute;
-  color: var(--color-text);
-  font-size: 12px;
-  font-weight: normal;
-}.MarkLabel {
-  display: inline-block;
-  overflow-wrap: break-word;
-  text-align: center;
-  word-wrap: break-word;
-}/* =============================================
-   Range display (read-only value for range mode)
-============================================= */.RangeDisplay {
-  color: var(--color-text);
-  font-size: 13px;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}
-}

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

@@ -1,234 +0,0 @@
-@layer components {.StatCard {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  min-width: 0;
-  padding: var(--stat-card-padding);
-  border-radius: var(--stat-card-radius);
-  background: var(--stat-card-background);
-  box-shadow: 0 0 0 1px var(--stat-card-border-color) inset;
-  font-size: var(--stat-card-label-font-size);
-  line-height: var(--font-text-sm-line-height);
-}
-
-  .StatCard:where([data-size="sm"]) {
-    padding: var(--stat-card-sm-padding-block) var(--stat-card-sm-padding-inline);
-  }
-
-    .StatCard:where([data-size="sm"]) .Label {
-      font-size: var(--stat-card-sm-label-font-size);
-      line-height: var(--font-text-xs-line-height);
-    }
-
-    .StatCard:where([data-size="sm"]) .InfoIcon svg {
-      width: var(--stat-card-sm-info-icon-size);
-      height: var(--stat-card-sm-info-icon-size);
-    }
-
-    .StatCard:where([data-size="sm"]) .Value {
-      font-size: var(--stat-card-sm-value-font-size);
-      line-height: var(--font-heading-md-line-height);
-      letter-spacing: var(--font-heading-md-tracking);
-    }
-
-    .StatCard:where([data-size="sm"]) .Trend {
-      font-size: var(--stat-card-sm-trend-font-size);
-      line-height: var(--font-text-xs-line-height);
-    }
-
-    .StatCard:where([data-size="sm"]) .ValueRow {
-      margin-block-start: calc(var(--spacing) * 1.5);
-    }
-
-    .StatCard:where([data-size="sm"]) .Footer {
-      margin-block-start: calc(var(--spacing) * 0.5);
-    }
-
-    .StatCard:where([data-size="sm"]) .Description {
-      font-size: var(--stat-card-sm-description-font-size);
-      line-height: var(--font-text-xs-line-height);
-    }
-
-    .StatCard:where([data-size="sm"]) .TrendLabel {
-      font-size: var(--stat-card-sm-description-font-size);
-      line-height: var(--font-text-xs-line-height);
-    }
-
-    .StatCard:where([data-size="sm"]) .IconWrapper {
-      border-radius: var(--stat-card-sm-icon-wrapper-radius);
-    }
-
-      .StatCard:where([data-size="sm"]) .IconWrapper svg {
-        width: var(--stat-card-sm-icon-size);
-        height: var(--stat-card-sm-icon-size);
-      }
-
-    .StatCard:where([data-size="sm"]) .Body {
-      gap: calc(var(--spacing) * 2.5);
-    }
-
-  .StatCard:where([data-variant="accent"]) {
-    border-inline-start: var(--stat-card-accent-width) solid
-      var(--stat-card-accent-color, var(--color-background-primary-solid));
-  }
-
-    .StatCard:where([data-variant="accent"]):where([data-accent-color="primary"]) {
-      --stat-card-accent-color: var(--color-background-primary-solid);
-    }
-
-    .StatCard:where([data-variant="accent"]):where([data-accent-color="info"]) {
-      --stat-card-accent-color: var(--color-background-info-solid);
-    }
-
-    .StatCard:where([data-variant="accent"]):where([data-accent-color="success"]) {
-      --stat-card-accent-color: var(--color-background-success-solid);
-    }
-
-    .StatCard:where([data-variant="accent"]):where([data-accent-color="warning"]) {
-      --stat-card-accent-color: var(--color-background-warning-solid);
-    }
-
-    .StatCard:where([data-variant="accent"]):where([data-accent-color="danger"]) {
-      --stat-card-accent-color: var(--color-background-danger-solid);
-    }
-
-    .StatCard:where([data-variant="accent"]):where([data-accent-color="secondary"]) {
-      --stat-card-accent-color: var(--color-background-secondary-solid);
-    }
-
-    .StatCard:where([data-variant="accent"]):where([data-accent-color="discovery"]) {
-      --stat-card-accent-color: var(--color-background-discovery-solid);
-    }
-
-    .StatCard:where([data-variant="accent"]):where([data-accent-color="caution"]) {
-      --stat-card-accent-color: var(--color-background-caution-solid);
-    }.Header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: calc(var(--spacing) * 6);
-}.LabelRow {
-  display: flex;
-  align-items: center;
-  gap: calc(var(--spacing) * 1);
-  min-width: 0;
-}.Label {
-  min-width: 0;
-  overflow: hidden;
-  color: var(--stat-card-label-color);
-  font-size: var(--stat-card-label-font-size);
-  line-height: var(--font-text-sm-line-height);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}.InfoIcon {
-  display: inline-flex;
-  flex-shrink: 0;
-  color: var(--color-text-tertiary);
-  cursor: help;
-}
-
-  .InfoIcon svg {
-    width: var(--stat-card-info-icon-size);
-    height: var(--stat-card-info-icon-size);
-  }.Body {
-  display: flex;
-  align-items: flex-start;
-  gap: calc(var(--spacing) * 3);
-}.Content {
-  flex: 1;
-  min-width: 0;
-}
-
-  .Content .ValueRow {
-    margin-block-start: calc(var(--spacing) * 0.5);
-  }.IconWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  align-self: stretch;
-  aspect-ratio: 1;
-  border-radius: var(--stat-card-icon-wrapper-radius);
-  background: var(--stat-card-icon-wrapper-background);
-  color: var(--stat-card-icon-color);
-}
-
-  .IconWrapper svg {
-    width: var(--stat-card-icon-size);
-    height: var(--stat-card-icon-size);
-  }.HeaderEnd {
-  display: flex;
-  align-items: center;
-  gap: calc(var(--spacing) * 2);
-  flex-shrink: 0;
-}.ValueRow {
-  display: flex;
-  align-items: baseline;
-  gap: calc(var(--spacing) * 2);
-  margin-block-start: calc(var(--spacing) * 3);
-}.Value {
-  min-width: 0;
-  color: var(--stat-card-value-color);
-  font-size: var(--stat-card-value-font-size);
-  font-weight: var(--stat-card-value-font-weight);
-  line-height: var(--font-heading-xl-line-height);
-  letter-spacing: var(--font-heading-xl-tracking);
-}.Trend {
-  display: inline-flex;
-  flex-shrink: 0;
-  font-size: var(--stat-card-trend-font-size);
-  font-weight: var(--stat-card-trend-font-weight);
-  line-height: var(--font-text-sm-line-height);
-  white-space: nowrap;
-}.TrendPositive {
-  color: var(--stat-card-trend-positive-color);
-}.TrendNegative {
-  color: var(--stat-card-trend-negative-color);
-}.TrendNeutral {
-  color: var(--stat-card-trend-neutral-color);
-}.Footer {
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--spacing) * 0.5);
-  margin-block-start: calc(var(--spacing) * 2);
-}.TrendLabel {
-  color: var(--stat-card-description-color);
-  font-size: var(--stat-card-description-font-size);
-  font-weight: var(--font-weight-normal);
-  line-height: var(--font-text-sm-line-height);
-}.Description {
-  color: var(--stat-card-description-color);
-  font-size: var(--stat-card-description-font-size);
-  line-height: var(--font-text-sm-line-height);
-  text-wrap: pretty;
-}.Progress {
-  display: flex;
-  align-items: center;
-  gap: calc(var(--spacing) * 2);
-  margin-block-start: calc(var(--spacing) * 3);
-}.ProgressTrack {
-  flex: 1;
-  height: var(--stat-card-progress-height);
-  border-radius: var(--stat-card-progress-radius);
-  background: var(--stat-card-progress-background);
-  overflow: hidden;
-}.ProgressBar {
-  height: 100%;
-  border-radius: inherit;
-  background: var(--stat-card-progress-fill);
-}.ProgressLabel {
-  color: var(--stat-card-description-color);
-  font-size: var(--stat-card-description-font-size);
-  line-height: var(--font-text-sm-line-height);
-  white-space: nowrap;
-}.Sparkline {
-  margin-block-start: calc(var(--spacing) * 3);
-  color: var(--color-text-tertiary);
-}
-
-  .Sparkline svg {
-    display: block;
-    width: 100%;
-    height: auto;
-  }
-}

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

@@ -1,121 +0,0 @@
-@layer components {.Container {
-  display: flex;
-  font-size: var(--font-text-sm-size);
-  line-height: var(--font-text-sm-line-height);
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-
-  .Container[data-has-label] {
-    align-items: flex-start;
-  }
-
-  .Container[data-label-position="start"] {
-    flex-direction: row-reverse;
-  }.Track {
-  position: relative;
-  flex-shrink: 0;
-  width: var(--switch-track-width);
-  max-width: var(--switch-track-width);
-  height: var(--switch-track-height);
-  border: 0;
-  border-radius: var(--radius-full);
-  background: var(--switch-track-color);
-  cursor: pointer;
-  transition: background-color 250ms var(--cubic-move);
-}
-    @media (hover: hover) and (pointer: fine) {.Track:where(:not([data-disabled], [data-state="checked"])):hover {
-      background: var(--switch-track-color-hover);
-}
-}
-
-  [data-has-label] .Track {
-    /*
-     * Vertical alignment adjusting when necessary. Avoid using align-items: center; for long wrapping labels.
-     */
-    top: var(--switch-track-top-offset, 1px);
-  }
-
-  .Track:focus-visible {
-    outline: 2px solid var(--color-ring);
-    outline-offset: 2px;
-  }
-
-  .Track[data-state="checked"] {
-    background: var(--switch-track-color-checked);
-  }
-
-  .Track[data-disabled] {
-    background: var(--switch-track-color-disabled);
-    cursor: not-allowed;
-  }
-
-    .Track[data-disabled][data-state="checked"] {
-      background: var(--switch-track-color-checked-disabled);
-    }.Thumb {
-  position: absolute;
-  top: var(--switch-thumb-offset);
-  left: var(--switch-thumb-offset);
-  display: block;
-  width: var(--switch-thumb-size);
-  height: var(--switch-thumb-size);
-  border-radius: var(--radius-full);
-  background: var(--switch-thumb-color);
-  box-shadow: var(--switch-thumb-shadow);
-  transition: transform 250ms var(--cubic-move);
-}
-
-  [data-state="checked"] .Thumb {
-    transform: translateX(
-      calc(var(--switch-track-width) - var(--switch-thumb-size) - var(--switch-thumb-offset) * 2)
-    );
-  }
-
-  .Thumb[data-disabled] {
-    background: var(--switch-thumb-color-disabled);
-    box-shadow: none;
-  }.LabelGroup {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-
-  /* Use padding so that the spacing is intrinsic to the group, remaining clickable. */
-  [data-label-position="end"] .LabelGroup {
-    padding-left: var(--switch-label-gap);
-  }
-
-  [data-label-position="start"] .LabelGroup {
-    padding-right: var(--switch-label-gap);
-  }
-
-  [data-disabled] .LabelGroup {
-    cursor: not-allowed;
-  }.Label {
-  font-weight: var(--field-label-font-weight);
-  cursor: pointer;
-}
-
-  /* Use padding so that the spacing is intrinsic to the label, remaining clickable. */
-  [data-label-position="end"] > .Label {
-    padding-left: var(--switch-label-gap);
-  }
-
-  [data-label-position="start"] > .Label {
-    padding-right: var(--switch-label-gap);
-  }
-
-  [data-disabled] .Label {
-    cursor: not-allowed;
-  }.Description {
-  color: var(--color-text-secondary);
-  font-size: var(--font-text-xs-size);
-  line-height: var(--font-text-xs-line-height);
-  cursor: pointer;
-}
-
-  [data-disabled] .Description {
-    cursor: not-allowed;
-  }
-}

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

@@ -1,56 +0,0 @@
-@layer components {.TableWrapper {
-  position: relative;
-  width: 100%;
-  overflow: auto;
-}.Table {
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: collapse;
-  font-size: var(--table-cell-font-size);
-  line-height: var(--table-cell-line-height);
-  color: var(--table-cell-color);
-  text-align: left;
-}.TableHeader {
-  background: var(--table-header-background);
-}
-
-  .TableHeader :where(.TableRow) {
-    border-bottom: 1px solid var(--table-border-color);
-  }.TableHead {
-  height: var(--control-size-md);
-  padding: var(--table-cell-padding);
-  font-weight: var(--table-header-font-weight);
-  color: var(--table-header-color);
-  white-space: nowrap;
-  vertical-align: middle;
-}
-  .TableBody :where(.TableRow) {
-    border-bottom: 1px solid var(--table-border-color);
-    transition: background-color 0.1s ease;
-  }
-
-    .TableBody :where(.TableRow):last-child {
-      border-bottom: none;
-    }
-
-    .TableBody :where(.TableRow):hover {
-      background-color: var(--table-row-hover-background);
-    }.TableRow {}.TableCell {
-  padding: var(--table-cell-padding);
-  vertical-align: middle;
-}.TableFooter {
-  border-top: 1px solid var(--table-border-color);
-  background: var(--table-footer-background);
-  font-weight: var(--table-footer-font-weight);
-}
-
-  .TableFooter :where(.TableRow:last-child) {
-    border-bottom: none;
-  }.TableCaption {
-  padding: var(--table-cell-padding);
-  font-size: var(--table-caption-font-size);
-  color: var(--table-caption-color);
-  caption-side: bottom;
-  text-align: left;
-}
-}