@miaixz/ui 0.5.0

package/dist/styles/components/drawer.css

@@ -0,0 +1,160 @@
+/**
+ * Miaixz drawer component
+ * Use a native dialog element when the drawer blocks the page.
+ */
+
+:root {
+  --miaixz-drawer-width-small: 360px;
+  --miaixz-drawer-width-medium: 480px;
+  --miaixz-drawer-width-large: 720px;
+  --miaixz-drawer-width: var(--miaixz-drawer-width-medium);
+  --miaixz-drawer-offset: var(--miaixz-space-16);
+}
+
+dialog.miaixz-drawer {
+  position: fixed;
+  inset: 0 0 0 auto;
+  width: min(100vw, var(--miaixz-drawer-width));
+  max-width: none;
+  height: 100vh;
+  height: 100dvh;
+  max-height: none;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--miaixz-color-text-primary);
+  background: var(--miaixz-color-surface);
+  border: 0;
+  border-inline-start: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+  border-radius: 0;
+  box-shadow: var(--miaixz-shadow-overlay);
+  opacity: 0;
+  transform: translateX(var(--miaixz-drawer-offset));
+  transition-timing-function: var(--miaixz-motion-enter-easing);
+  transition-duration: var(--miaixz-motion-overlay-duration);
+  transition-property: opacity, transform, display, overlay;
+  transition-behavior: allow-discrete;
+}
+
+dialog.miaixz-drawer:not([open]) {
+  display: none;
+}
+
+dialog.miaixz-drawer[open] {
+  display: flex;
+  flex-direction: column;
+  opacity: 1;
+  transform: translate(0);
+}
+
+dialog.miaixz-drawer::backdrop {
+  background: var(--miaixz-color-backdrop);
+  opacity: 0;
+  transition-timing-function: var(--miaixz-motion-enter-easing);
+  transition-duration: var(--miaixz-motion-overlay-duration);
+  transition-property: opacity, display, overlay;
+  transition-behavior: allow-discrete;
+}
+
+dialog.miaixz-drawer[open]::backdrop {
+  opacity: 1;
+}
+
+@starting-style {
+  dialog.miaixz-drawer[open] {
+    opacity: 0;
+    transform: translateX(var(--miaixz-drawer-offset));
+  }
+
+  dialog.miaixz-drawer-left[open] {
+    transform: translateX(calc(var(--miaixz-drawer-offset) * -1));
+  }
+
+  dialog.miaixz-drawer-bottom[open] {
+    transform: translateY(var(--miaixz-drawer-offset));
+  }
+
+  dialog.miaixz-drawer[open]::backdrop {
+    opacity: 0;
+  }
+}
+
+.miaixz-drawer-small {
+  --miaixz-drawer-width: var(--miaixz-drawer-width-small);
+}
+
+.miaixz-drawer-large {
+  --miaixz-drawer-width: var(--miaixz-drawer-width-large);
+}
+
+dialog.miaixz-drawer-left {
+  inset: 0 auto 0 0;
+  border-inline-start: 0;
+  border-inline-end: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+  transform: translateX(calc(var(--miaixz-drawer-offset) * -1));
+}
+
+dialog.miaixz-drawer-bottom {
+  inset: auto 0 0;
+  width: 100%;
+  height: auto;
+  max-height: calc(100dvh - var(--miaixz-shell-header-height));
+  border-inline-start: 0;
+  border-top: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+  border-radius: var(--miaixz-radius-dialog) var(--miaixz-radius-dialog) 0 0;
+  transform: translateY(var(--miaixz-drawer-offset));
+}
+
+.miaixz-drawer-header,
+.miaixz-drawer-body,
+.miaixz-drawer-footer {
+  min-width: 0;
+  padding-block: var(--miaixz-density-panel-padding);
+  padding-inline: calc(var(--miaixz-density-panel-padding) + var(--miaixz-safe-area-inline-start))
+    calc(var(--miaixz-density-panel-padding) + var(--miaixz-safe-area-inline-end));
+}
+
+.miaixz-drawer-header {
+  display: flex;
+  flex: none;
+  gap: var(--miaixz-space-16);
+  align-items: flex-start;
+  justify-content: space-between;
+  padding-top: calc(var(--miaixz-density-panel-padding) + var(--miaixz-safe-area-top));
+  border-bottom: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+}
+
+.miaixz-drawer-title {
+  margin: 0;
+  font-size: var(--miaixz-text-page-title-size);
+  font-weight: var(--miaixz-font-weight-medium);
+  line-height: var(--miaixz-text-page-title-line-height);
+}
+
+.miaixz-drawer-description {
+  margin: var(--miaixz-space-4) 0 0;
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-drawer-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+.miaixz-drawer-footer {
+  display: flex;
+  flex: none;
+  gap: var(--miaixz-control-gap);
+  align-items: center;
+  justify-content: flex-end;
+  padding-bottom: calc(var(--miaixz-density-panel-padding) + var(--miaixz-safe-area-bottom));
+  border-top: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+}
+
+@media (width <= 767px) {
+  dialog.miaixz-drawer:not(.miaixz-drawer-bottom) {
+    width: 100%;
+  }
+}

package/dist/styles/components/dropdown.css

@@ -0,0 +1,75 @@
+.miaixz-popover-content.miaixz-dropdown-content {
+  width: max-content;
+  min-width: 220px;
+  padding: var(--miaixz-space-4);
+}
+
+.miaixz-dropdown-item {
+  display: flex;
+  gap: var(--miaixz-space-8);
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  padding: var(--miaixz-space-8) var(--miaixz-space-12);
+  font: inherit;
+  color: var(--miaixz-color-text-primary);
+  text-align: start;
+  text-decoration: none;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: var(--miaixz-radius-control);
+}
+
+.miaixz-dropdown-item:hover,
+.miaixz-dropdown-item:focus-visible,
+.miaixz-dropdown-item-selected {
+  outline: 0;
+  background: var(--miaixz-color-surface-hover);
+}
+
+.miaixz-dropdown-item:focus-visible {
+  box-shadow: inset 0 0 0 var(--miaixz-control-focus-width) var(--miaixz-color-focus);
+}
+
+.miaixz-dropdown-item-danger {
+  color: var(--miaixz-color-danger);
+}
+
+.miaixz-dropdown-item-icon,
+.miaixz-dropdown-item-check {
+  display: inline-flex;
+  flex: none;
+}
+
+.miaixz-dropdown-item-copy {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.miaixz-dropdown-item-label,
+.miaixz-dropdown-item-description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.miaixz-dropdown-item-description,
+.miaixz-dropdown-label {
+  font-size: var(--miaixz-text-caption-size);
+  line-height: var(--miaixz-text-caption-line-height);
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-dropdown-label {
+  padding: var(--miaixz-space-8) var(--miaixz-space-12) var(--miaixz-space-4);
+}
+
+.miaixz-dropdown-divider {
+  height: var(--miaixz-border-width-default);
+  margin: var(--miaixz-space-4);
+  background: var(--miaixz-color-border);
+  border: 0;
+}

package/dist/styles/components/dropzone.css

@@ -0,0 +1,94 @@
+/**
+ * Miaixz file selection dropzone
+ */
+
+:root {
+  --miaixz-dropzone-min-height: 152px;
+  --miaixz-dropzone-padding: var(--miaixz-space-24);
+}
+
+.miaixz-dropzone {
+  position: relative;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--miaixz-color-text-secondary);
+  background: var(--miaixz-color-surface-secondary);
+  border: var(--miaixz-border-width-2) dashed var(--miaixz-color-border-strong);
+  border-radius: var(--miaixz-radius-panel);
+  transition-timing-function: var(--miaixz-motion-interaction-easing);
+  transition-duration: var(--miaixz-motion-interaction-duration);
+  transition-property: color, background-color, border-color, box-shadow;
+}
+
+.miaixz-dropzone[data-state="active"] {
+  color: var(--miaixz-color-text-primary);
+  background: var(--miaixz-color-brand-soft);
+  border-color: var(--miaixz-color-focus);
+}
+
+.miaixz-dropzone[data-disabled="true"] {
+  color: var(--miaixz-color-text-disabled);
+  cursor: not-allowed;
+  background: var(--miaixz-color-surface-secondary);
+  border-color: var(--miaixz-color-border);
+  opacity: var(--miaixz-opacity-disabled);
+}
+
+.miaixz-dropzone-input {
+  display: none;
+}
+
+.miaixz-dropzone-trigger {
+  display: flex;
+  flex-direction: column;
+  gap: var(--miaixz-space-12);
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-width: 0;
+  min-height: var(--miaixz-dropzone-min-height);
+  padding: var(--miaixz-dropzone-padding);
+  font: inherit;
+  color: inherit;
+  text-align: center;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+}
+
+.miaixz-dropzone-trigger:focus-visible {
+  outline: var(--miaixz-control-focus-width) solid var(--miaixz-color-focus);
+  outline-offset: calc(-1 * var(--miaixz-control-focus-width));
+}
+
+.miaixz-dropzone-trigger:disabled {
+  cursor: not-allowed;
+}
+
+.miaixz-dropzone-icon {
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-dropzone[data-state="active"] .miaixz-dropzone-icon {
+  color: var(--miaixz-color-focus);
+}
+
+.miaixz-dropzone[data-disabled="true"] .miaixz-dropzone-icon {
+  color: var(--miaixz-color-text-disabled);
+}
+
+.miaixz-dropzone-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--miaixz-space-8);
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+}
+
+@media (width <= 639px) {
+  :root {
+    --miaixz-dropzone-min-height: 132px;
+    --miaixz-dropzone-padding: var(--miaixz-space-20);
+  }
+}

package/dist/styles/components/empty-state.css

@@ -0,0 +1,85 @@
+/**
+ * Miaixz empty state component
+ */
+
+:root {
+  --miaixz-empty-state-max-width: 480px;
+  --miaixz-empty-state-icon-container-size: 48px;
+  --miaixz-empty-state-padding-block: var(--miaixz-space-48);
+  --miaixz-empty-state-gap: var(--miaixz-space-12);
+}
+
+.miaixz-empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-width: 0;
+  padding: var(--miaixz-empty-state-padding-block) var(--miaixz-density-panel-padding);
+  color: var(--miaixz-color-text-primary);
+  text-align: center;
+}
+
+.miaixz-empty-state-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--miaixz-empty-state-gap);
+  align-items: center;
+  width: min(100%, var(--miaixz-empty-state-max-width));
+}
+
+.miaixz-empty-state-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--miaixz-empty-state-icon-container-size);
+  height: var(--miaixz-empty-state-icon-container-size);
+  color: var(--miaixz-color-text-secondary);
+  background: var(--miaixz-color-surface-secondary);
+  border-radius: var(--miaixz-radius-round);
+}
+
+.miaixz-empty-state-icon > .miaixz-icon {
+  width: var(--miaixz-icon-size-feature);
+  height: var(--miaixz-icon-size-feature);
+}
+
+.miaixz-empty-state-title {
+  margin: 0;
+  font-size: var(--miaixz-text-section-title-size);
+  font-weight: var(--miaixz-font-weight-medium);
+  line-height: var(--miaixz-text-section-title-line-height);
+}
+
+.miaixz-empty-state-description {
+  margin: 0;
+  font-size: var(--miaixz-text-body-size);
+  line-height: var(--miaixz-text-body-line-height);
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-empty-state-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--miaixz-control-gap);
+  align-items: center;
+  justify-content: center;
+  margin-block-start: var(--miaixz-space-4);
+}
+
+.miaixz-empty-state-compact {
+  --miaixz-empty-state-padding-block: var(--miaixz-space-24);
+  --miaixz-empty-state-icon-container-size: var(--miaixz-icon-size-40);
+}
+
+@media (width <= 767px) {
+  .miaixz-empty-state-actions {
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+  }
+
+  .miaixz-empty-state-actions > .miaixz-control {
+    width: 100%;
+  }
+}

package/dist/styles/components/file-upload.css

@@ -0,0 +1,145 @@
+/**
+ * Miaixz validated file upload component
+ */
+
+:root {
+  --miaixz-file-upload-item-padding: var(--miaixz-density-control-padding-inline);
+  --miaixz-file-upload-item-gap: var(--miaixz-density-component-gap);
+}
+
+.miaixz-file-upload {
+  display: grid;
+  gap: var(--miaixz-space-12);
+  min-width: 0;
+  font-family: var(--miaixz-font-family-sans);
+  font-size: var(--miaixz-text-body-size);
+  line-height: var(--miaixz-text-body-line-height);
+  color: var(--miaixz-color-text-primary);
+}
+
+.miaixz-file-upload-label {
+  font-weight: var(--miaixz-font-weight-medium);
+}
+
+.miaixz-file-upload-drop-label {
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-file-upload-browse-label {
+  color: var(--miaixz-color-text-primary);
+}
+
+.miaixz-file-upload-validation {
+  display: flex;
+  gap: var(--miaixz-space-8);
+  align-items: flex-start;
+  padding: var(--miaixz-space-12);
+  color: var(--miaixz-color-danger);
+  background: var(--miaixz-color-danger-soft);
+  border: var(--miaixz-border-width-default) solid var(--miaixz-color-danger);
+  border-radius: var(--miaixz-radius-control);
+}
+
+.miaixz-file-upload-validation-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.miaixz-file-upload-list {
+  display: grid;
+  gap: var(--miaixz-space-8);
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.miaixz-file-upload-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: var(--miaixz-file-upload-item-gap);
+  align-items: center;
+  min-width: 0;
+  min-height: var(--miaixz-density-list-item-height);
+  padding: var(--miaixz-file-upload-item-padding);
+  background: var(--miaixz-color-surface);
+  border: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+  border-radius: var(--miaixz-radius-control);
+}
+
+.miaixz-file-upload-status-icon {
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-file-upload-status {
+  font-size: var(--miaixz-text-caption-size);
+  line-height: var(--miaixz-text-caption-line-height);
+  color: var(--miaixz-color-text-secondary);
+  white-space: nowrap;
+}
+
+.miaixz-file-upload-item[data-state="uploading"] .miaixz-file-upload-status-icon {
+  color: var(--miaixz-color-focus);
+  animation: miaixz-file-upload-spin var(--miaixz-duration-slower) linear infinite;
+}
+
+.miaixz-file-upload-item[data-state="success"] .miaixz-file-upload-status-icon,
+.miaixz-file-upload-item[data-state="success"] .miaixz-file-upload-status {
+  color: var(--miaixz-color-success);
+}
+
+.miaixz-file-upload-item[data-state="error"] .miaixz-file-upload-status-icon,
+.miaixz-file-upload-item[data-state="error"] .miaixz-file-upload-status {
+  color: var(--miaixz-color-danger);
+}
+
+.miaixz-file-upload-details {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--miaixz-space-2) var(--miaixz-space-12);
+  align-items: center;
+  min-width: 0;
+}
+
+.miaixz-file-upload-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--miaixz-color-text-primary);
+  white-space: nowrap;
+}
+
+.miaixz-file-upload-details .miaixz-progress {
+  grid-column: 1 / -1;
+}
+
+.miaixz-file-upload-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--miaixz-space-4);
+  justify-content: flex-end;
+}
+
+@keyframes miaixz-file-upload-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .miaixz-file-upload-item[data-state="uploading"] .miaixz-file-upload-status-icon {
+    animation: none;
+  }
+}
+
+@media (width <= 639px) {
+  .miaixz-file-upload-item {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .miaixz-file-upload-actions {
+    grid-column: 1 / -1;
+    justify-content: flex-start;
+  }
+}

package/dist/styles/components/form-field.css

@@ -0,0 +1,49 @@
+/**
+ * Form field component
+ */
+
+.miaixz-form-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--miaixz-space-8);
+  min-width: 0;
+  font-family: var(--miaixz-font-family-sans);
+  font-size: var(--miaixz-text-body-size);
+  line-height: var(--miaixz-text-body-line-height);
+  color: var(--miaixz-color-text-primary);
+}
+
+.miaixz-form-field-label-row {
+  display: flex;
+  gap: var(--miaixz-space-12);
+  align-items: baseline;
+  justify-content: space-between;
+  min-width: 0;
+}
+
+.miaixz-form-field-label {
+  min-width: 0;
+  font-weight: var(--miaixz-font-weight-regular);
+  color: var(--miaixz-color-text-primary);
+}
+
+.miaixz-form-field-required {
+  margin-inline-start: var(--miaixz-space-4);
+  color: var(--miaixz-color-danger);
+}
+
+.miaixz-form-field-optional,
+.miaixz-form-field-helper,
+.miaixz-form-field-error {
+  font-size: var(--miaixz-text-caption-size);
+  line-height: var(--miaixz-text-caption-line-height);
+}
+
+.miaixz-form-field-optional,
+.miaixz-form-field-helper {
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-form-field-error {
+  color: var(--miaixz-color-danger);
+}

package/dist/styles/components/icon.css

@@ -0,0 +1,53 @@
+/**
+ * Icon component
+ */
+
+.miaixz-icon {
+  display: inline-block;
+  flex: none;
+  width: 1em;
+  height: 1em;
+  overflow: visible;
+  vertical-align: -0.125em;
+  color: inherit;
+  pointer-events: none;
+  stroke-width: var(--miaixz-icon-stroke-regular);
+}
+
+.miaixz-icon[role="img"] {
+  pointer-events: auto;
+}
+
+.miaixz-icon-indicator {
+  width: var(--miaixz-icon-size-indicator);
+  height: var(--miaixz-icon-size-indicator);
+}
+
+.miaixz-icon-inline {
+  width: var(--miaixz-icon-size-inline);
+  height: var(--miaixz-icon-size-inline);
+}
+
+.miaixz-icon-control {
+  width: var(--miaixz-icon-size-control);
+  height: var(--miaixz-icon-size-control);
+}
+
+.miaixz-icon-navigation {
+  width: var(--miaixz-icon-size-navigation);
+  height: var(--miaixz-icon-size-navigation);
+}
+
+.miaixz-icon-feature {
+  width: var(--miaixz-icon-size-feature);
+  height: var(--miaixz-icon-size-feature);
+}
+
+.miaixz-icon-display {
+  width: var(--miaixz-icon-size-display);
+  height: var(--miaixz-icon-size-display);
+}
+
+.miaixz-icon-strong {
+  stroke-width: var(--miaixz-icon-stroke-strong);
+}

package/dist/styles/components/inline-message.css

@@ -0,0 +1,33 @@
+/**
+ * Miaixz inline message component
+ */
+
+.miaixz-inline-message {
+  display: inline-flex;
+  gap: var(--miaixz-space-8);
+  align-items: flex-start;
+  font-size: var(--miaixz-text-body-size);
+  line-height: var(--miaixz-text-body-line-height);
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-inline-message-icon {
+  flex: none;
+  margin-block-start: var(--miaixz-space-2);
+}
+
+.miaixz-inline-message-info {
+  color: var(--miaixz-color-info);
+}
+
+.miaixz-inline-message-success {
+  color: var(--miaixz-color-success);
+}
+
+.miaixz-inline-message-warning {
+  color: var(--miaixz-color-warning);
+}
+
+.miaixz-inline-message-danger {
+  color: var(--miaixz-color-danger);
+}