@plexui/ui 0.19.0 → 0.20.0

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

@@ -1,133 +0,0 @@
-@layer components {.Transition {
-  position: relative;
-}.Overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  background: rgb(0 0 0 / 0.5);
-}
-
-  .Transition[data-entering] .Overlay {
-    opacity: 0;
-  }
-
-  .Transition[data-entering-active] .Overlay,
-  .Transition[data-entering][data-interrupted] .Overlay {
-    opacity: 1;
-    transition: opacity 0.2s var(--cubic-enter);
-  }
-
-  .Transition[data-exiting] .Overlay {
-    opacity: 1;
-  }
-
-  .Transition[data-exiting-active] .Overlay,
-  .Transition[data-exiting][data-interrupted] .Overlay {
-    opacity: 0;
-    transition: opacity 0.15s var(--cubic-exit);
-  }.Content {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-}
-
-  .Content:focus {
-    outline: none;
-  }.Panel {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  width: var(--dialog-width, 480px);
-  max-width: 100%;
-  max-height: calc(100vh - 2rem);
-  overflow: auto;
-  border-radius: var(--radius-xl);
-  background: var(--color-surface-elevated);
-  box-shadow: var(--shadow-lg), var(--shadow-hairline);
-  padding: 1.25rem;
-}
-
-  .Transition[data-entering] .Panel {
-    opacity: 0;
-    transform: scale(0.95) translateY(8px);
-  }
-
-  .Transition[data-entering-active] .Panel,
-  .Transition[data-entering][data-interrupted] .Panel {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-    transition: opacity 0.25s var(--cubic-enter), transform 0.25s var(--cubic-enter);
-  }
-
-  .Transition[data-exiting] .Panel {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-
-  .Transition[data-exiting-active] .Panel,
-  .Transition[data-exiting][data-interrupted] .Panel {
-    opacity: 0;
-    transform: scale(0.95) translateY(8px);
-    transition: opacity 0.15s var(--cubic-exit), transform 0.15s var(--cubic-exit);
-  }.CloseButton {
-  position: absolute;
-  top: 0.75rem;
-  right: 0.75rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  border: 0;
-  border-radius: 0.5rem;
-  background: transparent;
-  color: var(--color-text-tertiary);
-  cursor: pointer;
-  transition: background-color 0.2s var(--cubic-enter), color 0.2s var(--cubic-enter);
-}
-
-  .CloseButton:hover {
-    background: color-mix(in srgb, var(--color-text-tertiary) 12%, transparent);
-    color: var(--color-text);
-  }
-
-  .CloseButton:focus-visible {
-    outline: 2px solid var(--color-text);
-    outline-offset: 2px;
-  }.CloseIcon {
-  display: block;
-}.Header {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}.Footer {
-  display: flex;
-  justify-content: flex-end;
-  gap: 0.5rem;
-}.Title {
-  margin: 0;
-  font-size: 1.125rem;
-  font-weight: 600;
-  line-height: 1.4;
-  color: var(--color-text);
-}.Description {
-  margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  color: var(--color-text-secondary);
-}@media (width <= 640px) {
-  .Footer {
-    flex-direction: column;
-  }
-
-    .Footer > * {
-      width: 100%;
-      --button-size: var(--control-size-lg);
-    }
-}
-}

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

@@ -1,82 +0,0 @@
-@layer components {.EmptyMessage {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-width: min(20rem, 100%);
-}
-
-  .EmptyMessage[data-fill="static"] {
-    width: 100%;
-    height: 100%;
-  }
-
-  .EmptyMessage[data-fill="absolute"] {
-    position: absolute;
-    inset: 0;
-  }.IconBadge {
-  --badge-size: 40px;
-  --icon-size: 24px;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--badge-size);
-  height: var(--badge-size);
-  border-radius: var(--radius-md);
-  margin: 0 0 12px;
-  background: var(--badge-background-color);
-  color: var(--badge-text-color);
-}
-
-  .IconBadge svg {
-    width: var(--icon-size);
-    height: var(--icon-size);
-  }
-
-  .IconBadge[data-size="sm"] {
-    --badge-size: 32px;
-    --icon-size: 20px;
-  }
-
-  .IconBadge[data-color="secondary"] {
-    --badge-background-color: var(--color-background-secondary-soft);
-    --badge-text-color: var(--color-text-secondary-soft);
-  }
-
-  .IconBadge[data-color="warning"] {
-    --badge-background-color: var(--color-background-warning-soft);
-    --badge-text-color: var(--color-text-warning-soft);
-  }
-
-  .IconBadge[data-color="danger"] {
-    --badge-background-color: var(--color-background-danger-soft);
-    --badge-text-color: var(--color-text-danger-soft);
-  }.Title {
-  margin: 0 0 calc(var(--spacing) * 2);
-  color: var(--color-text);
-  font-size: var(--font-heading-xs-size);
-  font-weight: var(--font-weight-semibold);
-  line-height: 1.25;
-  letter-spacing: var(--font-heading-xs-tracking);
-  text-align: center;
-  text-wrap: balance;
-}
-
-  .Title:where([data-color="danger"]) {
-    color: var(--color-text-danger);
-  }
-
-  .Title:where([data-color="warning"]) {
-    color: var(--color-text-warning);
-  }.Description {
-  margin: 0;
-  color: var(--color-text-tertiary);
-  font-size: var(--font-text-sm-size);
-  line-height: var(--font-text-sm-line-height);
-  text-align: center;
-  text-wrap: pretty;
-}.ActionRow {
-  margin-top: calc(var(--spacing) * 4);
-}
-}

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

@@ -1,137 +0,0 @@
-@layer components {.Field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--field-gap);
-
-  /* Override FieldError margins since Field controls spacing via gap */
-  --field-error-margin-top: 0;
-  --field-error-margin-bottom: 0;
-  --field-error-padding-inline: 0;
-}/* =============================================
-   LabelGroup  (label + description)
-============================================= */.LabelGroup {
-  display: flex;
-  flex-direction: column;
-  gap: var(--field-label-description-gap, 0px);
-}/* =============================================
-   Content  (control + error)
-============================================= */.Content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--field-gap);
-}/* =============================================
-   Horizontal orientation
-============================================= */.Field:where([data-orientation="horizontal"]) {
-  flex-direction: row;
-  align-items: flex-start;
-}.Field:where([data-orientation="horizontal"]) .LabelGroup {
-  flex-shrink: 0;
-  width: var(--field-horizontal-label-width);
-  padding-top: var(--field-label-horizontal-offset);
-}.Field:where([data-orientation="horizontal"]) .Content {
-  flex-shrink: 0;
-  width: var(--field-horizontal-control-width);
-}/* =============================================
-   Sizes — shared properties (grouped)
-============================================= */.Field:where([data-size="3xs"]),
-.Field:where([data-size="2xs"]) {
-  --field-gap: calc(var(--spacing) * 1);
-  --field-label-description-gap: 0px;
-  --field-label-font-size: var(--font-text-xs-size);
-  --field-label-line-height: var(--font-text-xs-line-height);
-  --field-description-font-size: var(--font-text-xs-size);
-  --field-description-line-height: var(--font-text-xs-line-height);
-
-  /* Scale error elements down for compact sizes */
-  --field-error-icon-size: 0.875rem; /* 14px */
-  --field-error-gap: calc(var(--spacing) * 1.5); /* 6px */
-}.Field:where([data-size="xs"]),
-.Field:where([data-size="sm"]) {
-  --field-gap: calc(var(--spacing) * 1.5);
-  --field-label-description-gap: 0px;
-  --field-label-font-size: var(--font-text-xs-size);
-  --field-label-line-height: var(--font-text-xs-line-height);
-  --field-description-font-size: var(--font-text-xs-size);
-  --field-description-line-height: var(--font-text-xs-line-height);
-
-  /* Scale error elements down for compact sizes */
-  --field-error-icon-size: 0.875rem; /* 14px */
-  --field-error-gap: calc(var(--spacing) * 1.5); /* 6px */
-}.Field:where([data-size="md"]) {
-  --field-gap: calc(var(--spacing) * 1.5);
-  --field-label-description-gap: 0px;
-  --field-label-font-size: var(--font-text-sm-size);
-  --field-label-line-height: var(--font-text-sm-line-height);
-  --field-description-font-size: var(--font-text-xs-size);
-  --field-description-line-height: var(--font-text-xs-line-height);
-}.Field:where([data-size="lg"]),
-.Field:where([data-size="xl"]) {
-  --field-gap: calc(var(--spacing) * 1.5);
-  --field-label-description-gap: 0px;
-  --field-label-font-size: var(--font-text-sm-size);
-  --field-label-line-height: var(--font-text-sm-line-height);
-  --field-description-font-size: var(--font-text-xs-size);
-  --field-description-line-height: var(--font-text-xs-line-height);
-}.Field:where([data-size="2xl"]),
-.Field:where([data-size="3xl"]) {
-  --field-gap: calc(var(--spacing) * 1.5);
-  --field-label-description-gap: 0px;
-  --field-label-font-size: var(--font-text-md-size);
-  --field-label-line-height: var(--font-text-md-line-height);
-  --field-description-font-size: var(--font-text-sm-size);
-  --field-description-line-height: var(--font-text-sm-line-height);
-
-  /* Scale error elements up for spacious sizes */
-  --field-error-font-size: var(--font-text-sm-size); /* 14px */
-  --field-error-line-height: var(--font-text-sm-line-height); /* 20px */
-  --field-error-icon-size: 1.125rem; /* 18px */
-}/* =============================================
-   Sizes — horizontal label offset (per-size)
-   Centers label text vertically with the input:
-   offset = (control-height − label-line-height) / 2
-============================================= */.Field:where([data-size="3xs"]) {
-  --field-label-horizontal-offset: calc((var(--control-size-3xs) - var(--font-text-xs-line-height)) / 2); /* 2px */
-}.Field:where([data-size="2xs"]) {
-  --field-label-horizontal-offset: calc((var(--control-size-2xs) - var(--font-text-xs-line-height)) / 2); /* 3px */
-}.Field:where([data-size="xs"]) {
-  --field-label-horizontal-offset: calc((var(--control-size-xs) - var(--font-text-xs-line-height)) / 2); /* 4px */
-}.Field:where([data-size="sm"]) {
-  --field-label-horizontal-offset: calc((var(--control-size-sm) - var(--font-text-xs-line-height)) / 2); /* 5px */
-}.Field:where([data-size="md"]) {
-  --field-label-horizontal-offset: calc((var(--control-size-md) - var(--font-text-sm-line-height)) / 2); /* 6px */
-}.Field:where([data-size="lg"]) {
-  --field-label-horizontal-offset: calc((var(--control-size-lg) - var(--font-text-sm-line-height)) / 2); /* 8px */
-}.Field:where([data-size="xl"]) {
-  --field-label-horizontal-offset: calc((var(--control-size-xl) - var(--font-text-sm-line-height)) / 2); /* 10px */
-}.Field:where([data-size="2xl"]) {
-  --field-label-horizontal-offset: calc((var(--control-size-2xl) - var(--font-text-md-line-height)) / 2); /* 10px */
-}.Field:where([data-size="3xl"]) {
-  --field-label-horizontal-offset: calc((var(--control-size-3xl) - var(--font-text-md-line-height)) / 2); /* 12px */
-}/* =============================================
-   Label
-============================================= */.Label {
-  display: inline-flex;
-  align-items: baseline;
-  gap: calc(var(--spacing) * 0.5);
-  color: var(--color-text);
-  font-size: var(--field-label-font-size);
-  line-height: var(--field-label-line-height);
-  font-weight: var(--field-label-font-weight);
-  cursor: default;
-}/* =============================================
-   Required Indicator
-============================================= */.RequiredIndicator {
-  color: var(--field-error-color);
-  font-weight: var(--font-weight-normal);
-}/* =============================================
-   Description
-============================================= */.Description {
-  color: var(--color-text-secondary);
-  font-size: var(--field-description-font-size);
-  line-height: var(--field-description-line-height);
-}/* =============================================
-   Control
-============================================= */.Control {
-  /* Container for the child form control */
-}
-}

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

@@ -1,22 +0,0 @@
-@layer components {.FieldError {
-  display: flex;
-  align-items: center;
-  gap: var(--field-error-gap);
-  padding-inline-start: var(--field-error-padding-inline);
-  color: var(--field-error-color);
-  font-size: var(--field-error-font-size);
-  line-height: var(--field-error-line-height);
-  text-align: left;
-}.FieldError:first-of-type {
-  margin-top: var(--field-error-margin-top);
-}.FieldError:last-of-type {
-  margin-bottom: var(--field-error-margin-bottom);
-}.FieldError > * {
-  flex-shrink: 0;
-}.Icon {
-  width: var(--field-error-icon-size);
-  height: var(--field-error-icon-size);
-  display: block;
-  align-self: center;
-}
-}

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

@@ -1,133 +0,0 @@
-@layer components {.Root {
-  position: relative;
-  --field-error-padding-inline: 0;
-  --field-error-margin-top: 0.25rem;
-}.AreaTrigger {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  min-height: var(--file-upload-area-min-height);
-  padding: 2rem var(--file-upload-gutter);
-  gap: 0.5rem;
-  border: 1px solid var(--floating-input-border-color);
-  border-radius: var(--file-upload-area-border-radius);
-  background-color: var(--floating-input-background);
-  color: var(--color-text);
-  font-size: 1rem;
-  cursor: pointer;
-  transition: border-color var(--floating-input-transition-duration) ease-in-out;
-}.AreaTrigger:hover:not(:disabled) {
-  border-color: var(--floating-input-border-color-hover);
-}.AreaTrigger[data-invalid] {
-  border-color: var(--floating-input-border-color-invalid);
-}.AreaTrigger:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}.AreaIcon {
-  color: var(--color-text-tertiary);
-  font-size: 2rem;
-}.AreaLabel {
-  font-weight: 500;
-  color: var(--color-text);
-}.AreaDescription {
-  color: var(--color-text-tertiary);
-  font-size: 0.875rem;
-}.FileList {
-  margin-top: var(--file-upload-list-gap);
-  list-style: none;
-  padding: 0;
-  overflow: hidden;
-  border: 1px solid var(--color-border-primary-outline);
-  border-radius: 26px;
-}.FileCardGroup {
-  overflow: hidden;
-  border: 1px solid var(--color-border-primary-outline);
-  border-radius: 26px;
-}.FileItem {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 21px;
-}.FileItem + .FileItem {
-  border-top: 1px solid var(--color-border-primary-outline);
-}.FileList li + li > .FileItem {
-  border-top: 1px solid var(--color-border-primary-outline);
-}.FileIcon {
-  display: flex;
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-  margin-left: -4px;
-  color: var(--input-text-color);
-}.FileIcon svg {
-  width: 16px;
-  height: 16px;
-}.FileInfo {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-}.FileNameRow {
-  display: flex;
-  min-width: 0;
-}.FileNameStem {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 14px;
-  line-height: 1.4285714286;
-  letter-spacing: -0.01em;
-  color: var(--color-text);
-}.FileNameExt {
-  flex-shrink: 0;
-  font-size: 14px;
-  line-height: 1.4285714286;
-  letter-spacing: -0.01em;
-  color: var(--color-text);
-}.FileSize {
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--color-text-tertiary);
-}.FileRemove {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  margin: 0 -7px 0 0;
-  border: none;
-  border-radius: var(--radius-full);
-  background-color: var(--color-background-secondary-soft-alpha);
-  cursor: pointer;
-  color: var(--color-text-secondary-soft);
-  flex-shrink: 0;
-}.FileRemove svg {
-  width: 15px;
-  height: 15px;
-}.FileRemove:hover {
-  background-color: var(--color-background-secondary-soft-alpha-hover);
-}.FileRemove:active {
-  background-color: var(--color-background-secondary-soft-alpha-active);
-}.FileRemove:disabled {
-  pointer-events: none;
-}.HiddenInput {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}.ErrorMessage {
-  margin-top: var(--field-error-margin-top);
-}@media (prefers-reduced-motion: reduce) {
-  .AreaTrigger {
-    transition: none;
-  }
-}
-}