@miaixz/ui 0.5.0

package/dist/styles/components/choice.css

@@ -0,0 +1,120 @@
+/**
+ * Checkbox and radio components
+ */
+
+.miaixz-choice {
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: var(--miaixz-icon-size-control) minmax(0, 1fr);
+  gap: var(--miaixz-space-8);
+  align-items: start;
+  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);
+  cursor: pointer;
+}
+
+.miaixz-choice-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.miaixz-choice-mark {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--miaixz-icon-size-control);
+  height: var(--miaixz-icon-size-control);
+  margin-block-start: calc(
+    (var(--miaixz-text-body-line-height) - var(--miaixz-icon-size-control)) / 2
+  );
+  background: var(--miaixz-color-surface);
+  border: var(--miaixz-control-border-width) solid var(--miaixz-color-border-strong);
+  transition-timing-function: var(--miaixz-motion-interaction-easing);
+  transition-duration: var(--miaixz-motion-interaction-duration);
+  transition-property: background-color, border-color, box-shadow;
+}
+
+.miaixz-checkbox .miaixz-choice-mark {
+  border-radius: var(--miaixz-radius-control);
+}
+
+.miaixz-radio .miaixz-choice-mark {
+  border-radius: 50%;
+}
+
+.miaixz-choice:where(:hover:not(.miaixz-choice-disabled)) .miaixz-choice-mark {
+  border-color: var(--miaixz-color-brand);
+}
+
+.miaixz-choice-input:where(:focus-visible) + .miaixz-choice-mark {
+  outline: var(--miaixz-control-focus-width) solid var(--miaixz-color-focus);
+  outline-offset: var(--miaixz-control-focus-offset);
+}
+
+.miaixz-choice-input:where(:checked, :indeterminate) + .miaixz-choice-mark {
+  background: var(--miaixz-color-brand);
+  border-color: var(--miaixz-color-brand);
+}
+
+.miaixz-checkbox .miaixz-choice-input:checked + .miaixz-choice-mark::after {
+  width: 4px;
+  height: 8px;
+  content: "";
+  border: solid var(--miaixz-color-on-brand);
+  border-width: 0 2px 2px 0;
+  transform: translateY(-1px) rotate(45deg);
+}
+
+.miaixz-checkbox .miaixz-choice-input:indeterminate + .miaixz-choice-mark::after {
+  width: 8px;
+  height: 2px;
+  content: "";
+  background: var(--miaixz-color-on-brand);
+}
+
+.miaixz-radio .miaixz-choice-input:checked + .miaixz-choice-mark::after {
+  width: 6px;
+  height: 6px;
+  content: "";
+  background: var(--miaixz-color-on-brand);
+  border-radius: 50%;
+}
+
+.miaixz-choice-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--miaixz-space-2);
+  min-width: 0;
+}
+
+.miaixz-choice-label {
+  color: var(--miaixz-color-text-primary);
+}
+
+.miaixz-choice-description {
+  font-size: var(--miaixz-text-caption-size);
+  line-height: var(--miaixz-text-caption-line-height);
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-choice-disabled {
+  color: var(--miaixz-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.miaixz-choice-disabled .miaixz-choice-label,
+.miaixz-choice-disabled .miaixz-choice-description {
+  color: var(--miaixz-color-text-disabled);
+}
+
+.miaixz-choice-disabled .miaixz-choice-mark {
+  background: var(--miaixz-color-surface-secondary);
+  border-color: var(--miaixz-color-border);
+}

package/dist/styles/components/combobox.css

@@ -0,0 +1,200 @@
+.miaixz-combobox,
+.miaixz-multi-select {
+  display: flex;
+  flex-direction: column;
+  gap: var(--miaixz-space-8);
+  width: 100%;
+  min-width: 0;
+}
+
+.miaixz-combobox-label,
+.miaixz-multi-select-label {
+  font-size: var(--miaixz-text-body-size);
+  line-height: var(--miaixz-text-body-line-height);
+  color: var(--miaixz-color-text-primary);
+}
+
+.miaixz-combobox-control,
+.miaixz-multi-select-control {
+  justify-content: flex-start;
+  width: 100%;
+  padding-inline-end: var(--miaixz-space-4);
+  cursor: text;
+}
+
+.miaixz-combobox-control:focus-within,
+.miaixz-multi-select-control:focus-within {
+  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-combobox-control[data-disabled="true"],
+.miaixz-multi-select-control[data-disabled="true"] {
+  color: var(--miaixz-color-text-disabled);
+  cursor: not-allowed;
+  background: var(--miaixz-color-surface-secondary);
+}
+
+.miaixz-combobox-input,
+.miaixz-multi-select-input {
+  flex: 1 1 72px;
+  min-width: 48px;
+  height: calc(var(--miaixz-density-control-height) - 2 * var(--miaixz-control-border-width));
+  padding: 0;
+  font: inherit;
+  line-height: inherit;
+  color: inherit;
+  outline: 0;
+  background: transparent;
+  border: 0;
+}
+
+.miaixz-combobox-input::placeholder,
+.miaixz-multi-select-input::placeholder {
+  color: var(--miaixz-color-text-muted);
+  opacity: 1;
+}
+
+.miaixz-combobox-input:disabled,
+.miaixz-multi-select-input:disabled {
+  cursor: not-allowed;
+}
+
+.miaixz-combobox-toggle,
+.miaixz-multi-select-toggle {
+  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);
+  padding: 0;
+  color: var(--miaixz-color-text-secondary);
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: var(--miaixz-radius-control);
+}
+
+.miaixz-combobox-toggle:disabled,
+.miaixz-multi-select-toggle:disabled {
+  color: var(--miaixz-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.miaixz-combobox-surface,
+.miaixz-multi-select-surface {
+  position: fixed;
+  inset: auto;
+  z-index: var(--miaixz-z-overlay);
+  width: min(360px, calc(100vw - var(--miaixz-space-16)));
+  min-width: 240px;
+  max-height: min(360px, calc(100dvh - var(--miaixz-space-16)));
+  padding: var(--miaixz-space-4);
+  margin: 0;
+  overflow: auto;
+  background: var(--miaixz-color-surface);
+  border: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+  border-radius: var(--miaixz-radius-panel);
+  box-shadow: var(--miaixz-shadow-overlay);
+}
+
+.miaixz-combobox-listbox,
+.miaixz-multi-select-listbox {
+  display: flex;
+  flex-direction: column;
+  gap: var(--miaixz-space-2);
+  outline: 0;
+}
+
+.miaixz-combobox-option,
+.miaixz-multi-select-option {
+  display: flex;
+  gap: var(--miaixz-space-8);
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  padding: var(--miaixz-space-8) var(--miaixz-space-12);
+  color: var(--miaixz-color-text-primary);
+  cursor: pointer;
+  border-radius: var(--miaixz-radius-control);
+}
+
+.miaixz-combobox-option[data-state="active"],
+.miaixz-multi-select-option[data-state="active"] {
+  background: var(--miaixz-color-surface-hover);
+  box-shadow: inset 0 0 0 var(--miaixz-control-focus-width) var(--miaixz-color-focus);
+}
+
+.miaixz-combobox-option[data-disabled="true"],
+.miaixz-multi-select-option[data-disabled="true"] {
+  color: var(--miaixz-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.miaixz-combobox-option-copy,
+.miaixz-multi-select-option-copy {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.miaixz-combobox-option-label,
+.miaixz-combobox-option-description,
+.miaixz-multi-select-option-label,
+.miaixz-multi-select-option-description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.miaixz-combobox-option-description,
+.miaixz-multi-select-option-description {
+  font-size: var(--miaixz-text-caption-size);
+  line-height: var(--miaixz-text-caption-line-height);
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-combobox-message,
+.miaixz-multi-select-message {
+  display: flex;
+  gap: var(--miaixz-space-8);
+  align-items: center;
+  min-height: var(--miaixz-density-control-height);
+  padding: var(--miaixz-space-8) var(--miaixz-space-12);
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-combobox-surface[data-state="error"] .miaixz-combobox-message,
+.miaixz-multi-select-surface[data-state="error"] .miaixz-multi-select-message {
+  color: var(--miaixz-color-danger);
+}
+
+.miaixz-combobox-message .miaixz-icon-spin,
+.miaixz-multi-select-message .miaixz-icon-spin {
+  animation: miaixz-combobox-spin var(--miaixz-motion-duration-slow) linear infinite;
+}
+
+@keyframes miaixz-combobox-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .miaixz-combobox-message .miaixz-icon-spin,
+  .miaixz-multi-select-message .miaixz-icon-spin {
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .miaixz-combobox-option[data-state="active"],
+  .miaixz-multi-select-option[data-state="active"] {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+    box-shadow: none;
+  }
+}

package/dist/styles/components/confirm-dialog.css

@@ -0,0 +1,50 @@
+/**
+ * Miaixz confirmation dialog component
+ */
+
+.miaixz-confirm-dialog-content {
+  display: grid;
+  grid-template-areas:
+    "input input input"
+    "error error error"
+    ". cancel confirm";
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  gap: var(--miaixz-space-12);
+  align-items: center;
+}
+
+.miaixz-confirm-dialog-input {
+  grid-area: input;
+}
+
+.miaixz-confirm-dialog-input > .miaixz-input {
+  width: 100%;
+}
+
+.miaixz-confirm-dialog-error {
+  grid-area: error;
+}
+
+.miaixz-confirm-dialog-cancel {
+  grid-area: cancel;
+}
+
+.miaixz-confirm-dialog-confirm {
+  grid-area: confirm;
+}
+
+@media (width <= 767px) {
+  .miaixz-confirm-dialog-content {
+    grid-template-areas:
+      "input"
+      "error"
+      "confirm"
+      "cancel";
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .miaixz-confirm-dialog-cancel,
+  .miaixz-confirm-dialog-confirm {
+    width: 100%;
+  }
+}

package/dist/styles/components/data-table.css

@@ -0,0 +1,120 @@
+/**
+ * Miaixz controlled server-side data table
+ */
+
+:root {
+  --miaixz-data-table-selection-width: var(--miaixz-control-height-medium);
+}
+
+.miaixz-data-table {
+  display: grid;
+  gap: var(--miaixz-density-component-gap);
+  min-width: 0;
+}
+
+.miaixz-data-table-container,
+.miaixz-data-table-container .miaixz-table {
+  border-radius: inherit;
+}
+
+.miaixz-data-table-container:focus-visible {
+  outline: var(--miaixz-control-focus-width) solid var(--miaixz-color-focus);
+  outline-offset: var(--miaixz-control-focus-offset);
+}
+
+.miaixz-data-table-selection-cell {
+  width: var(--miaixz-data-table-selection-width);
+  text-align: center;
+}
+
+.miaixz-data-table-selection-control {
+  display: inline-grid;
+  vertical-align: middle;
+}
+
+.miaixz-data-table-sort {
+  display: inline-flex;
+  gap: var(--miaixz-space-4);
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+}
+
+.miaixz-data-table-sort:disabled {
+  cursor: default;
+}
+
+.miaixz-data-table-sort-icon {
+  flex: 0 0 auto;
+  color: var(--miaixz-color-text-muted);
+  opacity: 0;
+  transition-timing-function: var(--miaixz-motion-interaction-easing);
+  transition-duration: var(--miaixz-motion-interaction-duration);
+  transition-property: color, opacity, transform;
+}
+
+.miaixz-data-table-sort:where(:hover, :focus-visible) .miaixz-data-table-sort-icon,
+.miaixz-data-table-sort[data-state="ascending"] .miaixz-data-table-sort-icon,
+.miaixz-data-table-sort[data-state="descending"] .miaixz-data-table-sort-icon {
+  opacity: 1;
+}
+
+.miaixz-data-table-sort[data-state="ascending"] .miaixz-data-table-sort-icon {
+  color: var(--miaixz-color-brand);
+  transform: rotate(180deg);
+}
+
+.miaixz-data-table-sort[data-state="descending"] .miaixz-data-table-sort-icon {
+  color: var(--miaixz-color-brand);
+}
+
+.miaixz-data-table-align-center,
+.miaixz-data-table-align-center .miaixz-data-table-sort {
+  justify-content: center;
+  text-align: center;
+}
+
+.miaixz-data-table-align-end,
+.miaixz-data-table-align-end .miaixz-data-table-sort {
+  justify-content: flex-end;
+  text-align: end;
+}
+
+.miaixz-data-table-state-cell {
+  padding: 0;
+  border-block-end: 0;
+}
+
+.miaixz-data-table-empty,
+.miaixz-data-table-error {
+  display: grid;
+  place-items: center;
+  min-height: calc(var(--miaixz-table-row-height) * 2);
+  padding: var(--miaixz-space-24) var(--miaixz-table-cell-padding-inline);
+  text-align: center;
+}
+
+.miaixz-data-table-empty {
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-data-table-error {
+  color: var(--miaixz-color-danger);
+}
+
+.miaixz-data-table-pagination {
+  min-width: 0;
+}
+
+@media (forced-colors: active) {
+  .miaixz-data-table-sort[data-state="ascending"] .miaixz-data-table-sort-icon,
+  .miaixz-data-table-sort[data-state="descending"] .miaixz-data-table-sort-icon {
+    color: Highlight;
+  }
+}

package/dist/styles/components/dialog.css

@@ -0,0 +1,135 @@
+/**
+ * Miaixz dialog component
+ * Prefer the native dialog element and showModal() for focus containment.
+ */
+
+:root {
+  --miaixz-dialog-width-small: 400px;
+  --miaixz-dialog-width-medium: 640px;
+  --miaixz-dialog-width-large: 960px;
+  --miaixz-dialog-width: var(--miaixz-dialog-width-medium);
+  --miaixz-dialog-max-height: calc(100dvh - (var(--miaixz-page-gutter) * 2));
+  --miaixz-dialog-offset: var(--miaixz-space-8);
+}
+
+dialog.miaixz-dialog {
+  width: min(calc(100vw - (var(--miaixz-page-gutter) * 2)), var(--miaixz-dialog-width));
+  max-width: none;
+  max-height: var(--miaixz-dialog-max-height);
+  padding: 0;
+  margin: auto;
+  overflow: hidden;
+  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-dialog);
+  box-shadow: var(--miaixz-shadow-overlay);
+  opacity: 0;
+  transform: translateY(var(--miaixz-dialog-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-dialog[open] {
+  display: flex;
+  flex-direction: column;
+  opacity: 1;
+  transform: translateY(0);
+}
+
+dialog.miaixz-dialog::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-dialog[open]::backdrop {
+  opacity: 1;
+}
+
+@starting-style {
+  dialog.miaixz-dialog[open] {
+    opacity: 0;
+    transform: translateY(var(--miaixz-dialog-offset));
+  }
+
+  dialog.miaixz-dialog[open]::backdrop {
+    opacity: 0;
+  }
+}
+
+.miaixz-dialog-small {
+  --miaixz-dialog-width: var(--miaixz-dialog-width-small);
+}
+
+.miaixz-dialog-large {
+  --miaixz-dialog-width: var(--miaixz-dialog-width-large);
+}
+
+.miaixz-dialog-header,
+.miaixz-dialog-body,
+.miaixz-dialog-footer {
+  min-width: 0;
+  padding: var(--miaixz-density-panel-padding);
+}
+
+.miaixz-dialog-header {
+  display: flex;
+  flex: none;
+  gap: var(--miaixz-space-16);
+  align-items: flex-start;
+  justify-content: space-between;
+  border-bottom: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+}
+
+.miaixz-dialog-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-dialog-description {
+  margin: var(--miaixz-space-4) 0 0;
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-dialog-body {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+.miaixz-dialog-footer {
+  display: flex;
+  flex: none;
+  gap: var(--miaixz-control-gap);
+  align-items: center;
+  justify-content: flex-end;
+  border-top: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+}
+
+@media (width <= 767px) {
+  :root {
+    --miaixz-dialog-max-height: calc(100dvh - (var(--miaixz-space-16) * 2));
+  }
+
+  dialog.miaixz-dialog {
+    width: calc(100vw - (var(--miaixz-space-16) * 2));
+  }
+
+  .miaixz-dialog-footer {
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
+
+  .miaixz-dialog-footer > .miaixz-control {
+    width: 100%;
+  }
+}

package/dist/styles/components/divider.css

@@ -0,0 +1,27 @@
+/**
+ * Miaixz divider component
+ */
+
+.miaixz-divider {
+  flex: none;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+.miaixz-divider-horizontal {
+  width: 100%;
+  border-block-start: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+}
+
+.miaixz-divider-vertical {
+  align-self: stretch;
+  min-height: var(--miaixz-space-20);
+  border-inline-start: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+}
+
+@media (forced-colors: active) {
+  .miaixz-divider {
+    border-color: CanvasText;
+  }
+}