@fleetia/components 1.1.1

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 (245) hide show
  1. package/dist/Badge/Badge.css.d.ts +1 -0
  2. package/dist/Badge/Badge.d.ts +7 -0
  3. package/dist/Badge/Badge.js +9 -0
  4. package/dist/Badge/Badge.styles.js +6 -0
  5. package/dist/Badge/index.d.ts +1 -0
  6. package/dist/Badge/index.js +1 -0
  7. package/dist/Box/Box.css.d.ts +4 -0
  8. package/dist/Box/Box.d.ts +8 -0
  9. package/dist/Box/Box.js +14 -0
  10. package/dist/Box/Box.styles.js +9 -0
  11. package/dist/Box/index.d.ts +1 -0
  12. package/dist/Box/index.js +1 -0
  13. package/dist/Breadcrumb/Breadcrumb.css.d.ts +4 -0
  14. package/dist/Breadcrumb/Breadcrumb.d.ts +11 -0
  15. package/dist/Breadcrumb/Breadcrumb.js +10 -0
  16. package/dist/Breadcrumb/Breadcrumb.styles.js +9 -0
  17. package/dist/Breadcrumb/index.d.ts +1 -0
  18. package/dist/Breadcrumb/index.js +1 -0
  19. package/dist/Button/Button.css.d.ts +2 -0
  20. package/dist/Button/Button.d.ts +12 -0
  21. package/dist/Button/Button.js +9 -0
  22. package/dist/Button/Button.styles.js +7 -0
  23. package/dist/Button/index.d.ts +1 -0
  24. package/dist/Button/index.js +1 -0
  25. package/dist/CardPagination/CardPagination.css.d.ts +3 -0
  26. package/dist/CardPagination/CardPagination.d.ts +9 -0
  27. package/dist/CardPagination/CardPagination.js +15 -0
  28. package/dist/CardPagination/CardPagination.styles.js +8 -0
  29. package/dist/CardPagination/index.d.ts +1 -0
  30. package/dist/CardPagination/index.js +1 -0
  31. package/dist/Checkbox/Checkbox.css.d.ts +3 -0
  32. package/dist/Checkbox/Checkbox.d.ts +9 -0
  33. package/dist/Checkbox/Checkbox.js +11 -0
  34. package/dist/Checkbox/Checkbox.styles.js +8 -0
  35. package/dist/Checkbox/index.d.ts +1 -0
  36. package/dist/Checkbox/index.js +1 -0
  37. package/dist/CollapsibleSection/CollapsibleSection.css.d.ts +3 -0
  38. package/dist/CollapsibleSection/CollapsibleSection.d.ts +8 -0
  39. package/dist/CollapsibleSection/CollapsibleSection.js +11 -0
  40. package/dist/CollapsibleSection/CollapsibleSection.styles.js +8 -0
  41. package/dist/CollapsibleSection/index.d.ts +1 -0
  42. package/dist/CollapsibleSection/index.js +1 -0
  43. package/dist/ColorPicker/ColorPicker.constants.d.ts +5 -0
  44. package/dist/ColorPicker/ColorPicker.constants.js +8 -0
  45. package/dist/ColorPicker/ColorPicker.css.d.ts +19 -0
  46. package/dist/ColorPicker/ColorPicker.d.ts +6 -0
  47. package/dist/ColorPicker/ColorPicker.js +55 -0
  48. package/dist/ColorPicker/ColorPicker.styles.js +24 -0
  49. package/dist/ColorPicker/ColorPicker.type.d.ts +8 -0
  50. package/dist/ColorPicker/ColorPicker.utils.d.ts +6 -0
  51. package/dist/ColorPicker/ColorPicker.utils.js +49 -0
  52. package/dist/ColorPicker/NativeColorPicker.d.ts +2 -0
  53. package/dist/ColorPicker/NativeColorPicker.js +13 -0
  54. package/dist/ColorPicker/index.d.ts +1 -0
  55. package/dist/ColorPicker/index.js +1 -0
  56. package/dist/ColorPicker/useColorPanel.d.ts +11 -0
  57. package/dist/ColorPicker/useColorPanel.js +38 -0
  58. package/dist/ColorPicker/useColorWheel.d.ts +18 -0
  59. package/dist/ColorPicker/useColorWheel.js +232 -0
  60. package/dist/ColorRow/ColorRow.css.d.ts +1 -0
  61. package/dist/ColorRow/ColorRow.d.ts +9 -0
  62. package/dist/ColorRow/ColorRow.js +9 -0
  63. package/dist/ColorRow/ColorRow.styles.js +5 -0
  64. package/dist/ColorRow/index.d.ts +1 -0
  65. package/dist/ColorRow/index.js +1 -0
  66. package/dist/ConfirmDialog/ConfirmDialog.css.d.ts +7 -0
  67. package/dist/ConfirmDialog/ConfirmDialog.d.ts +4 -0
  68. package/dist/ConfirmDialog/ConfirmDialog.js +22 -0
  69. package/dist/ConfirmDialog/ConfirmDialog.styles.js +12 -0
  70. package/dist/ConfirmDialog/ConfirmDialog.type.d.ts +9 -0
  71. package/dist/ConfirmDialog/index.d.ts +1 -0
  72. package/dist/ConfirmDialog/index.js +1 -0
  73. package/dist/ContextMenu/ContextMenu.css.d.ts +3 -0
  74. package/dist/ContextMenu/ContextMenu.d.ts +5 -0
  75. package/dist/ContextMenu/ContextMenu.js +16 -0
  76. package/dist/ContextMenu/ContextMenu.styles.js +8 -0
  77. package/dist/ContextMenu/ContextMenu.type.d.ts +11 -0
  78. package/dist/ContextMenu/index.d.ts +1 -0
  79. package/dist/ContextMenu/index.js +1 -0
  80. package/dist/ContextMenu/useContextMenuKeyboard.d.ts +5 -0
  81. package/dist/ContextMenu/useContextMenuKeyboard.js +63 -0
  82. package/dist/ContextMenu/useViewportClamp.d.ts +2 -0
  83. package/dist/ContextMenu/useViewportClamp.js +18 -0
  84. package/dist/DateInput/DateInput.css.d.ts +5 -0
  85. package/dist/DateInput/DateInput.d.ts +11 -0
  86. package/dist/DateInput/DateInput.js +23 -0
  87. package/dist/DateInput/DateInput.styles.js +10 -0
  88. package/dist/DateInput/index.d.ts +1 -0
  89. package/dist/DateInput/index.js +1 -0
  90. package/dist/IconButton/IconButton.css.d.ts +7 -0
  91. package/dist/IconButton/IconButton.d.ts +5 -0
  92. package/dist/IconButton/IconButton.js +22 -0
  93. package/dist/IconButton/IconButton.styles.js +12 -0
  94. package/dist/IconButton/IconButton.type.d.ts +27 -0
  95. package/dist/IconButton/index.d.ts +1 -0
  96. package/dist/IconButton/index.js +1 -0
  97. package/dist/Modal/Modal.css.d.ts +6 -0
  98. package/dist/Modal/Modal.d.ts +4 -0
  99. package/dist/Modal/Modal.js +19 -0
  100. package/dist/Modal/Modal.styles.js +11 -0
  101. package/dist/Modal/Modal.type.d.ts +9 -0
  102. package/dist/Modal/index.d.ts +1 -0
  103. package/dist/Modal/index.js +1 -0
  104. package/dist/NavigationButton/NavigationButton.css.d.ts +1 -0
  105. package/dist/NavigationButton/NavigationButton.d.ts +8 -0
  106. package/dist/NavigationButton/NavigationButton.js +14 -0
  107. package/dist/NavigationButton/NavigationButton.styles.js +6 -0
  108. package/dist/NavigationButton/index.d.ts +1 -0
  109. package/dist/NavigationButton/index.js +1 -0
  110. package/dist/PositionGrid/PositionGrid.css.d.ts +10 -0
  111. package/dist/PositionGrid/PositionGrid.d.ts +5 -0
  112. package/dist/PositionGrid/PositionGrid.js +17 -0
  113. package/dist/PositionGrid/PositionGrid.styles.js +15 -0
  114. package/dist/PositionGrid/PositionGrid.type.d.ts +13 -0
  115. package/dist/PositionGrid/index.d.ts +1 -0
  116. package/dist/PositionGrid/index.js +1 -0
  117. package/dist/RadioGroup/RadioGroup.css.d.ts +3 -0
  118. package/dist/RadioGroup/RadioGroup.d.ts +15 -0
  119. package/dist/RadioGroup/RadioGroup.js +15 -0
  120. package/dist/RadioGroup/RadioGroup.styles.js +8 -0
  121. package/dist/RadioGroup/index.d.ts +1 -0
  122. package/dist/RadioGroup/index.js +1 -0
  123. package/dist/RangeInput/RangeInput.css.d.ts +4 -0
  124. package/dist/RangeInput/RangeInput.d.ts +12 -0
  125. package/dist/RangeInput/RangeInput.js +10 -0
  126. package/dist/RangeInput/RangeInput.styles.js +9 -0
  127. package/dist/RangeInput/index.d.ts +1 -0
  128. package/dist/RangeInput/index.js +1 -0
  129. package/dist/Select/Select.css.d.ts +4 -0
  130. package/dist/Select/Select.d.ts +20 -0
  131. package/dist/Select/Select.js +15 -0
  132. package/dist/Select/Select.styles.js +8 -0
  133. package/dist/Select/index.d.ts +1 -0
  134. package/dist/Select/index.js +1 -0
  135. package/dist/Sidebar/Sidebar.css.d.ts +3 -0
  136. package/dist/Sidebar/Sidebar.d.ts +10 -0
  137. package/dist/Sidebar/Sidebar.js +9 -0
  138. package/dist/Sidebar/Sidebar.styles.js +8 -0
  139. package/dist/Sidebar/index.d.ts +1 -0
  140. package/dist/Sidebar/index.js +1 -0
  141. package/dist/Tabs/Tabs.css.d.ts +5 -0
  142. package/dist/Tabs/Tabs.d.ts +14 -0
  143. package/dist/Tabs/Tabs.js +33 -0
  144. package/dist/Tabs/Tabs.styles.js +10 -0
  145. package/dist/Tabs/index.d.ts +1 -0
  146. package/dist/Tabs/index.js +1 -0
  147. package/dist/TextInput/TextInput.css.d.ts +5 -0
  148. package/dist/TextInput/TextInput.d.ts +17 -0
  149. package/dist/TextInput/TextInput.js +14 -0
  150. package/dist/TextInput/TextInput.styles.js +10 -0
  151. package/dist/TextInput/index.d.ts +1 -0
  152. package/dist/TextInput/index.js +1 -0
  153. package/dist/Toggle/Toggle.css.d.ts +4 -0
  154. package/dist/Toggle/Toggle.d.ts +9 -0
  155. package/dist/Toggle/Toggle.js +14 -0
  156. package/dist/Toggle/Toggle.styles.js +9 -0
  157. package/dist/Toggle/index.d.ts +1 -0
  158. package/dist/Toggle/index.js +1 -0
  159. package/dist/Tree/Tree.css.d.ts +10 -0
  160. package/dist/Tree/Tree.d.ts +4 -0
  161. package/dist/Tree/Tree.js +72 -0
  162. package/dist/Tree/Tree.styles.js +15 -0
  163. package/dist/Tree/Tree.type.d.ts +26 -0
  164. package/dist/Tree/TreeLevel.d.ts +3 -0
  165. package/dist/Tree/TreeLevel.js +42 -0
  166. package/dist/Tree/index.d.ts +1 -0
  167. package/dist/Tree/index.js +1 -0
  168. package/dist/hooks/index.d.ts +2 -0
  169. package/dist/hooks/index.js +2 -0
  170. package/dist/hooks/useBodyScrollLock.d.ts +1 -0
  171. package/dist/hooks/useBodyScrollLock.js +15 -0
  172. package/dist/hooks/useFocusTrap.d.ts +7 -0
  173. package/dist/hooks/useFocusTrap.js +59 -0
  174. package/dist/i18n/I18nProvider.d.ts +8 -0
  175. package/dist/i18n/I18nProvider.js +13 -0
  176. package/dist/i18n/context.d.ts +9 -0
  177. package/dist/i18n/context.js +15 -0
  178. package/dist/i18n/index.d.ts +3 -0
  179. package/dist/i18n/index.js +2 -0
  180. package/dist/i18n/locales/en.d.ts +3 -0
  181. package/dist/i18n/locales/en.js +152 -0
  182. package/dist/i18n/locales/ja.d.ts +3 -0
  183. package/dist/i18n/locales/ja.js +152 -0
  184. package/dist/i18n/locales/ko.d.ts +3 -0
  185. package/dist/i18n/locales/ko.js +152 -0
  186. package/dist/i18n/types.d.ts +3 -0
  187. package/dist/icons/ChevronLeftIcon.d.ts +7 -0
  188. package/dist/icons/ChevronLeftIcon.js +7 -0
  189. package/dist/icons/ChevronRightIcon.d.ts +7 -0
  190. package/dist/icons/ChevronRightIcon.js +7 -0
  191. package/dist/icons/DragHandleIcon.d.ts +7 -0
  192. package/dist/icons/DragHandleIcon.js +7 -0
  193. package/dist/icons/EyeIcon.d.ts +8 -0
  194. package/dist/icons/EyeIcon.js +10 -0
  195. package/dist/icons/FolderIcon.d.ts +7 -0
  196. package/dist/icons/FolderIcon.js +7 -0
  197. package/dist/icons/GearIcon.d.ts +7 -0
  198. package/dist/icons/GearIcon.js +7 -0
  199. package/dist/icons/TriangleDownIcon.d.ts +7 -0
  200. package/dist/icons/TriangleDownIcon.js +7 -0
  201. package/dist/icons/TriangleUpIcon.d.ts +7 -0
  202. package/dist/icons/TriangleUpIcon.js +7 -0
  203. package/dist/icons/index.d.ts +8 -0
  204. package/dist/icons/index.js +8 -0
  205. package/dist/index.d.ts +5 -0
  206. package/dist/index.js +6 -0
  207. package/dist/styles/Badge/Badge.css +22 -0
  208. package/dist/styles/Box/Box.css +20 -0
  209. package/dist/styles/Breadcrumb/Breadcrumb.css +28 -0
  210. package/dist/styles/Button/Button.css +51 -0
  211. package/dist/styles/CardPagination/CardPagination.css +29 -0
  212. package/dist/styles/Checkbox/Checkbox.css +22 -0
  213. package/dist/styles/CollapsibleSection/CollapsibleSection.css +21 -0
  214. package/dist/styles/ColorPicker/ColorPicker.css +153 -0
  215. package/dist/styles/ColorRow/ColorRow.css +9 -0
  216. package/dist/styles/ConfirmDialog/ConfirmDialog.css +52 -0
  217. package/dist/styles/ContextMenu/ContextMenu.css +34 -0
  218. package/dist/styles/DateInput/DateInput.css +47 -0
  219. package/dist/styles/IconButton/IconButton.css +79 -0
  220. package/dist/styles/Modal/Modal.css +58 -0
  221. package/dist/styles/NavigationButton/NavigationButton.css +13 -0
  222. package/dist/styles/PositionGrid/PositionGrid.css +70 -0
  223. package/dist/styles/RadioGroup/RadioGroup.css +26 -0
  224. package/dist/styles/RangeInput/RangeInput.css +33 -0
  225. package/dist/styles/Select/Select.css +39 -0
  226. package/dist/styles/Sidebar/Sidebar.css +18 -0
  227. package/dist/styles/Tabs/Tabs.css +61 -0
  228. package/dist/styles/TextInput/TextInput.css +37 -0
  229. package/dist/styles/Toggle/Toggle.css +46 -0
  230. package/dist/styles/Tree/Tree.css +89 -0
  231. package/dist/styles/tokens.css +13 -0
  232. package/dist/styles/tokens.css.d.ts +15 -0
  233. package/dist/styles/tokens.styles.js +5 -0
  234. package/dist/theme/index.d.ts +2 -0
  235. package/dist/theme/index.js +1 -0
  236. package/dist/theme/presets.d.ts +3 -0
  237. package/dist/theme/presets.js +22 -0
  238. package/dist/theme/types.d.ts +10 -0
  239. package/dist/utils/colorUtils.d.ts +32 -0
  240. package/dist/utils/colorUtils.js +227 -0
  241. package/dist/utils/cssVariable.d.ts +2 -0
  242. package/dist/utils/cssVariable.js +11 -0
  243. package/dist/utils/index.d.ts +2 -0
  244. package/dist/utils/index.js +2 -0
  245. package/package.json +191 -0
@@ -0,0 +1,72 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { useRef, useCallback } from 'react';
3
+ import clsx from 'clsx';
4
+ import { TreeLevel } from './TreeLevel.js';
5
+ import { tree } from './Tree.styles.js';
6
+
7
+ function Tree({ items, onToggle, onReorder, onVisibilityToggle, renderItem, className }) {
8
+ const treeRef = useRef(null);
9
+ const handleTreeKeyDown = useCallback((e) => {
10
+ const target = e.target;
11
+ if (!(target instanceof HTMLElement))
12
+ return;
13
+ const row = target.closest('[role="treeitem"]');
14
+ if (!row)
15
+ return;
16
+ const allRows = treeRef.current?.querySelectorAll('[role="treeitem"]');
17
+ if (!allRows)
18
+ return;
19
+ const rowArray = Array.from(allRows);
20
+ const currentIndex = rowArray.indexOf(row);
21
+ if (currentIndex === -1)
22
+ return;
23
+ const itemId = row.dataset.itemId;
24
+ const hasChildren = row.dataset.hasChildren === "true";
25
+ const isExpanded = row.getAttribute("aria-expanded") === "true";
26
+ let handled = true;
27
+ switch (e.key) {
28
+ case "ArrowDown": {
29
+ const next = rowArray[currentIndex + 1];
30
+ next?.focus();
31
+ break;
32
+ }
33
+ case "ArrowUp": {
34
+ const prev = rowArray[currentIndex - 1];
35
+ prev?.focus();
36
+ break;
37
+ }
38
+ case "ArrowRight":
39
+ if (hasChildren && !isExpanded && itemId) {
40
+ onToggle(itemId);
41
+ }
42
+ else if (hasChildren && isExpanded) {
43
+ const next = rowArray[currentIndex + 1];
44
+ next?.focus();
45
+ }
46
+ break;
47
+ case "ArrowLeft":
48
+ if (hasChildren && isExpanded && itemId) {
49
+ onToggle(itemId);
50
+ }
51
+ else {
52
+ const prev = rowArray[currentIndex - 1];
53
+ prev?.focus();
54
+ }
55
+ break;
56
+ case "Home":
57
+ rowArray[0]?.focus();
58
+ break;
59
+ case "End":
60
+ rowArray[rowArray.length - 1]?.focus();
61
+ break;
62
+ default:
63
+ handled = false;
64
+ }
65
+ if (handled) {
66
+ e.preventDefault();
67
+ }
68
+ }, [onToggle]);
69
+ return (jsx("div", { ref: treeRef, role: "tree", className: clsx(tree, className), onKeyDown: handleTreeKeyDown, children: jsx(TreeLevel, { items: items, parentId: null, depth: 0, onToggle: onToggle, onReorder: onReorder, onVisibilityToggle: onVisibilityToggle, renderItem: renderItem, firstItemId: items[0]?.id }) }));
70
+ }
71
+
72
+ export { Tree };
@@ -0,0 +1,15 @@
1
+ import './../styles/tokens.css';
2
+ import './../styles/Tree/Tree.css';
3
+
4
+ var actionButton = 'Tree_actionButton__1urdps68';
5
+ var dragHandle = 'Tree_dragHandle__1urdps69';
6
+ var expandButton = 'Tree_expandButton__1urdps65';
7
+ var expandPlaceholder = 'Tree_expandPlaceholder__1urdps66';
8
+ var itemLabel = 'Tree_itemLabel__1urdps67';
9
+ var row = 'Tree_row__1urdps61';
10
+ var rowDragOver = 'Tree_rowDragOver__1urdps63';
11
+ var rowDraggable = 'Tree_rowDraggable__1urdps62';
12
+ var rowHidden = 'Tree_rowHidden__1urdps64';
13
+ var tree = 'Tree_tree__1urdps60';
14
+
15
+ export { actionButton, dragHandle, expandButton, expandPlaceholder, itemLabel, row, rowDragOver, rowDraggable, rowHidden, tree };
@@ -0,0 +1,26 @@
1
+ import type React from "react";
2
+ export type TreeItem = {
3
+ id: string;
4
+ label: string;
5
+ children?: TreeItem[];
6
+ expanded?: boolean;
7
+ visible?: boolean;
8
+ };
9
+ export type TreeProps = {
10
+ items: TreeItem[];
11
+ onToggle: (id: string) => void;
12
+ onReorder?: (parentId: string | null, orderedIds: string[]) => void;
13
+ onVisibilityToggle?: (id: string) => void;
14
+ renderItem?: (item: TreeItem, defaultLabel: React.ReactNode) => React.ReactNode;
15
+ className?: string;
16
+ };
17
+ export type TreeLevelProps = {
18
+ items: TreeItem[];
19
+ parentId: string | null;
20
+ depth: number;
21
+ onToggle: (id: string) => void;
22
+ onReorder?: (parentId: string | null, orderedIds: string[]) => void;
23
+ onVisibilityToggle?: (id: string) => void;
24
+ renderItem?: (item: TreeItem, defaultLabel: React.ReactNode) => React.ReactNode;
25
+ firstItemId?: string;
26
+ };
@@ -0,0 +1,3 @@
1
+ import React from "react";
2
+ import type { TreeLevelProps } from "./Tree.type";
3
+ export declare function TreeLevel({ items, parentId, depth, onToggle, onReorder, onVisibilityToggle, renderItem, firstItemId }: TreeLevelProps): React.ReactElement;
@@ -0,0 +1,42 @@
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
2
+ import { useState } from 'react';
3
+ import clsx from 'clsx';
4
+ import { useTranslation } from '../i18n/context.js';
5
+ import { itemLabel, expandButton, expandPlaceholder, actionButton, dragHandle, row, rowDraggable, rowDragOver, rowHidden } from './Tree.styles.js';
6
+
7
+ function TreeLevel({ items, parentId, depth, onToggle, onReorder, onVisibilityToggle, renderItem, firstItemId }) {
8
+ const { t } = useTranslation();
9
+ const [dragIndex, setDragIndex] = useState(null);
10
+ const [dragOverIndex, setDragOverIndex] = useState(null);
11
+ const handleDrop = (toIndex) => {
12
+ if (onReorder && dragIndex != null && dragIndex !== toIndex) {
13
+ const ids = items.map(item => item.id);
14
+ const [moved] = ids.splice(dragIndex, 1);
15
+ ids.splice(toIndex, 0, moved);
16
+ onReorder(parentId, ids);
17
+ }
18
+ setDragIndex(null);
19
+ setDragOverIndex(null);
20
+ };
21
+ return (jsx("div", { role: "group", children: items.map((item, index) => {
22
+ const hasChildren = item.children && item.children.length > 0;
23
+ const isExpanded = item.expanded ?? false;
24
+ const isVisible = item.visible ?? true;
25
+ const defaultLabel = (jsx("span", { className: itemLabel, children: item.label }));
26
+ return (jsxs("div", { children: [jsxs("div", { role: "treeitem", "aria-expanded": hasChildren ? isExpanded : undefined, "aria-label": item.label, "data-item-id": item.id, "data-has-children": hasChildren ? "true" : "false", tabIndex: item.id === firstItemId ? 0 : -1, className: clsx(row, onReorder && rowDraggable, dragOverIndex === index && rowDragOver, !isVisible && rowHidden), style: { paddingLeft: `${(depth + 1) * 16}px` }, draggable: !!onReorder, onDragStart: () => setDragIndex(index), onDragOver: e => {
27
+ e.preventDefault();
28
+ setDragOverIndex(index);
29
+ }, onDragLeave: () => setDragOverIndex(null), onDrop: () => handleDrop(index), onDragEnd: () => {
30
+ setDragIndex(null);
31
+ setDragOverIndex(null);
32
+ }, children: [hasChildren ? (jsx("button", { className: expandButton, onClick: e => {
33
+ e.stopPropagation();
34
+ onToggle(item.id);
35
+ }, tabIndex: -1, "aria-label": isExpanded ? t("tree.collapse") : t("tree.expand"), children: isExpanded ? "\u25BC" : "\u25B6" })) : (jsx("span", { className: expandPlaceholder })), renderItem ? renderItem(item, defaultLabel) : defaultLabel, onVisibilityToggle && (jsx("button", { className: actionButton, onClick: e => {
36
+ e.stopPropagation();
37
+ onVisibilityToggle(item.id);
38
+ }, tabIndex: -1, title: isVisible ? t("tree.hide") : t("tree.show"), "aria-label": isVisible ? t("tree.hide") : t("tree.show"), children: isVisible ? "\u25C9" : "\u25CE" })), onReorder && (jsx("span", { className: dragHandle, title: t("tree.dragToReorder"), children: "\u2630" }))] }), hasChildren && isExpanded && (jsx(TreeLevel, { items: item.children, parentId: item.id, depth: depth + 1, onToggle: onToggle, onReorder: onReorder, onVisibilityToggle: onVisibilityToggle, renderItem: renderItem, firstItemId: firstItemId }))] }, item.id));
39
+ }) }));
40
+ }
41
+
42
+ export { TreeLevel };
@@ -0,0 +1 @@
1
+ export { Tree, type TreeProps, type TreeItem } from "./Tree";
@@ -0,0 +1 @@
1
+ export { Tree } from './Tree.js';
@@ -0,0 +1,2 @@
1
+ export { useFocusTrap } from "./useFocusTrap";
2
+ export { useBodyScrollLock } from "./useBodyScrollLock";
@@ -0,0 +1,2 @@
1
+ export { useFocusTrap } from './useFocusTrap.js';
2
+ export { useBodyScrollLock } from './useBodyScrollLock.js';
@@ -0,0 +1 @@
1
+ export declare function useBodyScrollLock(enabled: boolean): void;
@@ -0,0 +1,15 @@
1
+ import { useEffect } from 'react';
2
+
3
+ function useBodyScrollLock(enabled) {
4
+ useEffect(() => {
5
+ if (!enabled)
6
+ return;
7
+ const previousOverflow = document.body.style.overflow;
8
+ document.body.style.overflow = "hidden";
9
+ return () => {
10
+ document.body.style.overflow = previousOverflow;
11
+ };
12
+ }, [enabled]);
13
+ }
14
+
15
+ export { useBodyScrollLock };
@@ -0,0 +1,7 @@
1
+ type UseFocusTrapOptions = {
2
+ enabled: boolean;
3
+ onEscape?: () => void;
4
+ initialFocusSelector?: string;
5
+ };
6
+ export declare function useFocusTrap({ enabled, onEscape, initialFocusSelector }: UseFocusTrapOptions): import("react").RefObject<HTMLDivElement | null>;
7
+ export {};
@@ -0,0 +1,59 @@
1
+ import { useRef, useEffect } from 'react';
2
+
3
+ const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex="-1"])';
4
+ function useFocusTrap({ enabled, onEscape, initialFocusSelector }) {
5
+ const containerRef = useRef(null);
6
+ useEffect(() => {
7
+ if (!enabled)
8
+ return;
9
+ const previouslyFocused = document.activeElement instanceof HTMLElement
10
+ ? document.activeElement
11
+ : null;
12
+ // Initial focus
13
+ if (initialFocusSelector) {
14
+ requestAnimationFrame(() => {
15
+ const target = containerRef.current?.querySelector(initialFocusSelector);
16
+ target?.focus();
17
+ });
18
+ }
19
+ else {
20
+ const focusable = containerRef.current?.querySelectorAll(FOCUSABLE_SELECTOR);
21
+ if (focusable && focusable.length > 0) {
22
+ focusable[0].focus();
23
+ }
24
+ }
25
+ const handleKeyDown = (e) => {
26
+ if (e.key === "Escape") {
27
+ onEscape?.();
28
+ return;
29
+ }
30
+ if (e.key === "Tab" && containerRef.current) {
31
+ const focusable = containerRef.current.querySelectorAll(FOCUSABLE_SELECTOR);
32
+ if (focusable.length === 0)
33
+ return;
34
+ const first = focusable[0];
35
+ const last = focusable[focusable.length - 1];
36
+ if (e.shiftKey) {
37
+ if (document.activeElement === first) {
38
+ e.preventDefault();
39
+ last.focus();
40
+ }
41
+ }
42
+ else {
43
+ if (document.activeElement === last) {
44
+ e.preventDefault();
45
+ first.focus();
46
+ }
47
+ }
48
+ }
49
+ };
50
+ document.addEventListener("keydown", handleKeyDown);
51
+ return () => {
52
+ document.removeEventListener("keydown", handleKeyDown);
53
+ previouslyFocused?.focus();
54
+ };
55
+ }, [enabled, onEscape, initialFocusSelector]);
56
+ return containerRef;
57
+ }
58
+
59
+ export { useFocusTrap };
@@ -0,0 +1,8 @@
1
+ import React from "react";
2
+ import type { Locale } from "./types";
3
+ type I18nProviderProps = {
4
+ locale: Locale;
5
+ children: React.ReactNode;
6
+ };
7
+ export declare function I18nProvider({ locale, children }: I18nProviderProps): React.ReactElement;
8
+ export {};
@@ -0,0 +1,13 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { useMemo } from 'react';
3
+ import { localeMap, I18nContext } from './context.js';
4
+
5
+ function I18nProvider({ locale, children }) {
6
+ const value = useMemo(() => ({
7
+ locale,
8
+ t: (key) => localeMap[locale][key] ?? key
9
+ }), [locale]);
10
+ return jsx(I18nContext.Provider, { value: value, children: children });
11
+ }
12
+
13
+ export { I18nProvider };
@@ -0,0 +1,9 @@
1
+ import type { Locale, TranslationKey, Translations } from "./types";
2
+ declare const localeMap: Record<Locale, Translations>;
3
+ type I18nContextValue = {
4
+ locale: Locale;
5
+ t: (key: TranslationKey) => string;
6
+ };
7
+ declare const I18nContext: import("react").Context<I18nContextValue>;
8
+ export { I18nContext, localeMap };
9
+ export declare function useTranslation(): I18nContextValue;
@@ -0,0 +1,15 @@
1
+ import { createContext, useContext } from 'react';
2
+ import en from './locales/en.js';
3
+ import ko from './locales/ko.js';
4
+ import ja from './locales/ja.js';
5
+
6
+ const localeMap = { en, ko, ja };
7
+ const I18nContext = createContext({
8
+ locale: "ko",
9
+ t: (key) => localeMap.ko[key] ?? key
10
+ });
11
+ function useTranslation() {
12
+ return useContext(I18nContext);
13
+ }
14
+
15
+ export { I18nContext, localeMap, useTranslation };
@@ -0,0 +1,3 @@
1
+ export type { Locale, TranslationKey, Translations } from "./types";
2
+ export { I18nProvider } from "./I18nProvider";
3
+ export { useTranslation, localeMap } from "./context";
@@ -0,0 +1,2 @@
1
+ export { I18nProvider } from './I18nProvider.js';
2
+ export { localeMap, useTranslation } from './context.js';
@@ -0,0 +1,3 @@
1
+ import type { Translations } from "../types";
2
+ declare const en: Translations;
3
+ export default en;
@@ -0,0 +1,152 @@
1
+ const en = {
2
+ // IconButton
3
+ "iconButton.add": "Add",
4
+ // NavigationButton
5
+ "navigation.previous": "Previous",
6
+ "navigation.next": "Next",
7
+ // CardPagination
8
+ "pagination.previousPage": "Previous page",
9
+ "pagination.nextPage": "Next page",
10
+ // NewTabApp
11
+ "newtab.options": "Options",
12
+ "contextMenu.changeIcon": "Change icon",
13
+ "contextMenu.resetIcon": "Reset icon",
14
+ "contextMenu.delete": "Delete bookmark",
15
+ // OptionsSidebar - Primary tabs
16
+ "sidebar.tab.appearance": "Appearance",
17
+ "sidebar.tab.layout": "Layout",
18
+ "sidebar.tab.css": "CSS",
19
+ "sidebar.tab.groups": "Groups",
20
+ "sidebar.tab.general": "General",
21
+ // OptionsSidebar - Appearance sub tabs
22
+ "sidebar.appearance.background": "Background",
23
+ "sidebar.appearance.container": "Container",
24
+ "sidebar.appearance.bookmark": "Bookmark",
25
+ "sidebar.appearance.folder": "Folder",
26
+ // OptionsSidebar - Background section
27
+ "sidebar.background.image": "Background image",
28
+ "sidebar.background.urlPlaceholder": "Enter URL",
29
+ "sidebar.background.apply": "Apply",
30
+ "sidebar.background.fileUpload": "Upload file",
31
+ "sidebar.background.remove": "Remove",
32
+ "sidebar.background.box": "Background box",
33
+ "sidebar.background.color": "Color",
34
+ "sidebar.background.processing": "Processing",
35
+ "sidebar.background.preview": "Background preview",
36
+ // OptionsSidebar - Container section
37
+ "sidebar.container.title": "Title",
38
+ "sidebar.container.text": "Text",
39
+ "sidebar.container.size": "Size",
40
+ "sidebar.container.hover": "Hover",
41
+ "sidebar.container.border": "Border",
42
+ "sidebar.container.borderColor": "Border color",
43
+ "sidebar.container.borderWidth": "Width",
44
+ "sidebar.container.subtitle": "Subtitle",
45
+ "sidebar.container.containerBox": "Container box",
46
+ "sidebar.container.borderRadius": "Border radius",
47
+ "sidebar.container.preview": "Container preview",
48
+ "sidebar.container.mockupTitle": "Title",
49
+ "sidebar.container.mockupSubtitle": "Subtitle / Path",
50
+ // OptionsSidebar - Bookmark section
51
+ "sidebar.bookmark.horizontalIcon": "Use horizontal icons",
52
+ "sidebar.bookmark.scale": "Scale (em)",
53
+ "sidebar.bookmark.horizontalSize": "Horizontal size",
54
+ "sidebar.bookmark.verticalSize": "Vertical size",
55
+ "sidebar.bookmark.iconSize": "Icon size",
56
+ "sidebar.bookmark.borderRadius": "Border radius",
57
+ "sidebar.bookmark.iconBorderRadius": "Icon border radius",
58
+ "sidebar.bookmark.boxColor": "Box color",
59
+ "sidebar.bookmark.text": "Text",
60
+ "sidebar.bookmark.hoverBackground": "Hover background",
61
+ "sidebar.bookmark.hoverText": "Hover text",
62
+ "sidebar.bookmark.preview": "Bookmark preview",
63
+ "sidebar.bookmark.mockupName": "Bookmark",
64
+ // OptionsSidebar - Folder section
65
+ "sidebar.folder.horizontalIcon": "Use horizontal icons",
66
+ "sidebar.folder.background": "Background",
67
+ "sidebar.folder.iconBackground": "Icon background",
68
+ "sidebar.folder.iconColor": "Icon color",
69
+ "sidebar.folder.text": "Text",
70
+ "sidebar.folder.border": "Border",
71
+ "sidebar.folder.preview": "Folder preview",
72
+ "sidebar.folder.mockupName": "Folder",
73
+ // OptionsSidebar - Layout section
74
+ "sidebar.layout.expandBookmarks": "Expand bookmarks",
75
+ "sidebar.layout.horizontalIcon": "Use horizontal icons",
76
+ "sidebar.layout.expandLayout": "Expand layout",
77
+ "sidebar.layout.scrollLayout": "Scroll layout",
78
+ "sidebar.layout.cardColumns": "Card columns",
79
+ "sidebar.layout.horizontalSize": "Horizontal size",
80
+ "sidebar.layout.cardInnerColumns": "Inner columns",
81
+ "sidebar.layout.horizontalColumnCount": "Horizontal columns",
82
+ "sidebar.layout.cardGap": "Card gap",
83
+ "sidebar.layout.bookmarkGap": "Bookmark gap",
84
+ "sidebar.layout.count": "Count",
85
+ "sidebar.layout.columnCount": "Columns",
86
+ "sidebar.layout.rowCount": "Rows",
87
+ "sidebar.layout.gap": "Gap",
88
+ "sidebar.layout.positionMargin": "Position + Margin",
89
+ "sidebar.layout.preview": "Layout preview",
90
+ "sidebar.preview.note": "Preview is provided for convenience and may differ from actual behavior.",
91
+ // OptionsSidebar - CSS section
92
+ "sidebar.css.title": "Custom CSS",
93
+ "sidebar.css.placeholder": "/* Custom CSS with highest priority */\n.my-class-* {\n color: red;\n}",
94
+ // OptionsSidebar - General section
95
+ "sidebar.general.language": "Language",
96
+ "sidebar.general.openInNewTab": "Open in new tab by default",
97
+ "sidebar.general.exportImport": "Export / Import",
98
+ "sidebar.general.export": "Export",
99
+ "sidebar.general.import": "Import",
100
+ "sidebar.general.reset": "Reset",
101
+ "sidebar.general.resetTheme": "Reset to default theme",
102
+ "sidebar.general.resetAll": "Reset all",
103
+ "sidebar.general.credits": "Credits",
104
+ "sidebar.general.credits.dev": "Dev & Design",
105
+ "sidebar.general.credits.planning": "Planning & QA",
106
+ "sidebar.general.credits.github": "GitHub",
107
+ "sidebar.general.credits.readme": "README",
108
+ "sidebar.general.credits.postype": "Postype",
109
+ "sidebar.general.credits.bugReport": "Bug Report",
110
+ "sidebar.general.credits.homepage": "Homepage",
111
+ "sidebar.general.credits.buyMeACoffee": "Buy me a coffee",
112
+ // OptionsSidebar - Footer / Confirm
113
+ "sidebar.cancel": "Cancel",
114
+ "sidebar.save": "Save",
115
+ "sidebar.confirm.unsavedChanges": "You have unsaved changes. Close anyway?",
116
+ "sidebar.confirm.yes": "Yes",
117
+ "sidebar.confirm.no": "No",
118
+ // BookmarkTreeSelector
119
+ "groups.rootGroup": "Root group",
120
+ "groups.allTopLevel": "All (top level)",
121
+ "groups.hide": "Hide",
122
+ "groups.show": "Show",
123
+ "groups.dragToReorder": "Drag to reorder",
124
+ // PopupApp
125
+ "popup.active": "Active",
126
+ "popup.inactive": "Inactive",
127
+ "popup.deactivate": "Deactivate",
128
+ "popup.activate": "Activate",
129
+ "popup.description": "You can use Starlit features in the current tab.",
130
+ "popup.settings": "Settings",
131
+ // ConfirmDialog
132
+ "confirmDialog.confirm": "Confirm",
133
+ "confirmDialog.cancel": "Cancel",
134
+ // Tree
135
+ "tree.collapse": "Collapse",
136
+ "tree.expand": "Expand",
137
+ "tree.hide": "Hide",
138
+ "tree.show": "Show",
139
+ "tree.dragToReorder": "Drag to reorder",
140
+ // Modal
141
+ "modal.close": "Close",
142
+ // PositionGrid
143
+ "positionGrid.group": "Position grid",
144
+ "positionGrid.margin.top": "Top margin",
145
+ "positionGrid.margin.bottom": "Bottom margin",
146
+ "positionGrid.margin.left": "Left margin",
147
+ "positionGrid.margin.right": "Right margin",
148
+ // Content script
149
+ "content.activated": "Starlit activated"
150
+ };
151
+
152
+ export { en as default };
@@ -0,0 +1,3 @@
1
+ import type { Translations } from "../types";
2
+ declare const ja: Translations;
3
+ export default ja;
@@ -0,0 +1,152 @@
1
+ const ja = {
2
+ // IconButton
3
+ "iconButton.add": "追加",
4
+ // NavigationButton
5
+ "navigation.previous": "前へ",
6
+ "navigation.next": "次へ",
7
+ // CardPagination
8
+ "pagination.previousPage": "前のページ",
9
+ "pagination.nextPage": "次のページ",
10
+ // NewTabApp
11
+ "newtab.options": "オプション",
12
+ "contextMenu.changeIcon": "アイコンを変更",
13
+ "contextMenu.resetIcon": "アイコンをリセット",
14
+ "contextMenu.delete": "ブックマークを削除",
15
+ // OptionsSidebar - Primary tabs
16
+ "sidebar.tab.appearance": "外観",
17
+ "sidebar.tab.layout": "配置",
18
+ "sidebar.tab.css": "CSS",
19
+ "sidebar.tab.groups": "グループ",
20
+ "sidebar.tab.general": "一般",
21
+ // OptionsSidebar - Appearance sub tabs
22
+ "sidebar.appearance.background": "背景",
23
+ "sidebar.appearance.container": "コンテナ",
24
+ "sidebar.appearance.bookmark": "ブックマーク",
25
+ "sidebar.appearance.folder": "フォルダ",
26
+ // OptionsSidebar - Background section
27
+ "sidebar.background.image": "背景画像",
28
+ "sidebar.background.urlPlaceholder": "URLを入力してください",
29
+ "sidebar.background.apply": "適用",
30
+ "sidebar.background.fileUpload": "ファイルアップロード",
31
+ "sidebar.background.remove": "削除",
32
+ "sidebar.background.box": "背景ボックス",
33
+ "sidebar.background.color": "色",
34
+ "sidebar.background.processing": "処理中",
35
+ "sidebar.background.preview": "背景プレビュー",
36
+ // OptionsSidebar - Container section
37
+ "sidebar.container.title": "タイトル",
38
+ "sidebar.container.text": "テキスト",
39
+ "sidebar.container.size": "サイズ",
40
+ "sidebar.container.hover": "ホバー",
41
+ "sidebar.container.border": "ボーダー",
42
+ "sidebar.container.borderColor": "ボーダー色",
43
+ "sidebar.container.borderWidth": "太さ",
44
+ "sidebar.container.subtitle": "サブタイトル",
45
+ "sidebar.container.containerBox": "コンテナボックス",
46
+ "sidebar.container.borderRadius": "角丸",
47
+ "sidebar.container.preview": "コンテナプレビュー",
48
+ "sidebar.container.mockupTitle": "タイトル",
49
+ "sidebar.container.mockupSubtitle": "サブタイトル / パス",
50
+ // OptionsSidebar - Bookmark section
51
+ "sidebar.bookmark.horizontalIcon": "アイコンを横に使用",
52
+ "sidebar.bookmark.scale": "スケール (em)",
53
+ "sidebar.bookmark.horizontalSize": "横サイズ",
54
+ "sidebar.bookmark.verticalSize": "縦サイズ",
55
+ "sidebar.bookmark.iconSize": "アイコンサイズ",
56
+ "sidebar.bookmark.borderRadius": "角丸",
57
+ "sidebar.bookmark.iconBorderRadius": "アイコン角丸",
58
+ "sidebar.bookmark.boxColor": "ボックス色",
59
+ "sidebar.bookmark.text": "テキスト",
60
+ "sidebar.bookmark.hoverBackground": "ホバー背景",
61
+ "sidebar.bookmark.hoverText": "ホバーテキスト",
62
+ "sidebar.bookmark.preview": "ブックマークプレビュー",
63
+ "sidebar.bookmark.mockupName": "ブックマーク",
64
+ // OptionsSidebar - Folder section
65
+ "sidebar.folder.horizontalIcon": "アイコンを横に使用",
66
+ "sidebar.folder.background": "背景",
67
+ "sidebar.folder.iconBackground": "アイコン背景",
68
+ "sidebar.folder.iconColor": "アイコン色",
69
+ "sidebar.folder.text": "テキスト",
70
+ "sidebar.folder.border": "ボーダー",
71
+ "sidebar.folder.preview": "フォルダプレビュー",
72
+ "sidebar.folder.mockupName": "フォルダ",
73
+ // OptionsSidebar - Layout section
74
+ "sidebar.layout.expandBookmarks": "ブックマークを展開",
75
+ "sidebar.layout.horizontalIcon": "アイコンを横に使用",
76
+ "sidebar.layout.expandLayout": "展開レイアウト",
77
+ "sidebar.layout.scrollLayout": "スクロールレイアウト",
78
+ "sidebar.layout.cardColumns": "カード横数",
79
+ "sidebar.layout.horizontalSize": "横サイズ",
80
+ "sidebar.layout.cardInnerColumns": "カード内横数",
81
+ "sidebar.layout.horizontalColumnCount": "横列数",
82
+ "sidebar.layout.cardGap": "カード間隔",
83
+ "sidebar.layout.bookmarkGap": "ブックマーク間隔",
84
+ "sidebar.layout.count": "個数",
85
+ "sidebar.layout.columnCount": "横数",
86
+ "sidebar.layout.rowCount": "縦数",
87
+ "sidebar.layout.gap": "間隔",
88
+ "sidebar.layout.positionMargin": "位置 + 余白",
89
+ "sidebar.layout.preview": "配置プレビュー",
90
+ "sidebar.preview.note": "プレビューは参考用であり、実際の動作と異なる場合があります。",
91
+ // OptionsSidebar - CSS section
92
+ "sidebar.css.title": "カスタムCSS",
93
+ "sidebar.css.placeholder": "/* 最優先で適用されるカスタムCSS */\n.my-class-* {\n color: red;\n}",
94
+ // OptionsSidebar - General section
95
+ "sidebar.general.language": "言語",
96
+ "sidebar.general.openInNewTab": "デフォルトで新しいタブで開く",
97
+ "sidebar.general.exportImport": "エクスポート / インポート",
98
+ "sidebar.general.export": "エクスポート",
99
+ "sidebar.general.import": "インポート",
100
+ "sidebar.general.reset": "リセット",
101
+ "sidebar.general.resetTheme": "デフォルトテーマにリセット",
102
+ "sidebar.general.resetAll": "全体リセット",
103
+ "sidebar.general.credits": "クレジット",
104
+ "sidebar.general.credits.dev": "開発 & デザイン",
105
+ "sidebar.general.credits.planning": "企画 & QA",
106
+ "sidebar.general.credits.github": "GitHub",
107
+ "sidebar.general.credits.readme": "README",
108
+ "sidebar.general.credits.postype": "Postype",
109
+ "sidebar.general.credits.bugReport": "バグ報告",
110
+ "sidebar.general.credits.homepage": "ホームページ",
111
+ "sidebar.general.credits.buyMeACoffee": "Buy me a coffee",
112
+ // OptionsSidebar - Footer / Confirm
113
+ "sidebar.cancel": "キャンセル",
114
+ "sidebar.save": "保存",
115
+ "sidebar.confirm.unsavedChanges": "保存されていない変更があります。閉じますか?",
116
+ "sidebar.confirm.yes": "はい",
117
+ "sidebar.confirm.no": "いいえ",
118
+ // BookmarkTreeSelector
119
+ "groups.rootGroup": "ルートグループ",
120
+ "groups.allTopLevel": "すべて(最上位)",
121
+ "groups.hide": "非表示",
122
+ "groups.show": "表示",
123
+ "groups.dragToReorder": "ドラッグして順序を変更",
124
+ // PopupApp
125
+ "popup.active": "有効",
126
+ "popup.inactive": "無効",
127
+ "popup.deactivate": "無効にする",
128
+ "popup.activate": "有効にする",
129
+ "popup.description": "現在のタブでStarlitの機能を使用できます。",
130
+ "popup.settings": "設定",
131
+ // ConfirmDialog
132
+ "confirmDialog.confirm": "確認",
133
+ "confirmDialog.cancel": "キャンセル",
134
+ // Tree
135
+ "tree.collapse": "折りたたむ",
136
+ "tree.expand": "展開",
137
+ "tree.hide": "非表示",
138
+ "tree.show": "表示",
139
+ "tree.dragToReorder": "ドラッグして順序を変更",
140
+ // Modal
141
+ "modal.close": "閉じる",
142
+ // PositionGrid
143
+ "positionGrid.group": "位置グリッド",
144
+ "positionGrid.margin.top": "上余白",
145
+ "positionGrid.margin.bottom": "下余白",
146
+ "positionGrid.margin.left": "左余白",
147
+ "positionGrid.margin.right": "右余白",
148
+ // Content script
149
+ "content.activated": "Starlit 有効"
150
+ };
151
+
152
+ export { ja as default };
@@ -0,0 +1,3 @@
1
+ import type { Translations } from "../types";
2
+ declare const ko: Translations;
3
+ export default ko;