@fragment-build/ui 1.16.1 → 2.0.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.
Files changed (6) hide show
  1. package/README.md +24 -19
  2. package/dist/fragments/sidebar/Sidebar.styles.d.ts +2 -82
  3. package/dist/tailwind.plugin.d.ts +3 -11
  4. package/dist/tailwind.plugin.js +3 -20
  5. package/dist/tailwind.plugin.js.map +1 -1
  6. package/package.json +13 -13
package/README.md CHANGED
@@ -69,25 +69,30 @@ All done. Enjoy 🎉
69
69
  ## 🔧 Configuration
70
70
 
71
71
  ```ts
72
- // tailwind.config.ts
73
-
74
- import type { Config } from 'tailwindcss';
75
- import { fragmentui, heroui } from '@fragment-build/ui';
76
-
77
- const config: Config = {
78
- content: [
79
- './src/**/*.{js,jsx,ts,tsx}',
80
- './node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}',
81
- './node_modules/@fragment-build/ui/dist/**/*.{js,ts,jsx,tsx}',
82
- ],
83
- darkMode: 'class',
84
- plugins: [
85
- fragmentui(),
86
- heroui(),
87
- ],
88
- };
89
-
90
- export default config;
72
+ // fragment.ts
73
+ import { fragmentui } from '@fragment-build/ui';
74
+
75
+ export default fragmentui();
76
+ ```
77
+
78
+ ```ts
79
+ // hero.ts
80
+ import { heroui } from '@fragment-build/ui';
81
+
82
+ export default heroui();
83
+ ```
84
+
85
+ ```ts
86
+ // src/main.css
87
+
88
+ @import 'tailwindcss';
89
+
90
+ @plugin '../hero.ts';
91
+ @plugin '../fragment.ts';
92
+
93
+ /* Note: You may need to change the path to fit your project structure */
94
+ @source '../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
95
+ @custom-variant dark (&:is(.dark *));
91
96
  ```
92
97
 
93
98
  It is essential to add the FragmentUIProvider at the root of your application.
package/dist/fragments/sidebar/Sidebar.styles.d.ts CHANGED
@@ -37,47 +37,7 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
37
37
  bottomNavModalBackdrop: string;
38
38
  bottomNavModalBody: string;
39
39
  bottomNavModalFooter: string;
40
- }, undefined, import("tailwind-variants/dist/config").TVConfig<{
41
- layout: {
42
- auto: {
43
- expanded: string;
44
- placeholder: string;
45
- layoutButtonWrapper: string;
46
- collapsed: string;
47
- };
48
- collapsed: {
49
- expanded: string;
50
- placeholder: string;
51
- layoutButtonWrapper: string;
52
- };
53
- expanded: {
54
- collapsed: string;
55
- expanded: string;
56
- placeholder: string;
57
- layoutButtonWrapper: string;
58
- };
59
- };
60
- }, {
61
- layout: {
62
- auto: {
63
- expanded: string;
64
- placeholder: string;
65
- layoutButtonWrapper: string;
66
- collapsed: string;
67
- };
68
- collapsed: {
69
- expanded: string;
70
- placeholder: string;
71
- layoutButtonWrapper: string;
72
- };
73
- expanded: {
74
- collapsed: string;
75
- expanded: string;
76
- placeholder: string;
77
- layoutButtonWrapper: string;
78
- };
79
- };
80
- }>, {
40
+ }, undefined, {
81
41
  layout: {
82
42
  auto: {
83
43
  expanded: string;
@@ -155,44 +115,4 @@ export declare const sidebar: import("tailwind-variants").TVReturnType<{
155
115
  bottomNavModalBackdrop: string;
156
116
  bottomNavModalBody: string;
157
117
  bottomNavModalFooter: string;
158
- }, undefined, import("tailwind-variants/dist/config").TVConfig<{
159
- layout: {
160
- auto: {
161
- expanded: string;
162
- placeholder: string;
163
- layoutButtonWrapper: string;
164
- collapsed: string;
165
- };
166
- collapsed: {
167
- expanded: string;
168
- placeholder: string;
169
- layoutButtonWrapper: string;
170
- };
171
- expanded: {
172
- collapsed: string;
173
- expanded: string;
174
- placeholder: string;
175
- layoutButtonWrapper: string;
176
- };
177
- };
178
- }, {
179
- layout: {
180
- auto: {
181
- expanded: string;
182
- placeholder: string;
183
- layoutButtonWrapper: string;
184
- collapsed: string;
185
- };
186
- collapsed: {
187
- expanded: string;
188
- placeholder: string;
189
- layoutButtonWrapper: string;
190
- };
191
- expanded: {
192
- collapsed: string;
193
- expanded: string;
194
- placeholder: string;
195
- layoutButtonWrapper: string;
196
- };
197
- };
198
- }>, unknown, unknown, undefined>>;
118
+ }, undefined, unknown, unknown, undefined>>;
package/dist/tailwind.plugin.d.ts CHANGED
@@ -1,11 +1,3 @@
1
- import { HeroUIPluginConfig } from '@heroui/react';
2
- import { Config } from 'tailwindcss';
3
- export declare const fragmentui: () => {
4
- handler: import("tailwindcss/types/config").PluginCreator;
5
- config?: Partial<import("tailwindcss/types/config").Config>;
6
- };
7
- interface TailwindFragmentOptions {
8
- heroUIPluginConfig?: HeroUIPluginConfig;
9
- }
10
- export declare const withTailwindFragment: (config: Config, options?: TailwindFragmentOptions) => Config;
11
- export {};
1
+ import type Plugin from 'tailwindcss/dist/plugin';
2
+ export declare const fragmentui: () => ReturnType<typeof Plugin>;
3
+ export { heroui } from '@heroui/react';
package/dist/tailwind.plugin.js CHANGED
@@ -1,6 +1,5 @@
1
- import { heroui } from '@heroui/react';
2
- import defaultsDeep from 'lodash.defaultsdeep';
3
- import plugin from 'tailwindcss/plugin';
1
+ // @ts-expect-error typescript doesn't notice the exports field in package.json of tailwindcss
2
+ import plugin from 'tailwindcss/plugin.js';
4
3
  export const fragmentui = () => plugin(function ({ addBase, theme }) {
5
4
  addBase({
6
5
  'h1': {
@@ -50,21 +49,5 @@ export const fragmentui = () => plugin(function ({ addBase, theme }) {
50
49
  }
51
50
  });
52
51
  });
53
- export const withTailwindFragment = (config, options) => ({
54
- darkMode: 'class',
55
- ...config,
56
- plugins: [
57
- ...(config.plugins ?? []),
58
- fragmentui(),
59
- heroui(defaultsDeep(options?.heroUIPluginConfig ?? {}, {
60
- themes: {
61
- dark: {
62
- colors: {
63
- background: '#131316',
64
- }
65
- },
66
- },
67
- })),
68
- ],
69
- });
52
+ export { heroui } from '@heroui/react';
70
53
  //# sourceMappingURL=tailwind.plugin.js.map
package/dist/tailwind.plugin.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"tailwind.plugin.js","sourceRoot":"","sources":["../src/tailwind.plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,MAAM,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAE/C,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAEvC,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,UAAS,EAAE,OAAO,EAAE,KAAK,EAAE;IAChE,OAAO,CAAC;QACN,IAAI,EAAE;YACJ,QAAQ,EAAE,KAAK,CAAC,cAAc,CAAC;YAC/B,UAAU,EAAE,KAAK,CAAC,qBAAqB,CAAC;SACzC;QACD,IAAI,EAAE;YACJ,QAAQ,EAAE,KAAK,CAAC,cAAc,CAAC;YAC/B,UAAU,EAAE,KAAK,CAAC,qBAAqB,CAAC;SACzC;QACD,IAAI,EAAE;YACJ,QAAQ,EAAE,KAAK,CAAC,aAAa,CAAC;YAC9B,UAAU,EAAE,KAAK,CAAC,qBAAqB,CAAC;SACzC;QACD,kDAAkD,EAAE;YAClD,IAAI,EAAE,yBAAyB;SAChC;QACD,yBAAyB,EAAE;YACzB,KAAK,EAAE,oBAAoB;SAC5B;QACD,0DAA0D,EAAE;YAC1D,IAAI,EAAE,yBAAyB;SAChC;QACD,+CAA+C,EAAE;YAC/C,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;SACjC;QACD,sBAAsB,EAAE;YACtB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;SACjC;QACD,sBAAsB,EAAE;YACtB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;YAChC,kBAAkB,EAAE,KAAK,CAAC,4BAA4B,CAAC;YACvD,kBAAkB,EAAE,KAAK,CAAC,wBAAwB,CAAC;YACnD,MAAM,EAAE,iBAAiB;YACzB,SAAS,EAAE;gBACT,OAAO,EAAE,KAAK,CAAC,eAAe,CAAC;aAChC;SACF;QACD,6CAA6C,EAAE;YAC7C,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;SACvC;QACD,uBAAuB,EAAE;YACvB,IAAI,EAAE,yBAAyB;SAChC;QACD,kCAAkC,EAAE;YAClC,eAAe,EAAE,oBAAoB;SACtC;KACF,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAMH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,MAAc,EAAE,OAAiC,EAAU,EAAE,CAAC,CAAC;IAClG,QAAQ,EAAE,OAAO;IACjB,GAAG,MAAM;IACT,OAAO,EAAE;QACP,GAAG,CAAC,MAAM,CAAC,OAAO,IAAI,EAAE,CAAC;QACzB,UAAU,EAAE;QACZ,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,kBAAkB,IAAI,EAAE,EAAE;YACrD,MAAM,EAAE;gBACN,IAAI,EAAE;oBACJ,MAAM,EAAE;wBACN,UAAU,EAAE,SAAS;qBACtB;iBACF;aACF;SACF,CAAC,CAAC;KACJ;CACF,CAAC,CAAC"}
1
+ {"version":3,"file":"tailwind.plugin.js","sourceRoot":"","sources":["../src/tailwind.plugin.ts"],"names":[],"mappings":"AAAA,8FAA8F;AAC9F,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAK3C,MAAM,CAAC,MAAM,UAAU,GAAG,GAA8B,EAAE,CAAC,MAAM,CAAC,UAAS,EAAE,OAAO,EAAE,KAAK,EAAa;IACtG,OAAO,CAAC;QACN,IAAI,EAAE;YACJ,QAAQ,EAAE,KAAK,CAAC,cAAc,CAAC;YAC/B,UAAU,EAAE,KAAK,CAAC,qBAAqB,CAAC;SACzC;QACD,IAAI,EAAE;YACJ,QAAQ,EAAE,KAAK,CAAC,cAAc,CAAC;YAC/B,UAAU,EAAE,KAAK,CAAC,qBAAqB,CAAC;SACzC;QACD,IAAI,EAAE;YACJ,QAAQ,EAAE,KAAK,CAAC,aAAa,CAAC;YAC9B,UAAU,EAAE,KAAK,CAAC,qBAAqB,CAAC;SACzC;QACD,kDAAkD,EAAE;YAClD,IAAI,EAAE,yBAAyB;SAChC;QACD,yBAAyB,EAAE;YACzB,KAAK,EAAE,oBAAoB;SAC5B;QACD,0DAA0D,EAAE;YAC1D,IAAI,EAAE,yBAAyB;SAChC;QACD,+CAA+C,EAAE;YAC/C,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;SACjC;QACD,sBAAsB,EAAE;YACtB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;SACjC;QACD,sBAAsB,EAAE;YACtB,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;YAChC,kBAAkB,EAAE,KAAK,CAAC,4BAA4B,CAAC;YACvD,kBAAkB,EAAE,KAAK,CAAC,wBAAwB,CAAC;YACnD,MAAM,EAAE,iBAAiB;YACzB,SAAS,EAAE;gBACT,OAAO,EAAE,KAAK,CAAC,eAAe,CAAC;aAChC;SACF;QACD,6CAA6C,EAAE;YAC7C,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAC;SACvC;QACD,uBAAuB,EAAE;YACvB,IAAI,EAAE,yBAAyB;SAChC;QACD,kCAAkC,EAAE;YAClC,eAAe,EAAE,oBAAoB;SACtC;KACF,CAAC,CAAC;AACL,CAAC,CAAC,CAAC;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,7 @@
1
1
  {
2
2
  "name": "@fragment-build/ui",
3
- "version": "1.16.1",
3
+ "version": "2.0.0",
4
+ "type": "module",
4
5
  "main": "dist/index.js",
5
6
  "types": "dist/index.d.ts",
6
7
  "repository": {
@@ -12,27 +13,26 @@
12
13
  "@storybook/addon-a11y": "9.1.2",
13
14
  "@storybook/addon-docs": "9.1.2",
14
15
  "@storybook/addon-links": "9.1.2",
15
- "@storybook/addon-themes": "9.1.2",
16
16
  "@storybook/react-vite": "9.1.2",
17
+ "@tailwindcss/vite": "4.1.12",
17
18
  "@types/lodash.defaultsdeep": "4.6.9",
18
19
  "@types/react": "18.3.12",
19
- "@types/react-dom": "18.3.1",
20
+ "@types/react-dom": "18.3.0",
20
21
  "@typescript-eslint/eslint-plugin": "8.21.0",
21
22
  "@typescript-eslint/parser": "8.21.0",
22
- "@vitejs/plugin-react": "4.3.4",
23
- "@vitejs/plugin-react-swc": "3.7.2",
24
- "autoprefixer": "10.4.20",
23
+ "@vitejs/plugin-react": "5.0.0",
24
+ "@vitejs/plugin-react-swc": "4.0.0",
25
+ "@vueless/storybook-dark-mode": "9.0.7",
25
26
  "eslint": "9.33.0",
26
- "eslint-plugin-react-hooks": "5.1.0",
27
- "eslint-plugin-react-refresh": "0.4.18",
27
+ "eslint-plugin-react-hooks": "5.2.0",
28
+ "eslint-plugin-react-refresh": "0.4.20",
28
29
  "eslint-plugin-storybook": "9.1.2",
29
- "postcss": "8.5.1",
30
30
  "react": "18.3.1",
31
31
  "react-dom": "18.3.1",
32
32
  "storybook": "9.1.2",
33
33
  "typescript": "5.7.3",
34
- "typescript-eslint": "8.21.0",
35
- "vite": "6.3.5"
34
+ "typescript-eslint": "8.39.1",
35
+ "vite": "7.1.2"
36
36
  },
37
37
  "scripts": {
38
38
  "build": "tsc",
@@ -42,13 +42,13 @@
42
42
  "update": "npx npm-check-updates -i --format group"
43
43
  },
44
44
  "dependencies": {
45
- "@heroui/react": "2.7.11",
45
+ "@heroui/react": "2.8.2",
46
46
  "@tabler/icons-react": "3.34.1",
47
47
  "apexcharts": "3.54.1",
48
48
  "framer-motion": "11.18.2",
49
49
  "lodash.defaultsdeep": "4.6.1",
50
50
  "next-themes": "0.4.6",
51
51
  "react-apexcharts": "1.5.0",
52
- "tailwindcss": "3.4.14"
52
+ "tailwindcss": "4.1.12"
53
53
  }
54
54
  }