@ttoss/components 2.14.24 → 2.14.26

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.
Files changed (47) hide show
  1. package/dist/index.d.mts +910 -0
  2. package/dist/index.mjs +3074 -0
  3. package/package.json +18 -104
  4. package/dist/Accordion/index.d.mts +0 -157
  5. package/dist/Accordion/index.mjs +0 -175
  6. package/dist/DatePicker/index.d.mts +0 -26
  7. package/dist/DatePicker/index.mjs +0 -339
  8. package/dist/Drawer/index.d.mts +0 -17
  9. package/dist/Drawer/index.mjs +0 -66
  10. package/dist/EnhancedTitle/index.d.mts +0 -107
  11. package/dist/EnhancedTitle/index.mjs +0 -234
  12. package/dist/FileUploader/index.d.mts +0 -77
  13. package/dist/FileUploader/index.mjs +0 -386
  14. package/dist/InstallPwa/index.d.mts +0 -13
  15. package/dist/InstallPwa/index.mjs +0 -64
  16. package/dist/JsonEditor/index.d.mts +0 -3
  17. package/dist/JsonEditor/index.mjs +0 -3
  18. package/dist/JsonView/index.d.mts +0 -3
  19. package/dist/JsonView/index.mjs +0 -3
  20. package/dist/List/index.d.mts +0 -16
  21. package/dist/List/index.mjs +0 -34
  22. package/dist/LockedOverlay/index.d.mts +0 -162
  23. package/dist/LockedOverlay/index.mjs +0 -386
  24. package/dist/Markdown/index.d.mts +0 -16
  25. package/dist/Markdown/index.mjs +0 -26
  26. package/dist/Menu/index.d.mts +0 -16
  27. package/dist/Menu/index.mjs +0 -136
  28. package/dist/MetricCard/index.d.mts +0 -153
  29. package/dist/MetricCard/index.mjs +0 -408
  30. package/dist/Modal/index.d.mts +0 -11
  31. package/dist/Modal/index.mjs +0 -64
  32. package/dist/NavList/index.d.mts +0 -64
  33. package/dist/NavList/index.mjs +0 -252
  34. package/dist/NotificationCard/index.d.mts +0 -22
  35. package/dist/NotificationCard/index.mjs +0 -173
  36. package/dist/NotificationsMenu/index.d.mts +0 -47
  37. package/dist/NotificationsMenu/index.mjs +0 -380
  38. package/dist/Search/index.d.mts +0 -18
  39. package/dist/Search/index.mjs +0 -31
  40. package/dist/SpotlightCard/index.d.mts +0 -36
  41. package/dist/SpotlightCard/index.mjs +0 -219
  42. package/dist/Table/index.d.mts +0 -17
  43. package/dist/Table/index.mjs +0 -64
  44. package/dist/Tabs/index.d.mts +0 -17
  45. package/dist/Tabs/index.mjs +0 -87
  46. package/dist/Toast/index.d.mts +0 -8
  47. package/dist/Toast/index.mjs +0 -43
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ttoss/components",
3
- "version": "2.14.24",
3
+ "version": "2.14.26",
4
4
  "description": "React components for ttoss ecosystem.",
5
5
  "keywords": [
6
6
  "React",
@@ -19,93 +19,9 @@
19
19
  "sideEffects": false,
20
20
  "type": "module",
21
21
  "exports": {
22
- "./Accordion": {
23
- "types": "./dist/Accordion/index.d.ts",
24
- "default": "./dist/esm/Accordion/index.js"
25
- },
26
- "./DatePicker": {
27
- "types": "./dist/DatePicker/index.d.ts",
28
- "default": "./dist/esm/DatePicker/index.js"
29
- },
30
- "./Drawer": {
31
- "types": "./dist/Drawer/index.d.ts",
32
- "default": "./dist/esm/Drawer/index.js"
33
- },
34
- "./EnhancedTitle": {
35
- "types": "./dist/EnhancedTitle/index.d.ts",
36
- "default": "./dist/esm/EnhancedTitle/index.js"
37
- },
38
- "./InstallPwa": {
39
- "types": "./dist/InstallPwa/index.d.ts",
40
- "default": "./dist/esm/InstallPwa/index.js"
41
- },
42
- "./FileUploader": {
43
- "types": "./dist/FileUploader/index.d.ts",
44
- "default": "./dist/esm/FileUploader/index.js"
45
- },
46
- "./JsonEditor": {
47
- "types": "./dist/JsonEditor/index.d.ts",
48
- "default": "./dist/esm/JsonEditor/index.js"
49
- },
50
- "./JsonView": {
51
- "types": "./dist/JsonView/index.d.ts",
52
- "default": "./dist/esm/JsonView/index.js"
53
- },
54
- "./List": {
55
- "types": "./dist/List/index.d.ts",
56
- "default": "./dist/esm/List/index.js"
57
- },
58
- "./LockedOverlay": {
59
- "types": "./dist/LockedOverlay/index.d.ts",
60
- "default": "./dist/esm/LockedOverlay/index.js"
61
- },
62
- "./Markdown": {
63
- "types": "./dist/Markdown/index.d.ts",
64
- "default": "./dist/esm/Markdown/index.js"
65
- },
66
- "./Menu": {
67
- "types": "./dist/Menu/index.d.ts",
68
- "default": "./dist/esm/Menu/index.js"
69
- },
70
- "./MetricCard": {
71
- "types": "./dist/MetricCard/index.d.ts",
72
- "default": "./dist/esm/MetricCard/index.js"
73
- },
74
- "./Modal": {
75
- "types": "./dist/Modal/index.d.ts",
76
- "default": "./dist/esm/Modal/index.js"
77
- },
78
- "./NavList": {
79
- "types": "./dist/NavList/index.d.ts",
80
- "default": "./dist/esm/NavList/index.js"
81
- },
82
- "./NotificationCard": {
83
- "types": "./dist/NotificationCard/index.d.ts",
84
- "default": "./dist/esm/NotificationCard/index.js"
85
- },
86
- "./NotificationsMenu": {
87
- "types": "./dist/NotificationsMenu/index.d.ts",
88
- "default": "./dist/esm/NotificationsMenu/index.js"
89
- },
90
- "./SpotlightCard": {
91
- "types": "./dist/SpotlightCard/index.d.ts",
92
- "default": "./dist/esm/SpotlightCard/index.js"
93
- },
94
- "./Search": {
95
- "types": "./dist/Search/index.d.ts",
96
- "default": "./dist/esm/Search/index.js"
97
- },
98
- "./Table": {
99
- "types": "./dist/Table/index.d.ts",
100
- "default": "./dist/esm/Table/index.js"
101
- },
102
- "./Tabs": {
103
- "types": "./dist/Tabs/index.d.ts",
104
- "default": "./dist/esm/Tabs/index.js"
105
- },
106
- "./Toast": {
107
- "types": "./dist/Toast/index.d.ts",
108
- "default": "./dist/esm/Toast/index.js"
22
+ ".": {
23
+ "types": "./dist/index.d.mts",
24
+ "default": "./dist/index.mjs"
109
25
  }
110
26
  },
111
27
  "files": [
@@ -130,24 +46,24 @@
130
46
  "devDependencies": {
131
47
  "@types/jest": "^30.0.0",
132
48
  "@types/react": "^19.2.14",
133
- "jest": "^30.3.0",
49
+ "jest": "^30.4.2",
134
50
  "react": "^19.2.6",
135
- "tsdown": "^0.22.0",
51
+ "tsdown": "^0.22.2",
136
52
  "tsx": "^4.21.0",
137
- "@ttoss/config": "^1.37.15",
138
- "@ttoss/i18n-cli": "^0.8.15",
139
- "@ttoss/react-i18n": "^2.2.17",
140
- "@ttoss/react-hooks": "^2.3.16",
141
- "@ttoss/react-icons": "^0.7.17",
142
- "@ttoss/test-utils": "^4.2.15",
143
- "@ttoss/ui": "^6.9.23"
53
+ "@ttoss/config": "^1.37.16",
54
+ "@ttoss/react-i18n": "^2.2.19",
55
+ "@ttoss/react-hooks": "^2.3.18",
56
+ "@ttoss/i18n-cli": "^0.8.16",
57
+ "@ttoss/react-icons": "^0.7.19",
58
+ "@ttoss/ui": "^6.9.25",
59
+ "@ttoss/test-utils": "^4.2.17"
144
60
  },
145
61
  "peerDependencies": {
146
62
  "react": ">=16.8.0",
147
- "@ttoss/react-i18n": "^2.2.17",
148
- "@ttoss/ui": "^6.9.23",
149
- "@ttoss/react-hooks": "^2.3.16",
150
- "@ttoss/react-icons": "^0.7.17"
63
+ "@ttoss/react-icons": "^0.7.19",
64
+ "@ttoss/ui": "^6.9.25",
65
+ "@ttoss/react-hooks": "^2.3.18",
66
+ "@ttoss/react-i18n": "^2.2.19"
151
67
  },
152
68
  "publishConfig": {
153
69
  "access": "public",
@@ -156,10 +72,8 @@
156
72
  "gitHead": "e2b509ee8717f07f7365191b651dcbb5f080e05a",
157
73
  "scripts": {
158
74
  "build": "tsdown",
159
- "postbuild": "pnpm run update-package-json-exports",
160
75
  "dev": "pnpm -r --filter=@docs/storybook run dev",
161
76
  "i18n": "ttoss-i18n",
162
- "test": "jest --projects tests/unit",
163
- "update-package-json-exports": "tsx scripts/updatePackageJsonExports.ts"
77
+ "test": "jest --projects tests/unit"
164
78
  }
165
79
  }
@@ -1,157 +0,0 @@
1
-
2
- import { BoxProps } from "@ttoss/ui";
3
- import * as React from "react";
4
-
5
- //#region src/components/Accordion/Accordion.d.ts
6
- /**
7
- * Individual item for the Accordion component.
8
- */
9
- type AccordionItem = {
10
- /**
11
- * Unique identifier for the accordion item.
12
- * If not provided, will use the index as the key.
13
- */
14
- id?: string;
15
- /**
16
- * Title displayed in the accordion header.
17
- */
18
- title: React.ReactNode;
19
- /**
20
- * Content displayed when the accordion item is expanded.
21
- */
22
- content: React.ReactNode;
23
- /**
24
- * Whether the item is disabled.
25
- * @default false
26
- */
27
- disabled?: boolean;
28
- };
29
- /**
30
- * Render props for custom accordion item rendering.
31
- */
32
- type AccordionRenderItemProps = {
33
- /**
34
- * The accordion item data.
35
- */
36
- item: AccordionItem;
37
- /**
38
- * Index of the item in the items array.
39
- */
40
- index: number;
41
- /**
42
- * Whether the item is currently expanded.
43
- */
44
- isExpanded: boolean;
45
- /**
46
- * Function to toggle the item's expanded state.
47
- */
48
- toggle: () => void;
49
- /**
50
- * Generated IDs for accessibility.
51
- */
52
- ids: {
53
- itemId: string;
54
- headingId: string;
55
- panelId: string;
56
- };
57
- };
58
- /**
59
- * Props for the Accordion component.
60
- */
61
- type AccordionProps = BoxProps & {
62
- /**
63
- * Array of accordion items to render.
64
- */
65
- items: AccordionItem[];
66
- /**
67
- * Whether multiple items can be expanded at once.
68
- * @default false
69
- */
70
- multiple?: boolean;
71
- /**
72
- * Index or array of indices for initially expanded items.
73
- */
74
- defaultExpanded?: number | number[];
75
- /**
76
- * Callback invoked when items are expanded or collapsed.
77
- * Receives array of currently expanded indices.
78
- */
79
- onAccordionChange?: (expandedIndices: number[]) => void;
80
- /**
81
- * Custom render function for accordion items.
82
- * Provides full control over item rendering while maintaining accessibility.
83
- */
84
- renderItem?: (props: AccordionRenderItemProps) => React.ReactNode;
85
- };
86
- /**
87
- * Accessible accordion component with collapsible content sections.
88
- *
89
- * This component provides a simplified API for creating expandable/collapsible
90
- * content sections. It uses design tokens from @ttoss/theme for consistent styling
91
- * and follows WAI-ARIA accordion pattern for accessibility.
92
- *
93
- * @example
94
- * ```tsx
95
- * <Accordion
96
- * items={[
97
- * {
98
- * title: 'Section 1',
99
- * content: 'Content for section 1',
100
- * },
101
- * {
102
- * title: 'Section 2',
103
- * content: 'Content for section 2',
104
- * },
105
- * ]}
106
- * />
107
- * ```
108
- *
109
- * @example
110
- * ```tsx
111
- * <Accordion
112
- * multiple
113
- * defaultExpanded={[0, 1]}
114
- * items={[
115
- * {
116
- * id: 'item-1',
117
- * title: 'Pre-expanded Section 1',
118
- * content: <div>Rich content</div>,
119
- * },
120
- * {
121
- * id: 'item-2',
122
- * title: 'Pre-expanded Section 2',
123
- * content: <p>More content</p>,
124
- * },
125
- * ]}
126
- * onAccordionChange={(expanded) => console.log('Expanded items:', expanded)}
127
- * />
128
- * ```
129
- *
130
- * @example
131
- * ```tsx
132
- * // Custom rendering with renderItem
133
- * <Accordion
134
- * items={items}
135
- * renderItem={({ item, isExpanded, toggle, ids }) => (
136
- * <CustomAccordionItem
137
- * item={item}
138
- * isExpanded={isExpanded}
139
- * onToggle={toggle}
140
- * headingId={ids.headingId}
141
- * panelId={ids.panelId}
142
- * />
143
- * )}
144
- * />
145
- * ```
146
- */
147
- declare const Accordion: ({
148
- items,
149
- multiple,
150
- defaultExpanded,
151
- onAccordionChange,
152
- renderItem,
153
- sx,
154
- ...boxProps
155
- }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
156
- //#endregion
157
- export { Accordion, AccordionItem, AccordionProps, AccordionRenderItemProps };
@@ -1,175 +0,0 @@
1
- /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
- import { Box, Button } from "@ttoss/ui";
3
- import * as React from "react";
4
- import { jsx, jsxs } from "react/jsx-runtime";
5
-
6
- //#region src/components/Accordion/Accordion.tsx
7
- /**
8
- * Accessible accordion component with collapsible content sections.
9
- *
10
- * This component provides a simplified API for creating expandable/collapsible
11
- * content sections. It uses design tokens from @ttoss/theme for consistent styling
12
- * and follows WAI-ARIA accordion pattern for accessibility.
13
- *
14
- * @example
15
- * ```tsx
16
- * <Accordion
17
- * items={[
18
- * {
19
- * title: 'Section 1',
20
- * content: 'Content for section 1',
21
- * },
22
- * {
23
- * title: 'Section 2',
24
- * content: 'Content for section 2',
25
- * },
26
- * ]}
27
- * />
28
- * ```
29
- *
30
- * @example
31
- * ```tsx
32
- * <Accordion
33
- * multiple
34
- * defaultExpanded={[0, 1]}
35
- * items={[
36
- * {
37
- * id: 'item-1',
38
- * title: 'Pre-expanded Section 1',
39
- * content: <div>Rich content</div>,
40
- * },
41
- * {
42
- * id: 'item-2',
43
- * title: 'Pre-expanded Section 2',
44
- * content: <p>More content</p>,
45
- * },
46
- * ]}
47
- * onAccordionChange={(expanded) => console.log('Expanded items:', expanded)}
48
- * />
49
- * ```
50
- *
51
- * @example
52
- * ```tsx
53
- * // Custom rendering with renderItem
54
- * <Accordion
55
- * items={items}
56
- * renderItem={({ item, isExpanded, toggle, ids }) => (
57
- * <CustomAccordionItem
58
- * item={item}
59
- * isExpanded={isExpanded}
60
- * onToggle={toggle}
61
- * headingId={ids.headingId}
62
- * panelId={ids.panelId}
63
- * />
64
- * )}
65
- * />
66
- * ```
67
- */
68
- var Accordion = ({
69
- items,
70
- multiple = false,
71
- defaultExpanded,
72
- onAccordionChange,
73
- renderItem,
74
- sx,
75
- ...boxProps
76
- }) => {
77
- const [expandedIndices, setExpandedIndices] = React.useState(() => {
78
- if (defaultExpanded === void 0) return [];
79
- return Array.isArray(defaultExpanded) ? defaultExpanded : [defaultExpanded];
80
- });
81
- const toggleItem = React.useCallback(index => {
82
- setExpandedIndices(prev => {
83
- const isExpanded = prev.includes(index);
84
- let newExpanded;
85
- if (isExpanded) newExpanded = prev.filter(i => {
86
- return i !== index;
87
- });else newExpanded = multiple ? [...prev, index] : [index];
88
- onAccordionChange?.(newExpanded);
89
- return newExpanded;
90
- });
91
- }, [multiple, onAccordionChange]);
92
- return /* @__PURE__ */jsx(Box, {
93
- sx: {
94
- display: "flex",
95
- flexDirection: "column",
96
- gap: 2,
97
- ...sx
98
- },
99
- ...boxProps,
100
- children: items.map((item, index) => {
101
- const isExpanded = expandedIndices.includes(index);
102
- const itemId = item.id || `accordion-item-${index}`;
103
- const headingId = `${itemId}-heading`;
104
- const panelId = `${itemId}-panel`;
105
- if (renderItem) return /* @__PURE__ */jsx(React.Fragment, {
106
- children: renderItem({
107
- item,
108
- index,
109
- isExpanded,
110
- toggle: () => {
111
- return toggleItem(index);
112
- },
113
- ids: {
114
- itemId,
115
- headingId,
116
- panelId
117
- }
118
- })
119
- }, itemId);
120
- return /* @__PURE__ */jsxs(Box, {
121
- sx: {
122
- border: "sm",
123
- borderColor: "display.border.muted.default",
124
- borderRadius: "md",
125
- overflow: "hidden"
126
- },
127
- children: [/* @__PURE__ */jsx(Button, {
128
- id: headingId,
129
- type: "button",
130
- disabled: item.disabled,
131
- onClick: () => {
132
- toggleItem(index);
133
- },
134
- "aria-expanded": isExpanded,
135
- "aria-controls": panelId,
136
- rightIcon: isExpanded ? "chevron-up" : "chevron-down",
137
- sx: {
138
- width: "100%",
139
- justifyContent: "space-between",
140
- backgroundColor: isExpanded ? "display.background.muted.default" : "display.background.primary.default",
141
- color: item.disabled ? "display.text.muted.default" : "display.text.primary.default",
142
- fontWeight: 500,
143
- border: "none",
144
- borderRadius: 0,
145
- transition: "background-color 0.2s ease",
146
- "&:hover:not(:disabled)": {
147
- backgroundColor: "display.background.muted.default"
148
- },
149
- "&:focus": {
150
- outline: "none",
151
- boxShadow: theme => {
152
- return `inset 0 0 0 1px ${theme.colors?.input?.border?.accent?.default || "currentColor"}`;
153
- }
154
- }
155
- },
156
- children: item.title
157
- }), isExpanded && /* @__PURE__ */jsx(Box, {
158
- id: panelId,
159
- role: "region",
160
- "aria-labelledby": headingId,
161
- sx: {
162
- padding: 4,
163
- borderTop: "sm",
164
- borderColor: "display.border.muted.default",
165
- backgroundColor: "display.background.primary.default"
166
- },
167
- children: item.content
168
- })]
169
- }, itemId);
170
- })
171
- });
172
- };
173
-
174
- //#endregion
175
- export { Accordion };
@@ -1,26 +0,0 @@
1
-
2
- //#region src/components/DatePicker/DatePicker.d.ts
3
- interface DateRange {
4
- from: Date | undefined;
5
- to: Date | undefined;
6
- }
7
- interface DateRangePreset {
8
- label: string;
9
- getValue: () => DateRange;
10
- }
11
- interface DatePickerProps {
12
- label?: string;
13
- value?: DateRange;
14
- presets?: DateRangePreset[];
15
- onChange?: (range: DateRange | undefined) => void;
16
- disabled?: boolean;
17
- }
18
- declare const DatePicker: ({
19
- label,
20
- value,
21
- presets,
22
- onChange,
23
- disabled
24
- }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
25
- //#endregion
26
- export { DatePicker, DateRange };