@plexui/ui 0.19.0 → 0.20.0

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

@@ -1,507 +0,0 @@
-@layer components {.Container {
-  display: flex;
-  align-items: center;
-  gap: var(--input-gap);
-  width: 100%;
-  border-radius: var(--input-radius);
-  color: var(--input-text-color);
-  cursor: text;
-  /* NOTE: Whenever this is not 16px on mobile, zooming occurs. */
-  font-size: var(--input-font-size);
-  font-weight: var(--font-weight-normal);
-  line-height: 1;
-  transition-duration: var(--transition-duration-basic);
-  transition-property: color, box-shadow, background-color;
-  transition-timing-function: var(--transition-ease-basic);
-}
-
-  .Container:where([data-optically-align="start"]) {
-    margin-inline-start: calc(var(--input-gutter) * -1);
-  }
-
-    .Container:where([data-optically-align="start"])[data-pill] {
-      margin-inline-start: calc(var(--input-gutter) * var(--control-gutter-pill-scaling) * -1);
-    }
-
-  .Container:where([data-optically-align="end"]) {
-    margin-inline-end: calc(var(--input-gutter) * -1);
-  }
-
-    .Container:where([data-optically-align="end"])[data-pill] {
-      margin-inline-end: calc(var(--input-gutter) * var(--control-gutter-pill-scaling) * -1);
-    }
-
-  /* =============================================
-    Outline variant
-  ============================================= */
-  .Container:where([data-variant="outline"]) {
-    /* NOTE: Don't add box-model size here, as the <input> 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);
-    }
-
-  /* =============================================
-    Sizes
-  ============================================= */
-  .Container:where([data-size="3xs"]) {
-    --input-size: var(--control-size-3xs);
-    --input-font-size: var(--control-font-size-sm);
-    --input-radius: var(--control-radius-sm);
-    --input-gutter: var(--control-gutter-2xs);
-    --input-gap: var(--input-gap-xs);
-    --input-adornment-offset: -1px;
-    --input-clear-size: 12px;
-    --input-clear-icon-size: 10px;
-    --input-clear-offset: -1px;
-    --input-clear-pill-offset: -2px;
-  }
-
-  .Container:where([data-size="2xs"]) {
-    --input-size: var(--control-size-2xs);
-    --input-font-size: var(--control-font-size-sm);
-    --input-radius: var(--control-radius-sm);
-    --input-gutter: var(--control-gutter-xs);
-    --input-gap: var(--input-gap-xs);
-    --input-adornment-offset: -1px;
-    --input-clear-size: 14px;
-    --input-clear-icon-size: 12px;
-    --input-clear-offset: -2px;
-    --input-clear-pill-offset: -4px;
-  }
-
-  .Container:where([data-size="xs"]) {
-    --input-size: var(--control-size-xs);
-    --input-font-size: var(--control-font-size-md);
-    --input-radius: var(--control-radius-sm);
-    --input-gutter: var(--control-gutter-xs);
-    --input-gap: var(--input-gap-sm);
-    --input-adornment-offset: -1px;
-    --input-clear-size: 16px;
-    --input-clear-icon-size: 12px;
-    --input-clear-offset: -2px;
-    --input-clear-pill-offset: -4px;
-  }
-
-  .Container:where([data-size="sm"]) {
-    --input-size: var(--control-size-sm);
-    --input-font-size: var(--control-font-size-md);
-    --input-radius: var(--control-radius-sm);
-    --input-gutter: var(--control-gutter-sm);
-    --input-gap: var(--input-gap-md);
-    --input-adornment-offset: -1px;
-    --input-clear-size: 16px;
-    --input-clear-icon-size: 12px;
-    --input-clear-offset: -3px;
-    --input-clear-pill-offset: -6px;
-  }
-
-  .Container:where([data-size="md"]) {
-    --input-size: var(--control-size-md);
-    --input-font-size: var(--control-font-size-md);
-    --input-radius: var(--control-radius-md);
-    --input-gutter: var(--control-gutter-md);
-    --input-gap: var(--input-gap-md);
-    --input-clear-size: 18px;
-    --input-clear-icon-size: 14px;
-    --input-clear-offset: -4px;
-    --input-clear-pill-offset: -7px;
-  }
-
-  .Container:where([data-size="lg"]) {
-    --input-size: var(--control-size-lg);
-    --input-font-size: var(--control-font-size-md);
-    --input-radius: var(--control-radius-lg);
-    --input-gutter: var(--control-gutter-md);
-    --input-gap: var(--input-gap-md);
-    --input-clear-size: 18px;
-    --input-clear-icon-size: 14px;
-    --input-clear-offset: -5px;
-    --input-clear-pill-offset: -6px;
-  }
-
-  .Container:where([data-size="xl"]) {
-    --input-size: var(--control-size-xl);
-    --input-font-size: var(--control-font-size-lg);
-    --input-radius: var(--control-radius-xl);
-    --input-gutter: var(--control-gutter-lg);
-    --input-gap: var(--input-gap-lg);
-    --input-clear-size: 18px;
-    --input-clear-icon-size: 14px;
-    --input-clear-offset: -6px;
-    --input-clear-pill-offset: -7px;
-  }
-
-  .Container:where([data-size="2xl"]) {
-    --input-size: var(--control-size-2xl);
-    --input-font-size: var(--control-font-size-lg);
-    --input-radius: var(--control-radius-xl);
-    --input-gutter: var(--control-gutter-lg);
-    --input-gap: var(--input-gap-lg);
-    --input-adornment-offset: -4px;
-    --input-clear-size: 20px;
-    --input-clear-icon-size: 15px;
-    --input-clear-offset: -6px;
-    --input-clear-pill-offset: -7px;
-  }
-
-  .Container:where([data-size="3xl"]) {
-    --input-size: var(--control-size-3xl);
-    --input-font-size: var(--control-font-size-lg);
-    --input-radius: var(--control-radius-xl);
-    --input-gutter: var(--control-gutter-xl);
-    --input-gap: var(--input-gap-lg);
-    --input-adornment-offset: -4px;
-    --input-clear-size: 20px;
-    --input-clear-icon-size: 15px;
-    --input-clear-offset: -6px;
-    --input-clear-pill-offset: -7px;
-  }
-
-  /* =============================================
-    Gutter sizes
-  ============================================= */
-  .Container:where([data-gutter-size="2xs"]) {
-    --input-gutter: var(--control-gutter-2xs);
-    --input-adornment-offset: -1px;
-  }
-
-  .Container:where([data-gutter-size="xs"]) {
-    --input-gutter: var(--control-gutter-xs);
-    --input-adornment-offset: -1px;
-  }
-
-  .Container:where([data-gutter-size="sm"]) {
-    --input-gutter: var(--control-gutter-sm);
-    --input-adornment-offset: -2px;
-  }
-
-  .Container:where([data-gutter-size="md"]) {
-    --input-gutter: var(--control-gutter-md);
-    --input-adornment-offset: -2px;
-  }
-
-  .Container:where([data-gutter-size="lg"]) {
-    --input-gutter: var(--control-gutter-lg);
-    --input-adornment-offset: -2px;
-  }
-
-  .Container:where([data-gutter-size="xl"]) {
-    --input-gutter: var(--control-gutter-xl);
-    --input-adornment-offset: -4px;
-  }
-
-  /* =============================================
-    Pill
-  ============================================= */
-  .Container:where([data-pill]) {
-    --input-radius: var(--radius-full);
-  }
-
-  /* =============================================
-    Disabled
-    ---------------------------------------------
-    Fade the input text and the built-in Clear button, but keep the
-    Container's chrome (border, focus ring) and any AdornmentButton
-    at full opacity — AdornmentButtons often double as toggles that
-    remain interactive while the input is disabled (voice-mode switch,
-    edit-in-place, etc.).
-  ============================================= */
-  .Container[data-disabled] {
-    cursor: not-allowed;
-  }
-
-    .Container[data-disabled] > .Input,
-    .Container[data-disabled] > .Clear {
-      opacity: 0.5;
-    }
-  /*
-   * When adornments are present, gutter is applied to the container instead of the input.
-   */
-  .Container:where([data-has-start-adornment]) {
-    padding-left: var(--input-gutter);
-  }
-
-  /* =============================================
-    Gutter
-  ============================================= */
-
-  .Container:where([data-has-start-adornment][data-pill]) {
-    padding-left: calc(var(--input-gutter) * var(--control-gutter-pill-scaling));
-  }
-
-  .Container:where([data-has-end-adornment]) {
-    padding-right: var(--input-gutter);
-  }
-
-  .Container:where([data-has-end-adornment][data-pill]) {
-    padding-right: calc(var(--input-gutter) * var(--control-gutter-pill-scaling));
-  }
-
-  /* =============================================
-    Adornments
-  ============================================= */
-  .Container > :first-child:not(input) {
-    margin-left: var(--input-adornment-offset, -2px);
-  }
-
-  .Container > :last-child:not(input, .Clear, .AdornmentButton) {
-    margin-right: var(--input-adornment-offset, -2px);
-  }.Input {
-  display: block;
-  width: 100%;
-  height: var(--input-size);
-  /* `padding` is intrinsic to `.Input` when no adornments are present, for a few reasons. Autofill extensions are one such reason. */
-  padding: 0 var(--input-gutter);
-  border: 0;
-  border-radius: 0;
-  background: none;
-  box-shadow: none;
-  color: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-}
-
-  .Input:focus {
-    outline: 0;
-  }
-
-  .Input:disabled {
-    cursor: not-allowed;
-  }
-
-  .Input::-moz-placeholder {
-    color: var(--input-placeholder-text-color);
-  }
-
-  .Input::placeholder {
-    color: var(--input-placeholder-text-color);
-  }
-
-  /* Applying an animation on autofill allows us to listen for the event in JS */
-  .Input:-webkit-autofill {
-    animation: native-autofill-in 1ms;
-  }
-
-  .Input:-webkit-autofill, .Input:-webkit-autofill:focus, .Input:-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;
-}
-
-  .Input:-webkit-autofill-and-obscured, .Input:-webkit-autofill-strong-password, .Input:-webkit-autofill-strong-password-viewable {
-    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;
-}
-
-  /* Prevent strange autofill size adjustments */
-  .Input:-webkit-autofill::first-line {
-    font-size: inherit !important;
-    -webkit-transition: font-size 0s 50000s !important;
-    transition: font-size 0s 50000s !important;
-  }
-
-  /* Hide up/down arrows */
-  .Input[type="number"] {
-    /* Firefox */
-    -webkit-appearance: textfield;
-       -moz-appearance: textfield;
-            appearance: textfield;
-
-    /* Chrome, Safari, Edge, Opera */
-  }
-    .Input[type="number"]::-webkit-outer-spin-button,
-    .Input[type="number"]::-webkit-inner-spin-button {
-      margin: 0;
-      -webkit-appearance: none;
-              appearance: none;
-    }
-
-  /* Dynamic pill spacing */
-  :where(.Container[data-pill]) .Input {
-    padding: 0 calc(var(--input-gutter) * var(--control-gutter-pill-scaling));
-  }
-
-  :where(.Container[data-has-start-adornment]) .Input {
-    padding-left: 0;
-  }
-
-  :where(.Container[data-has-end-adornment]) .Input {
-    padding-right: 0;
-  }.Clear {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: var(--input-clear-size);
-  height: var(--input-clear-size);
-  padding: 0;
-  border: 0;
-  border-radius: var(--radius-full);
-  margin-right: var(--input-clear-offset);
-  background-color: var(--color-background-primary-soft-alpha);
-  color: var(--color-text-primary-soft);
-  cursor: pointer;
-  transition-duration: var(--transition-duration-basic);
-  transition-property: background-color;
-  transition-timing-function: var(--transition-ease-basic);
-}
-
-  .Clear:hover {
-    background-color: var(--color-background-primary-soft-alpha-hover);
-  }
-
-  .Clear:active {
-    background-color: var(--color-background-primary-soft-alpha-active);
-  }
-
-  :where(.Container[data-pill]) .Clear {
-    margin-right: var(--input-clear-pill-offset);
-  }
-
-  .Clear > svg {
-    width: var(--input-clear-icon-size);
-    height: var(--input-clear-icon-size);
-  }/* AdornmentButton — public sibling of .Clear for in-input action buttons
-   (mic toggle, copy, send, etc.). Sized from the Input's own size token:
-   input height minus one spacing step each side leaves ~4px of breathing
-   room top + bottom, so a md (32px) input gets a 24px pill, an lg (36px)
-   gets 28px, etc. Radius is --radius-full so a pill input stays
-   concentric with the button. Icon fills half the button. */.AdornmentButton {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  width: calc(var(--input-size) - calc(var(--spacing) * 2));
-  height: calc(var(--input-size) - calc(var(--spacing) * 2));
-  padding: 0;
-  border: 0;
-  border-radius: var(--radius-full);
-  /* Concentric with the input edge — leave a spacing(1) = 4px breathing
-     gap between the button's outer edge and the input's inner edge.
-     For a non-pill input that's `4 - gutter`; a pill input scales the
-     gutter by --control-gutter-pill-scaling. */
-  margin-right: calc(calc(var(--spacing) * 1) - var(--input-gutter));
-  background-color: transparent;
-  color: var(--color-text-tertiary);
-  cursor: pointer;
-  transition-duration: var(--transition-duration-basic);
-  transition-property: background-color, color;
-  transition-timing-function: var(--transition-ease-basic);
-}
-
-  .AdornmentButton:hover {
-    background-color: var(--color-background-secondary-soft-alpha);
-    color: var(--color-text);
-  }
-
-  .AdornmentButton[aria-pressed="true"] {
-    background-color: var(--color-background-primary-soft);
-    color: var(--color-text);
-  }
-
-  .AdornmentButton[data-color="caution"][aria-pressed="true"] {
-    background-color: var(--color-background-caution-soft);
-    color: var(--color-text-caution-soft);
-  }
-
-  .AdornmentButton[data-color="danger"][aria-pressed="true"] {
-    background-color: var(--color-background-danger-soft);
-    color: var(--color-text-danger-soft);
-  }
-
-  .AdornmentButton[data-color="success"][aria-pressed="true"] {
-    background-color: var(--color-background-success-soft);
-    color: var(--color-text-success-soft);
-  }
-
-  .AdornmentButton[data-color="info"][aria-pressed="true"] {
-    background-color: var(--color-background-info-soft);
-    color: var(--color-text-info-soft);
-  }
-
-  .AdornmentButton[data-color="discovery"][aria-pressed="true"] {
-    background-color: var(--color-background-discovery-soft);
-    color: var(--color-text-discovery-soft);
-  }
-
-  .AdornmentButton:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  :where(.Container[data-pill]) .AdornmentButton {
-    margin-right: calc(calc(var(--spacing) * 1) - var(--input-gutter) * var(--control-gutter-pill-scaling));
-  }
-
-  .AdornmentButton > svg {
-    width: calc(var(--input-size) / 2);
-    height: calc(var(--input-size) / 2);
-  }@keyframes native-autofill-in {
-  0% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-}

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

@@ -1,16 +0,0 @@
-@layer components {.Label {
-  display: inline-flex;
-  align-items: center;
-  gap: calc(var(--spacing) * 0.5);
-  color: var(--label-color);
-  font-size: var(--label-font-size);
-  font-weight: var(--label-font-weight);
-  line-height: var(--label-line-height);
-  cursor: default;
-}
-
-  .Label:where([data-disabled]) {
-    opacity: 0.6;
-    cursor: not-allowed;
-  }
-}