@lablup/ui-common 0.1.0-alpha.2 → 0.1.0-alpha.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/assets/components/BaseCard/BaseCard.css +1 -1
- package/dist/assets/components/Button/Button.css +1 -1
- package/dist/assets/components/DataTable/DataTable.css +1 -1
- package/dist/assets/components/Drawer/Drawer.css +1 -1
- package/dist/assets/components/EmptyState/EmptyState.css +1 -1
- package/dist/assets/components/ErrorState/ErrorState.css +1 -1
- package/dist/assets/components/PageHeader/PageHeader.css +1 -1
- package/dist/assets/components/Select/Select.css +1 -0
- package/dist/assets/components/StatCard/StatCard.css +1 -1
- package/dist/assets/components/Tabs/Tabs.css +1 -1
- package/dist/assets/components/Tooltip/Tooltip.css +1 -1
- package/dist/components/DataTable/DataTable.d.ts +50 -6
- package/dist/components/DataTable/DataTable2.js +205 -133
- package/dist/components/DataTable/DataTable2.js.map +1 -1
- package/dist/components/Drawer/Drawer.d.ts +12 -1
- package/dist/components/Drawer/Drawer2.js +69 -51
- package/dist/components/Drawer/Drawer2.js.map +1 -1
- package/dist/components/EmptyState/EmptyState.d.ts +10 -3
- package/dist/components/EmptyState/EmptyState2.js +31 -48
- package/dist/components/EmptyState/EmptyState2.js.map +1 -1
- package/dist/components/EmptyState/index.d.ts +6 -1
- package/dist/components/ErrorState/ErrorState.d.ts +17 -4
- package/dist/components/ErrorState/ErrorState2.js +20 -23
- package/dist/components/ErrorState/ErrorState2.js.map +1 -1
- package/dist/components/ErrorState/index.d.ts +1 -1
- package/dist/components/PageHeader/PageHeader.d.ts +14 -1
- package/dist/components/PageHeader/PageHeader2.js +40 -24
- package/dist/components/PageHeader/PageHeader2.js.map +1 -1
- package/dist/components/Select/Select.d.ts +38 -0
- package/dist/components/Select/Select2.js +313 -0
- package/dist/components/Select/Select2.js.map +1 -0
- package/dist/components/Select/index.d.ts +2 -0
- package/dist/components/Select/index.js +2 -0
- package/dist/components/Skeleton/Skeleton.d.ts +11 -1
- package/dist/components/Skeleton/Skeleton2.js +8 -6
- package/dist/components/Skeleton/Skeleton2.js.map +1 -1
- package/dist/components/Skeleton/SkeletonCard.d.ts +3 -1
- package/dist/components/Skeleton/SkeletonCard2.js +13 -3
- package/dist/components/Skeleton/SkeletonCard2.js.map +1 -1
- package/dist/components/Skeleton/SkeletonChart2.js +5 -0
- package/dist/components/Skeleton/SkeletonChart2.js.map +1 -1
- package/dist/components/Skeleton/SkeletonRow.d.ts +3 -1
- package/dist/components/Skeleton/SkeletonRow2.js +9 -3
- package/dist/components/Skeleton/SkeletonRow2.js.map +1 -1
- package/dist/components/Skeleton/SkeletonText.d.ts +3 -1
- package/dist/components/Skeleton/SkeletonText2.js +7 -5
- package/dist/components/Skeleton/SkeletonText2.js.map +1 -1
- package/dist/components/StatCard/StatCard.d.ts +10 -1
- package/dist/components/StatCard/StatCard2.js +30 -30
- package/dist/components/StatCard/StatCard2.js.map +1 -1
- package/dist/components/Tabs/Tabs.d.ts +10 -23
- package/dist/components/Tabs/Tabs2.js +127 -146
- package/dist/components/Tabs/Tabs2.js.map +1 -1
- package/dist/components/Tabs/index.d.ts +2 -2
- package/dist/components/Tabs/index.js +2 -3
- package/dist/components/Tooltip/Tooltip.d.ts +15 -1
- package/dist/components/Tooltip/Tooltip2.js +77 -47
- package/dist/components/Tooltip/Tooltip2.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +6 -6
- package/dist/styles/base.css +101 -10
- package/dist/styles/themes/orange-dark.css +3 -0
- package/dist/styles/themes/orange-light.css +6 -1
- package/package.json +1 -1
- package/dist/components/EmptyState/illustrations.d.ts +0 -51
- package/dist/components/EmptyState/illustrations.js +0 -571
- package/dist/components/EmptyState/illustrations.js.map +0 -1
- package/dist/components/Tabs/tabTags.d.ts +0 -9
- package/dist/components/Tabs/tabTags.js +0 -11
- package/dist/components/Tabs/tabTags.js.map +0 -1
package/README.md
CHANGED
|
@@ -74,7 +74,7 @@ import "@lablup/ui-common/styles/themes/orange-dark.css";
|
|
|
74
74
|
|
|
75
75
|
The package ships the theming mechanism and one default palette, the Lablup
|
|
76
76
|
brand orange. A product with its own visual identity defines its own
|
|
77
|
-
`[data-theme]` blocks over the same
|
|
77
|
+
`[data-theme]` blocks over the same 119 token names and ships them itself,
|
|
78
78
|
rather than the package accumulating everyone's palettes. The source product
|
|
79
79
|
does exactly that with its five families.
|
|
80
80
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.base-card{padding:var(--token-paddingMD,1rem);background-color:var(--token-colorFillTertiary,#f9fafb);border-radius:var(--token-borderRadiusLG,.5rem);transition:border-color var(--token-motionDurationFast,.1s), box-shadow var(--token-motionDurationMid,.2s), transform var(--token-motionDurationMid,.2s), background-color var(--token-motionDurationFast,.1s);border:1px solid #0000;flex-direction:column;display:flex;position:relative}.base-card--row{flex-direction:row}.base-card--hoverable:hover{border-color:var(--token-colorBorderSecondary,#e5e7eb);box-shadow:var(--token-boxShadowSecondary,0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d);transform:translateY(-2px)}.base-card--clickable{cursor:pointer}.base-card--clickable:hover{border-color:var(--token-colorPrimary,#8b5cf6);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.base-card:focus-within{border-color:var(--token-colorPrimary
|
|
1
|
+
.base-card{padding:var(--token-paddingMD,1rem);background-color:var(--token-colorFillTertiary,#f9fafb);border-radius:var(--token-borderRadiusLG,.5rem);transition:border-color var(--token-motionDurationFast,.1s), box-shadow var(--token-motionDurationMid,.2s), transform var(--token-motionDurationMid,.2s), background-color var(--token-motionDurationFast,.1s);border:1px solid #0000;flex-direction:column;display:flex;position:relative}.base-card--row{flex-direction:row}.base-card--hoverable:hover{border-color:var(--token-colorBorderSecondary,#e5e7eb);box-shadow:var(--token-boxShadowSecondary,0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d);transform:translateY(-2px)}.base-card--clickable{cursor:pointer}.base-card--clickable:hover{border-color:var(--token-colorPrimary,#8b5cf6);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.base-card:focus-within{border-color:color-mix(in srgb, var(--token-colorPrimary) 70%, var(--token-colorText));outline:none}.base-card--clickable:focus{outline:var(--token-focusRingWidth,2px) var(--token-focusRingStyle,solid) var(--token-focusRingColor,var(--token-colorPrimary));outline-offset:var(--token-focusRingOffset,2px)}.base-card--default{background-color:var(--token-colorFillTertiary,#f9fafb)}.base-card--installed{background-color:var(--token-colorBgContainer,#fff);border-color:var(--token-colorBorderSecondary,#e5e7eb)}.base-card--available{background-color:var(--token-colorFillQuaternary,#fafafa);border-color:var(--token-colorBorderSecondary,#e5e7eb)}.base-card--active{border-color:var(--token-colorSuccessBorder,#00bd9b66);background-color:var(--token-colorSuccessBg,#00bd9b0d)}.base-card--active:hover{border-color:var(--token-colorSuccessBorderHover,#00bd9b99);box-shadow:var(--token-colorSuccessBoxShadow,0 4px 12px #00bd9b26)}.base-card--loading{border-color:color-mix(in srgb, var(--token-colorPrimary,#8b5cf6) 40%, transparent);background-color:color-mix(in srgb, var(--token-colorPrimary,#8b5cf6) 3%, transparent);animation:2s ease-in-out infinite base-card-pulse}@keyframes base-card-pulse{0%,to{border-color:color-mix(in srgb, var(--token-colorPrimary,#8b5cf6) 30%, transparent);box-shadow:0 0 #0000}50%{border-color:color-mix(in srgb, var(--token-colorPrimary,#8b5cf6) 50%, transparent);box-shadow:0 0 0 4px var(--token-colorPrimaryBg,#8b5cf61a)}}.base-card--disabled{opacity:.5;pointer-events:none;filter:grayscale(50%)}.base-card--disabled:hover{box-shadow:none;border-color:#0000;transform:none}.base-card--warning{background-color:#faad1408;border-color:#faad1466}@media (prefers-reduced-motion:reduce){.base-card{transition:none}.base-card--hoverable:hover,.base-card--clickable:hover{transform:none}.base-card--loading{animation:none}}@media (max-width:767px){.base-card{padding:var(--token-paddingSM,.5rem)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.button{font-family:var(--token-fontFamily,"Ubuntu Sans", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);border-radius:var(--token-buttonBorderRadius,var(--token-borderRadius,.375rem));cursor:pointer;transition:background var(--token-motionDurationFast,.1s) ease-out, border-color var(--token-motionDurationFast,.1s) ease-out, box-shadow var(--token-motionDurationMid,.2s) ease-out, transform .15s cubic-bezier(.25, .46, .45, .94), color var(--token-motionDurationFast,.1s) ease-out, opacity var(--token-motionDurationFast,.1s) ease-out;white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:.375rem;
|
|
1
|
+
.button{font-family:var(--token-fontFamily,"Ubuntu Sans", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);border-radius:var(--token-buttonBorderRadius,var(--token-borderRadius,.375rem));cursor:pointer;transition:background var(--token-motionDurationFast,.1s) ease-out, border-color var(--token-motionDurationFast,.1s) ease-out, box-shadow var(--token-motionDurationMid,.2s) ease-out, transform .15s cubic-bezier(.25, .46, .45, .94), color var(--token-motionDurationFast,.1s) ease-out, opacity var(--token-motionDurationFast,.1s) ease-out;white-space:nowrap;min-height:var(--token-controlHeightLG,2.75rem);border:1px solid #0000;justify-content:center;align-items:center;gap:.375rem;font-weight:500;display:inline-flex;position:relative}.button:disabled{opacity:.6;cursor:not-allowed}.button:focus-visible{outline:var(--token-focusRingWidth,2px) var(--token-focusRingStyle,solid) var(--token-focusRingColor,var(--token-colorPrimary));outline-offset:var(--token-focusRingOffset,2px)}.button--full-width{width:100%}.button.button--inline{--token-buttonHoverTransform:none;--token-buttonActiveTransform:none;--token-buttonGhostBorder:none;--token-buttonGhostBorderHover:none;--token-buttonSecondaryBorder:none;--token-buttonSecondaryBorderHover:none;--token-buttonPrimaryBorder:none;--token-buttonDangerBorder:none;min-height:auto;transition:background-color var(--token-motionDurationFast,.1s) ease-out, color var(--token-motionDurationFast,.1s) ease-out;line-height:1}.button--inline{justify-content:flex-start}.button.button--inline>svg{flex-shrink:0;display:block}.button.button--inline:hover:not(:disabled),.button.button--inline:active:not(:disabled){box-shadow:none!important;transform:none!important}.button--xsmall{font-size:var(--token-fontSizeSM,.75rem);gap:.1875rem;min-height:1.75rem;padding:.125rem .375rem}.button--small{padding:var(--token-paddingXS,.25rem) var(--token-paddingSM,.5rem);font-size:var(--token-fontSizeSM,.75rem);min-height:var(--token-controlHeightSM,2rem);gap:.25rem}.button--medium{padding:var(--token-paddingXS,.25rem) var(--token-padding,.75rem);font-size:var(--token-fontSize,.875rem);gap:.375rem}.button--large{padding:var(--token-paddingSM,.5rem) var(--token-paddingMD,1rem);font-size:var(--token-fontSize,.875rem);gap:.5rem}.button--icon-only{padding:var(--token-paddingXS,.25rem);aspect-ratio:1}.button--icon-only.button--xsmall{padding:.125rem}.button--icon-only.button--small{padding:var(--token-paddingXS,.25rem)}.button--icon-only.button--large{padding:var(--token-paddingSM,.5rem)}.button--circle{aspect-ratio:1;padding:var(--token-paddingXS,.25rem);border-radius:50%}.button--circle.button--xsmall{padding:.125rem}.button--circle.button--small{padding:var(--token-paddingXS,.25rem)}.button--circle.button--large{padding:var(--token-paddingSM,.5rem)}.button--primary{background:var(--token-buttonPrimaryBg,linear-gradient(180deg, #fff3 0%, transparent 50%), #8b5cf6);color:#fff;border:var(--token-buttonPrimaryBorder,none);box-shadow:var(--token-buttonPrimaryShadow,0 2px 6px #8b5cf640, inset 0 1px 1px #fff3);-webkit-backdrop-filter:var(--token-buttonPrimaryBackdrop,none)}.button--primary:hover:not(:disabled){background:var(--token-buttonPrimaryBgHover,linear-gradient(180deg, #ffffff40 0%, transparent 50%), #7c3aed);box-shadow:var(--token-buttonPrimaryShadowHover,0 4px 10px #8b5cf64d, inset 0 1px 1px #ffffff40);transform:var(--token-buttonHoverTransform,translateY(-1px))}.button--primary:active:not(:disabled){background:var(--token-buttonPrimaryBgActive,var(--token-colorPrimaryActive,#6d28d9));transform:var(--token-buttonActiveTransform,scale(.97));box-shadow:var(--token-buttonPrimaryShadow,0 2px 6px #8b5cf640, inset 0 1px 1px #fff3)}.button--secondary{background:var(--token-buttonSecondaryBg,#8b5cf60a);color:var(--token-colorTextSecondary,#595959);border:var(--token-buttonSecondaryBorder,1px solid #8b5cf633);box-shadow:var(--token-buttonSecondaryShadow,0 1px 3px #0000000a, inset 0 1px 0 #fffc);-webkit-backdrop-filter:var(--token-buttonSecondaryBackdrop,none)}.button--secondary:hover:not(:disabled){background:var(--token-buttonSecondaryBgHover,#8b5cf614);border:var(--token-buttonSecondaryBorderHover,1px solid #8b5cf64d);color:var(--token-colorText,#141414);box-shadow:var(--token-buttonSecondaryShadowHover,var(--token-buttonSecondaryShadow,0 1px 3px #0000000a, inset 0 1px 0 #fffc));transform:var(--token-buttonHoverTransform,translateY(-1px))}.button--secondary:active:not(:disabled){background:var(--token-buttonSecondaryBgActive,var(--token-colorBgLayout,#f5f5f5));transform:var(--token-buttonActiveTransform,scale(.97));box-shadow:var(--token-buttonSecondaryShadow,0 1px 3px #0000000a, inset 0 1px 0 #fffc)}.button--danger{background:var(--token-buttonDangerBg,transparent);color:var(--token-buttonDangerText,var(--token-colorError,#c82333));border:var(--token-buttonDangerBorder,1px solid #c82333);box-shadow:var(--token-buttonDangerShadow,none)}.button--danger:hover:not(:disabled){background:var(--token-buttonDangerBgHover,#ff4d4f1a);border-color:var(--token-colorError,#c82333);box-shadow:var(--token-buttonDangerShadowHover,var(--token-buttonDangerShadow,none));transform:var(--token-buttonHoverTransform,translateY(-1px))}.button--danger:active:not(:disabled){background:var(--token-buttonDangerBgActive,#ff4d4f33);transform:var(--token-buttonActiveTransform,scale(.97));box-shadow:var(--token-buttonDangerShadow,none)}.button--success{background:var(--token-buttonSuccessBg,linear-gradient(180deg, #fff3 0%, transparent 50%), #007a63);color:#fff;border:var(--token-buttonSuccessBorder,none);box-shadow:var(--token-buttonSuccessShadow,0 2px 6px #00bd9b40, inset 0 1px 1px #fff3);-webkit-backdrop-filter:var(--token-buttonSuccessBackdrop,none)}.button--success:hover:not(:disabled){background:var(--token-buttonSuccessBgHover,linear-gradient(180deg, #ffffff40 0%, transparent 50%), #006654);box-shadow:var(--token-buttonSuccessShadowHover,var(--token-buttonSuccessShadow,0 2px 6px #00bd9b40, inset 0 1px 1px #fff3));transform:var(--token-buttonHoverTransform,translateY(-1px))}.button--success:active:not(:disabled){background:var(--token-buttonSuccessBgActive,var(--token-colorSuccessActive,#005244));transform:var(--token-buttonActiveTransform,scale(.97));box-shadow:var(--token-buttonSuccessShadow,0 2px 6px #00bd9b40, inset 0 1px 1px #fff3)}.button--ghost{background:var(--token-buttonGhostBg,transparent);color:var(--token-colorTextSecondary,#595959);border:var(--token-buttonGhostBorder,1px solid transparent);box-shadow:var(--token-buttonGhostShadow,none);-webkit-backdrop-filter:var(--token-buttonGhostBackdrop,none)}.button--ghost:hover:not(:disabled){background:var(--token-buttonGhostBgHover,#8b5cf60f);border:var(--token-buttonGhostBorderHover,var(--token-buttonGhostBorder,1px solid transparent));color:var(--token-colorText,#141414);box-shadow:var(--token-buttonGhostShadowHover,none);transform:var(--token-buttonHoverTransform,translateY(-1px))}.button--ghost:active:not(:disabled){background:var(--token-buttonGhostBgActive,var(--token-colorBgLayout,#f5f5f5));transform:var(--token-buttonActiveTransform,scale(.97))}.button--text{color:var(--token-colorTextSecondary,#595959);box-shadow:none;background:0 0;border:1px solid #0000;min-height:auto;padding:.25rem .5rem}.button--text:hover:not(:disabled){background:var(--token-colorBgTextHover,#0000000a);color:var(--token-colorText,#141414);transform:none}.button--text:active:not(:disabled){background:var(--token-colorBgTextActive,#00000014);transform:none}.button--outline{color:var(--token-colorTextSecondary,#595959);border:1px solid var(--token-colorBorderSecondary,#00000026);box-shadow:none;background:0 0}.button--outline:hover:not(:disabled){background:var(--token-colorBgTextHover,#0000000a);border-color:var(--token-colorPrimary,#8b5cf6);color:var(--token-colorPrimary,#8b5cf6);transform:var(--token-buttonHoverTransform,translateY(-1px))}.button--outline:active:not(:disabled){background:var(--token-colorBgTextActive,#00000014);transform:var(--token-buttonActiveTransform,scale(.97))}.button[role=tab]{border:1px solid #0000}.button[role=tab]:hover:not(:disabled),.button[role=tab]:active:not(:disabled){transform:none}.button--active{color:var(--token-colorPrimary,#8b5cf6);font-weight:600}.button--active.button--ghost,.button--active.button--text{background:var(--token-colorPrimaryBg,#1677ff14);color:var(--token-colorPrimary,#8b5cf6)}.button--active.button--outline,.button--active.button--secondary{background:var(--token-colorPrimaryBg,#1677ff14);border-color:var(--token-colorPrimary,#8b5cf6);color:var(--token-colorPrimary,#8b5cf6)}.button--loading{pointer-events:none}.button--loading .button__text,.button--loading .button__icon{opacity:0}.button__loading-spinner{border:.125rem solid;border-top-color:#0000;border-radius:50%;width:.875rem;height:.875rem;animation:.6s linear infinite button-spinner-rotate;position:absolute}@keyframes button-spinner-rotate{to{transform:rotate(360deg)}}.button__icon{justify-content:center;align-items:center;line-height:1;display:inline-flex}.button__icon svg{display:block}.button__text{line-height:1}@media (prefers-reduced-motion:reduce){.button{transition:none}.button:hover:not(:disabled),.button:active:not(:disabled){transform:none}.button__loading-spinner{opacity:.6;border-top-color:currentColor;animation:none}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.data-table{border:1px solid var(--token-colorBorderSecondary,var(--token-colorBorder,#d9d9d9));border-radius:var(--token-borderRadiusLG,8px);background-color:var(--token-colorBgContainer,#fff);width:100%;position:relative;overflow-x:auto}.data-table__table{border-collapse:collapse;table-layout:auto;width:100%}.data-table__head{z-index:1;background-color:var(--token-colorFillQuaternary,var(--token-colorBgLayout,#f5f5f5));position:sticky;top:0}.data-table__row{border-bottom:1px solid var(--token-colorBorderSecondary,transparent)}.data-table__row:last-of-type{border-bottom:none}.data-table__row--clickable{cursor:pointer;transition:background-color var(--token-motionDurationFast,.12s) ease}.data-table__row--clickable:hover{background-color:var(--token-colorFillQuaternary,#0000000a)}.data-table__row--clickable:focus-visible{outline:2px solid var(--token-colorPrimary
|
|
1
|
+
.data-table{border:1px solid var(--token-colorBorderSecondary,var(--token-colorBorder,#d9d9d9));border-radius:var(--token-borderRadiusLG,8px);background-color:var(--token-colorBgContainer,#fff);width:100%;position:relative;overflow-x:auto}.data-table__table{border-collapse:collapse;table-layout:auto;width:100%}.data-table__head{z-index:1;background-color:var(--token-colorFillQuaternary,var(--token-colorBgLayout,#f5f5f5));position:sticky;top:0}.data-table__row{border-bottom:1px solid var(--token-colorBorderSecondary,transparent)}.data-table__row:last-of-type{border-bottom:none}.data-table__row--clickable{cursor:pointer;transition:background-color var(--token-motionDurationFast,.12s) ease}.data-table__row--clickable:hover{background-color:var(--token-colorFillQuaternary,#0000000a)}.data-table__row--clickable:focus-visible{outline:var(--token-focusRingWidth,2px) var(--token-focusRingStyle,solid) var(--token-focusRingColor,var(--token-colorPrimary));outline-offset:-2px}.data-table__cell{padding:var(--token-paddingSM,.5rem) var(--token-paddingMD,1rem);font-size:var(--token-fontSize,.875rem);color:var(--token-colorText,#141414);vertical-align:middle;text-align:start;word-break:break-word}.data-table__cell--align-left{text-align:left}.data-table__cell--align-right{text-align:right}.data-table__cell--align-center{text-align:center}.data-table__cell--head{font-weight:600;font-size:var(--token-fontSizeSM,.75rem);text-transform:uppercase;letter-spacing:.05em;color:var(--token-colorTextSecondary,#595959);background-color:var(--token-colorFillQuaternary,var(--token-colorBgLayout,#f5f5f5));border-bottom:1px solid var(--token-colorBorderSecondary,var(--token-colorBorder,#d9d9d9));-webkit-user-select:none;user-select:none;white-space:nowrap;word-break:normal;overflow-wrap:normal;position:relative}.data-table__cell--resizable{padding-inline-end:calc(var(--token-paddingMD,1rem) + var(--token-controlHeightSM,2rem))}.data-table__head-label{vertical-align:middle;display:inline-block}.data-table__cell--sortable{cursor:pointer;-webkit-user-select:none;user-select:none}.data-table__cell--sortable:hover{background-color:var(--token-colorFillTertiary,#0000000f)}.data-table__cell--sortable:focus-visible{outline:var(--token-focusRingWidth,2px) var(--token-focusRingStyle,solid) var(--token-focusRingColor,var(--token-colorPrimary));outline-offset:-2px}.data-table__cell--sort-active{color:var(--token-colorPrimary,#8b5cf6)}.data-table__sort-icon{vertical-align:middle;color:var(--token-colorTextSecondary,#595959);flex-shrink:0;align-items:center;margin-inline-start:var(--token-marginXXS,4px);line-height:0;display:inline-flex}.data-table__cell--sort-active .data-table__sort-icon{color:var(--token-colorPrimary,#8b5cf6)}.data-table__resize-handle{width:var(--token-controlHeightSM,2rem);cursor:col-resize;touch-action:none;outline:none;position:absolute;top:0;bottom:0;right:0}.data-table__resize-handle:before{top:var(--token-paddingXS,.25rem);right:calc(50% - 1px);bottom:var(--token-paddingXS,.25rem);content:"";border-radius:var(--token-borderRadiusSM,.25rem);background-color:var(--token-colorTextTertiary,#737373);opacity:1;width:2px;transition:background-color var(--token-motionDurationFast,.12s) ease, opacity var(--token-motionDurationFast,.12s) ease;position:absolute}.data-table__resize-handle:hover:before,.data-table__resize-handle:focus-visible:before{background-color:var(--token-focusRingColor);opacity:1}.data-table__resize-handle:focus-visible{outline:var(--token-focusRingWidth,2px) var(--token-focusRingStyle,solid) var(--token-focusRingColor);outline-offset:-2px}.data-table__state-cell{padding:var(--token-paddingLG,16px);text-align:center;color:var(--token-colorTextSecondary,#595959)}.data-table__loading{background:linear-gradient(90deg, var(--token-colorFillQuaternary,#fafafa) 25%, var(--token-colorFillTertiary,#f9fafb) 50%, var(--token-colorFillQuaternary,#fafafa) 75%);border-radius:var(--token-borderRadiusSM,.25rem);background-size:200% 100%;width:100%;height:24px;animation:1.4s ease-in-out infinite data-table-shimmer}@keyframes data-table-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.data-table__loading{animation:none}.data-table__resize-handle:before{transition:none}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.drawer__backdrop.drawer__backdrop{background-color:var(--token-colorBgMask,#00000073);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:var(--token-zIndexDrawer,1100);pointer-events:none;visibility:hidden;opacity:0;transition:opacity var(--token-motionDurationMid,.3s) ease, visibility 0s linear var(--token-motionDurationMid,.3s), background-color var(--token-themeTransitionDuration,.25s) var(--token-themeTransitionTiming,ease-in-out), backdrop-filter var(--token-themeTransitionDuration,.25s) var(--token-themeTransitionTiming,ease-in-out);position:fixed;inset:0}.drawer__backdrop--open.drawer__backdrop--open{pointer-events:auto;visibility:visible;opacity:1;transition:opacity var(--token-motionDurationMid,.3s) ease, visibility 0s linear 0s, background-color var(--token-themeTransitionDuration,.25s) var(--token-themeTransitionTiming,ease-in-out), backdrop-filter var(--token-themeTransitionDuration,.25s) var(--token-themeTransitionTiming,ease-in-out)}.drawer.drawer{background-color:var(--token-colorBgContainer,#fff);box-shadow:var(--token-boxShadowDrawerRight,-4px 0 20px #00000026);opacity:0;transition:transform var(--token-motionDurationMid,.3s) cubic-bezier(.4, 0, .2, 1), opacity var(--token-motionDurationMid,.3s) ease, background-color var(--token-themeTransitionDuration,.25s) var(--token-themeTransitionTiming,ease-in-out), color var(--token-themeTransitionDuration,.25s) var(--token-themeTransitionTiming,ease-in-out), border-color var(--token-themeTransitionDuration,.25s) var(--token-themeTransitionTiming,ease-in-out), box-shadow var(--token-themeTransitionDuration,.25s) var(--token-themeTransitionTiming,ease-in-out);z-index:var(--token-zIndexDrawerContent,1101);flex-direction:column;display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(100%)}.drawer.drawer--open{opacity:1;transform:translate(0)}.drawer__header{padding:var(--token-paddingLG,1.5rem);border-bottom:1px solid var(--token-colorBorder,#d9d9d9);flex-shrink:0}.drawer__title-row{justify-content:space-between;align-items:center;gap:var(--token-paddingMD,1rem);display:flex}.drawer__title{font-size:var(--token-fontSizeHeading4,1.25rem);color:var(--token-colorText,#141414);margin:0;font-weight:600}.drawer__subtitle{font-size:var(--token-fontSizeSM,.875rem);color:var(--token-colorTextSecondary,#6b7280);margin:var(--token-paddingSM,.5rem) 0 0 0;text-overflow:ellipsis;overflow:hidden}.drawer__close-btn.drawer__close-btn{border-radius:var(--token-borderRadius,6px);width:2rem;height:2rem;color:var(--token-colorTextSecondary,#6b7280);cursor:pointer;transition:background-color var(--token-motionDurationFast,.15s) ease, color var(--token-motionDurationFast,.15s) ease, border-color var(--token-themeTransitionDuration,.25s) var(--token-themeTransitionTiming,ease-in-out);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.drawer__close-btn:hover{background-color:var(--token-colorFillSecondary,#f3f4f6);color:var(--token-colorText,#141414)}.drawer__close-btn:focus-visible{outline:2px solid var(--token-colorPrimary
|
|
1
|
+
.drawer__backdrop.drawer__backdrop{background-color:var(--token-colorBgMask,#00000073);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:var(--token-zIndexDrawer,1100);pointer-events:none;visibility:hidden;opacity:0;transition:opacity var(--token-motionDurationMid,.3s) ease, visibility 0s linear var(--token-motionDurationMid,.3s), background-color var(--token-themeTransitionDuration,.25s) var(--token-themeTransitionTiming,ease-in-out), backdrop-filter var(--token-themeTransitionDuration,.25s) var(--token-themeTransitionTiming,ease-in-out);position:fixed;inset:0}.drawer__backdrop--open.drawer__backdrop--open{pointer-events:auto;visibility:visible;opacity:1;transition:opacity var(--token-motionDurationMid,.3s) ease, visibility 0s linear 0s, background-color var(--token-themeTransitionDuration,.25s) var(--token-themeTransitionTiming,ease-in-out), backdrop-filter var(--token-themeTransitionDuration,.25s) var(--token-themeTransitionTiming,ease-in-out)}.drawer.drawer{background-color:var(--token-colorBgContainer,#fff);box-shadow:var(--token-boxShadowDrawerRight,-4px 0 20px #00000026);opacity:0;transition:transform var(--token-motionDurationMid,.3s) cubic-bezier(.4, 0, .2, 1), opacity var(--token-motionDurationMid,.3s) ease, background-color var(--token-themeTransitionDuration,.25s) var(--token-themeTransitionTiming,ease-in-out), color var(--token-themeTransitionDuration,.25s) var(--token-themeTransitionTiming,ease-in-out), border-color var(--token-themeTransitionDuration,.25s) var(--token-themeTransitionTiming,ease-in-out), box-shadow var(--token-themeTransitionDuration,.25s) var(--token-themeTransitionTiming,ease-in-out);z-index:var(--token-zIndexDrawerContent,1101);flex-direction:column;display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(100%)}.drawer.drawer--open{opacity:1;transform:translate(0)}.drawer__header{padding:var(--token-paddingLG,1.5rem);border-bottom:1px solid var(--token-colorBorder,#d9d9d9);flex-shrink:0}.drawer__title-row{justify-content:space-between;align-items:center;gap:var(--token-paddingMD,1rem);display:flex}.drawer__title{font-size:var(--token-fontSizeHeading4,1.25rem);color:var(--token-colorText,#141414);margin:0;font-weight:600}.drawer__subtitle{font-size:var(--token-fontSizeSM,.875rem);color:var(--token-colorTextSecondary,#6b7280);margin:var(--token-paddingSM,.5rem) 0 0 0;text-overflow:ellipsis;overflow:hidden}.drawer__close-btn.drawer__close-btn{border-radius:var(--token-borderRadius,6px);width:2rem;height:2rem;color:var(--token-colorTextSecondary,#6b7280);cursor:pointer;transition:background-color var(--token-motionDurationFast,.15s) ease, color var(--token-motionDurationFast,.15s) ease, border-color var(--token-themeTransitionDuration,.25s) var(--token-themeTransitionTiming,ease-in-out);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;display:flex}.drawer__close-btn:hover{background-color:var(--token-colorFillSecondary,#f3f4f6);color:var(--token-colorText,#141414)}.drawer__close-btn:focus-visible{outline:var(--token-focusRingWidth,2px) var(--token-focusRingStyle,solid) var(--token-focusRingColor,var(--token-colorPrimary));outline-offset:var(--token-focusRingOffset,2px)}.drawer__content{flex:1;overflow:hidden auto}.drawer__footer{padding:var(--token-paddingMD,1rem) var(--token-paddingLG,1.5rem);border-top:1px solid var(--token-colorBorder,#d9d9d9);background-color:var(--token-colorFillSecondary,#f3f4f6);flex-shrink:0}@media (prefers-reduced-motion:reduce){.drawer__backdrop.drawer__backdrop,.drawer.drawer,.drawer__close-btn.drawer__close-btn,.drawer__backdrop--open.drawer__backdrop--open{transition:none}}@media (prefers-reduced-transparency:reduce){.drawer__backdrop.drawer__backdrop{-webkit-backdrop-filter:none;background-color:#000000a6}}@media (max-width:767px){.drawer{width:100vw!important;max-width:100vw!important}.drawer__header,.drawer__footer{padding:var(--token-paddingMD,1rem)}}@keyframes drawer-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}.drawer--shaking{animation:.4s ease-in-out drawer-shake}@media (prefers-reduced-motion:reduce){.drawer--shaking{animation:none}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.empty-state{padding:var(--token-paddingXL,2rem) var(--token-paddingLG,1.5rem);text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:300px;animation:.5s ease-out empty-state-fade-in;display:flex}@keyframes empty-state-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.empty-state__illustration{margin-bottom:var(--token-paddingLG,1.5rem);position:relative}.empty-state__icon{color:var(--token-colorTextQuaternary,#bfbfbf);transition:color var(--token-motionDurationMid,.2s)}.empty-state__illustration:before{content:"";background:radial-gradient(circle, color-mix(in srgb, var(--token-colorPrimary,#8b5cf6) 8%, transparent) 0%, transparent 70%);z-index:-1;opacity:0;will-change:opacity, transform;border-radius:50%;animation:3s ease-in-out infinite glow-pulse;position:absolute;inset:-20px}@keyframes glow-pulse{0%,to{opacity:0;transform:scale(.95)}50%{opacity:1;transform:scale(1)}}.illustration-sparkle{transform-origin:50%;will-change:opacity, transform;animation:2s ease-in-out infinite sparkle-twinkle}@keyframes sparkle-twinkle{0%,to{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}.illustration-arrow{will-change:transform;animation:2s ease-in-out infinite arrow-bounce}@keyframes arrow-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(5px)}}.illustration-needle{transform-origin:256px 308px;will-change:transform;animation:3s ease-in-out infinite needle-swing}@keyframes needle-swing{0%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}to{transform:rotate(-12deg)}}.empty-state__content{margin-bottom:var(--token-paddingLG,1.5rem);max-width:480px}.empty-state__title{margin:0 0 var(--token-paddingSM,.5rem) 0;font-size:var(--token-fontSizeXL,1.25rem);color:var(--token-colorText,#141414);font-weight:600;line-height:1.4}.empty-state__description{font-size:var(--token-fontSize,.875rem);color:var(--token-colorTextSecondary,#595959);margin:0;line-height:1.6}.empty-state__actions{gap:var(--token-paddingMD,1rem);flex-wrap:wrap;justify-content:center;align-items:center;display:flex}.empty-state__action-btn{min-width:120px}.empty-state__action-link{font-size:var(--token-fontSize,.875rem);color:var(--token-colorLink,#8b5cf6);padding:var(--token-paddingXS,.25rem) var(--token-paddingSM,.5rem);border-radius:var(--token-borderRadiusSM,.25rem);transition:color var(--token-motionDurationFast,.1s), background-color var(--token-motionDurationFast,.1s);text-decoration:none}.empty-state__action-link:hover{color:var(--token-colorLinkHover,#7c3aed);background-color:var(--token-colorFillTertiary,#f9fafb)}.empty-state__action-link:focus{outline:2px solid var(--token-colorPrimary
|
|
1
|
+
.empty-state{padding:var(--token-paddingXL,2rem) var(--token-paddingLG,1.5rem);text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:300px;animation:.5s ease-out empty-state-fade-in;display:flex}@keyframes empty-state-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.empty-state__illustration{margin-bottom:var(--token-paddingLG,1.5rem);position:relative}.empty-state__icon{color:var(--token-colorTextQuaternary,#bfbfbf);transition:color var(--token-motionDurationMid,.2s)}.empty-state__illustration:before{content:"";background:radial-gradient(circle, color-mix(in srgb, var(--token-colorPrimary,#8b5cf6) 8%, transparent) 0%, transparent 70%);z-index:-1;opacity:0;will-change:opacity, transform;border-radius:50%;animation:3s ease-in-out infinite glow-pulse;position:absolute;inset:-20px}@keyframes glow-pulse{0%,to{opacity:0;transform:scale(.95)}50%{opacity:1;transform:scale(1)}}.illustration-sparkle{transform-origin:50%;will-change:opacity, transform;animation:2s ease-in-out infinite sparkle-twinkle}@keyframes sparkle-twinkle{0%,to{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}.illustration-arrow{will-change:transform;animation:2s ease-in-out infinite arrow-bounce}@keyframes arrow-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(5px)}}.illustration-needle{transform-origin:256px 308px;will-change:transform;animation:3s ease-in-out infinite needle-swing}@keyframes needle-swing{0%{transform:rotate(-12deg)}50%{transform:rotate(12deg)}to{transform:rotate(-12deg)}}.empty-state__content{margin-bottom:var(--token-paddingLG,1.5rem);max-width:480px}.empty-state__title{margin:0 0 var(--token-paddingSM,.5rem) 0;font-size:var(--token-fontSizeXL,1.25rem);color:var(--token-colorText,#141414);font-weight:600;line-height:1.4}.empty-state__description{font-size:var(--token-fontSize,.875rem);color:var(--token-colorTextSecondary,#595959);margin:0;line-height:1.6}.empty-state__actions{gap:var(--token-paddingMD,1rem);flex-wrap:wrap;justify-content:center;align-items:center;display:flex}.empty-state__action-btn{min-width:120px}.empty-state__action-link{font-size:var(--token-fontSize,.875rem);color:var(--token-colorLink,#8b5cf6);padding:var(--token-paddingXS,.25rem) var(--token-paddingSM,.5rem);border-radius:var(--token-borderRadiusSM,.25rem);transition:color var(--token-motionDurationFast,.1s), background-color var(--token-motionDurationFast,.1s);text-decoration:none}.empty-state__action-link:hover{color:var(--token-colorLinkHover,#7c3aed);background-color:var(--token-colorFillTertiary,#f9fafb)}.empty-state__action-link:focus{outline:var(--token-focusRingWidth,2px) var(--token-focusRingStyle,solid) var(--token-focusRingColor,var(--token-colorPrimary));outline-offset:var(--token-focusRingOffset,2px)}.empty-state--chat .empty-state__illustration:before{background:radial-gradient(circle, var(--token-colorPrimaryBg,#8b5cf61a) 0%, transparent 70%)}.empty-state--models .empty-state__illustration:before{background:radial-gradient(circle,#1890ff14 0%,#0000 70%)}.empty-state--creations .empty-state__illustration:before{background:radial-gradient(circle,#722ed114 0%,#0000 70%)}.empty-state--text .empty-state__illustration:before{background:radial-gradient(circle,#5263d114 0%,#0000 70%)}.empty-state--benchmark .empty-state__illustration:before{background:radial-gradient(circle,#00bd9b14 0%,#0000 70%)}.empty-state--statistics .empty-state__illustration:before{background:radial-gradient(circle,#13c2c214 0%,#0000 70%)}.empty-state--error .empty-state__illustration:before{background:radial-gradient(circle,#ff4d4f14 0%,#0000 70%)}@media (prefers-color-scheme:dark){.empty-state--chat .empty-state__illustration:before{background:radial-gradient(circle, var(--token-colorPrimaryBg,#8b5cf61a) 0%, transparent 70%)}.empty-state--models .empty-state__illustration:before{background:radial-gradient(circle,#1890ff1f 0%,#0000 70%)}.empty-state--creations .empty-state__illustration:before{background:radial-gradient(circle,#722ed11f 0%,#0000 70%)}.empty-state--text .empty-state__illustration:before{background:radial-gradient(circle,#5263d11f 0%,#0000 70%)}.empty-state--benchmark .empty-state__illustration:before{background:radial-gradient(circle,#00bd9b1f 0%,#0000 70%)}.empty-state--statistics .empty-state__illustration:before{background:radial-gradient(circle,#13c2c21f 0%,#0000 70%)}.empty-state--error .empty-state__illustration:before{background:radial-gradient(circle,#ff4d4f1f 0%,#0000 70%)}}@media (prefers-reduced-motion:reduce){.empty-state{animation:none}.empty-state__illustration:before{opacity:.5;animation:none}.illustration-sparkle,.illustration-arrow,.illustration-needle{animation:none}}@media (max-width:768px){.empty-state{padding:var(--token-paddingLG,1.5rem) var(--token-paddingMD,1rem);min-height:250px}.empty-state__illustration{margin-bottom:var(--token-paddingMD,1rem)}.empty-state__icon{width:80px;height:80px}.empty-state__title{font-size:var(--token-fontSizeLG,1rem)}.empty-state__description{font-size:var(--token-fontSize,.875rem)}.empty-state__actions{gap:var(--token-paddingSM,.5rem);flex-direction:column;width:100%}.empty-state__action-btn{width:100%;min-width:unset}}@media (max-width:480px){.empty-state__icon{width:64px;height:64px}.empty-state__title{font-size:var(--token-fontSizeLG,1rem)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.error-state{padding:var(--token-paddingXL,2rem);text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:200px;display:flex}.error-state__icon{width:64px;height:64px;margin-bottom:var(--token-paddingLG,1.5rem);color:var(--token-colorError,#c82333);transition:transform var(--token-motionDurationMid,.2s);background-color:#ff4d4f1a;border-radius:50%;justify-content:center;align-items:center;display:flex}.error-state__icon svg{width:48px;height:48px}.error-state__title{margin:0 0 var(--token-paddingSM,.5rem);font-size:var(--token-fontSizeXL,1.25rem);color:var(--token-colorText,#141414);font-weight:600;line-height:1.4}.error-state__message{margin:0 0 var(--token-paddingLG,1.5rem);font-size:var(--token-fontSize,.875rem);color:var(--token-colorTextSecondary,#595959);max-width:480px;line-height:1.5}.error-state__actions{gap:var(--token-padding,.75rem);flex-wrap:wrap;justify-content:center;display:flex}.error-state__action-btn{min-width:120px}.error-state--
|
|
1
|
+
.error-state{padding:var(--token-paddingXL,2rem);text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:200px;display:flex}.error-state__icon{width:64px;height:64px;margin-bottom:var(--token-paddingLG,1.5rem);color:var(--token-colorError,#c82333);transition:transform var(--token-motionDurationMid,.2s);background-color:#ff4d4f1a;border-radius:50%;justify-content:center;align-items:center;display:flex}.error-state__icon svg{width:48px;height:48px}.error-state__title{margin:0 0 var(--token-paddingSM,.5rem);font-size:var(--token-fontSizeXL,1.25rem);color:var(--token-colorText,#141414);font-weight:600;line-height:1.4}.error-state__message{margin:0 0 var(--token-paddingLG,1.5rem);font-size:var(--token-fontSize,.875rem);color:var(--token-colorTextSecondary,#595959);max-width:480px;line-height:1.5}.error-state__actions{gap:var(--token-padding,.75rem);flex-wrap:wrap;justify-content:center;display:flex}.error-state__action-btn{min-width:120px}.error-state--danger .error-state__icon{color:var(--token-colorError,#c82333);background-color:#ff4d4f1a}.error-state--warning .error-state__icon{color:var(--token-colorWarning,#9a5d00);background-color:#faad141a}.error-state--accent .error-state__icon{color:var(--token-colorPrimary,#8b5cf6);background-color:var(--token-colorPrimaryBg,#8b5cf61a)}@media (prefers-reduced-motion:reduce){.error-state__icon{transition:none}}@media (max-width:767px){.error-state{padding:var(--token-paddingLG,1.5rem)}.error-state__icon{width:56px;height:56px;margin-bottom:var(--token-paddingMD,1rem)}.error-state__icon svg{width:40px;height:40px}.error-state__title{font-size:var(--token-fontSizeLG,1rem)}.error-state__message{font-size:var(--token-fontSize,.875rem)}.error-state__actions{flex-direction:column;width:100%}.error-state__action-btn{width:100%;min-width:unset}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.page-header{margin-bottom:var(--token-paddingLG,1.5rem)}.page-header__content{justify-content:space-between;align-items:flex-start;gap:var(--token-paddingMD,1rem);flex-wrap:wrap;display:flex}.page-header__text{flex:20rem;min-width:min(100%,12rem)}.page-header__title{margin:0 0 var(--token-paddingSM,.5rem);font-size:var(--token-fontSizeDisplay4,1.75rem);letter-spacing:.02em;color:var(--token-colorText,#141414);font-weight:300}.page-header__description{font-size:var(--token-fontSize,.875rem);color:var(--token-colorTextSecondary,#595959);margin:0}.page-header__actions{justify-content:flex-end;align-items:flex-start;gap:var(--token-paddingSM,.5rem);flex-wrap:wrap;flex:0 auto;min-width:0;margin-left:auto;display:flex}.page-header__actions>*{flex-shrink:0}.page-header__error{justify-content:space-between;align-items:center;gap:var(--token-paddingSM,.5rem);margin-top:var(--token-paddingSM,.5rem);padding:var(--token-paddingSM,.5rem) var(--token-paddingMD,1rem);font-size:var(--token-fontSize,.875rem);color:var(--token-colorError,#c82333);border-radius:var(--token-borderRadiusLG,.5rem);background-color:#ff4d4f14;border:1px solid #ff4d4f4d;display:flex}.page-header__error-text{word-break:break-word;flex:1}.page-header__error-dismiss{font-size:var(--token-fontSizeXL,1.25rem);color:currentColor;cursor:pointer;opacity:.7;width:24px;height:24px;transition:opacity var(--token-motionDurationFast,.1s);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;line-height:1;display:flex}.page-header__error-dismiss:hover{opacity:1}@media (max-width:767px){.page-header__content{flex-direction:column;align-items:stretch}.page-header__text{flex:none;min-width:0}.page-header__actions{justify-content:flex-end}}
|
|
1
|
+
.page-header{margin-bottom:var(--token-paddingLG,1.5rem)}.page-header__content{justify-content:space-between;align-items:flex-start;gap:var(--token-paddingMD,1rem);flex-wrap:wrap;display:flex}.page-header__text{flex:20rem;min-width:min(100%,12rem)}.page-header__title{margin:0 0 var(--token-paddingSM,.5rem);font-size:var(--token-fontSizeDisplay4,1.75rem);letter-spacing:.02em;color:var(--token-colorText,#141414);font-weight:300}.page-header__description{font-size:var(--token-fontSize,.875rem);color:var(--token-colorTextSecondary,#595959);margin:0}.page-header__actions{justify-content:flex-end;align-items:flex-start;gap:var(--token-paddingSM,.5rem);flex-wrap:wrap;flex:0 auto;min-width:0;margin-left:auto;display:flex}.page-header__actions>*{flex-shrink:0}.page-header__error{justify-content:space-between;align-items:center;gap:var(--token-paddingSM,.5rem);margin-top:var(--token-paddingSM,.5rem);padding:var(--token-paddingSM,.5rem) var(--token-paddingMD,1rem);font-size:var(--token-fontSize,.875rem);color:var(--token-colorError,#c82333);border-radius:var(--token-borderRadiusLG,.5rem);background-color:#ff4d4f14;border:1px solid #ff4d4f4d;display:flex}.page-header__error-text{word-break:break-word;flex:1}.page-header__error-dismiss{font-size:var(--token-fontSizeXL,1.25rem);color:currentColor;cursor:pointer;opacity:.7;width:24px;height:24px;transition:opacity var(--token-motionDurationFast,.1s);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;line-height:1;display:flex}.page-header__error-dismiss:hover{opacity:1}@media (max-width:767px){.page-header__content{flex-direction:column;align-items:stretch}.page-header__text{flex:none;min-width:0}.page-header__actions{justify-content:flex-end}}.page-header__error-body{gap:var(--token-paddingXXS,.125rem);flex-direction:column;flex:1;min-width:0;display:flex}.page-header__error-detail{font-size:var(--token-fontSizeSM,.75rem);color:var(--token-colorTextTertiary,#737373);word-break:break-word}.page-header__error-actions{align-items:center;gap:var(--token-paddingSM,.5rem);padding-left:var(--token-paddingXS,.25rem);flex-shrink:0;display:flex}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.select{display:inline-block;position:relative}.select--full-width{width:100%;display:block}.select--labelled{gap:var(--token-paddingXS);flex-direction:column;display:flex}.select__label{font-size:var(--token-fontSizeSM);color:var(--token-colorTextSecondary);font-weight:500}.select__trigger{justify-content:space-between;align-items:center;gap:var(--token-paddingSM);width:100%;min-height:var(--token-controlHeight);padding:var(--token-paddingXS) var(--token-padding);font-size:var(--token-fontSize);font-family:var(--token-fontFamily);color:var(--token-colorText);background-color:var(--token-colorBgContainer);border:1px solid var(--token-colorBorder);border-radius:var(--token-borderRadius);cursor:pointer;transition:all var(--token-motionDurationFast);text-align:left;display:flex}.select__trigger:hover:not(:disabled){border-color:var(--token-colorPrimary)}.select__trigger:focus{border-color:color-mix(in srgb, var(--token-colorPrimary) 70%, var(--token-colorText));box-shadow:0 0 0 2px var(--token-colorPrimaryBg);outline:none}.select--open .select__trigger{border-color:var(--token-colorPrimary);box-shadow:0 0 0 2px var(--token-colorPrimaryBg);border-bottom-right-radius:0;border-bottom-left-radius:0}.select--disabled .select__trigger{cursor:not-allowed;opacity:.6;background-color:var(--token-colorFillTertiary)}.select--small .select__trigger{min-height:var(--token-controlHeightSM);padding:var(--token-paddingXS) var(--token-paddingSM);font-size:var(--token-fontSizeSM)}.select--medium .select__trigger{min-height:var(--token-controlHeight);padding:var(--token-paddingXS) var(--token-padding);font-size:var(--token-fontSize)}.select--large .select__trigger{min-height:var(--token-controlHeightLG);padding:var(--token-paddingSM) var(--token-padding);font-size:var(--token-fontSize)}.select__trigger{min-width:120px}.select__value{align-items:center;gap:var(--token-paddingSM);flex:1;min-width:0;display:flex;overflow:hidden}.select__value-icon{color:var(--token-colorTextSecondary);flex-shrink:0;justify-content:center;align-items:center;display:flex}.select__value-label{text-overflow:ellipsis;white-space:nowrap;font-weight:500;overflow:hidden}.select__placeholder{color:var(--token-colorTextTertiary)}.select__chevron{color:var(--token-colorTextSecondary);transition:transform var(--token-motionDurationFast);flex-shrink:0;justify-content:center;align-items:center;display:flex}.select__chevron--open{transform:rotate(180deg)}.select__dropdown{z-index:var(--token-zIndexPopover);background:var(--token-colorBgElevated);border:1px solid var(--token-colorPrimary);border-radius:0 0 var(--token-borderRadius) var(--token-borderRadius);box-shadow:var(--token-boxShadowSecondary);border-top:none;flex-direction:column;max-height:240px;animation:.15s ease-out selectDropdownOpen;display:flex;position:absolute;top:100%;left:0;right:0;overflow:hidden}.select__dropdown--portal{border:1px solid var(--token-colorBorder);border-radius:var(--token-borderRadius);z-index:var(--token-zIndexTooltip);position:fixed}.select__search{padding:var(--token-paddingSM);background:var(--token-colorBgElevated);border-bottom:1px solid var(--token-colorBorderSecondary);flex-shrink:0}.select__search-input{box-sizing:border-box;width:100%;padding:var(--token-paddingXS) var(--token-paddingSM);font-family:var(--token-fontFamily);font-size:var(--token-fontSize);color:var(--token-colorText);background:var(--token-colorBgContainer);border:1px solid var(--token-colorBorder);border-radius:var(--token-borderRadiusSM);transition:border-color var(--token-motionDurationFast), box-shadow var(--token-motionDurationFast)}.select__search-input::placeholder{color:var(--token-colorTextPlaceholder)}.select__search-input:focus-visible{border-color:color-mix(in srgb, var(--token-colorPrimary) 70%, var(--token-colorText));box-shadow:0 0 0 2px var(--token-colorPrimaryBg);outline:none}.select__options{min-height:0;overflow-y:auto}@keyframes selectDropdownOpen{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.select__options::-webkit-scrollbar{width:var(--token-scrollbarSize);height:var(--token-scrollbarSize)}.select__options::-webkit-scrollbar-track{background:0 0}.select__options::-webkit-scrollbar-thumb{background-color:var(--token-colorBorder);border-radius:var(--token-scrollbarRadius)}.select__options::-webkit-scrollbar-thumb:hover{background-color:var(--token-colorTextTertiary)}.select__option{align-items:center;gap:var(--token-paddingSM);padding:var(--token-paddingSM) var(--token-padding);font-size:var(--token-fontSize);color:var(--token-colorText);cursor:pointer;transition:background-color var(--token-motionDurationFast);-webkit-user-select:none;user-select:none;display:flex}.select__option--disabled{color:var(--token-colorTextDisabled);cursor:not-allowed}.select__option:first-child{border-radius:0}.select__option:last-child{border-radius:0 0 var(--token-borderRadius) var(--token-borderRadius)}.select__option:hover:not(.select__option--disabled),.select__option--focused:not(.select__option--disabled){background-color:var(--token-colorFillSecondary)}.select__option--selected{background-color:var(--token-colorPrimaryBg)}.select__option--selected:hover,.select__option--selected.select__option--focused{background-color:var(--token-colorPrimaryBgHover)}.select__option-icon{width:20px;height:20px;color:var(--token-colorTextSecondary);flex-shrink:0;justify-content:center;align-items:center;display:flex}.select__option--selected .select__option-icon{color:var(--token-colorPrimary)}.select__option-content{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.select__option-label{font-weight:500}.select__option--selected .select__option-label{color:var(--token-colorPrimary)}.select__option-description{font-size:var(--token-fontSizeSM);color:var(--token-colorTextTertiary)}.select__option-check{color:var(--token-colorPrimary);flex-shrink:0;justify-content:center;align-items:center;display:flex}.select__empty{padding:var(--token-padding) var(--token-paddingMD);color:var(--token-colorTextTertiary);text-align:center;font-style:italic}.select--large .select__option{padding:var(--token-paddingSM) var(--token-paddingMD);font-size:var(--token-fontSize)}.select--large .select__option-icon{width:24px;height:24px}.select--large .select__option-description{font-size:var(--token-fontSizeSM)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.stat-card{gap:var(--token-paddingSM,.5rem);min-width:0;overflow:hidden}.stat-card__header{justify-content:space-between;align-items:center;gap:var(--token-paddingXS,.25rem);display:flex}.stat-card__label{font-size:var(--token-fontSizeSM,.75rem);color:var(--token-colorTextSecondary,#ffffff73);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.stat-card__icon{border-radius:var(--token-borderRadiusSM,.25rem);background:var(--token-colorFillSecondary,#ffffff0a);width:28px;height:28px;color:var(--token-colorTextSecondary,#fff9);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.stat-card__body{flex-direction:column;gap:4px;display:flex}.stat-card__value-row{flex-wrap:wrap;align-items:baseline;gap:.3em;display:inline-flex}.stat-card__value-line{justify-content:space-between;align-items:center;gap:var(--token-paddingSM,.5rem);min-width:0;display:flex}.stat-card__sparkline{flex-shrink:0;align-items:center;display:inline-flex}.stat-card__value{font-size:var(--token-
|
|
1
|
+
.stat-card{gap:var(--token-paddingSM,.5rem);min-width:0;overflow:hidden}.stat-card__header{justify-content:space-between;align-items:center;gap:var(--token-paddingXS,.25rem);display:flex}.stat-card__label{font-size:var(--token-fontSizeSM,.75rem);color:var(--token-colorTextSecondary,#ffffff73);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.stat-card__icon{border-radius:var(--token-borderRadiusSM,.25rem);background:var(--token-colorFillSecondary,#ffffff0a);width:28px;height:28px;color:var(--token-colorTextSecondary,#fff9);flex-shrink:0;justify-content:center;align-items:center;display:inline-flex}.stat-card__body{flex-direction:column;gap:4px;display:flex}.stat-card__value-row{flex-wrap:wrap;align-items:baseline;gap:.3em;display:inline-flex}.stat-card__value-line{justify-content:space-between;align-items:center;gap:var(--token-paddingSM,.5rem);min-width:0;display:flex}.stat-card__sparkline{flex-shrink:0;align-items:center;display:inline-flex}.stat-card__value{font-size:var(--token-fontSizeXXL,1.5rem);color:var(--token-colorText,#141414);font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:600;line-height:1.1;overflow:hidden}.stat-card__value-suffix{font-size:var(--token-fontSize,.875rem);color:var(--token-colorTextSecondary,#ffffff73);font-weight:400}.stat-card__trend{font-size:var(--token-fontSizeSM,.75rem);align-items:center;gap:4px;font-weight:500;display:inline-flex}.stat-card__trend--up{color:var(--token-colorSuccess,#52c41a)}.stat-card__trend--down{color:var(--token-colorError,#f5222d)}.stat-card__trend--flat{color:var(--token-colorTextSecondary,#ffffff73)}.stat-card__hint{font-size:var(--token-fontSizeSM,.75rem);color:var(--token-colorTextSecondary,#ffffff73);line-height:1.4}.stat-card.stat-card--prominent{padding:var(--token-paddingLG,1.5rem)}.stat-card--prominent{background:linear-gradient(135deg, var(--token-colorBgContainer,#fff) 0%, color-mix(in srgb, var(--token-colorPrimary,#8b5cf6) 4%, transparent) 100%)}.stat-card--prominent:hover{border-color:color-mix(in srgb, var(--token-colorPrimary,#8b5cf6) 30%, transparent)}.stat-card--prominent .stat-card__value{font-size:var(--token-fontSizeHeading1,2.25rem)}.stat-card--prominent .stat-card__icon{width:34px;height:34px}.stat-card.stat-card--compact{padding:var(--token-paddingSM,.5rem)}.stat-card--compact .stat-card__value{font-size:var(--token-fontSizeHeading3,1.5rem)}.stat-card--tone-success .stat-card__value{color:var(--token-colorSuccess,#52c41a)}.stat-card--tone-success .stat-card__icon{color:var(--token-colorSuccess,#52c41a);background:#52c41a1f}.stat-card--tone-warning .stat-card__value{color:var(--token-colorWarning,#faad14)}.stat-card--tone-warning .stat-card__icon{color:var(--token-colorWarning,#faad14);background:#faad1424}.stat-card--tone-danger .stat-card__value{color:var(--token-colorError,#f5222d)}.stat-card--tone-danger .stat-card__icon{color:var(--token-colorError,#f5222d);background:#f5222d1f}.stat-card--tone-info .stat-card__value{color:var(--token-colorPrimary,#8b5cf6)}.stat-card--tone-info .stat-card__icon{color:var(--token-colorPrimary,#8b5cf6);background:#6a35fc1f}.stat-card--tone-success{--corner-accent-color:var(--token-colorSuccess,#52c41a)}.stat-card--tone-warning{--corner-accent-color:var(--token-colorWarning,#faad14)}.stat-card--tone-danger{--corner-accent-color:var(--token-colorError,#f5222d)}.stat-card--tone-info{--corner-accent-color:var(--token-colorPrimary,#8b5cf6)}@media (prefers-reduced-motion:reduce){.stat-card__trend{transition:none}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tabs{flex-direction:column;width:100%;display:flex}.tabs__container{align-items:center;gap:var(--token-paddingXS,.25rem);margin:0 0 var(--token-paddingMD,1rem);display:flex;position:relative}.tabs__list{gap:var(--token-paddingXS,.25rem);padding:var(--token-paddingSM,.5rem) var(--token-paddingMD,1rem);background-color:var(--token-colorBgContainer,#fff);border:1px solid var(--token-colorBorderSecondary,#e5e7eb);border-radius:var(--token-borderRadiusXL,.75rem);z-index:10;box-shadow:var(--token-boxShadow,0 1px 2px 0 #00000008, 0 1px 6px -1px #00000005, 0 2px 4px 0 #00000005);scrollbar-width:none;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;flex:1;min-width:0;display:flex;position:sticky;top:0;overflow:auto hidden}.tabs__list::-webkit-scrollbar{display:none}.tabs--overflow-menu .tabs__list{gap:var(--token-paddingMD,1rem)}.tabs__tab{align-items:center;gap:var(--token-paddingXS,.25rem);padding:var(--token-paddingSM,.5rem) var(--token-paddingMD,1rem);font-size:var(--token-fontSize,.875rem);color:var(--token-colorTextSecondary,#595959);border-radius:var(--token-borderRadiusLG,.5rem);cursor:pointer;transition:color var(--token-motionDurationFast,.1s), background-color var(--token-motionDurationFast,.1s);white-space:nowrap;background:0 0;border:none;flex-shrink:0;font-weight:500;display:flex}.tabs__tab:hover{color:var(--token-colorText,#141414);background-color:var(--token-tabHoverBg,#f3f4f6)}.tabs__tab:focus{box-shadow:var(--token-tabFocusShadow,0 0 0 3px #8b5cf626)}.tabs__tab:focus:not(:focus-visible){outline:none}.tabs__tab:focus-visible{outline:var(--token-focusRingWidth,2px) var(--token-focusRingStyle,solid) var(--token-focusRingColor,var(--token-colorPrimary,#8b5cf6));outline-offset:var(--token-focusRingOffset,2px)}.tabs__tab--active{color:var(--token-colorPrimary,#8b5cf6);background-color:var(--token-tabActiveBg,#8b5cf61a)}.tabs__tab--active:hover{background-color:var(--token-tabActiveBg,#8b5cf61a)}.tabs__tab-label{display:inline-block}.tabs__tag-badge{font-size:var(--token-fontSizeXXS,.5rem);text-transform:uppercase;letter-spacing:.03em;pointer-events:none;padding:1px 4px;line-height:1}.tabs__group{align-items:center;gap:var(--token-paddingXS,.25rem);flex-shrink:0;display:flex}.tabs__group-label{font-size:var(--token-fontSizeSM,.75rem);color:var(--token-colorTextTertiary,#737373);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;padding:0 var(--token-paddingXS,.25rem);-webkit-user-select:none;user-select:none;font-weight:600}.tabs__separator{background-color:var(--token-colorBorderSecondary,#e5e7eb);width:1px;height:24px;margin:0 var(--token-paddingSM,.5rem);flex-shrink:0}.tabs__group-tabs{gap:var(--token-paddingXS,.25rem);align-items:center;display:flex}.tabs__scroll-arrow{background-color:var(--token-colorBgContainer,#fff);border:1px solid var(--token-colorBorderSecondary,#e5e7eb);border-radius:var(--token-borderRadiusLG,.5rem);width:32px;height:32px;color:var(--token-colorTextSecondary,#595959);cursor:pointer;transition:background-color var(--token-motionDurationFast,.1s), color var(--token-motionDurationFast,.1s), border-color var(--token-motionDurationFast,.1s);box-shadow:var(--token-boxShadow,0 1px 2px 0 #00000008, 0 1px 6px -1px #00000005, 0 2px 4px 0 #00000005);flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.tabs__scroll-arrow:hover{background-color:var(--token-colorFillSecondary,#f3f4f6);color:var(--token-colorText,#141414);border-color:var(--token-colorBorder,#d9d9d9)}.tabs__scroll-arrow:active{background-color:var(--token-colorFillTertiary,#f9fafb)}.tabs__scroll-arrow:focus{box-shadow:var(--token-tabFocusShadow,0 0 0 3px #8b5cf626)}.tabs__scroll-arrow:focus:not(:focus-visible){outline:none}.tabs__scroll-arrow:focus-visible{outline:var(--token-focusRingWidth,2px) var(--token-focusRingStyle,solid) var(--token-focusRingColor,var(--token-colorPrimary,#8b5cf6));outline-offset:var(--token-focusRingOffset,2px)}.tabs__scroll-arrow--left{margin-right:-4px}.tabs__scroll-arrow--right{margin-left:-4px}.tabs__panel,.tabs__panel:focus{outline:none}.tabs--mobile-dropdown{flex-direction:column;width:100%;display:flex}.tabs__dropdown-container{margin:0 0 var(--token-paddingMD,1rem);position:relative}.tabs__dropdown-trigger{width:100%;padding:var(--token-paddingSM,.5rem) var(--token-paddingMD,1rem);background-color:var(--token-colorBgContainer,#fff);border:1px solid var(--token-colorBorderSecondary,#e5e7eb);border-radius:var(--token-borderRadiusLG,.5rem);color:var(--token-colorText,#141414);font-size:var(--token-fontSize,.875rem);cursor:pointer;transition:background-color var(--token-motionDurationFast,.1s), border-color var(--token-motionDurationFast,.1s);box-shadow:var(--token-boxShadow,0 1px 2px 0 #00000008, 0 1px 6px -1px #00000005, 0 2px 4px 0 #00000005);justify-content:space-between;align-items:center;font-weight:500;display:flex}.tabs__dropdown-trigger:hover{background-color:var(--token-colorFillSecondary,#f3f4f6);border-color:var(--token-colorBorder,#d9d9d9)}.tabs__dropdown-trigger:focus{border-color:var(--token-colorPrimary,#8b5cf6);box-shadow:var(--token-tabFocusShadow,0 0 0 3px #8b5cf626)}.tabs__dropdown-trigger:focus:not(:focus-visible){outline:none}.tabs__dropdown-trigger:focus-visible{outline:var(--token-focusRingWidth,2px) var(--token-focusRingStyle,solid) var(--token-focusRingColor,var(--token-colorPrimary,#8b5cf6));outline-offset:var(--token-focusRingOffset,2px)}.tabs__dropdown-label{text-align:left;flex:1}.tabs__dropdown-arrow{transition:transform var(--token-motionDurationMid,.2s);flex-shrink:0}.tabs__dropdown-arrow--open{transform:rotate(180deg)}.tabs__dropdown-menu{z-index:100;background-color:var(--token-colorBgContainer,#fff);border:1px solid var(--token-colorBorderSecondary,#e5e7eb);border-radius:var(--token-borderRadiusLG,.5rem);box-shadow:var(--token-boxShadowSecondary,0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d);animation:tabs-dropdown-fade-in var(--token-motionDurationMid,.2s);position:absolute;top:calc(100% + 4px);left:0;right:0;overflow:hidden}@keyframes tabs-dropdown-fade-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.tabs__dropdown-item{width:100%;padding:var(--token-paddingSM,.5rem) var(--token-paddingMD,1rem);color:var(--token-colorText,#141414);font-size:var(--token-fontSize,.875rem);text-align:left;cursor:pointer;transition:background-color var(--token-motionDurationFast,.1s);background:0 0;border:none;font-weight:400;display:block}.tabs__dropdown-item:hover{background-color:var(--token-colorFillSecondary,#f3f4f6)}.tabs__dropdown-item:focus-visible{outline:var(--token-focusRingWidth,2px) var(--token-focusRingStyle,solid) var(--token-focusRingColor,var(--token-colorPrimary,#8b5cf6));outline-offset:-2px}.tabs__dropdown-item--active{color:var(--token-colorPrimary,#8b5cf6);background-color:var(--token-tabActiveBg,#8b5cf61a);font-weight:500}.tabs__dropdown-item--active:hover{background-color:var(--token-tabActiveBg,#8b5cf61a)}.tabs__overflow{flex-shrink:0;display:none;position:relative}.tabs__overflow-btn{background-color:var(--token-colorBgContainer,#fff);border:1px solid var(--token-colorBorderSecondary,#e5e7eb);border-radius:var(--token-borderRadiusLG,.5rem);width:36px;height:36px;color:var(--token-colorTextSecondary,#595959);cursor:pointer;transition:background-color var(--token-motionDurationFast,.1s), color var(--token-motionDurationFast,.1s);box-shadow:var(--token-boxShadow,0 1px 2px 0 #00000008, 0 1px 6px -1px #00000005, 0 2px 4px 0 #00000005);justify-content:center;align-items:center;padding:0;display:flex}.tabs__overflow-btn:hover{background-color:var(--token-colorFillSecondary,#f3f4f6);color:var(--token-colorText,#141414)}.tabs__overflow-btn:focus{box-shadow:var(--token-tabFocusShadow,0 0 0 3px #8b5cf626)}.tabs__overflow-btn:focus:not(:focus-visible){outline:none}.tabs__overflow-btn:focus-visible{outline:var(--token-focusRingWidth,2px) var(--token-focusRingStyle,solid) var(--token-focusRingColor,var(--token-colorPrimary,#8b5cf6));outline-offset:var(--token-focusRingOffset,2px)}.tabs__overflow-menu{background-color:var(--token-colorBgElevated,#fff);border:1px solid var(--token-colorBorderSecondary,#e5e7eb);border-radius:var(--token-borderRadiusLG,.5rem);min-width:200px;max-width:calc(100vw - 2rem);max-height:400px;box-shadow:var(--token-boxShadowSecondary,0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d);z-index:var(--token-zIndexPopover,1150);padding:var(--token-paddingXS,.25rem);position:absolute;top:calc(100% + 8px);right:0;overflow-y:auto}.tabs__overflow-group{flex-direction:column;display:flex}.tabs__overflow-group+.tabs__overflow-group{margin-top:var(--token-paddingSM,.5rem);padding-top:var(--token-paddingSM,.5rem);border-top:1px solid var(--token-colorBorderSecondary,#e5e7eb)}.tabs__overflow-group-label{font-size:var(--token-fontSizeSM,.75rem);color:var(--token-colorTextTertiary,#737373);text-transform:uppercase;letter-spacing:.05em;padding:var(--token-paddingXS,.25rem) var(--token-paddingSM,.5rem);margin-bottom:var(--token-paddingXXS,.125rem);font-weight:600}.tabs__overflow-item{justify-content:space-between;align-items:center;gap:var(--token-paddingSM,.5rem);width:100%;padding:var(--token-paddingSM,.5rem) var(--token-paddingMD,1rem);font-size:var(--token-fontSize,.875rem);color:var(--token-colorText,#141414);border-radius:var(--token-borderRadiusSM,.25rem);text-align:left;cursor:pointer;transition:background-color var(--token-motionDurationFast,.1s);background:0 0;border:none;display:flex}.tabs__overflow-item:hover{background-color:var(--token-colorFillSecondary,#f3f4f6)}.tabs__overflow-item:focus-visible{outline:var(--token-focusRingWidth,2px) var(--token-focusRingStyle,solid) var(--token-focusRingColor,var(--token-colorPrimary,#8b5cf6));outline-offset:-2px}.tabs__overflow-item--active{color:var(--token-colorPrimary,#8b5cf6);background-color:var(--token-tabActiveBg,#8b5cf61a);font-weight:600}.tabs__overflow-item--active:hover{background-color:var(--token-tabActiveBg,#8b5cf61a)}@media (min-width:480px) and (max-width:767px){.tabs:not(.tabs--overflow-menu) .tabs__list{padding:var(--token-paddingSM,.5rem)}.tabs:not(.tabs--overflow-menu) .tabs__tab{padding:var(--token-paddingXS,.25rem) var(--token-paddingSM,.5rem);font-size:var(--token-fontSize,.875rem)}.tabs:not(.tabs--overflow-menu) .tabs__scroll-arrow{width:28px;height:28px}}@media (max-width:479px){.tabs:not(.tabs--overflow-menu) .tabs__scroll-arrow{display:none}}@media (max-width:767px){.tabs--overflow-menu .tabs__overflow{display:block}.tabs--overflow-menu .tabs__list{padding:var(--token-paddingSM,.5rem);gap:0}.tabs--overflow-menu .tabs__group-label,.tabs--overflow-menu .tabs__separator{display:none}.tabs--overflow-menu .tabs__group,.tabs--overflow-menu .tabs__group-tabs{gap:0}.tabs--overflow-menu .tabs__tab{min-width:auto;padding:var(--token-paddingSM,.5rem) var(--token-padding,.75rem);font-size:var(--token-fontSize,.875rem);flex:1}.tabs--overflow-menu .tabs__scroll-arrow{display:none!important}}.tabs--variant-segmented .tabs__container{gap:0}.tabs--variant-segmented .tabs__list{background-color:var(--token-colorFillTertiary,#f9fafb);border-radius:var(--token-borderRadiusLG,.5rem);padding:var(--token-paddingXS,.25rem);gap:var(--token-paddingXS,.25rem);z-index:auto;box-shadow:none;border:1px solid #0000;position:static;top:auto;overflow-x:visible}.tabs--variant-segmented .tabs__tab{border-radius:var(--token-borderRadius,.375rem);color:var(--token-colorTextSecondary,#595959);background:0 0;border:1px solid #0000;font-weight:500}.tabs--variant-segmented .tabs__tab:hover:not(.tabs__tab--active){background-color:var(--token-colorFillSecondary,#f3f4f6);color:var(--token-colorText,#141414)}.tabs--variant-segmented .tabs__tab--active{color:var(--token-colorText,#141414);background-color:var(--token-colorBgContainer,#fff);box-shadow:var(--token-boxShadowTertiary,0 1px 3px #0000001a)}.tabs--variant-segmented .tabs__tab--active:hover{background-color:var(--token-colorBgContainer,#fff)}.tabs--variant-segmented.tabs--fill-container .tabs__tab{text-align:center;flex:1;justify-content:center}.tabs--variant-segmented .tabs__scroll-arrow{display:none}.tabs--variant-compact .tabs__container{gap:0;margin:0}.tabs--variant-compact .tabs__list{background-color:var(--token-colorFillQuaternary,#fafafa);border-radius:var(--token-borderRadiusSM,.25rem);z-index:auto;box-shadow:none;border:1px solid #0000;flex:none;gap:2px;min-width:0;padding:2px;display:inline-flex;position:static;top:auto;overflow-x:visible}.tabs--variant-compact .tabs__tab{padding:var(--token-paddingXS,.25rem) var(--token-paddingSM,.5rem);font-size:var(--token-fontSize,.875rem);border-radius:calc(var(--token-borderRadiusSM,.25rem) - 1px);color:var(--token-colorTextSecondary,#595959);background:0 0;border:1px solid #0000;min-width:72px;font-weight:500}.tabs--variant-compact .tabs__tab:hover:not(.tabs__tab--active){background-color:var(--token-colorFillSecondary,#f3f4f6);color:var(--token-colorText,#141414)}.tabs--variant-compact .tabs__tab--active{color:var(--token-colorText,#141414);background-color:var(--token-colorBgContainer,#fff);box-shadow:var(--token-boxShadowTertiary,0 1px 3px #0000001a)}.tabs--variant-compact .tabs__tab--active:hover{background-color:var(--token-colorBgContainer,#fff)}.tabs--variant-compact.tabs--fill-container .tabs__tab{text-align:center;flex:1;justify-content:center}.tabs--variant-compact .tabs__scroll-arrow{display:none}.tabs--variant-segmented .tabs__group,.tabs--variant-compact .tabs__group{gap:0}.tabs--variant-segmented .tabs__group-tabs,.tabs--variant-compact .tabs__group-tabs{gap:var(--token-paddingXS,.25rem)}@media (max-width:479px){.tabs--variant-segmented .tabs__list{overflow-x:auto}}@media (prefers-reduced-motion:reduce){.tabs__list{scroll-behavior:auto}.tabs__scroll-arrow,.tabs__tab,.tabs__dropdown-trigger,.tabs__dropdown-item,.tabs__dropdown-arrow,.tabs__overflow-btn,.tabs__overflow-item{transition:none}.tabs__dropdown-menu{animation:none}.tabs__scroll-arrow:active{transform:none}.tabs--variant-segmented .tabs__tab,.tabs--variant-compact .tabs__tab{transition:none}}
|
|
1
|
+
.tabs{flex-direction:column;width:100%;display:flex}.tabs__container{align-items:center;gap:var(--token-paddingXS,.25rem);margin:0 0 var(--token-paddingMD,1rem);display:flex;position:relative}.tabs__list{gap:var(--token-paddingXS,.25rem);padding:var(--token-paddingSM,.5rem) var(--token-paddingMD,1rem);background-color:var(--token-colorBgContainer,#fff);border:1px solid var(--token-colorBorderSecondary,#e5e7eb);border-radius:var(--token-borderRadiusXL,.75rem);z-index:10;box-shadow:var(--token-boxShadow,0 1px 2px 0 #00000008, 0 1px 6px -1px #00000005, 0 2px 4px 0 #00000005);scrollbar-width:none;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;flex:1;min-width:0;display:flex;position:sticky;top:0;overflow:auto hidden}.tabs__list::-webkit-scrollbar{display:none}.tabs--overflow-menu .tabs__list{gap:var(--token-paddingMD,1rem)}.tabs__tab{align-items:center;gap:var(--token-paddingXS,.25rem);padding:var(--token-paddingSM,.5rem) var(--token-paddingMD,1rem);font-size:var(--token-fontSize,.875rem);color:var(--token-colorTextSecondary,#595959);border-radius:var(--token-borderRadiusLG,.5rem);cursor:pointer;transition:color var(--token-motionDurationFast,.1s), background-color var(--token-motionDurationFast,.1s);white-space:nowrap;background:0 0;border:none;flex-shrink:0;font-weight:500;display:flex}.tabs__tab:hover{color:var(--token-colorText,#141414);background-color:var(--token-tabHoverBg,#f3f4f6)}.tabs__tab:focus{box-shadow:var(--token-tabFocusShadow,0 0 0 3px #8b5cf626)}.tabs__tab:focus:not(:focus-visible){outline:none}.tabs__tab:focus-visible{outline:var(--token-focusRingWidth,2px) var(--token-focusRingStyle,solid) var(--token-focusRingColor,var(--token-colorPrimary));outline-offset:var(--token-focusRingOffset,2px)}.tabs__tab--active{color:var(--token-colorPrimary,#8b5cf6);background-color:var(--token-tabActiveBg,#8b5cf61a)}.tabs__tab--active:hover{background-color:var(--token-tabActiveBg,#8b5cf61a)}.tabs__tab-label{display:inline-block}.tabs__tag-badge{font-size:var(--token-fontSizeXXS,.5rem);text-transform:uppercase;letter-spacing:.03em;pointer-events:none;padding:1px 4px;line-height:1}.tabs__group{align-items:center;gap:var(--token-paddingXS,.25rem);flex-shrink:0;display:flex}.tabs__group-label{font-size:var(--token-fontSizeSM,.75rem);color:var(--token-colorTextTertiary,#737373);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;padding:0 var(--token-paddingXS,.25rem);-webkit-user-select:none;user-select:none;font-weight:600}.tabs__separator{background-color:var(--token-colorBorderSecondary,#e5e7eb);width:1px;height:24px;margin:0 var(--token-paddingSM,.5rem);flex-shrink:0}.tabs__group-tabs{gap:var(--token-paddingXS,.25rem);align-items:center;display:flex}.tabs__scroll-arrow{background-color:var(--token-colorBgContainer,#fff);border:1px solid var(--token-colorBorderSecondary,#e5e7eb);border-radius:var(--token-borderRadiusLG,.5rem);width:32px;height:32px;color:var(--token-colorTextSecondary,#595959);cursor:pointer;transition:background-color var(--token-motionDurationFast,.1s), color var(--token-motionDurationFast,.1s), border-color var(--token-motionDurationFast,.1s);box-shadow:var(--token-boxShadow,0 1px 2px 0 #00000008, 0 1px 6px -1px #00000005, 0 2px 4px 0 #00000005);flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex}.tabs__scroll-arrow:hover{background-color:var(--token-colorFillSecondary,#f3f4f6);color:var(--token-colorText,#141414);border-color:var(--token-colorBorder,#d9d9d9)}.tabs__scroll-arrow:active{background-color:var(--token-colorFillTertiary,#f9fafb)}.tabs__scroll-arrow:focus{box-shadow:var(--token-tabFocusShadow,0 0 0 3px #8b5cf626)}.tabs__scroll-arrow:focus:not(:focus-visible){outline:none}.tabs__scroll-arrow:focus-visible{outline:var(--token-focusRingWidth,2px) var(--token-focusRingStyle,solid) var(--token-focusRingColor,var(--token-colorPrimary));outline-offset:var(--token-focusRingOffset,2px)}.tabs__scroll-arrow--left{margin-right:-4px}.tabs__scroll-arrow--right{margin-left:-4px}.tabs__panel,.tabs__panel:focus{outline:none}.tabs--mobile-dropdown{flex-direction:column;width:100%;display:flex}.tabs__dropdown-container{margin:0 0 var(--token-paddingMD,1rem);position:relative}.tabs__dropdown-trigger{width:100%;padding:var(--token-paddingSM,.5rem) var(--token-paddingMD,1rem);background-color:var(--token-colorBgContainer,#fff);border:1px solid var(--token-colorBorderSecondary,#e5e7eb);border-radius:var(--token-borderRadiusLG,.5rem);color:var(--token-colorText,#141414);font-size:var(--token-fontSize,.875rem);cursor:pointer;transition:background-color var(--token-motionDurationFast,.1s), border-color var(--token-motionDurationFast,.1s);box-shadow:var(--token-boxShadow,0 1px 2px 0 #00000008, 0 1px 6px -1px #00000005, 0 2px 4px 0 #00000005);justify-content:space-between;align-items:center;font-weight:500;display:flex}.tabs__dropdown-trigger:hover{background-color:var(--token-colorFillSecondary,#f3f4f6);border-color:var(--token-colorBorder,#d9d9d9)}.tabs__dropdown-trigger:focus{border-color:color-mix(in srgb, var(--token-colorPrimary) 70%, var(--token-colorText));box-shadow:var(--token-tabFocusShadow,0 0 0 3px #8b5cf626)}.tabs__dropdown-trigger:focus:not(:focus-visible){outline:none}.tabs__dropdown-trigger:focus-visible{outline:var(--token-focusRingWidth,2px) var(--token-focusRingStyle,solid) var(--token-focusRingColor,var(--token-colorPrimary));outline-offset:var(--token-focusRingOffset,2px)}.tabs__dropdown-label{text-align:left;flex:1}.tabs__dropdown-arrow{transition:transform var(--token-motionDurationMid,.2s);flex-shrink:0}.tabs__dropdown-arrow--open{transform:rotate(180deg)}.tabs__dropdown-menu{z-index:100;background-color:var(--token-colorBgContainer,#fff);border:1px solid var(--token-colorBorderSecondary,#e5e7eb);border-radius:var(--token-borderRadiusLG,.5rem);box-shadow:var(--token-boxShadowSecondary,0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d);animation:tabs-dropdown-fade-in var(--token-motionDurationMid,.2s);position:absolute;top:calc(100% + 4px);left:0;right:0;overflow:hidden}@keyframes tabs-dropdown-fade-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.tabs__dropdown-item{width:100%;padding:var(--token-paddingSM,.5rem) var(--token-paddingMD,1rem);color:var(--token-colorText,#141414);font-size:var(--token-fontSize,.875rem);text-align:left;cursor:pointer;transition:background-color var(--token-motionDurationFast,.1s);background:0 0;border:none;font-weight:400;display:block}.tabs__dropdown-item:hover{background-color:var(--token-colorFillSecondary,#f3f4f6)}.tabs__dropdown-item:focus-visible{outline:var(--token-focusRingWidth,2px) var(--token-focusRingStyle,solid) var(--token-focusRingColor,var(--token-colorPrimary));outline-offset:-2px}.tabs__dropdown-item--active{color:var(--token-colorPrimary,#8b5cf6);background-color:var(--token-tabActiveBg,#8b5cf61a);font-weight:500}.tabs__dropdown-item--active:hover{background-color:var(--token-tabActiveBg,#8b5cf61a)}.tabs__overflow{flex-shrink:0;display:none;position:relative}.tabs__overflow-btn{background-color:var(--token-colorBgContainer,#fff);border:1px solid var(--token-colorBorderSecondary,#e5e7eb);border-radius:var(--token-borderRadiusLG,.5rem);width:36px;height:36px;color:var(--token-colorTextSecondary,#595959);cursor:pointer;transition:background-color var(--token-motionDurationFast,.1s), color var(--token-motionDurationFast,.1s);box-shadow:var(--token-boxShadow,0 1px 2px 0 #00000008, 0 1px 6px -1px #00000005, 0 2px 4px 0 #00000005);justify-content:center;align-items:center;padding:0;display:flex}.tabs__overflow-btn:hover{background-color:var(--token-colorFillSecondary,#f3f4f6);color:var(--token-colorText,#141414)}.tabs__overflow-btn:focus{box-shadow:var(--token-tabFocusShadow,0 0 0 3px #8b5cf626)}.tabs__overflow-btn:focus:not(:focus-visible){outline:none}.tabs__overflow-btn:focus-visible{outline:var(--token-focusRingWidth,2px) var(--token-focusRingStyle,solid) var(--token-focusRingColor,var(--token-colorPrimary));outline-offset:var(--token-focusRingOffset,2px)}.tabs__overflow-menu{background-color:var(--token-colorBgElevated,#fff);border:1px solid var(--token-colorBorderSecondary,#e5e7eb);border-radius:var(--token-borderRadiusLG,.5rem);min-width:200px;max-width:calc(100vw - 2rem);max-height:400px;box-shadow:var(--token-boxShadowSecondary,0 6px 16px 0 #00000014, 0 3px 6px -4px #0000001f, 0 9px 28px 8px #0000000d);z-index:var(--token-zIndexPopover,1150);padding:var(--token-paddingXS,.25rem);position:absolute;top:calc(100% + 8px);right:0;overflow-y:auto}.tabs__overflow-group{flex-direction:column;display:flex}.tabs__overflow-group+.tabs__overflow-group{margin-top:var(--token-paddingSM,.5rem);padding-top:var(--token-paddingSM,.5rem);border-top:1px solid var(--token-colorBorderSecondary,#e5e7eb)}.tabs__overflow-group-label{font-size:var(--token-fontSizeSM,.75rem);color:var(--token-colorTextTertiary,#737373);text-transform:uppercase;letter-spacing:.05em;padding:var(--token-paddingXS,.25rem) var(--token-paddingSM,.5rem);margin-bottom:var(--token-paddingXXS,.125rem);font-weight:600}.tabs__overflow-item{justify-content:space-between;align-items:center;gap:var(--token-paddingSM,.5rem);width:100%;padding:var(--token-paddingSM,.5rem) var(--token-paddingMD,1rem);font-size:var(--token-fontSize,.875rem);color:var(--token-colorText,#141414);border-radius:var(--token-borderRadiusSM,.25rem);text-align:left;cursor:pointer;transition:background-color var(--token-motionDurationFast,.1s);background:0 0;border:none;display:flex}.tabs__overflow-item:hover{background-color:var(--token-colorFillSecondary,#f3f4f6)}.tabs__overflow-item:focus-visible{outline:var(--token-focusRingWidth,2px) var(--token-focusRingStyle,solid) var(--token-focusRingColor,var(--token-colorPrimary));outline-offset:-2px}.tabs__overflow-item--active{color:var(--token-colorPrimary,#8b5cf6);background-color:var(--token-tabActiveBg,#8b5cf61a);font-weight:600}.tabs__overflow-item--active:hover{background-color:var(--token-tabActiveBg,#8b5cf61a)}@media (min-width:480px) and (max-width:767px){.tabs:not(.tabs--overflow-menu) .tabs__list{padding:var(--token-paddingSM,.5rem)}.tabs:not(.tabs--overflow-menu) .tabs__tab{padding:var(--token-paddingXS,.25rem) var(--token-paddingSM,.5rem);font-size:var(--token-fontSize,.875rem)}.tabs:not(.tabs--overflow-menu) .tabs__scroll-arrow{width:28px;height:28px}}@media (max-width:479px){.tabs:not(.tabs--overflow-menu) .tabs__scroll-arrow{display:none}}@media (max-width:767px){.tabs--overflow-menu .tabs__overflow{display:block}.tabs--overflow-menu .tabs__list{padding:var(--token-paddingSM,.5rem);gap:0}.tabs--overflow-menu .tabs__group-label,.tabs--overflow-menu .tabs__separator{display:none}.tabs--overflow-menu .tabs__group,.tabs--overflow-menu .tabs__group-tabs{gap:0}.tabs--overflow-menu .tabs__tab{min-width:auto;padding:var(--token-paddingSM,.5rem) var(--token-padding,.75rem);font-size:var(--token-fontSize,.875rem);flex:1}.tabs--overflow-menu .tabs__scroll-arrow{display:none!important}}.tabs--variant-segmented .tabs__container{gap:0}.tabs--variant-segmented .tabs__list{background-color:var(--token-colorFillTertiary,#f9fafb);border-radius:var(--token-borderRadiusLG,.5rem);padding:var(--token-paddingXS,.25rem);gap:var(--token-paddingXS,.25rem);z-index:auto;box-shadow:none;border:1px solid #0000;position:static;top:auto;overflow-x:visible}.tabs--variant-segmented .tabs__tab{border-radius:var(--token-borderRadius,.375rem);color:var(--token-colorTextSecondary,#595959);background:0 0;border:1px solid #0000;font-weight:500}.tabs--variant-segmented .tabs__tab:hover:not(.tabs__tab--active){background-color:var(--token-colorFillSecondary,#f3f4f6);color:var(--token-colorText,#141414)}.tabs--variant-segmented .tabs__tab--active{color:var(--token-colorText,#141414);background-color:var(--token-colorBgContainer,#fff);box-shadow:var(--token-boxShadowTertiary,0 1px 3px #0000001a)}.tabs--variant-segmented .tabs__tab--active:hover{background-color:var(--token-colorBgContainer,#fff)}.tabs--variant-segmented.tabs--fill-container .tabs__tab{text-align:center;flex:1;justify-content:center}.tabs--variant-segmented .tabs__scroll-arrow{display:none}.tabs--variant-compact .tabs__container{gap:0;margin:0}.tabs--variant-compact .tabs__list{background-color:var(--token-colorFillQuaternary,#fafafa);border-radius:var(--token-borderRadiusSM,.25rem);z-index:auto;box-shadow:none;border:1px solid #0000;flex:none;gap:2px;min-width:0;padding:2px;display:inline-flex;position:static;top:auto;overflow-x:visible}.tabs--variant-compact .tabs__tab{padding:var(--token-paddingXS,.25rem) var(--token-paddingSM,.5rem);font-size:var(--token-fontSize,.875rem);border-radius:calc(var(--token-borderRadiusSM,.25rem) - 1px);color:var(--token-colorTextSecondary,#595959);background:0 0;border:1px solid #0000;min-width:72px;font-weight:500}.tabs--variant-compact .tabs__tab:hover:not(.tabs__tab--active){background-color:var(--token-colorFillSecondary,#f3f4f6);color:var(--token-colorText,#141414)}.tabs--variant-compact .tabs__tab--active{color:var(--token-colorText,#141414);background-color:var(--token-colorBgContainer,#fff);box-shadow:var(--token-boxShadowTertiary,0 1px 3px #0000001a)}.tabs--variant-compact .tabs__tab--active:hover{background-color:var(--token-colorBgContainer,#fff)}.tabs--variant-compact.tabs--fill-container .tabs__tab{text-align:center;flex:1;justify-content:center}.tabs--variant-compact .tabs__scroll-arrow{display:none}.tabs--variant-segmented .tabs__group,.tabs--variant-compact .tabs__group{gap:0}.tabs--variant-segmented .tabs__group-tabs,.tabs--variant-compact .tabs__group-tabs{gap:var(--token-paddingXS,.25rem)}@media (max-width:479px){.tabs--variant-segmented .tabs__list{overflow-x:auto}}@media (prefers-reduced-motion:reduce){.tabs__list{scroll-behavior:auto}.tabs__scroll-arrow,.tabs__tab,.tabs__dropdown-trigger,.tabs__dropdown-item,.tabs__dropdown-arrow,.tabs__overflow-btn,.tabs__overflow-item{transition:none}.tabs__dropdown-menu{animation:none}.tabs__scroll-arrow:active{transform:none}.tabs--variant-segmented .tabs__tab,.tabs--variant-compact .tabs__tab{transition:none}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tooltip__wrapper{display:inline-flex}.tooltip__wrapper:focus-visible{outline:2px solid var(--token-colorPrimary
|
|
1
|
+
.tooltip__wrapper{display:inline-flex}.tooltip__wrapper:focus-visible{outline:var(--token-focusRingWidth,2px) var(--token-focusRingStyle,solid) var(--token-focusRingColor,var(--token-colorPrimary));outline-offset:var(--token-focusRingOffset,2px);border-radius:var(--token-borderRadiusSM,.25rem)}.tooltip__wrapper:focus:not(:focus-visible){outline:none}.tooltip__content{z-index:var(--token-zIndexTooltip,1300);color:#f3f4f6;max-width:280px;font-size:var(--token-fontSize,.875rem);background-color:#1f2937;border-radius:6px;padding:.5rem .75rem;line-height:1.4;position:fixed;box-shadow:0 4px 12px #00000026}.tooltip__content p,.tooltip__content span{color:#f3f4f6}.tooltip__text{color:#f3f4f6;margin:0}.tooltip__content.param-tooltip__content{width:280px}
|
|
@@ -11,8 +11,16 @@ export interface DataTableColumn<T> {
|
|
|
11
11
|
* functions are encouraged so memoization stays effective.
|
|
12
12
|
*/
|
|
13
13
|
render: (row: T, index: number) => ReactNode;
|
|
14
|
-
/** Optional minimum column width in pixels.
|
|
14
|
+
/** Optional minimum column width in pixels. */
|
|
15
15
|
minWidth?: number;
|
|
16
|
+
/**
|
|
17
|
+
* Optional maximum column width in pixels. Values above this limit are
|
|
18
|
+
* clamped for pointer and keyboard resizing. Resizable columns default to
|
|
19
|
+
* 1200 pixels so every separator exposes a finite ARIA maximum. A
|
|
20
|
+
* `noResize` column keeps its existing unbounded width unless it explicitly
|
|
21
|
+
* supplies this property.
|
|
22
|
+
*/
|
|
23
|
+
maxWidth?: number;
|
|
16
24
|
/** Optional initial width in pixels (only honored on the first paint). */
|
|
17
25
|
initialWidth?: number;
|
|
18
26
|
/** When `true`, the column cannot be resized. Defaults to `false`. */
|
|
@@ -88,15 +96,38 @@ export interface DataTableProps<T> {
|
|
|
88
96
|
/** When `true`, the loading slot replaces the table body. */
|
|
89
97
|
loading?: boolean;
|
|
90
98
|
/**
|
|
91
|
-
*
|
|
92
|
-
*
|
|
93
|
-
*
|
|
99
|
+
* Column widths and visibility, controlled by the caller.
|
|
100
|
+
*
|
|
101
|
+
* This component used to take a `persistKey` and write to `localStorage`
|
|
102
|
+
* itself. Storage is a policy decision that belongs to the consumer: where
|
|
103
|
+
* it goes, under which key, whether it is per user or per workspace, and
|
|
104
|
+
* whether it exists at all in a host that has no `localStorage`. A
|
|
105
|
+
* rendering component that answers those questions on its own cannot be
|
|
106
|
+
* reused by a consumer that answers them differently.
|
|
94
107
|
*/
|
|
95
|
-
|
|
108
|
+
columnState?: DataTablePersistedState;
|
|
109
|
+
/**
|
|
110
|
+
* Called whenever the user resizes a column or toggles its visibility.
|
|
111
|
+
* Pair it with `columnState` to persist wherever the consumer keeps
|
|
112
|
+
* preferences; omit both to get a table that forgets on unmount.
|
|
113
|
+
*/
|
|
114
|
+
onColumnStateChange?: (state: DataTablePersistedState) => void;
|
|
96
115
|
/** Extra class for the table's wrapping element. */
|
|
97
116
|
className?: string;
|
|
98
117
|
/** ARIA label for the table. Defaults to "Data table". */
|
|
99
118
|
ariaLabel?: string;
|
|
119
|
+
/**
|
|
120
|
+
* Produces the accessible name for a resizable column's separator. The
|
|
121
|
+
* default is `Resize <column id> column`; pass a product's translated label
|
|
122
|
+
* when column ids are not suitable for people to hear.
|
|
123
|
+
*/
|
|
124
|
+
resizeHandleLabel?: (column: DataTableColumn<T>) => string;
|
|
125
|
+
/**
|
|
126
|
+
* Produces the human-readable current width announced by a resize
|
|
127
|
+
* separator. The default is `<width> pixels`; pass a translated formatter
|
|
128
|
+
* when the host localizes measurements.
|
|
129
|
+
*/
|
|
130
|
+
resizeValueText?: (width: number, column: DataTableColumn<T>) => string;
|
|
100
131
|
/** Test ID for testing harnesses. */
|
|
101
132
|
testId?: string;
|
|
102
133
|
/**
|
|
@@ -104,6 +135,19 @@ export interface DataTableProps<T> {
|
|
|
104
135
|
* with a clickable affordance (cursor: pointer + keyboard binding).
|
|
105
136
|
*/
|
|
106
137
|
onRowClick?: (row: T) => void;
|
|
138
|
+
/**
|
|
139
|
+
* Narrows `onRowClick` to the rows that can actually act on it, for a table
|
|
140
|
+
* that mixes actionable and informational rows. A row this returns `false`
|
|
141
|
+
* for gets no pointer affordance, no tab stop, and no keyboard binding, so it
|
|
142
|
+
* is not announced as a button it cannot be.
|
|
143
|
+
*/
|
|
144
|
+
isRowClickable?: (row: T, index: number) => boolean;
|
|
145
|
+
/**
|
|
146
|
+
* Extra class for one row, for flagging a specific row without forking the
|
|
147
|
+
* table: a transient deep-link highlight, a stale entry, a row being removed.
|
|
148
|
+
* A falsy return adds nothing.
|
|
149
|
+
*/
|
|
150
|
+
rowClassName?: (row: T, index: number) => string | undefined | false | null;
|
|
107
151
|
/**
|
|
108
152
|
* Controlled — the column currently being sorted. Pass `undefined` to
|
|
109
153
|
* indicate no active sort. When this prop is present, the component
|
|
@@ -128,6 +172,6 @@ export interface DataTableProps<T> {
|
|
|
128
172
|
*/
|
|
129
173
|
onSortChange?: (columnId: string | undefined, direction: SortDirection | undefined) => void;
|
|
130
174
|
}
|
|
131
|
-
declare function DataTableInner<T>({ columns, rows, getRowKey, emptyState, loadingState, loading,
|
|
175
|
+
declare function DataTableInner<T>({ columns, rows, getRowKey, emptyState, loadingState, loading, columnState, onColumnStateChange, className, ariaLabel, resizeHandleLabel, resizeValueText, testId, onRowClick, isRowClickable, rowClassName, sortColumnId: controlledSortColumnId, sortDirection: controlledSortDirection, onSortChange, }: DataTableProps<T>): import("react").JSX.Element;
|
|
132
176
|
export declare const DataTable: typeof DataTableInner;
|
|
133
177
|
export default DataTable;
|