@godxjp/ui 2.1.0 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/BRAND.md +39 -29
- package/CHANGELOG.md +554 -10
- package/README.md +143 -168
- package/config/eslint.js +54 -0
- package/config/prettier.cjs +20 -0
- package/config/tsconfig.base.json +22 -0
- package/config/vitest.base.ts +26 -0
- package/dist/MiniMonth-YAmPGEpC.d.ts +143 -0
- package/dist/Table.types-BbsxoIYE.d.ts +352 -0
- package/dist/color-DO0qqUAb.d.ts +38 -0
- package/dist/components/composites.d.ts +963 -0
- package/dist/components/composites.js +7340 -0
- package/dist/components/composites.js.map +1 -0
- package/dist/components/primitives.d.ts +2633 -163
- package/dist/components/primitives.js +7264 -165
- package/dist/components/primitives.js.map +1 -1
- package/dist/components/shell.d.ts +82 -12
- package/dist/components/shell.js +168 -162
- package/dist/components/shell.js.map +1 -1
- package/dist/hooks.d.ts +83 -8
- package/dist/hooks.js +497 -83
- package/dist/hooks.js.map +1 -1
- package/dist/i18n.d.ts +55 -3
- package/dist/i18n.js +456 -5
- package/dist/i18n.js.map +1 -1
- package/dist/index.d.ts +24 -5
- package/dist/index.js +12522 -267
- package/dist/index.js.map +1 -1
- package/dist/padding-DY0JV5Ja.d.ts +16 -0
- package/dist/preferences.d.ts +132 -0
- package/dist/preferences.js +262 -0
- package/dist/preferences.js.map +1 -0
- package/dist/props.d.ts +86 -0
- package/dist/props.js +16 -0
- package/dist/props.js.map +1 -0
- package/dist/size-CQwNvOWd.d.ts +19 -0
- package/dist/{data.d.ts → types-LTj-2bl-.d.ts} +7 -12
- package/dist/useTableViews-D5NIAJ7h.d.ts +154 -0
- package/package.json +92 -34
- package/src/tokens/tailwind.css +158 -0
- package/dist/components/screens.d.ts +0 -51
- package/dist/components/screens.js +0 -806
- package/dist/components/screens.js.map +0 -1
- package/dist/data.js +0 -93
- package/dist/data.js.map +0 -1
- package/src/tokens/tokens.css +0 -765
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
import { u as TableViewItem, v as TableViewSnapshot } from './Table.types-BbsxoIYE.js';
|
|
2
|
+
|
|
3
|
+
interface UseTablePaginationOptions {
|
|
4
|
+
/** Initial page (1-based). Default 1. */
|
|
5
|
+
defaultPage?: number;
|
|
6
|
+
/** Initial page size. Default 20. */
|
|
7
|
+
defaultPageSize?: number;
|
|
8
|
+
/** Controlled page — when set, hook becomes view-only for page. */
|
|
9
|
+
page?: number;
|
|
10
|
+
/** Controlled page size — when set, hook becomes view-only for size. */
|
|
11
|
+
pageSize?: number;
|
|
12
|
+
/** Fires when either page or pageSize changes. */
|
|
13
|
+
onChange?: (page: number, pageSize: number) => void;
|
|
14
|
+
}
|
|
15
|
+
interface UseTablePaginationResult {
|
|
16
|
+
page: number;
|
|
17
|
+
pageSize: number;
|
|
18
|
+
setPage: (page: number) => void;
|
|
19
|
+
setPageSize: (pageSize: number) => void;
|
|
20
|
+
/** Unified handler — matches `<Pagination onChange>` and `<Table pagination.onChange>` shapes. */
|
|
21
|
+
onChange: (page: number, pageSize: number) => void;
|
|
22
|
+
/** Reset page to 1 (keep size). Call after filter/sort/search changes. */
|
|
23
|
+
resetPage: () => void;
|
|
24
|
+
/** Reset both back to defaults. */
|
|
25
|
+
reset: () => void;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* useTablePagination — `page` + `pageSize` slice.
|
|
29
|
+
*
|
|
30
|
+
* Ergonomic accessor for the canonical pagination state any
|
|
31
|
+
* `<DataTable>` (or bare `<Table pagination=…>`) needs. Mirrors the
|
|
32
|
+
* MRT / TanStack pattern: controlled OR uncontrolled, single `onChange`
|
|
33
|
+
* surface that matches `<Pagination>`.
|
|
34
|
+
*
|
|
35
|
+
* @example
|
|
36
|
+
* const pagination = useTablePagination({ defaultPageSize: 20 });
|
|
37
|
+
* const rows = useMemo(
|
|
38
|
+
* () => allRows.slice((pagination.page - 1) * pagination.pageSize, ...),
|
|
39
|
+
* [allRows, pagination.page, pagination.pageSize],
|
|
40
|
+
* );
|
|
41
|
+
* <Table pagination={{ ...pagination, total: allRows.length }} />
|
|
42
|
+
*/
|
|
43
|
+
declare function useTablePagination(options?: UseTablePaginationOptions): UseTablePaginationResult;
|
|
44
|
+
|
|
45
|
+
type TableSelectionMode = "single" | "multiple";
|
|
46
|
+
interface UseTableSelectionOptions {
|
|
47
|
+
/** "single" replaces previous selection on toggle/select. Default "multiple". */
|
|
48
|
+
mode?: TableSelectionMode;
|
|
49
|
+
/** Initial selected row keys (uncontrolled). */
|
|
50
|
+
defaultSelected?: string[];
|
|
51
|
+
/** Controlled selected row keys — when set, hook becomes view-only. */
|
|
52
|
+
selected?: string[];
|
|
53
|
+
/** Fires when selection changes. */
|
|
54
|
+
onChange?: (selectedRowKeys: string[]) => void;
|
|
55
|
+
}
|
|
56
|
+
interface UseTableSelectionResult {
|
|
57
|
+
selectedRowKeys: string[];
|
|
58
|
+
setSelectedRowKeys: (keys: string[]) => void;
|
|
59
|
+
/** Toggle a single row's selection. */
|
|
60
|
+
toggle: (key: string) => void;
|
|
61
|
+
/** Add a row to the selection (no-op in "single" — replaces). */
|
|
62
|
+
select: (key: string) => void;
|
|
63
|
+
/** Remove a row from the selection. */
|
|
64
|
+
deselect: (key: string) => void;
|
|
65
|
+
/** Clear the selection. */
|
|
66
|
+
clear: () => void;
|
|
67
|
+
/** True if the row is currently selected. */
|
|
68
|
+
isSelected: (key: string) => boolean;
|
|
69
|
+
/** Number of selected rows. */
|
|
70
|
+
count: number;
|
|
71
|
+
}
|
|
72
|
+
/**
|
|
73
|
+
* useTableSelection — controlled-or-uncontrolled row selection.
|
|
74
|
+
*
|
|
75
|
+
* Mirrors `<Table batchActions={{ selectedRowKeys, onSelectedRowKeysChange }}>`
|
|
76
|
+
* shape. `mode="single"` replaces on toggle; `mode="multiple"` (default)
|
|
77
|
+
* adds/removes individual keys.
|
|
78
|
+
*
|
|
79
|
+
* @example
|
|
80
|
+
* const selection = useTableSelection({ mode: "multiple" });
|
|
81
|
+
* <Table
|
|
82
|
+
* batchActions={{
|
|
83
|
+
* selectedRowKeys: selection.selectedRowKeys,
|
|
84
|
+
* onSelectedRowKeysChange: selection.setSelectedRowKeys,
|
|
85
|
+
* actions: <Button onClick={() => approve(selection.selectedRowKeys)}>承認</Button>,
|
|
86
|
+
* }}
|
|
87
|
+
* />
|
|
88
|
+
*/
|
|
89
|
+
declare function useTableSelection(options?: UseTableSelectionOptions): UseTableSelectionResult;
|
|
90
|
+
|
|
91
|
+
interface UseTableViewsOptions {
|
|
92
|
+
/** Built-in (preset) views — never persisted, always present in the merged list. */
|
|
93
|
+
items: TableViewItem[];
|
|
94
|
+
/** Active view key on first render. Default: `items[0]?.key`. */
|
|
95
|
+
defaultActive?: string;
|
|
96
|
+
/** Controlled active view key. */
|
|
97
|
+
activeKey?: string;
|
|
98
|
+
/** Fires when the active view changes (via `apply` or `setActiveKey`). */
|
|
99
|
+
onActiveKeyChange?: (key: string) => void;
|
|
100
|
+
/** Fires when a user-saved view list mutates. */
|
|
101
|
+
onSavedViewsChange?: (views: TableViewItem[]) => void;
|
|
102
|
+
/**
|
|
103
|
+
* Optional persistence — when set, user-saved views are stored under
|
|
104
|
+
* this localStorage key (versioned via `useTableState`).
|
|
105
|
+
*/
|
|
106
|
+
storageKey?: string;
|
|
107
|
+
/** Max number of user-saved views kept. Default 20. */
|
|
108
|
+
maxSavedViews?: number;
|
|
109
|
+
}
|
|
110
|
+
interface UseTableViewsResult {
|
|
111
|
+
/** Merged list (built-in + saved). */
|
|
112
|
+
items: TableViewItem[];
|
|
113
|
+
/** Saved-by-user subset only. */
|
|
114
|
+
savedViews: TableViewItem[];
|
|
115
|
+
activeKey: string | undefined;
|
|
116
|
+
setActiveKey: (key: string) => void;
|
|
117
|
+
/** Apply a view — sets active key and returns the snapshot for state hydration. */
|
|
118
|
+
applyView: (view: TableViewItem) => TableViewSnapshot;
|
|
119
|
+
/** Persist a new user view from the current snapshot. Returns the saved view. */
|
|
120
|
+
saveView: (label: string, snapshot: TableViewSnapshot) => TableViewItem;
|
|
121
|
+
/** Remove a saved view by key. No-op for built-in views. */
|
|
122
|
+
deleteView: (key: string) => void;
|
|
123
|
+
/** Mark active view as "custom" (e.g. after manual filter/sort edits). */
|
|
124
|
+
markCustom: () => void;
|
|
125
|
+
}
|
|
126
|
+
/**
|
|
127
|
+
* useTableViews — saved-view state for tabbed Table headers.
|
|
128
|
+
*
|
|
129
|
+
* Owns the active-view key + a list of user-saved views. Built-in
|
|
130
|
+
* (preset) views pass through unchanged; user-saved views are
|
|
131
|
+
* persisted to localStorage when `storageKey` is provided.
|
|
132
|
+
*
|
|
133
|
+
* @example
|
|
134
|
+
* const views = useTableViews({
|
|
135
|
+
* items: BUILT_IN_VIEWS,
|
|
136
|
+
* storageKey: "orders.views.v1",
|
|
137
|
+
* });
|
|
138
|
+
* <Table
|
|
139
|
+
* views={{
|
|
140
|
+
* items: views.items,
|
|
141
|
+
* activeKey: views.activeKey,
|
|
142
|
+
* onActiveKeyChange: views.setActiveKey,
|
|
143
|
+
* onViewApply: (v) => {
|
|
144
|
+
* const snapshot = views.applyView(v);
|
|
145
|
+
* setFilters(snapshot.filters ?? []);
|
|
146
|
+
* setSort(snapshot.sort ?? null);
|
|
147
|
+
* },
|
|
148
|
+
* onDeleteView: (v) => views.deleteView(v.key),
|
|
149
|
+
* }}
|
|
150
|
+
* />
|
|
151
|
+
*/
|
|
152
|
+
declare function useTableViews(options: UseTableViewsOptions): UseTableViewsResult;
|
|
153
|
+
|
|
154
|
+
export { type TableSelectionMode as T, type UseTablePaginationOptions as U, type UseTablePaginationResult as a, type UseTableSelectionOptions as b, type UseTableSelectionResult as c, type UseTableViewsOptions as d, type UseTableViewsResult as e, useTableSelection as f, useTableViews as g, useTablePagination as u };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@godxjp/ui",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "GoDX
|
|
3
|
+
"version": "5.0.0",
|
|
4
|
+
"description": "GoDX professional UI framework — design tokens, primitives, shell, i18n, hooks, and toolchain config shared across every service frontend. Source of truth for the GoDX visual language.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"module": "./dist/index.js",
|
|
@@ -22,22 +22,45 @@
|
|
|
22
22
|
"files": [
|
|
23
23
|
"dist",
|
|
24
24
|
"src/tokens",
|
|
25
|
+
"config",
|
|
25
26
|
"BRAND.md",
|
|
26
27
|
"CHANGELOG.md"
|
|
27
28
|
],
|
|
28
29
|
"scripts": {
|
|
29
30
|
"build": "tsup",
|
|
30
31
|
"dev": "tsup --watch",
|
|
32
|
+
"storybook": "storybook dev -p 6006",
|
|
33
|
+
"build-storybook": "storybook build -o storybook-static",
|
|
31
34
|
"type-check": "tsc --noEmit",
|
|
32
|
-
"
|
|
35
|
+
"test": "vitest run",
|
|
36
|
+
"test:watch": "vitest",
|
|
37
|
+
"test:stories": "vitest run --project storybook",
|
|
38
|
+
"test:unit": "vitest run --project unit",
|
|
39
|
+
"lint:tokens": "node scripts/lint-tokens.mjs",
|
|
40
|
+
"check:stories-parity": "node scripts/check-stories-parity.mjs",
|
|
41
|
+
"check:docs-parity": "node scripts/check-docs-parity.mjs",
|
|
42
|
+
"sync:skills": "bash scripts/sync-skills.sh",
|
|
43
|
+
"sync:skills:apply": "bash scripts/sync-skills.sh --apply",
|
|
44
|
+
"prepublishOnly": "npm run build",
|
|
45
|
+
"prepare": "husky"
|
|
33
46
|
},
|
|
34
47
|
"exports": {
|
|
35
48
|
".": {
|
|
36
49
|
"types": "./dist/index.d.ts",
|
|
37
50
|
"import": "./dist/index.js"
|
|
38
51
|
},
|
|
39
|
-
"./
|
|
40
|
-
"./
|
|
52
|
+
"./tailwind": "./src/tokens/tailwind.css",
|
|
53
|
+
"./tailwind.css": "./src/tokens/tailwind.css",
|
|
54
|
+
"./styles": "./src/styles/index.css",
|
|
55
|
+
"./styles/index.css": "./src/styles/index.css",
|
|
56
|
+
"./styles/theme.css": "./src/styles/theme.css",
|
|
57
|
+
"./styles/base.css": "./src/styles/base.css",
|
|
58
|
+
"./styles/shell.css": "./src/styles/shell.css",
|
|
59
|
+
"./styles/sonner.css": "./src/styles/sonner.css",
|
|
60
|
+
"./tokens": "./src/styles/theme.css",
|
|
61
|
+
"./tokens.css": "./src/styles/theme.css",
|
|
62
|
+
"./tokens-ext.css": "./src/styles/shell.css",
|
|
63
|
+
"./sonner.css": "./src/styles/sonner.css",
|
|
41
64
|
"./i18n": {
|
|
42
65
|
"types": "./dist/i18n.d.ts",
|
|
43
66
|
"import": "./dist/i18n.js"
|
|
@@ -46,9 +69,9 @@
|
|
|
46
69
|
"types": "./dist/hooks.d.ts",
|
|
47
70
|
"import": "./dist/hooks.js"
|
|
48
71
|
},
|
|
49
|
-
"./
|
|
50
|
-
"types": "./dist/
|
|
51
|
-
"import": "./dist/
|
|
72
|
+
"./props": {
|
|
73
|
+
"types": "./dist/props.d.ts",
|
|
74
|
+
"import": "./dist/props.js"
|
|
52
75
|
},
|
|
53
76
|
"./primitives": {
|
|
54
77
|
"types": "./dist/components/primitives.d.ts",
|
|
@@ -62,33 +85,52 @@
|
|
|
62
85
|
"types": "./dist/components/shell.d.ts",
|
|
63
86
|
"import": "./dist/components/shell.js"
|
|
64
87
|
},
|
|
65
|
-
"./components/
|
|
66
|
-
"types": "./dist/components/
|
|
67
|
-
"import": "./dist/components/
|
|
68
|
-
}
|
|
88
|
+
"./components/composites": {
|
|
89
|
+
"types": "./dist/components/composites.d.ts",
|
|
90
|
+
"import": "./dist/components/composites.js"
|
|
91
|
+
},
|
|
92
|
+
"./preferences": {
|
|
93
|
+
"types": "./dist/preferences.d.ts",
|
|
94
|
+
"import": "./dist/preferences.js"
|
|
95
|
+
},
|
|
96
|
+
"./eslint-config": "./config/eslint.js",
|
|
97
|
+
"./prettier-config": "./config/prettier.cjs",
|
|
98
|
+
"./tsconfig": "./config/tsconfig.base.json",
|
|
99
|
+
"./vitest-config": "./config/vitest.base.ts"
|
|
69
100
|
},
|
|
70
101
|
"dependencies": {
|
|
71
|
-
"@
|
|
72
|
-
"@
|
|
73
|
-
"@radix-ui/react-
|
|
74
|
-
"@radix-ui/react-
|
|
75
|
-
"@radix-ui/react-
|
|
76
|
-
"@radix-ui/react-
|
|
77
|
-
"@radix-ui/react-
|
|
78
|
-
"@radix-ui/react-
|
|
79
|
-
"@radix-ui/react-
|
|
80
|
-
"@radix-ui/react-
|
|
81
|
-
"@radix-ui/react-
|
|
82
|
-
"@radix-ui/react-
|
|
102
|
+
"@hookform/resolvers": "^5.2.2",
|
|
103
|
+
"@internationalized/date": "^3.10.0",
|
|
104
|
+
"@radix-ui/react-alert-dialog": "^1.1.15",
|
|
105
|
+
"@radix-ui/react-checkbox": "^1.3.3",
|
|
106
|
+
"@radix-ui/react-dialog": "^1.1.15",
|
|
107
|
+
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
|
108
|
+
"@radix-ui/react-label": "^2.1.8",
|
|
109
|
+
"@radix-ui/react-popover": "^1.1.15",
|
|
110
|
+
"@radix-ui/react-radio-group": "^1.3.8",
|
|
111
|
+
"@radix-ui/react-select": "^2.2.6",
|
|
112
|
+
"@radix-ui/react-separator": "^1.1.8",
|
|
113
|
+
"@radix-ui/react-slider": "^1.3.6",
|
|
114
|
+
"@radix-ui/react-slot": "^1.2.4",
|
|
115
|
+
"@radix-ui/react-switch": "^1.2.6",
|
|
116
|
+
"@radix-ui/react-tabs": "^1.1.13",
|
|
117
|
+
"@radix-ui/react-tooltip": "^1.2.8",
|
|
118
|
+
"@radix-ui/react-visually-hidden": "^1.2.4",
|
|
119
|
+
"@tanstack/react-table": "^8.21.3",
|
|
83
120
|
"class-variance-authority": "^0.7.1",
|
|
84
121
|
"clsx": "^2.1.1",
|
|
85
122
|
"cmdk": "^1.1.1",
|
|
86
|
-
"i18next": "^
|
|
87
|
-
"i18next-browser-languagedetector": "^8.
|
|
88
|
-
"lucide-react": "^
|
|
89
|
-
"
|
|
90
|
-
"react-
|
|
91
|
-
"
|
|
123
|
+
"i18next": "^26.2.0",
|
|
124
|
+
"i18next-browser-languagedetector": "^8.2.1",
|
|
125
|
+
"lucide-react": "^1.16.0",
|
|
126
|
+
"qrcode": "^1.5.4",
|
|
127
|
+
"react-aria-components": "^1.13.0",
|
|
128
|
+
"react-easy-crop": "^5.5.7",
|
|
129
|
+
"react-hook-form": "^7.76.0",
|
|
130
|
+
"react-i18next": "^17.0.8",
|
|
131
|
+
"sonner": "^2.0.7",
|
|
132
|
+
"tailwind-merge": "^3.6.0",
|
|
133
|
+
"zod": "^4.4.3"
|
|
92
134
|
},
|
|
93
135
|
"peerDependencies": {
|
|
94
136
|
"react": "^18 || ^19",
|
|
@@ -96,9 +138,25 @@
|
|
|
96
138
|
"tailwindcss": "^4"
|
|
97
139
|
},
|
|
98
140
|
"devDependencies": {
|
|
99
|
-
"@
|
|
100
|
-
"@
|
|
101
|
-
"
|
|
102
|
-
"
|
|
141
|
+
"@storybook/addon-docs": "^10.4.0",
|
|
142
|
+
"@storybook/addon-vitest": "^10.4.0",
|
|
143
|
+
"@storybook/react": "^10.4.0",
|
|
144
|
+
"@storybook/react-vite": "^10.4.0",
|
|
145
|
+
"@tailwindcss/vite": "^4.3.0",
|
|
146
|
+
"@types/qrcode": "^1.5.6",
|
|
147
|
+
"@types/react": "^19.2.14",
|
|
148
|
+
"@types/react-dom": "^19.2.3",
|
|
149
|
+
"@vitejs/plugin-react": "^6.0.2",
|
|
150
|
+
"@vitest/browser": "^4.1.6",
|
|
151
|
+
"@vitest/browser-playwright": "^4.1.6",
|
|
152
|
+
"axios": "^1.16.1",
|
|
153
|
+
"husky": "^9.1.7",
|
|
154
|
+
"playwright": "^1.60.0",
|
|
155
|
+
"prettier": "^3.8.3",
|
|
156
|
+
"storybook": "^10.4.0",
|
|
157
|
+
"tsup": "^8.5.1",
|
|
158
|
+
"typescript": "^6.0.3",
|
|
159
|
+
"vite": "^8.0.13",
|
|
160
|
+
"vitest": "^4.1.6"
|
|
103
161
|
}
|
|
104
162
|
}
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
/* @godxjp/ui — Tailwind v4 entry.
|
|
2
|
+
*
|
|
3
|
+
* Services consume this file as their ONE CSS import:
|
|
4
|
+
* import "@godxjp/ui/tailwind.css"
|
|
5
|
+
*
|
|
6
|
+
* Or via @import in a service-local theme.css for per-deployment overrides.
|
|
7
|
+
*
|
|
8
|
+
* Provides:
|
|
9
|
+
* 1. Tailwind v4 utilities (@import "tailwindcss").
|
|
10
|
+
* 2. Design tokens — three layers (primitives / semantic / themes).
|
|
11
|
+
* 3. Base styles — @layer base (typography, scrollbar, …).
|
|
12
|
+
* 4. Component CSS (.app-*, .sb-*, .tb-*, .page-content*, …).
|
|
13
|
+
* 5. Sonner toast theme overrides.
|
|
14
|
+
* 6. @theme inline mapping so Tailwind utility classes resolve tokens.
|
|
15
|
+
* 7. dark custom-variant ([data-theme="dark"]).
|
|
16
|
+
* 8. `[data-accent]` color themes (default layer, AFTER theme.css
|
|
17
|
+
* so they win the cascade over `:root { --primary }`).
|
|
18
|
+
*
|
|
19
|
+
* Services do NOT redeclare @theme, Tailwind import, base layer, or
|
|
20
|
+
* component CSS. Customize ONLY by overriding semantic tokens in
|
|
21
|
+
* `theme.css`:
|
|
22
|
+
*
|
|
23
|
+
* @import "@godxjp/ui/tailwind.css";
|
|
24
|
+
*
|
|
25
|
+
* :root { --primary: oklch(58% 0.18 25); }
|
|
26
|
+
* [data-accent="custom"] { --primary: oklch(...); --brand: oklch(...); }
|
|
27
|
+
*
|
|
28
|
+
* See:
|
|
29
|
+
* - docs/explanation/tokens-architecture.md
|
|
30
|
+
* - docs/how-to/customize-theme.md
|
|
31
|
+
* - new-docs/12-frontend-architecture.md (umbrella binding rule)
|
|
32
|
+
*/
|
|
33
|
+
|
|
34
|
+
/* Google Fonts must be the first @import in the bundled output —
|
|
35
|
+
* CSS spec requires @import to precede non-@import rules. Hoisted
|
|
36
|
+
* from theme.css so the bundler emits it before tailwindcss
|
|
37
|
+
* generates rules. */
|
|
38
|
+
@import url("https://fonts.googleapis.com/css2?family=M+PLUS+2:wght@300;400;500;600;700&display=swap");
|
|
39
|
+
@import "tailwindcss";
|
|
40
|
+
@import "../styles/index.css";
|
|
41
|
+
|
|
42
|
+
@custom-variant dark (&:is([data-theme="dark"] *));
|
|
43
|
+
|
|
44
|
+
@theme inline {
|
|
45
|
+
--color-background: var(--background);
|
|
46
|
+
--color-foreground: var(--foreground);
|
|
47
|
+
--color-card: var(--card);
|
|
48
|
+
--color-card-foreground: var(--card-foreground);
|
|
49
|
+
--color-popover: var(--popover);
|
|
50
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
51
|
+
--color-primary: var(--primary);
|
|
52
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
53
|
+
--color-secondary: var(--secondary);
|
|
54
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
55
|
+
--color-muted: var(--muted);
|
|
56
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
57
|
+
--color-accent: var(--accent);
|
|
58
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
59
|
+
--color-destructive: var(--destructive);
|
|
60
|
+
--color-destructive-foreground: var(--destructive-foreground);
|
|
61
|
+
--color-success: var(--success);
|
|
62
|
+
--color-success-foreground: var(--success-foreground);
|
|
63
|
+
--color-attention: var(--attention);
|
|
64
|
+
--color-border: var(--border);
|
|
65
|
+
--color-input: var(--input);
|
|
66
|
+
--color-input-background: var(--input-background);
|
|
67
|
+
--color-ring: var(--ring);
|
|
68
|
+
--color-sidebar: var(--sidebar-bg);
|
|
69
|
+
--color-sidebar-foreground: var(--sidebar-fg);
|
|
70
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
71
|
+
--color-surface-2: var(--surface-2);
|
|
72
|
+
--color-surface-3: var(--surface-3);
|
|
73
|
+
|
|
74
|
+
--spacing-page: var(--density-page);
|
|
75
|
+
--spacing-section: var(--density-section);
|
|
76
|
+
--spacing-element: var(--density-element);
|
|
77
|
+
--spacing-card: var(--density-card);
|
|
78
|
+
|
|
79
|
+
--font-size-page-title: var(--density-page-title);
|
|
80
|
+
--font-sans: var(--font-sans-jp);
|
|
81
|
+
--radius-lg: var(--radius);
|
|
82
|
+
|
|
83
|
+
/* Tailwind v4 first-class breakpoints — `sm:`, `md:`, `lg:`,
|
|
84
|
+
* `xl:`, `2xl:` utility variants resolve to these literals.
|
|
85
|
+
*
|
|
86
|
+
* MUST be literal pixel strings (NOT `var(--breakpoint-md)`).
|
|
87
|
+
* Tailwind v4 emits `@media (width >= …)` queries from these,
|
|
88
|
+
* and CSS media queries do NOT yet support `var()` (Lightning
|
|
89
|
+
* CSS rejects the build). The literals here mirror the
|
|
90
|
+
* `--breakpoint-*` tokens in `theme.css :root` — single
|
|
91
|
+
* source-of-truth maintenance: when one changes, change the
|
|
92
|
+
* other. Cardinal rule 22 honest variance: documented here.
|
|
93
|
+
*/
|
|
94
|
+
--breakpoint-sm: 640px;
|
|
95
|
+
--breakpoint-md: 768px;
|
|
96
|
+
--breakpoint-lg: 1024px;
|
|
97
|
+
--breakpoint-xl: 1280px;
|
|
98
|
+
--breakpoint-2xl: 1536px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
@layer base {
|
|
102
|
+
:root {
|
|
103
|
+
--density-spacing: 4px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
[data-density="compact"] { --density-spacing: 2px; }
|
|
107
|
+
[data-density="default"] { --density-spacing: 3px; }
|
|
108
|
+
[data-density="comfortable"] { --density-spacing: 4px; }
|
|
109
|
+
|
|
110
|
+
* {
|
|
111
|
+
@apply border-border outline-ring/50;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
body {
|
|
115
|
+
@apply bg-background text-foreground font-sans;
|
|
116
|
+
margin: 0;
|
|
117
|
+
font-size: var(--text-base);
|
|
118
|
+
line-height: var(--leading-body);
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
a { color: inherit; }
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* `[data-font-size]` — global root-font-size knob.
|
|
125
|
+
*
|
|
126
|
+
* Lives on `<html>` (the `:root` element). Setting `font-size` here
|
|
127
|
+
* rescales every rem-based token in the system — spacing, density
|
|
128
|
+
* element sizes, type scale, radii — so it acts as a true global
|
|
129
|
+
* accessibility/preference axis. 100% (16px) is the default browser
|
|
130
|
+
* rem; we offer a small + large variant on either side.
|
|
131
|
+
*
|
|
132
|
+
* Default layer (not `@layer base`) so it wins over any reset that
|
|
133
|
+
* sets `html { font-size: 100% }`. */
|
|
134
|
+
html[data-font-size="sm"] { font-size: 87.5%; } /* 14px rem */
|
|
135
|
+
html[data-font-size="base"] { font-size: 100%; } /* 16px rem (default) */
|
|
136
|
+
html[data-font-size="lg"] { font-size: 112.5%; } /* 18px rem */
|
|
137
|
+
html[data-font-size="xl"] { font-size: 125%; } /* 20px rem */
|
|
138
|
+
|
|
139
|
+
/* `[data-accent]` color themes live in the default layer (not
|
|
140
|
+
* `@layer base`) so they win the cascade over `:root { --primary }`
|
|
141
|
+
* in `theme.css`. Default layer beats `@layer base` regardless of
|
|
142
|
+
* specificity or source order — moving these out of the base layer
|
|
143
|
+
* is what makes accent actually change the system color. */
|
|
144
|
+
[data-accent="blue"] { --primary: oklch(56% 0.13 246); --primary-foreground: oklch(98% 0.01 246); --ring: oklch(62% 0.12 246); --brand: oklch(56% 0.13 246); --sidebar-active-bg: oklch(95% 0.02 246); --sidebar-active-fg: oklch(56% 0.13 246); }
|
|
145
|
+
[data-accent="green"] { --primary: oklch(58% 0.12 158); --primary-foreground: oklch(98% 0.01 158); --ring: oklch(63% 0.11 158); --brand: oklch(58% 0.12 158); --sidebar-active-bg: oklch(95% 0.02 158); --sidebar-active-fg: oklch(58% 0.12 158); }
|
|
146
|
+
[data-accent="violet"] { --primary: oklch(56% 0.12 302); --primary-foreground: oklch(98% 0.01 302); --ring: oklch(62% 0.11 302); --brand: oklch(56% 0.12 302); --sidebar-active-bg: oklch(95% 0.02 302); --sidebar-active-fg: oklch(56% 0.12 302); }
|
|
147
|
+
[data-accent="amber"] { --primary: oklch(67% 0.12 75); --primary-foreground: oklch(18% 0.04 75); --ring: oklch(72% 0.11 75); --brand: oklch(67% 0.12 75); --sidebar-active-bg: oklch(95% 0.03 75); --sidebar-active-fg: oklch(50% 0.12 75); }
|
|
148
|
+
[data-accent="rose"] { --primary: oklch(58% 0.12 18); --primary-foreground: oklch(98% 0.01 18); --ring: oklch(64% 0.1 18); --brand: oklch(58% 0.12 18); --sidebar-active-bg: oklch(95% 0.02 18); --sidebar-active-fg: oklch(58% 0.12 18); }
|
|
149
|
+
[data-accent="slate"] { --primary: oklch(48% 0.04 250); --primary-foreground: oklch(98% 0.01 250); --ring: oklch(58% 0.04 250); --brand: oklch(48% 0.04 250); --sidebar-active-bg: oklch(94% 0.01 250); --sidebar-active-fg: oklch(48% 0.04 250); }
|
|
150
|
+
|
|
151
|
+
/* Dark-mode accent variants — lifted lightness for legibility on
|
|
152
|
+
* dark surfaces, matched chroma for richness. */
|
|
153
|
+
[data-theme="dark"][data-accent="blue"] { --primary: oklch(70% 0.13 246); --primary-foreground: oklch(18% 0.005 60); --ring: oklch(70% 0.13 246); --brand: oklch(72% 0.13 246); --sidebar-active-bg: oklch(28% 0.04 246); --sidebar-active-fg: oklch(78% 0.13 246); }
|
|
154
|
+
[data-theme="dark"][data-accent="green"] { --primary: oklch(72% 0.14 158); --primary-foreground: oklch(18% 0.005 60); --ring: oklch(72% 0.14 158); --brand: oklch(72% 0.14 158); --sidebar-active-bg: oklch(28% 0.04 158); --sidebar-active-fg: oklch(78% 0.13 158); }
|
|
155
|
+
[data-theme="dark"][data-accent="violet"] { --primary: oklch(70% 0.14 302); --primary-foreground: oklch(18% 0.005 60); --ring: oklch(70% 0.14 302); --brand: oklch(72% 0.13 302); --sidebar-active-bg: oklch(28% 0.04 302); --sidebar-active-fg: oklch(78% 0.13 302); }
|
|
156
|
+
[data-theme="dark"][data-accent="amber"] { --primary: oklch(78% 0.14 75); --primary-foreground: oklch(18% 0.005 60); --ring: oklch(78% 0.14 75); --brand: oklch(78% 0.14 75); --sidebar-active-bg: oklch(28% 0.05 75); --sidebar-active-fg: oklch(82% 0.13 75); }
|
|
157
|
+
[data-theme="dark"][data-accent="rose"] { --primary: oklch(72% 0.13 18); --primary-foreground: oklch(18% 0.005 60); --ring: oklch(72% 0.13 18); --brand: oklch(72% 0.13 18); --sidebar-active-bg: oklch(28% 0.04 18); --sidebar-active-fg: oklch(78% 0.13 18); }
|
|
158
|
+
[data-theme="dark"][data-accent="slate"] { --primary: oklch(72% 0.04 250); --primary-foreground: oklch(18% 0.005 60); --ring: oklch(72% 0.04 250); --brand: oklch(72% 0.04 250); --sidebar-active-bg: oklch(28% 0.02 250); --sidebar-active-fg: oklch(82% 0.04 250); }
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import { ForgeProduct, ForgeProject } from '../data.js';
|
|
3
|
-
|
|
4
|
-
interface DashboardScreenProps {
|
|
5
|
-
product: ForgeProduct;
|
|
6
|
-
}
|
|
7
|
-
declare function DashboardScreen({ product }: DashboardScreenProps): react_jsx_runtime.JSX.Element;
|
|
8
|
-
|
|
9
|
-
interface ProjectsListScreenProps {
|
|
10
|
-
product: ForgeProduct;
|
|
11
|
-
onSelect: (project: ForgeProject) => void;
|
|
12
|
-
}
|
|
13
|
-
declare function ProjectsListScreen({ product, onSelect }: ProjectsListScreenProps): react_jsx_runtime.JSX.Element;
|
|
14
|
-
|
|
15
|
-
interface PlansScreenProps {
|
|
16
|
-
onOpenPlan: (id: string) => void;
|
|
17
|
-
}
|
|
18
|
-
declare function PlansScreen({ onOpenPlan }: PlansScreenProps): react_jsx_runtime.JSX.Element;
|
|
19
|
-
|
|
20
|
-
interface IssuesScreenProps {
|
|
21
|
-
onOpenIssue: (id: string) => void;
|
|
22
|
-
}
|
|
23
|
-
declare function IssuesScreen({ onOpenIssue }: IssuesScreenProps): react_jsx_runtime.JSX.Element;
|
|
24
|
-
|
|
25
|
-
interface WikiScreenProps {
|
|
26
|
-
toc?: Array<{
|
|
27
|
-
id: string;
|
|
28
|
-
label: string;
|
|
29
|
-
}>;
|
|
30
|
-
children?: React.ReactNode;
|
|
31
|
-
meta?: React.ReactNode;
|
|
32
|
-
}
|
|
33
|
-
declare function WikiScreen({ toc, children, meta }: WikiScreenProps): react_jsx_runtime.JSX.Element;
|
|
34
|
-
|
|
35
|
-
declare function IdeasScreen(): react_jsx_runtime.JSX.Element;
|
|
36
|
-
|
|
37
|
-
interface PlanDetailScreenProps {
|
|
38
|
-
planId: string;
|
|
39
|
-
onBack: () => void;
|
|
40
|
-
onOpenIssue: (id: string) => void;
|
|
41
|
-
}
|
|
42
|
-
declare function PlanDetailScreen({ planId, onBack, onOpenIssue }: PlanDetailScreenProps): react_jsx_runtime.JSX.Element;
|
|
43
|
-
|
|
44
|
-
interface IssueDetailScreenProps {
|
|
45
|
-
issueId: string;
|
|
46
|
-
onBack: () => void;
|
|
47
|
-
onOpenPlan: (id: string) => void;
|
|
48
|
-
}
|
|
49
|
-
declare function IssueDetailScreen({ issueId, onBack, onOpenPlan }: IssueDetailScreenProps): react_jsx_runtime.JSX.Element;
|
|
50
|
-
|
|
51
|
-
export { DashboardScreen, type DashboardScreenProps, IdeasScreen, IssueDetailScreen, type IssueDetailScreenProps, IssuesScreen, type IssuesScreenProps, PlanDetailScreen, type PlanDetailScreenProps, PlansScreen, type PlansScreenProps, ProjectsListScreen, type ProjectsListScreenProps, WikiScreen, type WikiScreenProps };
|