@clickhouse/click-ui 0.0.45 → 0.0.47

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.
@@ -11,5 +11,5 @@ export interface ConfirmationDialogProps {
11
11
  onPrimaryActionClick?: (() => void) | (() => Promise<void>);
12
12
  children?: ReactNode;
13
13
  }
14
- declare const ConfirmationDialog: ({ open, onOpenChange, title, message, primaryActionType, primaryActionLabel, secondaryActionLabel, onPrimaryActionClick, children, }: ConfirmationDialogProps) => ReactElement;
15
- export default ConfirmationDialog;
14
+ export declare const ConfirmationDialog: ({ open, onOpenChange, title, message, primaryActionType, primaryActionLabel, secondaryActionLabel, onPrimaryActionClick, children, }: ConfirmationDialogProps) => ReactElement;
15
+ export {};
@@ -12,7 +12,7 @@ export declare const Dialog: {
12
12
  displayName: string;
13
13
  };
14
14
  Content: {
15
- ({ title, children, showClose, onClose, forceMount, container, showOverlay, }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
15
+ ({ title, children, showClose, onClose, forceMount, container, showOverlay, ...props }: DialogContentProps): import("react/jsx-runtime").JSX.Element;
16
16
  displayName: string;
17
17
  };
18
18
  };
@@ -1,17 +1,45 @@
1
1
  import { HorizontalDirection, IconName } from '../../components';
2
2
  import { HTMLAttributes, ReactNode } from "react";
3
- interface TableHeaderProps extends HTMLAttributes<HTMLTableCellElement> {
3
+ type SortDir = "asc" | "desc";
4
+ type SortFn = (sortDir: SortDir, header: TableHeaderType, index: number) => void;
5
+ export interface TableHeaderType extends HTMLAttributes<HTMLTableCellElement> {
4
6
  icon?: IconName;
5
7
  iconDir?: HorizontalDirection;
6
8
  label: ReactNode;
9
+ isSortable?: boolean;
10
+ sortDir?: SortDir;
11
+ sortPosition?: HorizontalDirection;
7
12
  }
8
13
  interface TableCellType extends HTMLAttributes<HTMLTableCellElement> {
9
14
  label: ReactNode;
10
15
  }
11
- type TableRowType = Array<TableCellType>;
12
- interface TableProps extends HTMLAttributes<HTMLTableElement> {
13
- headers: Array<TableHeaderProps>;
16
+ export interface TableRowType extends Omit<HTMLAttributes<HTMLTableRowElement>, "onSelect" | "id"> {
17
+ id: string | number;
18
+ items: Array<TableCellType>;
19
+ isDisabled?: boolean;
20
+ isDeleted?: boolean;
21
+ }
22
+ interface CommonTableProps extends Omit<HTMLAttributes<HTMLTableElement>, "children" | "onSelect"> {
23
+ headers: Array<TableHeaderType>;
14
24
  rows: Array<TableRowType>;
25
+ onDelete?: (item: TableRowType, index: number) => void;
26
+ onEdit?: (item: TableRowType, index: number) => void;
27
+ onSort?: SortFn;
28
+ }
29
+ type SelectReturnValue = {
30
+ index: number;
31
+ item: TableRowType;
32
+ };
33
+ interface SelectionType {
34
+ isSelectable?: boolean;
35
+ selectedIds?: Array<number | string>;
36
+ onSelect?: (selectedValues: Array<SelectReturnValue>) => void;
37
+ }
38
+ interface NoSelectionType {
39
+ isSelectable?: never;
40
+ selectedIds?: never;
41
+ onSelect?: never;
15
42
  }
43
+ export type TableProps = CommonTableProps & (SelectionType | NoSelectionType);
16
44
  declare const Table: import("react").ForwardRefExoticComponent<TableProps & import("react").RefAttributes<HTMLTableElement>>;
17
45
  export { Table };
@@ -14,6 +14,7 @@ export { CardPrimary } from "./CardPrimary/CardPrimary";
14
14
  export { Checkbox } from "./Checkbox/Checkbox";
15
15
  export { CodeBlock } from "./CodeBlock/CodeBlock";
16
16
  export { Dialog } from "./Dialog/Dialog";
17
+ export { ConfirmationDialog } from "./ConfirmationDialog/ConfirmationDialog";
17
18
  export { EllipsisContent } from "./EllipsisContent/EllipsisContent";
18
19
  export { Flyout } from "./Flyout/Flyout";
19
20
  export { InlineCodeBlock } from "./CodeBlock/InlineCodeBlock";
@@ -34,7 +34,9 @@ export type { PanelProps } from "./Panel/Panel";
34
34
  export type { FlyoutProps, FlyoutFooterProps, FlyoutHeaderProps } from "./Flyout/Flyout";
35
35
  export type { DialogContentProps } from "./Dialog/Dialog";
36
36
  export type { DialogProps, DialogTriggerProps } from "@radix-ui/react-dialog";
37
+ export type { ConfirmationDialogProps } from "./ConfirmationDialog/ConfirmationDialog";
37
38
  export type { FileTabStatusType } from "./FileTabs/FileTabs";
39
+ export type { TableHeaderType, TableRowType, TableProps } from "./Table/Table";
38
40
  export type States = "default" | "active" | "disabled" | "error" | "hover";
39
41
  export type HorizontalDirection = "start" | "end";
40
42
  export type Orientation = "horizontal" | "vertical";
@@ -1723,46 +1723,144 @@ export interface Theme {
1723
1723
  };
1724
1724
  };
1725
1725
  };
1726
- "stepperVertical": {
1727
- "icon": {
1728
- "size": {
1729
- "height": string;
1730
- "width": string;
1731
- };
1732
- "space": {
1733
- "x": string;
1734
- "y": string;
1735
- };
1736
- "radii": string;
1737
- "background": {
1738
- "default": string;
1739
- "incomplete": string;
1740
- "complete": string;
1741
- };
1742
- "foreground": {
1743
- "default": string;
1744
- "incomplete": string;
1745
- "complete": string;
1746
- };
1747
- "stroke": {
1748
- "default": string;
1749
- "incomplete": string;
1750
- "complete": string;
1751
- };
1752
- };
1753
- "connector": {
1754
- "size": {
1755
- "width": string;
1756
- };
1757
- "background": {
1758
- "default": string;
1759
- "incomplete": string;
1760
- "complete": string;
1726
+ "stepper": {
1727
+ "vertical": {
1728
+ "numbered": {
1729
+ "connector": {
1730
+ "size": {
1731
+ "width": string;
1732
+ };
1733
+ "stroke": {
1734
+ "default": string;
1735
+ };
1736
+ "color": {
1737
+ "stroke": {
1738
+ "incomplete": string;
1739
+ "complete": string;
1740
+ "active": string;
1741
+ };
1742
+ };
1743
+ };
1744
+ "typography": {
1745
+ "title": {
1746
+ "default": string;
1747
+ };
1748
+ };
1749
+ "step": {
1750
+ "typography": {
1751
+ number: {
1752
+ "default": string;
1753
+ };
1754
+ };
1755
+ "size": {
1756
+ "height": string;
1757
+ "width": string;
1758
+ "icon": {
1759
+ "height": string;
1760
+ "width": string;
1761
+ };
1762
+ };
1763
+ "stroke": {
1764
+ "default": string;
1765
+ };
1766
+ "radii": {
1767
+ "default": string;
1768
+ };
1769
+ "color": {
1770
+ "stroke": {
1771
+ "incomplete": string;
1772
+ "complete": string;
1773
+ "active": string;
1774
+ };
1775
+ "background": {
1776
+ "incomplete": string;
1777
+ "complete": string;
1778
+ "active": string;
1779
+ };
1780
+ "icon": {
1781
+ "incomplete": string;
1782
+ "complete": string;
1783
+ "active": string;
1784
+ };
1785
+ };
1786
+ };
1787
+ "content": {
1788
+ "space": {
1789
+ "gap": {
1790
+ "x": string;
1791
+ "y": string;
1792
+ };
1793
+ };
1794
+ };
1795
+ "color": {
1796
+ "title": {
1797
+ "incomplete": string;
1798
+ "complete": string;
1799
+ "active": string;
1800
+ };
1801
+ };
1761
1802
  };
1762
- };
1763
- "typography": {
1764
- "label": {
1765
- "default": string;
1803
+ "bulleted": {
1804
+ "connector": {
1805
+ "size": {
1806
+ "width": string;
1807
+ };
1808
+ "stroke": {
1809
+ "default": string;
1810
+ };
1811
+ "color": {
1812
+ "stroke": {
1813
+ "incomplete": string;
1814
+ "complete": string;
1815
+ "active": string;
1816
+ };
1817
+ };
1818
+ };
1819
+ "step": {
1820
+ "size": {
1821
+ "height": string;
1822
+ "width": string;
1823
+ "icon": {
1824
+ "height": string;
1825
+ "width": string;
1826
+ };
1827
+ };
1828
+ "radii": {
1829
+ "default": string;
1830
+ };
1831
+ "stroke": {
1832
+ "default": string;
1833
+ };
1834
+ "color": {
1835
+ "stroke": {
1836
+ "incomplete": string;
1837
+ "complete": string;
1838
+ "active": string;
1839
+ };
1840
+ "background": {
1841
+ "incomplete": string;
1842
+ "complete": string;
1843
+ "active": string;
1844
+ };
1845
+ "icon": {
1846
+ "incomplete": string;
1847
+ "complete": string;
1848
+ "active": string;
1849
+ };
1850
+ };
1851
+ };
1852
+ "typography": {
1853
+ "title": {
1854
+ "default": string;
1855
+ };
1856
+ };
1857
+ "color": {
1858
+ "title": {
1859
+ "incomplete": string;
1860
+ "complete": string;
1861
+ "active": string;
1862
+ };
1863
+ };
1766
1864
  };
1767
1865
  };
1768
1866
  };
@@ -1847,6 +1945,7 @@ export interface Theme {
1847
1945
  "label": {
1848
1946
  "default": string;
1849
1947
  };
1948
+ "stroke": string;
1850
1949
  };
1851
1950
  "radii": {
1852
1951
  "all": string;
@@ -511,6 +511,84 @@ declare const _default: {
511
511
  }
512
512
  }
513
513
  },
514
+ "stepper": {
515
+ "vertical": {
516
+ "numbered": {
517
+ "connector": {
518
+ "color": {
519
+ "stroke": {
520
+ "incomplete": "#c0c0c0",
521
+ "complete": "#1F1F1C",
522
+ "active": "#c0c0c0"
523
+ }
524
+ }
525
+ },
526
+ "step": {
527
+ "color": {
528
+ "stroke": {
529
+ "incomplete": "#c0c0c0",
530
+ "complete": "#1F1F1C",
531
+ "active": "#1F1F1C"
532
+ },
533
+ "background": {
534
+ "incomplete": "#ffffff",
535
+ "complete": "#ffffff",
536
+ "active": "#1F1F1C"
537
+ },
538
+ "icon": {
539
+ "incomplete": "#1F1F1C",
540
+ "complete": "#1F1F1C",
541
+ "active": "#ffffff"
542
+ }
543
+ }
544
+ },
545
+ "color": {
546
+ "title": {
547
+ "incomplete": "#c0c0c0",
548
+ "complete": "#696e79",
549
+ "active": "#161517"
550
+ }
551
+ }
552
+ },
553
+ "bulleted": {
554
+ "connector": {
555
+ "color": {
556
+ "stroke": {
557
+ "incomplete": "#c0c0c0",
558
+ "complete": "#1F1F1C",
559
+ "active": "#c0c0c0"
560
+ }
561
+ }
562
+ },
563
+ "step": {
564
+ "color": {
565
+ "stroke": {
566
+ "incomplete": "#c0c0c0",
567
+ "complete": "#1F1F1C",
568
+ "active": "#1F1F1C"
569
+ },
570
+ "background": {
571
+ "incomplete": "#ffffff",
572
+ "complete": "#ffffff",
573
+ "active": "#ffffff"
574
+ },
575
+ "icon": {
576
+ "incomplete": "#ffffff",
577
+ "complete": "#1F1F1C",
578
+ "active": "#ffffff"
579
+ }
580
+ }
581
+ },
582
+ "color": {
583
+ "title": {
584
+ "incomplete": "#c0c0c0",
585
+ "complete": "#696e79",
586
+ "active": "#161517"
587
+ }
588
+ }
589
+ }
590
+ }
591
+ },
514
592
  "tabs": {
515
593
  "basic": {
516
594
  "color": {
@@ -893,29 +893,81 @@ declare const _default: {
893
893
  }
894
894
  }
895
895
  },
896
- "stepperVertical": {
897
- "icon": {
898
- "background": {
899
- "default": "#414141",
900
- "incomplete": "lch(45.7 0 0)",
901
- "complete": "#414141"
902
- },
903
- "foreground": {
904
- "default": "#ffffff",
905
- "incomplete": "#ffffff",
906
- "complete": "#ffffff"
896
+ "stepper": {
897
+ "vertical": {
898
+ "numbered": {
899
+ "connector": {
900
+ "color": {
901
+ "stroke": {
902
+ "incomplete": "#606060",
903
+ "complete": "#ffffff",
904
+ "active": "#606060"
905
+ }
906
+ }
907
+ },
908
+ "step": {
909
+ "color": {
910
+ "stroke": {
911
+ "incomplete": "#606060",
912
+ "complete": "#ffffff",
913
+ "active": "#ffffff"
914
+ },
915
+ "background": {
916
+ "incomplete": "#1F1F1C",
917
+ "complete": "#1F1F1C",
918
+ "active": "#ffffff"
919
+ },
920
+ "icon": {
921
+ "incomplete": "#ffffff",
922
+ "complete": "#ffffff",
923
+ "active": "#1F1F1C"
924
+ }
925
+ }
926
+ },
927
+ "color": {
928
+ "title": {
929
+ "incomplete": "#606060",
930
+ "complete": "#b3b6bd",
931
+ "active": "#ffffff"
932
+ }
933
+ }
907
934
  },
908
- "stroke": {
909
- "default": "#282828",
910
- "incomplete": "rgba(0,0,0,0)",
911
- "complete": "rgba(0,0,0,0)"
912
- }
913
- },
914
- "connector": {
915
- "background": {
916
- "default": "#414141",
917
- "incomplete": "lch(45.7 0 0)",
918
- "complete": "#414141"
935
+ "bulleted": {
936
+ "connector": {
937
+ "color": {
938
+ "stroke": {
939
+ "incomplete": "#606060",
940
+ "complete": "#ffffff",
941
+ "active": "#606060"
942
+ }
943
+ }
944
+ },
945
+ "step": {
946
+ "color": {
947
+ "stroke": {
948
+ "incomplete": "#606060",
949
+ "complete": "#ffffff",
950
+ "active": "#ffffff"
951
+ },
952
+ "background": {
953
+ "incomplete": "#1F1F1C",
954
+ "complete": "#1F1F1C",
955
+ "active": "#ffffff"
956
+ },
957
+ "icon": {
958
+ "incomplete": "#1F1F1C",
959
+ "complete": "#ffffff",
960
+ "active": "#ffffff"
961
+ }
962
+ }
963
+ },
964
+ "color": {
965
+ "title": {
966
+ "incomplete": "#606060",
967
+ "complete": "#b3b6bd",
968
+ "active": "#ffffff"
969
+ }
970
+ }
919
971
  }
920
972
  }
921
973
  },
@@ -1723,46 +1723,144 @@ declare const _default: {
1723
1723
  }
1724
1724
  }
1725
1725
  },
1726
- "stepperVertical": {
1727
- "icon": {
1728
- "size": {
1729
- "height": "1.25rem",
1730
- "width": "1.25rem"
1731
- },
1732
- "space": {
1733
- "x": "0.375rem",
1734
- "y": "0.375rem"
1735
- },
1736
- "radii": "9999px",
1737
- "background": {
1738
- "default": "#161517",
1739
- "incomplete": "lch(93.7 0.83 266)",
1740
- "complete": "#161517"
1741
- },
1742
- "foreground": {
1743
- "default": "#ffffff",
1744
- "incomplete": "#161517",
1745
- "complete": "#ffffff"
1746
- },
1747
- "stroke": {
1748
- "default": "#ffffff",
1749
- "incomplete": "rgba(0,0,0,0)",
1750
- "complete": "rgba(0,0,0,0)"
1751
- }
1752
- },
1753
- "connector": {
1754
- "size": {
1755
- "width": "0.188rem"
1726
+ "stepper": {
1727
+ "vertical": {
1728
+ "numbered": {
1729
+ "connector": {
1730
+ "size": {
1731
+ "width": "0.188rem"
1732
+ },
1733
+ "stroke": {
1734
+ "default": "2px"
1735
+ },
1736
+ "color": {
1737
+ "stroke": {
1738
+ "incomplete": "#c0c0c0",
1739
+ "complete": "#1F1F1C",
1740
+ "active": "#c0c0c0"
1741
+ }
1742
+ }
1743
+ },
1744
+ "typography": {
1745
+ "title": {
1746
+ "default": "700 1rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;"
1747
+ }
1748
+ },
1749
+ "step": {
1750
+ "typography": {
1751
+ "number": {
1752
+ "default": "700 0.625rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;"
1753
+ }
1754
+ },
1755
+ "size": {
1756
+ "height": "1.5rem",
1757
+ "width": "1.5rem",
1758
+ "icon": {
1759
+ "height": "0.75rem",
1760
+ "width": "0.75rem"
1761
+ }
1762
+ },
1763
+ "stroke": {
1764
+ "default": "2px"
1765
+ },
1766
+ "radii": {
1767
+ "default": "9999px"
1768
+ },
1769
+ "color": {
1770
+ "stroke": {
1771
+ "incomplete": "#c0c0c0",
1772
+ "complete": "#1F1F1C",
1773
+ "active": "#1F1F1C"
1774
+ },
1775
+ "background": {
1776
+ "incomplete": "#ffffff",
1777
+ "complete": "#ffffff",
1778
+ "active": "#1F1F1C"
1779
+ },
1780
+ "icon": {
1781
+ "incomplete": "#1F1F1C",
1782
+ "complete": "#1F1F1C",
1783
+ "active": "#ffffff"
1784
+ }
1785
+ }
1786
+ },
1787
+ "content": {
1788
+ "space": {
1789
+ "gap": {
1790
+ "x": "1rem",
1791
+ "y": "0.5rem"
1792
+ }
1793
+ }
1794
+ },
1795
+ "color": {
1796
+ "title": {
1797
+ "incomplete": "#c0c0c0",
1798
+ "complete": "#696e79",
1799
+ "active": "#161517"
1800
+ }
1801
+ }
1756
1802
  },
1757
- "background": {
1758
- "default": "#161517",
1759
- "incomplete": "lch(93.7 0.83 266)",
1760
- "complete": "#161517"
1761
- }
1762
- },
1763
- "typography": {
1764
- "label": {
1765
- "default": "600 0.75rem/1.7 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;"
1803
+ "bulleted": {
1804
+ "connector": {
1805
+ "size": {
1806
+ "width": "0.188rem"
1807
+ },
1808
+ "stroke": {
1809
+ "default": "2px"
1810
+ },
1811
+ "color": {
1812
+ "stroke": {
1813
+ "incomplete": "#c0c0c0",
1814
+ "complete": "#1F1F1C",
1815
+ "active": "#c0c0c0"
1816
+ }
1817
+ }
1818
+ },
1819
+ "step": {
1820
+ "size": {
1821
+ "height": "1rem",
1822
+ "width": "1rem",
1823
+ "icon": {
1824
+ "height": "0.75rem",
1825
+ "width": "0.75rem"
1826
+ }
1827
+ },
1828
+ "radii": {
1829
+ "default": "9999px"
1830
+ },
1831
+ "stroke": {
1832
+ "default": "2px"
1833
+ },
1834
+ "color": {
1835
+ "stroke": {
1836
+ "incomplete": "#c0c0c0",
1837
+ "complete": "#1F1F1C",
1838
+ "active": "#1F1F1C"
1839
+ },
1840
+ "background": {
1841
+ "incomplete": "#ffffff",
1842
+ "complete": "#ffffff",
1843
+ "active": "#ffffff"
1844
+ },
1845
+ "icon": {
1846
+ "incomplete": "#ffffff",
1847
+ "complete": "#1F1F1C",
1848
+ "active": "#ffffff"
1849
+ }
1850
+ }
1851
+ },
1852
+ "typography": {
1853
+ "title": {
1854
+ "default": "700 1rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;"
1855
+ }
1856
+ },
1857
+ "color": {
1858
+ "title": {
1859
+ "incomplete": "#c0c0c0",
1860
+ "complete": "#696e79",
1861
+ "active": "#161517"
1862
+ }
1863
+ }
1766
1864
  }
1767
1865
  }
1768
1866
  },
@@ -1846,7 +1944,8 @@ declare const _default: {
1846
1944
  },
1847
1945
  "label": {
1848
1946
  "default": "500 0.75rem/1.5 \"Inter\", '\"SF Pro Display\"', -apple-system, BlinkMacSystemFont, '\"Segoe UI\"', Roboto, Oxygen, Ubuntu, Cantarell, '\"Open Sans\"', '\"Helvetica Neue\"', sans-serif;"
1849
- }
1947
+ },
1948
+ "stroke": "1px"
1850
1949
  },
1851
1950
  "radii": {
1852
1951
  "all": "0.25rem"