@plexui/ui 0.19.1 → 0.20.1

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

@@ -1,168 +0,0 @@
-@layer components {.Avatar {
-  position: relative;
-  overflow: hidden;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-grow: 0;
-  flex-shrink: 0;
-  width: var(--avatar-size);
-  height: var(--avatar-size);
-  border-radius: var(--avatar-radius);
-  transition: background-color 0.3s var(--cubic-enter);
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-}
-
-  /* Interactive */
-  .Avatar[type="button"] {
-    cursor: pointer;
-  }
-
-    .Avatar[type="button"]:focus-visible {
-      outline: 2px solid var(--avatar-ring-color);
-      outline-offset: 2px;
-    }
-
-  .Avatar[data-variant="soft"] {
-    background-color: var(--avatar-background-color);
-    color: var(--avatar-text-color);
-  }
-
-    .Avatar[data-variant="soft"]:where([data-color="primary"]) {
-      --avatar-background-color: var(--color-background-primary-soft);
-      --avatar-text-color: var(--color-text-primary-soft);
-      --avatar-ring-color: var(--color-ring-primary-soft);
-    }
-
-    .Avatar[data-variant="soft"]:where([data-color="secondary"]) {
-      --avatar-background-color: var(--color-background-secondary-soft);
-      --avatar-text-color: var(--color-text-secondary-soft);
-      --avatar-ring-color: var(--color-ring-secondary-soft);
-    }
-
-    .Avatar[data-variant="soft"]:where([data-color="discovery"]) {
-      --avatar-background-color: var(--color-background-discovery-soft);
-      --avatar-text-color: var(--color-text-discovery-soft);
-      --avatar-ring-color: var(--color-ring-discovery-soft);
-    }
-
-    .Avatar[data-variant="soft"]:where([data-color="info"]) {
-      --avatar-background-color: var(--color-background-info-soft);
-      --avatar-text-color: var(--color-text-info-soft);
-      --avatar-ring-color: var(--color-ring-info-soft);
-    }
-
-    .Avatar[data-variant="soft"]:where([data-color="success"]) {
-      --avatar-background-color: var(--color-background-success-soft);
-      --avatar-text-color: var(--color-text-success-soft);
-      --avatar-ring-color: var(--color-ring-success-soft);
-    }
-
-    .Avatar[data-variant="soft"]:where([data-color="danger"]) {
-      --avatar-background-color: var(--color-background-danger-soft);
-      --avatar-text-color: var(--color-text-danger-soft);
-      --avatar-ring-color: var(--color-ring-danger-soft);
-    }
-
-  .Avatar[data-variant="solid"] {
-    background-color: var(--avatar-background-color);
-    color: var(--avatar-text-color);
-  }
-
-    .Avatar[data-variant="solid"]:where([data-color="primary"]) {
-      --avatar-background-color: var(--color-background-primary-solid);
-      --avatar-text-color: var(--color-text-primary-solid);
-      --avatar-ring-color: var(--color-ring-primary-solid);
-    }
-
-    .Avatar[data-variant="solid"]:where([data-color="secondary"]) {
-      --avatar-background-color: var(--color-background-secondary-solid);
-      --avatar-text-color: var(--color-text-secondary-solid);
-      --avatar-ring-color: var(--color-ring-secondary-solid);
-    }
-
-    .Avatar[data-variant="solid"]:where([data-color="discovery"]) {
-      --avatar-background-color: var(--color-background-discovery-solid);
-      --avatar-text-color: var(--color-text-discovery-solid);
-      --avatar-ring-color: var(--color-ring-discovery-solid);
-    }
-
-    .Avatar[data-variant="solid"]:where([data-color="info"]) {
-      --avatar-background-color: var(--color-background-info-solid);
-      --avatar-text-color: var(--color-text-info-solid);
-      --avatar-ring-color: var(--color-ring-info-solid);
-    }
-
-    .Avatar[data-variant="solid"]:where([data-color="success"]) {
-      --avatar-background-color: var(--color-background-success-solid);
-      --avatar-text-color: var(--color-text-success-solid);
-      --avatar-ring-color: var(--color-ring-success-solid);
-    }
-
-    .Avatar[data-variant="solid"]:where([data-color="danger"]) {
-      --avatar-background-color: var(--color-background-danger-solid);
-      --avatar-text-color: var(--color-text-danger-solid);
-      --avatar-ring-color: var(--color-ring-danger-solid);
-    }/*
- * Images with low contrast backgrounds should have clear edges,
- * but this border should not impact the size of the image, or
- * create fringed edges on various background colors. Using a transparency
- * on top of the image ensures crisp edges while also solving the issue of low contrast backgrounds.
- */.AvatarImageContainer {
-  border-radius: inherit;
-}
-
-  .AvatarImageContainer::after {
-    position: absolute;
-    inset: 0;
-    display: block;
-    border: 1px solid var(--avatar-image-border-color);
-    border-radius: inherit;
-    content: "";
-    pointer-events: none;
-  }.AvatarImage {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: inherit;
-  -o-object-fit: cover;
-     object-fit: cover;
-  opacity: 0;
-  /* Prevent awkward dragging of the image */
-  pointer-events: none;
-  transition: 0.15s ease;
-}
-
-  .AvatarImage[data-loaded] {
-    opacity: 1;
-  }.AvatarInitial {
-  font-size: calc(var(--avatar-size) * var(--avatar-font-size-scaling));
-  font-weight: var(--font-weight-semibold);
-}.AvatarOverflowCount {
-  font-size: calc(var(--avatar-size) * var(--avatar-overflow-font-size-scaling-three));
-  font-weight: var(--font-weight-semibold);
-}
-
-  .AvatarOverflowCount[data-letter-count="2"] {
-    font-size: calc(var(--avatar-size) * var(--avatar-overflow-font-size-scaling-two));
-  }
-
-  .AvatarOverflowCount[data-letter-count="1"] {
-    font-size: calc(var(--avatar-size) * var(--avatar-overflow-font-size-scaling-one));
-  }/*
- * The "+" sits very low in the baseline - this lifts it up 1px per 24px of size
- */.AvatarOverflowCountSymbol {
-  position: relative;
-  top: calc(-1 * var(--avatar-size) / 24);
-  margin-left: -1px;
-}.AvatarIcon {
-  display: block;
-  flex-grow: 0;
-  flex-shrink: 0;
-  font-size: calc(var(--avatar-size) * 0.7);
-}
-}

package/dist/es/components/Avatar/AvatarGroup.module.css

@@ -1,26 +0,0 @@
-@layer components {.Group {
-  display: flex;
-}
-
-  .Group > * ~ * {
-    box-shadow: 0 0 0 var(--avatar-group-cutout-width) var(--avatar-group-cutout-color);
-
-    /*
-     * Mask approach avoids the need to apply a specific color, however:
-     * -radial masks currently have very harsh anti-aliasing
-     * - sizing must be set statically, and cannot use % sizing. You trade one imperative value for another.
-     * mask-image: radial-gradient(circle 22px at -15px, transparent 99%, #fff 100%);
-     */
-  }
-
-  .Group[data-stack="start"] {
-    flex-direction: row-reverse;
-  }
-
-    .Group[data-stack="start"] > * ~ * {
-      margin-inline-end: var(--avatar-group-spacing);
-    }
-    .Group[data-stack="end"] > * ~ * {
-      margin-inline-start: var(--avatar-group-spacing);
-    }
-}

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

@@ -1,196 +0,0 @@
-@layer components {.Badge {
-  --indicator-size: var(--badge-indicator-size);
-
-  display: inline-flex;
-  align-items: center;
-  gap: calc(var(--spacing) * 1);
-  height: var(--badge-size);
-  padding: 0 var(--badge-gutter);
-  border-radius: var(--badge-radius);
-  font-size: var(--badge-font-size);
-  font-weight: var(--badge-font-weight);
-  letter-spacing: var(--badge-tracking);
-  white-space: nowrap;
-}
-
-  .Badge svg {
-    font-size: var(--badge-icon-font-size);
-  }
-
-    :where(.Badge svg:first-child:not(:only-child)) {
-      margin-left: var(--badge-icon-offset, -1px);
-    }
-
-    :where(.Badge svg:last-child:not(:only-child)) {
-      margin-right: var(--badge-icon-offset, -1px);
-    }
-
-  /* =============================================
-    Variants
-  ============================================= */
-  .Badge[data-variant="soft"] {
-    background-color: var(--badge-background-color);
-    color: var(--badge-text-color);
-  }
-
-    .Badge[data-variant="soft"]:where([data-color="secondary"]) {
-      --badge-background-color: var(--color-background-secondary-soft-alpha);
-      --badge-text-color: var(--color-text-secondary-soft);
-    }
-
-    .Badge[data-variant="soft"]:where([data-color="success"]) {
-      --badge-background-color: var(--color-background-success-soft-alpha);
-      --badge-text-color: var(--color-text-success-soft);
-    }
-
-    .Badge[data-variant="soft"]:where([data-color="warning"]) {
-      --badge-background-color: var(--color-background-warning-soft-alpha);
-      --badge-text-color: var(--color-text-warning-soft);
-    }
-
-    .Badge[data-variant="soft"]:where([data-color="danger"]) {
-      --badge-background-color: var(--color-background-danger-soft-alpha);
-      --badge-text-color: var(--color-text-danger-soft);
-    }
-
-    .Badge[data-variant="soft"]:where([data-color="info"]) {
-      --badge-background-color: var(--color-background-info-soft-alpha);
-      --badge-text-color: var(--color-text-info-soft);
-    }
-
-    .Badge[data-variant="soft"]:where([data-color="discovery"]) {
-      --badge-background-color: var(--color-background-discovery-soft-alpha);
-      --badge-text-color: var(--color-text-discovery-soft);
-    }
-
-    .Badge[data-variant="soft"]:where([data-color="caution"]) {
-      --badge-background-color: var(--color-background-caution-soft-alpha);
-      --badge-text-color: var(--color-text-caution-soft);
-    }
-
-  .Badge[data-variant="solid"] {
-    background-color: var(--badge-background-color);
-    color: var(--badge-text-color);
-  }
-
-    .Badge[data-variant="solid"]:where([data-color="secondary"]) {
-      --badge-background-color: var(--color-background-secondary-solid);
-      --badge-text-color: var(--color-text-secondary-solid);
-    }
-
-    .Badge[data-variant="solid"]:where([data-color="success"]) {
-      --badge-background-color: var(--color-background-success-solid);
-      --badge-text-color: var(--color-text-success-solid);
-    }
-
-    .Badge[data-variant="solid"]:where([data-color="warning"]) {
-      --badge-background-color: var(--color-background-warning-solid);
-      --badge-text-color: var(--color-text-warning-solid);
-    }
-
-    .Badge[data-variant="solid"]:where([data-color="danger"]) {
-      --badge-background-color: var(--color-background-danger-solid);
-      --badge-text-color: var(--color-text-danger-solid);
-    }
-
-    .Badge[data-variant="solid"]:where([data-color="info"]) {
-      --badge-background-color: var(--color-background-info-solid);
-      --badge-text-color: var(--color-text-info-solid);
-    }
-
-    .Badge[data-variant="solid"]:where([data-color="discovery"]) {
-      --badge-background-color: var(--color-background-discovery-solid);
-      --badge-text-color: var(--color-text-discovery-solid);
-    }
-
-    .Badge[data-variant="solid"]:where([data-color="caution"]) {
-      --badge-background-color: var(--color-background-caution-solid);
-      --badge-text-color: var(--color-text-caution-solid);
-    }
-
-  .Badge[data-variant="outline"] {
-    /* Avoids additive `width` compared to other variants */
-    box-shadow: 0 0 0 1px var(--badge-border-color) inset;
-    color: var(--badge-text-color);
-  }
-
-    .Badge[data-variant="outline"]:where([data-color="secondary"]) {
-      --badge-border-color: var(--color-border-secondary-outline);
-      --badge-text-color: var(--color-text-secondary-outline);
-    }
-
-    .Badge[data-variant="outline"]:where([data-color="success"]) {
-      --badge-border-color: var(--color-border-success-outline);
-      --badge-text-color: var(--color-text-success-outline);
-    }
-
-    .Badge[data-variant="outline"]:where([data-color="warning"]) {
-      --badge-border-color: var(--color-border-warning-outline);
-      --badge-text-color: var(--color-text-warning-outline);
-    }
-
-    .Badge[data-variant="outline"]:where([data-color="danger"]) {
-      --badge-border-color: var(--color-border-danger-outline);
-      --badge-text-color: var(--color-text-danger-outline);
-    }
-
-    .Badge[data-variant="outline"]:where([data-color="info"]) {
-      --badge-border-color: var(--color-border-info-outline);
-      --badge-text-color: var(--color-text-info-outline);
-    }
-
-    .Badge[data-variant="outline"]:where([data-color="discovery"]) {
-      --badge-border-color: var(--color-border-discovery-outline);
-      --badge-text-color: var(--color-text-discovery-outline);
-    }
-
-    .Badge[data-variant="outline"]:where([data-color="caution"]) {
-      --badge-border-color: var(--color-border-caution-outline);
-      --badge-text-color: var(--color-text-caution-outline);
-    }
-
-  /* =============================================
-    Sizes
-  ============================================= */
-  .Badge:where([data-size="sm"]) {
-    --badge-size: var(--badge-size-sm);
-    --badge-gutter: var(--badge-gutter-sm);
-    --badge-font-size: var(--badge-font-size-sm);
-    --badge-font-weight: var(--badge-font-weight-sm);
-    --badge-tracking: var(--badge-tracking-sm);
-    --badge-radius: var(--badge-radius-sm);
-    --badge-icon-font-size: var(--badge-icon-font-size-sm);
-    --badge-indicator-size: var(--badge-indicator-size-sm);
-  }
-
-  .Badge:where([data-size="md"]) {
-    --badge-size: var(--badge-size-md);
-    --badge-gutter: var(--badge-gutter-md);
-    --badge-font-size: var(--badge-font-size-md);
-    --badge-font-weight: var(--badge-font-weight-md);
-    --badge-tracking: var(--badge-tracking-md);
-    --badge-radius: var(--badge-radius-md);
-    --badge-icon-font-size: var(--badge-icon-font-size-md);
-    --badge-indicator-size: var(--badge-indicator-size-md);
-  }
-
-  .Badge:where([data-size="lg"]) {
-    --badge-size: var(--badge-size-lg);
-    --badge-gutter: var(--badge-gutter-lg);
-    --badge-font-size: var(--badge-font-size-lg);
-    --badge-font-weight: var(--badge-font-weight-lg);
-    --badge-tracking: var(--badge-tracking-lg);
-    --badge-radius: var(--badge-radius-lg);
-    --badge-icon-font-size: var(--badge-icon-font-size-lg);
-    --badge-indicator-size: var(--badge-indicator-size-lg);
-  }
-
-  /* =============================================
-    Pill
-  ============================================= */
-  .Badge:where([data-pill]) {
-    --badge-radius: var(--radius-full);
-
-    padding: 0 calc(var(--badge-gutter) * var(--control-gutter-pill-scaling));
-  }
-}