[ { "path": ".gitignore", "content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndist-ssr\n*.local\n\n.next\nnext-env.d.ts\ndist\ndocs\n\n# Editor directories and files\n.vscode/*\n!.vscode/extensions.json\n.idea\n.DS_Store\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\n.claude\n" }, { "path": ".prettierrc", "content": "{\n \"semi\": true,\n \"singleQuote\": false,\n \"trailingComma\": \"es5\",\n \"printWidth\": 120\n}\n" }, { "path": "CONTRIBUTING.md", "content": "\n# Contributing to Mantine Theme Builder\n\nWe are excited that you're interested in contributing to **Mantine Theme Builder**! This guide will help you get started with contributing code, reporting issues, or suggesting new features.\n\n## How to Contribute\n\nThere are many ways to contribute to this project:\n\n- **Reporting Bugs**: If you've found a bug, please open an issue with a clear description of the problem, steps to reproduce, and any error messages.\n- **Feature Requests**: Got an idea for a new feature? We welcome suggestions. Please provide a detailed description of the feature and how it would improve the project.\n- **Code Contributions**: We love receiving pull requests! Check out our guidelines for contributing code below.\n\n## Getting Started\n\nTo start contributing, follow these steps:\n\n1. **Fork the repository**: Click the \"Fork\" button at the top of this repo and clone it to your local machine.\n ```bash\n git clone https://github.com/your-username/mantine-theme-builder.git\n cd mantine-theme-builder\n ```\n2. **Install dependencies**: Install the necessary dependencies to run the project.\n ```bash\n npm install\n ```\n3. **Make your changes**: Create a new branch for your feature or bug fix.\n ```bash\n git checkout -b your-branch-name\n ```\n4. **Test your changes**: Run the project locally to ensure everything works as expected.\n ```bash\n npm start\n ```\n5. **Generate updated themes**: If you have updated any theme or style files, run the following command to regenerate the updated themes.\n ```bash\n npm run generate\n ```\n6. **Commit your changes**: Once you're satisfied with your changes, commit them.\n ```bash\n git commit -m \"Description of your changes\"\n ```\n7. **Push your changes**: Push your changes to your forked repo.\n ```bash\n git push origin your-branch-name\n ```\n8. **Submit a pull request**: Go to the original repo on GitHub and submit a pull request with a clear description of your changes.\n\n## Code Style\n\nPlease ensure your code follows these guidelines:\n\n- Use [Prettier](https://prettier.io/) for code formatting to keep the codebase clean and consistent.\n- Follow the standard JavaScript or TypeScript best practices.\n- Ensure that your code is properly documented and tested where applicable.\n\n## Issue Reporting\n\nWhen reporting issues, please ensure that you include:\n\n- A detailed description of the issue.\n- Steps to reproduce the bug.\n- Screenshots or code snippets (if applicable).\n\n## License\n\nBy contributing to **Mantine Theme Builder**, you agree that your contributions will be licensed under the MIT License.\n" }, { "path": "LICENSE", "content": "MIT License\n\nCopyright (c) 2024 RubixCube Innovations\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n" }, { "path": "README.md", "content": "\n# Mantine Hub - Modern Themes, UI Blocks, Templates and much more for [Mantine UI Library](https://mantine.dev)\n\n**Mantine Hub(previously Theme Builder)** is a complimentary tool for developers to make UI development with Mantine much more faster and easier. Initially created as an experimental project to simplify the process of modernizing Mantine's styling, MantineHub offers pre-configured themes inspired by Shadcn. With MantineHub, developers can quickly integrate modern styling into their projects by copying and pasting the theme configuration.\n\nDue to the overwhelming positive feedback and community endorsment we’ve received, MantineHub has evolved into a comprehensive toolkit. It now supports all Mantine components and introduces exciting new features like Blocks—pre-built UI components designed to seamlessly work with the generated themes.\n\n![image](https://github.com/user-attachments/assets/0b673eec-ed49-4928-a021-5bee7d0ec8e3)\n\n## Deep Wiki\n\n[Visit Documentation](https://deepwiki.com/RubixCube-Innovations/mantine-theme-builder)\n\n## Features\n\n- **Customizable Styles**: Choose from a selection of predefined styles to quickly update the look of your UI.\n- **Color Palette**: Pick from a wide range of color themes like Zinc, Slate, Gray, and more.\n- **Radius Control**: Adjust the border radius to match your desired look, from sharp corners to fully rounded elements.\n- **Light/Dark Mode**: Toggle between light and dark themes for quick previews and real-time visualizations.\n- **Export Theme**: Copy the generated Mantine theme object and integrate it directly into your project.\n\n## Getting Started\n\nTo use **Mantine Theme Builder** in your project, follow these steps:\n\n1. Set up a new project with Mantine by following the [official Mantine documentation](https://mantine.dev/getting-started/):\n\n2. Once your project is set up, open the `MantineProvider` (usually in `src/App.js` or `src/App.tsx`).\n\n3. Copy the generated theme object from the **Mantine Theme Builder** website.\n\n4. Replace or extend the theme object in your `MantineProvider` as follows:\n\n ```javascript\n import { MantineProvider } from '@mantine/core';\n import { yourCustomTheme } from './your-custom-theme';\n\n function App() {\n return (\n \n \n \n );\n }\n\n export default App;\n ```\n\n5. That's it! Your project will now use the customized theme.\n\n## How to Use\n\n1. Open **Mantine Theme Builder** and select from the available style presets or color themes to start building your Mantine theme.\n2. Customize the border radius values for rounded corners.\n3. Toggle between light and dark modes for your UI components.\n4. Once you're satisfied, copy the theme object code and use it in your project.\n\n## Contribution\n\nWe welcome contributions from the community! Feel free to submit issues or pull requests to improve this project. See our [Contribution Guide](CONTRIBUTING.md) for more details.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Star History\n\n[![Star History Chart](https://api.star-history.com/svg?repos=rubixcube-innovations/mantine-theme-builder&type=Date)](https://star-history.com/#rubixcube-innovations/mantine-theme-builder&Date)\n\n## Keywords\n\n- Mantine Theme Builder\n- Mantine Custom Theme\n- Mantine UI Components\n- Mantine Light/Dark Mode\n- Mantine Customizable Themes\n- Mantine Modern UI Themes\n- Mantine Style Presets\n- shadcn-like Mantine Themes\n- Mantine Theme Exporter\n- Mantine Theme Generator\n- Mantine Shadcn Themes\n- Shadcn Themes for Mantine\n" }, { "path": "_mantine.scss", "content": "@use \"sass:math\";\n\n// Define variables for your breakpoints,\n// values must be the same as in your theme\n$mantine-breakpoint-xs: \"36em\";\n$mantine-breakpoint-sm: \"48em\";\n$mantine-breakpoint-md: \"62em\";\n$mantine-breakpoint-lg: \"75em\";\n$mantine-breakpoint-xl: \"88em\";\n\n@function rem($value) {\n @return #{math.div(math.div($value, $value * 0 + 1), 16)}rem;\n}\n\n@mixin light {\n [data-mantine-color-scheme=\"light\"] & {\n @content;\n }\n}\n\n@mixin dark {\n [data-mantine-color-scheme=\"dark\"] & {\n @content;\n }\n}\n\n@mixin hover {\n @media (hover: hover) {\n &:hover {\n @content;\n }\n }\n\n @media (hover: none) {\n &:active {\n @content;\n }\n }\n}\n\n@mixin smaller-than($breakpoint) {\n @media (max-width: $breakpoint) {\n @content;\n }\n}\n\n@mixin larger-than($breakpoint) {\n @media (min-width: $breakpoint) {\n @content;\n }\n}\n\n// Add direction mixins if you need rtl support\n@mixin rtl {\n [dir=\"rtl\"] & {\n @content;\n }\n}\n\n@mixin ltr {\n [dir=\"ltr\"] & {\n @content;\n }\n}\n" }, { "path": "eslint.config.js", "content": "import js from \"@eslint/js\";\nimport globals from \"globals\";\nimport reactHooks from \"eslint-plugin-react-hooks\";\nimport reactRefresh from \"eslint-plugin-react-refresh\";\nimport tseslint from \"typescript-eslint\";\nimport eslintConfigPrettier from \"eslint-config-prettier\";\n\nexport default tseslint.config(\n { ignores: [\"dist\"] },\n {\n extends: [js.configs.recommended, ...tseslint.configs.recommended],\n files: [\"**/*.{ts,tsx}\"],\n languageOptions: {\n ecmaVersion: 2020,\n globals: globals.browser,\n },\n plugins: {\n \"react-hooks\": reactHooks,\n \"react-refresh\": reactRefresh,\n },\n rules: {\n ...reactHooks.configs.recommended.rules,\n \"react-refresh/only-export-components\": [\"warn\", { allowConstantExport: true }],\n \"@typescript-eslint/no-explicit-any\": 0,\n },\n },\n eslintConfigPrettier\n);\n" }, { "path": "js/generated/colors.cjs", "content": "\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.SHADCN_DEFAULT_COLORS = exports.MANTINE_DEFAULT_COLORS = exports.pinkColors = exports.fuchsiaColors = exports.purpleColors = exports.indigoColors = exports.skyColors = exports.cyanColors = exports.tealColors = exports.emeraldColors = exports.limeColors = exports.amberColors = exports.violetColors = exports.yellowColors = exports.blueColors = exports.greenColors = exports.orangeColors = exports.roseColors = exports.redColors = exports.neutralColors = exports.grayColors = exports.stoneColors = exports.slateColors = exports.zincColors = void 0;\n// Note: 500 shade in tailwind color is not included in the color palette except for orange, green and blue\n// Color shades in tailwind are 50, 100, 200, 300, 400, 600, 700, 800, 900, 950\nexports.zincColors = [\n \"#fafafa\", // [0] -> shade 50\n \"#f4f4f5\", // [1] -> shade 100\n \"#e4e4e7\", // [2] -> shade 200\n \"#d4d4d8\", // [3] -> shade 300\n \"#a1a1aa\", // [4] -> shade 400\n \"#52525b\", // [5] -> shade 600\n \"#3f3f46\", // [6] -> shade 700\n \"#27272a\", // [7] -> shade 800\n \"#18181b\", // [8] -> shade 900\n \"#09090b\", // [9] -> shade 950\n \"#71717A\" // [10] -> zinc base\n];\nexports.slateColors = [\n \"#f8fafc\", // [0] -> shade 50\n \"#f1f5f9\", // [1] -> shade 100\n \"#e2e8f0\", // [2] -> shade 200\n \"#cbd5e1\", // [3] -> shade 300\n \"#94a3b8\", // [4] -> shade 400\n \"#475569\", // [5] -> shade 600\n \"#334155\", // [6] -> shade 700\n \"#1e293b\", // [7] -> shade 800\n \"#0f172a\", // [8] -> shade 900\n \"#020817\", // [9] -> shade 950 (original tailwind color was #020617)\n \"#64748B\" // [10] -> slate base\n];\nexports.stoneColors = [\n \"#fafaf9\", // [0] -> shade 50\n \"#f5f5f4\", // [1] -> shade 100\n \"#e7e5e4\", // [2] -> shade 200\n \"#d6d3d1\", // [3] -> shade 300\n \"#a8a29e\", // [4] -> shade 400\n \"#57534e\", // [5] -> shade 600\n \"#44403c\", // [6] -> shade 700\n \"#292524\", // [7] -> shade 800\n \"#1c1917\", // [8] -> shade 900\n \"#0c0a09\", // [9] -> shade 950\n \"#78716C\" // [10] -> stone base\n];\nexports.grayColors = [\n \"#f9fafb\", // [0] -> shade 50\n \"#f3f4f6\", // [1] -> shade 100\n \"#e5e7eb\", // [2] -> shade 200\n \"#d1d5db\", // [3] -> shade 300\n \"#9ca3af\", // [4] -> shade 400\n \"#4b5563\", // [5] -> shade 600\n \"#374151\", // [6] -> shade 700\n \"#1f2937\", // [7] -> shade 800\n \"#111827\", // [8] -> shade 900\n \"#030712\", // [9] -> shade 950\n \"#6B7280\" // [10] -> gray base\n];\nexports.neutralColors = [\n \"#fafafa\", // [0] -> shade 50\n \"#f5f5f5\", // [1] -> shade 100\n \"#e5e5e5\", // [2] -> shade 200\n \"#d4d4d4\", // [3] -> shade 300\n \"#a3a3a3\", // [4] -> shade 400\n \"#525252\", // [5] -> shade 600\n \"#404040\", // [6] -> shade 700\n \"#262626\", // [7] -> shade 800\n \"#171717\", // [8] -> shade 900\n \"#0a0a0a\", // [9] -> shade 950\n \"#737373\" // [10] -> neutral base\n];\nexports.redColors = [\n \"#FEF2F2\", // [0] -> shade 50\n \"#FEE2E2\", // [1] -> shade 100\n \"#FECACA\", // [2] -> shade 200\n \"#FCA5A5\", // [3] -> shade 300\n \"#F87171\", // [4] -> shade 400\n \"#DC2626\", // [5] -> shade 600\n \"#B91C1C\", // [6] -> shade 700\n \"#991B1B\", // [7] -> shade 800\n \"#7F1D1D\", // [8] -> shade 900\n \"#450A0A\", // [9] -> shade 950\n \"#EF4444\" // [10] -> red base\n];\nexports.roseColors = [\n \"#fff1f2\", // [0] -> shade 50\n \"#ffe4e6\", // [1] -> shade 100\n \"#fecdd3\", // [2] -> shade 200\n \"#fda4af\", // [3] -> shade 300\n \"#fb7185\", // [4] -> shade 400\n \"#e11d48\", // [5] -> shade 600\n \"#be123c\", // [6] -> shade 700\n \"#9f1239\", // [7] -> shade 800\n \"#881337\", // [8] -> shade 900\n \"#4c0519\", // [9] -> shade 950\n \"#F43F5E\" // [10] -> base color as rose[10]\n];\nexports.orangeColors = [\n \"#fff7ed\", // [0] -> shade 50\n \"#ffedd5\", // [1] -> shade 100\n \"#fed7aa\", // [2] -> shade 200\n \"#fdba74\", // [3] -> shade 300\n \"#fb923c\", // [4] -> shade 400\n \"#f97316\", // [5] -> shade 500 \n \"#ea580c\", // [6] -> shade 600\n \"#9a3412\", // [7] -> shade 800\n \"#7c2d12\", // [8] -> shade 900\n \"#431407\", // [9] -> shade 950\n \"#F97316\", // [10] -> orange base\n];\nexports.greenColors = [\n \"#F0FDF4\", // [0] -> shade 50\n \"#DCFCE7\", // [1] -> shade 100\n \"#BBF7D0\", // [2] -> shade 200\n \"#86EFAC\", // [3] -> shade 300\n \"#4ADE80\", // [4] -> shade 400\n \"#22c55e\", // [5] -> shade 500\n \"#16A34A\", // [6] -> shade 600\n \"#166534\", // [7] -> shade 800\n \"#14532D\", // [8] -> shade 900\n \"#052E16\", // [9] -> shade 950\n \"#10B981\", // [10] -> green base\n];\nexports.blueColors = [\n \"#eff6ff\", // [0] -> shade 50\n \"#dbeafe\", // [1] -> shade 100\n \"#bfdbfe\", // [2] -> shade 200\n \"#93c5fd\", // [3] -> shade 300\n \"#60a5fa\", // [4] -> shade 400\n \"#3b82f6\", // [5] -> shade 500\n \"#2563eb\", // [6] -> shade 600\n \"#1e40af\", // [7] -> shade 800\n \"#1e3a8a\", // [8] -> shade 900\n \"#172554\", // [9] -> shade 950\n \"#3B82F6\", // [10] -> blue base\n];\nexports.yellowColors = [\n \"#fefce8\", // [0] -> shade 50\n \"#fef9c3\", // [1] -> shade 100\n \"#fef08a\", // [2] -> shade 200\n \"#fde047\", // [3] -> shade 300\n \"#facc15\", // [4] -> shade 400\n \"#ca8a04\", // [5] -> shade 500\n \"#a16207\", // [6] -> shade 600\n \"#854d0e\", // [7] -> shade 700\n \"#713f12\", // [8] -> shade 800\n \"#3f2c06\", // [9] -> shade 950\n \"#F59E0B\", // [10] -> yellow base\n];\nexports.violetColors = [\n \"#f5f3ff\", // [0] -> shade 50\n \"#ede9fe\", // [1] -> shade 100\n \"#ddd6fe\", // [2] -> shade 200\n \"#c4b5fd\", // [3] -> shade 300\n \"#a78bfa\", // [4] -> shade 400\n \"#7c3aed\", // [5] -> shade 500\n \"#6d28d9\", // [6] -> shade 600\n \"#5b21b6\", // [7] -> shade 700\n \"#4c1d95\", // [8] -> shade 800\n \"#1e1b4b\", // [9] -> shade 950\n \"#8B5CF6\", // [10] -> violet base\n];\nexports.amberColors = [\n \"#FFFBEB\", // [0] -> shade 50\n \"#FEF3C7\", // [1] -> shade 100\n \"#FDE68A\", // [2] -> shade 200\n \"#FCD34D\", // [3] -> shade 300\n \"#FBBF24\", // [4] -> shade 400\n \"#f59e0b\", // [5] -> shade 500\n \"#D97706\", // [6] -> shade 600\n \"#92400E\", // [7] -> shade 800\n \"#78350F\", // [8] -> shade 900\n \"#451A03\", // [9] -> shade 950\n \"#F59E0B\", // [10] -> amber base\n];\nexports.limeColors = [\n \"#f7fee7\", // [0] -> shade 50\n \"#ecfccb\", // [1] -> shade 100\n \"#d9f99d\", // [2] -> shade 200\n \"#bef264\", // [3] -> shade 300\n \"#a3e635\", // [4] -> shade 400\n \"#4d7c0f\", // [5] -> shade 600\n \"#3f6212\", // [6] -> shade 700\n \"#365314\", // [7] -> shade 800\n \"#1a2e05\", // [8] -> shade 900\n \"#0f1903\", // [9] -> shade 950\n \"#84CC16\" // [10] -> lime base\n];\nexports.emeraldColors = [\n \"#ecfdf5\", // [0] -> shade 50\n \"#d1fae5\", // [1] -> shade 100\n \"#a7f3d0\", // [2] -> shade 200\n \"#6ee7b7\", // [3] -> shade 300\n \"#34d399\", // [4] -> shade 400\n \"#059669\", // [5] -> shade 600\n \"#047857\", // [6] -> shade 700\n \"#065f46\", // [7] -> shade 800\n \"#064e3b\", // [8] -> shade 900\n \"#022c22\", // [9] -> shade 950\n \"#10B981\" // [10] -> emerald base\n];\nexports.tealColors = [\n \"#f0fdfa\", // [0] -> shade 50\n \"#ccfbf1\", // [1] -> shade 100\n \"#99f6e4\", // [2] -> shade 200\n \"#5eead4\", // [3] -> shade 300\n \"#2dd4bf\", // [4] -> shade 400\n \"#0d9488\", // [5] -> shade 600\n \"#0f766e\", // [6] -> shade 700\n \"#115e59\", // [7] -> shade 800\n \"#134e4a\", // [8] -> shade 900\n \"#042f2e\", // [9] -> shade 950\n \"#14B8A6\" // [10] -> teal base\n];\nexports.cyanColors = [\n \"#ecfeff\", // [0] -> shade 50\n \"#cffafe\", // [1] -> shade 100\n \"#a5f3fc\", // [2] -> shade 200\n \"#67e8f9\", // [3] -> shade 300\n \"#22d3ee\", // [4] -> shade 400\n \"#0891b2\", // [5] -> shade 600\n \"#0e7490\", // [6] -> shade 700\n \"#155e75\", // [7] -> shade 800\n \"#164e63\", // [8] -> shade 900\n \"#083344\", // [9] -> shade 950\n \"#06B6D4\" // [10] -> cyan base\n];\nexports.skyColors = [\n \"#f0f9ff\", // [0] -> shade 50\n \"#e0f2fe\", // [1] -> shade 100\n \"#bae6fd\", // [2] -> shade 200\n \"#7dd3fc\", // [3] -> shade 300\n \"#38bdf8\", // [4] -> shade 400\n \"#0284c7\", // [5] -> shade 600\n \"#0369a1\", // [6] -> shade 700\n \"#075985\", // [7] -> shade 800\n \"#0c4a6e\", // [8] -> shade 900\n \"#082f49\", // [9] -> shade 950\n \"#0EA5E9\" // [10] -> sky base\n];\nexports.indigoColors = [\n \"#eef2ff\", // [0] -> shade 50\n \"#e0e7ff\", // [1] -> shade 100\n \"#c7d2fe\", // [2] -> shade 200\n \"#a5b4fc\", // [3] -> shade 300\n \"#818cf8\", // [4] -> shade 400\n \"#4f46e5\", // [5] -> shade 600\n \"#4338ca\", // [6] -> shade 700\n \"#3730a3\", // [7] -> shade 800\n \"#312e81\", // [8] -> shade 900\n \"#1e1b4b\", // [9] -> shade 950\n \"#6366F1\" // [10] -> indigo base\n];\nexports.purpleColors = [\n \"#faf5ff\", // [0] -> shade 50\n \"#f3e8ff\", // [1] -> shade 100\n \"#e9d5ff\", // [2] -> shade 200\n \"#d8b4fe\", // [3] -> shade 300\n \"#c084fc\", // [4] -> shade 400\n \"#9333ea\", // [5] -> shade 600\n \"#7e22ce\", // [6] -> shade 700\n \"#6b21a8\", // [7] -> shade 800\n \"#581c87\", // [8] -> shade 900\n \"#2e1065\", // [9] -> shade 950\n \"#A855F7\" // [10] -> purple base\n];\nexports.fuchsiaColors = [\n \"#fdf4ff\", // [0] -> shade 50\n \"#fae8ff\", // [1] -> shade 100\n \"#f5d0fe\", // [2] -> shade 200\n \"#f0abfc\", // [3] -> shade 300\n \"#e879f9\", // [4] -> shade 400\n \"#c026d3\", // [5] -> shade 600\n \"#a21caf\", // [6] -> shade 700\n \"#86198f\", // [7] -> shade 800\n \"#701a75\", // [8] -> shade 900\n \"#4a044e\", // [9] -> shade 950\n \"#D946EF\" // [10] -> fuchsia base\n];\nexports.pinkColors = [\n \"#fdf2f8\", // [0] -> shade 50\n \"#fce7f3\", // [1] -> shade 100\n \"#fbcfe8\", // [2] -> shade 200\n \"#f9a8d4\", // [3] -> shade 300\n \"#f472b6\", // [4] -> shade 400\n \"#db2777\", // [5] -> shade 600\n \"#be185d\", // [6] -> shade 700\n \"#9d174d\", // [7] -> shade 800\n \"#831843\", // [8] -> shade 900\n \"#500724\", // [9] -> shade 950\n \"#EC4899\" // [10] -> pink base\n];\n// export const SHADCN_DEFAULT_COLORS = [\n// { id: \"zinc\", name: \"Zinc\", color: \"#71717A\", primaryPalette: zincColors, primaryShade: { light: 8, dark: 0 }, secondary: \"zinc\", secondaryPalette: zincColors },\n// { id: \"slate\", name: \"Slate\", color: \"#64748B\", primaryPalette: slateColors, primaryShade: { light: 8, dark: 0 }, secondary: \"slate\", secondaryPalette: slateColors },\n// { id: \"stone\", name: \"Stone\", color: \"#78716C\", primaryPalette: stoneColors, primaryShade: { light: 8, dark: 0 }, secondary: \"stone\", secondaryPalette: stoneColors},\n// { id: \"gray\", name: \"Gray\", color: \"#6B7280\", primaryPalette: grayColors, primaryShade: { light: 8, dark: 0 }, secondary: \"gray\", secondaryPalette: grayColors },\n// { id: \"neutral\", name: \"Neutral\", color: \"#737373\", primaryPalette: neutralColors, primaryShade: { light: 8, dark: 0 }, secondary: \"neutral\", secondaryPalette: neutralColors },\n// { id: \"red\", name: \"Red\", color: \"#EF4444\", primaryPalette: redColors, primaryShade: { light: 5, dark: 5 }, secondary: \"neutral\", secondaryPalette: neutralColors },\n// { id: \"rose\", name: \"Rose\", color: \"#F43F5E\", primaryPalette: roseColors, primaryShade: { light: 5, dark: 5 }, secondary: \"stone\", secondaryPalette: stoneColors },\n// { id: \"orange\", name: \"Orange\", color: \"#F97316\", primaryPalette: orangeColors, primaryShade: { light: 5, dark: 6 }, secondary: \"stone\", secondaryPalette: stoneColors },\n// { id: \"green\", name: \"Green\", color: \"#10B981\", primaryPalette: greenColors, primaryShade: { light: 6, dark: 5 }, secondary: 'stone', secondaryPalette: stoneColors },\n// { id: \"blue\", name: \"Blue\", color: \"#3B82F6\", primaryPalette: blueColors, primaryShade: { light: 6, dark: 5 }, secondary: \"slate\", secondaryPalette: slateColors },\n// { id: \"yellow\", name: \"Yellow\", color: \"#F59E0B\", primaryPalette: yellowColors, primaryShade: { light: 4, dark: 4 }, secondary: \"stone\", secondaryPalette: stoneColors },\n// { id: \"violet\", name: \"Violet\", color: \"#8B5CF6\", primaryPalette: violetColors, primaryShade: { light: 5, dark: 6 }, secondary: \"gray\", secondaryPalette: grayColors },\n// ];\nexports.MANTINE_DEFAULT_COLORS = [\n { id: \"blue\", name: \"Blue\", color: \"#3B82F6\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"gray\", name: \"Gray\", color: \"#6B7280\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"red\", name: \"Red\", color: \"#EF4444\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"pink\", name: \"Pink\", color: \"#F43F5E\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"grape\", name: \"Grape\", color: \"#8B5CF6\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"violet\", name: \"Violet\", color: \"#8B5CF6\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"indigo\", name: \"Indigo\", color: \"#6366F1\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"cyan\", name: \"Cyan\", color: \"#22D3EE\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"teal\", name: \"Teal\", color: \"#14B8A6\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"green\", name: \"Green\", color: \"#10B981\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"lime\", name: \"Lime\", color: \"#65A30D\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"yellow\", name: \"Yellow\", color: \"#F59E0B\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"orange\", name: \"Orange\", color: \"#F97316\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n];\nexports.SHADCN_DEFAULT_COLORS = [\n { id: \"zinc\", name: \"Zinc\", color: \"#71717A\", primaryPalette: exports.zincColors, primaryShade: { light: 8, dark: 0 }, secondary: \"zinc\", secondaryPalette: exports.zincColors },\n { id: \"slate\", name: \"Slate\", color: \"#64748B\", primaryPalette: exports.slateColors, primaryShade: { light: 8, dark: 0 }, secondary: \"slate\", secondaryPalette: exports.slateColors },\n { id: \"gray\", name: \"Gray\", color: \"#6B7280\", primaryPalette: exports.grayColors, primaryShade: { light: 8, dark: 0 }, secondary: \"gray\", secondaryPalette: exports.grayColors },\n { id: \"neutral\", name: \"Neutral\", color: \"#737373\", primaryPalette: exports.neutralColors, primaryShade: { light: 8, dark: 0 }, secondary: \"neutral\", secondaryPalette: exports.neutralColors },\n { id: \"stone\", name: \"Stone\", color: \"#78716C\", primaryPalette: exports.stoneColors, primaryShade: { light: 8, dark: 0 }, secondary: \"stone\", secondaryPalette: exports.stoneColors },\n { id: \"red\", name: \"Red\", color: \"#EF4444\", primaryPalette: exports.redColors, primaryShade: { light: 5, dark: 5 }, secondary: \"neutral\", secondaryPalette: exports.neutralColors },\n { id: \"rose\", name: \"Rose\", color: \"#F43F5E\", primaryPalette: exports.roseColors, primaryShade: { light: 5, dark: 5 }, secondary: \"stone\", secondaryPalette: exports.stoneColors },\n { id: \"orange\", name: \"Orange\", color: \"#F97316\", primaryPalette: exports.orangeColors, primaryShade: { light: 5, dark: 6 }, secondary: \"stone\", secondaryPalette: exports.stoneColors },\n { id: \"amber\", name: \"Amber\", color: \"#F59E0B\", primaryPalette: exports.amberColors, primaryShade: { light: 5, dark: 5 }, secondary: \"stone\", secondaryPalette: exports.stoneColors },\n { id: \"yellow\", name: \"Yellow\", color: \"#EAB308\", primaryPalette: exports.yellowColors, primaryShade: { light: 4, dark: 4 }, secondary: \"stone\", secondaryPalette: exports.stoneColors },\n { id: \"lime\", name: \"Lime\", color: \"#84CC16\", primaryPalette: exports.limeColors, primaryShade: { light: 5, dark: 4 }, secondary: \"stone\", secondaryPalette: exports.stoneColors },\n { id: \"green\", name: \"Green\", color: \"#22C55E\", primaryPalette: exports.greenColors, primaryShade: { light: 6, dark: 5 }, secondary: \"stone\", secondaryPalette: exports.stoneColors },\n { id: \"emerald\", name: \"Emerald\", color: \"#10B981\", primaryPalette: exports.emeraldColors, primaryShade: { light: 5, dark: 5 }, secondary: \"stone\", secondaryPalette: exports.stoneColors },\n { id: \"teal\", name: \"Teal\", color: \"#14B8A6\", primaryPalette: exports.tealColors, primaryShade: { light: 5, dark: 4 }, secondary: \"slate\", secondaryPalette: exports.slateColors },\n { id: \"cyan\", name: \"Cyan\", color: \"#06B6D4\", primaryPalette: exports.cyanColors, primaryShade: { light: 5, dark: 4 }, secondary: \"slate\", secondaryPalette: exports.slateColors },\n { id: \"sky\", name: \"Sky\", color: \"#0EA5E9\", primaryPalette: exports.skyColors, primaryShade: { light: 5, dark: 4 }, secondary: \"slate\", secondaryPalette: exports.slateColors },\n { id: \"blue\", name: \"Blue\", color: \"#3B82F6\", primaryPalette: exports.blueColors, primaryShade: { light: 6, dark: 5 }, secondary: \"slate\", secondaryPalette: exports.slateColors },\n { id: \"indigo\", name: \"Indigo\", color: \"#6366F1\", primaryPalette: exports.indigoColors, primaryShade: { light: 5, dark: 6 }, secondary: \"gray\", secondaryPalette: exports.grayColors },\n { id: \"violet\", name: \"Violet\", color: \"#8B5CF6\", primaryPalette: exports.violetColors, primaryShade: { light: 5, dark: 6 }, secondary: \"gray\", secondaryPalette: exports.grayColors },\n { id: \"purple\", name: \"Purple\", color: \"#A855F7\", primaryPalette: exports.purpleColors, primaryShade: { light: 5, dark: 6 }, secondary: \"gray\", secondaryPalette: exports.grayColors },\n { id: \"fuchsia\", name: \"Fuchsia\", color: \"#D946EF\", primaryPalette: exports.fuchsiaColors, primaryShade: { light: 5, dark: 7 }, secondary: \"gray\", secondaryPalette: exports.grayColors },\n { id: \"pink\", name: \"Pink\", color: \"#EC4899\", primaryPalette: exports.pinkColors, primaryShade: { light: 5, dark: 6 }, secondary: \"gray\", secondaryPalette: exports.grayColors },\n];\n" }, { "path": "js/generated/colors.js", "content": "\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.SHADCN_DEFAULT_COLORS = exports.MANTINE_DEFAULT_COLORS = exports.pinkColors = exports.fuchsiaColors = exports.purpleColors = exports.indigoColors = exports.skyColors = exports.cyanColors = exports.tealColors = exports.emeraldColors = exports.limeColors = exports.amberColors = exports.violetColors = exports.yellowColors = exports.blueColors = exports.greenColors = exports.orangeColors = exports.roseColors = exports.redColors = exports.neutralColors = exports.grayColors = exports.stoneColors = exports.slateColors = exports.zincColors = void 0;\n// Note: 500 shade in tailwind color is not included in the color palette except for orange, green and blue\n// Color shades in tailwind are 50, 100, 200, 300, 400, 600, 700, 800, 900, 950\nexports.zincColors = [\n \"#fafafa\", // [0] -> shade 50\n \"#f4f4f5\", // [1] -> shade 100\n \"#e4e4e7\", // [2] -> shade 200\n \"#d4d4d8\", // [3] -> shade 300\n \"#a1a1aa\", // [4] -> shade 400\n \"#52525b\", // [5] -> shade 600\n \"#3f3f46\", // [6] -> shade 700\n \"#27272a\", // [7] -> shade 800\n \"#18181b\", // [8] -> shade 900\n \"#09090b\", // [9] -> shade 950\n \"#71717A\" // [10] -> zinc base\n];\nexports.slateColors = [\n \"#f8fafc\", // [0] -> shade 50\n \"#f1f5f9\", // [1] -> shade 100\n \"#e2e8f0\", // [2] -> shade 200\n \"#cbd5e1\", // [3] -> shade 300\n \"#94a3b8\", // [4] -> shade 400\n \"#475569\", // [5] -> shade 600\n \"#334155\", // [6] -> shade 700\n \"#1e293b\", // [7] -> shade 800\n \"#0f172a\", // [8] -> shade 900\n \"#020817\", // [9] -> shade 950 (original tailwind color was #020617)\n \"#64748B\" // [10] -> slate base\n];\nexports.stoneColors = [\n \"#fafaf9\", // [0] -> shade 50\n \"#f5f5f4\", // [1] -> shade 100\n \"#e7e5e4\", // [2] -> shade 200\n \"#d6d3d1\", // [3] -> shade 300\n \"#a8a29e\", // [4] -> shade 400\n \"#57534e\", // [5] -> shade 600\n \"#44403c\", // [6] -> shade 700\n \"#292524\", // [7] -> shade 800\n \"#1c1917\", // [8] -> shade 900\n \"#0c0a09\", // [9] -> shade 950\n \"#78716C\" // [10] -> stone base\n];\nexports.grayColors = [\n \"#f9fafb\", // [0] -> shade 50\n \"#f3f4f6\", // [1] -> shade 100\n \"#e5e7eb\", // [2] -> shade 200\n \"#d1d5db\", // [3] -> shade 300\n \"#9ca3af\", // [4] -> shade 400\n \"#4b5563\", // [5] -> shade 600\n \"#374151\", // [6] -> shade 700\n \"#1f2937\", // [7] -> shade 800\n \"#111827\", // [8] -> shade 900\n \"#030712\", // [9] -> shade 950\n \"#6B7280\" // [10] -> gray base\n];\nexports.neutralColors = [\n \"#fafafa\", // [0] -> shade 50\n \"#f5f5f5\", // [1] -> shade 100\n \"#e5e5e5\", // [2] -> shade 200\n \"#d4d4d4\", // [3] -> shade 300\n \"#a3a3a3\", // [4] -> shade 400\n \"#525252\", // [5] -> shade 600\n \"#404040\", // [6] -> shade 700\n \"#262626\", // [7] -> shade 800\n \"#171717\", // [8] -> shade 900\n \"#0a0a0a\", // [9] -> shade 950\n \"#737373\" // [10] -> neutral base\n];\nexports.redColors = [\n \"#FEF2F2\", // [0] -> shade 50\n \"#FEE2E2\", // [1] -> shade 100\n \"#FECACA\", // [2] -> shade 200\n \"#FCA5A5\", // [3] -> shade 300\n \"#F87171\", // [4] -> shade 400\n \"#DC2626\", // [5] -> shade 600\n \"#B91C1C\", // [6] -> shade 700\n \"#991B1B\", // [7] -> shade 800\n \"#7F1D1D\", // [8] -> shade 900\n \"#450A0A\", // [9] -> shade 950\n \"#EF4444\" // [10] -> red base\n];\nexports.roseColors = [\n \"#fff1f2\", // [0] -> shade 50\n \"#ffe4e6\", // [1] -> shade 100\n \"#fecdd3\", // [2] -> shade 200\n \"#fda4af\", // [3] -> shade 300\n \"#fb7185\", // [4] -> shade 400\n \"#e11d48\", // [5] -> shade 600\n \"#be123c\", // [6] -> shade 700\n \"#9f1239\", // [7] -> shade 800\n \"#881337\", // [8] -> shade 900\n \"#4c0519\", // [9] -> shade 950\n \"#F43F5E\" // [10] -> base color as rose[10]\n];\nexports.orangeColors = [\n \"#fff7ed\", // [0] -> shade 50\n \"#ffedd5\", // [1] -> shade 100\n \"#fed7aa\", // [2] -> shade 200\n \"#fdba74\", // [3] -> shade 300\n \"#fb923c\", // [4] -> shade 400\n \"#f97316\", // [5] -> shade 500 \n \"#ea580c\", // [6] -> shade 600\n \"#9a3412\", // [7] -> shade 800\n \"#7c2d12\", // [8] -> shade 900\n \"#431407\", // [9] -> shade 950\n \"#F97316\", // [10] -> orange base\n];\nexports.greenColors = [\n \"#F0FDF4\", // [0] -> shade 50\n \"#DCFCE7\", // [1] -> shade 100\n \"#BBF7D0\", // [2] -> shade 200\n \"#86EFAC\", // [3] -> shade 300\n \"#4ADE80\", // [4] -> shade 400\n \"#22c55e\", // [5] -> shade 500\n \"#16A34A\", // [6] -> shade 600\n \"#166534\", // [7] -> shade 800\n \"#14532D\", // [8] -> shade 900\n \"#052E16\", // [9] -> shade 950\n \"#10B981\", // [10] -> green base\n];\nexports.blueColors = [\n \"#eff6ff\", // [0] -> shade 50\n \"#dbeafe\", // [1] -> shade 100\n \"#bfdbfe\", // [2] -> shade 200\n \"#93c5fd\", // [3] -> shade 300\n \"#60a5fa\", // [4] -> shade 400\n \"#3b82f6\", // [5] -> shade 500\n \"#2563eb\", // [6] -> shade 600\n \"#1e40af\", // [7] -> shade 800\n \"#1e3a8a\", // [8] -> shade 900\n \"#172554\", // [9] -> shade 950\n \"#3B82F6\", // [10] -> blue base\n];\nexports.yellowColors = [\n \"#fefce8\", // [0] -> shade 50\n \"#fef9c3\", // [1] -> shade 100\n \"#fef08a\", // [2] -> shade 200\n \"#fde047\", // [3] -> shade 300\n \"#facc15\", // [4] -> shade 400\n \"#ca8a04\", // [5] -> shade 500\n \"#a16207\", // [6] -> shade 600\n \"#854d0e\", // [7] -> shade 700\n \"#713f12\", // [8] -> shade 800\n \"#3f2c06\", // [9] -> shade 950\n \"#F59E0B\", // [10] -> yellow base\n];\nexports.violetColors = [\n \"#f5f3ff\", // [0] -> shade 50\n \"#ede9fe\", // [1] -> shade 100\n \"#ddd6fe\", // [2] -> shade 200\n \"#c4b5fd\", // [3] -> shade 300\n \"#a78bfa\", // [4] -> shade 400\n \"#7c3aed\", // [5] -> shade 500\n \"#6d28d9\", // [6] -> shade 600\n \"#5b21b6\", // [7] -> shade 700\n \"#4c1d95\", // [8] -> shade 800\n \"#1e1b4b\", // [9] -> shade 950\n \"#8B5CF6\", // [10] -> violet base\n];\nexports.amberColors = [\n \"#FFFBEB\", // [0] -> shade 50\n \"#FEF3C7\", // [1] -> shade 100\n \"#FDE68A\", // [2] -> shade 200\n \"#FCD34D\", // [3] -> shade 300\n \"#FBBF24\", // [4] -> shade 400\n \"#f59e0b\", // [5] -> shade 500\n \"#D97706\", // [6] -> shade 600\n \"#92400E\", // [7] -> shade 800\n \"#78350F\", // [8] -> shade 900\n \"#451A03\", // [9] -> shade 950\n \"#F59E0B\", // [10] -> amber base\n];\nexports.limeColors = [\n \"#f7fee7\", // [0] -> shade 50\n \"#ecfccb\", // [1] -> shade 100\n \"#d9f99d\", // [2] -> shade 200\n \"#bef264\", // [3] -> shade 300\n \"#a3e635\", // [4] -> shade 400\n \"#4d7c0f\", // [5] -> shade 600\n \"#3f6212\", // [6] -> shade 700\n \"#365314\", // [7] -> shade 800\n \"#1a2e05\", // [8] -> shade 900\n \"#0f1903\", // [9] -> shade 950\n \"#84CC16\" // [10] -> lime base\n];\nexports.emeraldColors = [\n \"#ecfdf5\", // [0] -> shade 50\n \"#d1fae5\", // [1] -> shade 100\n \"#a7f3d0\", // [2] -> shade 200\n \"#6ee7b7\", // [3] -> shade 300\n \"#34d399\", // [4] -> shade 400\n \"#059669\", // [5] -> shade 600\n \"#047857\", // [6] -> shade 700\n \"#065f46\", // [7] -> shade 800\n \"#064e3b\", // [8] -> shade 900\n \"#022c22\", // [9] -> shade 950\n \"#10B981\" // [10] -> emerald base\n];\nexports.tealColors = [\n \"#f0fdfa\", // [0] -> shade 50\n \"#ccfbf1\", // [1] -> shade 100\n \"#99f6e4\", // [2] -> shade 200\n \"#5eead4\", // [3] -> shade 300\n \"#2dd4bf\", // [4] -> shade 400\n \"#0d9488\", // [5] -> shade 600\n \"#0f766e\", // [6] -> shade 700\n \"#115e59\", // [7] -> shade 800\n \"#134e4a\", // [8] -> shade 900\n \"#042f2e\", // [9] -> shade 950\n \"#14B8A6\" // [10] -> teal base\n];\nexports.cyanColors = [\n \"#ecfeff\", // [0] -> shade 50\n \"#cffafe\", // [1] -> shade 100\n \"#a5f3fc\", // [2] -> shade 200\n \"#67e8f9\", // [3] -> shade 300\n \"#22d3ee\", // [4] -> shade 400\n \"#0891b2\", // [5] -> shade 600\n \"#0e7490\", // [6] -> shade 700\n \"#155e75\", // [7] -> shade 800\n \"#164e63\", // [8] -> shade 900\n \"#083344\", // [9] -> shade 950\n \"#06B6D4\" // [10] -> cyan base\n];\nexports.skyColors = [\n \"#f0f9ff\", // [0] -> shade 50\n \"#e0f2fe\", // [1] -> shade 100\n \"#bae6fd\", // [2] -> shade 200\n \"#7dd3fc\", // [3] -> shade 300\n \"#38bdf8\", // [4] -> shade 400\n \"#0284c7\", // [5] -> shade 600\n \"#0369a1\", // [6] -> shade 700\n \"#075985\", // [7] -> shade 800\n \"#0c4a6e\", // [8] -> shade 900\n \"#082f49\", // [9] -> shade 950\n \"#0EA5E9\" // [10] -> sky base\n];\nexports.indigoColors = [\n \"#eef2ff\", // [0] -> shade 50\n \"#e0e7ff\", // [1] -> shade 100\n \"#c7d2fe\", // [2] -> shade 200\n \"#a5b4fc\", // [3] -> shade 300\n \"#818cf8\", // [4] -> shade 400\n \"#4f46e5\", // [5] -> shade 600\n \"#4338ca\", // [6] -> shade 700\n \"#3730a3\", // [7] -> shade 800\n \"#312e81\", // [8] -> shade 900\n \"#1e1b4b\", // [9] -> shade 950\n \"#6366F1\" // [10] -> indigo base\n];\nexports.purpleColors = [\n \"#faf5ff\", // [0] -> shade 50\n \"#f3e8ff\", // [1] -> shade 100\n \"#e9d5ff\", // [2] -> shade 200\n \"#d8b4fe\", // [3] -> shade 300\n \"#c084fc\", // [4] -> shade 400\n \"#9333ea\", // [5] -> shade 600\n \"#7e22ce\", // [6] -> shade 700\n \"#6b21a8\", // [7] -> shade 800\n \"#581c87\", // [8] -> shade 900\n \"#2e1065\", // [9] -> shade 950\n \"#A855F7\" // [10] -> purple base\n];\nexports.fuchsiaColors = [\n \"#fdf4ff\", // [0] -> shade 50\n \"#fae8ff\", // [1] -> shade 100\n \"#f5d0fe\", // [2] -> shade 200\n \"#f0abfc\", // [3] -> shade 300\n \"#e879f9\", // [4] -> shade 400\n \"#c026d3\", // [5] -> shade 600\n \"#a21caf\", // [6] -> shade 700\n \"#86198f\", // [7] -> shade 800\n \"#701a75\", // [8] -> shade 900\n \"#4a044e\", // [9] -> shade 950\n \"#D946EF\" // [10] -> fuchsia base\n];\nexports.pinkColors = [\n \"#fdf2f8\", // [0] -> shade 50\n \"#fce7f3\", // [1] -> shade 100\n \"#fbcfe8\", // [2] -> shade 200\n \"#f9a8d4\", // [3] -> shade 300\n \"#f472b6\", // [4] -> shade 400\n \"#db2777\", // [5] -> shade 600\n \"#be185d\", // [6] -> shade 700\n \"#9d174d\", // [7] -> shade 800\n \"#831843\", // [8] -> shade 900\n \"#500724\", // [9] -> shade 950\n \"#EC4899\" // [10] -> pink base\n];\n// export const SHADCN_DEFAULT_COLORS = [\n// { id: \"zinc\", name: \"Zinc\", color: \"#71717A\", primaryPalette: zincColors, primaryShade: { light: 8, dark: 0 }, secondary: \"zinc\", secondaryPalette: zincColors },\n// { id: \"slate\", name: \"Slate\", color: \"#64748B\", primaryPalette: slateColors, primaryShade: { light: 8, dark: 0 }, secondary: \"slate\", secondaryPalette: slateColors },\n// { id: \"stone\", name: \"Stone\", color: \"#78716C\", primaryPalette: stoneColors, primaryShade: { light: 8, dark: 0 }, secondary: \"stone\", secondaryPalette: stoneColors},\n// { id: \"gray\", name: \"Gray\", color: \"#6B7280\", primaryPalette: grayColors, primaryShade: { light: 8, dark: 0 }, secondary: \"gray\", secondaryPalette: grayColors },\n// { id: \"neutral\", name: \"Neutral\", color: \"#737373\", primaryPalette: neutralColors, primaryShade: { light: 8, dark: 0 }, secondary: \"neutral\", secondaryPalette: neutralColors },\n// { id: \"red\", name: \"Red\", color: \"#EF4444\", primaryPalette: redColors, primaryShade: { light: 5, dark: 5 }, secondary: \"neutral\", secondaryPalette: neutralColors },\n// { id: \"rose\", name: \"Rose\", color: \"#F43F5E\", primaryPalette: roseColors, primaryShade: { light: 5, dark: 5 }, secondary: \"stone\", secondaryPalette: stoneColors },\n// { id: \"orange\", name: \"Orange\", color: \"#F97316\", primaryPalette: orangeColors, primaryShade: { light: 5, dark: 6 }, secondary: \"stone\", secondaryPalette: stoneColors },\n// { id: \"green\", name: \"Green\", color: \"#10B981\", primaryPalette: greenColors, primaryShade: { light: 6, dark: 5 }, secondary: 'stone', secondaryPalette: stoneColors },\n// { id: \"blue\", name: \"Blue\", color: \"#3B82F6\", primaryPalette: blueColors, primaryShade: { light: 6, dark: 5 }, secondary: \"slate\", secondaryPalette: slateColors },\n// { id: \"yellow\", name: \"Yellow\", color: \"#F59E0B\", primaryPalette: yellowColors, primaryShade: { light: 4, dark: 4 }, secondary: \"stone\", secondaryPalette: stoneColors },\n// { id: \"violet\", name: \"Violet\", color: \"#8B5CF6\", primaryPalette: violetColors, primaryShade: { light: 5, dark: 6 }, secondary: \"gray\", secondaryPalette: grayColors },\n// ];\nexports.MANTINE_DEFAULT_COLORS = [\n { id: \"blue\", name: \"Blue\", color: \"#3B82F6\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"gray\", name: \"Gray\", color: \"#6B7280\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"red\", name: \"Red\", color: \"#EF4444\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"pink\", name: \"Pink\", color: \"#F43F5E\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"grape\", name: \"Grape\", color: \"#8B5CF6\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"violet\", name: \"Violet\", color: \"#8B5CF6\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"indigo\", name: \"Indigo\", color: \"#6366F1\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"cyan\", name: \"Cyan\", color: \"#22D3EE\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"teal\", name: \"Teal\", color: \"#14B8A6\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"green\", name: \"Green\", color: \"#10B981\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"lime\", name: \"Lime\", color: \"#65A30D\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"yellow\", name: \"Yellow\", color: \"#F59E0B\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n { id: \"orange\", name: \"Orange\", color: \"#F97316\", primaryPalette: [], primaryShade: { light: 6, dark: 6 } },\n];\nexports.SHADCN_DEFAULT_COLORS = [\n { id: \"zinc\", name: \"Zinc\", color: \"#71717A\", primaryPalette: exports.zincColors, primaryShade: { light: 8, dark: 0 }, secondary: \"zinc\", secondaryPalette: exports.zincColors },\n { id: \"slate\", name: \"Slate\", color: \"#64748B\", primaryPalette: exports.slateColors, primaryShade: { light: 8, dark: 0 }, secondary: \"slate\", secondaryPalette: exports.slateColors },\n { id: \"gray\", name: \"Gray\", color: \"#6B7280\", primaryPalette: exports.grayColors, primaryShade: { light: 8, dark: 0 }, secondary: \"gray\", secondaryPalette: exports.grayColors },\n { id: \"neutral\", name: \"Neutral\", color: \"#737373\", primaryPalette: exports.neutralColors, primaryShade: { light: 8, dark: 0 }, secondary: \"neutral\", secondaryPalette: exports.neutralColors },\n { id: \"stone\", name: \"Stone\", color: \"#78716C\", primaryPalette: exports.stoneColors, primaryShade: { light: 8, dark: 0 }, secondary: \"stone\", secondaryPalette: exports.stoneColors },\n { id: \"red\", name: \"Red\", color: \"#EF4444\", primaryPalette: exports.redColors, primaryShade: { light: 5, dark: 5 }, secondary: \"neutral\", secondaryPalette: exports.neutralColors },\n { id: \"rose\", name: \"Rose\", color: \"#F43F5E\", primaryPalette: exports.roseColors, primaryShade: { light: 5, dark: 5 }, secondary: \"stone\", secondaryPalette: exports.stoneColors },\n { id: \"orange\", name: \"Orange\", color: \"#F97316\", primaryPalette: exports.orangeColors, primaryShade: { light: 5, dark: 6 }, secondary: \"stone\", secondaryPalette: exports.stoneColors },\n { id: \"amber\", name: \"Amber\", color: \"#F59E0B\", primaryPalette: exports.amberColors, primaryShade: { light: 5, dark: 5 }, secondary: \"stone\", secondaryPalette: exports.stoneColors },\n { id: \"yellow\", name: \"Yellow\", color: \"#EAB308\", primaryPalette: exports.yellowColors, primaryShade: { light: 4, dark: 4 }, secondary: \"stone\", secondaryPalette: exports.stoneColors },\n { id: \"lime\", name: \"Lime\", color: \"#84CC16\", primaryPalette: exports.limeColors, primaryShade: { light: 5, dark: 4 }, secondary: \"stone\", secondaryPalette: exports.stoneColors },\n { id: \"green\", name: \"Green\", color: \"#22C55E\", primaryPalette: exports.greenColors, primaryShade: { light: 6, dark: 5 }, secondary: \"stone\", secondaryPalette: exports.stoneColors },\n { id: \"emerald\", name: \"Emerald\", color: \"#10B981\", primaryPalette: exports.emeraldColors, primaryShade: { light: 5, dark: 5 }, secondary: \"stone\", secondaryPalette: exports.stoneColors },\n { id: \"teal\", name: \"Teal\", color: \"#14B8A6\", primaryPalette: exports.tealColors, primaryShade: { light: 5, dark: 4 }, secondary: \"slate\", secondaryPalette: exports.slateColors },\n { id: \"cyan\", name: \"Cyan\", color: \"#06B6D4\", primaryPalette: exports.cyanColors, primaryShade: { light: 5, dark: 4 }, secondary: \"slate\", secondaryPalette: exports.slateColors },\n { id: \"sky\", name: \"Sky\", color: \"#0EA5E9\", primaryPalette: exports.skyColors, primaryShade: { light: 5, dark: 4 }, secondary: \"slate\", secondaryPalette: exports.slateColors },\n { id: \"blue\", name: \"Blue\", color: \"#3B82F6\", primaryPalette: exports.blueColors, primaryShade: { light: 6, dark: 5 }, secondary: \"slate\", secondaryPalette: exports.slateColors },\n { id: \"indigo\", name: \"Indigo\", color: \"#6366F1\", primaryPalette: exports.indigoColors, primaryShade: { light: 5, dark: 6 }, secondary: \"gray\", secondaryPalette: exports.grayColors },\n { id: \"violet\", name: \"Violet\", color: \"#8B5CF6\", primaryPalette: exports.violetColors, primaryShade: { light: 5, dark: 6 }, secondary: \"gray\", secondaryPalette: exports.grayColors },\n { id: \"purple\", name: \"Purple\", color: \"#A855F7\", primaryPalette: exports.purpleColors, primaryShade: { light: 5, dark: 6 }, secondary: \"gray\", secondaryPalette: exports.grayColors },\n { id: \"fuchsia\", name: \"Fuchsia\", color: \"#D946EF\", primaryPalette: exports.fuchsiaColors, primaryShade: { light: 5, dark: 7 }, secondary: \"gray\", secondaryPalette: exports.grayColors },\n { id: \"pink\", name: \"Pink\", color: \"#EC4899\", primaryPalette: exports.pinkColors, primaryShade: { light: 5, dark: 6 }, secondary: \"gray\", secondaryPalette: exports.grayColors },\n];\n" }, { "path": "js/generated/theme-functions.cjs", "content": "\"use strict\";\nObject.defineProperty(exports, \"__esModule\", { value: true });\nexports.getShadcnInputBg = exports.getShadcnCardClassname = exports.getDefaultBorderColorNight = exports.getDefaultBorderColorDay = exports.getSecondaryLightColorNight = exports.getSecondaryLightColorDay = exports.getPrimaryContrastColorNight = exports.getPrimaryContrastColorDay = void 0;\nexports.generateShadcnCSSFilledColorVariables = generateShadcnCSSFilledColorVariables;\nexports.getPrimaryColorLight = getPrimaryColorLight;\nexports.getPrimaryColorLightHover = getPrimaryColorLightHover;\nexports.getPrimaryColorLightColor = getPrimaryColorLightColor;\nexports.generateShadcnCSSLightColorVariables = generateShadcnCSSLightColorVariables;\nexports.generateShadcnCSSOutlineColorVariables = generateShadcnCSSOutlineColorVariables;\nexports.generateShadcnCSSContrastColorVariables = generateShadcnCSSContrastColorVariables;\nvar core_1 = require(\"@mantine/core\");\nvar colors_1 = require(\"./colors.cjs\");\nvar getPrimaryContrastColorDay = function (color) {\n var colorObj = colors_1.SHADCN_DEFAULT_COLORS.find(function (c) { return c.id === color; });\n if (color === 'zinc' ||\n color === 'slate' ||\n color === 'stone' ||\n color === 'gray' ||\n color === 'neutral' ||\n color === 'red' ||\n color === 'rose') {\n return \"var(--mantine-color-\".concat(colorObj === null || colorObj === void 0 ? void 0 : colorObj.id, \"-0)\");\n }\n else if (color === 'orange' || color === 'blue' || color === 'violet') {\n return \"var(--mantine-color-\".concat(colorObj === null || colorObj === void 0 ? void 0 : colorObj.secondary, \"-0)\");\n }\n else if (color === 'green') {\n return \"var(--mantine-color-rose-0)\";\n }\n else if (color === 'yellow') {\n return '#422006';\n }\n else {\n return \"var(--mantine-color-\".concat(colorObj === null || colorObj === void 0 ? void 0 : colorObj.id, \"-0)\");\n }\n};\nexports.getPrimaryContrastColorDay = getPrimaryContrastColorDay;\nvar getPrimaryContrastColorNight = function (color) {\n var colorObj = colors_1.SHADCN_DEFAULT_COLORS.find(function (c) { return c.id === color; });\n if (color === 'zinc' ||\n color === ' slate' ||\n color === 'stone' ||\n color === 'gray' ||\n color === 'neutral') {\n return \"var(--mantine-color-\".concat(colorObj === null || colorObj === void 0 ? void 0 : colorObj.secondary, \"-8)\");\n }\n else if (color === 'red' || color === 'rose') {\n return \"var(--mantine-color-\".concat(colorObj === null || colorObj === void 0 ? void 0 : colorObj.id, \"-0)\");\n }\n else if (color === 'orange' ||\n color === 'violet' ||\n color === 'emerald' ||\n color === 'purple' ||\n color === 'indigo' ||\n color === 'pink' ||\n color === 'fuchsia' ||\n color === 'blue') {\n return \"var(--mantine-color-\".concat(colorObj === null || colorObj === void 0 ? void 0 : colorObj.secondary, \"-0)\");\n }\n else if (color === 'green') {\n return \"var(--mantine-color-\".concat(colorObj === null || colorObj === void 0 ? void 0 : colorObj.id, \"-9)\");\n }\n else if (color === 'yellow') {\n return '#422006';\n }\n else {\n return \"var(--mantine-color-\".concat(colorObj === null || colorObj === void 0 ? void 0 : colorObj.secondary, \"-8)\");\n }\n};\nexports.getPrimaryContrastColorNight = getPrimaryContrastColorNight;\nvar getSecondaryLightColorDay = function (color) {\n if (color === 'rose' || color === 'green') {\n return 'var(--mantine-color-zinc-1)';\n }\n else {\n return 'var(--mantine-color-secondary-1)';\n }\n};\nexports.getSecondaryLightColorDay = getSecondaryLightColorDay;\nvar getSecondaryLightColorNight = function (color) {\n if (color === 'rose' || color === 'green') {\n return 'var(--mantine-color-secondary-7)';\n }\n else {\n return 'var(--mantine-color-secondary-7)';\n }\n};\nexports.getSecondaryLightColorNight = getSecondaryLightColorNight;\nvar getDefaultBorderColorDay = function (color) {\n if (color === 'rose' || color === 'green') {\n return 'var(--mantine-color-zinc-2)';\n }\n else {\n return 'var(--mantine-color-secondary-2)';\n }\n};\nexports.getDefaultBorderColorDay = getDefaultBorderColorDay;\nvar getDefaultBorderColorNight = function (color) {\n if (color === 'rose' || color === 'green') {\n return 'var(--mantine-color-zinc-7)';\n }\n else {\n return 'var(--mantine-color-secondary-7)';\n }\n};\nexports.getDefaultBorderColorNight = getDefaultBorderColorNight;\nvar getShadcnCardClassname = function (color) {\n if (color === 'rose' || color === 'green') {\n return 'globalMantineCardRoot__roseGreen';\n }\n else {\n return 'globalMantineCardRoot';\n }\n};\nexports.getShadcnCardClassname = getShadcnCardClassname;\nvar getShadcnInputBg = function (color) {\n if (color === 'rose' || color === 'green') {\n return 'var(--mantine-color-secondary-filled)';\n }\n else {\n return 'var(--mantine-color-default)';\n }\n};\nexports.getShadcnInputBg = getShadcnInputBg;\nfunction generateShadcnCSSFilledColorVariables(mode, isGeneration) {\n if (isGeneration === void 0) { isGeneration = false; }\n var lightMode = {};\n var darkMode = {};\n colors_1.SHADCN_DEFAULT_COLORS.forEach(function (_a) {\n var id = _a.id, primaryShade = _a.primaryShade;\n lightMode[\"--mantine-color-\".concat(id, \"-filled\")] = \"var(--mantine-color-\".concat(id, \"-\").concat(primaryShade.light, \")\");\n lightMode[\"--mantine-color-\".concat(id, \"-filled-hover\")] = isGeneration\n ? \"{alpha('var(--mantine-color-\".concat(id, \"-\").concat(primaryShade.light, \")', 0.9)}\")\n : (0, core_1.alpha)(\"var(--mantine-color-\".concat(id, \"-\").concat(primaryShade.light, \")\"), 0.9);\n darkMode[\"--mantine-color-\".concat(id, \"-filled\")] = \"var(--mantine-color-\".concat(id, \"-\").concat(primaryShade.dark, \")\");\n darkMode[\"--mantine-color-\".concat(id, \"-filled-hover\")] = isGeneration\n ? \"{alpha('var(--mantine-color-\".concat(id, \"-\").concat(primaryShade.dark, \")', 0.9)}\")\n : (0, core_1.alpha)(\"var(--mantine-color-\".concat(id, \"-\").concat(primaryShade.dark, \")\"), 0.9);\n });\n if (mode === 'light') {\n return lightMode;\n }\n return darkMode;\n}\nfunction getPrimaryColorLight(color) {\n return \"var(--mantine-color-\".concat(color, \"-light)\");\n}\n;\nfunction getPrimaryColorLightHover(color) {\n return \"var(--mantine-color-\".concat(color, \"-light-hover)\");\n}\nfunction getPrimaryColorLightColor(color) {\n return \"var(--mantine-color-\".concat(color, \"-light-color)\");\n}\nfunction generateShadcnCSSLightColorVariables(mode, isGeneration) {\n if (isGeneration === void 0) { isGeneration = false; }\n var lightMode = {};\n var darkMode = {};\n colors_1.SHADCN_DEFAULT_COLORS.forEach(function (_a) {\n var id = _a.id;\n lightMode[\"--mantine-color-\".concat(id, \"-light\")] = isGeneration\n ? \"{alpha('var(--mantine-color-\".concat(id, \"-4)', 0.1)}\")\n : (0, core_1.alpha)(\"var(--mantine-color-\".concat(id, \"-4)\"), 0.1);\n lightMode[\"--mantine-color-\".concat(id, \"-light-hover\")] = isGeneration\n ? \"{alpha('var(--mantine-color-\".concat(id, \"-light)', 0.8)}\")\n : (0, core_1.alpha)(\"var(--mantine-color-\".concat(id, \"-light)\"), 0.8);\n lightMode[\"--mantine-color-\".concat(id, \"-light-color\")] = \"var(--mantine-color-\".concat(id, \"-6)\");\n darkMode[\"--mantine-color-\".concat(id, \"-light\")] = isGeneration\n ? \"{alpha('var(--mantine-color-\".concat(id, \"-4)', 0.15)}\")\n : (0, core_1.alpha)(\"var(--mantine-color-\".concat(id, \"-4)\"), 0.15);\n darkMode[\"--mantine-color-\".concat(id, \"-light-hover\")] = isGeneration\n ? \"{alpha('var(--mantine-color-\".concat(id, \"-light)', 0.8)}\")\n : (0, core_1.alpha)(\"var(--mantine-color-\".concat(id, \"-light)\"), 0.8);\n darkMode[\"--mantine-color-\".concat(id, \"-light-color\")] = \"var(--mantine-color-\".concat(id, \"-3)\");\n });\n if (mode === 'light') {\n return lightMode;\n }\n return darkMode;\n}\nfunction generateShadcnCSSOutlineColorVariables(mode, isGeneration) {\n if (isGeneration === void 0) { isGeneration = false; }\n var lightMode = {};\n var darkMode = {};\n colors_1.SHADCN_DEFAULT_COLORS.forEach(function (_a) {\n var id = _a.id, primaryShade = _a.primaryShade;\n lightMode[\"--mantine-color-\".concat(id, \"-outline\")] = \"var(--mantine-color-\".concat(id, \"-\").concat(primaryShade.light, \")\");\n lightMode[\"--mantine-color-\".concat(id, \"-outline-hover\")] = isGeneration\n ? \"{alpha('var(--mantine-color-\".concat(id, \"-4)', 0.1)}\")\n : (0, core_1.alpha)(\"var(--mantine-color-\".concat(id, \"-4)\"), 0.1);\n darkMode[\"--mantine-color-\".concat(id, \"-outline\")] = \"var(--mantine-color-\".concat(id, \"-\").concat(primaryShade.dark, \")\");\n darkMode[\"--mantine-color-\".concat(id, \"-outline-hover\")] = isGeneration\n ? \"{alpha('var(--mantine-color-\".concat(id, \"-4)', 0.15)}\")\n : (0, core_1.alpha)(\"var(--mantine-color-\".concat(id, \"-4)\"), 0.15);\n });\n if (mode === 'light') {\n return lightMode;\n }\n return darkMode;\n}\nfunction generateShadcnCSSContrastColorVariables(mode) {\n var lightMode = {};\n var darkMode = {};\n colors_1.SHADCN_DEFAULT_COLORS.forEach(function (_a) {\n var id = _a.id;\n lightMode[\"--mantine-color-\".concat(id, \"-contrast\")] = (0, exports.getPrimaryContrastColorDay)(id);\n darkMode[\"--mantine-color-\".concat(id, \"-contrast\")] = (0, exports.getPrimaryContrastColorNight)(id);\n });\n if (mode === 'light') {\n return lightMode;\n }\n return darkMode;\n}\n" }, { "path": "js/scripts/compileTS.cjs", "content": "const { exec } = require(\"child_process\");\nconst path = require(\"path\");\nconst fs = require(\"fs\");\n\n// Function to convert .ts file to .js and save it in the current script directory\nfunction convertTsToJs(tsFilePath) {\n const outputDir = path.resolve(__dirname, \"../generated\"); // Set output directory as the current directory of this script\n const command = `tsc ${tsFilePath} --outDir ${outputDir} --allowJs --esModuleInterop`;\n\n exec(command, (error, stdout, stderr) => {\n if (error) {\n console.error(`Error converting file: ${tsFilePath}`);\n console.error(stderr);\n } else {\n const fileName = path.basename(tsFilePath, \".ts\");\n const jsFilePath = path.join(outputDir, `${fileName}.js`);\n const cjsFilePath = path.join(outputDir, `${fileName}.cjs`);\n\n // Rename .js to .cjs\n if (fs.existsSync(jsFilePath)) {\n fs.renameSync(jsFilePath, cjsFilePath);\n console.log(`Successfully converted and saved as: ${cjsFilePath}`);\n\n // Fix imports in the .cjs file\n let fileContent = fs.readFileSync(cjsFilePath, \"utf8\");\n fileContent = fileContent.replace(/require\\(\"\\.\\/(.*?)\"\\)/g, 'require(\"./$1.cjs\")');\n fs.writeFileSync(cjsFilePath, fileContent, \"utf8\");\n console.log(`Fixed import paths in: ${cjsFilePath}`);\n } else {\n console.error(`Expected .js file not found at: ${jsFilePath}`);\n }\n }\n });\n}\n\n// Convert specific TypeScript files\nconvertTsToJs(path.join(__dirname, \"../../src/utils/colors.ts\"));\nconvertTsToJs(path.join(__dirname, \"../../src/utils/theme-functions.ts\"));\n" }, { "path": "js/scripts/components.cjs", "content": "const path = require(\"path\");\nconst fs = require(\"fs\");\n\nfunction convertCase(string) {\n const splitted = string\n .replace(/([a-z0-9])([A-Z])/g, \"$1 $2\")\n .toLowerCase()\n .split(\" \");\n return splitted.join(\"-\");\n}\n\nfunction removeReact(input) {\n const lines = input.split(\"\\n\");\n\n if (lines[0].includes(\"import React from 'react';\")) {\n lines.shift();\n } else if (lines[0].includes(\"import React\")) {\n const remainingImports = lines[0].replace(/import React[^;]+;/, \"\");\n lines[0] = remainingImports;\n }\n\n return lines.join(\"\\n\");\n}\n\nfunction getComponentCode(componentFolder, componentName) {\n const componentContents = fs\n .readdirSync(componentFolder)\n .filter(\n (item) => (item.endsWith(\".tsx\") && !item.endsWith(\".story.tsx\")) || item.endsWith(\".ts\") || item.endsWith(\".css\")\n );\n\n const mainFileContent = removeReact(fs.readFileSync(path.join(componentFolder, `${componentName}.tsx`), \"utf-8\"));\n const otherFilesContent = componentContents\n .filter((file) => file !== `${componentName}.tsx`)\n .map((file) => ({\n name: file,\n content: removeReact(fs.readFileSync(path.join(componentFolder, file), \"utf-8\")),\n }));\n\n return [\n { fileName: `${componentName}.tsx`, language: \"tsx\", code: mainFileContent },\n ...otherFilesContent.map(({ name, content }) => ({\n fileName: name,\n language: name.endsWith(\".css\") ? \"scss\" : \"tsx\",\n code: content,\n })),\n ];\n}\n\nfunction convertComponentName(input) {\n return input\n .split(\"-\") // Split the string by hyphens\n .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each word\n .join(\"\"); // Join the words back together\n}\n\nfunction getAllComponents() {\n const rootFolder = path.resolve(__dirname, \"../../src/feature/blocks/lib/\"); // Set output directory as the current directory of this script\n const paths = fs.readdirSync(rootFolder);\n\n const components = paths\n .map((componentName) => {\n const convertedComponentName = convertComponentName(componentName);\n\n const componentDirectory = path.join(rootFolder, componentName);\n const componentAttributes = path.join(componentDirectory, \"attributes.json\");\n\n if (fs.lstatSync(componentDirectory).isDirectory()) {\n const code = getComponentCode(componentDirectory, componentName);\n const attributes = JSON.parse(fs.readFileSync(componentAttributes, \"utf8\"));\n return {\n component: convertedComponentName,\n slug: convertCase(convertedComponentName),\n code,\n attributes,\n };\n }\n\n return null;\n })\n .filter((c) => c);\n\n const sortedComponents = [...components].sort((a, b) => a.attributes.order - b.attributes.order);\n\n if (sortedComponents) {\n const outputDir = path.join(__dirname, `../../src/feature/blocks/data/components.ts`);\n const content = `export const components = ${JSON.stringify(sortedComponents, null, 2)};`;\n fs.writeFileSync(outputDir, content, \"utf-8\");\n console.log(\"Components generate successfully\");\n }\n}\n\ngetAllComponents();\n" }, { "path": "js/scripts/generateCssVariableResolver.cjs", "content": "const fs = require(\"fs\");\nconst path = require(\"path\");\nconst { MANTINE_DEFAULT_COLORS, SHADCN_DEFAULT_COLORS } = require(\"../generated/colors.cjs\");\nconst { getPrimaryColorLight, getPrimaryContrastColorDay, getSecondaryLightColorDay, getDefaultBorderColorNight, getPrimaryContrastColorNight, getSecondaryLightColorNight, getDefaultBorderColorDay, generateShadcnCSSFilledColorVariables, generateShadcnCSSLightColorVariables, generateShadcnCSSOutlineColorVariables, generateShadcnCSSContrastColorVariables, getPrimaryColorLightHover, getPrimaryColorLightColor } = require(\"../generated/theme-functions.cjs\");\n\n\nfunction generateCSSVariableResolvers(style, colors, inputFilePath, outputFileName) {\n const fileContent = fs.readFileSync(inputFilePath, \"utf-8\");\n\n // Replace `${ ` with {{literal-open}} and `}` with {{literal-close}}\n const escapedContent = fileContent\n .replace(/\\`\\$\\{\\s*/g, \"{{literal-open}}\") // Replace `${ ` with {{literal-open}}\n .replace(/\\s*\\}\\`/g, \"{{literal-close}}\");\n\n // Remove the import statement for the theme functions file\n const updatedContent = escapedContent\n .split(\"\\n\")\n .filter(\n (line) => !/^import.*\\.\\.\\/\\.\\.\\/utils\\/theme-functions/.test(line.trim())\n )\n .join(\"\\n\");\n\n function cssStringify(obj) {\n return JSON.stringify(obj, null, 2).slice(1, -1).replace(/\\n/g, '\\n ').trim();\n }\n\n function replaceCSSPlaceholders(template, color) {\n\n if (style === \"shadcn\") {\n return template\n .replace(\"(theme)\", \"()\")\n .replaceAll(\"getPrimaryColorLight(theme.primaryColor)\", `'${getPrimaryColorLight(color.id)}'`)\n .replaceAll(\"getPrimaryColorLightHover(theme.primaryColor)\", `'${getPrimaryColorLightHover(color.id)}'`)\n .replaceAll(\"getPrimaryColorLightColor(theme.primaryColor)\", `'${getPrimaryColorLightColor(color.id)}'`)\n .replaceAll(\"getPrimaryContrastColorDay(theme.primaryColor)\", `'${getPrimaryContrastColorDay(color.id)}'`)\n .replaceAll(\"getPrimaryContrastColorNight(theme.primaryColor)\", `'${getPrimaryContrastColorNight(color.id)}'`)\n .replaceAll(\"getSecondaryLightColorDay(theme.primaryColor)\", `'${getSecondaryLightColorDay(color.id)}'`)\n .replaceAll(\"getSecondaryLightColorNight(theme.primaryColor)\", `'${getSecondaryLightColorNight(color.id)}'`)\n .replaceAll(\"getDefaultBorderColorDay(theme.primaryColor)\", `'${getDefaultBorderColorDay(color.id)}'`)\n .replaceAll(\"getDefaultBorderColorNight(theme.primaryColor)\", `'${getDefaultBorderColorNight(color.id)}'`)\n .replaceAll(`...generateShadcnCSSFilledColorVariables('light')`, cssStringify(generateShadcnCSSFilledColorVariables('light', true)))\n .replaceAll(`...generateShadcnCSSFilledColorVariables('dark')`, cssStringify(generateShadcnCSSFilledColorVariables('dark', true)))\n .replaceAll(`...generateShadcnCSSLightColorVariables('light')`, cssStringify(generateShadcnCSSLightColorVariables('light', true)))\n .replaceAll(`...generateShadcnCSSLightColorVariables('dark')`, cssStringify(generateShadcnCSSLightColorVariables('dark', true)))\n .replaceAll(`...generateShadcnCSSOutlineColorVariables('light')`, cssStringify(generateShadcnCSSOutlineColorVariables('light', true)))\n .replaceAll(`...generateShadcnCSSOutlineColorVariables('dark')`, cssStringify(generateShadcnCSSOutlineColorVariables('dark', true)))\n .replaceAll(`...generateShadcnCSSContrastColorVariables('light')`, cssStringify(generateShadcnCSSContrastColorVariables('light')))\n .replaceAll(`...generateShadcnCSSContrastColorVariables('dark')`, cssStringify(generateShadcnCSSContrastColorVariables('dark')));\n } else {\n return template;\n }\n }\n\n let generatedCSSResolvers = {};\n\n // Iterate through each color object in the array\n colors.forEach((color) => {\n const replacedContent = replaceCSSPlaceholders(updatedContent, color);\n generatedCSSResolvers[color.id] = `\\`${replacedContent}\\``;\n });\n\n // Format the object as TypeScript content for export\n const tsContent =\n `export const ${outputFileName} = {\\n` +\n Object.keys(generatedCSSResolvers)\n .map((key) => {\n return ` ${key}: ${generatedCSSResolvers[key]}`;\n })\n .join(\",\\n\") +\n `\\n};`;\n\n const outputDir = path.join(__dirname, `../../src/themes/generated/${outputFileName}.ts`);\n\n // Write the final content to the file\n fs.writeFileSync(outputDir, tsContent, \"utf-8\");\n console.log(`File created: ${outputDir}`);\n}\n\n// Generate CSS variable resolvers for Mantine and Shadcn using the provided color arrays\ngenerateCSSVariableResolvers(\n \"mantine\",\n MANTINE_DEFAULT_COLORS,\n path.join(__dirname, \"../../src/themes/mantine/mantine-css-variable-resolver.ts\"),\n \"generatedMantineCssVariableResolver\"\n);\ngenerateCSSVariableResolvers(\n \"shadcn\",\n SHADCN_DEFAULT_COLORS,\n path.join(__dirname, \"../../src/themes/shadcn/shadcn-css-variable-resolver.ts\"),\n \"generatedShadcnCssVariableResolver\"\n);\n" }, { "path": "js/scripts/generateStyles.cjs", "content": "const fs = require(\"fs\");\nconst path = require(\"path\");\n\nfunction generateCssStyles(location, outputFileName) {\n // Read the content of the CSS file\n const fileContent = fs.readFileSync(location, \"utf-8\");\n \n // Format the content as a TypeScript export statement\n const tsContent = `export const ${outputFileName} = \\`${fileContent}\\`;`;\n\n // Define the output directory\n const outputDir = path.join(__dirname, `../../src/themes/generated/${outputFileName}.ts`);\n\n // Write the final content to the file\n fs.writeFileSync(outputDir, tsContent, \"utf-8\");\n console.log(`CSS styles file created: ${outputDir}`);\n}\n\ngenerateCssStyles(\n path.join(__dirname, \"../../src/styles/shadcn-styles.css\"), \n \"generatedShadcnCssStyles\" \n);\ngenerateCssStyles(\n path.join(__dirname, \"../../src/styles/mantine-styles.css\"), \n \"generatedMantineCssStyles\" \n);\n" }, { "path": "js/scripts/generateThemes.cjs", "content": "const fs = require(\"fs\");\nconst path = require(\"path\");\nconst { MANTINE_DEFAULT_COLORS, SHADCN_DEFAULT_COLORS } = require(\"../generated/colors.cjs\");\n\nfunction generateThemes(style, colors, inputFilePath, outputFileName) {\n const fileContent = fs.readFileSync(inputFilePath, \"utf-8\");\n\n function updateContent(content) {\n let updatedContent = content;\n\n // Replace template literals with custom markers\n updatedContent = updatedContent.replace(/\\`\\$\\{\\s*/g, \"{{literal-open}}\").replace(/\\s*\\}\\`/g, \"{{literal-close}}\");\n\n // Remove import lines for theme-functions and colors\n updatedContent = updatedContent\n .split(\"\\n\")\n .filter(\n (line) =>\n !/^import.*\\.\\.\\/\\.\\.\\/utils\\/theme-functions/.test(line.trim()) &&\n !/^import.*\\.\\.\\/\\.\\.\\/utils\\/colors/.test(line.trim())\n )\n .join(\"\\n\");\n\n // Remove the prettier-ignore comments\n updatedContent = updatedContent.replaceAll(\"// prettier-ignore\", \"\");\n\n // Add the colors declaration before the export line\n if (style === \"shadcn\") {\n const colorDeclarations = SHADCN_DEFAULT_COLORS.map((color) => {\n return `const ${color.id}Colors: MantineColorsTuple = ${JSON.stringify(color.primaryPalette)};`;\n }).join(\"\\n\");\n\n const exportLine = \"export const shadcnTheme: MantineThemeOverride = createTheme({\";\n updatedContent = updatedContent.replace(exportLine, `${colorDeclarations}\\n\\n${exportLine}`);\n }\n\n return updatedContent;\n }\n\n function replacePlaceholders(template, color) {\n let updatedTemplate = template;\n \n if (style === \"shadcn\") {\n updatedTemplate = updatedTemplate\n .replace(\"primary: zincColors\", `primary: ${color.id}Colors`)\n .replace(\"secondary: zincColors\", `secondary: ${color.secondary || color.id}Colors`)\n .replace(\"dark: zincColors\", `dark: ${color.secondary || color.id}Colors`)\n .replace(\"{ light: 9, dark: 0 }\", JSON.stringify(color.primaryShade));\n } else {\n updatedTemplate = updatedTemplate.replace(`primaryColor: \"blue\"`, `primaryColor: \"${color.id}\"`);\n }\n \n // Escape backticks and `${}`\n updatedTemplate = updatedTemplate\n .replace(/`/g, \"\\\\`\") // Escape backticks\n .replace(/\\$\\{/g, \"\\\\${\") // Escape `${`\n \n return updatedTemplate;\n }\n \n\n let generatedColors = {};\n\n // Iterate through each color object in the array\n colors.forEach((color) => {\n const updatedContent = updateContent(fileContent);\n const replacedContent = replacePlaceholders(updatedContent, color);\n generatedColors[color.id] = `\\`${replacedContent}\\``;\n });\n\n // Format the object as TypeScript content for export\n const tsContent =\n `export const ${outputFileName} = {\\n` +\n Object.keys(generatedColors)\n .map((key) => {\n return ` ${key}: ${generatedColors[key]}`;\n })\n .join(\",\\n\") +\n `\\n};`;\n\n const outputDir = path.join(__dirname, `../../src/themes/generated/${outputFileName}.ts`);\n\n // Write the final content to the file\n fs.writeFileSync(outputDir, tsContent, \"utf-8\");\n console.log(`File created: ${outputDir}`);\n}\n\n// Generate themes for Mantine and Shadcn using the provided color arrays\ngenerateThemes(\n \"mantine\",\n MANTINE_DEFAULT_COLORS,\n path.join(__dirname, \"../../src/themes/mantine/mantine-theme.ts\"),\n \"generatedMantineTheme\"\n);\ngenerateThemes(\n \"shadcn\",\n SHADCN_DEFAULT_COLORS,\n path.join(__dirname, \"../../src/themes/shadcn/shadcn-theme.ts\"),\n \"generatedShadcnTheme\"\n);\n" }, { "path": "next.config.js", "content": "/** @type {import('next').NextConfig} */\nimport path from \"node:path\";\n\nconst nextConfig = {\n output: \"export\", // Outputs a Single-Page Application (SPA).\n distDir: \"./dist\", // Changes the build output directory to `./dist/`.\n basePath: process.env.NEXT_PUBLIC_BASE_PATH, // Sets the base path to `/some-base-path`.\n sassOptions: {\n implementation: \"sass-embedded\",\n additionalData: `@use \"./_mantine\" as mantine;`,\n },\n};\n\nexport default nextConfig;\n" }, { "path": "package.json", "content": "{\n \"name\": \"mantine-modern-theme\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"type\": \"module\",\n \"engines\": {\n \"node\": \">=20.9.0\"\n },\n \"scripts\": {\n \"dev\": \"next dev\",\n \"build\": \"tsc -b && next build\",\n \"start\": \"next start\",\n \"lint\": \"eslint .\",\n \"preview\": \"next preview\",\n \"compileTs\": \"node ./js/scripts/compileTs.cjs\",\n \"generateThemes\": \"node ./js/scripts/generateThemes.cjs\",\n \"generateCssVariableResolver\": \"node ./js/scripts/generateCssVariableResolver.cjs\",\n \"generateStyles\": \"node ./js/scripts/generateStyles.cjs\",\n \"generate\": \"npm run compileTs && npm run generateThemes && npm run generateCssVariableResolver && npm run generateStyles\",\n \"generateComponents\": \"node ./js/scripts/components.cjs\"\n },\n \"dependencies\": {\n \"@mantine/charts\": \"^7.15.2\",\n \"@mantine/code-highlight\": \"^7.15.2\",\n \"@mantine/core\": \"^7.15.2\",\n \"@mantine/dates\": \"^7.15.2\",\n \"@mantine/form\": \"^7.15.2\",\n \"@mantine/hooks\": \"^7.15.2\",\n \"@mantine/spotlight\": \"^7.15.2\",\n \"@mantinex/dev-icons\": \"^1.1.0\",\n \"@mantinex/mantine-header\": \"^1.1.0\",\n \"@mantinex/shiki\": \"^1.1.0\",\n \"@radix-ui/react-icons\": \"^1.3.0\",\n \"@tabler/icons-react\": \"^3.19.0\",\n \"@tanstack/react-router\": \"^1.82.1\",\n \"@tanstack/react-table\": \"^8.20.5\",\n \"clsx\": \"^2.1.1\",\n \"dayjs\": \"^1.11.13\",\n \"next\": \"^15.1.0\",\n \"react\": \"^18.3.1\",\n \"react-dom\": \"^18.3.1\",\n \"recharts\": \"^2.15.0\",\n \"sass\": \"^1.80.6\",\n \"sass-loader\": \"^16.0.3\",\n \"shiki\": \"^1.23.0\",\n \"shikiji\": \"^0.7.6\"\n },\n \"devDependencies\": {\n \"@eslint/js\": \"^9.11.1\",\n \"@tanstack/router-devtools\": \"^1.82.1\",\n \"@tanstack/router-plugin\": \"^1.81.9\",\n \"@types/node\": \"^22.9.1\",\n \"@types/react\": \"^18.3.10\",\n \"@types/react-dom\": \"^18.3.0\",\n \"autoprefixer\": \"^10.4.20\",\n \"eslint\": \"^9.11.1\",\n \"eslint-config-prettier\": \"^9.1.0\",\n \"eslint-plugin-react-hooks\": \"^5.1.0-rc.0\",\n \"eslint-plugin-react-refresh\": \"^0.4.12\",\n \"globals\": \"^15.9.0\",\n \"postcss\": \"^8.4.49\",\n \"postcss-preset-mantine\": \"^1.17.0\",\n \"postcss-simple-vars\": \"^7.0.1\",\n \"prettier\": \"3.3.3\",\n \"sass-embedded\": \"^1.81.0\",\n \"tailwindcss\": \"^3.4.15\",\n \"typescript\": \"^5.5.3\",\n \"typescript-eslint\": \"^8.7.0\",\n \"vite-plugin-node-polyfills\": \"^0.22.0\"\n }\n}\n" }, { "path": "postcss.config.js", "content": "export default {\n plugins: {\n tailwindcss: {},\n autoprefixer: {},\n \"postcss-preset-mantine\": {},\n \"postcss-simple-vars\": {\n variables: {\n \"mantine-breakpoint-xs\": \"36em\",\n \"mantine-breakpoint-sm\": \"48em\",\n \"mantine-breakpoint-md\": \"62em\",\n \"mantine-breakpoint-lg\": \"75em\",\n \"mantine-breakpoint-xl\": \"88em\",\n },\n },\n },\n};\n" }, { "path": "public/_redirects", "content": "/* /index.html 200" }, { "path": "public/robots.txt", "content": "# Allow all crawlers\nUser-agent: *\nAllow: /\n\n# Sitemap location\nSitemap: https://mantinehub.com/sitemap.xml\n\n# Disallow admin and private routes\nDisallow: /api/\nDisallow: /_next/\nDisallow: /static/ " }, { "path": "src/_mantine.scss", "content": "@use \"sass:math\";\n\n// Define variables for your breakpoints,\n// values must be the same as in your theme\n$mantine-breakpoint-xs: \"36em\";\n$mantine-breakpoint-sm: \"48em\";\n$mantine-breakpoint-md: \"62em\";\n$mantine-breakpoint-lg: \"75em\";\n$mantine-breakpoint-xl: \"88em\";\n\n@function rem($value) {\n @return #{math.div(math.div($value, $value * 0 + 1), 16)}rem;\n}\n\n@mixin light {\n [data-mantine-color-scheme=\"light\"] & {\n @content;\n }\n}\n\n@mixin dark {\n [data-mantine-color-scheme=\"dark\"] & {\n @content;\n }\n}\n\n@mixin hover {\n @media (hover: hover) {\n &:hover {\n @content;\n }\n }\n\n @media (hover: none) {\n &:active {\n @content;\n }\n }\n}\n\n@mixin smaller-than($breakpoint) {\n @media (max-width: $breakpoint) {\n @content;\n }\n}\n\n@mixin larger-than($breakpoint) {\n @media (min-width: $breakpoint) {\n @content;\n }\n}\n\n// Add direction mixins if you need rtl support\n@mixin rtl {\n [dir=\"rtl\"] & {\n @content;\n }\n}\n\n@mixin ltr {\n [dir=\"ltr\"] & {\n @content;\n }\n}\n" }, { "path": "src/app/about/page.tsx", "content": "\"use client\";\n\nimport { AboutPage } from \"@/components/custom/about/about\";\nimport PageLayout from \"@/components/layouts/page-layout\";\nimport { Box, Button, Group, Space, Stack } from \"@mantine/core\";\n\nexport default function Page() {\n return (\n \n \n \n \n Contact us\n \n \n Buy me a coffee\n \n \n \n \n \n \n \n \n );\n}\n" }, { "path": "src/app/blocks/[slug]/page.tsx", "content": "import CategoryPage from \"@/feature/blocks/components/categories/category-page\";\nimport { CATEGORIES_SLUGS, getCategoryData } from \"@/feature/blocks/data/categories\";\nimport { getComponentsByCategory } from \"@/feature/blocks/data/fn\";\nimport { Title } from \"@mantine/core\";\n\n// Return a list of `params` to populate the [slug] dynamic segment\nexport async function generateStaticParams() {\n return CATEGORIES_SLUGS.map((slug) => ({\n slug: slug,\n }));\n}\n\nexport default async function Page({ params }: { params: Promise<{ slug: string }> }) {\n const { slug } = await params;\n\n const category = getCategoryData(slug);\n const components = getComponentsByCategory()[slug];\n\n return (\n
\n \n {category?.name} components\n \n \n
\n );\n}\n" }, { "path": "src/app/blocks/layout.tsx", "content": "import PageLayout from \"@/components/layouts/page-layout\";\nimport BlockComponents from \"@/feature/blocks/components/block-components/block-components\";\n\nexport default function BlockPageLayout({ children }: { children: React.ReactNode }) {\n return (\n \n \n {children}\n \n );\n}\n" }, { "path": "src/app/blocks/page.tsx", "content": "\"use client\";\nimport { CATEGORIES } from \"@/feature/blocks/data/categories\";\nimport { redirect } from \"next/navigation\";\n\nexport default function Page() {\n // Redirect to the first category by default\n const defaultCategory = CATEGORIES[0]?.categories[0]?.slug;\n if (defaultCategory) {\n redirect(`/blocks/${defaultCategory}`);\n }\n\n return <>;\n}\n" }, { "path": "src/app/feedback/page.tsx", "content": "\"use client\";\n\nimport { TestimonialGrid } from \"@/components/custom/testimonial/testimonial-grid\";\nimport PageLayout from \"@/components/layouts/page-layout\";\nimport { testimonialItems } from \"@/utils/testimonials\";\nimport { Button, Group, Space, Stack } from \"@mantine/core\";\n\nexport default function Page() {\n return (\n \n \n \n \n Give Feedback\n \n \n Star us on Github\n \n \n \n \n \n \n );\n}\n" }, { "path": "src/app/how-to-use/page.tsx", "content": "\"use client\";\n\nimport { HowToUsePage } from \"@/components/custom/how-to-use/how-to-use\";\nimport PageLayout from \"@/components/layouts/page-layout\";\nimport { Box, Space, Stack } from \"@mantine/core\";\n\nexport default function Page() {\n return (\n \n \n \n \n \n \n \n \n );\n}\n" }, { "path": "src/app/layout.tsx", "content": "import type { Metadata } from \"next\";\n\nimport \"@mantine/core/styles.css\";\nimport \"@mantine/charts/styles.css\";\nimport \"@mantine/dates/styles.css\";\nimport \"@mantine/spotlight/styles.css\";\nimport \"@mantinex/shiki/styles.css\";\nimport \"@mantine/code-highlight/styles.css\";\n\nimport \"../styles/shadcn-styles.css\";\nimport \"../styles/fonts.css\";\nimport \"../styles/index.scss\";\n\nimport { ColorSchemeScript, mantineHtmlProps } from \"@mantine/core\";\nimport { ThemeProvider } from \"@/theme-context\";\nimport GoogleAnalytics from \"@/components/GoogleAnalytics\";\nimport MicrosoftClarity from \"@/components/MicrosoftClarity\";\n\nexport const metadata: Metadata = {\n metadataBase: new URL('https://mantinehub.com'),\n title: {\n default: \"MantineHub - Modern preconfigured themes, blocks, templates and more.\",\n template: \"%s | MantineHub\"\n },\n description: `MantineHub is an open-source tool to create modern,\n customizable shadcn inspired themes for Mantine UI components.\n Easily adjust styles, colors, radius, and light/dark modes,\n and export the theme object for quick integration into any Mantine project.`,\n keywords: [\n \"Mantine\",\n \"UI Components\",\n \"Theme Builder\",\n \"React\",\n \"Next.js\",\n \"Web Development\",\n \"Frontend\",\n \"Design System\",\n \"Custom Themes\",\n \"shadcn\",\n \"UI/UX\",\n \"Component Library\"\n ],\n authors: [{ name: \"MantineHub Team\" }],\n creator: \"MantineHub\",\n publisher: \"MantineHub\",\n formatDetection: {\n email: false,\n address: false,\n telephone: false,\n },\n icons: {\n icon: '/favicon.svg',\n apple: '/favicon.svg',\n },\n openGraph: {\n title: \"MantineHub\",\n description: \"MantineHub is an open-source tool to create modern, customizable shadcn inspired themes for Mantine UI components. Easily adjust styles, colors, radius, and light/dark modes, and export the theme object for quick integration into any Mantine project.\",\n url: \"https://mantinehub.com\",\n siteName: \"MantineHub\",\n images: [\n {\n url: \"https://private-user-images.githubusercontent.com/53397244/375193930-0b673eec-ed49-4928-a021-5bee7d0ec8e3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzI1MDExOTEsIm5iZiI6MTczMjUwMDg5MSwicGF0aCI6Ii81MzM5NzI0NC8zNzUxOTM5MzAtMGI2NzNlZWMtZWQ0OS00OTI4LWEwMjEtNWJlZTdkMGVjOGUzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDExMjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQxMTI1VDAyMTQ1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTk5MDdmMjg5M2YyOTljYmE0MzljOGU4ZTFiNWE5OTdhMDU2OTg2MWQ1MWYzMGFkYjFjMmNmOGRhZjMxYjA4NWYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.E0xeyrPWy02alRycR2WZpQ2nbxgjNSshSE5n6Q28lck\",\n width: 1200,\n height: 630,\n alt: \"MantineHub Preview\",\n },\n ],\n locale: \"en_US\",\n type: \"website\",\n },\n twitter: {\n card: \"summary_large_image\",\n title: \"MantineHub\",\n description: \"MantineHub is an open-source tool to create modern, customizable shadcn inspired themes for Mantine UI components. Easily adjust styles, colors, radius, and light/dark modes, and export the theme object for quick integration into any Mantine project.\",\n images: [\"https://private-user-images.githubusercontent.com/53397244/375193930-0b673eec-ed49-4928-a021-5bee7d0ec8e3.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzI1MDExOTEsIm5iZiI6MTczMjUwMDg5MSwicGF0aCI6Ii81MzM5NzI0NC8zNzUxOTM5MzAtMGI2NzNlZWMtZWQ0OS00OTI4LWEwMjEtNWJlZTdkMGVjOGUzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDExMjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQxMTI1VDAyMTQ1MVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTk5MDdmMjg5M2YyOTljYmE0MzljOGU4ZTFiNWE5OTdhMDU2OTg2MWQ1MWYzMGFkYjFjMmNmOGRhZjMxYjA4NWYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.E0xeyrPWy02alRycR2WZpQ2nbxgjNSshSE5n6Q28lck\"],\n creator: \"@mantinehub\",\n site: \"@mantinehub\",\n },\n robots: {\n index: true,\n follow: true,\n googleBot: {\n index: true,\n follow: true,\n 'max-video-preview': -1,\n 'max-image-preview': 'large',\n 'max-snippet': -1,\n },\n },\n verification: {\n google: '-9BanVY_agkYef8a_hUF9btoOrREhuEDXwgnLGIjC98', // Add your Google Search Console verification code\n },\n alternates: {\n canonical: 'https://mantinehub.com',\n },\n viewport: \"width=device-width, initial-scale=1.0\",\n};\n\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n return (\n \n \n \n \n \n \n\n \n
\n {children}\n {/* {children} */}\n
\n \n \n );\n}\n" }, { "path": "src/app/loading.tsx", "content": "import { Center, Loader } from \"@mantine/core\";\n\nexport default function Loading() {\n return (\n
\n \n
\n );\n}\n" }, { "path": "src/app/page.tsx", "content": "\"use client\";\n\nimport MantineCards from \"@/components/custom/theme-example-cards/mantine-cards\";\nimport PageLayout from \"@/components/layouts/page-layout\";\nimport { Anchor } from \"@mantine/core\";\n\nexport default function Page() {\n return (\n \n Save time on styling with our ready-to-use themes for{\" \"}\n \n Mantine\n {\" \"}\n components. Just copy, paste, and watch your app come to life.\n \n }\n >\n \n \n );\n}\n" }, { "path": "src/app/playground/page.tsx", "content": "\"use client\";\n\nimport ComponentsDemo from \"@/components/custom/components-demo/components-demo\";\nimport PageLayout from \"@/components/layouts/page-layout\";\n\nexport default function Page() {\n return (\n \n \n \n );\n}\n" }, { "path": "src/app/sitemap.ts", "content": "import { MetadataRoute } from 'next'\n\n// Configure for static export\nexport const dynamic = 'force-static'\nexport const revalidate = 3600 // Revalidate every hour\n\nexport default function sitemap(): MetadataRoute.Sitemap {\n const baseUrl = 'https://mantinehub.com'\n \n return [\n {\n url: baseUrl,\n lastModified: new Date(),\n changeFrequency: 'daily',\n priority: 1,\n },\n {\n url: `${baseUrl}/blocks`,\n lastModified: new Date(),\n changeFrequency: 'daily',\n priority: 0.9,\n },\n {\n url: `${baseUrl}/about`,\n lastModified: new Date(),\n changeFrequency: 'monthly',\n priority: 0.6,\n },\n {\n url: `${baseUrl}/how-to-use`,\n lastModified: new Date(),\n changeFrequency: 'monthly',\n priority: 0.6,\n },\n {\n url: `${baseUrl}/playground`,\n lastModified: new Date(),\n changeFrequency: 'monthly',\n priority: 0.7,\n },\n {\n url: `${baseUrl}/feedback`,\n lastModified: new Date(),\n changeFrequency: 'monthly',\n priority: 0.5,\n },\n ]\n} " }, { "path": "src/components/GoogleAnalytics.tsx", "content": "'use client';\n\nimport Script from 'next/script';\n\nexport default function GoogleAnalytics() {\n return (\n <>\n \n \n \n );\n} " }, { "path": "src/components/MicrosoftClarity.tsx", "content": "'use client';\n\nimport Script from 'next/script';\n\nexport default function MicrosoftClarity() {\n return (\n \n );\n} " }, { "path": "src/components/custom/about/about.tsx", "content": "import { Anchor, Box, Divider, List, Stack, Text, Title } from \"@mantine/core\";\n\nexport const AboutPage = () => {\n return (\n \n {/* About Mantine Theme Builder */}\n \n 🤘 Motivation\n \n \n Mantine is an amazing library with a wide range of components, extensive customization options, and a vibrant\n community. It offers a developer experience unmatched by many React libraries. However, its default styling\n can feel less modern compared to frameworks like shadcn and Radix, which many companies prefer. Setting up\n colors and styles to match those modern aesthetics can be time-consuming and may hinder projects that need a\n quick start.\n \n
\n \n Enter MantineHub. Initially created as an experimental project to simplify the process of modernizing\n Mantine's styling, MantineHub offers pre-configured themes inspired by Shadcn, Radix, and more. With\n MantineHub, developers can quickly integrate modern styling into their projects by copying and pasting the\n theme configuration.\n \n
\n \n Due to the overwhelming positive feedback and community endorsment we’ve received, MantineHub has evolved into\n a comprehensive toolkit. It now supports all Mantine components and introduces exciting new features like\n Blocks—pre-built UI components designed to seamlessly work with the generated themes.\n \n \n \n 📌 What We Offer\n \n 🎨 Themes\n \n Our theme library eliminates the process of creating modern styles for Mantine projects. Choose from a variety\n of predefined themes—like Shadcn-inspired designs, Tailwind-like colors (zinc, amber, rose, and red), and even\n Glassmorphic themes from Radix—and customize them to fit your project needs. The themes are fully compatible\n with all Mantine components, ensuring a cohesive and polished design for your application.\n \n
\n 🧩 Blocks\n \n Blocks are pre-built, ready-to-use UI components designed for specific features that developers can\n effortlessly integrate into their projects. These components work seamlessly with the themes generated by\n MantineHub, saving you time and effort.\n
\n Currently, Blocks are an experimental feature with a limited library. Based on user feedback, we plan to\n expand this collection significantly, making it an extensive resource for developers. Contributions and\n feature requests are welcome to help grow this library.\n \n
\n ⛹️‍♂️ Playground\n \n The Playground is an interactive tool that allows you to see how pre-built themes look on individual Mantine\n components. Customize component-specific props—like variant, color, and other features—in real-time and\n explore how each change affects the component's appearance. The Playground ensures you can visualize and\n fine-tune your design choices with ease, making it a valuable addition to the development process.\n \n \n {/* \n 🎨 Understanding the Color Schema\n \n \n Mantine offers a robust and flexible theming system that we have fully leveraged to create modern, cohesive\n designs. The themes and color schemes you see on this site are a result of carefully crafted configurations,\n making it easy to integrate modern aesthetics. Understanding how these variables and customizations work is\n essential to fully unlock the potential of your theme.\n \n
\n \n To learn about these variables, their roles, and best practices for theming, refer to our detailed blogs where\n we explain the color schema and provide practical examples. Our blogs cover how to approach theming your\n components, how to use these variables effectively, and how to create a cohesive design system for your\n project.\n
\n
\n We encourage you to read through these articles if you're looking to customize this theme or understand the\n best way to utilize the predefined color variables. This will help you maintain consistency and visual harmony\n throughout your project.\n \n */}\n \n 🚀 Future Plans\n \n \n MantineHub(previously, Mantine Theme Builder) is now more than a theming tool—it's an evolving ecosystem for\n Mantine developers. New features are in the pipeline to further enhance the developer experience, streamline\n workflows, and solidify Mantine as the go-to UI library for React projects.\n
\n
\n Stay tuned for exciting updates, and let us know what features you'd like to see next!\n \n \n \n 🧑‍💻 Contributors\n \n \n This project is maintained by{\" \"}\n \n Abhishek-S-Lal\n {\" \"}\n and{\" \"}\n \n gopukr\n \n . Contributions from the community are welcome and appreciated. Please see our{\" \"}\n \n CONTRIBUTING.md file\n {\" \"}\n for more information on how to get involved.\n \n \n \n 🤝 Join us\n \n \n MantineHub thrives on community feedback and contributions. If you find MantineHub helpful, please share your thoughts, and request or contribute features. Together, we can make MantineHub a complimentary tool to make UI development with Mantine much more faster and easier.\n \n
\n If you find this project useful, please consider\n \n \n Starring the repository on{\" \"}\n \n GitHub\n \n \n Sharing the project with your friends and colleagues\n Contributing to the project\n \n Buy me a coffee\n \n \n
\n \n \n );\n};\n" }, { "path": "src/components/custom/blocks/coming-soon/coming-soon.module.css", "content": ".container {\n padding: 4rem 1rem;\n}\n\n.title {\n font-size: 8rem;\n font-weight: 800;\n background: linear-gradient(135deg, var(--mantine-color-blue-9) 0%, var(--mantine-color-indigo-9) 100%);\n margin-bottom: 1.5rem;\n}\n\n.socialButton {\n width: 48px;\n height: 48px;\n border-radius: 24px;\n padding: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.socialButton:hover {\n transform: translateY(-2px);\n}\n\n.socialIcon {\n width: 24px;\n height: 24px;\n color: var(--mantine-color-dimmed);\n}\n\n.successMessage {\n text-align: center;\n color: var(--mantine-primary-color-7);\n font-size: 1.25rem;\n font-weight: 500;\n padding: 1rem;\n border-radius: var(--mantine-radius-md);\n}\n" }, { "path": "src/components/custom/blocks/coming-soon/coming-soon.tsx", "content": "import { Box, Container, Text, Group, Stack } from \"@mantine/core\";\n// import { MagnifyingGlassIcon, TwitterLogoIcon, InstagramLogoIcon, GitHubLogoIcon } from \"@radix-ui/react-icons\";\nimport styles from \"./coming-soon.module.css\";\n\nexport const ComingSoon = () => {\n // const [email, setEmail] = useState(\"\");\n // const [isSubscribed, setIsSubscribed] = useState(false);\n\n // const handleSubscribe = () => {\n // if (email && email.includes(\"@\")) {\n // setIsSubscribed(true);\n // setEmail(\"\");\n // // Here you would typically handle the email subscription\n // }\n // };\n\n // const handleSocialClick = (url: string) => {\n // window.open(url, \"_blank\", \"noopener,noreferrer\");\n // };\n\n return (\n \n \n \n \n \n Coming Soon\n \n \n We're working hard to bring you more awesome block. Stay tuned for updates!\n \n \n\n {/* \n {!isSubscribed ? (\n \n setEmail(e.target.value)}\n placeholder=\"Enter your email\"\n leftSection={}\n size=\"lg\"\n />\n \n \n ) : (\n Thanks for subscribing! We'll keep you posted.\n )}\n */}\n\n {/* \n handleSocialClick(\"https://twitter.com\")}\n >\n \n \n handleSocialClick(\"https://instagram.com\")}\n >\n \n \n handleSocialClick(\"https://github.com\")}\n >\n \n \n */}\n \n \n \n );\n};\n" }, { "path": "src/components/custom/change-theme-section/change-theme-button.tsx", "content": "import {\n Box,\n Button,\n ColorSwatch,\n Group,\n MantineColorShade,\n MantineColorsTuple,\n Popover,\n SimpleGrid,\n Stack,\n Text,\n useMantineColorScheme,\n} from \"@mantine/core\";\nimport { useLocalStorage } from \"@mantine/hooks\";\nimport { InfoCircledIcon, MoonIcon, ResetIcon, SunIcon } from \"@radix-ui/react-icons\";\nimport * as React from \"react\";\n\nimport { Tooltip } from \"@mantine/core\";\nimport { } from \"@radix-ui/react-icons\";\nimport { useTheme } from \"../../../theme-context\";\nimport { mantineTheme } from \"../../../themes/mantine/mantine-theme\";\nimport { shadcnTheme } from \"../../../themes/shadcn/shadcn-theme\";\nimport { MANTINE_DEFAULT_COLORS, SHADCN_DEFAULT_COLORS } from \"../../../utils/colors\";\nimport { getSecondaryPalette } from \"../../../utils/functions\";\n\nexport interface IThemeConfig {\n style: string;\n color: string;\n radius: string;\n}\n\nconst BUTTON_LABEL = \"Change Theme\";\nexport default function ChangeThemeButton() {\n return (\n \n \n \n \n\n \n \n \n \n );\n}\n\nfunction Customizer() {\n const { setTheme } = useTheme();\n const { colorScheme, setColorScheme } = useMantineColorScheme();\n\n const [localThemeConfig, setLocalThemeConfig, removeLocalThemeConfig] = useLocalStorage({\n key: \"mantine-theme\",\n });\n\n const [baseColors, setBaseColors] = React.useState(SHADCN_DEFAULT_COLORS);\n const [config, setConfig] = React.useState({\n style: \"shadcn\",\n color: SHADCN_DEFAULT_COLORS[0].id,\n radius: \"sm\",\n });\n\n React.useEffect(() => {\n if (localThemeConfig) {\n setConfig(localThemeConfig);\n\n if (localThemeConfig?.style === \"shadcn\") {\n setBaseColors(SHADCN_DEFAULT_COLORS);\n } else {\n setBaseColors(MANTINE_DEFAULT_COLORS);\n }\n }\n }, [localThemeConfig]);\n\n const mantineColorButtons = baseColors.map((color: any) => (\n }\n key={color.id}\n onClick={() => {\n const updatedConfig = {\n ...config,\n color: color.id,\n };\n setConfig(updatedConfig);\n setLocalThemeConfig(updatedConfig);\n\n setTheme((currentTheme) => ({\n ...currentTheme,\n primaryColor: color.id,\n primaryShade: color?.primaryShade as unknown as MantineColorShade,\n colors: {\n ...currentTheme?.colors,\n secondary: getSecondaryPalette(config.style, color.id) as unknown as MantineColorsTuple,\n dark: getSecondaryPalette(config.style, color.id) as unknown as MantineColorsTuple,\n },\n }));\n }}\n >\n {color.name}\n \n ));\n\n return (\n \n \n \n \n {BUTTON_LABEL}\n \n Pick a style and color for your components.\n \n \n\n {\n setConfig({\n ...config,\n color: SHADCN_DEFAULT_COLORS[0].id,\n style: \"shadcn\",\n radius: \"sm\",\n });\n setTheme({\n ...shadcnTheme,\n primaryColor: SHADCN_DEFAULT_COLORS[0].id,\n });\n setBaseColors(SHADCN_DEFAULT_COLORS);\n removeLocalThemeConfig();\n }}\n >\n \n \n \n\n \n Style\n\n \n {\n //TODO: Refactoring needed\n const updatedConfig = {\n ...config,\n style: \"mantine\",\n color: MANTINE_DEFAULT_COLORS[0].id,\n };\n setConfig(updatedConfig);\n setLocalThemeConfig(updatedConfig);\n setTheme(() => ({\n ...mantineTheme,\n primaryColor: MANTINE_DEFAULT_COLORS[0].id,\n }));\n }}\n >\n Mantine\n \n {\n const updatedConfig = {\n ...config,\n style: \"shadcn\",\n color: SHADCN_DEFAULT_COLORS[0].id,\n };\n setConfig(updatedConfig);\n setLocalThemeConfig(updatedConfig);\n setTheme(() => ({\n ...shadcnTheme,\n primaryColor: SHADCN_DEFAULT_COLORS[0].id,\n }));\n }}\n >\n Shadcn\n \n\n \n RadixUI\n \n \n \n \n \n \n \n Color\n {mantineColorButtons}\n \n \n Radius\n \n {[\"xs\", \"sm\", \"md\", \"lg\", \"xl\"].map((value: string) => {\n return (\n {\n const updatedConfig = {\n ...config,\n radius: value,\n };\n setConfig(updatedConfig);\n setLocalThemeConfig(updatedConfig);\n setTheme((prev) => ({\n ...prev,\n defaultRadius: value,\n }));\n }}\n >\n {value}\n \n );\n })}\n \n \n \n Mode\n \n setColorScheme(\"light\")}\n >\n \n \n Light\n \n \n setColorScheme(\"dark\")}\n >\n \n \n Dark\n \n \n \n \n \n \n );\n}\n" }, { "path": "src/components/custom/change-theme-section/change-theme-section.tsx", "content": "import { Button, Group } from \"@mantine/core\";\nimport ChangeThemeButton from \"./change-theme-button\";\nimport CopyThemeCodeButton from \"./copy-theme-code-button\";\n\nconst ChangeThemeSection = ({ isBlockPage = false }: { isBlockPage?: boolean }) => {\n return (\n \n \n {isBlockPage ? (\n \n ) : (\n \n )}\n \n );\n};\n\nexport default ChangeThemeSection;\n" }, { "path": "src/components/custom/change-theme-section/copy-theme-code-button.tsx", "content": "import { CodeHighlightTabs } from \"@mantine/code-highlight\";\nimport {\n ActionIcon,\n Anchor,\n Box,\n Button,\n CloseIcon,\n Flex,\n Group,\n MantineThemeOverride,\n Modal,\n ScrollArea,\n Text,\n Title,\n} from \"@mantine/core\";\nimport { useDisclosure } from \"@mantine/hooks\";\nimport { CssIcon, TypeScriptIcon } from \"@mantinex/dev-icons\";\nimport { ExternalLinkIcon } from \"@radix-ui/react-icons\";\nimport { IconInfoCircle } from \"@tabler/icons-react\";\nimport { useTheme } from \"../../../theme-context\";\nimport { generatedMantineCssStyles } from \"../../../themes/generated/generatedMantineCssStyles\";\nimport { generatedMantineCssVariableResolver } from \"../../../themes/generated/generatedMantineCssVariableResolver\";\nimport { generatedMantineTheme } from \"../../../themes/generated/generatedMantineTheme\";\nimport { generatedShadcnCssStyles } from \"../../../themes/generated/generatedShadcnCssStyles\";\nimport { generatedShadcnCssVariableResolver } from \"../../../themes/generated/generatedShadcnCssVariableResolver\";\nimport { generatedShadcnTheme } from \"../../../themes/generated/generatedShadcnTheme\";\nimport { removeStringPlaceholders } from \"../../../utils/functions\";\n\nconst CopyThemeCodeButton = () => {\n const { theme } = useTheme();\n const [opened, { open, close }] = useDisclosure(false);\n\n const tsIcon = ;\n const cssIcon = ;\n\n const getGeneratedTheme = (theme: MantineThemeOverride) => {\n if (theme.other?.style === \"mantine\") {\n const color = theme.primaryColor as keyof typeof generatedMantineTheme;\n return generatedMantineTheme[color];\n }\n\n if (theme.other?.style === \"shadcn\") {\n const color = theme.primaryColor as keyof typeof generatedShadcnTheme;\n return generatedShadcnTheme[color];\n }\n };\n\n const getGeneratedCssVariables = (theme: MantineThemeOverride) => {\n if (theme.other?.style === \"mantine\") {\n const color = theme.primaryColor as keyof typeof generatedMantineTheme;\n return generatedMantineCssVariableResolver[color];\n }\n\n if (theme.other?.style === \"shadcn\") {\n const color = theme.primaryColor as keyof typeof generatedShadcnTheme;\n return removeStringPlaceholders(generatedShadcnCssVariableResolver[color]);\n }\n };\n\n const getGeneratedCssStyles = (theme: MantineThemeOverride) => {\n if (theme.other?.style === \"mantine\") {\n return generatedMantineCssStyles;\n }\n\n if (theme.other?.style === \"shadcn\") {\n return generatedShadcnCssStyles;\n }\n };\n\n return (\n <>\n \n \n \n Current Theme\n \n \n \n \n \n Font\n \n \n \n \n \n \n \n How To use\n \n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n );\n};\n\nexport default CopyThemeCodeButton;\n" }, { "path": "src/components/custom/components-demo/buttons/action-icon-demo.tsx", "content": "import { ActionIcon } from '@mantine/core';\nimport { IconAdjustments } from '@tabler/icons-react';\nimport { interactiveVariantsControl } from '../../../../utils/variants-data';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { ActionIcon } from '@mantine/core';\nimport { IconAdjustments } from '@tabler/icons-react';\n\nfunction Demo() {\n return (\n \n \n \n );\n}\n`;\n\nfunction Wrapper(props: any) {\n return (\n \n \n \n );\n}\n\nexport const actionIconDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n centered: true,\n controls: [\n interactiveVariantsControl,\n { prop: 'color', type: 'color', initialValue: \"\", libraryValue: \"\" },\n { prop: 'size', type: 'size', initialValue: 'md', libraryValue: 'md' },\n { prop: 'radius', type: 'size', initialValue: 'sm', libraryValue: 'sm' },\n { prop: 'disabled', type: 'boolean', initialValue: false, libraryValue: false },\n\n ],\n};\n" }, { "path": "src/components/custom/components-demo/buttons/button-demo.tsx", "content": "import { Button } from '@mantine/core';\nimport { interactiveVariantsControl } from '../../../../utils/variants-data';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Button } from '@mantine/core';\n\nfunction Demo() {\n return Button;\n}\n`;\n\nfunction Wrapper(props: any) {\n return ;\n}\n\nexport const buttonDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n centered: true,\n controls: [\n interactiveVariantsControl,\n { type: 'color', prop: 'color', initialValue: \"\", libraryValue: \"\" },\n { type: 'size', prop: 'size', initialValue: 'sm', libraryValue: 'sm' },\n { type: 'size', prop: 'radius', initialValue: 'sm', libraryValue: 'sm' },\n { prop: 'disabled', type: 'boolean', initialValue: false, libraryValue: false },\n { prop: 'loading', type: 'boolean', initialValue: false, libraryValue: false },\n ],\n};" }, { "path": "src/components/custom/components-demo/buttons/close-button-demo.tsx", "content": "import { CloseButton } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { CloseButton } from '@mantine/core';\n\nfunction Demo() {\n return ;\n}\n`;\n\nfunction Wrapper(props: any) {\n return ;\n}\n\nexport const closeButtonDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n centered: true,\n controls: [\n { prop: 'size', type: 'size', initialValue: 'md', libraryValue: 'md' },\n {\n prop: 'variant',\n type: 'segmented',\n data: ['transparent', 'subtle'],\n libraryValue: 'subtle',\n initialValue: 'subtle',\n },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/charts/area-chart-demo.tsx", "content": "import { AreaChart } from '@mantine/charts';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { data, dataCode } from './data/_area-data';\n\nconst code = `\nimport { AreaChart } from '@mantine/charts';\nimport { data } from './data';\n\n\nfunction Demo() {\n return (\n \n );\n}\n`;\n\nfunction Wrapper(props: any) {\n return (\n \n );\n}\n\nexport const areaChartDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code: [\n { code, language: 'tsx', fileName: 'Demo.tsx' },\n { code: dataCode, language: 'tsx', fileName: 'data.ts' },\n ],\n controls: [\n {\n type: 'select',\n prop: 'curveType',\n initialValue: 'linear',\n libraryValue: null,\n data: [\n { value: 'bump', label: 'bump' },\n { value: 'linear', label: 'linear' },\n { value: 'natural', label: 'natural' },\n { value: 'monotone', label: 'monotone' },\n { value: 'step', label: 'step' },\n { value: 'stepBefore', label: 'stepBefore' },\n { value: 'stepAfter', label: 'stepAfter' },\n ],\n },\n {\n type: 'segmented',\n prop: 'tickLine',\n initialValue: 'y',\n libraryValue: 'y',\n transformLabel: false,\n data: [\n { value: 'x', label: 'x' },\n { value: 'y', label: 'y' },\n { value: 'xy', label: 'xy' },\n { value: 'none', label: 'none' },\n ],\n },\n {\n type: 'segmented',\n prop: 'gridAxis',\n initialValue: 'x',\n libraryValue: 'x',\n transformLabel: false,\n data: [\n { value: 'x', label: 'x' },\n { value: 'y', label: 'y' },\n { value: 'xy', label: 'xy' },\n { value: 'none', label: 'none' },\n ],\n },\n {\n type: 'boolean',\n prop: 'withGradient',\n initialValue: true,\n libraryValue: true,\n },\n {\n type: 'boolean',\n prop: 'withXAxis',\n initialValue: true,\n libraryValue: true,\n },\n {\n type: 'boolean',\n prop: 'withYAxis',\n initialValue: true,\n libraryValue: true,\n },\n {\n type: 'boolean',\n prop: 'withDots',\n initialValue: true,\n libraryValue: true,\n },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/charts/bar-chart-demo.tsx", "content": "import { BarChart } from '@mantine/charts';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { data, dataCode } from './data/_bar-data';\n\nconst code = `\nimport { BarChart } from '@mantine/charts';\nimport { data } from './data';\n\n\nfunction Demo() {\n return (\n \n );\n}\n`;\n\nfunction Wrapper(props: any) {\n return (\n \n );\n}\n\nexport const barchartDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code: [\n { code, language: 'tsx', fileName: 'Demo.tsx' },\n { code: dataCode, language: 'tsx', fileName: 'data.ts' },\n ],\n controls: [\n {\n type: 'segmented',\n prop: 'tickLine',\n initialValue: 'y',\n libraryValue: '__',\n transformLabel: false,\n data: [\n { value: 'x', label: 'x' },\n { value: 'y', label: 'y' },\n { value: 'xy', label: 'xy' },\n { value: 'none', label: 'none' },\n ],\n },\n {\n type: 'segmented',\n prop: 'gridAxis',\n initialValue: 'x',\n libraryValue: 'x',\n transformLabel: false,\n data: [\n { value: 'x', label: 'x' },\n { value: 'y', label: 'y' },\n { value: 'xy', label: 'xy' },\n { value: 'none', label: 'none' },\n ],\n },\n {\n type: 'boolean',\n prop: 'withXAxis',\n initialValue: true,\n libraryValue: true,\n },\n {\n type: 'boolean',\n prop: 'withYAxis',\n initialValue: true,\n libraryValue: true,\n },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/charts/bubble-chart-demo.tsx", "content": "import { BubbleChart } from '@mantine/charts';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { data, dataCode } from './data/_bubble-data';\n\nconst code = `\nimport { BubbleChart } from '@mantine/charts';\nimport { data } from './data';\n\n\nfunction Demo() {\n return (\n \n );\n}\n`;\n\nfunction Demo(props: any) {\n return (\n \n );\n}\n\nexport const bubbleChartDemo: MantineDemo = {\n type: 'configurator',\n component: Demo,\n code: [\n { code, language: 'tsx', fileName: 'Demo.tsx' },\n { code: dataCode, language: 'tsx', fileName: 'data.ts' },\n ],\n controls: [{ type: 'color', prop: 'color', initialValue: '', libraryValue: '' }],\n};\n" }, { "path": "src/components/custom/components-demo/charts/composite-chart-demo.tsx", "content": "import { CompositeChart } from '@mantine/charts';\nimport { data, dataCode } from './data/_area-data';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { CompositeChart } from '@mantine/charts';\nimport { data } from './data';\n\n\nfunction Demo() {\n return (\n \n );\n}\n`;\n\nfunction Wrapper(props: any) {\n return (\n \n );\n}\n\nexport const compositeChartDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code: [\n { code, language: 'tsx', fileName: 'Demo.tsx' },\n { code: dataCode, language: 'tsx', fileName: 'data.ts' },\n ],\n controls: [\n {\n type: 'select',\n prop: 'curveType',\n initialValue: 'linear',\n libraryValue: null,\n data: [\n { value: 'bump', label: 'bump' },\n { value: 'linear', label: 'linear' },\n { value: 'natural', label: 'natural' },\n { value: 'monotone', label: 'monotone' },\n { value: 'step', label: 'step' },\n { value: 'stepBefore', label: 'stepBefore' },\n { value: 'stepAfter', label: 'stepAfter' },\n ],\n },\n {\n type: 'segmented',\n prop: 'tickLine',\n initialValue: 'y',\n libraryValue: 'y',\n transformLabel: false,\n data: [\n { value: 'x', label: 'x' },\n { value: 'y', label: 'y' },\n { value: 'xy', label: 'xy' },\n { value: 'none', label: 'none' },\n ],\n },\n {\n type: 'segmented',\n prop: 'gridAxis',\n initialValue: 'x',\n libraryValue: 'x',\n transformLabel: false,\n data: [\n { value: 'x', label: 'x' },\n { value: 'y', label: 'y' },\n { value: 'xy', label: 'xy' },\n { value: 'none', label: 'none' },\n ],\n },\n {\n type: 'boolean',\n prop: 'withXAxis',\n initialValue: true,\n libraryValue: true,\n },\n {\n type: 'boolean',\n prop: 'withYAxis',\n initialValue: true,\n libraryValue: true,\n },\n {\n type: 'boolean',\n prop: 'withDots',\n initialValue: true,\n libraryValue: true,\n },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/charts/data/_area-data.ts", "content": "export const data = [\n {\n date: 'Mar 22',\n Apples: 2890,\n Oranges: 2338,\n Tomatoes: 2452,\n },\n {\n date: 'Mar 23',\n Apples: 2756,\n Oranges: 2103,\n Tomatoes: 2402,\n },\n {\n date: 'Mar 24',\n Apples: 3322,\n Oranges: 986,\n Tomatoes: 1821,\n },\n {\n date: 'Mar 25',\n Apples: 3470,\n Oranges: 2108,\n Tomatoes: 2809,\n },\n {\n date: 'Mar 26',\n Apples: 3129,\n Oranges: 1726,\n Tomatoes: 2290,\n },\n];\n\nexport const dataCode = `\nexport const data = [\n {\n date: 'Mar 22',\n Apples: 2890,\n Oranges: 2338,\n Tomatoes: 2452,\n },\n {\n date: 'Mar 23',\n Apples: 2756,\n Oranges: 2103,\n Tomatoes: 2402,\n },\n {\n date: 'Mar 24',\n Apples: 3322,\n Oranges: 986,\n Tomatoes: 1821,\n },\n {\n date: 'Mar 25',\n Apples: 3470,\n Oranges: 2108,\n Tomatoes: 2809,\n },\n {\n date: 'Mar 26',\n Apples: 3129,\n Oranges: 1726,\n Tomatoes: 2290,\n },\n];\n`;\n\nexport const splitData = [\n {\n date: 'Mar 22',\n Apples: 110,\n },\n {\n date: 'Mar 23',\n Apples: 60,\n },\n {\n date: 'Mar 24',\n Apples: -80,\n },\n {\n date: 'Mar 25',\n Apples: 40,\n },\n {\n date: 'Mar 26',\n Apples: -40,\n },\n {\n date: 'Mar 27',\n Apples: 80,\n },\n];\n\nexport const splitDataCode = `\nexport const data = [\n {\n date: 'Mar 22',\n Apples: 110,\n },\n {\n date: 'Mar 23',\n Apples: 60,\n },\n {\n date: 'Mar 24',\n Apples: -80,\n },\n {\n date: 'Mar 25',\n Apples: 40,\n },\n {\n date: 'Mar 26',\n Apples: -40,\n },\n {\n date: 'Mar 27',\n Apples: 80,\n },\n];\n`;\n\nexport const connectNullsData = [\n {\n date: 'Mar 22',\n Apples: 110,\n },\n {\n date: 'Mar 23',\n Apples: 60,\n },\n {\n date: 'Mar 24',\n Apples: 80,\n },\n {\n date: 'Mar 25',\n Apples: null,\n },\n {\n date: 'Mar 26',\n Apples: null,\n },\n {\n date: 'Mar 27',\n Apples: 40,\n },\n {\n date: 'Mar 28',\n Apples: 120,\n },\n {\n date: 'Mar 29',\n Apples: 80,\n },\n];\n\nexport const connectNullsDataCode = `\nexport const data = [\n {\n date: 'Mar 22',\n Apples: 110,\n },\n {\n date: 'Mar 23',\n Apples: 60,\n },\n {\n date: 'Mar 24',\n Apples: 80,\n },\n {\n date: 'Mar 25',\n Apples: null,\n },\n {\n date: 'Mar 26',\n Apples: null,\n },\n {\n date: 'Mar 27',\n Apples: 40,\n },\n {\n date: 'Mar 28',\n Apples: 120,\n },\n {\n date: 'Mar 29',\n Apples: 80,\n },\n];\n`;\n\nexport const yScaleData = [\n {\n date: 'Mar 22',\n Apples: 50,\n },\n {\n date: 'Mar 23',\n Apples: 60,\n },\n {\n date: 'Mar 24',\n Apples: 40,\n },\n {\n date: 'Mar 25',\n Apples: 30,\n },\n {\n date: 'Mar 26',\n Apples: 0,\n },\n {\n date: 'Mar 27',\n Apples: 20,\n },\n {\n date: 'Mar 28',\n Apples: 20,\n },\n {\n date: 'Mar 29',\n Apples: 10,\n },\n];\n\nexport const yScaleDataCode = `\nexport const data = [\n {\n date: 'Mar 22',\n Apples: 50,\n },\n {\n date: 'Mar 23',\n Apples: 60,\n },\n {\n date: 'Mar 24',\n Apples: 40,\n },\n {\n date: 'Mar 25',\n Apples: 30,\n },\n {\n date: 'Mar 26',\n Apples: 0,\n },\n {\n date: 'Mar 27',\n Apples: 20,\n },\n {\n date: 'Mar 28',\n Apples: 20,\n },\n {\n date: 'Mar 29',\n Apples: 10,\n },\n];\n`;\n\nexport const biaxialData = [\n { name: 'Page A', uv: 4000, pv: 2400 },\n { name: 'Page B', uv: 3000, pv: 1398 },\n { name: 'Page C', uv: 2000, pv: 9800 },\n { name: 'Page D', uv: 2780, pv: 3908 },\n { name: 'Page E', uv: 1890, pv: 4800 },\n { name: 'Page F', uv: 2390, pv: 3800 },\n { name: 'Page G', uv: 3490, pv: 4300 },\n];\n\nexport const biaxialDataCode = `\nexport const biaxialData = [\n { name: 'Page A', uv: 4000, pv: 2400 },\n { name: 'Page B', uv: 3000, pv: 1398 },\n { name: 'Page C', uv: 2000, pv: 9800 },\n { name: 'Page D', uv: 2780, pv: 3908 },\n { name: 'Page E', uv: 1890, pv: 4800 },\n { name: 'Page F', uv: 2390, pv: 3800 },\n { name: 'Page G', uv: 3490, pv: 4300 },\n];\n`;\n" }, { "path": "src/components/custom/components-demo/charts/data/_bar-data.ts", "content": "export const data = [\n { month: 'January', Smartphones: 1200, Laptops: 900, Tablets: 200 },\n { month: 'February', Smartphones: 1900, Laptops: 1200, Tablets: 400 },\n { month: 'March', Smartphones: 400, Laptops: 1000, Tablets: 200 },\n { month: 'April', Smartphones: 1000, Laptops: 200, Tablets: 800 },\n { month: 'May', Smartphones: 800, Laptops: 1400, Tablets: 1200 },\n { month: 'June', Smartphones: 750, Laptops: 600, Tablets: 1000 },\n];\n\nexport const dataCode = `\nexport const data = [\n { month: 'January', Smartphones: 1200, Laptops: 900, Tablets: 200 },\n { month: 'February', Smartphones: 1900, Laptops: 1200, Tablets: 400 },\n { month: 'March', Smartphones: 400, Laptops: 1000, Tablets: 200 },\n { month: 'April', Smartphones: 1000, Laptops: 200, Tablets: 800 },\n { month: 'May', Smartphones: 800, Laptops: 1400, Tablets: 1200 },\n { month: 'June', Smartphones: 750, Laptops: 600, Tablets: 1000 },\n];\n`;\n\nexport const waterfallData = [\n { item: 'TaxRate', 'Effective tax rate in %': 21, color: 'blue' },\n { item: 'Foreign inc.', 'Effective tax rate in %': -15.5, color: 'teal' },\n { item: 'Perm. diff.', 'Effective tax rate in %': -3, color: 'teal' },\n { item: 'Credits', 'Effective tax rate in %': -3, color: 'teal' },\n { item: 'Loss carryf. ', 'Effective tax rate in %': -2, color: 'teal' },\n { item: 'Law changes', 'Effective tax rate in %': 2, color: 'red' },\n { item: 'Reven. adj.', 'Effective tax rate in %': 4, color: 'red' },\n { item: 'ETR', 'Effective tax rate in %': 3.5, color: 'blue', standalone: true },\n];\n\nexport const waterfallCode = `\nexport const data =\n[\n { item: 'TaxRate', 'Effective tax rate in %': 21, color: 'blue' },\n { item: 'Foreign inc.', 'Effective tax rate in %': -15.5, color: 'teal' },\n { item: 'Perm. diff.', 'Effective tax rate in %': -3, color: 'teal' },\n { item: 'Credits', 'Effective tax rate in %': -3, color: 'teal' },\n { item: 'Loss carryf. ', 'Effective tax rate in %': -2, color: 'teal' },\n { item: 'Law changes', 'Effective tax rate in %': 2, color: 'red' },\n { item: 'Reven. adj.', 'Effective tax rate in %': 4, color: 'red' },\n { item: 'ETR', 'Effective tax rate in %': 3.5, color: 'blue', standalone: true },\n];\n`;\n\nexport const zeroData = [\n { month: 'January', Smartphones: 1200, Laptops: 900, Tablets: 0 },\n { month: 'February', Smartphones: 1900, Laptops: 1200, Tablets: 400 },\n { month: 'March', Smartphones: 0, Laptops: 1000, Tablets: 200 },\n { month: 'April', Smartphones: 1000, Laptops: 200, Tablets: 800 },\n { month: 'May', Smartphones: 800, Laptops: 0, Tablets: 1200 },\n { month: 'June', Smartphones: 0, Laptops: 600, Tablets: 1000 },\n];\n\nexport const zeroDataCode = `export const zeroData = [\n { month: 'January', Smartphones: 1200, Laptops: 900, Tablets: 0 },\n { month: 'February', Smartphones: 1900, Laptops: 1200, Tablets: 400 },\n { month: 'March', Smartphones: 0, Laptops: 1000, Tablets: 200 },\n { month: 'April', Smartphones: 1000, Laptops: 200, Tablets: 800 },\n { month: 'May', Smartphones: 800, Laptops: 0, Tablets: 1200 },\n { month: 'June', Smartphones: 0, Laptops: 600, Tablets: 1000 },\n];`;\n\nexport const mixedStackData = [\n { month: 'January', Smartphones: 1200, Laptops: 500, Tablets: 800 },\n { month: 'February', Smartphones: 1900, Laptops: 1200, Tablets: 400 },\n { month: 'March', Smartphones: 1800, Laptops: 1000, Tablets: 200 },\n { month: 'April', Smartphones: 1000, Laptops: 200, Tablets: 800 },\n { month: 'May', Smartphones: 800, Laptops: 200, Tablets: 700 },\n { month: 'June', Smartphones: 800, Laptops: 500, Tablets: 200 },\n];\n\nexport const mixedStackDataCode = `export const mixedStack = [\n { month: 'January', Smartphones: 1200, Laptops: 500, Tablets: 800 },\n { month: 'February', Smartphones: 1900, Laptops: 1200, Tablets: 400 },\n { month: 'March', Smartphones: 1800, Laptops: 1000, Tablets: 200 },\n { month: 'April', Smartphones: 1000, Laptops: 200, Tablets: 800 },\n { month: 'May', Smartphones: 800, Laptops: 200, Tablets: 700 },\n { month: 'June', Smartphones: 800, Laptops: 500, Tablets: 200 },\n];`;\n" }, { "path": "src/components/custom/components-demo/charts/data/_bubble-data.ts", "content": "export const data = [\n { hour: '08:00', index: 1, value: 150 },\n { hour: '10:00', index: 1, value: 180 },\n { hour: '12:00', index: 1, value: 280 },\n { hour: '14:00', index: 1, value: 120 },\n { hour: '16:00', index: 1, value: 380 },\n { hour: '18:00', index: 1, value: 400 },\n { hour: '20:00', index: 1, value: 180 },\n { hour: '22:00', index: 1, value: 100 },\n];\n\nexport const dataCode = `\nexport const data = [\n { hour: '08:00', index: 1, value: 150 },\n { hour: '10:00', index: 1, value: 166 },\n { hour: '12:00', index: 1, value: 170 },\n { hour: '14:00', index: 1, value: 150 },\n { hour: '16:00', index: 1, value: 200 },\n { hour: '18:00', index: 1, value: 400 },\n { hour: '20:00', index: 1, value: 100 },\n { hour: '22:00', index: 1, value: 160 },\n];\n`;\n" }, { "path": "src/components/custom/components-demo/charts/data/_donut-data.ts", "content": "export const data = [\n { name: 'USA', value: 400, color: 'indigo.6' },\n { name: 'India', value: 300, color: 'yellow.6' },\n { name: 'Japan', value: 100, color: 'teal.6' },\n { name: 'Other', value: 200, color: 'gray.6' },\n];\n\nexport const dataCode = `\nexport const data = [\n { name: 'USA', value: 400, color: 'indigo.6' },\n { name: 'India', value: 300, color: 'yellow.6' },\n { name: 'Japan', value: 100, color: 'teal.6' },\n { name: 'Other', value: 200, color: 'gray.6' },\n];\n`;\n" }, { "path": "src/components/custom/components-demo/charts/data/_pie-data.ts", "content": "export const data = [\n { name: 'USA', value: 400, color: 'indigo.6' },\n { name: 'India', value: 300, color: 'yellow.6' },\n { name: 'Japan', value: 300, color: 'teal.6' },\n { name: 'Other', value: 200, color: 'gray.6' },\n];\n\nexport const dataCode = `\nexport const data = [\n { name: 'USA', value: 400, color: 'indigo.6' },\n { name: 'India', value: 300, color: 'yellow.6' },\n { name: 'Japan', value: 300, color: 'teal.6' },\n { name: 'Other', value: 200, color: 'gray.6' },\n];\n`;\n" }, { "path": "src/components/custom/components-demo/charts/data/_radar-data.ts", "content": "export const data = [\n {\n product: 'Apples',\n sales: 120,\n },\n {\n product: 'Oranges',\n sales: 98,\n },\n {\n product: 'Tomatoes',\n sales: 86,\n },\n {\n product: 'Grapes',\n sales: 99,\n },\n {\n product: 'Bananas',\n sales: 85,\n },\n {\n product: 'Lemons',\n sales: 65,\n },\n];\n\nexport const dataCode = `\nexport const data = [\n {\n product: 'Apples',\n sales: 120,\n },\n {\n product: 'Oranges',\n sales: 98,\n },\n {\n product: 'Tomatoes',\n sales: 86,\n },\n {\n product: 'Grapes',\n sales: 99,\n },\n {\n product: 'Bananas',\n sales: 85,\n },\n {\n product: 'Lemons',\n sales: 65,\n },\n];\n`;\n\nexport const multiData = [\n {\n product: 'Apples',\n 'Sales January': 120,\n 'Sales February': 100,\n },\n {\n product: 'Oranges',\n 'Sales January': 98,\n 'Sales February': 90,\n },\n {\n product: 'Tomatoes',\n 'Sales January': 86,\n 'Sales February': 70,\n },\n {\n product: 'Grapes',\n 'Sales January': 99,\n 'Sales February': 80,\n },\n {\n product: 'Bananas',\n 'Sales January': 85,\n 'Sales February': 120,\n },\n {\n product: 'Lemons',\n 'Sales January': 65,\n 'Sales February': 150,\n },\n];\n\nexport const multiDataCode = `\nexport const data = [\n {\n product: 'Apples',\n 'Sales January': 120,\n 'Sales February': 100,\n },\n {\n product: 'Oranges',\n 'Sales January': 98,\n 'Sales February': 90,\n },\n {\n product: 'Tomatoes',\n 'Sales January': 86,\n 'Sales February': 70,\n },\n {\n product: 'Grapes',\n 'Sales January': 99,\n 'Sales February': 80,\n },\n {\n product: 'Bananas',\n 'Sales January': 85,\n 'Sales February': 120,\n },\n {\n product: 'Lemons',\n 'Sales January': 65,\n 'Sales February': 150,\n },\n];`;\n" }, { "path": "src/components/custom/components-demo/charts/data/_scatter-data.ts", "content": "export const data = [\n {\n color: 'blue.5',\n name: 'Group 1',\n data: [\n { age: 25, BMI: 20 },\n { age: 30, BMI: 22 },\n { age: 35, BMI: 18 },\n { age: 40, BMI: 25 },\n { age: 45, BMI: 30 },\n { age: 28, BMI: 15 },\n { age: 22, BMI: 12 },\n { age: 50, BMI: 28 },\n { age: 32, BMI: 19 },\n { age: 48, BMI: 31 },\n { age: 26, BMI: 24 },\n { age: 38, BMI: 27 },\n { age: 42, BMI: 29 },\n { age: 29, BMI: 16 },\n { age: 34, BMI: 23 },\n { age: 44, BMI: 33 },\n { age: 23, BMI: 14 },\n { age: 37, BMI: 26 },\n { age: 49, BMI: 34 },\n { age: 27, BMI: 17 },\n { age: 41, BMI: 32 },\n { age: 31, BMI: 21 },\n { age: 46, BMI: 35 },\n { age: 24, BMI: 13 },\n { age: 33, BMI: 22 },\n { age: 39, BMI: 28 },\n { age: 47, BMI: 30 },\n { age: 36, BMI: 25 },\n { age: 43, BMI: 29 },\n { age: 21, BMI: 11 },\n ],\n },\n];\n\nexport const doubleData = [\n {\n color: 'blue.5',\n name: 'Group 1',\n data: [\n { age: 25, BMI: 20 },\n { age: 30, BMI: 22 },\n { age: 35, BMI: 18 },\n { age: 40, BMI: 25 },\n { age: 45, BMI: 30 },\n { age: 28, BMI: 15 },\n { age: 22, BMI: 12 },\n { age: 50, BMI: 28 },\n { age: 32, BMI: 19 },\n { age: 48, BMI: 31 },\n { age: 26, BMI: 24 },\n { age: 38, BMI: 27 },\n { age: 42, BMI: 29 },\n { age: 29, BMI: 16 },\n { age: 34, BMI: 23 },\n { age: 44, BMI: 33 },\n { age: 23, BMI: 14 },\n { age: 37, BMI: 26 },\n { age: 49, BMI: 34 },\n { age: 27, BMI: 17 },\n { age: 41, BMI: 32 },\n { age: 31, BMI: 21 },\n { age: 46, BMI: 35 },\n { age: 24, BMI: 13 },\n { age: 33, BMI: 22 },\n { age: 39, BMI: 28 },\n { age: 47, BMI: 30 },\n { age: 36, BMI: 25 },\n { age: 43, BMI: 29 },\n { age: 21, BMI: 11 },\n ],\n },\n {\n color: 'red.5',\n name: 'Group 2',\n data: [\n { age: 26, BMI: 21 },\n { age: 31, BMI: 24 },\n { age: 37, BMI: 19 },\n { age: 42, BMI: 27 },\n { age: 29, BMI: 32 },\n { age: 35, BMI: 18 },\n { age: 40, BMI: 23 },\n { age: 45, BMI: 30 },\n { age: 27, BMI: 15 },\n { age: 33, BMI: 20 },\n { age: 38, BMI: 25 },\n { age: 43, BMI: 29 },\n { age: 30, BMI: 16 },\n { age: 36, BMI: 22 },\n { age: 41, BMI: 28 },\n { age: 46, BMI: 33 },\n { age: 28, BMI: 17 },\n { age: 34, BMI: 22 },\n { age: 39, BMI: 26 },\n { age: 44, BMI: 31 },\n { age: 32, BMI: 18 },\n { age: 38, BMI: 23 },\n { age: 43, BMI: 28 },\n { age: 48, BMI: 35 },\n { age: 25, BMI: 14 },\n { age: 31, BMI: 20 },\n { age: 36, BMI: 25 },\n { age: 41, BMI: 30 },\n { age: 29, BMI: 16 },\n ],\n },\n];\n\nexport const spendingsData = [\n {\n color: 'cyan',\n name: 'Average monthly spending',\n data: [\n { age: 25, average_monthly_spending: 1400 },\n { age: 30, average_monthly_spending: 2100 },\n { age: 35, average_monthly_spending: 1800 },\n { age: 40, average_monthly_spending: 2400 },\n { age: 45, average_monthly_spending: 2300 },\n { age: 28, average_monthly_spending: 1600 },\n { age: 22, average_monthly_spending: 1200 },\n { age: 50, average_monthly_spending: 3200 },\n { age: 32, average_monthly_spending: 1900 },\n { age: 48, average_monthly_spending: 2700 },\n { age: 26, average_monthly_spending: 1700 },\n { age: 38, average_monthly_spending: 2200 },\n { age: 42, average_monthly_spending: 2600 },\n { age: 29, average_monthly_spending: 1500 },\n { age: 34, average_monthly_spending: 2000 },\n { age: 44, average_monthly_spending: 2500 },\n { age: 23, average_monthly_spending: 1300 },\n { age: 37, average_monthly_spending: 2100 },\n { age: 49, average_monthly_spending: 2900 },\n { age: 27, average_monthly_spending: 1600 },\n { age: 41, average_monthly_spending: 2500 },\n { age: 31, average_monthly_spending: 1800 },\n { age: 46, average_monthly_spending: 2700 },\n { age: 24, average_monthly_spending: 1400 },\n { age: 33, average_monthly_spending: 2100 },\n { age: 39, average_monthly_spending: 2400 },\n { age: 47, average_monthly_spending: 2800 },\n { age: 36, average_monthly_spending: 2200 },\n { age: 43, average_monthly_spending: 2600 },\n { age: 21, average_monthly_spending: 1100 },\n ],\n },\n];\n\nexport const doubleDataCode = `\nexport const data = [\n {\n color: 'blue.5',\n name: 'Group 1',\n data: [\n { age: 25, BMI: 20 },\n { age: 30, BMI: 22 },\n { age: 35, BMI: 18 },\n { age: 40, BMI: 25 },\n { age: 45, BMI: 30 },\n { age: 28, BMI: 15 },\n { age: 22, BMI: 12 },\n { age: 50, BMI: 28 },\n { age: 32, BMI: 19 },\n { age: 48, BMI: 31 },\n { age: 26, BMI: 24 },\n { age: 38, BMI: 27 },\n { age: 42, BMI: 29 },\n { age: 29, BMI: 16 },\n { age: 34, BMI: 23 },\n { age: 44, BMI: 33 },\n { age: 23, BMI: 14 },\n { age: 37, BMI: 26 },\n { age: 49, BMI: 34 },\n { age: 27, BMI: 17 },\n { age: 41, BMI: 32 },\n { age: 31, BMI: 21 },\n { age: 46, BMI: 35 },\n { age: 24, BMI: 13 },\n { age: 33, BMI: 22 },\n { age: 39, BMI: 28 },\n { age: 47, BMI: 30 },\n { age: 36, BMI: 25 },\n { age: 43, BMI: 29 },\n { age: 21, BMI: 11 },\n ],\n },\n {\n color: 'red.5',\n name: 'Group 2',\n data: [\n { age: 26, BMI: 21 },\n { age: 31, BMI: 24 },\n { age: 37, BMI: 19 },\n { age: 42, BMI: 27 },\n { age: 29, BMI: 32 },\n { age: 35, BMI: 18 },\n { age: 40, BMI: 23 },\n { age: 45, BMI: 30 },\n { age: 27, BMI: 15 },\n { age: 33, BMI: 20 },\n { age: 38, BMI: 25 },\n { age: 43, BMI: 29 },\n { age: 30, BMI: 16 },\n { age: 36, BMI: 22 },\n { age: 41, BMI: 28 },\n { age: 46, BMI: 33 },\n { age: 28, BMI: 17 },\n { age: 34, BMI: 22 },\n { age: 39, BMI: 26 },\n { age: 44, BMI: 31 },\n { age: 32, BMI: 18 },\n { age: 38, BMI: 23 },\n { age: 43, BMI: 28 },\n { age: 48, BMI: 35 },\n { age: 25, BMI: 14 },\n { age: 31, BMI: 20 },\n { age: 36, BMI: 25 },\n { age: 41, BMI: 30 },\n { age: 29, BMI: 16 },\n ],\n },\n];\n`;\n\nexport const dataCode = `export const data = [\n {\n color: 'blue.5',\n name: 'Group 1',\n data: [\n { age: 25, BMI: 20 },\n { age: 30, BMI: 22 },\n { age: 35, BMI: 18 },\n { age: 40, BMI: 25 },\n { age: 45, BMI: 30 },\n { age: 28, BMI: 15 },\n { age: 22, BMI: 12 },\n { age: 50, BMI: 28 },\n { age: 32, BMI: 19 },\n { age: 48, BMI: 31 },\n { age: 26, BMI: 24 },\n { age: 38, BMI: 27 },\n { age: 42, BMI: 29 },\n { age: 29, BMI: 16 },\n { age: 34, BMI: 23 },\n { age: 44, BMI: 33 },\n { age: 23, BMI: 14 },\n { age: 37, BMI: 26 },\n { age: 49, BMI: 34 },\n { age: 27, BMI: 17 },\n { age: 41, BMI: 32 },\n { age: 31, BMI: 21 },\n { age: 46, BMI: 35 },\n { age: 24, BMI: 13 },\n { age: 33, BMI: 22 },\n { age: 39, BMI: 28 },\n { age: 47, BMI: 30 },\n { age: 36, BMI: 25 },\n { age: 43, BMI: 29 },\n { age: 21, BMI: 11 },\n ],\n },\n];`;\n\nexport const spendingsDataCode = `export const spendingsData = [\n {\n color: 'cyan',\n name: 'Average monthly spending',\n data: [\n { age: 25, average_monthly_spending: 1400 },\n { age: 30, average_monthly_spending: 2100 },\n { age: 35, average_monthly_spending: 1800 },\n { age: 40, average_monthly_spending: 2400 },\n { age: 45, average_monthly_spending: 2300 },\n { age: 28, average_monthly_spending: 1600 },\n { age: 22, average_monthly_spending: 1200 },\n { age: 50, average_monthly_spending: 3200 },\n { age: 32, average_monthly_spending: 1900 },\n { age: 48, average_monthly_spending: 2700 },\n { age: 26, average_monthly_spending: 1700 },\n { age: 38, average_monthly_spending: 2200 },\n { age: 42, average_monthly_spending: 2600 },\n { age: 29, average_monthly_spending: 1500 },\n { age: 34, average_monthly_spending: 2000 },\n { age: 44, average_monthly_spending: 2500 },\n { age: 23, average_monthly_spending: 1300 },\n { age: 37, average_monthly_spending: 2100 },\n { age: 49, average_monthly_spending: 2900 },\n { age: 27, average_monthly_spending: 1600 },\n { age: 41, average_monthly_spending: 2500 },\n { age: 31, average_monthly_spending: 1800 },\n { age: 46, average_monthly_spending: 2700 },\n { age: 24, average_monthly_spending: 1400 },\n { age: 33, average_monthly_spending: 2100 },\n { age: 39, average_monthly_spending: 2400 },\n { age: 47, average_monthly_spending: 2800 },\n { age: 36, average_monthly_spending: 2200 },\n { age: 43, average_monthly_spending: 2600 },\n { age: 21, average_monthly_spending: 1100 },\n ],\n },\n];`;\n" }, { "path": "src/components/custom/components-demo/charts/donot-chart-demo.tsx", "content": "import { DonutChart } from '@mantine/charts';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { data, dataCode } from './data/_donut-data';\n\nconst code = `\nimport { DonutChart } from '@mantine/charts';\nimport { data } from './data';\n\nfunction Demo() {\n return ;\n}\n`;\n\nfunction Wrapper(props: any) {\n return ;\n}\n\nexport const donutChartDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code: [\n { fileName: 'Demo.tsx', code, language: 'tsx' },\n { fileName: 'data.ts', code: dataCode, language: 'tsx' },\n ],\n centered: true,\n controls: [\n {\n type: 'number',\n prop: 'size',\n initialValue: 160,\n min: 80,\n max: 300,\n step: 1,\n libraryValue: '__',\n },\n {\n type: 'number',\n prop: 'thickness',\n initialValue: 20,\n min: 2,\n max: 30,\n step: 1,\n libraryValue: '__',\n },\n {\n type: 'number',\n prop: 'paddingAngle',\n initialValue: 10,\n min: 0,\n max: 30,\n step: 1,\n libraryValue: '__',\n },\n {\n type: 'number',\n prop: 'strokeWidth',\n initialValue: 1,\n min: 0,\n max: 5,\n step: 0.1,\n libraryValue: '__',\n },\n { type: 'boolean', prop: 'withLabels', initialValue: true, libraryValue: '__' },\n { type: 'boolean', prop: 'withLabelsLine', initialValue: true, libraryValue: '__' }\n ],\n};\n" }, { "path": "src/components/custom/components-demo/charts/line-chart-demo.tsx", "content": "import { LineChart } from '@mantine/charts';\nimport { data, dataCode } from './data/_area-data';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { LineChart } from '@mantine/charts';\nimport { data } from './data';\n\n\nfunction Demo() {\n return (\n \n );\n}\n`;\n\nfunction Wrapper(props: any) {\n return (\n \n );\n}\n\nexport const lineChartDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code: [\n { code, language: 'tsx', fileName: 'Demo.tsx' },\n { code: dataCode, language: 'tsx', fileName: 'data.ts' },\n ],\n controls: [\n {\n type: 'select',\n prop: 'curveType',\n initialValue: 'linear',\n libraryValue: null,\n data: [\n { value: 'bump', label: 'bump' },\n { value: 'linear', label: 'linear' },\n { value: 'natural', label: 'natural' },\n { value: 'monotone', label: 'monotone' },\n { value: 'step', label: 'step' },\n { value: 'stepBefore', label: 'stepBefore' },\n { value: 'stepAfter', label: 'stepAfter' },\n ],\n },\n {\n type: 'segmented',\n prop: 'tickLine',\n initialValue: 'y',\n libraryValue: 'y',\n transformLabel: false,\n data: [\n { value: 'x', label: 'x' },\n { value: 'y', label: 'y' },\n { value: 'xy', label: 'xy' },\n { value: 'none', label: 'none' },\n ],\n },\n {\n type: 'segmented',\n prop: 'gridAxis',\n initialValue: 'x',\n libraryValue: 'x',\n transformLabel: false,\n data: [\n { value: 'x', label: 'x' },\n { value: 'y', label: 'y' },\n { value: 'xy', label: 'xy' },\n { value: 'none', label: 'none' },\n ],\n },\n {\n type: 'boolean',\n prop: 'withXAxis',\n initialValue: true,\n libraryValue: true,\n },\n {\n type: 'boolean',\n prop: 'withYAxis',\n initialValue: true,\n libraryValue: true,\n },\n {\n type: 'boolean',\n prop: 'withDots',\n initialValue: true,\n libraryValue: true,\n },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/charts/pie-chart-demo.tsx", "content": "import { PieChart } from '@mantine/charts';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { data, dataCode } from './data/_pie-data';\n\nconst code = `\nimport { PieChart } from '@mantine/charts';\nimport { data } from './data';\n\nfunction Demo() {\n return ;\n}\n`;\n\nfunction Wrapper(props: any) {\n return ;\n}\n\nexport const pieChartDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code: [\n { fileName: 'Demo.tsx', code, language: 'tsx' },\n { fileName: 'data.ts', code: dataCode, language: 'tsx' },\n ],\n centered: true,\n controls: [\n {\n type: 'segmented',\n prop: 'labelsPosition',\n initialValue: 'outside',\n libraryValue: '__',\n data: ['inside', 'outside'],\n },\n {\n type: 'segmented',\n prop: 'labelsType',\n initialValue: 'value',\n libraryValue: '__',\n data: ['value', 'percent'],\n },\n {\n type: 'number',\n prop: 'strokeWidth',\n initialValue: 1,\n min: 0,\n max: 2,\n step: 0.1,\n libraryValue: '__',\n },\n {\n type: 'number',\n prop: 'size',\n initialValue: 160,\n min: 80,\n max: 300,\n step: 1,\n libraryValue: '__',\n },\n { type: 'boolean', prop: 'withLabels', initialValue: true, libraryValue: '__' },\n { type: 'boolean', prop: 'withLabelsLine', initialValue: true, libraryValue: '__' },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/charts/radar-chart-demo.tsx", "content": "import { RadarChart } from '@mantine/charts';\nimport { multiData, multiDataCode } from './data/_radar-data';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { RadarChart } from '@mantine/charts';\nimport { data } from './data';\n\n\nfunction Demo() {\n return (\n \n );\n}\n`;\n\nfunction Demo(props: any) {\n return (\n \n );\n}\n\nexport const radarChartDemo: MantineDemo = {\n type: 'configurator',\n component: Demo,\n code: [\n { code, language: 'tsx', fileName: 'Demo.tsx' },\n { code: multiDataCode, language: 'tsx', fileName: 'data.ts' },\n ],\n controls: [\n { type: 'boolean', prop: 'withPolarGrid', initialValue: true, libraryValue: null },\n { type: 'boolean', prop: 'withPolarAngleAxis', initialValue: true, libraryValue: null },\n { type: 'boolean', prop: 'withPolarRadiusAxis', initialValue: true, libraryValue: null },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/charts/scatter-chart-demo.tsx", "content": "import { ScatterChart } from '@mantine/charts';\nimport { doubleData, doubleDataCode } from './data/_scatter-data';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { ScatterChart } from '@mantine/charts';\nimport { data } from './data';\n\nfunction Demo() {\n return (\n \n );\n}\n`;\n\nfunction Demo() {\n return (\n \n );\n}\n\nexport const scatterChartDemo: MantineDemo = {\n type: 'code',\n component: Demo,\n code: [\n { code, language: 'tsx', fileName: 'Demo.tsx' },\n { code: doubleDataCode, language: 'tsx', fileName: 'data.ts' },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/charts/sparkline-demo.tsx", "content": "import { Sparkline } from '@mantine/charts';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Sparkline } from '@mantine/charts';\n\n\nfunction Demo() {\n return (\n \n );\n}\n`;\n\nfunction Wrapper(props: any) {\n return ;\n}\n\nexport const sparklineDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n centered: true,\n controls: [\n {\n type: 'select',\n prop: 'curveType',\n initialValue: 'linear',\n libraryValue: null,\n data: [\n { value: 'bump', label: 'bump' },\n { value: 'linear', label: 'linear' },\n { value: 'natural', label: 'natural' },\n { value: 'monotone', label: 'monotone' },\n { value: 'step', label: 'step' },\n { value: 'stepBefore', label: 'stepBefore' },\n { value: 'stepAfter', label: 'stepAfter' },\n ],\n },\n { type: 'color', prop: 'color', initialValue: '', libraryValue: '' },\n {\n type: 'number',\n prop: 'fillOpacity',\n initialValue: 0.6,\n libraryValue: null,\n min: 0,\n max: 1,\n step: 0.01,\n },\n {\n type: 'boolean',\n prop: 'withGradient',\n initialValue: true,\n libraryValue: true,\n },\n {\n type: 'number',\n prop: 'strokeWidth',\n initialValue: 2,\n libraryValue: null,\n step: 0.1,\n min: 0.5,\n max: 5,\n },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/combobox/autocomplete-demo.tsx", "content": "import { Autocomplete } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { inputControls } from '../../../../utils/input-controls';\n\nconst code = `\nimport { Autocomplete } from '@mantine/core';\n\n\nfunction Demo() {\n return (\n \n );\n}\n`;\n\nfunction Wrapper(props: any) {\n return (\n \n );\n}\n\nexport const autocompleteDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n centered: true,\n maxWidth: 340,\n controls: inputControls,\n};\n" }, { "path": "src/components/custom/components-demo/combobox/multi-select-demo.tsx", "content": "import { MultiSelect } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { inputControls } from '../../../../utils/input-controls';\n\nconst code = `\nimport { MultiSelect } from '@mantine/core';\n\n\nfunction Demo() {\n return (\n \n );\n}\n`;\n\nfunction Wrapper(props: any) {\n return (\n \n );\n}\n\nexport const multiSelectDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n centered: true,\n maxWidth: 340,\n controls: inputControls,\n};\n" }, { "path": "src/components/custom/components-demo/combobox/pills-input-demo.tsx", "content": "import { Pill, PillsInput } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { inputControls } from '../../../../utils/input-controls';\n\nconst code = `\nimport { PillsInput, Pill } from '@mantine/core';\n\n\nfunction Demo() {\n return (\n \n \n React\n Vue\n Svelte\n \n \n \n );\n}\n`;\n\nfunction Wrapper(props: any) {\n return (\n \n \n React\n Vue\n Svelte\n \n \n \n );\n}\n\nexport const pillsInputDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n centered: true,\n maxWidth: 440,\n controls: inputControls,\n};\n" }, { "path": "src/components/custom/components-demo/combobox/select-demo.tsx", "content": "import { Select } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { inputControls } from '../../../../utils/input-controls';\n\nconst code = `\nimport { Select } from '@mantine/core';\n\n\nfunction Demo() {\n return (\n \n );\n}\n`;\n\nfunction Wrapper(props: any) {\n return (\n \n );\n}\n\nexport const selectDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n centered: true,\n maxWidth: 340,\n controls: inputControls,\n};\n" }, { "path": "src/components/custom/components-demo/combobox/tags-input-demo.tsx", "content": "import { TagsInput } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { inputControls } from '../../../../utils/input-controls';\n\nconst code = `\nimport { TagsInput } from '@mantine/core';\n\n\nfunction Demo() {\n return (\n \n );\n}\n`;\n\nfunction Wrapper(props: any) {\n return (\n \n );\n}\n\nexport const tagsInputDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n centered: true,\n maxWidth: 340,\n controls: inputControls,\n};\n" }, { "path": "src/components/custom/components-demo/components-demo.module.css", "content": ".navbarWrapper{\n position: sticky;\n top: 80px;\n z-index: 1;\n}\n\n.content {\n flex: 1;\n}" }, { "path": "src/components/custom/components-demo/components-demo.tsx", "content": "import { Box, Divider, Group, Stack, Title } from \"@mantine/core\";\nimport { demoComponentsNavbarData } from \"../../../utils/data\";\nimport { Demo } from \"../../mantine/demo\";\nimport Navbar from \"../../ui/navbar/navbar\";\nimport classes from \"./components-demo.module.css\";\n\nconst ComponentsDemo = () => {\n \n return (\n \n \n \n \n \n \n \n {demoComponentsNavbarData?.map((item) => {\n return (\n \n {item.label}\n \n {item.links.map((link) => {\n return (\n \n \n {link.label}\n \n {link.demo && }\n \n );\n })}\n \n );\n })}\n \n \n );\n};\n\nexport default ComponentsDemo;\n" }, { "path": "src/components/custom/components-demo/data-display/accordion-demo.tsx", "content": "import { Accordion, AccordionProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Accordion } from '@mantine/core';\n\nfunction Demo() {\n // See groceries data above\n const items = groceries.map((item) => (\n \n {item.value}\n {item.description}\n \n ));\n\n return (\n \n {items}\n \n );\n}\n`;\n\nconst groceries = [\n {\n emoji: '🍎',\n value: 'Apples',\n description:\n 'Crisp and refreshing fruit. Apples are known for their versatility and nutritional benefits. They come in a variety of flavors and are great for snacking, baking, or adding to salads.',\n },\n {\n emoji: '🍌',\n value: 'Bananas',\n description:\n 'Naturally sweet and potassium-rich fruit. Bananas are a popular choice for their energy-boosting properties and can be enjoyed as a quick snack, added to smoothies, or used in baking.',\n },\n {\n emoji: '🥦',\n value: 'Broccoli',\n description:\n 'Nutrient-packed green vegetable. Broccoli is packed with vitamins, minerals, and fiber. It has a distinct flavor and can be enjoyed steamed, roasted, or added to stir-fries.',\n },\n ];\n\nfunction Demo(props: AccordionProps) {\n const items = groceries.map((item) => (\n \n {item.value}\n {item.description}\n \n ));\n\n return (\n \n {items}\n \n );\n}\n\nexport const accordionDemo: MantineDemo = {\n type: 'configurator',\n component: Demo,\n code,\n controls: [\n {\n prop: 'variant',\n type: 'select',\n initialValue: 'default',\n libraryValue: 'default',\n data: [\n { label: 'Default', value: 'default' },\n { label: 'Contained', value: 'contained' },\n { label: 'Filled', value: 'filled' },\n { label: 'Separated', value: 'separated' },\n ],\n },\n { prop: 'radius', type: 'size', libraryValue: 'sm', initialValue: 'sm' },\n {\n prop: 'chevronPosition',\n type: 'segmented',\n data: [\n { label: 'Left', value: 'left' },\n { label: 'Right', value: 'right' },\n ],\n initialValue: 'right',\n libraryValue: 'right',\n },\n { prop: 'disableChevronRotation', type: 'boolean', initialValue: false, libraryValue: false },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/data-display/avatar-demo.tsx", "content": "import { Avatar } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { staticVariantsControl } from '../../../../utils/variants-data';\n\nconst code = `\nimport { Avatar } from '@mantine/core';\n\nfunction Demo() {\n return ;\n}\n`;\n\nexport const avatarDemo: MantineDemo = {\n type: \"configurator\",\n component: Avatar,\n centered: true,\n code,\n controls: [\n { ...(staticVariantsControl as any), initialValue: 'light', libraryValue: 'light' },\n { prop: \"radius\", type: \"size\", initialValue: \"sm\", libraryValue: \"100%\" },\n { prop: \"size\", type: \"size\", initialValue: \"md\", libraryValue: \"md\" },\n { prop: \"color\", type: \"color\", initialValue: \"\", libraryValue: \"\" },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/data-display/background-image-demo.tsx", "content": "import { BackgroundImage, BackgroundImageProps, Box, Center, Text } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nfunction Wrapper(props: BackgroundImageProps) {\n return (\n \n \n
\n \n BackgroundImage component can be used to add any content on image. It is useful for hero\n headers and other similar sections\n \n
\n \n \n );\n}\n\nconst code = `\nimport { BackgroundImage, Center, Text, Box } from '@mantine/core';\n\n\nfunction Demo() {\n return (\n \n \n
\n \n BackgroundImage component can be used to add any content on image. It is useful for hero\n headers and other similar sections\n \n
\n \n \n );\n}\n`;\n\nexport const backgroundImageDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n controls: [{ prop: 'radius', type: 'size', initialValue: 'sm', libraryValue: null }],\n};\n" }, { "path": "src/components/custom/components-demo/data-display/badge-demo.tsx", "content": "import { Badge } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Badge } from '@mantine/core';\n\nfunction Demo() {\n return Badge;\n}\n`;\n\nfunction Wrapper(props: any) {\n return Badge;\n}\n\nexport const badgeDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n centered: true,\n controls: [\n {\n prop: 'variant',\n type: 'select',\n initialValue: 'filled',\n libraryValue: 'filled',\n data: ['filled', 'light', 'outline', 'dot', 'transparent', 'default', 'white'],\n },\n { type: 'color', prop: 'color', initialValue: '', libraryValue: '' },\n { type: 'size', prop: 'size', initialValue: 'md', libraryValue: 'md' },\n { type: 'size', prop: 'radius', initialValue: 'xl', libraryValue: 'xl' },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/data-display/card-demo.tsx", "content": "import { Badge, Button, Card, Group, Image, Text } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Card, Image, Text, Badge, Button, Group } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n \n \n \n\n \n Norway Fjord Adventures\n On Sale\n \n\n \n With Fjord Tours you can explore more of the magical fjord landscapes with tours and\n activities on and around the fjords of Norway\n \n\n \n \n );\n}\n\n`;\n\nfunction Demo() {\n return (\n \n \n \n \n\n \n Norway Fjord Adventures\n On Sale\n \n\n \n With Fjord Tours you can explore more of the magical fjord landscapes with tours and\n activities on and around the fjords of Norway\n \n\n \n \n );\n}\n\nexport const cardDemo: MantineDemo = {\n type: 'code',\n code,\n component: Demo,\n centered: true,\n maxWidth: 340,\n dimmed: true,\n};\n" }, { "path": "src/components/custom/components-demo/data-display/color-swatch-demo.tsx", "content": "import { ColorSwatch, Group } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { ColorSwatch, Group } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n \n \n \n \n );\n}\n`;\n\nfunction Demo() {\n return (\n \n \n \n \n \n );\n}\n\nexport const colorSwatchDemo: MantineDemo = {\n type: 'code',\n component: Demo,\n centered: true,\n code,\n};\n" }, { "path": "src/components/custom/components-demo/data-display/image-demo.tsx", "content": "import { Image } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Image } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n );\n}\n`;\n\nfunction Demo() {\n return (\n \n );\n}\n\nexport const imageDemo: MantineDemo = {\n type: 'code',\n component: Demo,\n code,\n};\n" }, { "path": "src/components/custom/components-demo/data-display/indicator-demo.tsx", "content": "import { Avatar, Indicator, IndicatorProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nfunction Demo(props: IndicatorProps) {\n return (\n \n \n \n );\n}\n\nconst code = `\nimport { Indicator, Avatar } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n \n \n );\n}\n`;\n\nexport const indicatorDemo: MantineDemo = {\n type: 'configurator',\n component: Demo,\n code,\n centered: true,\n controls: [\n { prop: 'color', type: 'color', initialValue: '', libraryValue: '' },\n {\n prop: 'position',\n type: 'select',\n data: [\n { value: 'top-start', label: 'top-start' },\n { value: 'top-center', label: 'top-center' },\n { value: 'top-end', label: 'top-end' },\n { value: 'middle-start', label: 'middle-start' },\n { value: 'middle-center', label: 'middle-center' },\n { value: 'middle-end', label: 'middle-end' },\n { value: 'bottom-start', label: 'bottom-start' },\n { value: 'bottom-center', label: 'bottom-center' },\n { value: 'bottom-end', label: 'bottom-end' },\n ],\n initialValue: 'top-end',\n libraryValue: 'top-end',\n },\n { prop: 'label', type: 'string', initialValue: '', libraryValue: '' },\n { prop: 'offset', type: 'number', initialValue: 0, libraryValue: 10, step: 1, min: 0, max: 56 },\n { prop: 'radius', type: 'size', initialValue: 'xl', libraryValue: 'xl' },\n { prop: 'size', type: 'number', initialValue: 10, libraryValue: 10, step: 1, min: 6, max: 30 },\n { prop: 'disabled', type: 'boolean', initialValue: false, libraryValue: false },\n { prop: 'withBorder', type: 'boolean', initialValue: false, libraryValue: false },\n { prop: 'processing', type: 'boolean', initialValue: false, libraryValue: false },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/data-display/spoiler-demo.tsx", "content": "\nimport { Box, Spoiler, SpoilerProps, Text } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst content = (\n
\n \n \n We Butter the Bread with Butter was founded in 2007 by Marcel Neumann, who was originally\n guitarist for Martin Kesici's band, and Tobias Schultka. The band was originally meant as\n a joke, but progressed into being a more serious musical duo. The name for the band has no\n particular meaning, although its origins were suggested from when the two original members\n were driving in a car operated by Marcel Neumann and an accident almost occurred. Neumann\n found Schultka "so funny that he briefly lost control of the vehicle." Many of their\n songs from this point were covers of German folk tales and nursery rhymes.\n \n
\n);\n\nfunction Wrapper(props: Partial) {\n return (\n \n \n {content}\n \n \n );\n}\n\n\nconst code = `\nimport { Spoiler } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n {/* Content here */}\n \n );\n}\n`;\n\nfunction Demo() {\n return ;\n}\n\nexport const spoilerDemo: MantineDemo = {\n type: 'code',\n code,\n component: Demo,\n};\n" }, { "path": "src/components/custom/components-demo/data-display/theme-icon-demo.tsx", "content": "import { ThemeIcon, ThemeIconProps } from '@mantine/core';\nimport { IconPhoto } from '@tabler/icons-react';\nimport { MantineDemo } from '../../../mantine/demo';\n\nfunction Wrapper(props: ThemeIconProps) {\n return (\n
\n \n \n \n
\n );\n}\n\nconst code = `\nimport { ThemeIcon } from '@mantine/core';\nimport { IconPhoto } from '@tabler/icons-react';\n\nfunction Demo() {\n return (\n \n \n \n );\n}\n`;\n\nexport const themeIconDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n centered: true,\n controls: [\n {\n prop: 'variant',\n type: 'select',\n initialValue: 'filled',\n libraryValue: 'filled',\n data: [\n { label: 'filled', value: 'filled' },\n { label: 'light', value: 'light' },\n { label: 'outline', value: 'outline' },\n { label: 'default', value: 'default' },\n { label: 'white', value: 'white' },\n ],\n },\n { prop: 'radius', type: 'size', initialValue: 'sm', libraryValue: 'sm' },\n { prop: 'size', type: 'size', initialValue: 'md', libraryValue: 'md' },\n { prop: 'color', type: 'color', initialValue: '', libraryValue: '' },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/data-display/timeline-demo.tsx", "content": "import { Box, Text, Timeline, TimelineProps } from '@mantine/core';\nimport { IconGitBranch, IconGitCommit, IconGitPullRequest, IconMessageDots } from '@tabler/icons-react';\nimport { MantineDemo } from '../../../mantine/demo';\n\nfunction TimelineBase({ ...props }: Partial) {\n const displayIcon = true;\n return (\n \n : null}\n title=\"New branch\"\n >\n \n You've created new branch{' '}\n \n fix-notifications\n {' '}\n from master\n \n \n 2 hours ago\n \n \n \n : null} title=\"Commits\">\n \n You've pushed 23 commits to{' '}\n \n fix-notifications\n {' '}\n branch\n \n \n 52 minutes ago\n \n \n \n : null}\n lineVariant=\"dashed\"\n >\n \n You've submitted a pull request{' '}\n \n Fix incorrect notification message (#187)\n {' '}\n \n \n 34 minutes ago\n \n \n \n : null}\n >\n \n \n Robert Gluesticker\n {' '}\n left a code review on your pull request\n \n \n 12 minutes ago\n \n \n \n );\n }\n \n\nfunction Wrapper(props: TimelineProps) {\n return (\n \n \n \n );\n}\n\nconst code = `\nimport { Timeline } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n {/* items */}\n \n );\n}\n`;\n\nexport const timelineDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n controls: [\n { prop: 'color', type: 'color', initialValue: '', libraryValue: '' },\n { prop: 'radius', type: 'size', initialValue: 'xl', libraryValue: 'xl' },\n { prop: 'active', type: 'number', initialValue: 1, libraryValue: null, min: -1, max: 3 },\n { prop: 'reverseActive', type: 'boolean', initialValue: false, libraryValue: false },\n { prop: 'lineWidth', type: 'number', initialValue: 2, libraryValue: 2, min: 1, max: 6 },\n {\n prop: 'bulletSize',\n type: 'number',\n initialValue: 25,\n libraryValue: 20,\n min: 18,\n max: 40,\n step: 1,\n },\n {\n prop: 'align',\n type: 'segmented',\n data: [\n { label: 'Left', value: 'left' },\n { label: 'Right', value: 'right' },\n ],\n initialValue: 'left',\n libraryValue: 'left',\n },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/feedback/alert-demo.tsx", "content": "import { Alert } from '@mantine/core';\nimport { IconInfoCircle } from '@tabler/icons-react';\nimport { staticVariantsControl } from '../../../../utils/variants-data';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Alert } from '@mantine/core';\nimport { IconInfoCircle } from '@tabler/icons-react';\n\nfunction Demo() {\n const icon = ;\n return (\n \n {{children}}\n \n );\n}\n`;\n\nfunction Wrapper(props: any) {\n return } {...props} />;\n}\n\nexport const alertDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n centered: true,\n maxWidth: 400,\n controls: [\n { ...(staticVariantsControl as any), initialValue: 'light', libraryValue: 'light' },\n { type: 'color', prop: 'color', initialValue: '', libraryValue: '' },\n { type: 'size', prop: 'radius', initialValue: 'sm', libraryValue: 'sm' },\n { type: 'boolean', prop: 'withCloseButton', initialValue: false, libraryValue: false },\n { type: 'string', prop: 'title', initialValue: 'Alert title', libraryValue: null },\n {\n type: 'string',\n prop: 'children',\n initialValue:\n 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. At officiis, quae tempore necessitatibus placeat saepe.',\n libraryValue: null,\n },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/feedback/loader-demo.tsx", "content": "import { Loader } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Loader } from '@mantine/core';\n\nfunction Demo() {\n return ;\n}\n`;\n\nexport const loaderDemo: MantineDemo = {\n type: 'configurator',\n component: Loader,\n code,\n centered: true,\n controls: [\n { type: 'color', prop: 'color', initialValue: '', libraryValue: '' },\n { type: 'size', prop: 'size', initialValue: 'md', libraryValue: 'md' },\n {\n type: 'segmented',\n prop: 'type',\n data: ['oval', 'bars', 'dots'],\n initialValue: 'oval',\n libraryValue: 'oval',\n },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/feedback/notification-demo.tsx", "content": "import { Box, Notification, NotificationProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nfunction Wrapper(props: NotificationProps) {\n return (\n \n {}} {...props} />\n \n );\n}\n\nconst code = `\nimport { Notification } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n {{children}}\n \n );\n}\n`;\n\nexport const notificationDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n centered: true,\n code,\n // dimmed: true,\n controls: [\n { prop: 'loading', type: 'boolean', initialValue: false, libraryValue: false },\n { prop: 'withCloseButton', type: 'boolean', initialValue: true, libraryValue: true },\n { prop: 'withBorder', type: 'boolean', initialValue: false, libraryValue: false },\n { prop: 'color', type: 'color', initialValue: '', libraryValue: '' },\n { prop: 'radius', type: 'size', initialValue: 'sm', libraryValue: 'sm' },\n {\n prop: 'title',\n type: 'string',\n initialValue: 'We notify you that',\n libraryValue: '',\n },\n {\n prop: 'children',\n type: 'string',\n initialValue: 'You are now obligated to give a star to Mantine project on GitHub',\n libraryValue: '',\n },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/feedback/progress-demo.tsx", "content": "import { Progress } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Progress } from '@mantine/core';\n\nfunction Demo() {\n return ;\n}\n`;\n\nfunction Demo(props: any) {\n return ;\n}\n\nexport const progressDemo: MantineDemo = {\n type: 'configurator',\n component: Demo,\n code,\n centered: true,\n maxWidth: 400,\n controls: [\n { prop: 'color', type: 'color', initialValue: '', libraryValue: '' },\n { prop: 'radius', type: 'size', initialValue: 'sm', libraryValue: 'sm' },\n { prop: 'size', type: 'size', initialValue: 'md', libraryValue: 'md' },\n {\n prop: 'value',\n type: 'number',\n initialValue: 50,\n max: 100,\n min: 0,\n step: 10,\n libraryValue: '__',\n },\n { prop: 'striped', type: 'boolean', initialValue: false, libraryValue: false },\n { prop: 'animated', type: 'boolean', initialValue: false, libraryValue: false },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/feedback/ring-progress-demo.tsx", "content": "import { RingProgress, RingProgressProps, Text } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nfunction Wrapper(props: RingProgressProps) {\n return (\n \n Hover sections to see tooltips\n \n }\n sections={[\n { value: 40, color: 'cyan', tooltip: 'Documents – 40 Gb' },\n { value: 25, color: 'orange', tooltip: 'Apps – 25 Gb' },\n { value: 15, color: 'grape', tooltip: 'Other – 15 Gb' },\n ]}\n />\n );\n}\n\nconst code = `\nimport { RingProgress } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n Hover sections to see tooltips\n \n }\n sections={[\n { value: 40, color: 'cyan', tooltip: 'Documents – 40 Gb' },\n { value: 25, color: 'orange', tooltip: 'Apps – 25 Gb' },\n { value: 15, color: 'grape', tooltip: 'Other – 15 Gb' },\n ]}\n />\n )\n}\n`;\n\nexport const ringProgressDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n centered: true,\n code,\n controls: [\n {\n prop: 'size',\n type: 'number',\n initialValue: 180,\n step: 10,\n min: 60,\n max: 400,\n libraryValue: '__',\n },\n {\n prop: 'thickness',\n type: 'number',\n initialValue: 12,\n step: 1,\n min: 1,\n max: 40,\n libraryValue: '__',\n },\n { prop: 'roundCaps', type: 'boolean', initialValue: true, libraryValue: false },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/feedback/semi-circle-progress-demo.tsx", "content": "import { SemiCircleProgress } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { SemiCircleProgress } from '@mantine/core';\n\n\nfunction Demo() {\n return (\n \n );\n}\n`;\n\nfunction Wrapper(props: any) {\n return ;\n}\n\nexport const semiCircleProgressDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n centered: true,\n controls: [\n {\n type: 'segmented',\n prop: 'fillDirection',\n initialValue: 'left-to-right',\n data: [\n { label: 'Right to left', value: 'right-to-left' },\n { label: 'Left to right', value: 'left-to-right' },\n ],\n libraryValue: null,\n },\n {\n type: 'segmented',\n prop: 'orientation',\n initialValue: 'up',\n data: [\n { label: 'Up', value: 'up' },\n { label: 'Down', value: 'down' },\n ],\n libraryValue: null,\n },\n { type: 'color', prop: 'filledSegmentColor', initialValue: '', libraryValue: '' },\n { type: 'number', prop: 'size', min: 120, max: 450, initialValue: 200, libraryValue: null },\n { type: 'number', prop: 'thickness', min: 1, max: 20, initialValue: 12, libraryValue: null },\n { type: 'number', prop: 'value', min: 0, max: 100, initialValue: 40, libraryValue: null },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/feedback/skeleton-demo.tsx", "content": "import { Skeleton, SkeletonProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nfunction Wrapper(props: Partial) {\n return (\n
\n \n \n \n \n
\n );\n}\n\nconst code = (props: any) => `\n import { Skeleton } from '@mantine/core';\n\n function Demo() {\n return (\n <>\n \n \n \n \n \n );\n }\n `;\n\nexport const skeletonDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n controls: [{ prop: 'animate', type: 'boolean', initialValue: true, libraryValue: '__' }],\n};\n" }, { "path": "src/components/custom/components-demo/inputs/checkbox-demo.tsx", "content": "import { Checkbox, CheckboxProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Checkbox } from '@mantine/core';\n\n\nfunction Demo() {\n return (\n \n );\n}\n`;\n\nexport const checkboxDemo: MantineDemo = {\n type: 'configurator',\n component: (props: CheckboxProps) => ,\n code,\n centered: true,\n controls: [\n {\n prop: 'labelPosition',\n type: 'segmented',\n data: [\n { value: 'right', label: 'Right' },\n { value: 'left', label: 'Left' },\n ],\n initialValue: 'right',\n libraryValue: 'right',\n },\n { prop: 'label', type: 'string', initialValue: 'I agree to sell my privacy', libraryValue: '' },\n { prop: 'description', type: 'string', initialValue: '', libraryValue: '' },\n { prop: 'error', type: 'string', initialValue: '', libraryValue: '' },\n { prop: 'color', type: 'color', initialValue: '', libraryValue: '' },\n {\n prop: 'variant',\n type: 'segmented',\n data: [\n { value: 'filled', label: 'Filled' },\n { value: 'outline', label: 'Outline' },\n ],\n initialValue: 'filled',\n libraryValue: 'filled',\n },\n { prop: 'radius', type: 'size', initialValue: 'sm', libraryValue: 'sm' },\n { prop: 'size', type: 'size', initialValue: 'sm', libraryValue: 'sm' },\n { prop: 'disabled', type: 'boolean', initialValue: false, libraryValue: false },\n { prop: 'indeterminate', type: 'boolean', initialValue: false, libraryValue: false },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/inputs/checkbox-group-demo.tsx", "content": "import { Checkbox, CheckboxGroupProps, Group } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Checkbox, Group } from '@mantine/core';\n\n\nfunction Demo() {\n return (\n \n \n \n \n \n \n \n \n );\n}\n`;\n\nfunction Wrapper(props: Partial) {\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nexport const checkboxGroupDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n centered: true,\n maxWidth: '100%',\n controls: [\n {\n prop: 'label',\n type: 'string',\n initialValue: 'Select your favorite frameworks/libraries',\n libraryValue: '',\n },\n { prop: 'description', type: 'string', initialValue: 'This is anonymous', libraryValue: '' },\n { prop: 'error', type: 'string', initialValue: '', libraryValue: '' },\n { prop: 'withAsterisk', type: 'boolean', initialValue: true, libraryValue: false },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/inputs/chip-demo.tsx", "content": "import { Chip, ChipProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nfunction Wrapper(props: ChipProps) {\n return (\n \n Awesome chip\n \n );\n}\n\nconst code = `\nimport { Chip } from '@mantine/core';\n\nfunction Demo() {\n return Awesome chip\n}\n`;\n\nexport const chipDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n centered: true,\n controls: [\n { prop: 'color', type: 'color', initialValue: '', libraryValue: '' },\n {\n prop: 'variant',\n type: 'segmented',\n data: [\n { value: 'filled', label: 'Filled' },\n { value: 'outline', label: 'Outline' },\n { value: 'light', label: 'Light' },\n ],\n initialValue: '',\n libraryValue: '',\n },\n { prop: 'size', type: 'size', initialValue: 'sm', libraryValue: 'sm' },\n { prop: 'radius', type: 'size', initialValue: 'xl', libraryValue: 'xl' },\n { prop: 'disabled', type: 'boolean', initialValue: false, libraryValue: false },\n { prop: 'checked', type: 'boolean', initialValue: true, libraryValue: false },\n\n ],\n};\n" }, { "path": "src/components/custom/components-demo/inputs/color-input-demo.tsx", "content": "import { ColorInput } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { inputControls } from '../../../../utils/input-controls';\n\nconst code = `\nimport { ColorInput } from '@mantine/core';\n\n\nfunction Demo() {\n return (\n \n );\n}\n`;\n\nfunction Wrapper(props: any) {\n return ;\n}\n\nexport const colorInputDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n centered: true,\n maxWidth: 340,\n controls: inputControls,\n};\n" }, { "path": "src/components/custom/components-demo/inputs/fieldset-demo.tsx", "content": "import { Fieldset, TextInput } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Fieldset, TextInput } from '@mantine/core';\n\nfunction Demo() {\n return (\n
\n \n \n
\n );\n}\n`;\n\nfunction Wrapper(props: any) {\n return (\n
\n \n \n
\n );\n}\n\nexport const fieldsetDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n maxWidth: 500,\n centered: true,\n controls: [\n {\n type: 'segmented',\n prop: 'variant',\n initialValue: '',\n libraryValue: '',\n data: ['default', 'filled', 'unstyled'],\n },\n\n { type: 'size', prop: 'radius', initialValue: 'sm', libraryValue: 'sm' },\n { prop: 'disabled', type: 'boolean', initialValue: false, libraryValue: false },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/inputs/file-input.tsx", "content": "import { FileInput } from \"@mantine/core\";\nimport { MantineDemo } from \"../../../mantine/demo\";\nimport { inputControls } from \"../../../../utils/input-controls\";\n\nconst code = `\nimport { FileInput } from '@mantine/core';\n\n\nfunction Demo() {\n return (\n \n );\n}\n`;\n\nfunction Wrapper(props: any) {\n return ;\n}\n\nexport const fileInputDemo: MantineDemo = {\n type: \"configurator\",\n component: Wrapper,\n code,\n centered: true,\n maxWidth: 340,\n controls: inputControls,\n};\n" }, { "path": "src/components/custom/components-demo/inputs/native-select-demo.tsx", "content": "import { NativeSelect } from \"@mantine/core\";\nimport { MantineDemo } from \"../../../mantine/demo\";\nimport { inputControls } from \"../../../../utils/input-controls\";\n\nconst code = `\nimport { NativeSelect } from '@mantine/core';\n\nfunction Demo() {\n return ;\n}\n`;\n\nfunction Wrapper(props: any) {\n return ;\n}\n\nexport const nativeSelectDemo: MantineDemo = {\n type: \"configurator\",\n component: Wrapper,\n code,\n centered: true,\n maxWidth: 340,\n controls: inputControls,\n};\n" }, { "path": "src/components/custom/components-demo/inputs/pin-input-demo.tsx", "content": "import { PinInput, PinInputProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { PinInput } from '@mantine/core';\n\nfunction Demo() {\n return \n}\n`;\n\nfunction Wrapper(props: PinInputProps) {\n return ;\n}\n\nexport const pinInputDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n centered: true,\n controls: [\n { prop: 'size', type: 'size', initialValue: 'sm', libraryValue: 'sm' },\n { prop: 'length', type: 'number', initialValue: 4, libraryValue: 4, min: 1, max: 5 },\n { prop: 'mask', type: 'boolean', initialValue: false, libraryValue: false },\n { prop: 'placeholder', type: 'string', initialValue: '○', libraryValue: '○' },\n { prop: 'disabled', type: 'boolean', initialValue: false, libraryValue: false },\n { prop: 'error', type: 'boolean', initialValue: false, libraryValue: false },\n {\n prop: 'type',\n type: 'select',\n initialValue: 'alphanumeric',\n libraryValue: 'alphanumeric',\n data: ['alphanumeric', 'number'],\n },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/inputs/radio-demo.tsx", "content": "import { Radio, RadioProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Radio } from '@mantine/core';\n\n\nfunction Demo() {\n return (\n \n );\n}\n`;\n\nfunction Wrapper(props: RadioProps) {\n return (\n \n \n \n );\n}\n\nexport const radioDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n centered: true,\n controls: [\n {\n prop: 'labelPosition',\n type: 'segmented',\n data: [\n { value: 'right', label: 'Right' },\n { value: 'left', label: 'Left' },\n ],\n initialValue: 'right',\n libraryValue: 'right',\n },\n { prop: 'label', type: 'string', initialValue: 'I cannot be unchecked', libraryValue: '' },\n { prop: 'description', type: 'string', initialValue: '', libraryValue: '' },\n { prop: 'error', type: 'string', initialValue: '', libraryValue: '' },\n { prop: 'size', type: 'size', initialValue: 'sm', libraryValue: 'sm' },\n { prop: 'color', type: 'color', initialValue: '', libraryValue: '' },\n {\n prop: 'variant',\n type: 'segmented',\n data: [\n { value: 'filled', label: 'Filled' },\n { value: 'outline', label: 'Outline' },\n ],\n initialValue: '',\n libraryValue: '',\n },\n { prop: 'disabled', type: 'boolean', initialValue: false, libraryValue: false },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/inputs/radio-group-demo.tsx", "content": "import { Group, Radio, RadioGroupProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Radio, Group } from '@mantine/core';\n\n\nfunction Demo() {\n return (\n \n \n \n \n \n \n \n \n );\n}\n`;\n\nfunction Wrapper(props: Partial) {\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nexport const radioGroupDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n centered: true,\n code,\n controls: [\n {\n prop: 'label',\n type: 'string',\n initialValue: 'Select your favorite framework/library',\n libraryValue: '',\n },\n { prop: 'description', type: 'string', initialValue: 'This is anonymous', libraryValue: '' },\n { prop: 'error', type: 'string', initialValue: '', libraryValue: '' },\n { prop: 'withAsterisk', type: 'boolean', initialValue: true, libraryValue: false },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/inputs/rating-demo.tsx", "content": "import { Rating, RatingProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Rating } from '@mantine/core';\n\nfunction Demo() {\n return \n}\n`;\n\nfunction Wrapper(props: RatingProps) {\n return ;\n}\n\nexport const ratingDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n centered: true,\n controls: [\n { prop: 'color', type: 'color', initialValue: \"yellow\", libraryValue: \"yellow\" },\n { prop: 'size', type: 'size', initialValue: 'md', libraryValue: 'md' },\n { prop: 'count', type: 'number', initialValue: 5, libraryValue: 5, min: 1, max: 8 },\n { prop: 'highlightSelectedOnly', type: 'boolean', initialValue: false, libraryValue: false },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/inputs/segmented-control-demo.tsx", "content": "import { SegmentedControl } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { SegmentedControl } from '@mantine/core';\n\nfunction Demo() {\n return ;\n}\n`;\n\nfunction Wrapper(props: any) {\n return ;\n}\n\nexport const segmentedControlDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n controls: [\n {\n prop: 'orientation',\n type: 'segmented',\n initialValue: 'horizontal',\n libraryValue: 'horizontal',\n data: [\n { label: 'horizontal', value: 'horizontal' },\n { label: 'vertical', value: 'vertical' },\n ],\n },\n { prop: 'fullWidth', type: 'boolean', initialValue: false, libraryValue: false },\n { prop: 'withItemsBorders', type: 'boolean', initialValue: true, libraryValue: true },\n { prop: 'color', type: 'color', initialValue: '', libraryValue: '' },\n { type: 'size', prop: 'size', initialValue: 'sm', libraryValue: 'sm' },\n { type: 'size', prop: 'radius', initialValue: 'sm', libraryValue: 'sm' },\n { prop: 'transitionDuration', type: 'string', initialValue: '150', libraryValue: '150' },\n { prop: 'disabled', type: 'boolean', initialValue: false, libraryValue: false },\n { prop: 'readOnly', type: 'boolean', initialValue: false, libraryValue: false },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/inputs/slider-demo.tsx", "content": "import { Slider } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nfunction Wrapper(props: any) {\n return (\n \n );\n}\n\nconst code = `\nimport { Slider } from '@mantine/core';\n\n\nfunction Demo() {\n return (\n \n );\n}\n`;\n\nexport const sliderDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n centered: true,\n maxWidth: 400,\n controls: [\n { prop: 'color', type: 'color', initialValue: '', libraryValue: '__none__' },\n { prop: 'size', type: 'size', initialValue: 'md', libraryValue: 'md' },\n { prop: 'radius', type: 'size', initialValue: 'xl', libraryValue: 'xl' },\n { prop: 'showLabelOnHover', type: 'boolean', initialValue: true, libraryValue: true },\n { prop: 'labelAlwaysOn', type: 'boolean', initialValue: false, libraryValue: false },\n { prop: 'disabled', type: 'boolean', initialValue: false, libraryValue: false },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/inputs/switch-demo.tsx", "content": "import { Switch } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Switch } from '@mantine/core';\n\n\nfunction Demo() {\n return (\n \n );\n}\n`;\n\nexport const switchDemo: MantineDemo = {\n type: 'configurator',\n component: (props: any) => ,\n code,\n centered: true,\n controls: [\n { prop: 'color', type: 'color', initialValue: '', libraryValue: '' },\n {\n prop: 'labelPosition',\n type: 'segmented',\n data: [\n { value: 'right', label: 'Right' },\n { value: 'left', label: 'Left' },\n ],\n initialValue: 'right',\n libraryValue: 'right',\n },\n { prop: 'label', type: 'string', initialValue: 'I agree to sell my privacy', libraryValue: '' },\n { prop: 'description', type: 'string', initialValue: '', libraryValue: '' },\n { prop: 'error', type: 'string', initialValue: '', libraryValue: '' },\n { prop: 'size', type: 'size', initialValue: 'sm', libraryValue: 'sm' },\n { prop: 'radius', type: 'size', initialValue: 'xl', libraryValue: 'xl' },\n { prop: 'disabled', type: 'boolean', initialValue: false, libraryValue: false },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/inputs/switch-group-demo.tsx", "content": "import { Group, Switch, SwitchGroupProps } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { Switch, Group } from '@mantine/core';\n\nfunction Demo() {\n return (\n \n \n \n \n \n \n \n \n );\n}\n`;\n\nfunction Wrapper(props: SwitchGroupProps) {\n return (\n \n \n \n \n \n \n \n \n );\n}\n\nexport const switchGroupDemo: MantineDemo = {\n type: 'configurator',\n component: Wrapper,\n code,\n centered: true,\n controls: [\n {\n prop: 'label',\n type: 'string',\n initialValue: 'Select your favorite framework/library',\n libraryValue: '',\n },\n { prop: 'description', type: 'string', initialValue: 'This is anonymous', libraryValue: '' },\n { prop: 'error', type: 'string', initialValue: '', libraryValue: '' },\n { prop: 'withAsterisk', type: 'boolean', initialValue: true, libraryValue: false },\n ],\n};\n" }, { "path": "src/components/custom/components-demo/inputs/text-input-demo.tsx", "content": "import { TextInput } from '@mantine/core';\nimport { inputControls } from '../../../../utils/input-controls';\nimport { MantineDemo } from '../../../mantine/demo';\n\nconst code = `\nimport { TextInput } from '@mantine/core';\n\n\nfunction Demo() {\n return (\n \n );\n}\n`;\n\nfunction Wrapper(props: any) {\n return ;\n}\n\nexport const textInputDemo: MantineDemo\n = {\n type: 'configurator',\n component: Wrapper,\n code,\n centered: true,\n maxWidth: 340,\n controls: inputControls,\n};\n" }, { "path": "src/components/custom/components-demo/inputs/textarea-demo.tsx", "content": "import { Textarea } from '@mantine/core';\nimport { MantineDemo } from '../../../mantine/demo';\nimport { inputControls } from '../../../../utils/input-controls';\n\nconst code = `\nimport { Textarea } from '@mantine/core';\n\n\nfunction Demo() {\n return (\n \n );\n}\n`;\n\nfunction Wrapper(props: any) {\n return