@forthtilliath/forth-ui 0.2.0 → 0.2.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 (7) hide show
  1. package/README.md +77 -11
  2. package/dist/components/grid/grid-item.d.ts +1 -1
  3. package/dist/components/grid/grid-item.d.ts.map +1 -1
  4. package/dist/components/grid/grid.d.ts +1 -1
  5. package/dist/components/grid/grid.d.ts.map +1 -1
  6. package/dist/components/grid/grid.js +1 -1
  7. package/package.json +7 -7
package/README.md CHANGED
@@ -44,10 +44,26 @@ so you don't have to wire the same recipe from scratch in every project.
44
44
 
45
45
  ## Installation
46
46
 
47
+ ### Via npm
48
+
49
+ ```bash
50
+ npm install @forthtilliath/forth-ui
51
+ ```
52
+
53
+ `@forthtilliath/shadcn-ui` (the primitives forth-ui is built on) is a
54
+ regular `dependencies` entry, not a peer — it's installed automatically,
55
+ no need to add it yourself.
56
+
57
+ Import the compiled stylesheet once, alongside your component imports:
58
+
59
+ ```ts
60
+ import "@forthtilliath/forth-ui/styles/globals.css";
61
+ ```
62
+
47
63
  ### As a workspace package (this monorepo)
48
64
 
49
- `forth-ui` is `private: true` and consumed internally via the pnpm
50
- workspace:
65
+ Within this monorepo, `forth-ui` is consumed the same way, just via the
66
+ pnpm workspace protocol instead of a published version range:
51
67
 
52
68
  ```json
53
69
  {
@@ -57,12 +73,6 @@ workspace:
57
73
  }
58
74
  ```
59
75
 
60
- Import the compiled stylesheet once, alongside your component imports:
61
-
62
- ```ts
63
- import "@forthtilliath/forth-ui/styles/globals.css";
64
- ```
65
-
66
76
  Components are built to `dist/` (`./components/*` →
67
77
  `./dist/components/*/index.js`), so run `pnpm run build` (or `dev`) in
68
78
  this package after source changes for consumers to pick them up.
@@ -244,6 +254,62 @@ CSS variables (`--primary`, `--muted`, `--border`, ...) already defined by
244
254
  theming shadcn-ui — swap the CSS variables (or the whole theme preset) and
245
255
  every forth-ui component follows.
246
256
 
257
+ ### Setup
258
+
259
+ In your app's CSS entry point, import the base stylesheet, then a theme
260
+ from `@forthtilliath/shadcn-ui/styles/themes/*.css` — each one just
261
+ redeclares the same `:root` custom properties, so importing it _after_ the
262
+ base file overrides the default colors via normal CSS cascade:
263
+
264
+ ```css
265
+ @import "@forthtilliath/shadcn-ui/styles/globals-static.css";
266
+ @import "@forthtilliath/shadcn-ui/styles/themes/rose.css";
267
+
268
+ @source "../node_modules/@forthtilliath/*/dist/**/*.js";
269
+ ```
270
+
271
+ Don't add your own `@import "tailwindcss";` — `globals-static.css` already
272
+ does that internally.
273
+
274
+ **What that `@source` line does, and why it's needed:** Tailwind only
275
+ generates CSS for class names it can actually find, as literal text, in
276
+ the files it scans — by default your own project source, honoring
277
+ `.gitignore` (which is why `node_modules` is skipped: scanning every
278
+ dependency would be slow and mostly pointless). But forth-ui and shadcn-ui
279
+ ship pre-built, and their component code — the literal `"bg-primary"`,
280
+ `"rounded-md"`, etc. strings — only exists inside their already-compiled
281
+ `node_modules/@forthtilliath/*/dist/**/*.js` files. Without pointing
282
+ Tailwind at them explicitly, none of those classes would be generated and
283
+ every forth-ui/shadcn-ui component would render completely unstyled. This
284
+ one line, with a wildcard for the package name, covers both packages (and
285
+ any other `@forthtilliath/*` package added later) — confirmed to produce
286
+ the exact same generated CSS as listing each package's path separately.
287
+ This isn't a workaround specific to forth-ui: it's the
288
+ [documented, standard way](https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources)
289
+ Tailwind v4 expects any npm-distributed component library to be consumed.
290
+
291
+ ### Available themes
292
+
293
+ 11 [tweakcn](https://tweakcn.com)-generated themes ship under
294
+ `@forthtilliath/shadcn-ui/styles/themes/`, all rendered here with the same
295
+ components:
296
+
297
+ | `default` | `blue` | `bubblegum` |
298
+ | ------------------------------------------- | ------------------------------------- | ----------------------------------------------- |
299
+ | ![default theme](./docs/themes/default.png) | ![blue theme](./docs/themes/blue.png) | ![bubblegum theme](./docs/themes/bubblegum.png) |
300
+
301
+ | `claymorphism` | `green` | `orange` |
302
+ | ----------------------------------------------------- | --------------------------------------- | ----------------------------------------- |
303
+ | ![claymorphism theme](./docs/themes/claymorphism.png) | ![green theme](./docs/themes/green.png) | ![orange theme](./docs/themes/orange.png) |
304
+
305
+ | `red` | `rose` | `twitter` |
306
+ | ----------------------------------- | ------------------------------------- | ------------------------------------------- |
307
+ | ![red theme](./docs/themes/red.png) | ![rose theme](./docs/themes/rose.png) | ![twitter theme](./docs/themes/twitter.png) |
308
+
309
+ | `violet` | `yellow` |
310
+ | ----------------------------------------- | ----------------------------------------- |
311
+ | ![violet theme](./docs/themes/violet.png) | ![yellow theme](./docs/themes/yellow.png) |
312
+
247
313
  ## Development
248
314
 
249
315
  ```bash
@@ -270,9 +336,9 @@ pnpm run registry:build # registry.json -> public/r/*.json (shadcn build)
270
336
  pnpm run registry:sync # both, in order
271
337
  ```
272
338
 
273
- `Grid` is intentionally excluded — it depends on two private, unpublished
274
- monorepo packages (`@forthtilliath/react-hooks`, `@forthtilliath/types`)
275
- that aren't inlined into the registry item yet.
339
+ `Grid` is intentionally excluded — it depends on
340
+ `@forthtilliath/react-kit` and `@forthtilliath/ts-types`, external npm
341
+ packages that aren't inlined into the registry item yet.
276
342
 
277
343
  ## License
278
344
 
package/dist/components/grid/grid-item.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import type React from "react";
2
- import type { Prettify } from "@forthtilliath/types/object";
2
+ import type { Prettify } from "@forthtilliath/ts-types/object";
3
3
  import { type GridItemVariants } from "./variants";
4
4
  type Props = Prettify<GridItemVariants & React.ComponentProps<"div"> & {
5
5
  children: React.ReactNode;
package/dist/components/grid/grid-item.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"grid-item.d.ts","sourceRoot":"","sources":["../../../src/components/grid/grid-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAG5D,OAAO,EAEL,KAAK,gBAAgB,EAEtB,MAAM,YAAY,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CACnB,gBAAgB,GACd,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CACJ,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkB3B"}
1
+ {"version":3,"file":"grid-item.d.ts","sourceRoot":"","sources":["../../../src/components/grid/grid-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAG/D,OAAO,EAEL,KAAK,gBAAgB,EAEtB,MAAM,YAAY,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CACnB,gBAAgB,GACd,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC5B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CACJ,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAkB3B"}
package/dist/components/grid/grid.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import type React from "react";
2
2
  import { type ClassValue } from "@forthtilliath/shadcn-ui/lib/utils";
3
- import { type Prettify } from "@forthtilliath/types/object";
3
+ import { type Prettify } from "@forthtilliath/ts-types/object";
4
4
  import { GridItem } from "./grid-item";
5
5
  import type { GridVariants } from "./variants";
6
6
  export type GridProps = Prettify<{
package/dist/components/grid/grid.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/components/grid/grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,KAAK,UAAU,EAAM,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAG5D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,MAAM,MAAM,SAAS,GAAG,QAAQ,CAC9B;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,GAAG,YAAY,GACd,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC,CAC1D,CAAC;AAEF,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,QAAc,EACd,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACT,EAAE,SAAS,qBAqBX;yBA7Be,IAAI"}
1
+ {"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/components/grid/grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAE,KAAK,UAAU,EAAM,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAG/D,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,MAAM,MAAM,SAAS,GAAG,QAAQ,CAC9B;IACE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,GAAG,YAAY,GACd,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC,CAC1D,CAAC;AAEF,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,QAAc,EACd,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACT,EAAE,SAAS,qBAqBX;yBA7Be,IAAI"}
package/dist/components/grid/grid.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { useMemo, useState } from "react";
3
- import { useKeyListener } from "@forthtilliath/react-hooks/useKeyListener";
3
+ import { useKeyListener } from "@forthtilliath/react-kit/useKeyListener";
4
4
  import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
5
5
  import { GridDebugContext } from "./context";
6
6
  import { GridItem } from "./grid-item";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@forthtilliath/forth-ui",
3
- "version": "0.2.0",
3
+ "version": "0.2.1",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "publishConfig": {
@@ -8,11 +8,11 @@
8
8
  },
9
9
  "repository": {
10
10
  "type": "git",
11
- "url": "https://github.com/Forthtilliath/turborepo.git",
11
+ "url": "https://github.com/Forthtilliath/forthtilliath-packages.git",
12
12
  "directory": "packages/react/forth-ui"
13
13
  },
14
- "homepage": "https://github.com/Forthtilliath/turborepo/tree/main/packages/react/forth-ui#readme",
15
- "bugs": "https://github.com/Forthtilliath/turborepo/issues",
14
+ "homepage": "https://github.com/Forthtilliath/forthtilliath-packages/tree/main/packages/react/forth-ui#readme",
15
+ "bugs": "https://github.com/Forthtilliath/forthtilliath-packages/issues",
16
16
  "dependencies": {
17
17
  "@radix-ui/react-accordion": "^1.2.16",
18
18
  "@radix-ui/react-radio-group": "^1.4.3",
@@ -24,8 +24,8 @@
24
24
  "react": "^19.2.7",
25
25
  "react-dom": "^19.2.7",
26
26
  "shiki": "^4.3.1",
27
- "@forthtilliath/shadcn-ui": "0.2.0",
28
- "@forthtilliath/react-hooks": "0.1.0"
27
+ "@forthtilliath/react-kit": "0.1.0",
28
+ "@forthtilliath/shadcn-ui": "0.2.0"
29
29
  },
30
30
  "devDependencies": {
31
31
  "@tailwindcss/postcss": "4.1.12",
@@ -39,7 +39,7 @@
39
39
  "tailwindcss": "4.1.12",
40
40
  "typescript": "^5.9.3",
41
41
  "@forthtilliath/eslint-config": "0.0.0",
42
- "@forthtilliath/types": "0.1.0",
42
+ "@forthtilliath/ts-types": "0.1.0",
43
43
  "@forthtilliath/typescript-config": "0.0.0"
44
44
  },
45
45
  "files": [