@spelyco/react-lib 0.0.1 → 1.0.0-a4ad2a8e-beta

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 (8) hide show
  1. package/README.md +103 -0
  2. package/dist/index.d.mts +145 -1
  3. package/dist/index.d.ts +145 -1
  4. package/dist/index.js +13 -0
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +13 -1
  7. package/dist/index.mjs.map +1 -1
  8. package/package.json +14 -5
package/README.md ADDED
@@ -0,0 +1,103 @@
1
+ # @spelyco/react-lib
2
+
3
+ Shared React hooks and utilities for Spelyco UI packages. Framework-agnostic — works with both `@spelyco/react` and `@spelyco/react-native`.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ bun add @spelyco/react-lib
9
+ ```
10
+
11
+ ## Hooks
12
+
13
+ ### useBoolean
14
+
15
+ Manages a boolean state with stable action callbacks.
16
+
17
+ ```tsx
18
+ import { useBoolean } from "@spelyco/react-lib";
19
+
20
+ function Modal() {
21
+ const { value: isOpen, setTrue: open, setFalse: close, toggle } = useBoolean(false);
22
+
23
+ return (
24
+ <>
25
+ <button onClick={open}>Open</button>
26
+ {isOpen && <dialog onClose={close}>...</dialog>}
27
+ </>
28
+ );
29
+ }
30
+ ```
31
+
32
+ **API**
33
+
34
+ ```ts
35
+ function useBoolean(initialValue?: boolean): {
36
+ value: boolean;
37
+ setTrue: () => void;
38
+ setFalse: () => void;
39
+ toggle: () => void;
40
+ setValue: (value: boolean) => void;
41
+ }
42
+ ```
43
+
44
+ ---
45
+
46
+ ### useDebounce
47
+
48
+ Delays updating a value until after a specified wait period. Useful for search inputs and API calls.
49
+
50
+ ```tsx
51
+ import { useDebounce } from "@spelyco/react-lib";
52
+
53
+ function Search() {
54
+ const [query, setQuery] = useState("");
55
+ const debouncedQuery = useDebounce(query, 400);
56
+
57
+ useEffect(() => {
58
+ if (debouncedQuery) fetchResults(debouncedQuery);
59
+ }, [debouncedQuery]);
60
+
61
+ return <input onChange={(e) => setQuery(e.target.value)} />;
62
+ }
63
+ ```
64
+
65
+ **API**
66
+
67
+ ```ts
68
+ function useDebounce<T>(value: T, delay?: number): T
69
+ // delay defaults to 300ms
70
+ ```
71
+
72
+ ## Utils
73
+
74
+ ### cn
75
+
76
+ Merges class names, filtering out falsy values. Lightweight alternative to `clsx`.
77
+
78
+ ```tsx
79
+ import { cn } from "@spelyco/react-lib";
80
+
81
+ cn("btn", isActive && "btn--active", undefined, "btn--lg");
82
+ // → "btn btn--active btn--lg"
83
+
84
+ cn(["base", ["nested", "classes"]]);
85
+ // → "base nested classes"
86
+ ```
87
+
88
+ **API**
89
+
90
+ ```ts
91
+ function cn(...inputs: ClassValue[]): string
92
+ // ClassValue = string | undefined | null | false | ClassValue[]
93
+ ```
94
+
95
+ ## Peer Dependencies
96
+
97
+ | Package | Version |
98
+ |---|---|
99
+ | `react` | `>=18` |
100
+
101
+ ## License
102
+
103
+ MIT
package/dist/index.d.mts CHANGED
@@ -1,3 +1,5 @@
1
+ import * as _mantine_core from '@mantine/core';
2
+
1
3
  interface UseBooleanReturn {
2
4
  value: boolean;
3
5
  setTrue: () => void;
@@ -12,4 +14,146 @@ declare function useDebounce<T>(value: T, delay?: number): T;
12
14
  type ClassValue = string | undefined | null | false | ClassValue[];
13
15
  declare function cn(...inputs: ClassValue[]): string;
14
16
 
15
- export { cn, useBoolean, useDebounce };
17
+ declare const theme: (primaryColor?: string) => {
18
+ focusRing?: "auto" | "always" | "never" | undefined;
19
+ scale?: number | undefined;
20
+ fontSmoothing?: boolean | undefined;
21
+ white?: string | undefined;
22
+ black?: string | undefined;
23
+ colors?: {
24
+ [x: string & {}]: _mantine_core.MantineColorsTuple | undefined;
25
+ blue?: _mantine_core.MantineColorsTuple | undefined;
26
+ dark?: _mantine_core.MantineColorsTuple | undefined;
27
+ gray?: _mantine_core.MantineColorsTuple | undefined;
28
+ red?: _mantine_core.MantineColorsTuple | undefined;
29
+ pink?: _mantine_core.MantineColorsTuple | undefined;
30
+ grape?: _mantine_core.MantineColorsTuple | undefined;
31
+ violet?: _mantine_core.MantineColorsTuple | undefined;
32
+ indigo?: _mantine_core.MantineColorsTuple | undefined;
33
+ cyan?: _mantine_core.MantineColorsTuple | undefined;
34
+ green?: _mantine_core.MantineColorsTuple | undefined;
35
+ lime?: _mantine_core.MantineColorsTuple | undefined;
36
+ yellow?: _mantine_core.MantineColorsTuple | undefined;
37
+ orange?: _mantine_core.MantineColorsTuple | undefined;
38
+ teal?: _mantine_core.MantineColorsTuple | undefined;
39
+ } | undefined;
40
+ primaryShade?: _mantine_core.MantineColorShade | {
41
+ light?: _mantine_core.MantineColorShade | undefined;
42
+ dark?: _mantine_core.MantineColorShade | undefined;
43
+ } | undefined;
44
+ primaryColor?: string | undefined;
45
+ variantColorResolver?: _mantine_core.VariantColorsResolver | undefined;
46
+ autoContrast?: boolean | undefined;
47
+ luminanceThreshold?: number | undefined;
48
+ fontFamily?: string | undefined;
49
+ fontFamilyMonospace?: string | undefined;
50
+ headings?: {
51
+ fontFamily?: string | undefined;
52
+ fontWeight?: string | undefined;
53
+ textWrap?: "wrap" | "nowrap" | "balance" | "pretty" | "stable" | undefined;
54
+ sizes?: {
55
+ h1?: {
56
+ fontSize?: string | undefined;
57
+ fontWeight?: string | undefined;
58
+ lineHeight?: string | undefined;
59
+ } | undefined;
60
+ h2?: {
61
+ fontSize?: string | undefined;
62
+ fontWeight?: string | undefined;
63
+ lineHeight?: string | undefined;
64
+ } | undefined;
65
+ h3?: {
66
+ fontSize?: string | undefined;
67
+ fontWeight?: string | undefined;
68
+ lineHeight?: string | undefined;
69
+ } | undefined;
70
+ h4?: {
71
+ fontSize?: string | undefined;
72
+ fontWeight?: string | undefined;
73
+ lineHeight?: string | undefined;
74
+ } | undefined;
75
+ h5?: {
76
+ fontSize?: string | undefined;
77
+ fontWeight?: string | undefined;
78
+ lineHeight?: string | undefined;
79
+ } | undefined;
80
+ h6?: {
81
+ fontSize?: string | undefined;
82
+ fontWeight?: string | undefined;
83
+ lineHeight?: string | undefined;
84
+ } | undefined;
85
+ } | undefined;
86
+ } | undefined;
87
+ radius?: {
88
+ [x: string & {}]: string | undefined;
89
+ md?: string | undefined;
90
+ xs?: string | undefined;
91
+ sm?: string | undefined;
92
+ lg?: string | undefined;
93
+ xl?: string | undefined;
94
+ } | undefined;
95
+ defaultRadius?: _mantine_core.MantineRadius | undefined;
96
+ spacing?: {
97
+ [x: number]: string | undefined;
98
+ [x: string & {}]: string | undefined;
99
+ md?: string | undefined;
100
+ xs?: string | undefined;
101
+ sm?: string | undefined;
102
+ lg?: string | undefined;
103
+ xl?: string | undefined;
104
+ } | undefined;
105
+ fontSizes?: {
106
+ [x: string & {}]: string | undefined;
107
+ md?: string | undefined;
108
+ xs?: string | undefined;
109
+ sm?: string | undefined;
110
+ lg?: string | undefined;
111
+ xl?: string | undefined;
112
+ } | undefined;
113
+ lineHeights?: {
114
+ [x: string & {}]: string | undefined;
115
+ md?: string | undefined;
116
+ xs?: string | undefined;
117
+ sm?: string | undefined;
118
+ lg?: string | undefined;
119
+ xl?: string | undefined;
120
+ } | undefined;
121
+ breakpoints?: {
122
+ [x: string & {}]: string | undefined;
123
+ md?: string | undefined;
124
+ xs?: string | undefined;
125
+ sm?: string | undefined;
126
+ lg?: string | undefined;
127
+ xl?: string | undefined;
128
+ } | undefined;
129
+ shadows?: {
130
+ [x: string & {}]: string | undefined;
131
+ md?: string | undefined;
132
+ xs?: string | undefined;
133
+ sm?: string | undefined;
134
+ lg?: string | undefined;
135
+ xl?: string | undefined;
136
+ } | undefined;
137
+ respectReducedMotion?: boolean | undefined;
138
+ cursorType?: "default" | "pointer" | undefined;
139
+ defaultGradient?: {
140
+ from?: string | undefined;
141
+ to?: string | undefined;
142
+ deg?: number | undefined;
143
+ } | undefined;
144
+ activeClassName?: string | undefined;
145
+ focusClassName?: string | undefined;
146
+ components?: {
147
+ [x: string]: {
148
+ classNames?: any;
149
+ styles?: any;
150
+ vars?: any;
151
+ defaultProps?: any;
152
+ } | undefined;
153
+ } | undefined;
154
+ other?: {
155
+ [x: string]: any;
156
+ } | undefined;
157
+ };
158
+
159
+ export { cn, theme, useBoolean, useDebounce };
package/dist/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
+ import * as _mantine_core from '@mantine/core';
2
+
1
3
  interface UseBooleanReturn {
2
4
  value: boolean;
3
5
  setTrue: () => void;
@@ -12,4 +14,146 @@ declare function useDebounce<T>(value: T, delay?: number): T;
12
14
  type ClassValue = string | undefined | null | false | ClassValue[];
13
15
  declare function cn(...inputs: ClassValue[]): string;
14
16
 
15
- export { cn, useBoolean, useDebounce };
17
+ declare const theme: (primaryColor?: string) => {
18
+ focusRing?: "auto" | "always" | "never" | undefined;
19
+ scale?: number | undefined;
20
+ fontSmoothing?: boolean | undefined;
21
+ white?: string | undefined;
22
+ black?: string | undefined;
23
+ colors?: {
24
+ [x: string & {}]: _mantine_core.MantineColorsTuple | undefined;
25
+ blue?: _mantine_core.MantineColorsTuple | undefined;
26
+ dark?: _mantine_core.MantineColorsTuple | undefined;
27
+ gray?: _mantine_core.MantineColorsTuple | undefined;
28
+ red?: _mantine_core.MantineColorsTuple | undefined;
29
+ pink?: _mantine_core.MantineColorsTuple | undefined;
30
+ grape?: _mantine_core.MantineColorsTuple | undefined;
31
+ violet?: _mantine_core.MantineColorsTuple | undefined;
32
+ indigo?: _mantine_core.MantineColorsTuple | undefined;
33
+ cyan?: _mantine_core.MantineColorsTuple | undefined;
34
+ green?: _mantine_core.MantineColorsTuple | undefined;
35
+ lime?: _mantine_core.MantineColorsTuple | undefined;
36
+ yellow?: _mantine_core.MantineColorsTuple | undefined;
37
+ orange?: _mantine_core.MantineColorsTuple | undefined;
38
+ teal?: _mantine_core.MantineColorsTuple | undefined;
39
+ } | undefined;
40
+ primaryShade?: _mantine_core.MantineColorShade | {
41
+ light?: _mantine_core.MantineColorShade | undefined;
42
+ dark?: _mantine_core.MantineColorShade | undefined;
43
+ } | undefined;
44
+ primaryColor?: string | undefined;
45
+ variantColorResolver?: _mantine_core.VariantColorsResolver | undefined;
46
+ autoContrast?: boolean | undefined;
47
+ luminanceThreshold?: number | undefined;
48
+ fontFamily?: string | undefined;
49
+ fontFamilyMonospace?: string | undefined;
50
+ headings?: {
51
+ fontFamily?: string | undefined;
52
+ fontWeight?: string | undefined;
53
+ textWrap?: "wrap" | "nowrap" | "balance" | "pretty" | "stable" | undefined;
54
+ sizes?: {
55
+ h1?: {
56
+ fontSize?: string | undefined;
57
+ fontWeight?: string | undefined;
58
+ lineHeight?: string | undefined;
59
+ } | undefined;
60
+ h2?: {
61
+ fontSize?: string | undefined;
62
+ fontWeight?: string | undefined;
63
+ lineHeight?: string | undefined;
64
+ } | undefined;
65
+ h3?: {
66
+ fontSize?: string | undefined;
67
+ fontWeight?: string | undefined;
68
+ lineHeight?: string | undefined;
69
+ } | undefined;
70
+ h4?: {
71
+ fontSize?: string | undefined;
72
+ fontWeight?: string | undefined;
73
+ lineHeight?: string | undefined;
74
+ } | undefined;
75
+ h5?: {
76
+ fontSize?: string | undefined;
77
+ fontWeight?: string | undefined;
78
+ lineHeight?: string | undefined;
79
+ } | undefined;
80
+ h6?: {
81
+ fontSize?: string | undefined;
82
+ fontWeight?: string | undefined;
83
+ lineHeight?: string | undefined;
84
+ } | undefined;
85
+ } | undefined;
86
+ } | undefined;
87
+ radius?: {
88
+ [x: string & {}]: string | undefined;
89
+ md?: string | undefined;
90
+ xs?: string | undefined;
91
+ sm?: string | undefined;
92
+ lg?: string | undefined;
93
+ xl?: string | undefined;
94
+ } | undefined;
95
+ defaultRadius?: _mantine_core.MantineRadius | undefined;
96
+ spacing?: {
97
+ [x: number]: string | undefined;
98
+ [x: string & {}]: string | undefined;
99
+ md?: string | undefined;
100
+ xs?: string | undefined;
101
+ sm?: string | undefined;
102
+ lg?: string | undefined;
103
+ xl?: string | undefined;
104
+ } | undefined;
105
+ fontSizes?: {
106
+ [x: string & {}]: string | undefined;
107
+ md?: string | undefined;
108
+ xs?: string | undefined;
109
+ sm?: string | undefined;
110
+ lg?: string | undefined;
111
+ xl?: string | undefined;
112
+ } | undefined;
113
+ lineHeights?: {
114
+ [x: string & {}]: string | undefined;
115
+ md?: string | undefined;
116
+ xs?: string | undefined;
117
+ sm?: string | undefined;
118
+ lg?: string | undefined;
119
+ xl?: string | undefined;
120
+ } | undefined;
121
+ breakpoints?: {
122
+ [x: string & {}]: string | undefined;
123
+ md?: string | undefined;
124
+ xs?: string | undefined;
125
+ sm?: string | undefined;
126
+ lg?: string | undefined;
127
+ xl?: string | undefined;
128
+ } | undefined;
129
+ shadows?: {
130
+ [x: string & {}]: string | undefined;
131
+ md?: string | undefined;
132
+ xs?: string | undefined;
133
+ sm?: string | undefined;
134
+ lg?: string | undefined;
135
+ xl?: string | undefined;
136
+ } | undefined;
137
+ respectReducedMotion?: boolean | undefined;
138
+ cursorType?: "default" | "pointer" | undefined;
139
+ defaultGradient?: {
140
+ from?: string | undefined;
141
+ to?: string | undefined;
142
+ deg?: number | undefined;
143
+ } | undefined;
144
+ activeClassName?: string | undefined;
145
+ focusClassName?: string | undefined;
146
+ components?: {
147
+ [x: string]: {
148
+ classNames?: any;
149
+ styles?: any;
150
+ vars?: any;
151
+ defaultProps?: any;
152
+ } | undefined;
153
+ } | undefined;
154
+ other?: {
155
+ [x: string]: any;
156
+ } | undefined;
157
+ };
158
+
159
+ export { cn, theme, useBoolean, useDebounce };
package/dist/index.js CHANGED
@@ -1,6 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  var react = require('react');
4
+ var core = require('@mantine/core');
4
5
 
5
6
  // src/hooks/useBoolean.ts
6
7
  function useBoolean(initialValue = false) {
@@ -23,8 +24,20 @@ function useDebounce(value, delay = 300) {
23
24
  function cn(...inputs) {
24
25
  return inputs.flat(Infinity).filter(Boolean).join(" ");
25
26
  }
27
+ var theme = (primaryColor) => core.createTheme({
28
+ primaryColor: primaryColor ?? "blue",
29
+ defaultRadius: "md",
30
+ components: {
31
+ Button: core.Button.extend({
32
+ defaultProps: {
33
+ variant: "default"
34
+ }
35
+ })
36
+ }
37
+ });
26
38
 
27
39
  exports.cn = cn;
40
+ exports.theme = theme;
28
41
  exports.useBoolean = useBoolean;
29
42
  exports.useDebounce = useDebounce;
30
43
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/hooks/useBoolean.ts","../src/hooks/useDebounce.ts","../src/utils/cn.ts"],"names":["useState","useCallback","useEffect"],"mappings":";;;;;AAUO,SAAS,UAAA,CAAW,eAAe,KAAA,EAAyB;AACjE,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAS,YAAY,CAAA;AAE/C,EAAA,MAAM,UAAUC,iBAAA,CAAY,MAAM,SAAS,IAAI,CAAA,EAAG,EAAE,CAAA;AACpD,EAAA,MAAM,WAAWA,iBAAA,CAAY,MAAM,SAAS,KAAK,CAAA,EAAG,EAAE,CAAA;AACtD,EAAA,MAAM,MAAA,GAASA,iBAAA,CAAY,MAAM,QAAA,CAAS,CAAC,MAAM,CAAC,CAAC,CAAA,EAAG,EAAE,CAAA;AAExD,EAAA,OAAO,EAAE,KAAA,EAAO,OAAA,EAAS,QAAA,EAAU,QAAQ,QAAA,EAAS;AACtD;AChBO,SAAS,WAAA,CAAe,KAAA,EAAU,KAAA,GAAQ,GAAA,EAAQ;AACvD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAID,eAAY,KAAK,CAAA;AAE7D,EAAAE,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,QAAQ,UAAA,CAAW,MAAM,iBAAA,CAAkB,KAAK,GAAG,KAAK,CAAA;AAC9D,IAAA,OAAO,MAAM,aAAa,KAAK,CAAA;AAAA,EACjC,CAAA,EAAG,CAAC,KAAA,EAAO,KAAK,CAAC,CAAA;AAEjB,EAAA,OAAO,cAAA;AACT;;;ACTO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,MAAA,CACJ,KAAK,QAAa,CAAA,CAClB,OAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AACb","file":"index.js","sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport interface UseBooleanReturn {\n value: boolean;\n setTrue: () => void;\n setFalse: () => void;\n toggle: () => void;\n setValue: (value: boolean) => void;\n}\n\nexport function useBoolean(initialValue = false): UseBooleanReturn {\n const [value, setValue] = useState(initialValue);\n\n const setTrue = useCallback(() => setValue(true), []);\n const setFalse = useCallback(() => setValue(false), []);\n const toggle = useCallback(() => setValue((v) => !v), []);\n\n return { value, setTrue, setFalse, toggle, setValue };\n}\n","import { useEffect, useState } from \"react\";\n\nexport function useDebounce<T>(value: T, delay = 300): T {\n const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n useEffect(() => {\n const timer = setTimeout(() => setDebouncedValue(value), delay);\n return () => clearTimeout(timer);\n }, [value, delay]);\n\n return debouncedValue;\n}\n","type ClassValue = string | undefined | null | false | ClassValue[];\n\nexport function cn(...inputs: ClassValue[]): string {\n return inputs\n .flat(Infinity as 1)\n .filter(Boolean)\n .join(\" \");\n}\n"]}
1
+ {"version":3,"sources":["../src/hooks/useBoolean.ts","../src/hooks/useDebounce.ts","../src/utils/cn.ts","../src/utils/theme.ts"],"names":["useState","useCallback","useEffect","createTheme","Button"],"mappings":";;;;;;AAUO,SAAS,UAAA,CAAW,eAAe,KAAA,EAAyB;AACjE,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAS,YAAY,CAAA;AAE/C,EAAA,MAAM,UAAUC,iBAAA,CAAY,MAAM,SAAS,IAAI,CAAA,EAAG,EAAE,CAAA;AACpD,EAAA,MAAM,WAAWA,iBAAA,CAAY,MAAM,SAAS,KAAK,CAAA,EAAG,EAAE,CAAA;AACtD,EAAA,MAAM,MAAA,GAASA,iBAAA,CAAY,MAAM,QAAA,CAAS,CAAC,MAAM,CAAC,CAAC,CAAA,EAAG,EAAE,CAAA;AAExD,EAAA,OAAO,EAAE,KAAA,EAAO,OAAA,EAAS,QAAA,EAAU,QAAQ,QAAA,EAAS;AACtD;AChBO,SAAS,WAAA,CAAe,KAAA,EAAU,KAAA,GAAQ,GAAA,EAAQ;AACvD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAID,eAAY,KAAK,CAAA;AAE7D,EAAAE,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,QAAQ,UAAA,CAAW,MAAM,iBAAA,CAAkB,KAAK,GAAG,KAAK,CAAA;AAC9D,IAAA,OAAO,MAAM,aAAa,KAAK,CAAA;AAAA,EACjC,CAAA,EAAG,CAAC,KAAA,EAAO,KAAK,CAAC,CAAA;AAEjB,EAAA,OAAO,cAAA;AACT;;;ACTO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,MAAA,CACJ,KAAK,QAAa,CAAA,CAClB,OAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AACb;ACLO,IAAM,KAAA,GAAQ,CAAC,YAAA,KACpBC,gBAAA,CAAY;AAAA,EACV,cAAc,YAAA,IAAgB,MAAA;AAAA,EAC9B,aAAA,EAAe,IAAA;AAAA,EACf,UAAA,EAAY;AAAA,IACV,MAAA,EAAQC,YAAO,MAAA,CAAO;AAAA,MACpB,YAAA,EAAc;AAAA,QACZ,OAAA,EAAS;AAAA;AACX,KACD;AAAA;AAEL,CAAC","file":"index.js","sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport interface UseBooleanReturn {\n value: boolean;\n setTrue: () => void;\n setFalse: () => void;\n toggle: () => void;\n setValue: (value: boolean) => void;\n}\n\nexport function useBoolean(initialValue = false): UseBooleanReturn {\n const [value, setValue] = useState(initialValue);\n\n const setTrue = useCallback(() => setValue(true), []);\n const setFalse = useCallback(() => setValue(false), []);\n const toggle = useCallback(() => setValue((v) => !v), []);\n\n return { value, setTrue, setFalse, toggle, setValue };\n}\n","import { useEffect, useState } from \"react\";\n\nexport function useDebounce<T>(value: T, delay = 300): T {\n const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n useEffect(() => {\n const timer = setTimeout(() => setDebouncedValue(value), delay);\n return () => clearTimeout(timer);\n }, [value, delay]);\n\n return debouncedValue;\n}\n","type ClassValue = string | undefined | null | false | ClassValue[];\n\nexport function cn(...inputs: ClassValue[]): string {\n return inputs\n .flat(Infinity as 1)\n .filter(Boolean)\n .join(\" \");\n}\n","import { Button, createTheme } from \"@mantine/core\";\n\nexport const theme = (primaryColor?: string) =>\n createTheme({\n primaryColor: primaryColor ?? \"blue\",\n defaultRadius: \"md\",\n components: {\n Button: Button.extend({\n defaultProps: {\n variant: \"default\",\n },\n }),\n },\n });\n"]}
package/dist/index.mjs CHANGED
@@ -1,4 +1,5 @@
1
1
  import { useState, useCallback, useEffect } from 'react';
2
+ import { createTheme, Button } from '@mantine/core';
2
3
 
3
4
  // src/hooks/useBoolean.ts
4
5
  function useBoolean(initialValue = false) {
@@ -21,7 +22,18 @@ function useDebounce(value, delay = 300) {
21
22
  function cn(...inputs) {
22
23
  return inputs.flat(Infinity).filter(Boolean).join(" ");
23
24
  }
25
+ var theme = (primaryColor) => createTheme({
26
+ primaryColor: primaryColor ?? "blue",
27
+ defaultRadius: "md",
28
+ components: {
29
+ Button: Button.extend({
30
+ defaultProps: {
31
+ variant: "default"
32
+ }
33
+ })
34
+ }
35
+ });
24
36
 
25
- export { cn, useBoolean, useDebounce };
37
+ export { cn, theme, useBoolean, useDebounce };
26
38
  //# sourceMappingURL=index.mjs.map
27
39
  //# sourceMappingURL=index.mjs.map
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/hooks/useBoolean.ts","../src/hooks/useDebounce.ts","../src/utils/cn.ts"],"names":["useState"],"mappings":";;;AAUO,SAAS,UAAA,CAAW,eAAe,KAAA,EAAyB;AACjE,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,YAAY,CAAA;AAE/C,EAAA,MAAM,UAAU,WAAA,CAAY,MAAM,SAAS,IAAI,CAAA,EAAG,EAAE,CAAA;AACpD,EAAA,MAAM,WAAW,WAAA,CAAY,MAAM,SAAS,KAAK,CAAA,EAAG,EAAE,CAAA;AACtD,EAAA,MAAM,MAAA,GAAS,WAAA,CAAY,MAAM,QAAA,CAAS,CAAC,MAAM,CAAC,CAAC,CAAA,EAAG,EAAE,CAAA;AAExD,EAAA,OAAO,EAAE,KAAA,EAAO,OAAA,EAAS,QAAA,EAAU,QAAQ,QAAA,EAAS;AACtD;AChBO,SAAS,WAAA,CAAe,KAAA,EAAU,KAAA,GAAQ,GAAA,EAAQ;AACvD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIA,SAAY,KAAK,CAAA;AAE7D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,QAAQ,UAAA,CAAW,MAAM,iBAAA,CAAkB,KAAK,GAAG,KAAK,CAAA;AAC9D,IAAA,OAAO,MAAM,aAAa,KAAK,CAAA;AAAA,EACjC,CAAA,EAAG,CAAC,KAAA,EAAO,KAAK,CAAC,CAAA;AAEjB,EAAA,OAAO,cAAA;AACT;;;ACTO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,MAAA,CACJ,KAAK,QAAa,CAAA,CAClB,OAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AACb","file":"index.mjs","sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport interface UseBooleanReturn {\n value: boolean;\n setTrue: () => void;\n setFalse: () => void;\n toggle: () => void;\n setValue: (value: boolean) => void;\n}\n\nexport function useBoolean(initialValue = false): UseBooleanReturn {\n const [value, setValue] = useState(initialValue);\n\n const setTrue = useCallback(() => setValue(true), []);\n const setFalse = useCallback(() => setValue(false), []);\n const toggle = useCallback(() => setValue((v) => !v), []);\n\n return { value, setTrue, setFalse, toggle, setValue };\n}\n","import { useEffect, useState } from \"react\";\n\nexport function useDebounce<T>(value: T, delay = 300): T {\n const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n useEffect(() => {\n const timer = setTimeout(() => setDebouncedValue(value), delay);\n return () => clearTimeout(timer);\n }, [value, delay]);\n\n return debouncedValue;\n}\n","type ClassValue = string | undefined | null | false | ClassValue[];\n\nexport function cn(...inputs: ClassValue[]): string {\n return inputs\n .flat(Infinity as 1)\n .filter(Boolean)\n .join(\" \");\n}\n"]}
1
+ {"version":3,"sources":["../src/hooks/useBoolean.ts","../src/hooks/useDebounce.ts","../src/utils/cn.ts","../src/utils/theme.ts"],"names":["useState"],"mappings":";;;;AAUO,SAAS,UAAA,CAAW,eAAe,KAAA,EAAyB;AACjE,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,YAAY,CAAA;AAE/C,EAAA,MAAM,UAAU,WAAA,CAAY,MAAM,SAAS,IAAI,CAAA,EAAG,EAAE,CAAA;AACpD,EAAA,MAAM,WAAW,WAAA,CAAY,MAAM,SAAS,KAAK,CAAA,EAAG,EAAE,CAAA;AACtD,EAAA,MAAM,MAAA,GAAS,WAAA,CAAY,MAAM,QAAA,CAAS,CAAC,MAAM,CAAC,CAAC,CAAA,EAAG,EAAE,CAAA;AAExD,EAAA,OAAO,EAAE,KAAA,EAAO,OAAA,EAAS,QAAA,EAAU,QAAQ,QAAA,EAAS;AACtD;AChBO,SAAS,WAAA,CAAe,KAAA,EAAU,KAAA,GAAQ,GAAA,EAAQ;AACvD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIA,SAAY,KAAK,CAAA;AAE7D,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,QAAQ,UAAA,CAAW,MAAM,iBAAA,CAAkB,KAAK,GAAG,KAAK,CAAA;AAC9D,IAAA,OAAO,MAAM,aAAa,KAAK,CAAA;AAAA,EACjC,CAAA,EAAG,CAAC,KAAA,EAAO,KAAK,CAAC,CAAA;AAEjB,EAAA,OAAO,cAAA;AACT;;;ACTO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,OAAO,MAAA,CACJ,KAAK,QAAa,CAAA,CAClB,OAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AACb;ACLO,IAAM,KAAA,GAAQ,CAAC,YAAA,KACpB,WAAA,CAAY;AAAA,EACV,cAAc,YAAA,IAAgB,MAAA;AAAA,EAC9B,aAAA,EAAe,IAAA;AAAA,EACf,UAAA,EAAY;AAAA,IACV,MAAA,EAAQ,OAAO,MAAA,CAAO;AAAA,MACpB,YAAA,EAAc;AAAA,QACZ,OAAA,EAAS;AAAA;AACX,KACD;AAAA;AAEL,CAAC","file":"index.mjs","sourcesContent":["import { useCallback, useState } from \"react\";\n\nexport interface UseBooleanReturn {\n value: boolean;\n setTrue: () => void;\n setFalse: () => void;\n toggle: () => void;\n setValue: (value: boolean) => void;\n}\n\nexport function useBoolean(initialValue = false): UseBooleanReturn {\n const [value, setValue] = useState(initialValue);\n\n const setTrue = useCallback(() => setValue(true), []);\n const setFalse = useCallback(() => setValue(false), []);\n const toggle = useCallback(() => setValue((v) => !v), []);\n\n return { value, setTrue, setFalse, toggle, setValue };\n}\n","import { useEffect, useState } from \"react\";\n\nexport function useDebounce<T>(value: T, delay = 300): T {\n const [debouncedValue, setDebouncedValue] = useState<T>(value);\n\n useEffect(() => {\n const timer = setTimeout(() => setDebouncedValue(value), delay);\n return () => clearTimeout(timer);\n }, [value, delay]);\n\n return debouncedValue;\n}\n","type ClassValue = string | undefined | null | false | ClassValue[];\n\nexport function cn(...inputs: ClassValue[]): string {\n return inputs\n .flat(Infinity as 1)\n .filter(Boolean)\n .join(\" \");\n}\n","import { Button, createTheme } from \"@mantine/core\";\n\nexport const theme = (primaryColor?: string) =>\n createTheme({\n primaryColor: primaryColor ?? \"blue\",\n defaultRadius: \"md\",\n components: {\n Button: Button.extend({\n defaultProps: {\n variant: \"default\",\n },\n }),\n },\n });\n"]}
package/package.json CHANGED
@@ -1,8 +1,13 @@
1
1
  {
2
2
  "name": "@spelyco/react-lib",
3
- "version": "0.0.1",
3
+ "version": "1.0.0-a4ad2a8e-beta",
4
4
  "description": "Shared React hooks and utilities for Spelyco UI packages",
5
- "keywords": ["react", "hooks", "utilities", "spelyco"],
5
+ "keywords": [
6
+ "react",
7
+ "hooks",
8
+ "utilities",
9
+ "spelyco"
10
+ ],
6
11
  "license": "MIT",
7
12
  "main": "./dist/index.js",
8
13
  "module": "./dist/index.mjs",
@@ -14,7 +19,9 @@
14
19
  "require": "./dist/index.js"
15
20
  }
16
21
  },
17
- "files": ["dist"],
22
+ "files": [
23
+ "dist"
24
+ ],
18
25
  "scripts": {
19
26
  "build": "tsup",
20
27
  "dev": "tsup --watch",
@@ -25,10 +32,12 @@
25
32
  "clean": "rm -rf dist"
26
33
  },
27
34
  "peerDependencies": {
35
+ "@mantine/core": ">=8",
28
36
  "react": ">=18"
29
37
  },
30
38
  "devDependencies": {
31
- "@spelyco/tsconfig": "workspace:*",
39
+ "@mantine/core": "^8.3.18",
40
+ "@spelyco/tsconfig": "*",
32
41
  "@testing-library/react": "^16.1.0",
33
42
  "@types/react": "^19.2.14",
34
43
  "jsdom": "^29.0.1",
@@ -37,4 +46,4 @@
37
46
  "tsup": "^8.3.5",
38
47
  "vitest": "^4.1.1"
39
48
  }
40
- }
49
+ }