@goliapkg/gds 1.0.7 → 1.0.8

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 (14) hide show
  1. package/README.md +58 -0
  2. package/dist/l3-atoms/segmented-control.d.ts +2 -2
  3. package/dist/l3-atoms/segmented-control.d.ts.map +1 -1
  4. package/dist/l3-atoms/toggle-group.d.ts +2 -2
  5. package/dist/l3-atoms/toggle-group.d.ts.map +1 -1
  6. package/dist/l3-atoms-CsN9IA9J.js.map +1 -1
  7. package/dist/l4-molecules/chip-group.d.ts +2 -2
  8. package/dist/l4-molecules/chip-group.d.ts.map +1 -1
  9. package/dist/l4-molecules/filter-bar.d.ts +2 -2
  10. package/dist/l4-molecules/filter-bar.d.ts.map +1 -1
  11. package/dist/l4-molecules/input-with-button.d.ts +2 -2
  12. package/dist/l4-molecules/input-with-button.d.ts.map +1 -1
  13. package/dist/l4-molecules-DXTNnybm.js.map +1 -1
  14. package/package.json +1 -1
package/README.md CHANGED
@@ -42,6 +42,64 @@ 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
+
59
+ /* required: let Tailwind scan GDS component classes */
60
+ @source "../node_modules/@goliapkg/gds/dist/**/*.js";
61
+ ```
62
+
63
+ ### 3. Theme provider (`app.tsx`)
64
+
65
+ ```tsx
66
+ import { Provider } from 'jotai'
67
+ import { useThemeEffect } from '@goliapkg/gds/systems'
68
+
69
+ function ThemeInit() {
70
+ useThemeEffect()
71
+ return null
72
+ }
73
+
74
+ function App() {
75
+ return (
76
+ <Provider>
77
+ <ThemeInit />
78
+ {/* your app */}
79
+ </Provider>
80
+ )
81
+ }
82
+ ```
83
+
84
+ ### 4. FOUC prevention (`index.html`)
85
+
86
+ Add this script to `<head>` to prevent flash of unstyled content on page load:
87
+
88
+ ```html
89
+ <script>
90
+ try {
91
+ const t = JSON.parse(localStorage.getItem('gds-theme') ?? '{}')
92
+ if (t.mode === 'dark' || (!t.mode && matchMedia('(prefers-color-scheme:dark)').matches))
93
+ document.documentElement.classList.add('dark')
94
+ } catch {}
95
+ </script>
96
+ ```
97
+
98
+ ### Troubleshooting
99
+
100
+ - **GDS classes not working?** — Make sure you have the `@source` line in your CSS. Tailwind v4 won't scan `node_modules` by default.
101
+ - **`bun add` shows "no version matching"?** — Delete `bun.lock` and re-run `bun install`. This is a bun registry cache issue.
102
+
45
103
  ## Subpath Imports
46
104
 
47
105
  Import only what you need for optimal bundle size:
package/dist/l3-atoms/segmented-control.d.ts CHANGED
@@ -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;
package/dist/l3-atoms/segmented-control.d.ts.map CHANGED
@@ -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;IAClE,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"}
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"}
package/dist/l3-atoms/toggle-group.d.ts CHANGED
@@ -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;
package/dist/l3-atoms/toggle-group.d.ts.map CHANGED
@@ -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;IAC7D,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"}
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"}