@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/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,6 +1,6 @@
1
1
  {
2
2
  "name": "@dinofront/design_system",
3
- "version": "1.9.0",
3
+ "version": "1.10.0",
4
4
  "description": "Enterprise React component library and design system built on Tailwind CSS.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -1,2 +0,0 @@
1
- import { MultiSelectProps } from './MultiSelect.types';
2
- export declare const MultiSelect: import('react').ForwardRefExoticComponent<MultiSelectProps & import('react').RefAttributes<HTMLInputElement>>;
@@ -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,2 +0,0 @@
1
- export { MultiSelect } from './MultiSelect';
2
- export type { MultiSelectOption, MultiSelectProps, MultiSelectSize } from './MultiSelect.types';
@@ -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
- }
@@ -1,2 +0,0 @@
1
- export { Table, THead, TBody, TR, TH, TD, DataTable } from './Table';
2
- export type { TableProps, THeadProps, TBodyProps, TRProps, THProps, TDProps, TableAlign, TableColumn, DataTableProps, TableDensity, SortDir, } from './Table.types';