@goliapkg/gds 1.0.7 → 1.0.9
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 +61 -0
- package/dist/l3-atoms/segmented-control.d.ts +2 -2
- package/dist/l3-atoms/segmented-control.d.ts.map +1 -1
- package/dist/l3-atoms/toggle-group.d.ts +2 -2
- package/dist/l3-atoms/toggle-group.d.ts.map +1 -1
- package/dist/l3-atoms-CsN9IA9J.js.map +1 -1
- package/dist/l4-molecules/chip-group.d.ts +2 -2
- package/dist/l4-molecules/chip-group.d.ts.map +1 -1
- package/dist/l4-molecules/filter-bar.d.ts +2 -2
- package/dist/l4-molecules/filter-bar.d.ts.map +1 -1
- package/dist/l4-molecules/input-with-button.d.ts +2 -2
- package/dist/l4-molecules/input-with-button.d.ts.map +1 -1
- package/dist/l4-molecules-DXTNnybm.js.map +1 -1
- package/dist/theme.css +41 -0
- package/package.json +5 -2
package/README.md
CHANGED
|
@@ -42,6 +42,67 @@ function App() {
|
|
|
42
42
|
}
|
|
43
43
|
```
|
|
44
44
|
|
|
45
|
+
## Integration Guide (Tailwind v4)
|
|
46
|
+
|
|
47
|
+
### 1. Install
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
bun add @goliapkg/gds
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
### 2. CSS setup (`index.css`)
|
|
54
|
+
|
|
55
|
+
```css
|
|
56
|
+
@import 'tailwindcss';
|
|
57
|
+
@import '@goliapkg/gds/tokens.css';
|
|
58
|
+
@import '@goliapkg/gds/theme.css';
|
|
59
|
+
|
|
60
|
+
/* required: let Tailwind scan GDS component classes */
|
|
61
|
+
@source "../node_modules/@goliapkg/gds/dist/**/*.js";
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
`tokens.css` provides GDS utilities (`gds-shadow-sm`, `gds-radius-card`, etc.). `theme.css` maps GDS tokens to Tailwind's built-in utilities (`shadow-sm`, `rounded-lg`, `bg-bg`, `text-fg`, etc.) so you can use standard Tailwind classes with GDS theme values.
|
|
65
|
+
|
|
66
|
+
### 3. Theme provider (`app.tsx`)
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
import { Provider } from 'jotai'
|
|
70
|
+
import { useThemeEffect } from '@goliapkg/gds/systems'
|
|
71
|
+
|
|
72
|
+
function ThemeInit() {
|
|
73
|
+
useThemeEffect()
|
|
74
|
+
return null
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
function App() {
|
|
78
|
+
return (
|
|
79
|
+
<Provider>
|
|
80
|
+
<ThemeInit />
|
|
81
|
+
{/* your app */}
|
|
82
|
+
</Provider>
|
|
83
|
+
)
|
|
84
|
+
}
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### 4. FOUC prevention (`index.html`)
|
|
88
|
+
|
|
89
|
+
Add this script to `<head>` to prevent flash of unstyled content on page load:
|
|
90
|
+
|
|
91
|
+
```html
|
|
92
|
+
<script>
|
|
93
|
+
try {
|
|
94
|
+
const t = JSON.parse(localStorage.getItem('gds-theme') ?? '{}')
|
|
95
|
+
if (t.mode === 'dark' || (!t.mode && matchMedia('(prefers-color-scheme:dark)').matches))
|
|
96
|
+
document.documentElement.classList.add('dark')
|
|
97
|
+
} catch {}
|
|
98
|
+
</script>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
### Troubleshooting
|
|
102
|
+
|
|
103
|
+
- **GDS classes not working?** — Make sure you have the `@source` line in your CSS. Tailwind v4 won't scan `node_modules` by default.
|
|
104
|
+
- **`bun add` shows "no version matching"?** — Delete `bun.lock` and re-run `bun install`. This is a bun registry cache issue.
|
|
105
|
+
|
|
45
106
|
## Subpath Imports
|
|
46
107
|
|
|
47
108
|
Import only what you need for optimal bundle size:
|
|
@@ -3,7 +3,7 @@ type SegmentedControlOption = {
|
|
|
3
3
|
label: string;
|
|
4
4
|
};
|
|
5
5
|
type SegmentedControlSize = 'default' | 'sm';
|
|
6
|
-
type SegmentedControlProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
6
|
+
type SegmentedControlProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
|
|
7
7
|
options: SegmentedControlOption[];
|
|
8
8
|
value: string;
|
|
9
9
|
onChange: (value: string) => void;
|
|
@@ -11,7 +11,7 @@ type SegmentedControlProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
11
11
|
disabled?: boolean;
|
|
12
12
|
glass?: boolean;
|
|
13
13
|
};
|
|
14
|
-
declare const SegmentedControl: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
|
|
14
|
+
declare const SegmentedControl: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange"> & {
|
|
15
15
|
options: SegmentedControlOption[];
|
|
16
16
|
value: string;
|
|
17
17
|
onChange: (value: string) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../src/l3-atoms/segmented-control.tsx"],"names":[],"mappings":"AAOA,KAAK,sBAAsB,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,KAAK,oBAAoB,GAAG,SAAS,GAAG,IAAI,CAAA;AAE5C,KAAK,qBAAqB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;
|
|
1
|
+
{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../src/l3-atoms/segmented-control.tsx"],"names":[],"mappings":"AAOA,KAAK,sBAAsB,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,KAAK,oBAAoB,GAAG,SAAS,GAAG,IAAI,CAAA;AAE5C,KAAK,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACpF,OAAO,EAAE,sBAAsB,EAAE,CAAA;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,IAAI,CAAC,EAAE,oBAAoB,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAOD,QAAA,MAAM,gBAAgB;aAbX,sBAAsB,EAAE;WAC1B,MAAM;cACH,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI;WAC1B,oBAAoB;eAChB,OAAO;YACV,OAAO;kDAsDhB,CAAA;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAA;AAC3B,YAAY,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,CAAA"}
|
|
@@ -4,7 +4,7 @@ type ToggleGroupItem = {
|
|
|
4
4
|
label: ReactNode;
|
|
5
5
|
};
|
|
6
6
|
type ToggleGroupSize = 'default' | 'sm';
|
|
7
|
-
type ToggleGroupProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
7
|
+
type ToggleGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
|
|
8
8
|
items: ToggleGroupItem[];
|
|
9
9
|
value: string[];
|
|
10
10
|
onChange: (value: string[]) => void;
|
|
@@ -12,7 +12,7 @@ type ToggleGroupProps = React.HTMLAttributes<HTMLDivElement> & {
|
|
|
12
12
|
size?: ToggleGroupSize;
|
|
13
13
|
disabled?: boolean;
|
|
14
14
|
};
|
|
15
|
-
declare const ToggleGroup: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & {
|
|
15
|
+
declare const ToggleGroup: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange"> & {
|
|
16
16
|
items: ToggleGroupItem[];
|
|
17
17
|
value: string[];
|
|
18
18
|
onChange: (value: string[]) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/l3-atoms/toggle-group.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,SAAS,CAAA;CACjB,CAAA;AAED,KAAK,eAAe,GAAG,SAAS,GAAG,IAAI,CAAA;AAEvC,KAAK,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;
|
|
1
|
+
{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../src/l3-atoms/toggle-group.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,SAAS,CAAA;CACjB,CAAA;AAED,KAAK,eAAe,GAAG,SAAS,GAAG,IAAI,CAAA;AAEvC,KAAK,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/E,KAAK,EAAE,eAAe,EAAE,CAAA;IACxB,KAAK,EAAE,MAAM,EAAE,CAAA;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACnC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAOD,QAAA,MAAM,WAAW;WAbR,eAAe,EAAE;WACjB,MAAM,EAAE;cACL,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI;gBACvB,OAAO;WACZ,eAAe;eACX,OAAO;kDAmEnB,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,eAAe,EAAE,CAAA"}
|