@plexui/styles 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,558 @@
+@layer components {.SelectControl {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--select-control-gap);
+  flex-shrink: 0;
+  height: var(--select-control-size);
+  padding: 0 var(--select-control-gutter);
+  border-radius: var(--select-control-radius);
+  color: var(--input-text-color);
+  cursor: pointer;
+  font-size: var(--select-control-font-size);
+  font-weight: var(--select-control-font-weight);
+  line-height: var(--font-text-md-line-height);
+  text-align: left;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: color;
+  transition-timing-function: var(--transition-ease-basic);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  white-space: nowrap;
+}
+
+  .SelectControl:where([data-optically-align="start"]) {
+    margin-inline-start: calc(var(--select-control-gutter) * -1);
+  }
+
+    .SelectControl:where([data-optically-align="start"])[data-pill] {
+      margin-inline-start: calc(
+        var(--select-control-gutter) * var(--control-gutter-pill-scaling) * -1
+      );
+    }
+
+  .SelectControl:where([data-optically-align="end"]) {
+    margin-inline-end: calc(var(--select-control-gutter) * -1);
+  }
+
+    .SelectControl:where([data-optically-align="end"])[data-pill] {
+      margin-inline-end: calc(
+        var(--select-control-gutter) * var(--control-gutter-pill-scaling) * -1
+      );
+    }
+
+  /* Background / shape of the button */
+  .SelectControl::before {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border-radius: inherit;
+    content: "";
+    transition-duration: var(--transition-duration-basic);
+    transition-property: opacity, background-color, transform, box-shadow, border-color;
+    transition-timing-function: var(--transition-ease-basic);
+    /* Composite layer seems required in some cases to avoid visual artifacts. */
+    will-change: transform;
+  }
+
+  /* Focus ring */
+  .SelectControl::after {
+    position: absolute;
+    inset: 0;
+    display: block;
+    border-radius: inherit;
+    content: "";
+    pointer-events: none;
+    transition-duration: var(--transition-duration-basic);
+    transition-property: transform;
+    transition-timing-function: var(--transition-ease-basic);
+    /* Composite layer seems required in some cases to avoid visual artifacts. */
+    will-change: transform;
+  }
+
+  .SelectControl:focus {
+    outline: none;
+  }
+    .SelectControl:focus-visible::after {
+      outline: 2px solid var(--button-ring-color, var(--color-ring));
+      outline-offset: var(--select-control-ring-offset, 2px);
+    }
+
+  /* =============================================
+    Sizes
+  ============================================= */
+  .SelectControl:where([data-size="3xs"]) {
+    --select-control-size: var(--control-size-3xs);
+    --select-control-gutter: var(--control-gutter-2xs);
+    --select-control-font-size: var(--control-font-size-sm);
+    --select-control-gap: 4px;
+    --select-control-radius: var(--control-radius-sm);
+    --start-icon-size: var(--control-icon-size-xs);
+    --start-icon-offset: 0;
+    --start-icon-pill-offset: 0;
+    --clear-size: 14px;
+    --clear-icon-size: 13px;
+    --clear-iso-size: 12px;
+    --clear-iso-icon-size: 10px;
+    --clear-iso-offset: -1px;
+    --clear-iso-pill-offset: -2px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: 0;
+    --dropdown-icon-width: 6px;
+    --dropdown-icon-height: 9px;
+    --dropdown-chevron-icon-width: 8px;
+    --dropdown-chevron-icon-height: 5px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1);
+    --indicator-wrapper-gutter: 0;
+  }
+
+  .SelectControl:where([data-size="2xs"]) {
+    --select-control-size: var(--control-size-2xs);
+    --select-control-gutter: var(--control-gutter-xs);
+    --select-control-font-size: var(--control-font-size-sm);
+    --select-control-gap: 6px;
+    --select-control-radius: var(--control-radius-sm);
+    --start-icon-size: var(--control-icon-size-sm);
+    --start-icon-offset: 0;
+    --start-icon-pill-offset: -1px;
+    --clear-size: 16px;
+    --clear-icon-size: 13px;
+    --clear-iso-size: 14px;
+    --clear-iso-icon-size: 12px;
+    --clear-iso-offset: -2px;
+    --clear-iso-pill-offset: -4px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: 0;
+    --dropdown-icon-width: 6px;
+    --dropdown-icon-height: 9px;
+    --dropdown-chevron-icon-width: 8px;
+    --dropdown-chevron-icon-height: 5px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1);
+    --indicator-wrapper-gutter: 0;
+  }
+
+  .SelectControl:where([data-size="xs"]) {
+    --select-control-size: var(--control-size-xs);
+    --select-control-gutter: var(--control-gutter-xs);
+    --select-control-font-size: var(--control-font-size-md);
+    --select-control-gap: 6px;
+    --select-control-radius: var(--control-radius-sm);
+    --start-icon-size: var(--control-icon-size-sm);
+    --start-icon-offset: -1px;
+    --start-icon-pill-offset: -1px;
+    --clear-size: 18px;
+    --clear-icon-size: 14px;
+    --clear-iso-size: 16px;
+    --clear-iso-icon-size: 12px;
+    --clear-iso-offset: -2px;
+    --clear-iso-pill-offset: -4px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: 0;
+    --dropdown-icon-width: 7px;
+    --dropdown-icon-height: 11px;
+    --dropdown-chevron-icon-width: 9px;
+    --dropdown-chevron-icon-height: 5px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1);
+    --indicator-wrapper-gutter: 0;
+  }
+
+  .SelectControl:where([data-size="sm"]) {
+    --select-control-size: var(--control-size-sm);
+    --select-control-gutter: var(--control-gutter-sm);
+    --select-control-font-size: var(--control-font-size-md);
+    --select-control-gap: 8px;
+    --select-control-radius: var(--control-radius-sm);
+    --start-icon-size: var(--control-icon-size-sm);
+    --start-icon-offset: -1px;
+    --start-icon-pill-offset: -2px;
+    --clear-size: 18px;
+    --clear-icon-size: 14px;
+    --clear-iso-size: 16px;
+    --clear-iso-icon-size: 12px;
+    --clear-iso-offset: -3px;
+    --clear-iso-pill-offset: -6px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: -2px;
+    --dropdown-icon-width: 7px;
+    --dropdown-icon-height: 11px;
+    --dropdown-chevron-icon-width: 9px;
+    --dropdown-chevron-icon-height: 5px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1);
+    --indicator-wrapper-gutter: 0;
+  }
+
+  .SelectControl:where([data-size="md"]) {
+    --select-control-size: var(--control-size-md);
+    --select-control-gutter: var(--control-gutter-md);
+    --select-control-font-size: var(--control-font-size-md);
+    --select-control-gap: 8px;
+    --select-control-radius: var(--control-radius-md);
+    --start-icon-size: var(--control-icon-size-md);
+    --start-icon-offset: -1px;
+    --start-icon-pill-offset: -4px;
+    --clear-size: 22px;
+    --clear-icon-size: 15px;
+    --clear-iso-size: 18px;
+    --clear-iso-icon-size: 14px;
+    --clear-iso-offset: -4px;
+    --clear-iso-pill-offset: -7px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: -2px;
+    --dropdown-icon-width: 8px;
+    --dropdown-icon-height: 12px;
+    --dropdown-chevron-icon-width: 11px;
+    --dropdown-chevron-icon-height: 6px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1);
+    --indicator-wrapper-gutter: calc(var(--spacing) * 0);
+  }
+
+  .SelectControl:where([data-size="lg"]) {
+    --select-control-size: var(--control-size-lg);
+    --select-control-gutter: var(--control-gutter-md);
+    --select-control-font-size: var(--control-font-size-md);
+    --select-control-gap: 8px;
+    --select-control-radius: var(--control-radius-lg);
+    --start-icon-size: var(--control-icon-size-md);
+    --start-icon-offset: -2px;
+    --start-icon-pill-offset: -4px;
+    --clear-size: 22px;
+    --clear-icon-size: 15px;
+    --clear-iso-size: 18px;
+    --clear-iso-icon-size: 14px;
+    --clear-iso-offset: -2px;
+    --clear-iso-pill-offset: -6px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: -2px;
+    --dropdown-icon-width: 8px;
+    --dropdown-icon-height: 12px;
+    --dropdown-chevron-icon-width: 11px;
+    --dropdown-chevron-icon-height: 6px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1.5);
+    --indicator-wrapper-gutter: calc(var(--spacing) * 0);
+  }
+
+  .SelectControl:where([data-size="xl"]) {
+    --select-control-size: var(--control-size-xl);
+    --select-control-gutter: var(--control-gutter-lg);
+    --select-control-font-size: var(--control-font-size-md);
+    --select-control-gap: 8px;
+    --select-control-radius: var(--control-radius-xl);
+    --start-icon-size: var(--control-icon-size-md);
+    --start-icon-offset: -2px;
+    --start-icon-pill-offset: -4px;
+    --clear-size: 24px;
+    --clear-icon-size: 16px;
+    --clear-iso-size: 18px;
+    --clear-iso-icon-size: 14px;
+    --clear-iso-offset: -2px;
+    --clear-iso-pill-offset: -7px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: -2px;
+    --dropdown-icon-width: 8px;
+    --dropdown-icon-height: 12px;
+    --dropdown-chevron-icon-width: 11px;
+    --dropdown-chevron-icon-height: 6px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1);
+    --indicator-wrapper-gutter: calc(var(--spacing) * 0.5);
+  }
+
+  .SelectControl:where([data-size="2xl"]) {
+    --select-control-size: var(--control-size-2xl);
+    --select-control-gutter: var(--control-gutter-lg);
+    --select-control-font-size: var(--control-font-size-lg);
+    --select-control-gap: 10px;
+    --select-control-radius: var(--control-radius-xl);
+    --start-icon-size: var(--control-icon-size-lg);
+    --start-icon-offset: -2px;
+    --start-icon-pill-offset: -4px;
+    --clear-size: 24px;
+    --clear-icon-size: 16px;
+    --clear-iso-size: 20px;
+    --clear-iso-icon-size: 15px;
+    --clear-iso-offset: -2px;
+    --clear-iso-pill-offset: -7px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: -2px;
+    --dropdown-icon-width: 8px;
+    --dropdown-icon-height: 12px;
+    --dropdown-chevron-icon-width: 11px;
+    --dropdown-chevron-icon-height: 6px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1.5);
+    --indicator-wrapper-gutter: calc(var(--spacing) * 1);
+  }
+
+  .SelectControl:where([data-size="3xl"]) {
+    --select-control-size: var(--control-size-3xl);
+    --select-control-gutter: var(--control-gutter-xl);
+    --select-control-font-size: var(--control-font-size-lg);
+    --select-control-gap: 10px;
+    --select-control-radius: var(--control-radius-xl);
+    --start-icon-size: var(--control-icon-size-lg);
+    --start-icon-offset: -2px;
+    --start-icon-pill-offset: -4px;
+    --clear-size: 24px;
+    --clear-icon-size: 16px;
+    --clear-iso-size: 20px;
+    --clear-iso-icon-size: 15px;
+    --clear-iso-offset: -2px;
+    --clear-iso-pill-offset: -7px;
+    --dropdown-icon-offset: 0;
+    --dropdown-icon-pill-offset: -3px;
+    --dropdown-icon-width: 9px;
+    --dropdown-icon-height: 13px;
+    --dropdown-chevron-icon-width: 12px;
+    --dropdown-chevron-icon-height: 7px;
+    --indicator-wrapper-gap: calc(var(--spacing) * 1.5);
+    --indicator-wrapper-gutter: calc(var(--spacing) * 1);
+  }
+
+  /* =============================================
+    Pill
+  ============================================= */
+  .SelectControl:where([data-pill]) {
+    --select-control-radius: var(--radius-full);
+
+    padding: 0 calc(var(--select-control-gutter) * var(--control-gutter-pill-scaling));
+  }
+
+  /* =============================================
+    Block
+  ============================================= */
+  .SelectControl:where([data-block]) {
+    width: 100%;
+  }
+
+  /* =============================================
+    Ghost variant
+  ============================================= */
+  .SelectControl[data-variant="ghost"] {
+    --select-control-background-color: var(--color-background-primary-ghost-hover);
+    --select-control-ring-offset: -1px;
+  }
+
+    .SelectControl[data-variant="ghost"]::before {
+      background-color: var(--select-control-background-color);
+      opacity: 0;
+      transform: scale(var(--scale));
+    }
+      .SelectControl[data-variant="ghost"][aria-expanded="true"]::before, .SelectControl[data-variant="ghost"][data-state="open"]::before {
+        opacity: 0.6;
+        transform: scale(1);
+      }
+      @media (hover: hover) and (pointer: fine) {
+        .SelectControl[data-variant="ghost"]:where(:not([data-disabled])):hover::before {
+          opacity: 1;
+          transform: scale(1);
+        }
+}
+          .SelectControl[data-variant="ghost"]:where(:not([data-disabled])):not(:has(button:active)):active::before {
+            --select-control-background-color: var(--color-background-primary-ghost-active);
+
+            opacity: 1;
+            transform: scale(var(--scale));
+          }
+
+          .SelectControl[data-variant="ghost"]:where(:not([data-disabled])):not(:has(button:active)):active::after {
+            transform: scale(var(--scale));
+          }
+        .SelectControl[data-variant="ghost"]:where(:not([data-disabled]))[data-invalid]::before {
+          --select-control-background-color: transparent;
+
+          box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
+          opacity: 1;
+          transform: scale(1);
+        }
+
+        @media (hover: hover) and (pointer: fine) {
+          .SelectControl[data-variant="ghost"]:where(:not([data-disabled]))[data-invalid]:hover::before {
+            --select-control-background-color: var(--color-background-primary-ghost-hover);
+          }
+}
+
+  /* =============================================
+    Soft variant
+  ============================================= */
+  .SelectControl[data-variant="soft"] {
+    --select-control-background-color: var(--color-background-primary-soft-alpha);
+  }
+
+    .SelectControl[data-variant="soft"]::before {
+      background-color: var(--select-control-background-color);
+    }
+      .SelectControl[data-variant="soft"][aria-expanded="true"]::before, .SelectControl[data-variant="soft"][data-state="open"]::before {
+        --select-control-background-color: var(--color-background-primary-soft-alpha-hover);
+      }
+      @media (hover: hover) and (pointer: fine) {
+        .SelectControl[data-variant="soft"]:where(:not([data-disabled])):hover::before {
+          --select-control-background-color: var(--color-background-primary-soft-alpha-hover);
+        }
+}
+          .SelectControl[data-variant="soft"]:where(:not([data-disabled])):not(:has(button:active)):active::before {
+            --select-control-background-color: var(--color-background-primary-soft-alpha-active);
+          }
+
+          .SelectControl[data-variant="soft"]:where(:not([data-disabled])):not(:has(button:active)):active::before,
+          .SelectControl[data-variant="soft"]:where(:not([data-disabled])):not(:has(button:active)):active::after {
+            transform: scale(var(--scale));
+          }
+
+      .SelectControl[data-variant="soft"]:where(:not([data-disabled]))[data-invalid]::before {
+        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
+      }
+
+  /* =============================================
+    Outline variant
+  ============================================= */
+  .SelectControl[data-variant="outline"] {
+    --select-control-border-color: var(--input-outline-border-color);
+    --select-control-ring-offset: -1px;
+  }
+
+    .SelectControl[data-variant="outline"]::before {
+      background-color: transparent;
+      box-shadow: 0 0 0 1px var(--select-control-border-color) inset;
+    }
+
+    .SelectControl[data-variant="outline"][aria-expanded="true"],
+    .SelectControl[data-variant="outline"][data-state="open"] {
+      --select-control-border-color: var(--input-outline-border-color-hover);
+    }
+      @media (hover: hover) and (pointer: fine) {.SelectControl[data-variant="outline"]:where(:not([data-disabled])):hover {
+        --select-control-border-color: var(--input-outline-border-color-hover);
+}
+}
+          .SelectControl[data-variant="outline"]:where(:not([data-disabled])):not(:has(button:active)):active::before {
+            transform: scale(var(--scale));
+          }
+
+          .SelectControl[data-variant="outline"]:where(:not([data-disabled])):not(:has(button:active)):active::after {
+            transform: scale(var(--scale));
+          }
+
+      .SelectControl[data-variant="outline"]:where(:not([data-disabled]))[data-invalid]::before {
+        --select-control-border-color: var(--input-border-color-invalid);
+      }
+
+  /* =============================================
+    Invalid
+  ============================================= */
+  .SelectControl:where([data-invalid]) {
+    --button-ring-color: var(--color-ring-danger);
+  }
+
+  /* =============================================
+    Hover
+  ============================================= */
+    @media (hover: hover) and (pointer: fine) {
+      .SelectControl:not([data-disabled]):hover .Clear,
+      .SelectControl:not([data-disabled]):hover .DropdownIcon {
+        opacity: 1;
+      }
+}
+
+  /* =============================================
+    Placeholder (e.g., "not `selected`")
+  ============================================= */
+  .SelectControl[data-selected="false"] {
+    color: var(--input-placeholder-text-color);
+    font-weight: var(--font-weight-normal);
+  }
+
+  /* =============================================
+    Disabled
+  ============================================= */
+  .SelectControl[data-disabled][data-variant] {
+    /* Matches disabled styling of Buttons, which is nice. */
+    --select-control-background-color: var(--color-background-disabled);
+    --select-control-border-color: var(--color-border-disabled);
+
+    color: var(--color-text-disabled);
+    cursor: not-allowed;
+  }
+
+    .SelectControl[data-disabled][data-variant] .DropdownIcon {
+      color: var(--color-text-disabled);
+    }
+
+    /* Don't press while disabled */
+    .SelectControl[data-disabled][data-variant]:active::before {
+      transform: scale(1);
+    }.TriggerText {
+  position: relative;
+  overflow: hidden;
+  flex: 1;
+  max-width: 100%;
+  color: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}.IndicatorWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--indicator-wrapper-gap);
+  padding-left: var(--indicator-wrapper-gutter);
+}.StartIcon {
+  position: relative;
+  width: var(--start-icon-size);
+  height: var(--start-icon-size);
+  margin-left: var(--start-icon-offset);
+}
+
+  :where(.SelectControl[data-pill]) .StartIcon {
+    margin-left: var(--start-icon-pill-offset);
+  }.Clear {
+  --button-size: var(--clear-size);
+  --button-icon-size: var(--clear-icon-size);
+
+  position: relative;
+  opacity: 0.75;
+}
+
+  .Clear[data-variant="solid"] {
+    --button-size: var(--clear-iso-size);
+    --button-icon-size: var(--clear-iso-icon-size);
+  }
+
+  [data-state="open"] .Clear,
+  .Clear:focus-visible {
+    opacity: 1;
+  }
+
+  .Clear[data-only-child] {
+    margin-right: var(--clear-iso-offset);
+  }
+
+    :where(.SelectControl[data-pill]) .Clear[data-only-child] {
+      margin-right: var(--clear-iso-pill-offset);
+    }.DropdownIcon {
+  position: relative;
+  width: var(--dropdown-icon-width, 8px);
+  height: var(--dropdown-icon-height, 12px);
+  margin-right: var(--dropdown-icon-offset);
+  color: var(--color-text-secondary);
+  opacity: 0.75;
+  transition-duration: var(--transition-duration-basic);
+  transition-property: opacity;
+  transition-timing-function: var(--transition-ease-basic);
+  will-change: opacity;
+}
+
+  :where(.SelectControl[data-pill]) .DropdownIcon {
+    margin-right: var(--dropdown-icon-pill-offset);
+  }
+
+  [data-state="open"] .DropdownIcon {
+    opacity: 1;
+  }.DropdownIconChevron {
+  width: var(--dropdown-chevron-icon-width, 11px);
+  height: var(--dropdown-chevron-icon-height, 6px);
+}/* Shares margin offset with dropdown indicator */.LoadingIndicator {
+  margin-right: var(--dropdown-icon-offset);
+}
+
+  :where(.SelectControl[data-pill]) .LoadingIndicator {
+    margin-right: var(--dropdown-icon-pill-offset);
+  }
+}

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

@@ -0,0 +1,16 @@
+@layer components {.Separator {
+  flex-shrink: 0;
+  background: var(--separator-color);
+}
+
+  .Separator[data-orientation="horizontal"] {
+    width: 100%;
+    height: var(--separator-thickness);
+  }
+
+  .Separator[data-orientation="vertical"] {
+    width: var(--separator-thickness);
+    height: 100%;
+    min-height: 1em;
+  }
+}

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

@@ -0,0 +1,43 @@
+@layer components {.Shimmer {
+
+  display: inline-block;
+  animation-delay: 0.6s;
+  animation-duration: 3s;
+  animation-iteration-count: infinite;
+  animation-name: shimmer;
+  background: currentcolor
+    linear-gradient(to left, currentcolor, var(--shimmer-highlight) 50%, currentcolor);
+  -webkit-background-clip: text;
+          background-clip: text;
+  background-position: -100% top;
+  background-repeat: no-repeat;
+  background-size: 50% 200%;
+  -webkit-text-fill-color: transparent;
+}.Shimmer, :where([data-theme="light"]) .Shimmer {
+
+--shimmer-highlight: var(--gray-200);
+}:where([data-theme="dark"]) .Shimmer {
+
+--shimmer-highlight: var(--gray-900);
+}
+
+  /* Preference: disable animations entirely, rather than leaving potentially *many* animations paused in the DOM. */
+  .Shimmer[data-idle] {
+    animation: none;
+    background: none;
+    background-clip: unset;
+    -webkit-text-fill-color: unset;
+  }@keyframes shimmer {
+  0% {
+    background-position: -100% top;
+  }
+
+  70% {
+    background-position: 250% top;
+  }
+
+  100% {
+    background-position: 250% top;
+  }
+}
+}