periplo-ui 3.27.2 → 3.27.4
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/components/DataTable/components/DataTableToolbar.js +1 -1
- package/dist/components/DataTable/components/DataTableToolbar.js.map +1 -1
- package/dist/components/DataTable/index.d.ts +1 -0
- package/dist/components/DataTable/types.d.ts +147 -155
- package/dist/components/DataTable/types.js +2 -0
- package/dist/components/DataTable/types.js.map +1 -0
- package/dist/components/RadioGroup/RadioGroup.js +1 -1
- package/dist/components/RadioGroup/RadioGroup.js.map +1 -1
- package/dist/components/Toaster/Toaster.d.ts +3 -1
- package/dist/components/Toaster/Toaster.js +12 -4
- package/dist/components/Toaster/Toaster.js.map +1 -1
- package/dist/theme.css +1 -1
- package/package.json +1 -1
- package/dist/components/DataTable/types.d.js +0 -2
- package/dist/components/DataTable/types.d.js.map +0 -1
|
@@ -50,7 +50,7 @@ function DataTableToolbar({
|
|
|
50
50
|
if (!showColumnVisibilityControls && !primaryFilters && !secondaryFilters && !selection) {
|
|
51
51
|
return null;
|
|
52
52
|
}
|
|
53
|
-
return /* @__PURE__ */ jsxs("div", { className: "flex
|
|
53
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col gap-2 p-1", children: [
|
|
54
54
|
!isMobile && primaryFilters && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: primaryFilters }),
|
|
55
55
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
|
|
56
56
|
/* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: selection && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: selection.isSelectionStarted ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableToolbar.js","sources":["../../../../src/components/DataTable/components/DataTableToolbar.tsx"],"sourcesContent":["import { TextColumns, FunnelSimple, X, SelectionAll } from '@phosphor-icons/react'\nimport { Table } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Badge } from '../../Badge'\nimport { Button } from '../../Button'\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '../../DropdownMenu'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../../Popover'\nimport { Typography } from '../../Typography'\n\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '@/components/Tooltip'\nimport { useIsMobile } from '@/lib/useMobile'\nimport { cn } from '@/lib/utils'\n\ntype DataTableToolbarProps<TData> = {\n readonly table: Table<TData>\n readonly showColumnVisibilityControls?: boolean\n readonly primaryFilters?: React.ReactNode\n readonly secondaryFilters?: React.ReactNode\n readonly activePrimaryFiltersCount?: number\n readonly activeSecondaryFiltersCount?: number\n readonly labels?: {\n columnVisibilityButton?: string\n columnVisibilitySelectAll?: string\n filters?: string\n moreFilters?: string\n }\n readonly selection?: {\n isSelectionStarted?: boolean\n onSelectionStart?: () => void\n onSelectionCancel?: () => void\n selectionSummary?: string | null\n isSelectionDisabled?: boolean\n labels?: {\n startSelection?: string\n cancelSelection?: string\n selectionSummary?: string\n selectionDisabledTooltip?: string\n }\n }\n}\n\nconst defaultLabels = {\n columnVisibilityButton: 'Hide columns',\n columnVisibilitySelectAll: 'Select all',\n filters: 'Filters',\n moreFilters: 'More filters',\n startSelection: 'Start selection',\n cancelSelection: 'Cancel selection',\n}\n\nconst defaultSelectionLabels = {\n startSelection: 'Start selection',\n cancelSelection: 'Cancel selection',\n}\n\nexport function DataTableToolbar<TData>({\n table,\n showColumnVisibilityControls = true,\n primaryFilters,\n secondaryFilters,\n activePrimaryFiltersCount = 0,\n activeSecondaryFiltersCount = 0,\n selection,\n labels: labelsProp,\n}: DataTableToolbarProps<TData>) {\n const isMobile = useIsMobile()\n\n const labels = {\n ...defaultLabels,\n ...labelsProp,\n }\n\n const selectionLabels = {\n ...defaultSelectionLabels,\n ...selection?.labels,\n }\n\n const hasPrimaryFilters = !!primaryFilters\n const hasSecondaryFilters = !!secondaryFilters\n\n const showFiltersButton = isMobile ? hasPrimaryFilters || hasSecondaryFilters : hasSecondaryFilters\n\n const totalActiveFiltersCount = activePrimaryFiltersCount + activeSecondaryFiltersCount\n const activeFiltersCount = isMobile ? totalActiveFiltersCount : activeSecondaryFiltersCount\n const showBadge = activeFiltersCount > 0\n\n const filtersButtonLabel = !hasPrimaryFilters || isMobile ? labels.filters : labels.moreFilters\n\n if (!showColumnVisibilityControls && !primaryFilters && !secondaryFilters && !selection) {\n return null\n }\n\n return (\n <div className=\"flex flex-shrink-0 flex-col gap-2 p-1\">\n {!isMobile && primaryFilters && <div className=\"flex flex-wrap items-center gap-2\">{primaryFilters}</div>}\n\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center gap-2\">\n {selection && (\n <div className=\"flex items-center gap-2\">\n {selection.isSelectionStarted ? (\n <>\n <Button variant=\"text\" size=\"sm\" StartIcon={X} onClick={selection.onSelectionCancel}>\n {selectionLabels.cancelSelection}\n </Button>\n {selection.selectionSummary && !isMobile && (\n <Typography variant=\"body-sm\" className=\"text-neutral-600\">\n {selection.selectionSummary}\n </Typography>\n )}\n </>\n ) : (\n <TooltipProvider>\n <TooltipRoot delayDuration={200}>\n <TooltipTrigger asChild>\n <div>\n <Button\n variant=\"text\"\n size=\"sm\"\n StartIcon={SelectionAll}\n onClick={selection.onSelectionStart}\n disabled={selection.isSelectionDisabled}\n >\n {selectionLabels.startSelection}\n </Button>\n </div>\n </TooltipTrigger>\n {selection.labels?.selectionDisabledTooltip && selection.isSelectionDisabled && (\n <TooltipContent>{selection.labels.selectionDisabledTooltip}</TooltipContent>\n )}\n </TooltipRoot>\n </TooltipProvider>\n )}\n </div>\n )}\n </div>\n\n <div className=\"flex items-center gap-2\">\n {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}\n {showFiltersButton && (\n <PopoverRoot>\n <PopoverTrigger asChild>\n <Button variant=\"text\" size=\"sm\" StartIcon={FunnelSimple} className=\"relative whitespace-nowrap\">\n {showBadge && (\n <Badge\n count={activeFiltersCount}\n color=\"primary\"\n ping={false}\n className=\"absolute -top-1 -right-1\"\n />\n )}\n {filtersButtonLabel}\n </Button>\n </PopoverTrigger>\n <PopoverContent\n align=\"center\"\n className={cn('w-fit p-4', isMobile && 'max-h-[80vh] w-[95vw] overflow-y-auto')}\n >\n <div className=\"flex flex-col gap-4\">\n {isMobile && primaryFilters}\n {secondaryFilters}\n </div>\n </PopoverContent>\n </PopoverRoot>\n )}\n {showColumnVisibilityControls && (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"text\" size=\"sm\" className={cn('whitespace-nowrap')} StartIcon={TextColumns}>\n {labels.columnVisibilityButton}\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n <DropdownMenuCheckboxItem\n key={'all-columns'}\n className=\"capitalize\"\n checked={table.getAllColumns().every((column) => column.getIsVisible())}\n onSelect={(event) => event.preventDefault()}\n onCheckedChange={(value) =>\n table.getAllColumns().forEach((column) => column.toggleVisibility(!!value))\n }\n >\n {labels.columnVisibilitySelectAll}\n </DropdownMenuCheckboxItem>\n <DropdownMenuSeparator className=\"bg-neutral-100\" />\n {table\n .getAllColumns()\n .filter((column) => column.getCanHide() && column.id !== 'select')\n .map((column) => {\n return (\n <DropdownMenuCheckboxItem\n key={column.id}\n className=\"capitalize\"\n checked={column.getIsVisible()}\n onSelect={(event) => event.preventDefault()}\n onCheckedChange={(value) => column.toggleVisibility(!!value)}\n >\n {column.columnDef.header?.toString()}\n </DropdownMenuCheckboxItem>\n )\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n )}\n </div>\n </div>\n </div>\n )\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"DataTableToolbar.js","sources":["../../../../src/components/DataTable/components/DataTableToolbar.tsx"],"sourcesContent":["import { TextColumns, FunnelSimple, X, SelectionAll } from '@phosphor-icons/react'\nimport { Table } from '@tanstack/react-table'\nimport * as React from 'react'\n\nimport { Badge } from '../../Badge'\nimport { Button } from '../../Button'\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '../../DropdownMenu'\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from '../../Popover'\nimport { Typography } from '../../Typography'\n\nimport { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from '@/components/Tooltip'\nimport { useIsMobile } from '@/lib/useMobile'\nimport { cn } from '@/lib/utils'\n\ntype DataTableToolbarProps<TData> = {\n readonly table: Table<TData>\n readonly showColumnVisibilityControls?: boolean\n readonly primaryFilters?: React.ReactNode\n readonly secondaryFilters?: React.ReactNode\n readonly activePrimaryFiltersCount?: number\n readonly activeSecondaryFiltersCount?: number\n readonly labels?: {\n columnVisibilityButton?: string\n columnVisibilitySelectAll?: string\n filters?: string\n moreFilters?: string\n }\n readonly selection?: {\n isSelectionStarted?: boolean\n onSelectionStart?: () => void\n onSelectionCancel?: () => void\n selectionSummary?: string | null\n isSelectionDisabled?: boolean\n labels?: {\n startSelection?: string\n cancelSelection?: string\n selectionSummary?: string\n selectionDisabledTooltip?: string\n }\n }\n}\n\nconst defaultLabels = {\n columnVisibilityButton: 'Hide columns',\n columnVisibilitySelectAll: 'Select all',\n filters: 'Filters',\n moreFilters: 'More filters',\n startSelection: 'Start selection',\n cancelSelection: 'Cancel selection',\n}\n\nconst defaultSelectionLabels = {\n startSelection: 'Start selection',\n cancelSelection: 'Cancel selection',\n}\n\nexport function DataTableToolbar<TData>({\n table,\n showColumnVisibilityControls = true,\n primaryFilters,\n secondaryFilters,\n activePrimaryFiltersCount = 0,\n activeSecondaryFiltersCount = 0,\n selection,\n labels: labelsProp,\n}: DataTableToolbarProps<TData>) {\n const isMobile = useIsMobile()\n\n const labels = {\n ...defaultLabels,\n ...labelsProp,\n }\n\n const selectionLabels = {\n ...defaultSelectionLabels,\n ...selection?.labels,\n }\n\n const hasPrimaryFilters = !!primaryFilters\n const hasSecondaryFilters = !!secondaryFilters\n\n const showFiltersButton = isMobile ? hasPrimaryFilters || hasSecondaryFilters : hasSecondaryFilters\n\n const totalActiveFiltersCount = activePrimaryFiltersCount + activeSecondaryFiltersCount\n const activeFiltersCount = isMobile ? totalActiveFiltersCount : activeSecondaryFiltersCount\n const showBadge = activeFiltersCount > 0\n\n const filtersButtonLabel = !hasPrimaryFilters || isMobile ? labels.filters : labels.moreFilters\n\n if (!showColumnVisibilityControls && !primaryFilters && !secondaryFilters && !selection) {\n return null\n }\n\n return (\n <div className=\"flex shrink-0 flex-col gap-2 p-1\">\n {!isMobile && primaryFilters && <div className=\"flex flex-wrap items-center gap-2\">{primaryFilters}</div>}\n\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center gap-2\">\n {selection && (\n <div className=\"flex items-center gap-2\">\n {selection.isSelectionStarted ? (\n <>\n <Button variant=\"text\" size=\"sm\" StartIcon={X} onClick={selection.onSelectionCancel}>\n {selectionLabels.cancelSelection}\n </Button>\n {selection.selectionSummary && !isMobile && (\n <Typography variant=\"body-sm\" className=\"text-neutral-600\">\n {selection.selectionSummary}\n </Typography>\n )}\n </>\n ) : (\n <TooltipProvider>\n <TooltipRoot delayDuration={200}>\n <TooltipTrigger asChild>\n <div>\n <Button\n variant=\"text\"\n size=\"sm\"\n StartIcon={SelectionAll}\n onClick={selection.onSelectionStart}\n disabled={selection.isSelectionDisabled}\n >\n {selectionLabels.startSelection}\n </Button>\n </div>\n </TooltipTrigger>\n {selection.labels?.selectionDisabledTooltip && selection.isSelectionDisabled && (\n <TooltipContent>{selection.labels.selectionDisabledTooltip}</TooltipContent>\n )}\n </TooltipRoot>\n </TooltipProvider>\n )}\n </div>\n )}\n </div>\n\n <div className=\"flex items-center gap-2\">\n {/* eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing */}\n {showFiltersButton && (\n <PopoverRoot>\n <PopoverTrigger asChild>\n <Button variant=\"text\" size=\"sm\" StartIcon={FunnelSimple} className=\"relative whitespace-nowrap\">\n {showBadge && (\n <Badge\n count={activeFiltersCount}\n color=\"primary\"\n ping={false}\n className=\"absolute -top-1 -right-1\"\n />\n )}\n {filtersButtonLabel}\n </Button>\n </PopoverTrigger>\n <PopoverContent\n align=\"center\"\n className={cn('w-fit p-4', isMobile && 'max-h-[80vh] w-[95vw] overflow-y-auto')}\n >\n <div className=\"flex flex-col gap-4\">\n {isMobile && primaryFilters}\n {secondaryFilters}\n </div>\n </PopoverContent>\n </PopoverRoot>\n )}\n {showColumnVisibilityControls && (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"text\" size=\"sm\" className={cn('whitespace-nowrap')} StartIcon={TextColumns}>\n {labels.columnVisibilityButton}\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent>\n <DropdownMenuCheckboxItem\n key={'all-columns'}\n className=\"capitalize\"\n checked={table.getAllColumns().every((column) => column.getIsVisible())}\n onSelect={(event) => event.preventDefault()}\n onCheckedChange={(value) =>\n table.getAllColumns().forEach((column) => column.toggleVisibility(!!value))\n }\n >\n {labels.columnVisibilitySelectAll}\n </DropdownMenuCheckboxItem>\n <DropdownMenuSeparator className=\"bg-neutral-100\" />\n {table\n .getAllColumns()\n .filter((column) => column.getCanHide() && column.id !== 'select')\n .map((column) => {\n return (\n <DropdownMenuCheckboxItem\n key={column.id}\n className=\"capitalize\"\n checked={column.getIsVisible()}\n onSelect={(event) => event.preventDefault()}\n onCheckedChange={(value) => column.toggleVisibility(!!value)}\n >\n {column.columnDef.header?.toString()}\n </DropdownMenuCheckboxItem>\n )\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n )}\n </div>\n </div>\n </div>\n )\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1,170 +1,162 @@
|
|
|
1
1
|
import { ColumnDef } from '@tanstack/react-table';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
export type User = {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
}
|
|
10
|
-
|
|
4
|
+
id: string;
|
|
5
|
+
name: string;
|
|
6
|
+
email: string;
|
|
7
|
+
role: string;
|
|
8
|
+
status: 'active' | 'inactive' | 'pending';
|
|
9
|
+
};
|
|
11
10
|
export type UserExtended = User & {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
28
|
-
|
|
11
|
+
salary: number;
|
|
12
|
+
employeeId: string;
|
|
13
|
+
manager: string;
|
|
14
|
+
officeNumber: string;
|
|
15
|
+
lastLogin: string;
|
|
16
|
+
vacationDays: number;
|
|
17
|
+
projectCount: number;
|
|
18
|
+
performanceRating: number;
|
|
19
|
+
certifications: Array<string>;
|
|
20
|
+
languages: Array<string>;
|
|
21
|
+
department: string;
|
|
22
|
+
location: string;
|
|
23
|
+
joinDate: string;
|
|
24
|
+
phoneNumber: string;
|
|
25
|
+
title: string;
|
|
26
|
+
};
|
|
29
27
|
export type Product = {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
}
|
|
37
|
-
|
|
28
|
+
id: string;
|
|
29
|
+
name: string;
|
|
30
|
+
category: string;
|
|
31
|
+
price: number;
|
|
32
|
+
stock: number;
|
|
33
|
+
lastUpdated: string;
|
|
34
|
+
};
|
|
38
35
|
export type SelectionConfig<TData> = {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}
|
|
69
|
-
|
|
36
|
+
/** Whether the row is selected */
|
|
37
|
+
isSelected: (row: TData) => boolean;
|
|
38
|
+
/** Callback when a row is selected */
|
|
39
|
+
onSelect?: (row: TData, selected: boolean) => void;
|
|
40
|
+
/** Callback when all rows are selected */
|
|
41
|
+
onSelectAll?: (selected: boolean) => void;
|
|
42
|
+
/** Optional callback when selection has started (for backend pagination) */
|
|
43
|
+
onSelectionStart?: () => void;
|
|
44
|
+
/** Optional callback when selection mode is cancelled (for backend pagination) */
|
|
45
|
+
onSelectionCancel?: () => void;
|
|
46
|
+
/** Whether selection mode is active (for backend pagination) */
|
|
47
|
+
isSelectionStarted?: boolean;
|
|
48
|
+
/** Whether the selection is disabled */
|
|
49
|
+
isSelectionDisabled?: boolean;
|
|
50
|
+
/** Whether the row selection is disabled */
|
|
51
|
+
isRowSelectionDisabled?: boolean | ((row: TData) => boolean);
|
|
52
|
+
/** Selection-related labels for UI customization */
|
|
53
|
+
labels?: {
|
|
54
|
+
/** Text for the selection disabled tooltip */
|
|
55
|
+
selectionDisabledTooltip?: string | undefined;
|
|
56
|
+
/** Tooltip text shown when the checkbox is disabled */
|
|
57
|
+
rowSelectionDisabledTooltip?: string | ((row: TData) => string | undefined);
|
|
58
|
+
/** Text for the start selection button (default: "Select") */
|
|
59
|
+
startSelection?: string;
|
|
60
|
+
/** Text for the cancel selection button (default: "Cancel") */
|
|
61
|
+
cancelSelection?: string;
|
|
62
|
+
/** Text for the selection summary (default: "Selected {count} of {total}") */
|
|
63
|
+
selectionSummary?: string;
|
|
64
|
+
};
|
|
65
|
+
};
|
|
70
66
|
export type BasePaginationProps = {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
}
|
|
91
|
-
|
|
67
|
+
/** Number of rows per page */
|
|
68
|
+
readonly pageSize: number;
|
|
69
|
+
/** Whether the pagination is in a loading state */
|
|
70
|
+
readonly isLoading?: boolean;
|
|
71
|
+
/** Text customization for pagination */
|
|
72
|
+
readonly labels?: {
|
|
73
|
+
/** Text shown before the page size number (default: "Showing") */
|
|
74
|
+
showing?: string;
|
|
75
|
+
/** Text shown before the total number (default: "of") */
|
|
76
|
+
of?: string;
|
|
77
|
+
/** Text shown after the total number (default: "results") */
|
|
78
|
+
results?: string;
|
|
79
|
+
/** Aria label for previous page button (default: "Previous page") */
|
|
80
|
+
previousPage?: string;
|
|
81
|
+
/** Aria label for next page button (default: "Next page") */
|
|
82
|
+
nextPage?: string;
|
|
83
|
+
/** Aria label for page number (default: "Page {number}") */
|
|
84
|
+
pageLabel?: string;
|
|
85
|
+
};
|
|
86
|
+
};
|
|
92
87
|
export type BackendPaginationProps = {
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
} & BasePaginationProps
|
|
100
|
-
|
|
88
|
+
/** Current page */
|
|
89
|
+
readonly currentPage: number;
|
|
90
|
+
/** Total number of items */
|
|
91
|
+
readonly total: number;
|
|
92
|
+
/** Callback when page changes */
|
|
93
|
+
readonly onPageChange: (page: number) => void;
|
|
94
|
+
} & BasePaginationProps;
|
|
101
95
|
export type DataTableProps<TData> = {
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
} & (HasId<TData> extends true
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
readonly getRowId: RowIdentifierFn<TData>
|
|
160
|
-
})
|
|
161
|
-
|
|
96
|
+
/** Array of column definitions that describe the table structure */
|
|
97
|
+
readonly columns: Array<ColumnDef<TData>>;
|
|
98
|
+
/** Array of data items to be displayed in the table */
|
|
99
|
+
readonly data: Array<TData>;
|
|
100
|
+
/** Whether to show the column visibility toggle menu */
|
|
101
|
+
readonly showColumnVisibilityControls?: boolean;
|
|
102
|
+
/** Whether the table is in a loading state */
|
|
103
|
+
readonly isLoading?: boolean;
|
|
104
|
+
/** Pagination configuration. If not provided, pagination is disabled */
|
|
105
|
+
readonly pagination?: BasePaginationProps | BackendPaginationProps;
|
|
106
|
+
/** Primary filters that appear directly above the table */
|
|
107
|
+
readonly primaryFilters?: ReactNode;
|
|
108
|
+
/** Secondary filters that appear in the filters dropdown */
|
|
109
|
+
readonly secondaryFilters?: ReactNode;
|
|
110
|
+
/** Number of active primary filters */
|
|
111
|
+
readonly activePrimaryFiltersCount?: number;
|
|
112
|
+
/** Number of active secondary filters */
|
|
113
|
+
readonly activeSecondaryFiltersCount?: number;
|
|
114
|
+
/** Selection configuration */
|
|
115
|
+
readonly selection?: SelectionConfig<TData>;
|
|
116
|
+
/** Whether to hide the checkbox selection column */
|
|
117
|
+
readonly hideCheckboxSelection?: boolean;
|
|
118
|
+
/** Empty state configuration */
|
|
119
|
+
readonly emptyState?: {
|
|
120
|
+
/** Title for the empty state */
|
|
121
|
+
title: string;
|
|
122
|
+
/** Description for the empty state */
|
|
123
|
+
description: string;
|
|
124
|
+
/** Route for the empty state image */
|
|
125
|
+
imageRoute?: string;
|
|
126
|
+
/** Alt text for the empty state image */
|
|
127
|
+
imageAlt?: string;
|
|
128
|
+
/** Class name for the empty state image */
|
|
129
|
+
imageClassName?: string;
|
|
130
|
+
};
|
|
131
|
+
/** Text customization for filters */
|
|
132
|
+
readonly labels?: {
|
|
133
|
+
/** Text for the column visibility button (default: "Hide columns") */
|
|
134
|
+
columnVisibilityButton?: string;
|
|
135
|
+
/** Text for the columns visibility select all option (default: "Select all") */
|
|
136
|
+
columnVisibilitySelectAll?: string;
|
|
137
|
+
/** Text for the filters button when only secondary filters are present (default: "Filters") */
|
|
138
|
+
filters?: string;
|
|
139
|
+
/** Text for the more filters button when both primary and secondary filters are present (default: "More filters") */
|
|
140
|
+
moreFilters?: string;
|
|
141
|
+
};
|
|
142
|
+
/** Optional className for the table container */
|
|
143
|
+
readonly className?: string;
|
|
144
|
+
/** Optional className for the table */
|
|
145
|
+
readonly tableClassName?: string;
|
|
146
|
+
} & (HasId<TData> extends true ? {
|
|
147
|
+
/** Function to get unique identifier from a row. Not needed when data has 'id' property */
|
|
148
|
+
readonly getRowId?: RowIdentifierFn<TData>;
|
|
149
|
+
} : {
|
|
150
|
+
/** Function to get unique identifier from a row. Required when data doesn't have 'id' property */
|
|
151
|
+
readonly getRowId: RowIdentifierFn<TData>;
|
|
152
|
+
});
|
|
162
153
|
/**
|
|
163
154
|
* Type helper to check if a type has an 'id' property
|
|
164
155
|
*/
|
|
165
|
-
export type HasId<T> = T extends {
|
|
166
|
-
|
|
156
|
+
export type HasId<T> = T extends {
|
|
157
|
+
id: string | number;
|
|
158
|
+
} ? true : false;
|
|
167
159
|
/**
|
|
168
160
|
* Function to get a unique identifier from a row
|
|
169
161
|
*/
|
|
170
|
-
export type RowIdentifierFn<T> = (row: T) => string
|
|
162
|
+
export type RowIdentifierFn<T> = (row: T) => string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -14,7 +14,7 @@ const RadioGroupItem = React.forwardRef(({ className, ...props }, ref) => {
|
|
|
14
14
|
{
|
|
15
15
|
ref,
|
|
16
16
|
className: cn(
|
|
17
|
-
"border-primary text-foreground ring-offset-background focus-visible:ring-accent-600 aspect-square h-4 w-4
|
|
17
|
+
"border-primary text-foreground ring-offset-background focus-visible:ring-accent-600 aspect-square h-4 w-4 shrink-0 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
18
18
|
className
|
|
19
19
|
),
|
|
20
20
|
...props,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { Check } from '@phosphor-icons/react'\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst RadioGroup = React.forwardRef<\n React.ComponentRef<typeof RadioGroupPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n React.ComponentRef<typeof RadioGroupPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\n return (\n <RadioGroupPrimitive.Item\n ref={ref}\n className={cn(\n 'border-primary text-foreground ring-offset-background focus-visible:ring-accent-600 aspect-square h-4 w-4
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import { Check } from '@phosphor-icons/react'\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group'\nimport * as React from 'react'\n\nimport { cn } from '@/lib/utils'\n\nconst RadioGroup = React.forwardRef<\n React.ComponentRef<typeof RadioGroupPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n return <RadioGroupPrimitive.Root className={cn('grid gap-2', className)} {...props} ref={ref} />\n})\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName\n\nconst RadioGroupItem = React.forwardRef<\n React.ComponentRef<typeof RadioGroupPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\n return (\n <RadioGroupPrimitive.Item\n ref={ref}\n className={cn(\n 'border-primary text-foreground ring-offset-background focus-visible:ring-accent-600 aspect-square h-4 w-4 shrink-0 rounded-full border focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n className,\n )}\n {...props}\n >\n <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n <Check className=\"h-3 w-3 text-current\" weight=\"bold\" />\n </RadioGroupPrimitive.Indicator>\n </RadioGroupPrimitive.Item>\n )\n})\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName\n\nexport { RadioGroup, RadioGroupItem }\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,UAAA,GAAa,MAAM,UAAA,CAGvB,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAClC,EAAA,uBAAO,GAAA,CAAC,mBAAA,CAAoB,IAAA,EAApB,EAAyB,SAAA,EAAW,EAAA,CAAG,YAAA,EAAc,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,GAAA,EAAU,CAAA;AAChG,CAAC;AACD,UAAA,CAAW,WAAA,GAAc,oBAAoB,IAAA,CAAK,WAAA;AAElD,MAAM,cAAA,GAAiB,MAAM,UAAA,CAG3B,CAAC,EAAE,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAClC,EAAA,uBACE,GAAA;AAAA,IAAC,mBAAA,CAAoB,IAAA;AAAA,IAApB;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,4PAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,mBAAA,CAAoB,SAAA,EAApB,EAA8B,SAAA,EAAU,kCAAA,EACvC,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,sBAAA,EAAuB,MAAA,EAAO,MAAA,EAAO,CAAA,EACxD;AAAA;AAAA,GACF;AAEJ,CAAC;AACD,cAAA,CAAe,WAAA,GAAc,oBAAoB,IAAA,CAAK,WAAA;;;;"}
|
|
@@ -58,6 +58,8 @@ export type ToasterProps = {
|
|
|
58
58
|
position?: ToastPosition;
|
|
59
59
|
/** Show close button on toasts, dismissable has to be true */
|
|
60
60
|
closeButton?: boolean;
|
|
61
|
+
/** Whether to expand the toast */
|
|
62
|
+
expand?: boolean;
|
|
61
63
|
} & Omit<SonnerProps, 'richColors' | 'expand' | 'gap' | 'dir' | 'invert'>;
|
|
62
64
|
/**
|
|
63
65
|
* Toast notification component with customizable styles and behaviors
|
|
@@ -70,7 +72,7 @@ export type ToasterProps = {
|
|
|
70
72
|
* />
|
|
71
73
|
* ```
|
|
72
74
|
*/
|
|
73
|
-
declare const Toaster: ({ visibleToasts, position, closeButton, ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
|
|
75
|
+
declare const Toaster: ({ visibleToasts, position, closeButton, expand, ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
|
|
74
76
|
declare const toast: ((message: React.ReactNode, options?: ToastOptions) => string | number) & {
|
|
75
77
|
info: (message: React.ReactNode, options?: ToastOptions) => string | number;
|
|
76
78
|
success: (message: React.ReactNode, options?: ToastOptions) => string | number;
|
|
@@ -1,18 +1,24 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { Info, XCircle, Warning, CheckCircle } from '@phosphor-icons/react';
|
|
3
|
+
import { SpinnerGap, Info, XCircle, Warning, CheckCircle } from '@phosphor-icons/react';
|
|
4
4
|
import { toast as toast$1, Toaster as Toaster$1 } from 'sonner';
|
|
5
5
|
import { buttonVariants } from '../Button/Button.js';
|
|
6
6
|
import { cn } from '../../lib/utils.js';
|
|
7
7
|
|
|
8
|
-
const Toaster = ({
|
|
8
|
+
const Toaster = ({
|
|
9
|
+
visibleToasts = 3,
|
|
10
|
+
position = "bottom-right",
|
|
11
|
+
closeButton = false,
|
|
12
|
+
expand = true,
|
|
13
|
+
...props
|
|
14
|
+
}) => {
|
|
9
15
|
return /* @__PURE__ */ jsx(
|
|
10
16
|
Toaster$1,
|
|
11
17
|
{
|
|
12
18
|
className: "toaster group",
|
|
13
19
|
theme: "light",
|
|
14
20
|
richColors: false,
|
|
15
|
-
expand
|
|
21
|
+
expand,
|
|
16
22
|
visibleToasts,
|
|
17
23
|
position,
|
|
18
24
|
closeButton,
|
|
@@ -34,6 +40,7 @@ const Toaster = ({ visibleToasts = 3, position = "bottom-right", closeButton = f
|
|
|
34
40
|
// Info variant (blue background)
|
|
35
41
|
"data-[type=info]:bg-blue-100 data-[type=info]:text-blue-800 data-[type=info]:border-blue-500"
|
|
36
42
|
),
|
|
43
|
+
loader: cn("!static !transform-none data-[visible=false]:hidden"),
|
|
37
44
|
closeButton: cn(
|
|
38
45
|
"right-0 top-3 left-auto",
|
|
39
46
|
"p-0 opacity-50 transition-opacity hover:opacity-100 !border-none !bg-transparent",
|
|
@@ -57,7 +64,8 @@ const Toaster = ({ visibleToasts = 3, position = "bottom-right", closeButton = f
|
|
|
57
64
|
success: /* @__PURE__ */ jsx(CheckCircle, { size: 24 }),
|
|
58
65
|
warning: /* @__PURE__ */ jsx(Warning, { size: 24 }),
|
|
59
66
|
error: /* @__PURE__ */ jsx(XCircle, { size: 24 }),
|
|
60
|
-
info: /* @__PURE__ */ jsx(Info, { size: 24 })
|
|
67
|
+
info: /* @__PURE__ */ jsx(Info, { size: 24 }),
|
|
68
|
+
loading: /* @__PURE__ */ jsx("div", { className: "flex h-6 w-6 items-center justify-center", children: /* @__PURE__ */ jsx(SpinnerGap, { size: 20, className: "animate-spin" }) })
|
|
61
69
|
},
|
|
62
70
|
...props
|
|
63
71
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toaster.js","sources":["../../../src/components/Toaster/Toaster.tsx"],"sourcesContent":["'use client'\n\nimport { CheckCircle, Info, Warning, XCircle } from '@phosphor-icons/react'\nimport { Toaster as Sonner, toast as sonnerToast, ToasterProps as SonnerProps } from 'sonner'\n\nimport { buttonVariants } from '../Button'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * Toast message type options\n */\nexport type ToastType = 'success' | 'error' | 'warning' | 'loading' | 'default' | 'info'\n\n/**\n * Toast position options\n * @default 'bottom-right'\n */\nexport type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n\n/**\n * Configuration for toast action buttons\n */\nexport type ToastAction = {\n /** Label text for the action button */\n label: string\n /** onClick handler for the action button */\n onClick: () => void\n /** Optional style object for the button */\n style?: React.CSSProperties\n}\n\n/**\n * Options for customizing toast appearance and behavior\n */\nexport type ToastOptions = {\n /** Optional description text below the main message */\n description?: React.ReactNode\n /** Duration in milliseconds to show the toast */\n duration?: number\n /** Custom icon element */\n icon?: React.ReactNode\n /** Position of the toast on screen */\n position?: ToastPosition\n /** ID for programmatically managing the toast */\n id?: string | number\n /** Action button configuration */\n action?: ToastAction\n /** Cancel button configuration */\n cancel?: ToastAction\n /** Callback when toast is dismissed */\n onDismiss?: () => void\n /** Callback when toast auto-closes */\n onAutoClose?: () => void\n /** Whether the toast can be dismissed */\n dismissible?: boolean\n /** Custom CSS classes */\n className?: string\n /** Whether to show the close button at the toast */\n closeButton?: boolean\n}\n\n/**\n * Props for the Toaster component\n */\nexport type ToasterProps = {\n /** Number of visible toasts */\n visibleToasts?: number\n /** Position of toasts */\n position?: ToastPosition\n /** Show close button on toasts, dismissable has to be true */\n closeButton?: boolean\n} & Omit<SonnerProps, 'richColors' | 'expand' | 'gap' | 'dir' | 'invert'>\n\n/**\n * Toast notification component with customizable styles and behaviors\n * @example\n * ```tsx\n * <Toaster\n * theme=\"light\"\n * visibleToasts={3}\n * position=\"bottom-right\"\n * />\n * ```\n */\nconst Toaster = ({
|
|
1
|
+
{"version":3,"file":"Toaster.js","sources":["../../../src/components/Toaster/Toaster.tsx"],"sourcesContent":["'use client'\n\nimport { CheckCircle, Info, SpinnerGap, Warning, XCircle } from '@phosphor-icons/react'\nimport { Toaster as Sonner, toast as sonnerToast, ToasterProps as SonnerProps } from 'sonner'\n\nimport { buttonVariants } from '../Button'\n\nimport { cn } from '@/lib/utils'\n\n/**\n * Toast message type options\n */\nexport type ToastType = 'success' | 'error' | 'warning' | 'loading' | 'default' | 'info'\n\n/**\n * Toast position options\n * @default 'bottom-right'\n */\nexport type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'\n\n/**\n * Configuration for toast action buttons\n */\nexport type ToastAction = {\n /** Label text for the action button */\n label: string\n /** onClick handler for the action button */\n onClick: () => void\n /** Optional style object for the button */\n style?: React.CSSProperties\n}\n\n/**\n * Options for customizing toast appearance and behavior\n */\nexport type ToastOptions = {\n /** Optional description text below the main message */\n description?: React.ReactNode\n /** Duration in milliseconds to show the toast */\n duration?: number\n /** Custom icon element */\n icon?: React.ReactNode\n /** Position of the toast on screen */\n position?: ToastPosition\n /** ID for programmatically managing the toast */\n id?: string | number\n /** Action button configuration */\n action?: ToastAction\n /** Cancel button configuration */\n cancel?: ToastAction\n /** Callback when toast is dismissed */\n onDismiss?: () => void\n /** Callback when toast auto-closes */\n onAutoClose?: () => void\n /** Whether the toast can be dismissed */\n dismissible?: boolean\n /** Custom CSS classes */\n className?: string\n /** Whether to show the close button at the toast */\n closeButton?: boolean\n}\n\n/**\n * Props for the Toaster component\n */\nexport type ToasterProps = {\n /** Number of visible toasts */\n visibleToasts?: number\n /** Position of toasts */\n position?: ToastPosition\n /** Show close button on toasts, dismissable has to be true */\n closeButton?: boolean\n /** Whether to expand the toast */\n expand?: boolean\n} & Omit<SonnerProps, 'richColors' | 'expand' | 'gap' | 'dir' | 'invert'>\n\n/**\n * Toast notification component with customizable styles and behaviors\n * @example\n * ```tsx\n * <Toaster\n * theme=\"light\"\n * visibleToasts={3}\n * position=\"bottom-right\"\n * />\n * ```\n */\nconst Toaster = ({\n visibleToasts = 3,\n position = 'bottom-right',\n closeButton = false,\n expand = true,\n ...props\n}: ToasterProps) => {\n return (\n <Sonner\n className=\"toaster group\"\n theme=\"light\"\n richColors={false}\n expand={expand}\n visibleToasts={visibleToasts}\n position={position}\n closeButton={closeButton}\n dir=\"ltr\"\n invert={false}\n toastOptions={{\n unstyled: true,\n classNames: {\n toast: cn(\n 'group toast-group flex w-full min-w-[300px] items-center gap-4 px-6 py-3 rounded-lg border text-sm border-1.5 bg-white shadow-toast',\n // Default variant\n 'data-[type=default]:bg-white data-[type=default]:text-black data-[type=default]:border-black',\n // Success variant (green background)\n 'data-[type=success]:bg-success-100 data-[type=success]:text-success-800 data-[type=success]:border-success-500',\n // Error variant (red background)\n 'data-[type=error]:bg-red-100 data-[type=error]:text-red-800 data-[type=error]:border-red-500',\n // Warning variant (primary background)\n 'data-[type=warning]:bg-primary-100 data-[type=warning]:text-accent-900 data-[type=warning]:border-primary-500',\n // Info variant (blue background)\n 'data-[type=info]:bg-blue-100 data-[type=info]:text-blue-800 data-[type=info]:border-blue-500',\n ),\n loader: cn('!static !transform-none data-[visible=false]:hidden'),\n closeButton: cn(\n 'right-0 top-3 left-auto',\n 'p-0 opacity-50 transition-opacity hover:opacity-100 !border-none !bg-transparent',\n '[&_svg]:h-4 [&_svg]:w-4',\n ),\n actionButton: cn(\n buttonVariants({\n variant: 'primary',\n size: 'sm',\n }),\n ),\n cancelButton: cn(\n buttonVariants({\n variant: 'ghost',\n size: 'sm',\n }),\n ),\n },\n }}\n icons={{\n success: <CheckCircle size={24} />,\n warning: <Warning size={24} />,\n error: <XCircle size={24} />,\n info: <Info size={24} />,\n loading: (\n <div className=\"flex h-6 w-6 items-center justify-center\">\n <SpinnerGap size={20} className=\"animate-spin\" />\n </div>\n ),\n }}\n {...props}\n />\n )\n}\n\nconst toast = Object.assign((message: React.ReactNode, options?: ToastOptions) => sonnerToast(message, options), {\n info: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.info(message, options),\n success: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.success(message, options),\n error: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.error(message, options),\n warning: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.warning(message, options),\n loading: (message: React.ReactNode, options?: ToastOptions) => sonnerToast.loading(message, options),\n promise: <T,>(\n promise: Promise<T>,\n opts: {\n loading: React.ReactNode\n success: React.ReactNode | ((data: T) => React.ReactNode)\n error: React.ReactNode | ((error: Error) => React.ReactNode)\n duration?: number\n description?: React.ReactNode\n position?: ToastPosition\n id?: string\n icon?: React.ReactNode\n className?: string\n dismissible?: boolean\n closeButton?: boolean\n },\n ) => sonnerToast.promise(promise, opts),\n dismiss: (toastId: string | number) => sonnerToast.dismiss(toastId),\n custom: (render: (id: string | number) => React.ReactElement, options?: ToastOptions) =>\n sonnerToast.custom(render, options),\n})\n\nexport { Toaster, toast }\n"],"names":[],"mappings":";;;;;;;AAuFA;AAAiB;AACC;AACL;AACG;AACL;AAEX;AACE;AACE;AAAC;AAAA;AACW;AACJ;AACM;AACZ;AACA;AACA;AACA;AACI;AACI;AACM;AACF;AACE;AACH;AACL;AAAA;AAEA;AAAA;AAEA;AAAA;AAEA;AAAA;AAEA;AAAA;AAEA;AACF;AACgE;AACnD;AACX;AACA;AACA;AACF;AACc;AACG;AACJ;AACH;AACP;AACH;AACc;AACG;AACJ;AACH;AACP;AACH;AACF;AACF;AACO;AAC2B;AACJ;AACF;AACJ;AAIpB;AAEJ;AACI;AAAA;AAGV;AAEA;AAAiH;AAClB;AACM;AACJ;AACI;AACA;AAgB7D;AAC4B;AAGpE;;"}
|
package/dist/theme.css
CHANGED
|
@@ -123,7 +123,7 @@
|
|
|
123
123
|
--shadow-tooltip: 0 2px 5px 2px rgba(0, 0, 0, 0.1);
|
|
124
124
|
--shadow-toast: 0 4px 12px #0000001a;
|
|
125
125
|
|
|
126
|
-
--width-1_5: 1.5px;
|
|
126
|
+
--border-width-1_5: 1.5px;
|
|
127
127
|
|
|
128
128
|
--animate-marquee: marquee 60s infinite linear;
|
|
129
129
|
--animate-marquee-vertical: marquee-vertical 60s linear infinite;
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|