@dinofront/design_system 1.9.0 → 1.10.0
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/dist/index.d.ts +0 -2
- package/dist/index.js +1173 -1499
- package/dist/index.js.map +1 -1
- package/dist/styles.css +0 -89
- package/package.json +1 -1
- package/dist/components/MultiSelect/MultiSelect.d.ts +0 -2
- package/dist/components/MultiSelect/MultiSelect.types.d.ts +0 -62
- package/dist/components/MultiSelect/index.d.ts +0 -2
- package/dist/components/Table/Table.d.ts +0 -8
- package/dist/components/Table/Table.types.d.ts +0 -55
- package/dist/components/Table/index.d.ts +0 -2
package/dist/styles.css
CHANGED
|
@@ -456,9 +456,6 @@
|
|
|
456
456
|
.z-10 {
|
|
457
457
|
z-index: 10;
|
|
458
458
|
}
|
|
459
|
-
.z-20 {
|
|
460
|
-
z-index: 20;
|
|
461
|
-
}
|
|
462
459
|
.z-50 {
|
|
463
460
|
z-index: 50;
|
|
464
461
|
}
|
|
@@ -570,12 +567,6 @@
|
|
|
570
567
|
.ml-0 {
|
|
571
568
|
margin-left: 0px;
|
|
572
569
|
}
|
|
573
|
-
.ml-0\.5 {
|
|
574
|
-
margin-left: calc(var(--spacing) * 0.5);
|
|
575
|
-
}
|
|
576
|
-
.ml-1 {
|
|
577
|
-
margin-left: var(--spacing);
|
|
578
|
-
}
|
|
579
570
|
.ml-2 {
|
|
580
571
|
margin-left: calc(var(--spacing) * 2);
|
|
581
572
|
}
|
|
@@ -735,9 +726,6 @@
|
|
|
735
726
|
.h-40 {
|
|
736
727
|
height: calc(var(--spacing) * 40);
|
|
737
728
|
}
|
|
738
|
-
.h-48 {
|
|
739
|
-
height: calc(var(--spacing) * 48);
|
|
740
|
-
}
|
|
741
729
|
.h-\[1em\] {
|
|
742
730
|
height: 1em;
|
|
743
731
|
}
|
|
@@ -780,9 +768,6 @@
|
|
|
780
768
|
.max-h-60 {
|
|
781
769
|
max-height: calc(var(--spacing) * 60);
|
|
782
770
|
}
|
|
783
|
-
.max-h-80 {
|
|
784
|
-
max-height: calc(var(--spacing) * 80);
|
|
785
|
-
}
|
|
786
771
|
.max-h-\[90vh\] {
|
|
787
772
|
max-height: 90vh;
|
|
788
773
|
}
|
|
@@ -990,15 +975,6 @@
|
|
|
990
975
|
.min-w-\[18px\] {
|
|
991
976
|
min-width: 18px;
|
|
992
977
|
}
|
|
993
|
-
.min-w-\[100px\] {
|
|
994
|
-
min-width: 100px;
|
|
995
|
-
}
|
|
996
|
-
.min-w-\[120px\] {
|
|
997
|
-
min-width: 120px;
|
|
998
|
-
}
|
|
999
|
-
.min-w-\[140px\] {
|
|
1000
|
-
min-width: 140px;
|
|
1001
|
-
}
|
|
1002
978
|
.min-w-\[200px\] {
|
|
1003
979
|
min-width: 200px;
|
|
1004
980
|
}
|
|
@@ -1107,9 +1083,6 @@
|
|
|
1107
1083
|
.cursor-text {
|
|
1108
1084
|
cursor: text;
|
|
1109
1085
|
}
|
|
1110
|
-
.cursor-wait {
|
|
1111
|
-
cursor: wait;
|
|
1112
|
-
}
|
|
1113
1086
|
.touch-none {
|
|
1114
1087
|
touch-action: none;
|
|
1115
1088
|
}
|
|
@@ -1746,15 +1719,9 @@
|
|
|
1746
1719
|
.pr-1 {
|
|
1747
1720
|
padding-right: var(--spacing);
|
|
1748
1721
|
}
|
|
1749
|
-
.pr-1\.5 {
|
|
1750
|
-
padding-right: calc(var(--spacing) * 1.5);
|
|
1751
|
-
}
|
|
1752
1722
|
.pr-2 {
|
|
1753
1723
|
padding-right: calc(var(--spacing) * 2);
|
|
1754
1724
|
}
|
|
1755
|
-
.pr-2\.5 {
|
|
1756
|
-
padding-right: calc(var(--spacing) * 2.5);
|
|
1757
|
-
}
|
|
1758
1725
|
.pr-3 {
|
|
1759
1726
|
padding-right: calc(var(--spacing) * 3);
|
|
1760
1727
|
}
|
|
@@ -1776,12 +1743,6 @@
|
|
|
1776
1743
|
.pb-6 {
|
|
1777
1744
|
padding-bottom: calc(var(--spacing) * 6);
|
|
1778
1745
|
}
|
|
1779
|
-
.pl-0\.5 {
|
|
1780
|
-
padding-left: calc(var(--spacing) * 0.5);
|
|
1781
|
-
}
|
|
1782
|
-
.pl-1 {
|
|
1783
|
-
padding-left: var(--spacing);
|
|
1784
|
-
}
|
|
1785
1746
|
.pl-2 {
|
|
1786
1747
|
padding-left: calc(var(--spacing) * 2);
|
|
1787
1748
|
}
|
|
@@ -1809,9 +1770,6 @@
|
|
|
1809
1770
|
.text-right {
|
|
1810
1771
|
text-align: right;
|
|
1811
1772
|
}
|
|
1812
|
-
.align-middle {
|
|
1813
|
-
vertical-align: middle;
|
|
1814
|
-
}
|
|
1815
1773
|
.font-mono {
|
|
1816
1774
|
font-family: var(--font-mono);
|
|
1817
1775
|
}
|
|
@@ -2099,9 +2057,6 @@
|
|
|
2099
2057
|
.opacity-60 {
|
|
2100
2058
|
opacity: 60%;
|
|
2101
2059
|
}
|
|
2102
|
-
.opacity-70 {
|
|
2103
|
-
opacity: 70%;
|
|
2104
|
-
}
|
|
2105
2060
|
.opacity-100 {
|
|
2106
2061
|
opacity: 100%;
|
|
2107
2062
|
}
|
|
@@ -2443,9 +2398,6 @@
|
|
|
2443
2398
|
.focus-within\:border-brand-500:focus-within {
|
|
2444
2399
|
border-color: var(--color-brand-500);
|
|
2445
2400
|
}
|
|
2446
|
-
.focus-within\:border-fg-tertiary:focus-within {
|
|
2447
|
-
border-color: var(--color-fg-tertiary);
|
|
2448
|
-
}
|
|
2449
2401
|
.focus-within\:border-red-600:focus-within {
|
|
2450
2402
|
border-color: var(--color-red-600);
|
|
2451
2403
|
}
|
|
@@ -2463,10 +2415,6 @@
|
|
|
2463
2415
|
--tw-ring-offset-width: 0px;
|
|
2464
2416
|
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
2465
2417
|
}
|
|
2466
|
-
.focus-within\:ring-offset-1:focus-within {
|
|
2467
|
-
--tw-ring-offset-width: 1px;
|
|
2468
|
-
--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
|
|
2469
|
-
}
|
|
2470
2418
|
@media (hover: hover) {
|
|
2471
2419
|
.hover\:border-border-strong:hover {
|
|
2472
2420
|
border-color: var(--color-border-strong);
|
|
@@ -2792,21 +2740,6 @@
|
|
|
2792
2740
|
.peer-checked\:\[\&_svg\]\:opacity-100:is(:where(.peer):checked ~ *) svg {
|
|
2793
2741
|
opacity: 100%;
|
|
2794
2742
|
}
|
|
2795
|
-
.\[\&_td\]\:py-2 td {
|
|
2796
|
-
padding-block: calc(var(--spacing) * 2);
|
|
2797
|
-
}
|
|
2798
|
-
.\[\&_td\]\:py-3 td {
|
|
2799
|
-
padding-block: calc(var(--spacing) * 3);
|
|
2800
|
-
}
|
|
2801
|
-
.\[\&_th\]\:py-2 th {
|
|
2802
|
-
padding-block: calc(var(--spacing) * 2);
|
|
2803
|
-
}
|
|
2804
|
-
.\[\&_th\]\:py-3 th {
|
|
2805
|
-
padding-block: calc(var(--spacing) * 3);
|
|
2806
|
-
}
|
|
2807
|
-
.\[\&_thead\]\:bg-brand-20 thead {
|
|
2808
|
-
background-color: var(--color-brand-20);
|
|
2809
|
-
}
|
|
2810
2743
|
.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
|
|
2811
2744
|
appearance: none;
|
|
2812
2745
|
}
|
|
@@ -2870,28 +2803,6 @@
|
|
|
2870
2803
|
.peer-checked\:\[\&\>span\]\:opacity-100:is(:where(.peer):checked ~ *) > span {
|
|
2871
2804
|
opacity: 100%;
|
|
2872
2805
|
}
|
|
2873
|
-
.\[\&\>tr\]\:border-t > tr {
|
|
2874
|
-
border-top-style: var(--tw-border-style);
|
|
2875
|
-
border-top-width: 1px;
|
|
2876
|
-
}
|
|
2877
|
-
.\[\&\>tr\]\:border-border-default > tr {
|
|
2878
|
-
border-color: var(--color-border-default);
|
|
2879
|
-
}
|
|
2880
|
-
[data-hoverable] .\[\[data-hoverable\]_\&\>tr\:hover\]\:bg-bg-container > tr:hover {
|
|
2881
|
-
background-color: var(--color-bg-container);
|
|
2882
|
-
}
|
|
2883
|
-
[data-sticky] .\[\[data-sticky\]_\&\]\:sticky {
|
|
2884
|
-
position: sticky;
|
|
2885
|
-
}
|
|
2886
|
-
[data-sticky] .\[\[data-sticky\]_\&\]\:top-0 {
|
|
2887
|
-
top: 0px;
|
|
2888
|
-
}
|
|
2889
|
-
[data-sticky] .\[\[data-sticky\]_\&\]\:z-10 {
|
|
2890
|
-
z-index: 10;
|
|
2891
|
-
}
|
|
2892
|
-
[data-striped] .\[\[data-striped\]_\&\>tr\:nth-child\(even\)\]\:bg-bg-container > tr:nth-child(even) {
|
|
2893
|
-
background-color: var(--color-bg-container);
|
|
2894
|
-
}
|
|
2895
2806
|
}
|
|
2896
2807
|
.dark {
|
|
2897
2808
|
--color-bg-default: #0b1120;
|
package/package.json
CHANGED
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import { BaseProps, OptionValue } from '../../types';
|
|
3
|
-
export type MultiSelectSize = 'sm' | 'md' | 'lg';
|
|
4
|
-
export interface MultiSelectOption {
|
|
5
|
-
value: OptionValue;
|
|
6
|
-
label: ReactNode;
|
|
7
|
-
/** Text used for search matching when `label` isn't a plain string. Options where neither this nor a string `label` is available are excluded from `searchable` matching. */
|
|
8
|
-
searchText?: string;
|
|
9
|
-
/** Optional second line under the label in the dropdown. */
|
|
10
|
-
description?: string;
|
|
11
|
-
/** Group heading this option belongs under. Options sharing a group MUST be
|
|
12
|
-
* contiguous in the (filtered) list — the heading is emitted whenever this
|
|
13
|
-
* value changes between consecutive visible options, so a non-contiguous
|
|
14
|
-
* group renders its heading more than once. */
|
|
15
|
-
group?: string;
|
|
16
|
-
/** Optional avatar image — shown on the chip and the dropdown row. */
|
|
17
|
-
avatarSrc?: string;
|
|
18
|
-
/** Non-selectable option (shown dimmed in the list). */
|
|
19
|
-
disabled?: boolean;
|
|
20
|
-
/** Small tag rendered on the chip, e.g. "You". */
|
|
21
|
-
badge?: ReactNode;
|
|
22
|
-
}
|
|
23
|
-
export interface MultiSelectProps extends BaseProps {
|
|
24
|
-
options: MultiSelectOption[];
|
|
25
|
-
/** Selected option values (controlled). */
|
|
26
|
-
value: OptionValue[];
|
|
27
|
-
onChange: (values: OptionValue[]) => void;
|
|
28
|
-
/** Called with the option that was just added, alongside `onChange` (never instead of it). */
|
|
29
|
-
onAdd?: (option: MultiSelectOption) => void;
|
|
30
|
-
/** Called with the value that was just removed, alongside `onChange` (never instead of it). */
|
|
31
|
-
onRemove?: (value: OptionValue) => void;
|
|
32
|
-
size?: MultiSelectSize;
|
|
33
|
-
placeholder?: string;
|
|
34
|
-
/** Placeholder once at least one chip exists. Defaults to "Add another…". */
|
|
35
|
-
addMorePlaceholder?: string;
|
|
36
|
-
disabled?: boolean;
|
|
37
|
-
error?: boolean;
|
|
38
|
-
label?: ReactNode;
|
|
39
|
-
/** Content rendered on the label row, right of the label text and required marker — e.g. an info tooltip trigger. Rendered as a sibling of the `<label>`, not a child, so an interactive addon never steals focus into the field. */
|
|
40
|
-
labelAddons?: ReactNode;
|
|
41
|
-
helperText?: ReactNode;
|
|
42
|
-
errorText?: ReactNode;
|
|
43
|
-
required?: boolean;
|
|
44
|
-
/** Values whose chips can't be removed. */
|
|
45
|
-
lockedValues?: OptionValue[];
|
|
46
|
-
/** Cap on how many can be selected (default: unlimited). */
|
|
47
|
-
max?: number;
|
|
48
|
-
/** Renders an Avatar on every chip and dropdown row, falling back to initials derived from the option's `label` when it has no `avatarSrc`. Default `false` — avatars still render for options that already set `avatarSrc` regardless. */
|
|
49
|
-
showAvatars?: boolean;
|
|
50
|
-
/** Set false for a click-to-open picker with no text filter. */
|
|
51
|
-
searchable?: boolean;
|
|
52
|
-
/** Dropdown header shown when the query is empty. */
|
|
53
|
-
suggestionsLabel?: string;
|
|
54
|
-
/** Message shown when nothing matches. */
|
|
55
|
-
emptyText?: string;
|
|
56
|
-
id?: string;
|
|
57
|
-
className?: string;
|
|
58
|
-
wrapperClassName?: string;
|
|
59
|
-
/** Shows a spinner in the trailing edge of the chip row and blocks opening the dropdown. Does not set the native `disabled` attribute. */
|
|
60
|
-
loading?: boolean;
|
|
61
|
-
language?: string;
|
|
62
|
-
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { TableProps, THeadProps, TBodyProps, TRProps, THProps, TDProps, DataTableProps } from './Table.types';
|
|
2
|
-
export declare const Table: import('react').ForwardRefExoticComponent<TableProps & import('react').RefAttributes<HTMLTableElement>>;
|
|
3
|
-
export declare const THead: import('react').ForwardRefExoticComponent<THeadProps & import('react').RefAttributes<HTMLTableSectionElement>>;
|
|
4
|
-
export declare const TBody: import('react').ForwardRefExoticComponent<TBodyProps & import('react').RefAttributes<HTMLTableSectionElement>>;
|
|
5
|
-
export declare const TR: import('react').ForwardRefExoticComponent<TRProps & import('react').RefAttributes<HTMLTableRowElement>>;
|
|
6
|
-
export declare const TH: import('react').ForwardRefExoticComponent<THProps & import('react').RefAttributes<HTMLTableCellElement>>;
|
|
7
|
-
export declare const TD: import('react').ForwardRefExoticComponent<TDProps & import('react').RefAttributes<HTMLTableCellElement>>;
|
|
8
|
-
export declare function DataTable<T>({ columns, rows, rowKey, empty, density, striped, hoverable, sortKey, sortDir, onSortChange, onRowClick, className, dataTestId, }: DataTableProps<T>): import("react").JSX.Element;
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import { HTMLAttributes, ReactNode, ThHTMLAttributes, TdHTMLAttributes } from 'react';
|
|
2
|
-
import { BaseProps } from '../../types';
|
|
3
|
-
export type TableDensity = 'comfortable' | 'compact';
|
|
4
|
-
export type SortDir = 'asc' | 'desc' | null;
|
|
5
|
-
/** Horizontal alignment shared by `TH`, `TD`, and `TableColumn`. */
|
|
6
|
-
export type TableAlign = 'left' | 'center' | 'right';
|
|
7
|
-
export interface TableProps extends HTMLAttributes<HTMLTableElement>, BaseProps {
|
|
8
|
-
density?: TableDensity;
|
|
9
|
-
striped?: boolean;
|
|
10
|
-
hoverable?: boolean;
|
|
11
|
-
stickyHeader?: boolean;
|
|
12
|
-
/**
|
|
13
|
-
* Applied to the outer scroll container (border/background/rounding) —
|
|
14
|
-
* `className` is applied to the `<table>` element itself, matching where
|
|
15
|
-
* `ref` and the rest of `HTMLAttributes<HTMLTableElement>` land.
|
|
16
|
-
*/
|
|
17
|
-
wrapperClassName?: string;
|
|
18
|
-
}
|
|
19
|
-
export interface THeadProps extends HTMLAttributes<HTMLTableSectionElement>, BaseProps {
|
|
20
|
-
}
|
|
21
|
-
export interface TBodyProps extends HTMLAttributes<HTMLTableSectionElement>, BaseProps {
|
|
22
|
-
}
|
|
23
|
-
export interface TRProps extends HTMLAttributes<HTMLTableRowElement>, BaseProps {
|
|
24
|
-
}
|
|
25
|
-
export interface THProps extends ThHTMLAttributes<HTMLTableCellElement>, BaseProps {
|
|
26
|
-
sortable?: boolean;
|
|
27
|
-
sortDir?: SortDir;
|
|
28
|
-
onSortChange?: (dir: SortDir) => void;
|
|
29
|
-
align?: TableAlign;
|
|
30
|
-
}
|
|
31
|
-
export interface TDProps extends TdHTMLAttributes<HTMLTableCellElement>, BaseProps {
|
|
32
|
-
align?: TableAlign;
|
|
33
|
-
}
|
|
34
|
-
export interface TableColumn<T> {
|
|
35
|
-
key: string;
|
|
36
|
-
header: ReactNode;
|
|
37
|
-
render?: (row: T) => ReactNode;
|
|
38
|
-
accessor?: (row: T) => ReactNode;
|
|
39
|
-
align?: TableAlign;
|
|
40
|
-
sortable?: boolean;
|
|
41
|
-
}
|
|
42
|
-
export interface DataTableProps<T> extends BaseProps {
|
|
43
|
-
columns: TableColumn<T>[];
|
|
44
|
-
rows: T[];
|
|
45
|
-
rowKey: (row: T, i: number) => string;
|
|
46
|
-
empty?: ReactNode;
|
|
47
|
-
density?: TableDensity;
|
|
48
|
-
striped?: boolean;
|
|
49
|
-
hoverable?: boolean;
|
|
50
|
-
sortKey?: string;
|
|
51
|
-
sortDir?: SortDir;
|
|
52
|
-
onSortChange?: (key: string, dir: SortDir) => void;
|
|
53
|
-
onRowClick?: (row: T) => void;
|
|
54
|
-
className?: string;
|
|
55
|
-
}
|