@miaixz/ui 0.5.0

package/dist/styles/components/pagination.css

@@ -0,0 +1,99 @@
+/**
+ * Miaixz pagination component
+ * Use a nav element with an accessible label and aria-current="page".
+ */
+
+:root {
+  --miaixz-pagination-item-size: var(--miaixz-control-height-small);
+  --miaixz-pagination-gap: var(--miaixz-space-4);
+}
+
+.miaixz-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--miaixz-density-component-gap);
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+}
+
+.miaixz-pagination-list {
+  display: flex;
+  gap: var(--miaixz-pagination-gap);
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.miaixz-pagination-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--miaixz-pagination-item-size);
+  min-height: var(--miaixz-pagination-item-size);
+  padding-inline: var(--miaixz-space-8);
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  color: var(--miaixz-color-text-secondary);
+  text-decoration: none;
+  cursor: pointer;
+  background: transparent;
+  border: var(--miaixz-border-width-default) solid transparent;
+  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-pagination-item:where(:hover:not(:disabled, [aria-disabled="true"])) {
+  color: var(--miaixz-color-text-primary);
+  background: var(--miaixz-color-surface-hover);
+}
+
+.miaixz-pagination-item[aria-current="page"] {
+  color: var(--miaixz-color-text-primary);
+  background: var(--miaixz-color-surface-selected);
+  border-color: var(--miaixz-color-brand);
+}
+
+.miaixz-pagination-item:disabled,
+.miaixz-pagination-item[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: var(--miaixz-opacity-disabled);
+}
+
+.miaixz-pagination-ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--miaixz-pagination-item-size);
+  min-height: var(--miaixz-pagination-item-size);
+  color: var(--miaixz-color-text-muted);
+}
+
+.miaixz-pagination-summary {
+  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-secondary);
+}
+
+@media (width <= 767px) {
+  .miaixz-pagination {
+    justify-content: center;
+  }
+
+  .miaixz-pagination-summary {
+    width: 100%;
+    text-align: center;
+  }
+}
+
+@media (pointer: coarse) {
+  .miaixz-pagination-item,
+  .miaixz-pagination-ellipsis {
+    min-width: var(--miaixz-control-min-target-size);
+    min-height: var(--miaixz-control-min-target-size);
+  }
+}

package/dist/styles/components/panel.css

@@ -0,0 +1,123 @@
+/**
+ * Miaixz panel component
+ */
+
+:root {
+  --miaixz-panel-padding: var(--miaixz-density-panel-padding);
+  --miaixz-panel-gap: var(--miaixz-density-component-gap);
+  --miaixz-panel-header-gap: var(--miaixz-space-16);
+}
+
+.miaixz-panel {
+  min-width: 0;
+  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);
+  box-shadow: var(--miaixz-shadow-none);
+}
+
+.miaixz-panel-raised {
+  box-shadow: var(--miaixz-shadow-medium);
+}
+
+.miaixz-panel-selected {
+  border-color: var(--miaixz-color-brand);
+  box-shadow: 0 0 0 var(--miaixz-border-width-default) var(--miaixz-color-brand);
+}
+
+.miaixz-panel-interactive {
+  transition-timing-function: var(--miaixz-motion-interaction-easing);
+  transition-duration: var(--miaixz-motion-interaction-duration);
+  transition-property: background-color, border-color, box-shadow, transform;
+}
+
+.miaixz-panel-interactive:hover {
+  border-color: var(--miaixz-color-border-strong);
+  box-shadow: var(--miaixz-shadow-low);
+}
+
+.miaixz-panel-header,
+.miaixz-panel-body,
+.miaixz-panel-footer {
+  min-width: 0;
+  padding: var(--miaixz-panel-padding);
+}
+
+.miaixz-panel-header {
+  display: flex;
+  gap: var(--miaixz-panel-header-gap);
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.miaixz-panel-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);
+  color: var(--miaixz-color-text-primary);
+}
+
+.miaixz-panel-description {
+  margin: var(--miaixz-space-4) 0 0;
+  font-size: var(--miaixz-text-body-size);
+  line-height: var(--miaixz-text-body-line-height);
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-panel-actions {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  gap: var(--miaixz-control-gap);
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.miaixz-panel-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--miaixz-panel-gap);
+}
+
+.miaixz-panel-footer {
+  display: flex;
+  gap: var(--miaixz-control-gap);
+  align-items: center;
+  justify-content: flex-end;
+  border-top: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+}
+
+.miaixz-panel-header + .miaixz-panel-body,
+.miaixz-panel-body + .miaixz-panel-footer {
+  padding-block-start: 0;
+}
+
+.miaixz-panel-section {
+  min-width: 0;
+  padding: var(--miaixz-panel-padding);
+}
+
+.miaixz-panel-section + .miaixz-panel-section {
+  border-top: var(--miaixz-border-width-default) solid var(--miaixz-color-border);
+}
+
+.miaixz-panel-flush > .miaixz-panel-header,
+.miaixz-panel-flush > .miaixz-panel-body,
+.miaixz-panel-flush > .miaixz-panel-footer,
+.miaixz-panel-flush > .miaixz-panel-section {
+  padding-inline: 0;
+}
+
+@media (width <= 767px) {
+  .miaixz-panel-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .miaixz-panel-actions,
+  .miaixz-panel-footer {
+    justify-content: flex-start;
+  }
+}

package/dist/styles/components/popover.css

@@ -0,0 +1,41 @@
+.miaixz-popover {
+  display: inline-block;
+}
+
+.miaixz-popover-trigger {
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+}
+
+.miaixz-popover-trigger:disabled {
+  color: var(--miaixz-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.miaixz-popover-trigger:focus-visible {
+  outline: var(--miaixz-control-focus-width) solid var(--miaixz-color-focus);
+  outline-offset: var(--miaixz-control-focus-offset);
+  border-radius: var(--miaixz-radius-control);
+}
+
+.miaixz-popover-content {
+  position: fixed;
+  inset: auto;
+  z-index: var(--miaixz-z-overlay);
+  min-width: 220px;
+  max-width: min(420px, calc(100vw - var(--miaixz-space-16)));
+  max-height: calc(100dvh - var(--miaixz-space-16));
+  padding: var(--miaixz-space-12);
+  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);
+}

package/dist/styles/components/progress.css

@@ -0,0 +1,65 @@
+/**
+ * Miaixz progress component
+ */
+
+:root {
+  --miaixz-progress-track-height: var(--miaixz-space-8);
+  --miaixz-progress-indeterminate-size: 40%;
+}
+
+.miaixz-progress {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--miaixz-space-12);
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+}
+
+.miaixz-progress-track {
+  display: block;
+  height: var(--miaixz-progress-track-height);
+  overflow: hidden;
+  background: var(--miaixz-color-surface-secondary);
+  border-radius: var(--miaixz-radius-round);
+}
+
+.miaixz-progress-indicator {
+  display: block;
+  width: var(--miaixz-progress-value, 0%);
+  height: 100%;
+  background: var(--miaixz-color-brand);
+  border-radius: inherit;
+}
+
+.miaixz-progress-indeterminate .miaixz-progress-indicator {
+  width: var(--miaixz-progress-indeterminate-size);
+  animation: miaixz-progress-indeterminate var(--miaixz-duration-slower) ease-in-out infinite
+    alternate;
+}
+
+.miaixz-progress-value {
+  min-width: 4ch;
+  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-secondary);
+  text-align: end;
+}
+
+@keyframes miaixz-progress-indeterminate {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(250%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .miaixz-progress-indeterminate .miaixz-progress-indicator {
+    transform: none;
+    animation: none;
+  }
+}

package/dist/styles/components/search-input.css

@@ -0,0 +1,12 @@
+.miaixz-search-input-clear {
+  width: var(--miaixz-icon-size-control);
+  min-width: var(--miaixz-icon-size-control);
+  height: var(--miaixz-icon-size-control);
+  min-height: var(--miaixz-icon-size-control);
+  padding: 0;
+  border: 0;
+}
+
+input[type="search"].miaixz-input-element::-webkit-search-cancel-button {
+  display: none;
+}

package/dist/styles/components/select.css

@@ -0,0 +1,56 @@
+/**
+ * Select component
+ */
+
+.miaixz-select {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  padding: 0;
+  cursor: pointer;
+}
+
+.miaixz-select:where(:hover:not(.miaixz-select-disabled)) {
+  border-color: var(--miaixz-color-border-strong);
+}
+
+.miaixz-select: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-select-element {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  padding: 0 calc(var(--miaixz-density-control-padding-inline) + var(--miaixz-icon-size-control)) 0
+    var(--miaixz-density-control-padding-inline);
+  font: inherit;
+  line-height: inherit;
+  color: inherit;
+  appearance: none;
+  cursor: inherit;
+  outline: 0;
+  background: transparent;
+  border: 0;
+}
+
+.miaixz-select-indicator {
+  position: absolute;
+  inset-inline-end: var(--miaixz-density-control-padding-inline);
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-select-invalid,
+.miaixz-select-invalid:focus-within {
+  outline-color: var(--miaixz-color-danger);
+  border-color: var(--miaixz-color-danger);
+}
+
+.miaixz-select-disabled {
+  color: var(--miaixz-color-text-disabled);
+  cursor: not-allowed;
+  background: var(--miaixz-color-surface-secondary);
+}

package/dist/styles/components/skeleton.css

@@ -0,0 +1,93 @@
+/**
+ * Miaixz skeleton loading component
+ * Skeleton containers should be hidden from assistive technology.
+ */
+
+:root {
+  --miaixz-skeleton-text-height: var(--miaixz-font-size-12);
+  --miaixz-skeleton-heading-height: var(--miaixz-font-size-20);
+  --miaixz-skeleton-avatar-size: var(--miaixz-icon-size-40);
+  --miaixz-skeleton-button-width: 96px;
+  --miaixz-skeleton-last-line-width: 64%;
+  --miaixz-skeleton-duration: 1200ms;
+}
+
+.miaixz-skeleton {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  color: transparent;
+  pointer-events: none;
+  user-select: none;
+  background: var(--miaixz-color-surface-secondary);
+  border-radius: var(--miaixz-radius-4);
+}
+
+.miaixz-skeleton::after {
+  position: absolute;
+  inset: 0;
+  content: "";
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(
+      in oklch,
+      var(--miaixz-color-surface-secondary) 92%,
+      var(--miaixz-color-text-primary) 8%
+    ),
+    transparent
+  );
+  transform: translateX(-100%);
+  animation: miaixz-skeleton-shimmer var(--miaixz-skeleton-duration) infinite
+    var(--miaixz-easing-standard);
+}
+
+.miaixz-skeleton-text {
+  width: 100%;
+  height: var(--miaixz-skeleton-text-height);
+}
+
+.miaixz-skeleton-text + .miaixz-skeleton-text {
+  margin-block-start: var(--miaixz-space-8);
+}
+
+.miaixz-skeleton-text:last-child {
+  width: var(--miaixz-skeleton-last-line-width);
+}
+
+.miaixz-skeleton-heading {
+  width: 48%;
+  height: var(--miaixz-skeleton-heading-height);
+}
+
+.miaixz-skeleton-avatar {
+  flex: none;
+  width: var(--miaixz-skeleton-avatar-size);
+  height: var(--miaixz-skeleton-avatar-size);
+  border-radius: var(--miaixz-radius-round);
+}
+
+.miaixz-skeleton-button {
+  width: var(--miaixz-skeleton-button-width);
+  height: var(--miaixz-density-control-height);
+  border-radius: var(--miaixz-radius-control);
+}
+
+.miaixz-skeleton-row {
+  width: 100%;
+  height: var(--miaixz-density-table-row-height);
+  border-radius: 0;
+}
+
+@keyframes miaixz-skeleton-shimmer {
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .miaixz-skeleton::after {
+    opacity: 0;
+    animation: none;
+  }
+}

package/dist/styles/components/spinner.css

@@ -0,0 +1,27 @@
+/**
+ * Miaixz spinner component
+ */
+
+.miaixz-spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  color: var(--miaixz-color-brand);
+}
+
+.miaixz-spinner > .miaixz-icon {
+  animation: miaixz-spinner-rotate var(--miaixz-motion-overlay-duration) linear infinite;
+}
+
+@keyframes miaixz-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .miaixz-spinner > .miaixz-icon {
+    animation: none;
+  }
+}

package/dist/styles/components/status-indicator.css

@@ -0,0 +1,54 @@
+/**
+ * Miaixz status indicator component
+ */
+
+:root {
+  --miaixz-status-indicator-marker-size: var(--miaixz-space-8);
+}
+
+.miaixz-status-indicator {
+  display: inline-flex;
+  gap: var(--miaixz-space-8);
+  align-items: center;
+  min-width: 0;
+  font-size: var(--miaixz-text-body-size);
+  line-height: var(--miaixz-text-body-line-height);
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-status-indicator-marker {
+  flex: none;
+  width: var(--miaixz-status-indicator-marker-size);
+  height: var(--miaixz-status-indicator-marker-size);
+  background: var(--miaixz-color-text-muted);
+  border-radius: var(--miaixz-radius-round);
+}
+
+.miaixz-status-indicator-info .miaixz-status-indicator-marker {
+  background: var(--miaixz-color-info);
+}
+
+.miaixz-status-indicator-success .miaixz-status-indicator-marker {
+  background: var(--miaixz-color-success);
+}
+
+.miaixz-status-indicator-warning .miaixz-status-indicator-marker {
+  background: var(--miaixz-color-warning);
+}
+
+.miaixz-status-indicator-danger .miaixz-status-indicator-marker {
+  background: var(--miaixz-color-danger);
+}
+
+.miaixz-status-indicator-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+@media (forced-colors: active) {
+  .miaixz-status-indicator-marker {
+    background: CanvasText;
+  }
+}

package/dist/styles/components/switch.css

@@ -0,0 +1,111 @@
+/**
+ * Switch component
+ */
+
+.miaixz-switch {
+  --miaixz-switch-width: 36px;
+  --miaixz-switch-height: 20px;
+  --miaixz-switch-thumb-size: 16px;
+
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: var(--miaixz-switch-width) 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-switch-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.miaixz-switch-track {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: var(--miaixz-switch-width);
+  height: var(--miaixz-switch-height);
+  padding: 2px;
+  margin-block-start: calc((var(--miaixz-text-body-line-height) - var(--miaixz-switch-height)) / 2);
+  background: var(--miaixz-color-border-strong);
+  border-radius: var(--miaixz-switch-height);
+  transition: background-color var(--miaixz-motion-interaction-duration)
+    var(--miaixz-motion-interaction-easing);
+}
+
+.miaixz-switch-thumb {
+  display: block;
+  width: var(--miaixz-switch-thumb-size);
+  height: var(--miaixz-switch-thumb-size);
+  background: var(--miaixz-color-surface);
+  border-radius: 50%;
+  box-shadow: 0 1px 2px var(--miaixz-color-shadow);
+  transform: translateX(0);
+  transition: transform var(--miaixz-motion-interaction-duration)
+    var(--miaixz-motion-interaction-easing);
+}
+
+.miaixz-switch-input:where(:checked) + .miaixz-switch-track {
+  background: var(--miaixz-color-brand);
+}
+
+.miaixz-switch-input:where(:checked) + .miaixz-switch-track .miaixz-switch-thumb {
+  transform: translateX(calc(var(--miaixz-switch-width) - var(--miaixz-switch-thumb-size) - 4px));
+}
+
+[dir="rtl"] .miaixz-switch-input:where(:checked) + .miaixz-switch-track .miaixz-switch-thumb {
+  transform: translateX(
+    calc((var(--miaixz-switch-width) - var(--miaixz-switch-thumb-size) - 4px) * -1)
+  );
+}
+
+.miaixz-switch-input:where(:focus-visible) + .miaixz-switch-track {
+  outline: var(--miaixz-control-focus-width) solid var(--miaixz-color-focus);
+  outline-offset: var(--miaixz-control-focus-offset);
+}
+
+.miaixz-switch-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--miaixz-space-2);
+  min-width: 0;
+}
+
+.miaixz-switch-label {
+  color: var(--miaixz-color-text-primary);
+}
+
+.miaixz-switch-description {
+  font-size: var(--miaixz-text-caption-size);
+  line-height: var(--miaixz-text-caption-line-height);
+  color: var(--miaixz-color-text-secondary);
+}
+
+.miaixz-switch-disabled {
+  cursor: not-allowed;
+}
+
+.miaixz-switch-disabled .miaixz-switch-track {
+  background: var(--miaixz-color-border);
+}
+
+.miaixz-switch-disabled .miaixz-switch-label,
+.miaixz-switch-disabled .miaixz-switch-description {
+  color: var(--miaixz-color-text-disabled);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .miaixz-switch-track,
+  .miaixz-switch-thumb {
+    transition-duration: 0ms;
+  }
+}