@psnext/design-system 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/README.md +126 -0
  2. package/dist/AiChatPanel.cjs +1603 -0
  3. package/dist/AiChatPanel.cjs.map +1 -0
  4. package/dist/AiChatPanel.js +1526 -0
  5. package/dist/AiChatPanel.js.map +1 -0
  6. package/dist/BodhiLogo.cjs +240 -0
  7. package/dist/BodhiLogo.cjs.map +1 -0
  8. package/dist/BodhiLogo.js +194 -0
  9. package/dist/BodhiLogo.js.map +1 -0
  10. package/dist/Skeleton.cjs +19 -0
  11. package/dist/Skeleton.cjs.map +1 -0
  12. package/dist/Skeleton.js +14 -0
  13. package/dist/Skeleton.js.map +1 -0
  14. package/dist/SustainLogo.cjs +415 -0
  15. package/dist/SustainLogo.cjs.map +1 -0
  16. package/dist/SustainLogo.js +378 -0
  17. package/dist/SustainLogo.js.map +1 -0
  18. package/dist/contexts/index.cjs +60 -0
  19. package/dist/contexts/index.cjs.map +1 -0
  20. package/dist/contexts/index.d.cts +23 -0
  21. package/dist/contexts/index.d.cts.map +1 -0
  22. package/dist/contexts/index.d.ts +23 -0
  23. package/dist/contexts/index.d.ts.map +1 -0
  24. package/dist/contexts/index.js +58 -0
  25. package/dist/contexts/index.js.map +1 -0
  26. package/dist/index.cjs +273 -0
  27. package/dist/index.d.cts +1440 -0
  28. package/dist/index.d.cts.map +1 -0
  29. package/dist/index.d.ts +1440 -0
  30. package/dist/index.d.ts.map +1 -0
  31. package/dist/index.js +7 -0
  32. package/dist/index2.d.cts +16 -0
  33. package/dist/index2.d.cts.map +1 -0
  34. package/dist/index2.d.ts +16 -0
  35. package/dist/index2.d.ts.map +1 -0
  36. package/dist/layouts/index.cjs +13 -0
  37. package/dist/layouts/index.d.cts +133 -0
  38. package/dist/layouts/index.d.cts.map +1 -0
  39. package/dist/layouts/index.d.ts +133 -0
  40. package/dist/layouts/index.d.ts.map +1 -0
  41. package/dist/layouts/index.js +2 -0
  42. package/dist/layouts.cjs +3245 -0
  43. package/dist/layouts.cjs.map +1 -0
  44. package/dist/layouts.js +3180 -0
  45. package/dist/layouts.js.map +1 -0
  46. package/dist/patterns/index.cjs +7375 -0
  47. package/dist/patterns/index.cjs.map +1 -0
  48. package/dist/patterns/index.d.cts +418 -0
  49. package/dist/patterns/index.d.cts.map +1 -0
  50. package/dist/patterns/index.d.ts +418 -0
  51. package/dist/patterns/index.d.ts.map +1 -0
  52. package/dist/patterns/index.js +7344 -0
  53. package/dist/patterns/index.js.map +1 -0
  54. package/dist/primitives/index.cjs +256 -0
  55. package/dist/primitives/index.d.cts +2 -0
  56. package/dist/primitives/index.d.ts +2 -0
  57. package/dist/primitives/index.js +5 -0
  58. package/dist/primitives.cjs +4292 -0
  59. package/dist/primitives.cjs.map +1 -0
  60. package/dist/primitives.js +2807 -0
  61. package/dist/primitives.js.map +1 -0
  62. package/dist/styles/base/colors.css +300 -0
  63. package/dist/styles/base/component-tokens.css +240 -0
  64. package/dist/styles/base/elevation.css +7 -0
  65. package/dist/styles/base/fonts.css +14 -0
  66. package/dist/styles/base/global.css +305 -0
  67. package/dist/styles/base/radius.css +22 -0
  68. package/dist/styles/base/semantic-aliases.css +53 -0
  69. package/dist/styles/base/spacing.css +33 -0
  70. package/dist/styles/base/typography.css +48 -0
  71. package/dist/styles/generated/bodhi-vars.css +34 -0
  72. package/dist/styles/generated/dark.css +87 -0
  73. package/dist/styles/generated/light.css +87 -0
  74. package/dist/styles/generated/slingshot-vars.css +34 -0
  75. package/dist/styles/generated/sustain-vars.css +34 -0
  76. package/dist/styles/index.css +32 -0
  77. package/dist/styles/theme.css +65 -0
  78. package/dist/styles/themes/bodhi.css +166 -0
  79. package/dist/styles/themes/slingshot.css +144 -0
  80. package/dist/styles/themes/sustain.css +130 -0
  81. package/package.json +131 -0
package/README.md ADDED
@@ -0,0 +1,126 @@
1
+ # @psnext/design-system
2
+
3
+ The PS Next design system — primitives, patterns, layouts, logos, icons, and a
4
+ CSS token/theme layer, shipped as one package with tree-shakeable deep imports.
5
+
6
+ ## Installation
7
+
8
+ ```bash
9
+ pnpm add @psnext/design-system
10
+ # peer deps:
11
+ pnpm add react react-dom
12
+ ```
13
+
14
+ The package ships ESM + CJS + type declarations. React 18 or 19 is supported
15
+ (peer dependency).
16
+
17
+ ## Usage
18
+
19
+ Import from the root, or from a category sub-path for better tree-shaking:
20
+
21
+ ```tsx
22
+ // Root barrel (primitives, layouts, logos, icons, contexts, utils)
23
+ import { Button, cn } from "@psnext/design-system";
24
+
25
+ // Deep imports (recommended)
26
+ import { Button, Dialog, Select } from "@psnext/design-system/primitives";
27
+ import { SlingshotLogo, SlingshotIcon } from "@psnext/design-system/primitives"; // logos & icons are primitives
28
+ import { InviteUsersDrawer, IconButton } from "@psnext/design-system/patterns";
29
+ import { Header, LeftNavigation } from "@psnext/design-system/layouts";
30
+ import { ThemeProvider, useTheme } from "@psnext/design-system/contexts";
31
+ // activity/right-panel providers ship from /patterns (see docs/tech-debt.md):
32
+ import { ActivityProvider, RightPanelProvider } from "@psnext/design-system/patterns";
33
+ ```
34
+
35
+ > **Note:** Patterns are **not** re-exported from the root barrel (the
36
+ > `AlertDialog` pattern would clash with the `AlertDialog` primitive). Always
37
+ > import patterns via `@psnext/design-system/patterns`.
38
+
39
+ ## Styling & theming
40
+
41
+ Components are authored with Tailwind v4 utility classes that resolve to the
42
+ design-system's CSS-variable tokens via a `@theme` bridge. A consuming app must:
43
+
44
+ 1. **Run Tailwind v4** and include the design system as a `@source` so its
45
+ utility classes are generated.
46
+ 2. **Import the token CSS + the `@theme` bridge**, then a brand theme.
47
+ 3. **Load the brand fonts** (Outfit / Inter / Geist Mono) via a `<link>` in your
48
+ HTML `<head>` — see below.
49
+
50
+ ```css
51
+ /* app.css */
52
+ @import "tailwindcss";
53
+ @import "@psnext/design-system/styles"; /* tokens: base + light/dark */
54
+ @import "@psnext/design-system/styles/theme"; /* @theme bridge (tokens → utilities) */
55
+ @import "@psnext/design-system/styles/themes/slingshot"; /* brand theme */
56
+
57
+ @source "../node_modules/@psnext/design-system"; /* scan compiled component classes */
58
+ ```
59
+
60
+ ### Fonts (required)
61
+
62
+ The font *tokens* (`--font-heading: "Outfit"`, `--font-body: "Inter"`,
63
+ `--font-mono: "Geist Mono"`) ship in the CSS, but the actual font files must be
64
+ loaded by **your app's HTML** — a CSS `@import` for them is dropped once bundled
65
+ after Tailwind, so the components would silently fall back to the system font.
66
+ Add to your `<head>`:
67
+
68
+ ```html
69
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
70
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
71
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Inter:wght@100..900&display=swap" />
72
+ ```
73
+
74
+ > Only **Outfit** and **Inter** are loaded — matching the source design. The
75
+ > `--font-mono` token names Geist Mono but it is not loaded by default, so
76
+ > monospace text falls back to the system monospace font. To use Geist Mono,
77
+ > add `&family=Geist+Mono:wght@100..900` to the link above.
78
+
79
+ ### Available style entry points
80
+
81
+ | Import | Contents |
82
+ |---|---|
83
+ | `…/styles` | Token vars (base + light/dark), the main entry |
84
+ | `…/styles/theme` | Tailwind `@theme inline` bridge (maps tokens → `bg-primary`, etc.) |
85
+ | `…/styles/themes/slingshot` | Slingshot brand theme |
86
+ | `…/styles/themes/bodhi` | Bodhi brand theme |
87
+ | `…/styles/themes/sustain` | Sustain brand theme |
88
+ | `…/styles/generated/light` · `…/dark` | Raw generated token blocks |
89
+
90
+ Light/dark is driven by an `html.dark` class; brand themes apply a
91
+ `.theme-*` class — see [docs/architecture.md](../../docs/architecture.md).
92
+
93
+ ## Components
94
+
95
+ **Primitives** (atoms/molecules — Radix/shadcn): Accordion, Alert, AlertDialog,
96
+ AspectRatio, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Carousel, Chart,
97
+ Checkbox, Collapsible, Command, ContextMenu, Dialog, Drawer, DropdownMenu, Form,
98
+ HoverCard, Input, InputOtp, Label, Menubar, NavigationMenu, Pagination, Popover,
99
+ Progress, RadioGroup, Resizable, ScrollArea, Select, Separator, Sheet, Sidebar,
100
+ Skeleton, Slider, Sonner, Switch, Table, Tabs, Textarea, Toggle, ToggleGroup,
101
+ Tooltip — plus the brand **logos** (BodhiLogo, PsaiLogo, SlingshotLogo,
102
+ SustainLogo) and **icons** (BodhiIcon, SlingshotIcon, SustainIcon), which are
103
+ also primitives.
104
+
105
+ **Patterns** (organisms): AccountProjectSwitcher, AddContextDrawer,
106
+ AddNewRoleDrawer, AiChatPanel, AlertDialog, CategorySection, IconButton,
107
+ InfoBanner, InviteUsersDrawer, ProductSwitcher, ProjectBulkUploadDrawer,
108
+ ResourceTile, RichCheckboxGroup, TabGroup, ViewEditUserDrawer.
109
+
110
+ **Layouts** (page chrome): AnimatedBackground, BodhiHeader, Header,
111
+ LeftNavigation, Logo, MobileGate, PsaiHeader, RightSidebar, SlingshotHeader,
112
+ SustainHeader.
113
+
114
+ Browse them interactively in Storybook (`pnpm storybook:dev` from the repo root).
115
+
116
+ ## Local development
117
+
118
+ ```bash
119
+ pnpm --filter @psnext/design-system dev # tsdown watch build
120
+ pnpm --filter @psnext/design-system tokens:build # regenerate token CSS
121
+ pnpm --filter @psnext/design-system test # vitest
122
+ pnpm --filter @psnext/design-system build # tokens + bundle
123
+ ```
124
+
125
+ See [CONTRIBUTING.md](../../CONTRIBUTING.md) for the component-authoring
126
+ convention.