@softure-ai/theme-notion 0.0.0-stage → 0.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 (247) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/LICENSE +21 -0
  3. package/README.md +114 -2
  4. package/dist/index.d.ts +47 -0
  5. package/dist/index.d.ts.map +1 -0
  6. package/dist/index.js +49 -0
  7. package/dist/index.js.map +1 -0
  8. package/dist/lib/utils.d.ts +6 -0
  9. package/dist/lib/utils.d.ts.map +1 -0
  10. package/dist/lib/utils.js +8 -0
  11. package/dist/lib/utils.js.map +1 -0
  12. package/dist/messages/en.d.ts +29 -0
  13. package/dist/messages/en.d.ts.map +1 -0
  14. package/dist/messages/en.js +13 -0
  15. package/dist/messages/en.js.map +1 -0
  16. package/dist/messages/index.d.ts +30 -0
  17. package/dist/messages/index.d.ts.map +1 -0
  18. package/dist/messages/index.js +4 -0
  19. package/dist/messages/index.js.map +1 -0
  20. package/dist/notion/PageFrame.d.ts +11 -0
  21. package/dist/notion/PageFrame.d.ts.map +1 -0
  22. package/dist/notion/PageFrame.js +10 -0
  23. package/dist/notion/PageFrame.js.map +1 -0
  24. package/dist/notion/PageHeader.d.ts +16 -0
  25. package/dist/notion/PageHeader.d.ts.map +1 -0
  26. package/dist/notion/PageHeader.js +9 -0
  27. package/dist/notion/PageHeader.js.map +1 -0
  28. package/dist/notion/PropertyList.d.ts +12 -0
  29. package/dist/notion/PropertyList.d.ts.map +1 -0
  30. package/dist/notion/PropertyList.js +8 -0
  31. package/dist/notion/PropertyList.js.map +1 -0
  32. package/dist/notion/Status.d.ts +11 -0
  33. package/dist/notion/Status.d.ts.map +1 -0
  34. package/dist/notion/Status.js +21 -0
  35. package/dist/notion/Status.js.map +1 -0
  36. package/dist/notion/icon-stroke.d.ts +2 -0
  37. package/dist/notion/icon-stroke.d.ts.map +1 -0
  38. package/dist/notion/icon-stroke.js +3 -0
  39. package/dist/notion/icon-stroke.js.map +1 -0
  40. package/dist/notion/palette.d.ts +3 -0
  41. package/dist/notion/palette.d.ts.map +1 -0
  42. package/dist/notion/palette.js +4 -0
  43. package/dist/notion/palette.js.map +1 -0
  44. package/dist/sft-bridge.css +47 -0
  45. package/dist/theme.css +388 -0
  46. package/dist/tokens.d.ts +801 -0
  47. package/dist/tokens.d.ts.map +1 -0
  48. package/dist/tokens.js +139 -0
  49. package/dist/tokens.js.map +1 -0
  50. package/dist/ui/accordion.d.ts +8 -0
  51. package/dist/ui/accordion.d.ts.map +1 -0
  52. package/dist/ui/accordion.js +20 -0
  53. package/dist/ui/accordion.js.map +1 -0
  54. package/dist/ui/alert-dialog.d.ts +19 -0
  55. package/dist/ui/alert-dialog.d.ts.map +1 -0
  56. package/dist/ui/alert-dialog.js +44 -0
  57. package/dist/ui/alert-dialog.js.map +1 -0
  58. package/dist/ui/alert.d.ts +10 -0
  59. package/dist/ui/alert.d.ts.map +1 -0
  60. package/dist/ui/alert.js +35 -0
  61. package/dist/ui/alert.js.map +1 -0
  62. package/dist/ui/avatar.d.ts +12 -0
  63. package/dist/ui/avatar.d.ts.map +1 -0
  64. package/dist/ui/avatar.js +25 -0
  65. package/dist/ui/avatar.js.map +1 -0
  66. package/dist/ui/badge.d.ts +11 -0
  67. package/dist/ui/badge.d.ts.map +1 -0
  68. package/dist/ui/badge.js +41 -0
  69. package/dist/ui/badge.js.map +1 -0
  70. package/dist/ui/breadcrumb.d.ts +14 -0
  71. package/dist/ui/breadcrumb.d.ts.map +1 -0
  72. package/dist/ui/breadcrumb.js +30 -0
  73. package/dist/ui/breadcrumb.js.map +1 -0
  74. package/dist/ui/button-group.d.ts +12 -0
  75. package/dist/ui/button-group.d.ts.map +1 -0
  76. package/dist/ui/button-group.js +28 -0
  77. package/dist/ui/button-group.js.map +1 -0
  78. package/dist/ui/button.d.ts +11 -0
  79. package/dist/ui/button.d.ts.map +1 -0
  80. package/dist/ui/button.js +37 -0
  81. package/dist/ui/button.js.map +1 -0
  82. package/dist/ui/card.d.ts +10 -0
  83. package/dist/ui/card.d.ts.map +1 -0
  84. package/dist/ui/card.js +26 -0
  85. package/dist/ui/card.js.map +1 -0
  86. package/dist/ui/checkbox.d.ts +5 -0
  87. package/dist/ui/checkbox.d.ts.map +1 -0
  88. package/dist/ui/checkbox.js +11 -0
  89. package/dist/ui/checkbox.js.map +1 -0
  90. package/dist/ui/collapsible.d.ts +6 -0
  91. package/dist/ui/collapsible.d.ts.map +1 -0
  92. package/dist/ui/collapsible.js +14 -0
  93. package/dist/ui/collapsible.js.map +1 -0
  94. package/dist/ui/command.d.ts +19 -0
  95. package/dist/ui/command.d.ts.map +1 -0
  96. package/dist/ui/command.js +37 -0
  97. package/dist/ui/command.js.map +1 -0
  98. package/dist/ui/dialog.d.ts +19 -0
  99. package/dist/ui/dialog.d.ts.map +1 -0
  100. package/dist/ui/dialog.js +40 -0
  101. package/dist/ui/dialog.js.map +1 -0
  102. package/dist/ui/dropdown-menu.d.ts +26 -0
  103. package/dist/ui/dropdown-menu.d.ts.map +1 -0
  104. package/dist/ui/dropdown-menu.js +53 -0
  105. package/dist/ui/dropdown-menu.js.map +1 -0
  106. package/dist/ui/empty.d.ts +12 -0
  107. package/dist/ui/empty.d.ts.map +1 -0
  108. package/dist/ui/empty.js +34 -0
  109. package/dist/ui/empty.js.map +1 -0
  110. package/dist/ui/field.d.ts +25 -0
  111. package/dist/ui/field.d.ts.map +1 -0
  112. package/dist/ui/field.js +77 -0
  113. package/dist/ui/field.js.map +1 -0
  114. package/dist/ui/input-group.d.ts +17 -0
  115. package/dist/ui/input-group.d.ts.map +1 -0
  116. package/dist/ui/input-group.js +65 -0
  117. package/dist/ui/input-group.js.map +1 -0
  118. package/dist/ui/input.d.ts +4 -0
  119. package/dist/ui/input.d.ts.map +1 -0
  120. package/dist/ui/input.js +8 -0
  121. package/dist/ui/input.js.map +1 -0
  122. package/dist/ui/item.d.ts +24 -0
  123. package/dist/ui/item.d.ts.map +1 -0
  124. package/dist/ui/item.js +68 -0
  125. package/dist/ui/item.js.map +1 -0
  126. package/dist/ui/kbd.d.ts +4 -0
  127. package/dist/ui/kbd.d.ts.map +1 -0
  128. package/dist/ui/kbd.js +10 -0
  129. package/dist/ui/kbd.js.map +1 -0
  130. package/dist/ui/label.d.ts +5 -0
  131. package/dist/ui/label.d.ts.map +1 -0
  132. package/dist/ui/label.js +10 -0
  133. package/dist/ui/label.js.map +1 -0
  134. package/dist/ui/popover.d.ts +11 -0
  135. package/dist/ui/popover.d.ts.map +1 -0
  136. package/dist/ui/popover.js +28 -0
  137. package/dist/ui/popover.js.map +1 -0
  138. package/dist/ui/progress.d.ts +5 -0
  139. package/dist/ui/progress.d.ts.map +1 -0
  140. package/dist/ui/progress.js +10 -0
  141. package/dist/ui/progress.js.map +1 -0
  142. package/dist/ui/scroll-area.d.ts +6 -0
  143. package/dist/ui/scroll-area.d.ts.map +1 -0
  144. package/dist/ui/scroll-area.js +15 -0
  145. package/dist/ui/scroll-area.js.map +1 -0
  146. package/dist/ui/select.d.ts +16 -0
  147. package/dist/ui/select.d.ts.map +1 -0
  148. package/dist/ui/select.js +40 -0
  149. package/dist/ui/select.js.map +1 -0
  150. package/dist/ui/separator.d.ts +5 -0
  151. package/dist/ui/separator.d.ts.map +1 -0
  152. package/dist/ui/separator.js +10 -0
  153. package/dist/ui/separator.js.map +1 -0
  154. package/dist/ui/sheet.d.ts +16 -0
  155. package/dist/ui/sheet.d.ts.map +1 -0
  156. package/dist/ui/sheet.js +43 -0
  157. package/dist/ui/sheet.js.map +1 -0
  158. package/dist/ui/sidebar.d.ts +76 -0
  159. package/dist/ui/sidebar.d.ts.map +1 -0
  160. package/dist/ui/sidebar.js +216 -0
  161. package/dist/ui/sidebar.js.map +1 -0
  162. package/dist/ui/skeleton.d.ts +3 -0
  163. package/dist/ui/skeleton.d.ts.map +1 -0
  164. package/dist/ui/skeleton.js +7 -0
  165. package/dist/ui/skeleton.js.map +1 -0
  166. package/dist/ui/sonner.d.ts +4 -0
  167. package/dist/ui/sonner.d.ts.map +1 -0
  168. package/dist/ui/sonner.js +22 -0
  169. package/dist/ui/sonner.js.map +1 -0
  170. package/dist/ui/spinner.d.ts +3 -0
  171. package/dist/ui/spinner.d.ts.map +1 -0
  172. package/dist/ui/spinner.js +9 -0
  173. package/dist/ui/spinner.js.map +1 -0
  174. package/dist/ui/switch-thumb.d.ts +7 -0
  175. package/dist/ui/switch-thumb.d.ts.map +1 -0
  176. package/dist/ui/switch-thumb.js +7 -0
  177. package/dist/ui/switch-thumb.js.map +1 -0
  178. package/dist/ui/switch.d.ts +7 -0
  179. package/dist/ui/switch.d.ts.map +1 -0
  180. package/dist/ui/switch.js +11 -0
  181. package/dist/ui/switch.js.map +1 -0
  182. package/dist/ui/table.d.ts +11 -0
  183. package/dist/ui/table.d.ts.map +1 -0
  184. package/dist/ui/table.js +30 -0
  185. package/dist/ui/table.js.map +1 -0
  186. package/dist/ui/tabs.d.ts +12 -0
  187. package/dist/ui/tabs.d.ts.map +1 -0
  188. package/dist/ui/tabs.js +31 -0
  189. package/dist/ui/tabs.js.map +1 -0
  190. package/dist/ui/textarea.d.ts +4 -0
  191. package/dist/ui/textarea.d.ts.map +1 -0
  192. package/dist/ui/textarea.js +8 -0
  193. package/dist/ui/textarea.js.map +1 -0
  194. package/dist/ui/tooltip.d.ts +8 -0
  195. package/dist/ui/tooltip.d.ts.map +1 -0
  196. package/dist/ui/tooltip.js +19 -0
  197. package/dist/ui/tooltip.js.map +1 -0
  198. package/package.json +69 -4
  199. package/src/index.ts +50 -0
  200. package/src/lib/utils.ts +9 -0
  201. package/src/messages/en.ts +12 -0
  202. package/src/messages/index.ts +6 -0
  203. package/src/notion/PageFrame.tsx +18 -0
  204. package/src/notion/PageHeader.tsx +62 -0
  205. package/src/notion/PropertyList.tsx +38 -0
  206. package/src/notion/Status.tsx +44 -0
  207. package/src/notion/icon-stroke.ts +2 -0
  208. package/src/notion/palette.ts +5 -0
  209. package/src/sft-bridge.css +47 -0
  210. package/src/tokens.ts +140 -0
  211. package/src/ui/accordion.tsx +65 -0
  212. package/src/ui/alert-dialog.tsx +196 -0
  213. package/src/ui/alert.tsx +74 -0
  214. package/src/ui/avatar.tsx +108 -0
  215. package/src/ui/badge.tsx +63 -0
  216. package/src/ui/breadcrumb.tsx +113 -0
  217. package/src/ui/button-group.tsx +83 -0
  218. package/src/ui/button.tsx +62 -0
  219. package/src/ui/card.tsx +91 -0
  220. package/src/ui/checkbox.tsx +31 -0
  221. package/src/ui/collapsible.tsx +33 -0
  222. package/src/ui/command.tsx +185 -0
  223. package/src/ui/dialog.tsx +162 -0
  224. package/src/ui/dropdown-menu.tsx +256 -0
  225. package/src/ui/empty.tsx +103 -0
  226. package/src/ui/field.tsx +248 -0
  227. package/src/ui/input-group.tsx +170 -0
  228. package/src/ui/input.tsx +20 -0
  229. package/src/ui/item.tsx +193 -0
  230. package/src/ui/kbd.tsx +28 -0
  231. package/src/ui/label.tsx +23 -0
  232. package/src/ui/popover.tsx +88 -0
  233. package/src/ui/progress.tsx +30 -0
  234. package/src/ui/scroll-area.tsx +57 -0
  235. package/src/ui/select.tsx +189 -0
  236. package/src/ui/separator.tsx +27 -0
  237. package/src/ui/sheet.tsx +146 -0
  238. package/src/ui/sidebar.tsx +744 -0
  239. package/src/ui/skeleton.tsx +13 -0
  240. package/src/ui/sonner.tsx +39 -0
  241. package/src/ui/spinner.tsx +16 -0
  242. package/src/ui/switch-thumb.ts +6 -0
  243. package/src/ui/switch.tsx +36 -0
  244. package/src/ui/table.tsx +115 -0
  245. package/src/ui/tabs.tsx +90 -0
  246. package/src/ui/textarea.tsx +17 -0
  247. package/src/ui/tooltip.tsx +55 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,21 @@
1
+ # Changelog
2
+
3
+ Newest first. Each version lists what changed for an app that uses the theme. When an app has run a version in
4
+ production, the version gets a line `verified in: <app>@<commit>` ([docs/05](../../docs/05-adoption-playbook.md),
5
+ "Definition of done").
6
+
7
+ ## 0.1.1
8
+
9
+ - No change to the package itself: the first version published through the npm trusted publisher (OIDC) with
10
+ provenance, without a token.
11
+
12
+ ## 0.1.0
13
+
14
+ - First version (#708): `NOTION_THEME` (the Notion design system's tokens), `theme.css` (tokens, Tailwind
15
+ utilities, `dark:` on the theme's scheme rule, tw-animate-css, the components as Tailwind sources), 36 shadcn/ui
16
+ components with the Notion deltas, `Status`, `PageHeader`, `PropertyList`, `PageFrame`, `PALETTE_COLORS`,
17
+ `ICON_STROKE_WIDTH`, `cn`, the built-in English copy with props to replace it, and `sft-bridge.css` for the pages of
18
+ the SOFTURE packages.
19
+ - On the kit's theme package contract (#708): `theme` (the standard export, same as `NOTION_THEME`, declared with
20
+ `defineTheme`), `softureTheme` in `package.json`, and `theme.css` built by the kit's `softure-theme-css` instead of
21
+ a script of its own.
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 SOFTURE
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,3 +1,115 @@
1
- # Temporary Holding Version
1
+ # @softure-ai/theme-notion
2
2
 
3
- This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
3
+ The Notion design system as a package: shadcn/ui (style new-york v4, Radix primitives, Tailwind CSS v4,
4
+ `lucide-react` icons) with Notion's tokens and the system's component deltas. The look: lots of white, warm graphite
5
+ instead of black, grey highlights instead of borders, colour only where it carries meaning. Built on
6
+ [`@softure-ai/theme-kit`](../theme-kit/README.md).
7
+
8
+ ## Install and wire up (Next.js App Router)
9
+
10
+ ```bash
11
+ npm i @softure-ai/theme-notion tailwindcss @tailwindcss/postcss
12
+ ```
13
+
14
+ ```css
15
+ /* app/globals.css */
16
+ @import "tailwindcss";
17
+ @import "@softure-ai/theme-notion/theme.css"; /* tokens, utilities, dark:, animations, the components' classes */
18
+ @import "@softure-ai/theme-notion/sft-bridge.css"; /* optional: pages of the SOFTURE packages in a PageFrame */
19
+ ```
20
+
21
+ `theme.css` names the package's components as Tailwind sources, so their classes are generated without the app
22
+ listing `node_modules`. It clears Tailwind's default palette: only the theme's colours exist as utilities.
23
+
24
+ An app that also renders pages of the SOFTURE packages (on `@softure-ai/ui`'s `--sft-*` tokens) keeps their base by
25
+ taking the scoped preflight instead of Tailwind's:
26
+
27
+ ```css
28
+ @import "@softure-ai/ui/styles.css"; /* first: it declares the layer order */
29
+ @layer theme, base, components, utilities;
30
+ @import "tailwindcss/theme.css" layer(theme);
31
+ @import "@softure-ai/theme-kit/preflight.css"; /* Tailwind's preflight, only inside [data-slot] elements */
32
+ @import "tailwindcss/utilities.css" layer(utilities);
33
+ @import "@softure-ai/theme-notion/theme.css";
34
+ @import "@softure-ai/theme-notion/sft-bridge.css";
35
+ ```
36
+
37
+ ```tsx
38
+ import { Button, Badge, Status, PageHeader, TooltipProvider, Toaster } from "@softure-ai/theme-notion";
39
+ import { CircleCheck } from "lucide-react";
40
+
41
+ <TooltipProvider>
42
+ <PageHeader title="Projects" crumbs={[{ label: "Workspace", href: "/" }, { label: "Projects" }]} />
43
+ <Badge variant="tag" color="blue">Marketing</Badge>
44
+ <Status color="green" icon={CircleCheck}>Done</Status>
45
+ <Button>Save</Button>
46
+ </TooltipProvider>
47
+ <Toaster />
48
+ ```
49
+
50
+ **Dark scheme.** Light by default, dark by the system setting; `class="dark"` (`next-themes` with
51
+ `attribute="class"`) or `data-theme="dark"` (`@softure-ai/ui`'s `ThemeScript` and `ThemeSwitch`) choose it, and
52
+ `light` the other way. `Toaster` follows the system unless it gets `theme="light" | "dark"`.
53
+
54
+ **Copy.** The components' built-in texts are accessible names in English (`notionMessages.en`). Pass the app's own
55
+ wording by props: `Breadcrumb aria-label`, `BreadcrumbEllipsis label`, `DialogContent closeLabel`,
56
+ `SheetContent closeLabel`, `Sidebar mobileTitle mobileDescription`, `SidebarTrigger label`, `SidebarRail label`,
57
+ `Spinner aria-label`, `CommandDialog title description`.
58
+
59
+ ## Rules, in short
60
+
61
+ - Background `background`, text `foreground`, secondary text `muted-foreground`. Never pure black.
62
+ - Hover is the grey `accent` background, never a border or a shadow; selected and pressed use `accent-strong`.
63
+ - One `primary` (blue, `#2383e2`) action per screen. Other buttons are `secondary`, `outline` or `ghost`.
64
+ - A palette colour (`gray`, `brown`, `orange`, `yellow`, `green`, `blue`, `purple`, `pink`, `red`, each with `-bg`,
65
+ `-tag`, `-tag-foreground`) marks an area (a tag) or a state (a status, a callout), never decoration. The same
66
+ colour always means the same thing; the app keeps its own table of meanings.
67
+ - Borders are quiet. Form fields have the grey `field` background and a thin `input` border; focus is the blue
68
+ `ring`. Things that float use shadows, not borders: `shadow-menu`, `shadow-dialog`, `shadow-card`.
69
+ - Type: system sans, mono for identifiers. `text-page-title` 40/48 bold once per screen, `text-heading-1..3`
70
+ 30/24/20, `text-body` 16/24, `text-ui` 14/20 (panels), `text-small` 12/16, `text-section-label` 12/16 medium.
71
+ - Spacing on a 4 px grid (`p-1` = 4 px). Sizes: `sidebar-width` 240, `content-width` 708, `content-width-wide` 1152,
72
+ `control-height` 28, `row-height` 34. Radius: `rounded-xs` 3 (tag, checkbox), `sm` 4 (tooltip, kbd), `md` 6
73
+ (button, field, menu item), `lg` 8 (callout, card), `xl` 10 (menu, select, dialog), `full` (switch).
74
+ - Icons: lucide at `ICON_STROKE_WIDTH` (1.75), 16 px in text; they inherit the text colour. No emoji in the interface.
75
+ - Statuses always carry a word and an icon, so states read apart without telling green from red.
76
+
77
+ ## Components
78
+
79
+ All 36 shadcn/ui components of the design system, exported from the package root: accordion, alert, alert-dialog,
80
+ avatar, badge, breadcrumb, button, button-group, card, checkbox, collapsible, command, dialog, dropdown-menu, empty,
81
+ field, input, input-group, item, kbd, label, popover, progress, scroll-area, select, separator, sheet, sidebar,
82
+ skeleton, sonner (`Toaster`), spinner, switch, table, tabs, textarea, tooltip. Compositions: `Status` (badge, icon,
83
+ word), `PageHeader` (breadcrumb, icon box, title, description, actions), `PropertyList` (fields of one record),
84
+ `PageFrame` (a page outside the app shell, the target of `sft-bridge.css`).
85
+
86
+ Deltas from stock shadcn:
87
+
88
+ - `button`: sizes 28/24/32 px, a smaller padding on the icon side, a Notion `ghost`, `secondary` hover
89
+ `accent-strong`, no shadows.
90
+ - `badge`: a `tag` variant and a `color` prop with the nine palette colours. `alert`: palette colour variants (a
91
+ Notion callout).
92
+ - `input`, `textarea`, `select`, `input-group`: 28 px high, grey `field` background, thin `input` border.
93
+ - `dropdown-menu`, `select`, `popover`, `command`: radius 10, `shadow-menu` without a border, 28 px items.
94
+ - `dialog`, `alert-dialog`: radius 10, `shadow-dialog`, no border. `card`: `shadow-card` instead of a border.
95
+ - `checkbox` 16 px with a 1.5 px border, `switch` 26 × 16 (thumb shadow in `SWITCH_THUMB_SHADOW_CLASS`, for a native
96
+ switch drawn the same), `tooltip` dark without an arrow, `tabs` default to the `line` variant, `progress` 6 px.
97
+ - `table`: a 34 px header in `muted-foreground`, a line under the last row too.
98
+ - `sidebar`: a controlled sidebar keeps no cookie; the phone sheet's title and description are props; the menu
99
+ skeleton's width is stable per item (shadcn draws a random one during render).
100
+ - `sonner`: no `next-themes`; `theme` is a prop. Focus everywhere: `ring-2 ring-ring` instead of `ring-[3px]`.
101
+
102
+ A component the app needs beyond these: add it in this package (`npx shadcn@latest add <name>` in a scratch app,
103
+ then the deltas above), not in the app.
104
+
105
+ ## Tokens
106
+
107
+ `NOTION_THEME` (`src/tokens.ts`, also exported as `theme`, the name every theme package uses) is the source, declared
108
+ with the kit's `defineTheme`; `tests/tokens.test.ts` keeps it equal to the design system's token snapshot
109
+ (`tests/fixtures/notion-tokens.json`). When the design system changes, refresh the snapshot and the definition in one
110
+ change. `cn` is `createThemeCn(NOTION_THEME)`. The build writes `theme.css` with the kit's `softure-theme-css` from
111
+ `softureTheme` in `package.json` (the kit README, "The theme package contract").
112
+
113
+ **Overriding a token.** Redefine its CSS variable after `theme.css` (`:root { --primary: #e16259; }`, and the same in
114
+ a `.dark` block for the dark value), or build a variant with `extendTheme(theme, { name, colors: { … } })` and write
115
+ it with `buildThemeCss` (the kit README, "Overriding in an app").
@@ -0,0 +1,47 @@
1
+ export { NOTION_THEME, theme } from "./tokens.js";
2
+ export { cn } from "./lib/utils.js";
3
+ export { notionMessages, type NotionMessages } from "./messages/index.js";
4
+ export * from "./ui/accordion.js";
5
+ export * from "./ui/alert.js";
6
+ export * from "./ui/alert-dialog.js";
7
+ export * from "./ui/avatar.js";
8
+ export * from "./ui/badge.js";
9
+ export * from "./ui/breadcrumb.js";
10
+ export * from "./ui/button.js";
11
+ export * from "./ui/button-group.js";
12
+ export * from "./ui/card.js";
13
+ export * from "./ui/checkbox.js";
14
+ export * from "./ui/collapsible.js";
15
+ export * from "./ui/command.js";
16
+ export * from "./ui/dialog.js";
17
+ export * from "./ui/dropdown-menu.js";
18
+ export * from "./ui/empty.js";
19
+ export * from "./ui/field.js";
20
+ export * from "./ui/input.js";
21
+ export * from "./ui/input-group.js";
22
+ export * from "./ui/item.js";
23
+ export * from "./ui/kbd.js";
24
+ export * from "./ui/label.js";
25
+ export * from "./ui/popover.js";
26
+ export * from "./ui/progress.js";
27
+ export * from "./ui/scroll-area.js";
28
+ export * from "./ui/select.js";
29
+ export * from "./ui/separator.js";
30
+ export * from "./ui/sheet.js";
31
+ export * from "./ui/sidebar.js";
32
+ export * from "./ui/skeleton.js";
33
+ export * from "./ui/sonner.js";
34
+ export * from "./ui/spinner.js";
35
+ export * from "./ui/switch.js";
36
+ export { SWITCH_THUMB_SHADOW_CLASS } from "./ui/switch-thumb.js";
37
+ export * from "./ui/table.js";
38
+ export * from "./ui/tabs.js";
39
+ export * from "./ui/textarea.js";
40
+ export * from "./ui/tooltip.js";
41
+ export { ICON_STROKE_WIDTH } from "./notion/icon-stroke.js";
42
+ export { PALETTE_COLORS, type PaletteColor } from "./notion/palette.js";
43
+ export { PageFrame, type PageFrameProps } from "./notion/PageFrame.js";
44
+ export { PageHeader, type PageCrumb, type PageHeaderProps } from "./notion/PageHeader.js";
45
+ export { PropertyList, type Property, type PropertyListProps } from "./notion/PropertyList.js";
46
+ export { Status, type StatusProps } from "./notion/Status.js";
47
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAE1E,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACjE,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAEhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,KAAK,SAAS,EAAE,KAAK,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAC1F,OAAO,EAAE,YAAY,EAAE,KAAK,QAAQ,EAAE,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC/F,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,oBAAoB,CAAC"}
package/dist/index.js ADDED
@@ -0,0 +1,49 @@
1
+ // The Notion theme: tokens, cn, the shadcn/ui components with the theme's deltas, and the compositions.
2
+ // The stylesheets are separate entries: `@softure-ai/theme-notion/theme.css` and `/sft-bridge.css`.
3
+ export { NOTION_THEME, theme } from "./tokens.js";
4
+ export { cn } from "./lib/utils.js";
5
+ export { notionMessages } from "./messages/index.js";
6
+ export * from "./ui/accordion.js";
7
+ export * from "./ui/alert.js";
8
+ export * from "./ui/alert-dialog.js";
9
+ export * from "./ui/avatar.js";
10
+ export * from "./ui/badge.js";
11
+ export * from "./ui/breadcrumb.js";
12
+ export * from "./ui/button.js";
13
+ export * from "./ui/button-group.js";
14
+ export * from "./ui/card.js";
15
+ export * from "./ui/checkbox.js";
16
+ export * from "./ui/collapsible.js";
17
+ export * from "./ui/command.js";
18
+ export * from "./ui/dialog.js";
19
+ export * from "./ui/dropdown-menu.js";
20
+ export * from "./ui/empty.js";
21
+ export * from "./ui/field.js";
22
+ export * from "./ui/input.js";
23
+ export * from "./ui/input-group.js";
24
+ export * from "./ui/item.js";
25
+ export * from "./ui/kbd.js";
26
+ export * from "./ui/label.js";
27
+ export * from "./ui/popover.js";
28
+ export * from "./ui/progress.js";
29
+ export * from "./ui/scroll-area.js";
30
+ export * from "./ui/select.js";
31
+ export * from "./ui/separator.js";
32
+ export * from "./ui/sheet.js";
33
+ export * from "./ui/sidebar.js";
34
+ export * from "./ui/skeleton.js";
35
+ export * from "./ui/sonner.js";
36
+ export * from "./ui/spinner.js";
37
+ export * from "./ui/switch.js";
38
+ export { SWITCH_THUMB_SHADOW_CLASS } from "./ui/switch-thumb.js";
39
+ export * from "./ui/table.js";
40
+ export * from "./ui/tabs.js";
41
+ export * from "./ui/textarea.js";
42
+ export * from "./ui/tooltip.js";
43
+ export { ICON_STROKE_WIDTH } from "./notion/icon-stroke.js";
44
+ export { PALETTE_COLORS } from "./notion/palette.js";
45
+ export { PageFrame } from "./notion/PageFrame.js";
46
+ export { PageHeader } from "./notion/PageHeader.js";
47
+ export { PropertyList } from "./notion/PropertyList.js";
48
+ export { Status } from "./notion/Status.js";
49
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,wGAAwG;AACxG,oGAAoG;AACpG,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,cAAc,EAAuB,MAAM,qBAAqB,CAAC;AAE1E,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,sBAAsB,CAAC;AACrC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACjE,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAEhC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAqB,MAAM,qBAAqB,CAAC;AACxE,OAAO,EAAE,SAAS,EAAuB,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,UAAU,EAAwC,MAAM,wBAAwB,CAAC;AAC1F,OAAO,EAAE,YAAY,EAAyC,MAAM,0BAA0B,CAAC;AAC/F,OAAO,EAAE,MAAM,EAAoB,MAAM,oBAAoB,CAAC"}
@@ -0,0 +1,6 @@
1
+ /**
2
+ * shadcn/ui's `cn` for the Notion theme: a later Tailwind utility wins over an earlier one of the same kind, and the
3
+ * theme's named text styles (`text-body`) and shadows (`shadow-menu`) merge as their own kinds.
4
+ */
5
+ export declare const cn: import("@softure-ai/theme-kit").Cn;
6
+ //# sourceMappingURL=utils.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAIA;;;GAGG;AACH,eAAO,MAAM,EAAE,oCAA8B,CAAC"}
@@ -0,0 +1,8 @@
1
+ import { createThemeCn } from "@softure-ai/theme-kit";
2
+ import { NOTION_THEME } from "../tokens.js";
3
+ /**
4
+ * shadcn/ui's `cn` for the Notion theme: a later Tailwind utility wins over an earlier one of the same kind, and the
5
+ * theme's named text styles (`text-body`) and shadows (`shadow-menu`) merge as their own kinds.
6
+ */
7
+ export const cn = createThemeCn(NOTION_THEME);
8
+ //# sourceMappingURL=utils.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C;;;GAGG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG,aAAa,CAAC,YAAY,CAAC,CAAC"}
@@ -0,0 +1,29 @@
1
+ /**
2
+ * The built-in English copy of the components: accessible names a screen reader announces. Every text has a prop to
3
+ * replace it with the app's own wording from its message layer.
4
+ */
5
+ export declare const en: {
6
+ readonly breadcrumb: {
7
+ readonly label: "breadcrumb";
8
+ readonly more: "More";
9
+ };
10
+ readonly dialog: {
11
+ readonly close: "Close";
12
+ };
13
+ readonly sheet: {
14
+ readonly close: "Close";
15
+ };
16
+ readonly sidebar: {
17
+ readonly mobileTitle: "Sidebar";
18
+ readonly mobileDescription: "Displays the mobile sidebar.";
19
+ readonly toggle: "Toggle Sidebar";
20
+ };
21
+ readonly spinner: {
22
+ readonly label: "Loading";
23
+ };
24
+ readonly command: {
25
+ readonly title: "Command Palette";
26
+ readonly description: "Search for a command to run...";
27
+ };
28
+ };
29
+ //# sourceMappingURL=en.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"en.d.ts","sourceRoot":"","sources":["../../src/messages/en.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;CAOL,CAAC"}
@@ -0,0 +1,13 @@
1
+ /**
2
+ * The built-in English copy of the components: accessible names a screen reader announces. Every text has a prop to
3
+ * replace it with the app's own wording from its message layer.
4
+ */
5
+ export const en = {
6
+ breadcrumb: { label: "breadcrumb", more: "More" },
7
+ dialog: { close: "Close" },
8
+ sheet: { close: "Close" },
9
+ sidebar: { mobileTitle: "Sidebar", mobileDescription: "Displays the mobile sidebar.", toggle: "Toggle Sidebar" },
10
+ spinner: { label: "Loading" },
11
+ command: { title: "Command Palette", description: "Search for a command to run..." },
12
+ };
13
+ //# sourceMappingURL=en.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"en.js","sourceRoot":"","sources":["../../src/messages/en.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,EAAE,GAAG;IAChB,UAAU,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE;IACjD,MAAM,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;IAC1B,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;IACzB,OAAO,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,iBAAiB,EAAE,8BAA8B,EAAE,MAAM,EAAE,gBAAgB,EAAE;IAChH,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE;IAC7B,OAAO,EAAE,EAAE,KAAK,EAAE,iBAAiB,EAAE,WAAW,EAAE,gCAAgC,EAAE;CAC5E,CAAC"}
@@ -0,0 +1,30 @@
1
+ import { en } from "./en.js";
2
+ /** The built-in English dictionary; replace a text through the component's prop (README, "Copy"). */
3
+ export declare const notionMessages: {
4
+ en: {
5
+ readonly breadcrumb: {
6
+ readonly label: "breadcrumb";
7
+ readonly more: "More";
8
+ };
9
+ readonly dialog: {
10
+ readonly close: "Close";
11
+ };
12
+ readonly sheet: {
13
+ readonly close: "Close";
14
+ };
15
+ readonly sidebar: {
16
+ readonly mobileTitle: "Sidebar";
17
+ readonly mobileDescription: "Displays the mobile sidebar.";
18
+ readonly toggle: "Toggle Sidebar";
19
+ };
20
+ readonly spinner: {
21
+ readonly label: "Loading";
22
+ };
23
+ readonly command: {
24
+ readonly title: "Command Palette";
25
+ readonly description: "Search for a command to run...";
26
+ };
27
+ };
28
+ };
29
+ export type NotionMessages = typeof en;
30
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/messages/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAE7B,qGAAqG;AACrG,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;CAAS,CAAC;AAErC,MAAM,MAAM,cAAc,GAAG,OAAO,EAAE,CAAC"}
@@ -0,0 +1,4 @@
1
+ import { en } from "./en.js";
2
+ /** The built-in English dictionary; replace a text through the component's prop (README, "Copy"). */
3
+ export const notionMessages = { en };
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/messages/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAE7B,qGAAqG;AACrG,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,EAAE,EAAE,CAAC"}
@@ -0,0 +1,11 @@
1
+ import type { ReactNode } from "react";
2
+ export interface PageFrameProps {
3
+ children: ReactNode;
4
+ }
5
+ /**
6
+ * A page outside the app shell (the sign-in and account pages of the packages, the not-found page): the window's
7
+ * height on the Notion background, with the package's `--sft-*` tokens re-pointed at the Notion theme
8
+ * (`src/app/sft-bridge.css`). No `data-slot`: the scoped preflight stays off the package pages.
9
+ */
10
+ export declare function PageFrame({ children }: PageFrameProps): import("react").JSX.Element;
11
+ //# sourceMappingURL=PageFrame.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PageFrame.d.ts","sourceRoot":"","sources":["../../src/notion/PageFrame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE,cAAc,+BAMrD"}
@@ -0,0 +1,10 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ /**
3
+ * A page outside the app shell (the sign-in and account pages of the packages, the not-found page): the window's
4
+ * height on the Notion background, with the package's `--sft-*` tokens re-pointed at the Notion theme
5
+ * (`src/app/sft-bridge.css`). No `data-slot`: the scoped preflight stays off the package pages.
6
+ */
7
+ export function PageFrame({ children }) {
8
+ return (_jsx("div", { "data-page-frame": "", className: "min-h-dvh bg-background font-sans text-ui text-foreground", children: children }));
9
+ }
10
+ //# sourceMappingURL=PageFrame.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PageFrame.js","sourceRoot":"","sources":["../../src/notion/PageFrame.tsx"],"names":[],"mappings":";AAMA;;;;GAIG;AACH,MAAM,UAAU,SAAS,CAAC,EAAE,QAAQ,EAAkB;IACpD,OAAO,CACL,iCAAqB,EAAE,EAAC,SAAS,EAAC,2DAA2D,YAC1F,QAAQ,GACL,CACP,CAAC;AACJ,CAAC"}
@@ -0,0 +1,16 @@
1
+ import { type ReactNode } from "react";
2
+ export interface PageCrumb {
3
+ label: string;
4
+ href?: string;
5
+ }
6
+ export interface PageHeaderProps {
7
+ title: ReactNode;
8
+ crumbs?: PageCrumb[];
9
+ icon?: ReactNode;
10
+ description?: ReactNode;
11
+ actions?: ReactNode;
12
+ children?: ReactNode;
13
+ className?: string;
14
+ }
15
+ export declare function PageHeader({ title, crumbs, icon, description, actions, children, className }: PageHeaderProps): import("react").JSX.Element;
16
+ //# sourceMappingURL=PageHeader.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../src/notion/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAYjD,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IAEd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,SAAS,EAAE,CAAC;IAErB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,eAAe,+BA8B7G"}
@@ -0,0 +1,9 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Fragment } from "react";
3
+ import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "../ui/breadcrumb.js";
4
+ import { cn } from "../lib/utils.js";
5
+ // The page's header, once per screen: breadcrumb, page icon, the 40 px title, what follows it, a description and actions.
6
+ export function PageHeader({ title, crumbs, icon, description, actions, children, className }) {
7
+ return (_jsxs("header", { "data-slot": "page-header", className: cn("flex flex-col", className), children: [crumbs && crumbs.length > 0 ? (_jsx(Breadcrumb, { children: _jsx(BreadcrumbList, { children: crumbs.map((crumb, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx(BreadcrumbSeparator, {}) : null, _jsx(BreadcrumbItem, { children: crumb.href === undefined ? (_jsx(BreadcrumbPage, { children: crumb.label })) : (_jsx(BreadcrumbLink, { href: crumb.href, children: crumb.label })) })] }, `${index}-${crumb.label}`))) }) })) : null, icon ? (_jsx("div", { className: "mt-6 mb-2 flex size-14 items-center justify-center rounded-xl bg-secondary [&>svg]:size-8", children: icon })) : null, _jsx("h1", { className: "text-page-title text-balance", children: title }), children, description ? _jsx("p", { className: "mt-1 text-body text-muted-foreground", children: description }) : null, actions ? _jsx("div", { className: "mt-3 flex flex-wrap gap-1", children: actions }) : null] }));
8
+ }
9
+ //# sourceMappingURL=PageHeader.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../src/notion/PageHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAEjD,OAAO,EACL,UAAU,EACV,cAAc,EACd,cAAc,EACd,cAAc,EACd,cAAc,EACd,mBAAmB,GACpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAoBrC,0HAA0H;AAC1H,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAmB;IAC5G,OAAO,CACL,+BAAkB,aAAa,EAAC,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,aACtE,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC7B,KAAC,UAAU,cACT,KAAC,cAAc,cACZ,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,MAAC,QAAQ,eACN,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAC,mBAAmB,KAAG,CAAC,CAAC,CAAC,IAAI,EAC3C,KAAC,cAAc,cACZ,KAAK,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAC1B,KAAC,cAAc,cAAE,KAAK,CAAC,KAAK,GAAkB,CAC/C,CAAC,CAAC,CAAC,CACF,KAAC,cAAc,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,YAAG,KAAK,CAAC,KAAK,GAAkB,CACjE,GACc,KARJ,GAAG,KAAK,IAAI,KAAK,CAAC,KAAK,EAAE,CAS7B,CACZ,CAAC,GACa,GACN,CACd,CAAC,CAAC,CAAC,IAAI,EACP,IAAI,CAAC,CAAC,CAAC,CACN,cAAK,SAAS,EAAC,2FAA2F,YAAE,IAAI,GAAO,CACxH,CAAC,CAAC,CAAC,IAAI,EACR,aAAI,SAAS,EAAC,8BAA8B,YAAE,KAAK,GAAM,EACxD,QAAQ,EACR,WAAW,CAAC,CAAC,CAAC,YAAG,SAAS,EAAC,sCAAsC,YAAE,WAAW,GAAK,CAAC,CAAC,CAAC,IAAI,EAC1F,OAAO,CAAC,CAAC,CAAC,cAAK,SAAS,EAAC,2BAA2B,YAAE,OAAO,GAAO,CAAC,CAAC,CAAC,IAAI,IACrE,CACV,CAAC;AACJ,CAAC"}
@@ -0,0 +1,12 @@
1
+ import type { ReactNode } from "react";
2
+ export interface Property {
3
+ label: string;
4
+ value: ReactNode;
5
+ icon?: ReactNode;
6
+ }
7
+ export interface PropertyListProps {
8
+ items: Property[];
9
+ className?: string;
10
+ }
11
+ export declare function PropertyList({ items, className }: PropertyListProps): import("react").JSX.Element;
12
+ //# sourceMappingURL=PropertyList.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PropertyList.d.ts","sourceRoot":"","sources":["../../src/notion/PropertyList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,iBAAiB,+BAoBnE"}
@@ -0,0 +1,8 @@
1
+ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
2
+ import { Field, FieldGroup, FieldLabel } from "../ui/field.js";
3
+ import { cn } from "../lib/utils.js";
4
+ // Properties as in a Notion database page: a 160 px label with its type icon, then the value.
5
+ export function PropertyList({ items, className }) {
6
+ return (_jsx(FieldGroup, { "data-slot": "property-list", className: cn("gap-0.5", className), children: items.map((item) => (_jsxs(Field, { orientation: "horizontal", className: "min-h-row-height items-center gap-0 [&>[data-slot=field-label]]:flex-none", children: [_jsxs(FieldLabel, { className: "w-40 flex-none gap-1.5 px-1.5 font-normal text-muted-foreground [&>svg]:size-4", children: [item.icon, item.label] }), _jsx("div", { className: "flex min-h-row-height min-w-0 flex-1 flex-wrap items-center gap-1 rounded-xs px-2 hover:bg-accent", children: item.value })] }, item.label))) }));
7
+ }
8
+ //# sourceMappingURL=PropertyList.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PropertyList.js","sourceRoot":"","sources":["../../src/notion/PropertyList.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAarC,8FAA8F;AAC9F,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,SAAS,EAAqB;IAClE,OAAO,CACL,KAAC,UAAU,iBAAW,eAAe,EAAC,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,YACtE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,MAAC,KAAK,IAEJ,WAAW,EAAC,YAAY,EACxB,SAAS,EAAC,2EAA2E,aAErF,MAAC,UAAU,IAAC,SAAS,EAAC,gFAAgF,aACnG,IAAI,CAAC,IAAI,EACT,IAAI,CAAC,KAAK,IACA,EACb,cAAK,SAAS,EAAC,mGAAmG,YAC/G,IAAI,CAAC,KAAK,GACP,KAVD,IAAI,CAAC,KAAK,CAWT,CACT,CAAC,GACS,CACd,CAAC;AACJ,CAAC"}
@@ -0,0 +1,11 @@
1
+ import type { LucideIcon } from "lucide-react";
2
+ import type { ReactNode } from "react";
3
+ import type { PaletteColor } from "./palette.js";
4
+ export interface StatusProps {
5
+ color: PaletteColor;
6
+ icon: LucideIcon;
7
+ children: ReactNode;
8
+ className?: string;
9
+ }
10
+ export declare function Status({ color, icon: Icon, children, className }: StatusProps): import("react").JSX.Element;
11
+ //# sourceMappingURL=Status.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Status.d.ts","sourceRoot":"","sources":["../../src/notion/Status.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAejD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,YAAY,CAAC;IACpB,IAAI,EAAE,UAAU,CAAC;IAEjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,WAAW,+BAY7E"}
@@ -0,0 +1,21 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Badge } from "../ui/badge.js";
3
+ import { cn } from "../lib/utils.js";
4
+ import { ICON_STROKE_WIDTH } from "./icon-stroke.js";
5
+ // Literal class names, so Tailwind generates each one.
6
+ const TEXT_COLOR = {
7
+ gray: "text-gray",
8
+ brown: "text-brown",
9
+ orange: "text-orange",
10
+ yellow: "text-yellow",
11
+ green: "text-green",
12
+ blue: "text-blue",
13
+ purple: "text-purple",
14
+ pink: "text-pink",
15
+ red: "text-red",
16
+ };
17
+ // A state of something (booked, to pay, overdue): a ghost badge with a line icon and a word in a palette colour.
18
+ export function Status({ color, icon: Icon, children, className }) {
19
+ return (_jsxs(Badge, { variant: "ghost", "data-slot": "status", "data-color": color, className: cn("gap-1.5 px-0 text-sm font-normal [&>svg]:size-4", TEXT_COLOR[color], className), children: [_jsx(Icon, { "aria-hidden": "true", strokeWidth: ICON_STROKE_WIDTH }), children] }));
20
+ }
21
+ //# sourceMappingURL=Status.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Status.js","sourceRoot":"","sources":["../../src/notion/Status.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAErC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAGrD,uDAAuD;AACvD,MAAM,UAAU,GAAiC;IAC/C,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE,YAAY;IACnB,MAAM,EAAE,aAAa;IACrB,MAAM,EAAE,aAAa;IACrB,KAAK,EAAE,YAAY;IACnB,IAAI,EAAE,WAAW;IACjB,MAAM,EAAE,aAAa;IACrB,IAAI,EAAE,WAAW;IACjB,GAAG,EAAE,UAAU;CAChB,CAAC;AAUF,iHAAiH;AACjH,MAAM,UAAU,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAe;IAC5E,OAAO,CACL,MAAC,KAAK,IACJ,OAAO,EAAC,OAAO,eACL,QAAQ,gBACN,KAAK,EACjB,SAAS,EAAE,EAAE,CAAC,iDAAiD,EAAE,UAAU,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,aAE9F,KAAC,IAAI,mBAAa,MAAM,EAAC,WAAW,EAAE,iBAAiB,GAAI,EAC1D,QAAQ,IACH,CACT,CAAC;AACJ,CAAC"}
@@ -0,0 +1,2 @@
1
+ export declare const ICON_STROKE_WIDTH = 1.75;
2
+ //# sourceMappingURL=icon-stroke.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icon-stroke.d.ts","sourceRoot":"","sources":["../../src/notion/icon-stroke.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,iBAAiB,OAAO,CAAC"}
@@ -0,0 +1,3 @@
1
+ // The design system's icon line: lucide icons at 1.75 instead of lucide's default 2 (docs/design-system.md, "Icons").
2
+ export const ICON_STROKE_WIDTH = 1.75;
3
+ //# sourceMappingURL=icon-stroke.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"icon-stroke.js","sourceRoot":"","sources":["../../src/notion/icon-stroke.ts"],"names":[],"mappings":"AAAA,sHAAsH;AACtH,MAAM,CAAC,MAAM,iBAAiB,GAAG,IAAI,CAAC"}
@@ -0,0 +1,3 @@
1
+ export declare const PALETTE_COLORS: readonly ["gray", "brown", "orange", "yellow", "green", "blue", "purple", "pink", "red"];
2
+ export type PaletteColor = (typeof PALETTE_COLORS)[number];
3
+ //# sourceMappingURL=palette.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/notion/palette.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,0FAA2F,CAAC;AAEvH,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC"}
@@ -0,0 +1,4 @@
1
+ // The design system's nine palette colours. A colour marks an area (a tag) or a state (a status, a callout), never
2
+ // decoration, and always means the same thing; each app keeps its own table of which meaning takes which colour.
3
+ export const PALETTE_COLORS = ["gray", "brown", "orange", "yellow", "green", "blue", "purple", "pink", "red"];
4
+ //# sourceMappingURL=palette.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"palette.js","sourceRoot":"","sources":["../../src/notion/palette.ts"],"names":[],"mappings":"AAAA,mHAAmH;AACnH,iHAAiH;AACjH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAU,CAAC"}