@plexui/styles 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,70 @@
+@layer components {.Root {
+  position: relative;
+  --field-error-padding-inline: 0;
+  --field-error-margin-top: 0.5rem;
+}.Cells {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 100%;
+}.GroupGap {
+  width: 8px;
+}.Cell {
+  position: relative;
+  /* 44px wide, narrower when the row does not fit (six cells on a 320px phone) */
+  flex: 0 1 44px;
+  min-width: 2rem;
+  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

@@ -0,0 +1,82 @@
+@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

@@ -0,0 +1,34 @@
+@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%);
+  }
+}
+}

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

@@ -0,0 +1,246 @@
+@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

@@ -0,0 +1,159 @@
+@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%;
+  }/* An option with a second line: the description sits under the label text,
+   past the indicator when the indicator leads */.RadioItemGroup {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+  .RadioItemGroup[data-block] {
+    display: flex;
+    width: 100%;
+  }.RadioDescription {
+  padding-inline-start: calc(var(--radio-group-indicator-size) + var(--radio-group-item-gap));
+  color: var(--color-text-secondary);
+  font-size: var(--font-text-xs-size);
+  line-height: var(--font-text-xs-line-height);
+}
+
+  .RadioItemGroup[data-orientation="right"] .RadioDescription {
+    padding-inline-start: 0;
+  }
+
+  .RadioDescription[data-disabled] {
+    opacity: 0.5;
+  }/* 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;
+  }
+}
+}