@miaixz/ui 0.5.0

package/dist/styles/components/table.css

@@ -0,0 +1,127 @@
+/**
+ * Miaixz data table component
+ */
+
+:root {
+  --miaixz-table-row-height: var(--miaixz-density-table-row-height);
+  --miaixz-table-cell-padding-inline: var(--miaixz-density-table-cell-padding-inline);
+  --miaixz-table-cell-padding-block: var(--miaixz-density-table-cell-padding-block);
+  --miaixz-table-action-width: var(--miaixz-control-height-small);
+}
+
+.miaixz-table-container {
+  width: 100%;
+  min-width: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-width: thin;
+  background: var(--miaixz-color-surface);
+  border: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+  border-radius: var(--miaixz-radius-panel);
+}
+
+.miaixz-table {
+  width: 100%;
+  min-width: 640px;
+  font-size: var(--miaixz-text-body-size);
+  line-height: var(--miaixz-text-body-line-height);
+  color: var(--miaixz-color-text-primary);
+  border-spacing: 0;
+  border-collapse: separate;
+  background: var(--miaixz-color-surface);
+}
+
+.miaixz-table-caption {
+  padding: var(--miaixz-table-cell-padding-block) var(--miaixz-table-cell-padding-inline);
+  color: var(--miaixz-color-text-secondary);
+  text-align: start;
+}
+
+.miaixz-table-head {
+  color: var(--miaixz-color-text-secondary);
+  background: var(--miaixz-color-surface-secondary);
+}
+
+.miaixz-table-header,
+.miaixz-table-cell {
+  height: var(--miaixz-table-row-height);
+  padding: var(--miaixz-table-cell-padding-block) var(--miaixz-table-cell-padding-inline);
+  vertical-align: middle;
+  text-align: start;
+  border-bottom: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+}
+
+.miaixz-table-header {
+  font-size: var(--miaixz-text-caption-size);
+  font-weight: var(--miaixz-font-weight-regular);
+  line-height: var(--miaixz-text-caption-line-height);
+}
+
+.miaixz-table-body .miaixz-table-row:last-child > .miaixz-table-cell {
+  border-bottom: 0;
+}
+
+.miaixz-table-body .miaixz-table-row {
+  transition-timing-function: var(--miaixz-motion-interaction-easing);
+  transition-duration: var(--miaixz-motion-interaction-duration);
+  transition-property: background-color;
+}
+
+.miaixz-table-body .miaixz-table-row:hover {
+  background: var(--miaixz-color-surface-hover);
+}
+
+.miaixz-table-row[data-selected="true"] {
+  background: var(--miaixz-color-surface-selected);
+}
+
+.miaixz-table-numeric {
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+}
+
+.miaixz-table-actions {
+  width: var(--miaixz-table-action-width);
+  text-align: end;
+  white-space: nowrap;
+}
+
+.miaixz-table-sort {
+  display: inline-flex;
+  gap: var(--miaixz-space-4);
+  align-items: center;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+}
+
+.miaixz-table-sort[aria-sort="ascending"],
+.miaixz-table-sort[aria-sort="descending"] {
+  color: var(--miaixz-color-text-primary);
+}
+
+.miaixz-table-sticky .miaixz-table-head {
+  position: sticky;
+  top: 0;
+  z-index: var(--miaixz-z-sticky);
+}
+
+.miaixz-table-empty {
+  padding: var(--miaixz-space-48) var(--miaixz-table-cell-padding-inline);
+  color: var(--miaixz-color-text-secondary);
+  text-align: center;
+}
+
+@media print {
+  .miaixz-table-container {
+    overflow: visible;
+    border: 0;
+  }
+
+  .miaixz-table {
+    min-width: 0;
+  }
+}

package/dist/styles/components/tabs.css

@@ -0,0 +1,144 @@
+/**
+ * Miaixz tabs component
+ * Use tablist, tab and tabpanel roles with aria-selected and aria-controls.
+ */
+
+:root {
+  --miaixz-tabs-height: var(--miaixz-density-control-height);
+  --miaixz-tabs-gap: var(--miaixz-space-24);
+  --miaixz-tabs-padding-inline: var(--miaixz-space-4);
+  --miaixz-tabs-indicator-size: var(--miaixz-border-width-strong);
+}
+
+.miaixz-tabs {
+  min-width: 0;
+}
+
+.miaixz-tabs-list {
+  display: flex;
+  gap: var(--miaixz-tabs-gap);
+  align-items: stretch;
+  min-width: 0;
+  padding-inline: var(--miaixz-tabs-padding-inline);
+  overflow: auto hidden;
+  scrollbar-width: none;
+  border-bottom: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+}
+
+.miaixz-tabs-list::-webkit-scrollbar {
+  display: none;
+}
+
+.miaixz-tab {
+  display: inline-flex;
+  flex: none;
+  gap: var(--miaixz-control-gap);
+  align-items: center;
+  justify-content: center;
+  min-height: var(--miaixz-tabs-height);
+  padding: 0;
+  font: inherit;
+  color: var(--miaixz-color-text-secondary);
+  white-space: nowrap;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  transition-timing-function: var(--miaixz-motion-interaction-easing);
+  transition-duration: var(--miaixz-motion-interaction-duration);
+  transition-property: color, box-shadow, opacity;
+}
+
+.miaixz-tab:where(:hover:not(:disabled, [aria-disabled="true"])) {
+  color: var(--miaixz-color-text-primary);
+}
+
+.miaixz-tab[aria-selected="true"] {
+  color: var(--miaixz-color-text-primary);
+  box-shadow: inset 0 calc(var(--miaixz-tabs-indicator-size) * -1) 0 var(--miaixz-color-brand);
+}
+
+.miaixz-tab:disabled,
+.miaixz-tab[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: var(--miaixz-opacity-disabled);
+}
+
+.miaixz-tab-count {
+  font-size: var(--miaixz-text-caption-size);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--miaixz-text-caption-line-height);
+  color: var(--miaixz-color-text-muted);
+}
+
+.miaixz-tab-panel {
+  min-width: 0;
+  padding-block-start: var(--miaixz-density-panel-padding);
+}
+
+.miaixz-tabs-vertical {
+  display: grid;
+  grid-template-columns: minmax(160px, var(--miaixz-layout-local-sidebar-width)) minmax(0, 1fr);
+  gap: var(--miaixz-layout-grid-gap);
+}
+
+.miaixz-tabs-vertical > .miaixz-tabs-list {
+  flex-direction: column;
+  gap: var(--miaixz-space-4);
+  align-items: stretch;
+  padding-inline: 0;
+  overflow: visible;
+  border-inline-end: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+  border-bottom: 0;
+}
+
+.miaixz-tabs-vertical > .miaixz-tabs-list .miaixz-tab {
+  justify-content: flex-start;
+  padding-inline: var(--miaixz-density-control-padding-inline);
+  border-radius: var(--miaixz-radius-control);
+}
+
+.miaixz-tabs-vertical > .miaixz-tabs-list .miaixz-tab[aria-selected="true"] {
+  background: var(--miaixz-color-surface-selected);
+  box-shadow: inset var(--miaixz-tabs-indicator-size) 0 0 var(--miaixz-color-brand);
+}
+
+.miaixz-tabs-vertical > .miaixz-tab-panel {
+  padding-block-start: 0;
+}
+
+@media (width <= 767px) {
+  .miaixz-tabs-vertical {
+    display: block;
+  }
+
+  .miaixz-tabs-vertical > .miaixz-tabs-list {
+    flex-direction: row;
+    gap: var(--miaixz-tabs-gap);
+    align-items: stretch;
+    overflow-x: auto;
+    border-inline-end: 0;
+    border-bottom: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+  }
+
+  .miaixz-tabs-vertical > .miaixz-tabs-list .miaixz-tab {
+    justify-content: center;
+    padding-inline: 0;
+    border-radius: 0;
+  }
+
+  .miaixz-tabs-vertical > .miaixz-tabs-list .miaixz-tab[aria-selected="true"] {
+    background: transparent;
+    box-shadow: inset 0 calc(var(--miaixz-tabs-indicator-size) * -1) 0 var(--miaixz-color-brand);
+  }
+
+  .miaixz-tabs-vertical > .miaixz-tab-panel {
+    padding-block-start: var(--miaixz-density-panel-padding);
+  }
+}
+
+@media (pointer: coarse) {
+  .miaixz-tab {
+    min-height: max(var(--miaixz-tabs-height), var(--miaixz-control-min-target-size));
+  }
+}

package/dist/styles/components/textarea.css

@@ -0,0 +1,79 @@
+/**
+ * Textarea component
+ */
+
+.miaixz-textarea {
+  display: block;
+  width: 100%;
+  min-height: var(--miaixz-control-textarea-min-height);
+  padding: var(--miaixz-control-padding-block-textarea) var(--miaixz-density-control-padding-inline);
+  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);
+  background: var(--miaixz-color-surface);
+  border: var(--miaixz-control-border-width) solid var(--miaixz-color-border);
+  border-radius: var(--miaixz-control-radius);
+  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-textarea::placeholder {
+  color: var(--miaixz-color-text-muted);
+  opacity: 1;
+}
+
+.miaixz-textarea:where(:hover:not(:disabled, [readonly])) {
+  border-color: var(--miaixz-color-border-strong);
+}
+
+.miaixz-textarea:focus-visible {
+  outline: var(--miaixz-control-focus-width) solid var(--miaixz-color-focus);
+  outline-offset: var(--miaixz-control-focus-offset);
+  border-color: var(--miaixz-color-focus);
+}
+
+.miaixz-textarea-small {
+  padding-inline: var(--miaixz-control-padding-inline-small);
+}
+
+.miaixz-textarea-medium {
+  padding-inline: var(--miaixz-control-padding-inline-medium);
+}
+
+.miaixz-textarea-large {
+  padding-inline: var(--miaixz-control-padding-inline-large);
+}
+
+.miaixz-textarea-invalid,
+.miaixz-textarea-invalid:focus-visible {
+  outline-color: var(--miaixz-color-danger);
+  border-color: var(--miaixz-color-danger);
+}
+
+.miaixz-textarea:disabled {
+  color: var(--miaixz-color-text-disabled);
+  cursor: not-allowed;
+  background: var(--miaixz-color-surface-secondary);
+}
+
+.miaixz-textarea[readonly] {
+  background: var(--miaixz-color-surface-secondary);
+}
+
+.miaixz-textarea[data-resize="none"] {
+  resize: none;
+}
+
+.miaixz-textarea[data-resize="vertical"] {
+  resize: vertical;
+}
+
+.miaixz-textarea[data-resize="horizontal"] {
+  resize: horizontal;
+}
+
+.miaixz-textarea[data-resize="both"] {
+  resize: both;
+}

package/dist/styles/components/toast.css

@@ -0,0 +1,134 @@
+/**
+ * Miaixz toast component
+ * The containing region should use aria-live="polite".
+ */
+
+:root {
+  --miaixz-toast-max-width: 420px;
+  --miaixz-toast-padding: var(--miaixz-space-16);
+  --miaixz-toast-gap: var(--miaixz-space-12);
+  --miaixz-toast-offset: var(--miaixz-space-8);
+  --miaixz-toast-status-size: var(--miaixz-border-width-strong);
+}
+
+.miaixz-toast-region {
+  position: fixed;
+  inset-inline-end: max(var(--miaixz-page-gutter), var(--miaixz-safe-area-inline-end));
+  top: max(var(--miaixz-page-gutter), var(--miaixz-safe-area-top));
+  z-index: var(--miaixz-z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--miaixz-space-8);
+  width: min(calc(100vw - (var(--miaixz-page-gutter) * 2)), var(--miaixz-toast-max-width));
+  max-width: none;
+  max-height: calc(100dvh - (var(--miaixz-page-gutter) * 2));
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  color: inherit;
+  pointer-events: none;
+  background: transparent;
+  border: 0;
+}
+
+.miaixz-toast {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  gap: var(--miaixz-toast-gap);
+  align-items: start;
+  padding: var(--miaixz-toast-padding);
+  color: var(--miaixz-color-text-primary);
+  pointer-events: auto;
+  background: var(--miaixz-color-surface);
+  border: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+  border-inline-start-width: var(--miaixz-toast-status-size);
+  border-radius: var(--miaixz-radius-panel);
+  box-shadow: var(--miaixz-shadow-high);
+  transition-timing-function: var(--miaixz-motion-enter-easing);
+  transition-duration: var(--miaixz-motion-state-duration);
+  transition-property: opacity, transform;
+}
+
+.miaixz-toast[data-miaixz-state="entering"],
+.miaixz-toast[data-miaixz-state="leaving"] {
+  opacity: 0;
+  transform: translateY(calc(var(--miaixz-toast-offset) * -1));
+}
+
+.miaixz-toast-success {
+  border-inline-start-color: var(--miaixz-color-success);
+}
+
+.miaixz-toast-warning {
+  border-inline-start-color: var(--miaixz-color-warning);
+}
+
+.miaixz-toast-danger {
+  border-inline-start-color: var(--miaixz-color-danger);
+}
+
+.miaixz-toast-info {
+  border-inline-start-color: var(--miaixz-color-info);
+}
+
+.miaixz-toast-icon {
+  width: var(--miaixz-icon-size-control);
+  height: var(--miaixz-icon-size-control);
+  margin-block-start: var(--miaixz-space-2);
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-toast-success > .miaixz-toast-icon {
+  color: var(--miaixz-color-success);
+}
+
+.miaixz-toast-warning > .miaixz-toast-icon {
+  color: var(--miaixz-color-warning);
+}
+
+.miaixz-toast-danger > .miaixz-toast-icon {
+  color: var(--miaixz-color-danger);
+}
+
+.miaixz-toast-info > .miaixz-toast-icon {
+  color: var(--miaixz-color-info);
+}
+
+.miaixz-toast-content {
+  min-width: 0;
+}
+
+.miaixz-toast-title {
+  margin: 0;
+  font-size: var(--miaixz-text-body-size);
+  font-weight: var(--miaixz-font-weight-medium);
+  line-height: var(--miaixz-text-body-line-height);
+}
+
+.miaixz-toast-message {
+  margin: var(--miaixz-space-2) 0 0;
+  font-size: var(--miaixz-text-caption-size);
+  line-height: var(--miaixz-text-caption-line-height);
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-toast-actions {
+  display: flex;
+  gap: var(--miaixz-control-gap);
+  align-items: center;
+  margin-block-start: var(--miaixz-space-8);
+}
+
+.miaixz-toast-dismiss {
+  align-self: start;
+}
+
+@media (width <= 767px) {
+  .miaixz-toast-region {
+    inset-inline: max(var(--miaixz-space-16), var(--miaixz-safe-area-inline-start))
+      max(var(--miaixz-space-16), var(--miaixz-safe-area-inline-end));
+    top: max(var(--miaixz-space-16), var(--miaixz-safe-area-top));
+    width: auto;
+  }
+}

package/dist/styles/components/toolbar.css

@@ -0,0 +1,27 @@
+.miaixz-toolbar,
+.miaixz-toolbar-group {
+  display: flex;
+  gap: var(--miaixz-space-8);
+  align-items: center;
+  min-width: 0;
+}
+
+.miaixz-toolbar {
+  width: 100%;
+}
+
+.miaixz-toolbar[data-orientation="vertical"] {
+  flex-direction: column;
+  align-items: stretch;
+  width: auto;
+}
+
+.miaixz-toolbar[data-orientation="vertical"] .miaixz-toolbar-group {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.miaixz-toolbar-spacer {
+  flex: 1 1 auto;
+  min-width: var(--miaixz-space-8);
+}

package/dist/styles/components/tooltip.css

@@ -0,0 +1,32 @@
+.miaixz-tooltip {
+  display: inline-flex;
+}
+
+.miaixz-tooltip-content {
+  position: fixed;
+  inset: auto;
+  z-index: var(--miaixz-z-overlay);
+  width: max-content;
+  max-width: min(280px, calc(100vw - var(--miaixz-space-16)));
+  max-height: calc(100dvh - var(--miaixz-space-16));
+  padding: var(--miaixz-space-4) var(--miaixz-space-8);
+  margin: 0;
+  overflow: auto;
+  font-size: var(--miaixz-text-caption-size);
+  line-height: var(--miaixz-text-caption-line-height);
+  color: var(--miaixz-color-text-inverse);
+  pointer-events: none;
+  background: var(--miaixz-color-text-primary);
+  border: 0;
+  border-radius: var(--miaixz-radius-4);
+  box-shadow: var(--miaixz-shadow-medium);
+  transition:
+    opacity var(--miaixz-motion-interaction-duration) var(--miaixz-motion-interaction-easing),
+    transform var(--miaixz-motion-interaction-duration) var(--miaixz-motion-interaction-easing);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .miaixz-tooltip-content {
+    transition: none;
+  }
+}

package/dist/styles/components/tree-view.css

@@ -0,0 +1,146 @@
+.miaixz-tree-view {
+  width: 100%;
+  min-width: 0;
+  padding: var(--miaixz-space-4);
+  color: var(--miaixz-color-text-primary);
+  background: var(--miaixz-color-surface);
+  border: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+  border-radius: var(--miaixz-radius-panel);
+}
+
+.miaixz-tree-view-item,
+.miaixz-tree-view-group {
+  min-width: 0;
+}
+
+.miaixz-tree-view-item {
+  outline: 0;
+}
+
+.miaixz-tree-view-group {
+  padding-inline-start: var(--miaixz-space-20);
+}
+
+.miaixz-tree-view-row {
+  display: flex;
+  gap: var(--miaixz-space-8);
+  align-items: center;
+  min-width: 0;
+  min-height: var(--miaixz-density-list-item-height);
+  padding: var(--miaixz-space-4) var(--miaixz-space-8);
+  cursor: pointer;
+  border-radius: var(--miaixz-radius-control);
+  transition-timing-function: var(--miaixz-motion-interaction-easing);
+  transition-duration: var(--miaixz-motion-interaction-duration);
+  transition-property: color, background-color, border-color;
+}
+
+.miaixz-tree-view-row:hover {
+  background: var(--miaixz-color-surface-hover);
+}
+
+.miaixz-tree-view-item[aria-selected="true"] > .miaixz-tree-view-row {
+  color: var(--miaixz-color-text-primary);
+  background: var(--miaixz-color-surface-selected);
+}
+
+.miaixz-tree-view-item:focus-visible > .miaixz-tree-view-row {
+  outline: var(--miaixz-control-focus-width) solid var(--miaixz-color-focus);
+  outline-offset: var(--miaixz-control-focus-offset);
+}
+
+.miaixz-tree-view-item[data-disabled="true"] > .miaixz-tree-view-row {
+  color: var(--miaixz-color-text-disabled);
+  cursor: not-allowed;
+  opacity: var(--miaixz-opacity-disabled);
+}
+
+.miaixz-tree-view-expander {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--miaixz-control-min-target-size);
+  height: var(--miaixz-control-min-target-size);
+  color: var(--miaixz-color-text-secondary);
+  cursor: pointer;
+  border-radius: var(--miaixz-radius-control);
+}
+
+.miaixz-tree-view-expander[data-state="leaf"] {
+  cursor: default;
+}
+
+.miaixz-tree-view-label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--miaixz-text-body-size);
+  font-weight: var(--miaixz-font-weight-regular);
+  line-height: var(--miaixz-text-body-line-height);
+  white-space: nowrap;
+}
+
+.miaixz-tree-view-selection {
+  flex: none;
+  color: var(--miaixz-color-brand);
+}
+
+.miaixz-tree-view-error {
+  display: flex;
+  gap: var(--miaixz-space-8);
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--miaixz-density-control-height);
+  padding: var(--miaixz-space-4) var(--miaixz-space-8);
+  margin-inline-start: calc(var(--miaixz-control-min-target-size) + var(--miaixz-space-8));
+  font-size: var(--miaixz-text-caption-size);
+  line-height: var(--miaixz-text-caption-line-height);
+  color: var(--miaixz-color-danger);
+  background: var(--miaixz-color-danger-soft);
+  border-radius: var(--miaixz-radius-control);
+}
+
+.miaixz-tree-view-retry {
+  display: inline-flex;
+  flex: none;
+  gap: var(--miaixz-space-4);
+  align-items: center;
+  justify-content: center;
+  min-height: var(--miaixz-control-min-target-size);
+  padding: 0 var(--miaixz-space-8);
+  font: inherit;
+  color: var(--miaixz-color-danger);
+  cursor: pointer;
+  background: transparent;
+  border: var(--miaixz-border-width-default) solid currentcolor;
+  border-radius: var(--miaixz-radius-control);
+}
+
+.miaixz-tree-view-retry:focus-visible {
+  outline: var(--miaixz-control-focus-width) solid var(--miaixz-color-focus);
+  outline-offset: var(--miaixz-control-focus-offset);
+}
+
+.miaixz-tree-view-item[data-state="loading"] > .miaixz-tree-view-row .miaixz-icon-spin {
+  animation: miaixz-tree-view-spin var(--miaixz-motion-duration-slow) linear infinite;
+}
+
+@keyframes miaixz-tree-view-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .miaixz-tree-view-item[data-state="loading"] > .miaixz-tree-view-row .miaixz-icon-spin {
+    animation: none;
+  }
+}
+
+@media (pointer: coarse) {
+  .miaixz-tree-view-row {
+    min-height: max(var(--miaixz-density-list-item-height), var(--miaixz-control-min-target-size));
+  }
+}