@zhang_jifan/fanui 2.1.0

package/dist/modules/fanui-overlay.min.css

@@ -0,0 +1,91 @@
+.fanui-modal{position:fixed;inset:0;z-index:var(--fanui-z-modal,1060);display:flex;align-items:center;justify-content:center;padding:var(--fanui-space-4);opacity:0;visibility:hidden;transition:opacity 200ms cubic-bezier(0.4,0,0.2,1) 0s,visibility 200ms cubic-bezier(0.4,0,0.2,1) 0s;overflow-y:auto;-webkit-overflow-scrolling:touch}
+.fanui-modal.is-open,.fanui-modal.is-active{opacity:1;visibility:visible}
+.fanui-modal.is-open>.fanui-modal__dialog,.fanui-modal.is-active>.fanui-modal__dialog{transform:translateY(0) scale(1)}
+.fanui-modal__backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--fanui-backdrop-bg,rgba(15,23,42,0.55));backdrop-filter:blur(var(--fanui-backdrop-blur,2px));-webkit-backdrop-filter:blur(var(--fanui-backdrop-blur,2px));z-index:var(--fanui-z-backdrop,1040);z-index:0}
+.fanui-modal__dialog{position:relative;z-index:1;display:flex;flex-direction:column;width:100%;max-width:var(--fanui-modal-width,520px);max-height:calc(100vh - var(--fanui-space-8));margin:auto;background-color:var(--fanui-color-surface);border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-xl);box-shadow:var(--fanui-shadow-2xl);box-sizing:border-box;transform:translateY(12px) scale(0.98);transition:transform 300ms cubic-bezier(0.34,1.56,0.64,1) 0s;overflow:hidden}
+.fanui-modal__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--fanui-space-4);padding:var(--fanui-space-5) var(--fanui-space-5) var(--fanui-space-4);flex:0 0 auto}
+.fanui-modal__title{margin:0;font-size:var(--fanui-font-size-lg);font-weight:600;line-height:1.4;color:var(--fanui-color-text-strong)}
+.fanui-modal__desc{margin:4px 0 0;font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted)}
+.fanui-modal__close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-4px -6px 0 0;padding:0;font-size:16px;line-height:1;color:var(--fanui-color-text-subtle);background:none;border:0;border-radius:var(--fanui-radius-base);cursor:pointer;transition:color 150ms cubic-bezier(0.4,0,0.2,1) 0s,background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-modal__close:hover{color:var(--fanui-color-text);background-color:var(--fanui-color-hover)}
+.fanui-modal__close:focus-visible{outline:0;box-shadow:0 0 0 var(--fanui-focus-ring-offset,1px) var(--fanui-color-surface,#fff),0 0 0 calc(var(--fanui-focus-ring-offset,1px) + var(--fanui-focus-ring-width,3px)) var(--fanui-focus-ring-color,rgba(14,116,144,0.3))}@media (forced-colors:active){.fanui-modal__close:focus-visible{outline:2px solid transparent;outline-offset:2px}}
+.fanui-modal__body{flex:1 1 auto;padding:0 var(--fanui-space-5) var(--fanui-space-5);overflow-y:auto;min-height:0;font-size:var(--fanui-font-size-base);line-height:var(--fanui-line-height-relaxed);color:var(--fanui-color-text);scrollbar-width:thin;scrollbar-color:rgba(100,116,139,0.45) transparent}
+.fanui-modal__body::-webkit-scrollbar{width:8px;height:8px}
+.fanui-modal__body::-webkit-scrollbar-track{background:transparent}
+.fanui-modal__body::-webkit-scrollbar-thumb{background:rgba(100,116,139,0.45);border-radius:9999px}
+.fanui-modal__body::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,0.7)}
+.fanui-modal__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--fanui-space-3);padding:var(--fanui-space-4) var(--fanui-space-5);background-color:var(--fanui-color-surface-sunken);border-top:1px solid var(--fanui-color-border);flex:0 0 auto}
+.fanui-modal__footer--start{justify-content:flex-start}
+.fanui-modal__footer--between{justify-content:space-between}
+.fanui-modal__header--bordered{padding-bottom:var(--fanui-space-4);border-bottom:1px solid var(--fanui-color-border)}
+.fanui-modal--sm>.fanui-modal__dialog{--fanui-modal-width:380px}
+.fanui-modal--md>.fanui-modal__dialog{--fanui-modal-width:520px}
+.fanui-modal--lg>.fanui-modal__dialog{--fanui-modal-width:720px}
+.fanui-modal--xl>.fanui-modal__dialog{--fanui-modal-width:960px}
+.fanui-modal--full>.fanui-modal__dialog{--fanui-modal-width:100%;max-height:100vh;height:100%;border-radius:0;border:0}
+.fanui-modal--top{align-items:flex-start;padding-top:var(--fanui-space-16)}
+.fanui-modal--bottom{align-items:flex-end}
+.fanui-modal--plain>.fanui-modal__dialog{border:0;box-shadow:var(--fanui-shadow-2xl)}
+.fanui-modal--scrollable>.fanui-modal__dialog{overflow:hidden}
+.fanui-modal-open{overflow:hidden}
+.fanui-drawer{position:fixed;inset:0;z-index:var(--fanui-z-offcanvas,1050);visibility:hidden;transition:visibility 200ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-drawer.is-open,.fanui-drawer.is-active{visibility:visible}
+.fanui-drawer__backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--fanui-backdrop-bg,rgba(15,23,42,0.55));backdrop-filter:blur(var(--fanui-backdrop-blur,2px));-webkit-backdrop-filter:blur(var(--fanui-backdrop-blur,2px));z-index:var(--fanui-z-backdrop,1040);opacity:0;transition:opacity 200ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-drawer.is-open>.fanui-drawer__backdrop{opacity:1}
+.fanui-drawer__panel{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;width:var(--fanui-drawer-width,360px);max-width:92vw;background-color:var(--fanui-color-surface);box-shadow:var(--fanui-shadow-2xl);box-sizing:border-box;transition:transform 300ms cubic-bezier(0,0,0.2,1) 0s;z-index:1}
+.fanui-drawer__header{display:flex;align-items:center;justify-content:space-between;gap:var(--fanui-space-3);padding:var(--fanui-space-4) var(--fanui-space-5);border-bottom:1px solid var(--fanui-color-border);flex:0 0 auto}
+.fanui-drawer__title{margin:0;font-size:var(--fanui-font-size-md);font-weight:600;color:var(--fanui-color-text-strong)}
+.fanui-drawer__body{flex:1 1 auto;padding:var(--fanui-space-5);overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(100,116,139,0.45) transparent}
+.fanui-drawer__body::-webkit-scrollbar{width:8px;height:8px}
+.fanui-drawer__body::-webkit-scrollbar-track{background:transparent}
+.fanui-drawer__body::-webkit-scrollbar-thumb{background:rgba(100,116,139,0.45);border-radius:9999px}
+.fanui-drawer__body::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,0.7)}
+.fanui-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--fanui-space-3);padding:var(--fanui-space-4) var(--fanui-space-5);border-top:1px solid var(--fanui-color-border);flex:0 0 auto}
+.fanui-drawer--start .fanui-drawer__panel{left:0;right:auto;transform:translateX(-100%)}
+.fanui-drawer--end .fanui-drawer__panel{right:0;left:auto;transform:translateX(100%)}
+.fanui-drawer--top .fanui-drawer__panel{left:0;right:0;top:0;bottom:auto;width:100%;max-width:none;height:var(--fanui-drawer-height,320px);transform:translateY(-100%);border-radius:0 0 var(--fanui-radius-xl) var(--fanui-radius-xl)}
+.fanui-drawer--bottom .fanui-drawer__panel{left:0;right:0;bottom:0;top:auto;width:100%;max-width:none;height:var(--fanui-drawer-height,auto);max-height:88vh;transform:translateY(100%);border-radius:var(--fanui-radius-xl) var(--fanui-radius-xl) 0 0}
+.fanui-drawer.is-open>.fanui-drawer__panel{transform:translate(0,0)}
+.fanui-drawer--sm>.fanui-drawer__panel{--fanui-drawer-width:280px}
+.fanui-drawer--lg>.fanui-drawer__panel{--fanui-drawer-width:480px}
+.fanui-drawer--xl>.fanui-drawer__panel{--fanui-drawer-width:640px}
+.fanui-drawer--full>.fanui-drawer__panel{--fanui-drawer-width:100%;max-width:none}
+.fanui-drawer__grabber{width:36px;height:4px;margin:var(--fanui-space-2) auto 0;border-radius:9999px;background-color:var(--fanui-color-border-strong);flex:0 0 auto}
+.fanui-dropdown{position:relative;display:inline-flex}
+.fanui-dropdown__menu{position:absolute;top:calc(100% + 6px);left:0;z-index:var(--fanui-z-dropdown,1000);min-width:var(--fanui-dropdown-width,180px);max-width:320px;padding:6px;background-color:var(--fanui-color-surface);border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-md);box-shadow:var(--fanui-shadow-lg);box-sizing:border-box;opacity:0;visibility:hidden;transform:translateY(-4px) scale(0.98);transform-origin:top left;transition:opacity 150ms cubic-bezier(0,0,0.2,1) 0s,visibility 150ms cubic-bezier(0,0,0.2,1) 0s,transform 150ms cubic-bezier(0,0,0.2,1) 0s}
+.fanui-dropdown__menu.is-open,.fanui-dropdown__menu.is-active{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
+.fanui-dropdown__menu--end{left:auto;right:0;transform-origin:top right}
+.fanui-dropdown__menu--start{left:0;right:auto}
+.fanui-dropdown__menu--up{top:auto;bottom:calc(100% + 6px);transform-origin:bottom left;transform:translateY(4px) scale(0.98)}
+.fanui-dropdown__menu--up.fanui-dropdown__menu--end{transform-origin:bottom right}
+.fanui-dropdown__menu--flush{padding:0}
+.fanui-dropdown.is-open>.fanui-dropdown__trigger,.fanui-dropdown__trigger[aria-expanded=true]{color:var(--fanui-color-text-strong)}
+.fanui-tooltip{position:relative;display:inline-flex}
+.fanui-tooltip__bubble{position:absolute;z-index:var(--fanui-z-tooltip,1080);max-width:260px;padding:6px 10px;font-size:var(--fanui-font-size-xs);line-height:1.5;white-space:normal;text-align:center;color:var(--fanui-color-surface);background-color:var(--fanui-color-text-strong);border-radius:var(--fanui-radius-base);box-shadow:var(--fanui-shadow-md);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 150ms cubic-bezier(0.4,0,0.2,1) 0s,visibility 150ms cubic-bezier(0.4,0,0.2,1) 0s,transform 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-tooltip__bubble::after{content:"";position:absolute;width:6px;height:6px;background-color:inherit;transform:rotate(45deg)}
+.fanui-tooltip__bubble{bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px)}
+.fanui-tooltip__bubble::after{top:100%;left:50%;margin:-3px 0 0 -3px}
+.fanui-tooltip:hover>.fanui-tooltip__bubble,.fanui-tooltip:focus-within>.fanui-tooltip__bubble,.fanui-tooltip>.fanui-tooltip__bubble.is-open{opacity:1;visibility:visible}
+.fanui-tooltip:hover>.fanui-tooltip__bubble{transform:translateX(-50%) translateY(0)}
+.fanui-tooltip--bottom:hover>.fanui-tooltip__bubble,.fanui-tooltip--bottom:focus-within>.fanui-tooltip__bubble{transform:translateX(-50%) translateY(0)}
+.fanui-tooltip--right:hover>.fanui-tooltip__bubble,.fanui-tooltip--right:focus-within>.fanui-tooltip__bubble,.fanui-tooltip--left:hover>.fanui-tooltip__bubble,.fanui-tooltip--left:focus-within>.fanui-tooltip__bubble{transform:translateY(-50%) translateX(0)}
+.fanui-tooltip--bottom>.fanui-tooltip__bubble{bottom:auto;top:calc(100% + 8px);transform:translateX(-50%) translateY(-4px)}
+.fanui-tooltip--bottom>.fanui-tooltip__bubble::after{top:auto;bottom:100%;margin:0 0 -3px -3px}
+.fanui-tooltip--right>.fanui-tooltip__bubble{bottom:auto;top:50%;left:calc(100% + 8px);transform:translateY(-50%) translateX(-4px)}
+.fanui-tooltip--right>.fanui-tooltip__bubble::after{top:50%;left:0;margin:-3px 0 0 -3px}
+.fanui-tooltip--left>.fanui-tooltip__bubble{bottom:auto;top:50%;left:auto;right:calc(100% + 8px);transform:translateY(-50%) translateX(4px)}
+.fanui-tooltip--left>.fanui-tooltip__bubble::after{top:50%;left:100%;margin:-3px 0 0 -3px}
+.fanui-tooltip--light>.fanui-tooltip__bubble{color:var(--fanui-color-text);background-color:var(--fanui-color-surface);border:1px solid var(--fanui-color-border-strong)}
+.fanui-tooltip--primary>.fanui-tooltip__bubble{background-color:var(--fanui-primary);color:var(--fanui-primary-fg)}
+.fanui-tooltip--danger>.fanui-tooltip__bubble{background-color:var(--fanui-danger);color:var(--fanui-danger-fg)}
+.fanui-tooltip--success>.fanui-tooltip__bubble{background-color:var(--fanui-success);color:var(--fanui-success-fg)}
+.fanui-popover{position:relative;display:inline-flex}
+.fanui-popover__panel{position:absolute;top:calc(100% + 8px);left:0;z-index:var(--fanui-z-popover,1070);width:var(--fanui-popover-width,280px);background-color:var(--fanui-color-surface);border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-md);box-shadow:var(--fanui-shadow-xl);opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity 150ms cubic-bezier(0,0,0.2,1) 0s,visibility 150ms cubic-bezier(0,0,0.2,1) 0s,transform 150ms cubic-bezier(0,0,0.2,1) 0s}
+.fanui-popover__panel.is-open,.fanui-popover__panel.is-active{opacity:1;visibility:visible;transform:translateY(0)}
+.fanui-popover__panel--end{left:auto;right:0}
+.fanui-popover__panel--center{left:50%;transform:translateX(-50%) translateY(-4px)}
+.fanui-popover__panel--center.is-open{transform:translateX(-50%) translateY(0)}
+.fanui-popover__panel--wide{--fanui-popover-width:420px}
+.fanui-popover__header{padding:var(--fanui-space-3) var(--fanui-space-4);font-size:var(--fanui-font-size-base);font-weight:600;color:var(--fanui-color-text-strong);border-bottom:1px solid var(--fanui-color-border-subtle)}
+.fanui-popover__body{padding:var(--fanui-space-4);font-size:var(--fanui-font-size-sm);line-height:1.6;color:var(--fanui-color-text-muted)}
+.fanui-popover__footer{padding:var(--fanui-space-3) var(--fanui-space-4);border-top:1px solid var(--fanui-color-border-subtle);display:flex;justify-content:flex-end;gap:var(--fanui-space-2)}

package/dist/modules/fanui-table.css

@@ -0,0 +1,290 @@
+/* fanUI v2.1.0 · module: table（独立产物，自带令牌） */
+.fanui-table-wrap {
+  position: relative;
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  border: 1px solid var(--fanui-color-border);
+  border-radius: var(--fanui-radius-lg);
+  background-color: var(--fanui-color-surface);
+  scrollbar-width: thin;
+  scrollbar-color: rgba(100, 116, 139, 0.45) transparent;
+}
+.fanui-table-wrap::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+.fanui-table-wrap::-webkit-scrollbar-track {
+  background: transparent;
+}
+.fanui-table-wrap::-webkit-scrollbar-thumb {
+  background: rgba(100, 116, 139, 0.45);
+  border-radius: 9999px;
+}
+.fanui-table-wrap::-webkit-scrollbar-thumb:hover {
+  background: rgba(100, 116, 139, 0.7);
+}
+.fanui-table-wrap--plain {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+.fanui-table-wrap--flush {
+  border-radius: 0;
+}
+
+.fanui-table {
+  --fanui-table-bg: transparent;
+  --fanui-table-striped-bg: var(--fanui-color-surface-sunken);
+  --fanui-table-hover-bg: var(--fanui-color-hover);
+  --fanui-table-border-color: var(--fanui-color-border);
+  --fanui-table-caption-color: var(--fanui-color-text-muted);
+  --fanui-table-head-bg: var(--fanui-color-surface-sunken);
+  --fanui-table-cell-py: 10px;
+  --fanui-table-cell-px: 14px;
+  width: 100%;
+  margin-bottom: 0;
+  color: var(--fanui-color-text);
+  font-size: var(--fanui-font-size-base);
+  line-height: 1.5;
+  vertical-align: top;
+  border-collapse: separate;
+  border-spacing: 0;
+  background-color: var(--fanui-table-bg);
+}
+.fanui-table > thead {
+  background-color: var(--fanui-table-head-bg);
+}
+.fanui-table > thead th {
+  font-weight: 600;
+  color: var(--fanui-color-text-strong);
+  white-space: nowrap;
+  text-align: start;
+  border-bottom: 1px solid var(--fanui-table-border-color);
+}
+.fanui-table th,
+.fanui-table td {
+  padding: var(--fanui-table-cell-py) var(--fanui-table-cell-px);
+  border-bottom: 1px solid var(--fanui-table-border-color);
+  box-sizing: border-box;
+}
+.fanui-table > tbody tr:last-child > td {
+  border-bottom: 0;
+}
+.fanui-table caption {
+  padding: var(--fanui-space-3) var(--fanui-table-cell-px);
+  font-size: var(--fanui-font-size-sm);
+  color: var(--fanui-table-caption-color);
+  text-align: start;
+  caption-side: bottom;
+}
+.fanui-table a {
+  color: var(--fanui-primary);
+}
+.fanui-table .fanui-btn {
+  vertical-align: middle;
+}
+
+.fanui-table--bordered > thead th,
+.fanui-table--bordered > tbody td,
+.fanui-table--bordered > tfoot td {
+  border: 1px solid var(--fanui-table-border-color);
+}
+.fanui-table--bordered > thead th {
+  border-bottom-width: 1px;
+}
+
+.fanui-table--borderless {
+  --fanui-table-border-color: transparent;
+}
+.fanui-table--borderless > thead th {
+  border-bottom-width: 0;
+}
+
+.fanui-table--striped > tbody > tr:nth-of-type(odd) > td {
+  background-color: var(--fanui-table-striped-bg);
+}
+
+.fanui-table--hover > tbody > tr {
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-table--hover > tbody > tr:hover > td, .fanui-table--hover > tbody > tr:hover > th {
+  background-color: var(--fanui-table-hover-bg);
+}
+
+.fanui-table--compact {
+  --fanui-table-cell-py: 6px;
+  --fanui-table-cell-px: 10px;
+  font-size: var(--fanui-font-size-sm);
+}
+
+.fanui-table--roomy {
+  --fanui-table-cell-py: 16px;
+  --fanui-table-cell-px: 20px;
+  font-size: var(--fanui-font-size-md);
+}
+
+.fanui-table--fixed {
+  table-layout: fixed;
+  word-break: break-word;
+}
+
+.fanui-table--align-middle th, .fanui-table--align-middle td {
+  vertical-align: middle;
+}
+
+.fanui-table--align-top th, .fanui-table--align-top td {
+  vertical-align: top;
+}
+
+.fanui-table--align-center th, .fanui-table--align-center td {
+  text-align: center;
+}
+.fanui-table--align-center th:first-child, .fanui-table--align-center td:first-child {
+  text-align: start;
+}
+
+.fanui-table--sticky-head > thead th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  background-color: var(--fanui-table-head-bg);
+  box-shadow: inset 0 -1px 0 var(--fanui-table-border-color);
+}
+
+.fanui-table--sticky-col > thead th:first-child,
+.fanui-table--sticky-col > tbody td:first-child {
+  position: sticky;
+  left: 0;
+  z-index: 3;
+  background-color: var(--fanui-color-surface);
+  box-shadow: inset -1px 0 0 var(--fanui-table-border-color);
+}
+.fanui-table--sticky-col > thead th:first-child {
+  z-index: 4;
+  background-color: var(--fanui-table-head-bg);
+}
+
+.fanui-table--primary {
+  --fanui-table-head-bg: rgba(14, 116, 144, 0.1);
+}
+.fanui-table--primary > thead th {
+  color: rgb(4.2823529412%, 35.4823529412%, 44.0470588235%);
+}
+[data-fanui-theme=dark] .fanui-table--primary > thead th {
+  color: var(--fanui-primary-ink, rgb(35.7333333333%, 62.9333333333%, 70.4%));
+}
+
+.fanui-table--accent {
+  --fanui-table-head-bg: rgba(124, 58, 237, 0.1);
+}
+.fanui-table--accent > thead th {
+  color: rgb(37.9294117647%, 17.7411764706%, 72.4941176471%);
+}
+[data-fanui-theme=dark] .fanui-table--accent > thead th {
+  color: var(--fanui-accent-ink, rgb(65.0666666667%, 47.4666666667%, 95.2%));
+}
+
+.fanui-table--success {
+  --fanui-table-head-bg: rgba(4, 120, 87, 0.1);
+}
+.fanui-table--success > thead th {
+  color: rgb(1.2235294118%, 36.7058823529%, 26.6117647059%);
+}
+[data-fanui-theme=dark] .fanui-table--success > thead th {
+  color: var(--fanui-success-ink, rgb(33.0666666667%, 64%, 55.2%));
+}
+
+.fanui-table--warning {
+  --fanui-table-head-bg: rgba(180, 83, 9, 0.1);
+}
+.fanui-table--warning > thead th {
+  color: rgb(55.0588235294%, 25.3882352941%, 2.7529411765%);
+}
+[data-fanui-theme=dark] .fanui-table--warning > thead th {
+  color: var(--fanui-warning-ink, rgb(80%, 54.1333333333%, 34.4%));
+}
+
+.fanui-table--danger {
+  --fanui-table-head-bg: rgba(185, 28, 28, 0.1);
+}
+.fanui-table--danger > thead th {
+  color: rgb(56.5882352941%, 8.5647058824%, 8.5647058824%);
+}
+[data-fanui-theme=dark] .fanui-table--danger > thead th {
+  color: var(--fanui-danger-ink, rgb(81.3333333333%, 39.4666666667%, 39.4666666667%));
+}
+
+.fanui-table--info {
+  --fanui-table-head-bg: rgba(3, 105, 161, 0.1);
+}
+.fanui-table--info > thead th {
+  color: rgb(0.9176470588%, 32.1176470588%, 49.2470588235%);
+}
+[data-fanui-theme=dark] .fanui-table--info > thead th {
+  color: var(--fanui-info-ink, rgb(32.8%, 60%, 74.9333333333%));
+}
+
+.fanui-table--selected-row,
+.fanui-table > tbody > tr.is-selected > td {
+  background-color: var(--fanui-primary-soft) !important;
+}
+
+.fanui-table > tbody > tr.is-disabled {
+  opacity: 0.55;
+}
+.fanui-table > tbody > tr.is-danger > td {
+  background-color: rgba(185, 28, 28, 0.07);
+}
+.fanui-table > tbody > tr.is-success > td {
+  background-color: rgba(4, 120, 87, 0.07);
+}
+.fanui-table > tbody > tr.is-warning > td {
+  background-color: rgba(180, 83, 9, 0.09);
+}
+
+.fanui-table__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--fanui-space-2);
+  white-space: nowrap;
+}
+
+.fanui-table__num {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+.fanui-table__checkbox {
+  width: 1%;
+  white-space: nowrap;
+  padding-inline-end: 0;
+}
+
+.fanui-table__empty {
+  padding: var(--fanui-space-12) var(--fanui-space-4);
+  text-align: center;
+  color: var(--fanui-color-text-muted);
+  font-size: var(--fanui-font-size-base);
+}
+.fanui-table__empty-icon {
+  display: block;
+  margin: 0 auto var(--fanui-space-3);
+  font-size: 32px;
+  opacity: 0.5;
+}
+
+.fanui-table-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--fanui-space-4);
+  padding: var(--fanui-space-3) var(--fanui-space-4);
+  border-top: 1px solid var(--fanui-color-border);
+  background-color: var(--fanui-color-surface);
+  flex-wrap: wrap;
+}
+.fanui-table-toolbar__info {
+  font-size: var(--fanui-font-size-sm);
+  color: var(--fanui-color-text-muted);
+}

package/dist/modules/fanui-table.min.css

@@ -0,0 +1,62 @@
+.fanui-table-wrap{position:relative;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--fanui-color-border);border-radius:var(--fanui-radius-lg);background-color:var(--fanui-color-surface);scrollbar-width:thin;scrollbar-color:rgba(100,116,139,0.45) transparent}
+.fanui-table-wrap::-webkit-scrollbar{width:10px;height:10px}
+.fanui-table-wrap::-webkit-scrollbar-track{background:transparent}
+.fanui-table-wrap::-webkit-scrollbar-thumb{background:rgba(100,116,139,0.45);border-radius:9999px}
+.fanui-table-wrap::-webkit-scrollbar-thumb:hover{background:rgba(100,116,139,0.7)}
+.fanui-table-wrap--plain{border:0;border-radius:0;background:transparent}
+.fanui-table-wrap--flush{border-radius:0}
+.fanui-table{--fanui-table-bg:transparent;--fanui-table-striped-bg:var(--fanui-color-surface-sunken);--fanui-table-hover-bg:var(--fanui-color-hover);--fanui-table-border-color:var(--fanui-color-border);--fanui-table-caption-color:var(--fanui-color-text-muted);--fanui-table-head-bg:var(--fanui-color-surface-sunken);--fanui-table-cell-py:10px;--fanui-table-cell-px:14px;width:100%;margin-bottom:0;color:var(--fanui-color-text);font-size:var(--fanui-font-size-base);line-height:1.5;vertical-align:top;border-collapse:separate;border-spacing:0;background-color:var(--fanui-table-bg)}
+.fanui-table>thead{background-color:var(--fanui-table-head-bg)}
+.fanui-table>thead th{font-weight:600;color:var(--fanui-color-text-strong);white-space:nowrap;text-align:start;border-bottom:1px solid var(--fanui-table-border-color)}
+.fanui-table th,.fanui-table td{padding:var(--fanui-table-cell-py) var(--fanui-table-cell-px);border-bottom:1px solid var(--fanui-table-border-color);box-sizing:border-box}
+.fanui-table>tbody tr:last-child>td{border-bottom:0}
+.fanui-table caption{padding:var(--fanui-space-3) var(--fanui-table-cell-px);font-size:var(--fanui-font-size-sm);color:var(--fanui-table-caption-color);text-align:start;caption-side:bottom}
+.fanui-table a{color:var(--fanui-primary)}
+.fanui-table .fanui-btn{vertical-align:middle}
+.fanui-table--bordered>thead th,.fanui-table--bordered>tbody td,.fanui-table--bordered>tfoot td{border:1px solid var(--fanui-table-border-color)}
+.fanui-table--bordered>thead th{border-bottom-width:1px}
+.fanui-table--borderless{--fanui-table-border-color:transparent}
+.fanui-table--borderless>thead th{border-bottom-width:0}
+.fanui-table--striped>tbody>tr:nth-of-type(odd)>td{background-color:var(--fanui-table-striped-bg)}
+.fanui-table--hover>tbody>tr{transition:background-color 150ms cubic-bezier(0.4,0,0.2,1) 0s}
+.fanui-table--hover>tbody>tr:hover>td,.fanui-table--hover>tbody>tr:hover>th{background-color:var(--fanui-table-hover-bg)}
+.fanui-table--compact{--fanui-table-cell-py:6px;--fanui-table-cell-px:10px;font-size:var(--fanui-font-size-sm)}
+.fanui-table--roomy{--fanui-table-cell-py:16px;--fanui-table-cell-px:20px;font-size:var(--fanui-font-size-md)}
+.fanui-table--fixed{table-layout:fixed;word-break:break-word}
+.fanui-table--align-middle th,.fanui-table--align-middle td{vertical-align:middle}
+.fanui-table--align-top th,.fanui-table--align-top td{vertical-align:top}
+.fanui-table--align-center th,.fanui-table--align-center td{text-align:center}
+.fanui-table--align-center th:first-child,.fanui-table--align-center td:first-child{text-align:start}
+.fanui-table--sticky-head>thead th{position:sticky;top:0;z-index:2;background-color:var(--fanui-table-head-bg);box-shadow:inset 0 -1px 0 var(--fanui-table-border-color)}
+.fanui-table--sticky-col>thead th:first-child,.fanui-table--sticky-col>tbody td:first-child{position:sticky;left:0;z-index:3;background-color:var(--fanui-color-surface);box-shadow:inset -1px 0 0 var(--fanui-table-border-color)}
+.fanui-table--sticky-col>thead th:first-child{z-index:4;background-color:var(--fanui-table-head-bg)}
+.fanui-table--primary{--fanui-table-head-bg:rgba(14,116,144,0.1)}
+.fanui-table--primary>thead th{color:rgb(4.2823529412%,35.4823529412%,44.0470588235%)}
+[data-fanui-theme=dark] .fanui-table--primary>thead th{color:var(--fanui-primary-ink,rgb(35.7333333333%,62.9333333333%,70.4%))}
+.fanui-table--accent{--fanui-table-head-bg:rgba(124,58,237,0.1)}
+.fanui-table--accent>thead th{color:rgb(37.9294117647%,17.7411764706%,72.4941176471%)}
+[data-fanui-theme=dark] .fanui-table--accent>thead th{color:var(--fanui-accent-ink,rgb(65.0666666667%,47.4666666667%,95.2%))}
+.fanui-table--success{--fanui-table-head-bg:rgba(4,120,87,0.1)}
+.fanui-table--success>thead th{color:rgb(1.2235294118%,36.7058823529%,26.6117647059%)}
+[data-fanui-theme=dark] .fanui-table--success>thead th{color:var(--fanui-success-ink,rgb(33.0666666667%,64%,55.2%))}
+.fanui-table--warning{--fanui-table-head-bg:rgba(180,83,9,0.1)}
+.fanui-table--warning>thead th{color:rgb(55.0588235294%,25.3882352941%,2.7529411765%)}
+[data-fanui-theme=dark] .fanui-table--warning>thead th{color:var(--fanui-warning-ink,rgb(80%,54.1333333333%,34.4%))}
+.fanui-table--danger{--fanui-table-head-bg:rgba(185,28,28,0.1)}
+.fanui-table--danger>thead th{color:rgb(56.5882352941%,8.5647058824%,8.5647058824%)}
+[data-fanui-theme=dark] .fanui-table--danger>thead th{color:var(--fanui-danger-ink,rgb(81.3333333333%,39.4666666667%,39.4666666667%))}
+.fanui-table--info{--fanui-table-head-bg:rgba(3,105,161,0.1)}
+.fanui-table--info>thead th{color:rgb(0.9176470588%,32.1176470588%,49.2470588235%)}
+[data-fanui-theme=dark] .fanui-table--info>thead th{color:var(--fanui-info-ink,rgb(32.8%,60%,74.9333333333%))}
+.fanui-table--selected-row,.fanui-table>tbody>tr.is-selected>td{background-color:var(--fanui-primary-soft) !important}
+.fanui-table>tbody>tr.is-disabled{opacity:0.55}
+.fanui-table>tbody>tr.is-danger>td{background-color:rgba(185,28,28,0.07)}
+.fanui-table>tbody>tr.is-success>td{background-color:rgba(4,120,87,0.07)}
+.fanui-table>tbody>tr.is-warning>td{background-color:rgba(180,83,9,0.09)}
+.fanui-table__actions{display:flex;align-items:center;gap:var(--fanui-space-2);white-space:nowrap}
+.fanui-table__num{text-align:end;font-variant-numeric:tabular-nums}
+.fanui-table__checkbox{width:1%;white-space:nowrap;padding-inline-end:0}
+.fanui-table__empty{padding:var(--fanui-space-12) var(--fanui-space-4);text-align:center;color:var(--fanui-color-text-muted);font-size:var(--fanui-font-size-base)}
+.fanui-table__empty-icon{display:block;margin:0 auto var(--fanui-space-3);font-size:32px;opacity:0.5}
+.fanui-table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--fanui-space-4);padding:var(--fanui-space-3) var(--fanui-space-4);border-top:1px solid var(--fanui-color-border);background-color:var(--fanui-color-surface);flex-wrap:wrap}
+.fanui-table-toolbar__info{font-size:var(--fanui-font-size-sm);color:var(--fanui-color-text-muted)}