@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.
- package/CHANGELOG.md +21 -0
- package/LICENSE +21 -0
- package/README.md +114 -2
- package/dist/index.d.ts +47 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +49 -0
- package/dist/index.js.map +1 -0
- package/dist/lib/utils.d.ts +6 -0
- package/dist/lib/utils.d.ts.map +1 -0
- package/dist/lib/utils.js +8 -0
- package/dist/lib/utils.js.map +1 -0
- package/dist/messages/en.d.ts +29 -0
- package/dist/messages/en.d.ts.map +1 -0
- package/dist/messages/en.js +13 -0
- package/dist/messages/en.js.map +1 -0
- package/dist/messages/index.d.ts +30 -0
- package/dist/messages/index.d.ts.map +1 -0
- package/dist/messages/index.js +4 -0
- package/dist/messages/index.js.map +1 -0
- package/dist/notion/PageFrame.d.ts +11 -0
- package/dist/notion/PageFrame.d.ts.map +1 -0
- package/dist/notion/PageFrame.js +10 -0
- package/dist/notion/PageFrame.js.map +1 -0
- package/dist/notion/PageHeader.d.ts +16 -0
- package/dist/notion/PageHeader.d.ts.map +1 -0
- package/dist/notion/PageHeader.js +9 -0
- package/dist/notion/PageHeader.js.map +1 -0
- package/dist/notion/PropertyList.d.ts +12 -0
- package/dist/notion/PropertyList.d.ts.map +1 -0
- package/dist/notion/PropertyList.js +8 -0
- package/dist/notion/PropertyList.js.map +1 -0
- package/dist/notion/Status.d.ts +11 -0
- package/dist/notion/Status.d.ts.map +1 -0
- package/dist/notion/Status.js +21 -0
- package/dist/notion/Status.js.map +1 -0
- package/dist/notion/icon-stroke.d.ts +2 -0
- package/dist/notion/icon-stroke.d.ts.map +1 -0
- package/dist/notion/icon-stroke.js +3 -0
- package/dist/notion/icon-stroke.js.map +1 -0
- package/dist/notion/palette.d.ts +3 -0
- package/dist/notion/palette.d.ts.map +1 -0
- package/dist/notion/palette.js +4 -0
- package/dist/notion/palette.js.map +1 -0
- package/dist/sft-bridge.css +47 -0
- package/dist/theme.css +388 -0
- package/dist/tokens.d.ts +801 -0
- package/dist/tokens.d.ts.map +1 -0
- package/dist/tokens.js +139 -0
- package/dist/tokens.js.map +1 -0
- package/dist/ui/accordion.d.ts +8 -0
- package/dist/ui/accordion.d.ts.map +1 -0
- package/dist/ui/accordion.js +20 -0
- package/dist/ui/accordion.js.map +1 -0
- package/dist/ui/alert-dialog.d.ts +19 -0
- package/dist/ui/alert-dialog.d.ts.map +1 -0
- package/dist/ui/alert-dialog.js +44 -0
- package/dist/ui/alert-dialog.js.map +1 -0
- package/dist/ui/alert.d.ts +10 -0
- package/dist/ui/alert.d.ts.map +1 -0
- package/dist/ui/alert.js +35 -0
- package/dist/ui/alert.js.map +1 -0
- package/dist/ui/avatar.d.ts +12 -0
- package/dist/ui/avatar.d.ts.map +1 -0
- package/dist/ui/avatar.js +25 -0
- package/dist/ui/avatar.js.map +1 -0
- package/dist/ui/badge.d.ts +11 -0
- package/dist/ui/badge.d.ts.map +1 -0
- package/dist/ui/badge.js +41 -0
- package/dist/ui/badge.js.map +1 -0
- package/dist/ui/breadcrumb.d.ts +14 -0
- package/dist/ui/breadcrumb.d.ts.map +1 -0
- package/dist/ui/breadcrumb.js +30 -0
- package/dist/ui/breadcrumb.js.map +1 -0
- package/dist/ui/button-group.d.ts +12 -0
- package/dist/ui/button-group.d.ts.map +1 -0
- package/dist/ui/button-group.js +28 -0
- package/dist/ui/button-group.js.map +1 -0
- package/dist/ui/button.d.ts +11 -0
- package/dist/ui/button.d.ts.map +1 -0
- package/dist/ui/button.js +37 -0
- package/dist/ui/button.js.map +1 -0
- package/dist/ui/card.d.ts +10 -0
- package/dist/ui/card.d.ts.map +1 -0
- package/dist/ui/card.js +26 -0
- package/dist/ui/card.js.map +1 -0
- package/dist/ui/checkbox.d.ts +5 -0
- package/dist/ui/checkbox.d.ts.map +1 -0
- package/dist/ui/checkbox.js +11 -0
- package/dist/ui/checkbox.js.map +1 -0
- package/dist/ui/collapsible.d.ts +6 -0
- package/dist/ui/collapsible.d.ts.map +1 -0
- package/dist/ui/collapsible.js +14 -0
- package/dist/ui/collapsible.js.map +1 -0
- package/dist/ui/command.d.ts +19 -0
- package/dist/ui/command.d.ts.map +1 -0
- package/dist/ui/command.js +37 -0
- package/dist/ui/command.js.map +1 -0
- package/dist/ui/dialog.d.ts +19 -0
- package/dist/ui/dialog.d.ts.map +1 -0
- package/dist/ui/dialog.js +40 -0
- package/dist/ui/dialog.js.map +1 -0
- package/dist/ui/dropdown-menu.d.ts +26 -0
- package/dist/ui/dropdown-menu.d.ts.map +1 -0
- package/dist/ui/dropdown-menu.js +53 -0
- package/dist/ui/dropdown-menu.js.map +1 -0
- package/dist/ui/empty.d.ts +12 -0
- package/dist/ui/empty.d.ts.map +1 -0
- package/dist/ui/empty.js +34 -0
- package/dist/ui/empty.js.map +1 -0
- package/dist/ui/field.d.ts +25 -0
- package/dist/ui/field.d.ts.map +1 -0
- package/dist/ui/field.js +77 -0
- package/dist/ui/field.js.map +1 -0
- package/dist/ui/input-group.d.ts +17 -0
- package/dist/ui/input-group.d.ts.map +1 -0
- package/dist/ui/input-group.js +65 -0
- package/dist/ui/input-group.js.map +1 -0
- package/dist/ui/input.d.ts +4 -0
- package/dist/ui/input.d.ts.map +1 -0
- package/dist/ui/input.js +8 -0
- package/dist/ui/input.js.map +1 -0
- package/dist/ui/item.d.ts +24 -0
- package/dist/ui/item.d.ts.map +1 -0
- package/dist/ui/item.js +68 -0
- package/dist/ui/item.js.map +1 -0
- package/dist/ui/kbd.d.ts +4 -0
- package/dist/ui/kbd.d.ts.map +1 -0
- package/dist/ui/kbd.js +10 -0
- package/dist/ui/kbd.js.map +1 -0
- package/dist/ui/label.d.ts +5 -0
- package/dist/ui/label.d.ts.map +1 -0
- package/dist/ui/label.js +10 -0
- package/dist/ui/label.js.map +1 -0
- package/dist/ui/popover.d.ts +11 -0
- package/dist/ui/popover.d.ts.map +1 -0
- package/dist/ui/popover.js +28 -0
- package/dist/ui/popover.js.map +1 -0
- package/dist/ui/progress.d.ts +5 -0
- package/dist/ui/progress.d.ts.map +1 -0
- package/dist/ui/progress.js +10 -0
- package/dist/ui/progress.js.map +1 -0
- package/dist/ui/scroll-area.d.ts +6 -0
- package/dist/ui/scroll-area.d.ts.map +1 -0
- package/dist/ui/scroll-area.js +15 -0
- package/dist/ui/scroll-area.js.map +1 -0
- package/dist/ui/select.d.ts +16 -0
- package/dist/ui/select.d.ts.map +1 -0
- package/dist/ui/select.js +40 -0
- package/dist/ui/select.js.map +1 -0
- package/dist/ui/separator.d.ts +5 -0
- package/dist/ui/separator.d.ts.map +1 -0
- package/dist/ui/separator.js +10 -0
- package/dist/ui/separator.js.map +1 -0
- package/dist/ui/sheet.d.ts +16 -0
- package/dist/ui/sheet.d.ts.map +1 -0
- package/dist/ui/sheet.js +43 -0
- package/dist/ui/sheet.js.map +1 -0
- package/dist/ui/sidebar.d.ts +76 -0
- package/dist/ui/sidebar.d.ts.map +1 -0
- package/dist/ui/sidebar.js +216 -0
- package/dist/ui/sidebar.js.map +1 -0
- package/dist/ui/skeleton.d.ts +3 -0
- package/dist/ui/skeleton.d.ts.map +1 -0
- package/dist/ui/skeleton.js +7 -0
- package/dist/ui/skeleton.js.map +1 -0
- package/dist/ui/sonner.d.ts +4 -0
- package/dist/ui/sonner.d.ts.map +1 -0
- package/dist/ui/sonner.js +22 -0
- package/dist/ui/sonner.js.map +1 -0
- package/dist/ui/spinner.d.ts +3 -0
- package/dist/ui/spinner.d.ts.map +1 -0
- package/dist/ui/spinner.js +9 -0
- package/dist/ui/spinner.js.map +1 -0
- package/dist/ui/switch-thumb.d.ts +7 -0
- package/dist/ui/switch-thumb.d.ts.map +1 -0
- package/dist/ui/switch-thumb.js +7 -0
- package/dist/ui/switch-thumb.js.map +1 -0
- package/dist/ui/switch.d.ts +7 -0
- package/dist/ui/switch.d.ts.map +1 -0
- package/dist/ui/switch.js +11 -0
- package/dist/ui/switch.js.map +1 -0
- package/dist/ui/table.d.ts +11 -0
- package/dist/ui/table.d.ts.map +1 -0
- package/dist/ui/table.js +30 -0
- package/dist/ui/table.js.map +1 -0
- package/dist/ui/tabs.d.ts +12 -0
- package/dist/ui/tabs.d.ts.map +1 -0
- package/dist/ui/tabs.js +31 -0
- package/dist/ui/tabs.js.map +1 -0
- package/dist/ui/textarea.d.ts +4 -0
- package/dist/ui/textarea.d.ts.map +1 -0
- package/dist/ui/textarea.js +8 -0
- package/dist/ui/textarea.js.map +1 -0
- package/dist/ui/tooltip.d.ts +8 -0
- package/dist/ui/tooltip.d.ts.map +1 -0
- package/dist/ui/tooltip.js +19 -0
- package/dist/ui/tooltip.js.map +1 -0
- package/package.json +69 -4
- package/src/index.ts +50 -0
- package/src/lib/utils.ts +9 -0
- package/src/messages/en.ts +12 -0
- package/src/messages/index.ts +6 -0
- package/src/notion/PageFrame.tsx +18 -0
- package/src/notion/PageHeader.tsx +62 -0
- package/src/notion/PropertyList.tsx +38 -0
- package/src/notion/Status.tsx +44 -0
- package/src/notion/icon-stroke.ts +2 -0
- package/src/notion/palette.ts +5 -0
- package/src/sft-bridge.css +47 -0
- package/src/tokens.ts +140 -0
- package/src/ui/accordion.tsx +65 -0
- package/src/ui/alert-dialog.tsx +196 -0
- package/src/ui/alert.tsx +74 -0
- package/src/ui/avatar.tsx +108 -0
- package/src/ui/badge.tsx +63 -0
- package/src/ui/breadcrumb.tsx +113 -0
- package/src/ui/button-group.tsx +83 -0
- package/src/ui/button.tsx +62 -0
- package/src/ui/card.tsx +91 -0
- package/src/ui/checkbox.tsx +31 -0
- package/src/ui/collapsible.tsx +33 -0
- package/src/ui/command.tsx +185 -0
- package/src/ui/dialog.tsx +162 -0
- package/src/ui/dropdown-menu.tsx +256 -0
- package/src/ui/empty.tsx +103 -0
- package/src/ui/field.tsx +248 -0
- package/src/ui/input-group.tsx +170 -0
- package/src/ui/input.tsx +20 -0
- package/src/ui/item.tsx +193 -0
- package/src/ui/kbd.tsx +28 -0
- package/src/ui/label.tsx +23 -0
- package/src/ui/popover.tsx +88 -0
- package/src/ui/progress.tsx +30 -0
- package/src/ui/scroll-area.tsx +57 -0
- package/src/ui/select.tsx +189 -0
- package/src/ui/separator.tsx +27 -0
- package/src/ui/sheet.tsx +146 -0
- package/src/ui/sidebar.tsx +744 -0
- package/src/ui/skeleton.tsx +13 -0
- package/src/ui/sonner.tsx +39 -0
- package/src/ui/spinner.tsx +16 -0
- package/src/ui/switch-thumb.ts +6 -0
- package/src/ui/switch.tsx +36 -0
- package/src/ui/table.tsx +115 -0
- package/src/ui/tabs.tsx +90 -0
- package/src/ui/textarea.tsx +17 -0
- 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
|
-
#
|
|
1
|
+
# @softure-ai/theme-notion
|
|
2
2
|
|
|
3
|
-
|
|
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").
|
package/dist/index.d.ts
ADDED
|
@@ -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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
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 @@
|
|
|
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"}
|