dowel-ui 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -1
- package/dist/cn.d.ts +18 -0
- package/dist/cn.d.ts.map +1 -0
- package/dist/cn.js +21 -0
- package/dist/cn.js.map +1 -0
- package/dist/index.d.ts +3 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -2
- package/dist/index.js.map +1 -1
- package/package.json +8 -2
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@ The lacodda line design system: theme tokens and React primitives, distributed a
|
|
|
8
8
|
|
|
9
9
|
A dowel is the hidden peg that joins two boards so the seam does not show. That is what this does for the products of the line: they look made by one hand, and nobody sees the joint.
|
|
10
10
|
|
|
11
|
-
**Status:** v0.
|
|
11
|
+
**Status:** v0.4.0 - the theme, the scales, an accent per product, and the first primitive. See the [roadmap](#roadmap).
|
|
12
12
|
|
|
13
13
|
## The theme
|
|
14
14
|
|
|
@@ -71,6 +71,19 @@ Or copy the files in instead of depending on the package:
|
|
|
71
71
|
npx shadcn@latest add https://lacodda.github.io/dowel/r/theme.json
|
|
72
72
|
```
|
|
73
73
|
|
|
74
|
+
## Primitives
|
|
75
|
+
|
|
76
|
+
Components are copied into your project rather than imported, so they become
|
|
77
|
+
your code:
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
npx shadcn@latest add https://lacodda.github.io/dowel/r/button.json
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
Each is written in the vocabulary - no raw colours, no `dark:` utilities - so
|
|
84
|
+
the same component is correct in both themes and in every product's accent.
|
|
85
|
+
Every one of them is shown live on [the stand](https://lacodda.github.io/dowel/components/button/), in both themes at once.
|
|
86
|
+
|
|
74
87
|
Full vocabulary, shown rather than tabulated: **[colours](https://lacodda.github.io/dowel/reference/tokens/)** in both themes, **[the scales](https://lacodda.github.io/dowel/reference/scales/)** - radius, type, motion, elevation and stacking order - and **[the accents](https://lacodda.github.io/dowel/reference/accents/)**, where the same screen is drawn in every colour of the line.
|
|
75
88
|
|
|
76
89
|
## Roadmap
|
|
@@ -90,6 +103,7 @@ Development goes in versions; each one is a single coherent theme, and ends in a
|
|
|
90
103
|
## Documentation
|
|
91
104
|
|
|
92
105
|
- [Getting started](https://lacodda.github.io/dowel/getting-started/)
|
|
106
|
+
- [Components](https://lacodda.github.io/dowel/components/button/)
|
|
93
107
|
- [Token reference](https://lacodda.github.io/dowel/reference/tokens/)
|
|
94
108
|
|
|
95
109
|
## License
|
package/dist/cn.d.ts
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { type ClassValue } from 'clsx';
|
|
2
|
+
/**
|
|
3
|
+
* Join class names, letting the caller win.
|
|
4
|
+
*
|
|
5
|
+
* Every primitive takes a `className` and has to decide what happens when it
|
|
6
|
+
* conflicts with its own: `"px-3" + "px-6"` is two paddings, and CSS resolves
|
|
7
|
+
* that by source order rather than by intent. `twMerge` resolves it by
|
|
8
|
+
* utility group instead, so the last one written wins - which is what someone
|
|
9
|
+
* passing a `className` means.
|
|
10
|
+
*
|
|
11
|
+
* It works with this theme's vocabulary as it stands: `tailwind-merge` groups
|
|
12
|
+
* by the utility prefix rather than by a list of known values, so `bg-accent`
|
|
13
|
+
* against `bg-raise`, or `rounded-md` against `rounded-xl`, resolve correctly
|
|
14
|
+
* even though neither value exists in stock Tailwind. Checked, because the
|
|
15
|
+
* theme drops the stock palette and that could plausibly have broken it.
|
|
16
|
+
*/
|
|
17
|
+
export declare function cn(...values: ClassValue[]): string;
|
|
18
|
+
//# sourceMappingURL=cn.d.ts.map
|
package/dist/cn.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../src/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,MAAM,CAAA;AAG5C;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAElD"}
|
package/dist/cn.js
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { clsx } from 'clsx';
|
|
2
|
+
import { twMerge } from 'tailwind-merge';
|
|
3
|
+
/**
|
|
4
|
+
* Join class names, letting the caller win.
|
|
5
|
+
*
|
|
6
|
+
* Every primitive takes a `className` and has to decide what happens when it
|
|
7
|
+
* conflicts with its own: `"px-3" + "px-6"` is two paddings, and CSS resolves
|
|
8
|
+
* that by source order rather than by intent. `twMerge` resolves it by
|
|
9
|
+
* utility group instead, so the last one written wins - which is what someone
|
|
10
|
+
* passing a `className` means.
|
|
11
|
+
*
|
|
12
|
+
* It works with this theme's vocabulary as it stands: `tailwind-merge` groups
|
|
13
|
+
* by the utility prefix rather than by a list of known values, so `bg-accent`
|
|
14
|
+
* against `bg-raise`, or `rounded-md` against `rounded-xl`, resolve correctly
|
|
15
|
+
* even though neither value exists in stock Tailwind. Checked, because the
|
|
16
|
+
* theme drops the stock palette and that could plausibly have broken it.
|
|
17
|
+
*/
|
|
18
|
+
export function cn(...values) {
|
|
19
|
+
return twMerge(clsx(values));
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=cn.js.map
|
package/dist/cn.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cn.js","sourceRoot":"","sources":["../src/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,IAAI,EAAE,MAAM,MAAM,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC;;;;;;;;;;;;;;GAcG;AACH,MAAM,UAAU,EAAE,CAAC,GAAG,MAAoB;IACxC,OAAO,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;AAC9B,CAAC"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export {
|
|
1
|
+
export { cn } from './cn.js';
|
|
2
|
+
export { lineProducts, lineProduct, type LineProduct } from './line.js';
|
|
3
|
+
export { defaultStorageKey, initTheme, nextTheme, resolvedTheme, useTheme, useThemeSwitch, type Theme, } from './theme.js';
|
|
3
4
|
/** Tokens that carry a colour. Ordered as they read on a screen: grounds,
|
|
4
5
|
* then hairlines, then ink, then the accent, then status. */
|
|
5
6
|
export declare const colorTokens: readonly ["bg", "raise", "soft", "softer", "line", "line-2", "text", "dim", "faint", "accent", "accent-2", "accent-soft", "on-accent", "good", "good-soft", "warn", "warn-soft", "bad", "bad-soft", "info", "info-soft"];
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AACvE,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,aAAa,EACb,QAAQ,EACR,cAAc,EACd,KAAK,KAAK,GACX,MAAM,YAAY,CAAA;AAEnB;6DAC6D;AAC7D,eAAO,MAAM,WAAW,0NAsBd,CAAA;AAEV;oEACoE;AACpE,eAAO,MAAM,eAAe,kGAOlB,CAAA;AAEV;yDACyD;AACzD,eAAO,MAAM,eAAe,0DAA2D,CAAA;AAEvF;8DAC8D;AAC9D,eAAO,MAAM,YAAY,0GAQf,CAAA;AAEV;iCACiC;AACjC,eAAO,MAAM,UAAU,gOAeb,CAAA;AAEV;;0CAE0C;AAC1C,eAAO,MAAM,YAAY,0FAMf,CAAA;AAEV;;qEAEqE;AACrE,eAAO,MAAM,WAAW,0GASd,CAAA;AAEV;;;yDAGyD;AACzD,eAAO,MAAM,SAAS,k0BAQZ,CAAA;AAEV,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAA;AAC7D,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAA;AACnD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAA;AACvD,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;AACrD,MAAM,MAAM,KAAK,GACb,UAAU,GACV,cAAc,GACd,cAAc,GACd,WAAW,GACX,SAAS,GACT,WAAW,GACX,UAAU,CAAA;AAEd;;uCAEuC;AACvC,wBAAgB,KAAK,CAAC,IAAI,EAAE,KAAK,GAAG,MAAM,CAEzC"}
|
package/dist/index.js
CHANGED
|
@@ -14,8 +14,9 @@
|
|
|
14
14
|
* Primitives are distributed through the registry, not from here: a component
|
|
15
15
|
* is copied into the product and becomes the product's own code.
|
|
16
16
|
*/
|
|
17
|
-
export {
|
|
18
|
-
export {
|
|
17
|
+
export { cn } from './cn.js';
|
|
18
|
+
export { lineProducts, lineProduct } from './line.js';
|
|
19
|
+
export { defaultStorageKey, initTheme, nextTheme, resolvedTheme, useTheme, useThemeSwitch, } from './theme.js';
|
|
19
20
|
/** Tokens that carry a colour. Ordered as they read on a screen: grounds,
|
|
20
21
|
* then hairlines, then ink, then the accent, then status. */
|
|
21
22
|
export const colorTokens = [
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,YAAY,EAAE,WAAW,EAAoB,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAA;AAC5B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAoB,MAAM,WAAW,CAAA;AACvE,OAAO,EACL,iBAAiB,EACjB,SAAS,EACT,SAAS,EACT,aAAa,EACb,QAAQ,EACR,cAAc,GAEf,MAAM,YAAY,CAAA;AAEnB;6DAC6D;AAC7D,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,IAAI;IACJ,OAAO;IACP,MAAM;IACN,QAAQ;IACR,MAAM;IACN,QAAQ;IACR,MAAM;IACN,KAAK;IACL,OAAO;IACP,QAAQ;IACR,UAAU;IACV,aAAa;IACb,WAAW;IACX,MAAM;IACN,WAAW;IACX,MAAM;IACN,WAAW;IACX,KAAK;IACL,UAAU;IACV,MAAM;IACN,WAAW;CACH,CAAA;AAEV;oEACoE;AACpE,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,aAAa;IACb,cAAc;IACd,cAAc;IACd,qBAAqB;IACrB,QAAQ;IACR,KAAK;CACG,CAAA;AAEV;yDACyD;AACzD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,aAAa,EAAE,cAAc,EAAE,cAAc,CAAU,CAAA;AAEvF;8DAC8D;AAC9D,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,WAAW;IACX,YAAY;IACZ,cAAc;CACN,CAAA;AAEV;iCACiC;AACjC,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,WAAW;IACX,WAAW;IACX,UAAU;IACV,SAAS;IACT,SAAS;IACT,WAAW;IACX,SAAS;IACT,SAAS;IACT,UAAU;IACV,oBAAoB;IACpB,oBAAoB;IACpB,sBAAsB;IACtB,kBAAkB;IAClB,gBAAgB;CACR,CAAA;AAEV;;0CAE0C;AAC1C,MAAM,CAAC,MAAM,YAAY,GAAG;IAC1B,gBAAgB;IAChB,eAAe;IACf,eAAe;IACf,UAAU;IACV,aAAa;CACL,CAAA;AAEV;;qEAEqE;AACrE,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,SAAS;IACT,UAAU;IACV,QAAQ;IACR,YAAY;IACZ,WAAW;IACX,SAAS;IACT,WAAW;IACX,SAAS;CACD,CAAA;AAEV;;;yDAGyD;AACzD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,GAAG,WAAW;IACd,GAAG,eAAe;IAClB,GAAG,eAAe;IAClB,GAAG,YAAY;IACf,GAAG,UAAU;IACb,GAAG,YAAY;IACf,GAAG,WAAW;CACN,CAAA;AAkBV;;uCAEuC;AACvC,MAAM,UAAU,KAAK,CAAC,IAAW;IAC/B,OAAO,KAAK,IAAI,EAAE,CAAA;AACpB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "dowel-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.4.0",
|
|
4
4
|
"description": "The lacodda line design system: theme tokens and React primitives, distributed as a shadcn-compatible registry.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"./accents/*.css": "./dist/accents/*.css"
|
|
39
39
|
},
|
|
40
40
|
"scripts": {
|
|
41
|
-
"build": "tsc && node ../../tools/copy-theme.mjs && node ../../tools/build-tokens-json.mjs && node ../../tools/build-accents.mjs && node ../../tools/build-registry.mjs",
|
|
41
|
+
"build": "tsc && node ../../tools/copy-theme.mjs && node ../../tools/build-tokens-json.mjs && node ../../tools/build-accents.mjs && node ../../tools/build-registry.mjs && node ../../tools/build-stand-theme.mjs",
|
|
42
42
|
"typecheck": "tsc --noEmit",
|
|
43
43
|
"prepack": "node ../../tools/copy-readme.mjs"
|
|
44
44
|
},
|
|
@@ -47,14 +47,20 @@
|
|
|
47
47
|
"react-dom": "^19.0.0"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
|
+
"@radix-ui/react-slot": "^1.3.3",
|
|
50
51
|
"@types/node": "^26.4.0",
|
|
51
52
|
"@types/react": "^19.2.18",
|
|
52
53
|
"@types/react-dom": "^19.2.5",
|
|
54
|
+
"class-variance-authority": "^0.7.1",
|
|
53
55
|
"react": "^19.2.8",
|
|
54
56
|
"react-dom": "^19.2.8"
|
|
55
57
|
},
|
|
56
58
|
"publishConfig": {
|
|
57
59
|
"access": "public",
|
|
58
60
|
"provenance": true
|
|
61
|
+
},
|
|
62
|
+
"dependencies": {
|
|
63
|
+
"clsx": "^2.1.1",
|
|
64
|
+
"tailwind-merge": "^3.6.0"
|
|
59
65
|
}
|
|
60
66
|
}
|