rothzerg-ui 0.1.6 → 0.1.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.
package/README.md
CHANGED
|
@@ -13,7 +13,7 @@ A highly customizable, production-ready React component library built with TypeS
|
|
|
13
13
|
- **40+ page blocks** — Hero, Dashboard, Kanban, Pricing, AuthForm, and more
|
|
14
14
|
- **25 React hooks** — useDebounce, useLocalStorage, useMediaQuery, and more
|
|
15
15
|
- **20 utility functions** — formatDate, formatNumber, slugify, deepEqual, and more
|
|
16
|
-
- **Fully customizable** — every token is a CSS custom property, configured via `rothzerg.config.
|
|
16
|
+
- **Fully customizable** — every token is a CSS custom property, configured via `rothzerg.config.ts`
|
|
17
17
|
- **BEM methodology** — semantic class names, easy to override
|
|
18
18
|
- **TailwindCSS 4.2** — compiled at build time, no Tailwind required in your project
|
|
19
19
|
- **Accessible** — built on Radix UI primitives, WCAG 2.1 AA
|
|
@@ -80,7 +80,7 @@ export function MyCard() {
|
|
|
80
80
|
|
|
81
81
|
## Configuration
|
|
82
82
|
|
|
83
|
-
Copy `rothzerg.config.example.
|
|
83
|
+
Copy `rothzerg.config.example.ts` to your project root and customize:
|
|
84
84
|
|
|
85
85
|
```ts
|
|
86
86
|
// rothzerg.config.ts
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RothzergProvider.cjs","sources":["../../src/provider/RothzergProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo } from 'react';\nimport { mergeConfig, defaultConfig } from '../config';\nimport type { RothzergConfig } from '../config';\n\ninterface RothzergContextValue {\n config: Required<RothzergConfig>;\n}\n\nconst RothzergContext = createContext<RothzergContextValue>({\n config: defaultConfig,\n});\n\nexport function useRothzerg(): RothzergContextValue {\n return useContext(RothzergContext);\n}\n\nexport interface RothzergProviderProps {\n children: React.ReactNode;\n /** Your rothzerg.config.
|
|
1
|
+
{"version":3,"file":"RothzergProvider.cjs","sources":["../../src/provider/RothzergProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo } from 'react';\nimport { mergeConfig, defaultConfig } from '../config';\nimport type { RothzergConfig } from '../config';\n\ninterface RothzergContextValue {\n config: Required<RothzergConfig>;\n}\n\nconst RothzergContext = createContext<RothzergContextValue>({\n config: defaultConfig,\n});\n\nexport function useRothzerg(): RothzergContextValue {\n return useContext(RothzergContext);\n}\n\nexport interface RothzergProviderProps {\n children: React.ReactNode;\n /** Your rothzerg.config.ts default export */\n config?: RothzergConfig;\n /** CSS selector to inject tokens into. Defaults to ':root' (document.documentElement) */\n targetSelector?: string;\n}\n\nfunction camelToKebab(str: string): string {\n return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n}\n\n/**\n * RothzergProvider\n *\n * Wrap your application with this provider to apply your custom theme.\n * It injects your rothzerg.config.ts values as CSS custom properties at runtime.\n *\n * @example\n * import { RothzergProvider } from 'rothzerg-ui';\n * import config from './rothzerg.config';\n *\n * export default function App() {\n * return (\n * <RothzergProvider config={config}>\n * <YourApp />\n * </RothzergProvider>\n * );\n * }\n */\nexport function RothzergProvider({\n children,\n config,\n}: RothzergProviderProps) {\n const mergedConfig = useMemo(\n () => mergeConfig(defaultConfig, config),\n [config],\n );\n\n useEffect(() => {\n const { theme, darkMode, cssPrefix: prefix } = mergedConfig;\n\n const rootVars: string[] = [];\n\n // Collect color tokens\n if (theme.colors) {\n for (const [key, value] of Object.entries(theme.colors)) {\n if (value) {\n rootVars.push(` --${prefix}-color-${camelToKebab(key)}: ${value};`);\n }\n }\n }\n\n // Collect border radius tokens\n if (theme.borderRadius) {\n for (const [key, value] of Object.entries(theme.borderRadius)) {\n if (value) {\n rootVars.push(` --${prefix}-radius-${camelToKebab(key)}: ${value};`);\n }\n }\n }\n\n // Collect font tokens\n if (theme.fonts) {\n for (const [key, value] of Object.entries(theme.fonts)) {\n if (value) {\n rootVars.push(` --${prefix}-font-${camelToKebab(key)}: ${value};`);\n }\n }\n }\n\n // Collect animation tokens\n if (theme.animation) {\n const { duration, durationSlow, easing, easingBounce } = theme.animation;\n if (duration) rootVars.push(` --${prefix}-animation-duration: ${duration};`);\n if (durationSlow) rootVars.push(` --${prefix}-animation-duration-slow: ${durationSlow};`);\n if (easing) rootVars.push(` --${prefix}-animation-easing: ${easing};`);\n if (easingBounce) rootVars.push(` --${prefix}-animation-easing-bounce: ${easingBounce};`);\n }\n\n // Collect shadow tokens\n if (theme.shadows) {\n for (const [key, value] of Object.entries(theme.shadows)) {\n if (value) {\n rootVars.push(` --${prefix}-shadow-${camelToKebab(key)}: ${value};`);\n }\n }\n }\n\n // Build dark mode vars\n let darkRule = '';\n if (theme.darkColors) {\n const darkVars = Object.entries(theme.darkColors)\n .filter(([, v]) => v !== undefined)\n .map(([k, v]) => ` --${prefix}-color-${camelToKebab(k)}: ${v};`)\n .join('\\n');\n\n darkRule = darkMode === 'media'\n ? `@media (prefers-color-scheme: dark) { :root {\\n${darkVars}\\n} }`\n : `.dark {\\n${darkVars}\\n}`;\n }\n\n // Inject all tokens as stylesheet rules (not inline styles) so dark class can override\n let styleEl = document.getElementById('rz-tokens') as HTMLStyleElement | null;\n if (!styleEl) {\n styleEl = document.createElement('style');\n styleEl.id = 'rz-tokens';\n document.head.appendChild(styleEl);\n }\n styleEl.textContent = `:root {\\n${rootVars.join('\\n')}\\n}\\n${darkRule}`;\n }, [mergedConfig]);\n\n return (\n <RothzergContext.Provider value={{ config: mergedConfig }}>\n {children}\n </RothzergContext.Provider>\n );\n}\n"],"names":["createContext","defaultConfig","useContext","useMemo","mergeConfig","useEffect","jsx"],"mappings":"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"}
|
|
@@ -6,7 +6,7 @@ interface RothzergContextValue {
|
|
|
6
6
|
export declare function useRothzerg(): RothzergContextValue;
|
|
7
7
|
export interface RothzergProviderProps {
|
|
8
8
|
children: React.ReactNode;
|
|
9
|
-
/** Your rothzerg.config.
|
|
9
|
+
/** Your rothzerg.config.ts default export */
|
|
10
10
|
config?: RothzergConfig;
|
|
11
11
|
/** CSS selector to inject tokens into. Defaults to ':root' (document.documentElement) */
|
|
12
12
|
targetSelector?: string;
|
|
@@ -15,7 +15,7 @@ export interface RothzergProviderProps {
|
|
|
15
15
|
* RothzergProvider
|
|
16
16
|
*
|
|
17
17
|
* Wrap your application with this provider to apply your custom theme.
|
|
18
|
-
* It injects your rothzerg.config.
|
|
18
|
+
* It injects your rothzerg.config.ts values as CSS custom properties at runtime.
|
|
19
19
|
*
|
|
20
20
|
* @example
|
|
21
21
|
* import { RothzergProvider } from 'rothzerg-ui';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RothzergProvider.js","sources":["../../src/provider/RothzergProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo } from 'react';\nimport { mergeConfig, defaultConfig } from '../config';\nimport type { RothzergConfig } from '../config';\n\ninterface RothzergContextValue {\n config: Required<RothzergConfig>;\n}\n\nconst RothzergContext = createContext<RothzergContextValue>({\n config: defaultConfig,\n});\n\nexport function useRothzerg(): RothzergContextValue {\n return useContext(RothzergContext);\n}\n\nexport interface RothzergProviderProps {\n children: React.ReactNode;\n /** Your rothzerg.config.
|
|
1
|
+
{"version":3,"file":"RothzergProvider.js","sources":["../../src/provider/RothzergProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo } from 'react';\nimport { mergeConfig, defaultConfig } from '../config';\nimport type { RothzergConfig } from '../config';\n\ninterface RothzergContextValue {\n config: Required<RothzergConfig>;\n}\n\nconst RothzergContext = createContext<RothzergContextValue>({\n config: defaultConfig,\n});\n\nexport function useRothzerg(): RothzergContextValue {\n return useContext(RothzergContext);\n}\n\nexport interface RothzergProviderProps {\n children: React.ReactNode;\n /** Your rothzerg.config.ts default export */\n config?: RothzergConfig;\n /** CSS selector to inject tokens into. Defaults to ':root' (document.documentElement) */\n targetSelector?: string;\n}\n\nfunction camelToKebab(str: string): string {\n return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();\n}\n\n/**\n * RothzergProvider\n *\n * Wrap your application with this provider to apply your custom theme.\n * It injects your rothzerg.config.ts values as CSS custom properties at runtime.\n *\n * @example\n * import { RothzergProvider } from 'rothzerg-ui';\n * import config from './rothzerg.config';\n *\n * export default function App() {\n * return (\n * <RothzergProvider config={config}>\n * <YourApp />\n * </RothzergProvider>\n * );\n * }\n */\nexport function RothzergProvider({\n children,\n config,\n}: RothzergProviderProps) {\n const mergedConfig = useMemo(\n () => mergeConfig(defaultConfig, config),\n [config],\n );\n\n useEffect(() => {\n const { theme, darkMode, cssPrefix: prefix } = mergedConfig;\n\n const rootVars: string[] = [];\n\n // Collect color tokens\n if (theme.colors) {\n for (const [key, value] of Object.entries(theme.colors)) {\n if (value) {\n rootVars.push(` --${prefix}-color-${camelToKebab(key)}: ${value};`);\n }\n }\n }\n\n // Collect border radius tokens\n if (theme.borderRadius) {\n for (const [key, value] of Object.entries(theme.borderRadius)) {\n if (value) {\n rootVars.push(` --${prefix}-radius-${camelToKebab(key)}: ${value};`);\n }\n }\n }\n\n // Collect font tokens\n if (theme.fonts) {\n for (const [key, value] of Object.entries(theme.fonts)) {\n if (value) {\n rootVars.push(` --${prefix}-font-${camelToKebab(key)}: ${value};`);\n }\n }\n }\n\n // Collect animation tokens\n if (theme.animation) {\n const { duration, durationSlow, easing, easingBounce } = theme.animation;\n if (duration) rootVars.push(` --${prefix}-animation-duration: ${duration};`);\n if (durationSlow) rootVars.push(` --${prefix}-animation-duration-slow: ${durationSlow};`);\n if (easing) rootVars.push(` --${prefix}-animation-easing: ${easing};`);\n if (easingBounce) rootVars.push(` --${prefix}-animation-easing-bounce: ${easingBounce};`);\n }\n\n // Collect shadow tokens\n if (theme.shadows) {\n for (const [key, value] of Object.entries(theme.shadows)) {\n if (value) {\n rootVars.push(` --${prefix}-shadow-${camelToKebab(key)}: ${value};`);\n }\n }\n }\n\n // Build dark mode vars\n let darkRule = '';\n if (theme.darkColors) {\n const darkVars = Object.entries(theme.darkColors)\n .filter(([, v]) => v !== undefined)\n .map(([k, v]) => ` --${prefix}-color-${camelToKebab(k)}: ${v};`)\n .join('\\n');\n\n darkRule = darkMode === 'media'\n ? `@media (prefers-color-scheme: dark) { :root {\\n${darkVars}\\n} }`\n : `.dark {\\n${darkVars}\\n}`;\n }\n\n // Inject all tokens as stylesheet rules (not inline styles) so dark class can override\n let styleEl = document.getElementById('rz-tokens') as HTMLStyleElement | null;\n if (!styleEl) {\n styleEl = document.createElement('style');\n styleEl.id = 'rz-tokens';\n document.head.appendChild(styleEl);\n }\n styleEl.textContent = `:root {\\n${rootVars.join('\\n')}\\n}\\n${darkRule}`;\n }, [mergedConfig]);\n\n return (\n <RothzergContext.Provider value={{ config: mergedConfig }}>\n {children}\n </RothzergContext.Provider>\n );\n}\n"],"names":[],"mappings":";;;;AAQA,MAAM,kBAAkB,cAAoC;AAAA,EAC1D,QAAQ;AACV,CAAC;AAEM,SAAS,cAAoC;AAClD,SAAO,WAAW,eAAe;AACnC;AAUA,SAAS,aAAa,KAAqB;AACzC,SAAO,IAAI,QAAQ,mBAAmB,OAAO,EAAE,YAAA;AACjD;AAoBO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAA0B;AACxB,QAAM,eAAe;AAAA,IACnB,MAAM,YAAY,eAAe,MAAM;AAAA,IACvC,CAAC,MAAM;AAAA,EAAA;AAGT,YAAU,MAAM;AACd,UAAM,EAAE,OAAO,UAAU,WAAW,WAAW;AAE/C,UAAM,WAAqB,CAAA;AAG3B,QAAI,MAAM,QAAQ;AAChB,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,MAAM,MAAM,GAAG;AACvD,YAAI,OAAO;AACT,mBAAS,KAAK,OAAO,MAAM,UAAU,aAAa,GAAG,CAAC,KAAK,KAAK,GAAG;AAAA,QACrE;AAAA,MACF;AAAA,IACF;AAGA,QAAI,MAAM,cAAc;AACtB,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,MAAM,YAAY,GAAG;AAC7D,YAAI,OAAO;AACT,mBAAS,KAAK,OAAO,MAAM,WAAW,aAAa,GAAG,CAAC,KAAK,KAAK,GAAG;AAAA,QACtE;AAAA,MACF;AAAA,IACF;AAGA,QAAI,MAAM,OAAO;AACf,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,MAAM,KAAK,GAAG;AACtD,YAAI,OAAO;AACT,mBAAS,KAAK,OAAO,MAAM,SAAS,aAAa,GAAG,CAAC,KAAK,KAAK,GAAG;AAAA,QACpE;AAAA,MACF;AAAA,IACF;AAGA,QAAI,MAAM,WAAW;AACnB,YAAM,EAAE,UAAU,cAAc,QAAQ,aAAA,IAAiB,MAAM;AAC/D,UAAI,SAAU,UAAS,KAAK,OAAO,MAAM,wBAAwB,QAAQ,GAAG;AAC5E,UAAI,aAAc,UAAS,KAAK,OAAO,MAAM,6BAA6B,YAAY,GAAG;AACzF,UAAI,OAAQ,UAAS,KAAK,OAAO,MAAM,sBAAsB,MAAM,GAAG;AACtE,UAAI,aAAc,UAAS,KAAK,OAAO,MAAM,6BAA6B,YAAY,GAAG;AAAA,IAC3F;AAGA,QAAI,MAAM,SAAS;AACjB,iBAAW,CAAC,KAAK,KAAK,KAAK,OAAO,QAAQ,MAAM,OAAO,GAAG;AACxD,YAAI,OAAO;AACT,mBAAS,KAAK,OAAO,MAAM,WAAW,aAAa,GAAG,CAAC,KAAK,KAAK,GAAG;AAAA,QACtE;AAAA,MACF;AAAA,IACF;AAGA,QAAI,WAAW;AACf,QAAI,MAAM,YAAY;AACpB,YAAM,WAAW,OAAO,QAAQ,MAAM,UAAU,EAC7C,OAAO,CAAC,CAAA,EAAG,CAAC,MAAM,MAAM,MAAS,EACjC,IAAI,CAAC,CAAC,GAAG,CAAC,MAAM,OAAO,MAAM,UAAU,aAAa,CAAC,CAAC,KAAK,CAAC,GAAG,EAC/D,KAAK,IAAI;AAEZ,iBAAW,aAAa,UACpB;AAAA,EAAkD,QAAQ;AAAA,OAC1D;AAAA,EAAY,QAAQ;AAAA;AAAA,IAC1B;AAGA,QAAI,UAAU,SAAS,eAAe,WAAW;AACjD,QAAI,CAAC,SAAS;AACZ,gBAAU,SAAS,cAAc,OAAO;AACxC,cAAQ,KAAK;AACb,eAAS,KAAK,YAAY,OAAO;AAAA,IACnC;AACA,YAAQ,cAAc;AAAA,EAAY,SAAS,KAAK,IAAI,CAAC;AAAA;AAAA,EAAQ,QAAQ;AAAA,EACvE,GAAG,CAAC,YAAY,CAAC;AAEjB,SACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,EAAE,QAAQ,gBACxC,UACH;AAEJ;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "rothzerg-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
4
4
|
"description": "A highly customizable React UI component library built with TypeScript, TailwindCSS 4.2 and BEM methodology",
|
|
5
5
|
"author": "Rothzerg",
|
|
6
6
|
"license": "MIT",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
},
|
|
24
24
|
"files": [
|
|
25
25
|
"dist",
|
|
26
|
-
"rothzerg.config.example.
|
|
26
|
+
"rothzerg.config.example.ts",
|
|
27
27
|
"LICENSE"
|
|
28
28
|
],
|
|
29
29
|
"sideEffects": ["*.css", "dist/styles.css"],
|
|
@@ -122,5 +122,6 @@
|
|
|
122
122
|
"repository": {
|
|
123
123
|
"type": "git",
|
|
124
124
|
"url": "https://github.com/rothzerg/rothzerg-ui.git"
|
|
125
|
-
}
|
|
125
|
+
},
|
|
126
|
+
"homepage": "https://ui.rothzerg.dev"
|
|
126
127
|
}
|