@plexui/ui 0.19.0 → 0.20.0

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

@@ -1,320 +0,0 @@
-@layer components {.Container {
-  position: relative;
-  overflow: hidden;
-
-  /* The height is the sum of all rows plus spacing, which is N+1 to account for the top spacing for the first row */
-
-  /* prettier-ignore */
-  min-height: calc(
-        (var(--min-rows) * var(--tag-input-height)) + ((var(--min-rows) + 1) * var(--tag-input-tag-spacing))
-    );
-  padding: var(--tag-input-tag-spacing);
-  border-radius: var(--tag-input-radius, var(--radius-md));
-  box-shadow: 0 0 0 1px var(--input-outline-border-color) inset;
-  color: var(--input-text-color);
-  cursor: text;
-  outline: 0;
-  transition: box-shadow 0.15s ease;
-
-  /* =============================================
-    Sizes
-    -----------------------------------------------
-    Each size sets the inner input height + the
-    container padding/gap (`--tag-input-tag-spacing`).
-    The sum `(rows × tag-input-height) + ((rows + 1) × tag-input-tag-spacing)`
-    equals the matching Input size when rows=1, so a
-    TagInput[size=md] sits flush next to an Input[size=md]
-    in a horizontal layout.
-
-    Sizes also re-tune the chip itself via
-    `--tag-input-tag-{height,gutter,font-size}` so the
-    inner pills stay proportional to the container.
-    ============================================= */
-}
-
-  .Container[data-disabled] {
-    pointer-events: none;
-  }
-    @media (hover: hover) and (pointer: fine) {.Container:not([data-disabled]):hover, :where([data-theme="light"]) .Container:not([data-disabled]):hover {
-box-shadow: 0 0 0 1px var(--gray-300) inset;
-}:where([data-theme="dark"]) .Container:not([data-disabled]):hover {
-box-shadow: 0 0 0 1px var(--gray-500) inset;
-}
-}
-
-    .Container:not([data-disabled])[data-focused] {
-      box-shadow: 0 0 0 1px var(--input-outline-border-color-focus) inset;
-    }
-
-  .Container[data-empty] {
-    padding: var(--tag-input-tag-spacing) 12px;
-  }
-
-  /* =============================================
-    Pill — fully-rounded for the single-row state.
-    ----------------------------------------------
-    The radius is locked to half of a single-row
-    container height (= half of `--control-size-*`).
-    With `radius-full` the container would stay an
-    ellipse when the chip list wraps to a second/third
-    row, which looks bad. Computing it from the
-    single-row height keeps the corners visually pill
-    on row 1 and stays sane on multi-row.
-    ============================================= */
-  .Container[data-pill] {
-    border-radius: calc(
-      (var(--tag-input-height) + 2 * var(--tag-input-tag-spacing)) / 2
-    );
-  }
-
-    .Container[data-pill][data-empty] {
-      padding: var(--tag-input-tag-spacing) 16px;
-    }
-
-  /* 20 + 4 + 4 = 28 */
-  .Container:where([data-size="sm"]) {
-    --tag-input-font-size: var(--control-font-size-md);
-    --tag-input-height: 20px;
-    --tag-input-tag-spacing: 4px;
-    --tag-input-tag-gutter: var(--control-gutter-2xs);
-    --tag-input-radius: var(--control-radius-sm);
-  }
-
-  /* 20 + 6 + 6 = 32 */
-  .Container:where([data-size="md"]) {
-    --tag-input-font-size: var(--control-font-size-md);
-    --tag-input-height: 20px;
-    --tag-input-tag-spacing: 6px;
-    --tag-input-radius: var(--control-radius-md);
-  }
-
-  /* 24 + 6 + 6 = 36 */
-  .Container:where([data-size="lg"]) {
-    --tag-input-font-size: var(--control-font-size-md);
-    --tag-input-height: 24px;
-    --tag-input-tag-spacing: 6px;
-    --tag-input-radius: var(--control-radius-lg);
-  }
-
-  /* 24 + 8 + 8 = 40 */
-  .Container:where([data-size="xl"]) {
-    /* SelectControl xl uses control-font-size-md (not -lg), so the chip + input
-       text inside TagInput xl matches Select xl. */
-    --tag-input-font-size: var(--control-font-size-md);
-    --tag-input-height: 24px;
-    --tag-input-tag-spacing: 8px;
-    --tag-input-radius: var(--control-radius-xl);
-  }
-
-  /* 28 + 8 + 8 = 44 */
-  .Container:where([data-size="2xl"]) {
-    --tag-input-font-size: var(--control-font-size-lg);
-    --tag-input-height: 28px;
-    --tag-input-tag-spacing: 8px;
-    --tag-input-radius: var(--control-radius-xl);
-  }
-
-  /* 32 + 8 + 8 = 48 */
-  .Container:where([data-size="3xl"]) {
-    --tag-input-font-size: var(--control-font-size-lg);
-    --tag-input-height: 32px;
-    --tag-input-tag-spacing: 8px;
-    --tag-input-radius: var(--control-radius-xl);
-  }.TagInput {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--tag-input-tag-spacing);
-}.Tag {
-  overflow: hidden;
-  display: inline-flex;
-  align-items: center;
-  gap: calc(var(--spacing) * 1);
-  /* Match the inner input height so a chip-filled container is exactly
-     the same height as an empty one (= matching Input[size] of the same size).
-     Override per-size via `--tag-input-tag-height` if a non-square chip is needed. */
-  height: var(--tag-input-tag-height, var(--tag-input-height));
-  /* Right padding equals the chip's vertical padding so the close button
-     sits with equal whitespace on top, bottom, and right. */
-  padding: 0 calc((var(--tag-input-tag-height, var(--tag-input-height)) - var(--control-icon-size-sm)) / 2) 0
-    var(--tag-input-tag-gutter, var(--control-gutter-xs));
-  /* Concentric with the container: chip radius = container radius − inner padding.
-     Falls through every size automatically because both vars are set per-size. */
-  border-radius: var(--tag-input-tag-radius, calc(var(--tag-input-radius) - var(--tag-input-tag-spacing)));
-  /* Match SelectControl text-size for the same `size` (md/lg=14, xl/2xl/3xl=16);
-     `--tag-input-font-size` is set per-size to the same token Select uses. */
-}
-
-  .Container[data-pill] .Tag {
-    /* Chip height is fixed (single row) so half of it gives a true pill,
-       same idea as the container's pill rule above. */
-    border-radius: calc(var(--tag-input-tag-height, var(--tag-input-height)) / 2);
-  }
-
-  .Tag {
-  background-color: var(--color-background-secondary-soft-alpha);
-  color: var(--color-text-secondary-soft);
-  font-size: var(--tag-input-tag-font-size, var(--tag-input-font-size));
-  font-weight: var(--button-font-weight);
-  cursor: pointer;
-  white-space: nowrap;
-  outline: none;
-  transition: background-color 0.15s ease;
-}
-
-  @media (hover: hover) and (pointer: fine) {.Tag:hover {
-    background-color: var(--color-background-secondary-soft-alpha-hover);
-}
-}
-
-  .Tag:focus {
-    background-color: var(--color-background-secondary-soft-alpha-hover);
-  }
-
-  .Tag:active {
-    background-color: var(--color-background-secondary-soft-alpha-active);
-  }
-
-  .Container[data-disabled] .Tag {
-    color: var(--color-text-tertiary);
-  }
-
-  .Tag[data-invalid] {
-    background-color: var(--color-background-danger-soft-alpha);
-    color: var(--color-text-danger-soft);
-  }
-
-    @media (hover: hover) and (pointer: fine) {.Tag[data-invalid]:hover {
-      background-color: var(--color-background-danger-soft-alpha-hover);
-}
-}
-
-    .Tag[data-invalid]:focus {
-      background-color: var(--color-background-danger-soft-alpha-hover);
-    }
-
-    .Tag[data-invalid]:active {
-      background-color: var(--color-background-danger-soft-alpha-active);
-    }
-
-  .Tag[data-duplicate] {
-    animation: shake 0.5s ease;
-  }
-
-  .Tag svg {
-    font-size: var(--control-icon-size-sm);
-  }.TagRemove {
-  display: flex;
-  align-items: center;
-  color: inherit;
-  opacity: 0.5;
-  transition: opacity 0.15s ease;
-}
-
-  @media (hover: hover) and (pointer: fine) {.TagRemove:hover {
-    opacity: 1;
-}
-}.TagValue {
-  white-space: nowrap;
-}.InputContainer {
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-  max-width: 100%;
-}.InputWrapper {
-  overflow: hidden;
-  width: 100%;
-}.InputMeasure {
-  position: absolute;
-  font-size: var(--tag-input-font-size);
-  visibility: hidden;
-  white-space: nowrap;
-}.Input {
-  display: block;
-  min-width: 20px;
-  height: var(--tag-input-height);
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  background: none;
-  box-shadow: none;
-  color: var(--color-text);
-  font-size: var(--tag-input-font-size);
-  line-height: 1.4;
-  white-space: nowrap;
-
-  /* Prevent auto-fill coloring */
-}
-
-  .Input:focus {
-    outline: 0;
-  }
-
-  .Input::-moz-placeholder {
-    color: var(--color-text-tertiary);
-  }
-
-  .Input::placeholder {
-    color: var(--color-text-tertiary);
-  }
-
-  .Input:disabled {
-    color: var(--color-text-tertiary);
-  }
-  .Input:-webkit-autofill, .Input:-webkit-autofill:focus, .Input:-webkit-autofill:hover {
-    /*
-     * Prevent all color changes by delaying their effect for a very long time
-     * We cannot beat the specificity of user-agent stylesheet declarations, so we must delay them.
-     */
-    color: var(--color-text) !important;
-    -webkit-text-fill-color: var(--color-text) !important;
-    -webkit-transition:
-      background-color 0s 50000s,
-      box-shadow 0s 50000s,
-      filter 0s 50000s !important;
-    transition:
-      background-color 0s 50000s,
-      box-shadow 0s 50000s,
-      filter 0s 50000s !important;
-}
-  .Input:-webkit-autofill-and-obscured, .Input:-webkit-autofill-strong-password, .Input:-webkit-autofill-strong-password-viewable {
-    /*
-     * Prevent all color changes by delaying their effect for a very long time
-     * We cannot beat the specificity of user-agent stylesheet declarations, so we must delay them.
-     */
-    color: var(--color-text) !important;
-    -webkit-text-fill-color: var(--color-text) !important;
-    -webkit-transition:
-      background-color 0s 50000s,
-      box-shadow 0s 50000s,
-      filter 0s 50000s !important;
-    transition:
-      background-color 0s 50000s,
-      box-shadow 0s 50000s,
-      filter 0s 50000s !important;
-}.Limit {
-  width: 100%;
-  margin-top: 2px;
-  color: var(--color-text);
-  font-size: var(--font-text-xs-size);
-  font-variant-numeric: tabular-nums;
-  text-align: right;
-}@keyframes shake {
-  0% {
-    transform: translateX(0);
-  }
-
-  20%,
-  60% {
-    transform: translateX(-5px);
-  }
-
-  40%,
-  80% {
-    transform: translateX(5px);
-  }
-
-  100% {
-    transform: translateX(0);
-  }
-}
-}

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

@@ -1,50 +0,0 @@
-@layer components {.TextLink {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--link-gap);
-  /* Used to round the focus ring */
-  border-radius: var(--link-radius);
-  color: currentcolor;
-  cursor: pointer;
-  font-weight: var(--link-font-weight);
-  overflow-wrap: anywhere;
-  transition-duration: var(--transition-duration-basic);
-  transition-property: opacity, color, box-shadow, text-decoration-color;
-  transition-timing-function: var(--transition-ease-basic);
-}
-
-  @media (hover: hover) and (pointer: fine) {.TextLink:hover {
-    color: color-mix(in oklab, currentcolor 80%, transparent);
-}
-
-    /* stylelint-disable-next-line */
-    :global(.text-secondary) .TextLink:hover {
-      color: var(--color-text);
-    }
-
-    /* stylelint-disable-next-line */
-    :global(.text-tertiary) .TextLink:hover {
-      color: var(--color-text-secondary);
-    }
-}
-
-  .TextLink:focus-visible {
-    outline: 2px solid var(--color-ring);
-    outline-offset: 1px;
-  }
-
-  .TextLink[data-underline] {
-    text-decoration: underline;
-    text-decoration-color: color-mix(in oklab, currentcolor 70%, transparent);
-    text-underline-offset: var(--link-underline-decoration-offset);
-  }
-
-  .TextLink[data-primary] {
-    color: var(--link-primary-text-color);
-  }
-
-    @media (hover: hover) and (pointer: fine) {.TextLink[data-primary]:hover {
-      color: var(--link-primary-text-color-hover);
-}
-}
-}

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

@@ -1,272 +0,0 @@
-@layer components {.Container {
-  --textarea-line-height: 20px;
-  --textarea-font-weight: var(--font-weight-normal);
-  --textarea-color: var(--color-text);
-  --textarea-gutter-y: calc(0.5 * calc(var(--textarea-base-height) - var(--textarea-line-height)));
-  --textarea-min-height: calc(
-    (var(--textarea-gutter-y) * 2) + (var(--textarea-line-height) * var(--textarea-min-rows))
-  );
-  --textarea-max-height: calc(
-    (var(--textarea-gutter-y) * 2) + (var(--textarea-line-height) * var(--textarea-max-rows))
-  );
-}
-  /* ============================================ */
-  .Container:where([data-size="3xs"]) {
-    --textarea-base-height: var(--control-size-3xs);
-    --textarea-font-size: var(--control-font-size-sm);
-    --textarea-radius: var(--control-radius-sm);
-    --textarea-gutter-x: var(--control-gutter-xs);
-  }
-  /* Sizes */
-
-  .Container:where([data-size="2xs"]) {
-    --textarea-base-height: var(--control-size-2xs);
-    --textarea-font-size: var(--control-font-size-sm);
-    --textarea-radius: var(--control-radius-sm);
-    --textarea-gutter-x: var(--control-gutter-xs);
-  }
-
-  /* ============================================ */
-
-  .Container:where([data-size="xs"]) {
-    --textarea-base-height: var(--control-size-xs);
-    --textarea-font-size: var(--control-font-size-md);
-    --textarea-radius: var(--control-radius-sm);
-    --textarea-gutter-x: var(--control-gutter-xs);
-  }
-
-  .Container:where([data-size="sm"]) {
-    --textarea-base-height: var(--control-size-sm);
-    --textarea-font-size: var(--control-font-size-md);
-    --textarea-radius: var(--control-radius-sm);
-    --textarea-gutter-x: var(--control-gutter-sm);
-  }
-
-  /* ("md" is applied by default, set above) */
-  .Container:where([data-size="md"]) {
-    --textarea-base-height: var(--control-size-md);
-    --textarea-font-size: var(--control-font-size-md);
-    --textarea-radius: var(--control-radius-md);
-    --textarea-gutter-x: var(--control-gutter-md);
-  }
-
-  .Container:where([data-size="lg"]) {
-    --textarea-base-height: var(--control-size-lg);
-    --textarea-font-size: var(--control-font-size-md);
-    --textarea-radius: var(--control-radius-lg);
-    --textarea-gutter-x: var(--control-gutter-md);
-  }
-
-  .Container:where([data-size="xl"]) {
-    --textarea-base-height: var(--control-size-xl);
-    --textarea-font-size: var(--control-font-size-lg);
-    --textarea-radius: var(--control-radius-xl);
-    --textarea-gutter-x: var(--control-gutter-lg);
-  }
-
-  .Container:where([data-size="2xl"]) {
-    --textarea-base-height: var(--control-size-2xl);
-    --textarea-font-size: var(--control-font-size-lg);
-    --textarea-radius: var(--control-radius-xl);
-    --textarea-gutter-x: var(--control-gutter-xl);
-  }
-
-  .Container:where([data-size="3xl"]) {
-    --textarea-base-height: var(--control-size-3xl);
-    --textarea-font-size: var(--control-font-size-lg);
-    --textarea-radius: var(--control-radius-xl);
-    --textarea-gutter-x: var(--control-gutter-xl);
-  }
-  /* ============================================ */
-  .Container:where([data-gutter-size="2xs"]) {
-    --textarea-gutter-x: var(--control-gutter-2xs);
-  }
-  /* Gutter sizes */
-
-  .Container:where([data-gutter-size="xs"]) {
-    --textarea-gutter-x: var(--control-gutter-xs);
-  }
-
-  /* ============================================ */
-
-  .Container:where([data-gutter-size="sm"]) {
-    --textarea-gutter-x: var(--control-gutter-sm);
-  }
-
-  .Container:where([data-gutter-size="md"]) {
-    --textarea-gutter-x: var(--control-gutter-md);
-  }
-
-  .Container:where([data-gutter-size="lg"]) {
-    --textarea-gutter-x: var(--control-gutter-lg);
-  }
-
-  .Container:where([data-gutter-size="xl"]) {
-    --textarea-gutter-x: var(--control-gutter-xl);
-  }
-
-  .Container {
-
-  position: relative;
-  overflow: hidden;
-  display: flex;
-  width: 100%;
-  border-radius: var(--textarea-radius);
-  color: var(--textarea-color);
-  cursor: text;
-  font-size: var(--textarea-font-size);
-  font-weight: var(--textarea-font-weight);
-  transition-duration: var(--transition-duration-basic);
-  transition-property: color, box-shadow, background-color;
-  transition-timing-function: var(--transition-ease-basic);
-}
-
-  /* =============================================
-    Outline variant
-  ============================================= */
-  .Container:where([data-variant="outline"]) {
-    /* NOTE: Don't add box-model size here, as the <textarea> defines all height sizing */
-    box-shadow: 0 0 0 1px var(--input-outline-border-color) inset;
-  }
-      @media (hover: hover) and (pointer: fine) {.Container:where([data-variant="outline"]):not([data-disabled]):hover {
-        box-shadow: 0 0 0 1px var(--input-outline-border-color-hover) inset;
-}
-}
-
-      .Container:where([data-variant="outline"]):not([data-disabled])[data-focused="true"] {
-        box-shadow: 0 0 0 1px var(--input-outline-border-color-focus) inset;
-      }
-
-      .Container:where([data-variant="outline"]):not([data-disabled])[data-invalid] {
-        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
-      }
-
-  /* =============================================
-    Soft variant
-  ============================================= */
-  .Container:where([data-variant="soft"]) {
-    background-color: var(--input-soft-background-color);
-  }
-      .Container:where([data-variant="soft"]):not([data-disabled])[data-focused="true"] {
-        box-shadow: 0 0 0 1px var(--input-soft-border-color-focus) inset;
-      }
-
-      .Container:where([data-variant="soft"]):not([data-disabled])[data-invalid] {
-        box-shadow: 0 0 0 1px var(--input-border-color-invalid) inset;
-      }
-
-  /* =============================================
-    Invalid
-  ============================================= */
-    .Container[data-invalid] ::-moz-selection {
-      background-color: var(--red-a50);
-    }
-    .Container[data-invalid] ::selection {
-      background-color: var(--red-a50);
-    }
-
-  /* =============================================
-    Disabled
-  ============================================= */
-  .Container[data-disabled] {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }.Textarea {
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  min-height: var(--textarea-min-height);
-  max-height: var(--textarea-max-height);
-  padding: var(--textarea-gutter-y) var(--textarea-gutter-x);
-  border: 0;
-  border-radius: 0;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  background: none;
-  box-shadow: none;
-  color: inherit;
-  /* Prevent Firefox autofill coloring (preview and confirmed modes) */
-  filter: none;
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: var(--textarea-line-height);
-  resize: none;
-}
-
-  .Textarea:focus {
-    outline: 0;
-  }
-
-  .Textarea:disabled {
-    cursor: not-allowed;
-  }
-
-  .Textarea::-moz-placeholder {
-    color: var(--input-placeholder-text-color);
-    /* Normalize placeholder coloring across browsers. Firefox specifically uses `opacity` instead of a different `color`. */
-    opacity: 1;
-  }
-
-  .Textarea::placeholder {
-    color: var(--input-placeholder-text-color);
-    /* Normalize placeholder coloring across browsers. Firefox specifically uses `opacity` instead of a different `color`. */
-    opacity: 1;
-  }
-
-  /* Applying an animation on autofill allows us to listen for the event in JS */
-  .Textarea:-webkit-autofill {
-    animation: native-autofill-in 1ms;
-  }
-
-  /* Prevent auto-fill coloring */
-  .Textarea:-webkit-autofill,
-  .Textarea:-webkit-autofill:focus,
-  .Textarea:-webkit-autofill:hover {
-    color: var(--color-text) !important;
-    -webkit-text-fill-color: var(--color-text) !important;
-    /* Prevent all color changes by delaying their effect for a very long time */
-    /* We cannot beat the specificity of user-agent stylesheet declarations, so we must delay them. */
-    -webkit-transition:
-      background-color 0s 50000s,
-      box-shadow 0s 50000s,
-      filter 0s 50000s !important;
-    transition:
-      background-color 0s 50000s,
-      box-shadow 0s 50000s,
-      filter 0s 50000s !important;
-  }
-  /* Identical to block above, but must keep separate for browsers to recognize their own selector */
-  .Textarea:-webkit-autofill-and-obscured,
-  .Textarea:-webkit-autofill-strong-password,
-  .Textarea:-webkit-autofill-strong-password-viewable {
-    color: var(--color-text) !important;
-    -webkit-text-fill-color: var(--color-text) !important;
-    -webkit-transition:
-      background-color 0s 50000s,
-      box-shadow 0s 50000s,
-      filter 0s 50000s !important;
-    transition:
-      background-color 0s 50000s,
-      box-shadow 0s 50000s,
-      filter 0s 50000s !important;
-  }
-  /* Prevent strange autofill size adjustments */
-  .Textarea:-webkit-autofill::first-line {
-    font-size: 16px !important;
-    -webkit-transition: font-size 0s 50000s !important;
-    transition: font-size 0s 50000s !important;
-  }
-
-  .Textarea::-webkit-resizer {
-    visibility: hidden;
-  }@keyframes native-autofill-in {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-}