tio-design-make-experiments 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (108) hide show
  1. package/ATTRIBUTIONS.md +3 -0
  2. package/README.md +11 -0
  3. package/guidelines/Guidelines.md +61 -0
  4. package/index.html +15 -0
  5. package/package.json +91 -0
  6. package/postcss.config.mjs +15 -0
  7. package/src/app/App.tsx +6 -0
  8. package/src/app/components/design-system/Buttons.tsx +623 -0
  9. package/src/app/components/design-system/Cards.tsx +123 -0
  10. package/src/app/components/design-system/Charts.tsx +135 -0
  11. package/src/app/components/design-system/ColorPalette.tsx +86 -0
  12. package/src/app/components/design-system/CopyButton.tsx +102 -0
  13. package/src/app/components/design-system/Forms.tsx +409 -0
  14. package/src/app/components/design-system/Icons.tsx +140 -0
  15. package/src/app/components/design-system/ListItems.tsx +234 -0
  16. package/src/app/components/design-system/Navigation.tsx +344 -0
  17. package/src/app/components/design-system/Patterns.tsx +235 -0
  18. package/src/app/components/design-system/PopoverMenu.tsx +81 -0
  19. package/src/app/components/design-system/SectionHeader.tsx +22 -0
  20. package/src/app/components/design-system/Spacing.tsx +109 -0
  21. package/src/app/components/design-system/StatusIndicators.tsx +194 -0
  22. package/src/app/components/design-system/Typography.tsx +88 -0
  23. package/src/app/components/figma/ImageWithFallback.tsx +27 -0
  24. package/src/app/components/ui/accordion.tsx +66 -0
  25. package/src/app/components/ui/alert-dialog.tsx +157 -0
  26. package/src/app/components/ui/alert.tsx +66 -0
  27. package/src/app/components/ui/aspect-ratio.tsx +11 -0
  28. package/src/app/components/ui/avatar.tsx +53 -0
  29. package/src/app/components/ui/badge.tsx +46 -0
  30. package/src/app/components/ui/breadcrumb.tsx +109 -0
  31. package/src/app/components/ui/button.tsx +58 -0
  32. package/src/app/components/ui/calendar.tsx +75 -0
  33. package/src/app/components/ui/card.tsx +92 -0
  34. package/src/app/components/ui/carousel.tsx +241 -0
  35. package/src/app/components/ui/chart.tsx +353 -0
  36. package/src/app/components/ui/checkbox.tsx +32 -0
  37. package/src/app/components/ui/collapsible.tsx +33 -0
  38. package/src/app/components/ui/command.tsx +177 -0
  39. package/src/app/components/ui/context-menu.tsx +252 -0
  40. package/src/app/components/ui/dialog.tsx +135 -0
  41. package/src/app/components/ui/drawer.tsx +132 -0
  42. package/src/app/components/ui/dropdown-menu.tsx +257 -0
  43. package/src/app/components/ui/form.tsx +168 -0
  44. package/src/app/components/ui/hover-card.tsx +44 -0
  45. package/src/app/components/ui/input-otp.tsx +77 -0
  46. package/src/app/components/ui/input.tsx +21 -0
  47. package/src/app/components/ui/label.tsx +24 -0
  48. package/src/app/components/ui/menubar.tsx +276 -0
  49. package/src/app/components/ui/navigation-menu.tsx +168 -0
  50. package/src/app/components/ui/pagination.tsx +127 -0
  51. package/src/app/components/ui/popover.tsx +48 -0
  52. package/src/app/components/ui/progress.tsx +31 -0
  53. package/src/app/components/ui/radio-group.tsx +45 -0
  54. package/src/app/components/ui/resizable.tsx +56 -0
  55. package/src/app/components/ui/scroll-area.tsx +58 -0
  56. package/src/app/components/ui/select.tsx +189 -0
  57. package/src/app/components/ui/separator.tsx +28 -0
  58. package/src/app/components/ui/sheet.tsx +139 -0
  59. package/src/app/components/ui/sidebar.tsx +726 -0
  60. package/src/app/components/ui/skeleton.tsx +13 -0
  61. package/src/app/components/ui/slider.tsx +63 -0
  62. package/src/app/components/ui/sonner.tsx +25 -0
  63. package/src/app/components/ui/switch.tsx +31 -0
  64. package/src/app/components/ui/table.tsx +116 -0
  65. package/src/app/components/ui/tabs.tsx +66 -0
  66. package/src/app/components/ui/textarea.tsx +18 -0
  67. package/src/app/components/ui/toggle-group.tsx +73 -0
  68. package/src/app/components/ui/toggle.tsx +47 -0
  69. package/src/app/components/ui/tooltip.tsx +61 -0
  70. package/src/app/components/ui/use-mobile.ts +21 -0
  71. package/src/app/components/ui/utils.ts +6 -0
  72. package/src/app/pages/DesignSystem.tsx +189 -0
  73. package/src/app/pages/Team.tsx +168 -0
  74. package/src/app/routes.tsx +14 -0
  75. package/src/assets/6276cd19433d265f363bddc7f52f4937da9b1dd4.png +0 -0
  76. package/src/assets/9d7a018c9a6938d439d9059f82753d232ce63804.png +0 -0
  77. package/src/imports/Buttons-3-409.tsx +46 -0
  78. package/src/imports/Buttons-3-962.tsx +155 -0
  79. package/src/imports/ButtonsAndActions.tsx +139 -0
  80. package/src/imports/Dashboard.tsx +1914 -0
  81. package/src/imports/DesignSystem.tsx +6008 -0
  82. package/src/imports/Forms.tsx +1088 -0
  83. package/src/imports/Navigation-17-3259.tsx +564 -0
  84. package/src/imports/Navigation-18-957.tsx +873 -0
  85. package/src/imports/Wireframe.tsx +112 -0
  86. package/src/imports/svg-1ifosis1tx.ts +3 -0
  87. package/src/imports/svg-5spfd.tsx +1 -0
  88. package/src/imports/svg-6180by7m37.ts +3 -0
  89. package/src/imports/svg-guy0p.tsx +1 -0
  90. package/src/imports/svg-hm2n0.tsx +2 -0
  91. package/src/imports/svg-j8o95ccqq7.ts +26 -0
  92. package/src/imports/svg-liuy2nykz3.ts +10 -0
  93. package/src/imports/svg-pp9c3.tsx +1 -0
  94. package/src/imports/svg-pr0k9194w9.ts +33 -0
  95. package/src/imports/svg-umftvfphsk.ts +48 -0
  96. package/src/imports/svg-vbi95q76mb.ts +23 -0
  97. package/src/imports/svg-vxjpl.tsx +1 -0
  98. package/src/imports/svg-wl30wxxv53.ts +3 -0
  99. package/src/main.tsx +7 -0
  100. package/src/styles/fonts.css +1 -0
  101. package/src/styles/forms.css +181 -0
  102. package/src/styles/header.css +48 -0
  103. package/src/styles/index.css +7 -0
  104. package/src/styles/navlinks.css +112 -0
  105. package/src/styles/popover.css +48 -0
  106. package/src/styles/tailwind.css +4 -0
  107. package/src/styles/theme.css +312 -0
  108. package/vite.config.ts +38 -0
package/ATTRIBUTIONS.md ADDED
@@ -0,0 +1,3 @@
1
+ This Figma Make file includes components from [shadcn/ui](https://ui.shadcn.com/) used under [MIT license](https://github.com/shadcn-ui/ui/blob/main/LICENSE.md).
2
+
3
+ This Figma Make file includes photos from [Unsplash](https://unsplash.com) used under [license](https://unsplash.com/license).
package/README.md ADDED
@@ -0,0 +1,11 @@
1
+
2
+ # Design-FigmaMake-experiments
3
+
4
+ This is a code bundle for Design-FigmaMake-experiments. The original project is available at https://www.figma.com/design/5aPRfIw4UKdPgXtnnZmcAC/Design-FigmaMake-experiments.
5
+
6
+ ## Running the code
7
+
8
+ Run `npm i` to install the dependencies.
9
+
10
+ Run `npm run dev` to start the development server.
11
+
package/guidelines/Guidelines.md ADDED
@@ -0,0 +1,61 @@
1
+ **Add your own guidelines here**
2
+ <!--
3
+
4
+ System Guidelines
5
+
6
+ Use this file to provide the AI with rules and guidelines you want it to follow.
7
+ This template outlines a few examples of things you can add. You can add your own sections and format it to suit your needs
8
+
9
+ TIP: More context isn't always better. It can confuse the LLM. Try and add the most important rules you need
10
+
11
+ # General guidelines
12
+
13
+ Any general rules you want the AI to follow.
14
+ For example:
15
+
16
+ * Only use absolute positioning when necessary. Opt for responsive and well structured layouts that use flexbox and grid by default
17
+ * Refactor code as you go to keep code clean
18
+ * Keep file sizes small and put helper functions and components in their own files.
19
+
20
+ --------------
21
+
22
+ # Design system guidelines
23
+ Rules for how the AI should make generations look like your company's design system
24
+
25
+ Additionally, if you select a design system to use in the prompt box, you can reference
26
+ your design system's components, tokens, variables and components.
27
+ For example:
28
+
29
+ * Use a base font-size of 14px
30
+ * Date formats should always be in the format “Jun 10”
31
+ * The bottom toolbar should only ever have a maximum of 4 items
32
+ * Never use the floating action button with the bottom toolbar
33
+ * Chips should always come in sets of 3 or more
34
+ * Don't use a dropdown if there are 2 or fewer options
35
+
36
+ You can also create sub sections and add more specific details
37
+ For example:
38
+
39
+
40
+ ## Button
41
+ The Button component is a fundamental interactive element in our design system, designed to trigger actions or navigate
42
+ users through the application. It provides visual feedback and clear affordances to enhance user experience.
43
+
44
+ ### Usage
45
+ Buttons should be used for important actions that users need to take, such as form submissions, confirming choices,
46
+ or initiating processes. They communicate interactivity and should have clear, action-oriented labels.
47
+
48
+ ### Variants
49
+ * Primary Button
50
+ * Purpose : Used for the main action in a section or page
51
+ * Visual Style : Bold, filled with the primary brand color
52
+ * Usage : One primary button per section to guide users toward the most important action
53
+ * Secondary Button
54
+ * Purpose : Used for alternative or supporting actions
55
+ * Visual Style : Outlined with the primary color, transparent background
56
+ * Usage : Can appear alongside a primary button for less important actions
57
+ * Tertiary Button
58
+ * Purpose : Used for the least important actions
59
+ * Visual Style : Text-only with no border, using primary color
60
+ * Usage : For actions that should be available but not emphasized
61
+ -->
package/index.html ADDED
@@ -0,0 +1,15 @@
1
+
2
+ <!DOCTYPE html>
3
+ <html lang="en">
4
+ <head>
5
+ <meta charset="UTF-8" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
+ <title>Design-FigmaMake-experiments</title>
8
+ </head>
9
+
10
+ <body>
11
+ <div id="root"></div>
12
+ <script type="module" src="/src/main.tsx"></script>
13
+ </body>
14
+ </html>
15
+
package/package.json ADDED
@@ -0,0 +1,91 @@
1
+ {
2
+ "name": "tio-design-make-experiments",
3
+ "version": "0.0.1",
4
+ "description": "Figma Make Experiments",
5
+ "type": "module",
6
+ "author": "test IO",
7
+ "license": "",
8
+ "scripts": {
9
+ "build": "vite build",
10
+ "dev": "vite"
11
+ },
12
+ "dependencies": {
13
+ "@emotion/react": "11.14.0",
14
+ "@emotion/styled": "11.14.1",
15
+ "@mui/icons-material": "7.3.5",
16
+ "@mui/material": "7.3.5",
17
+ "@popperjs/core": "2.11.8",
18
+ "@radix-ui/react-accordion": "1.2.3",
19
+ "@radix-ui/react-alert-dialog": "1.1.6",
20
+ "@radix-ui/react-aspect-ratio": "1.1.2",
21
+ "@radix-ui/react-avatar": "1.1.3",
22
+ "@radix-ui/react-checkbox": "1.1.4",
23
+ "@radix-ui/react-collapsible": "1.1.3",
24
+ "@radix-ui/react-context-menu": "2.2.6",
25
+ "@radix-ui/react-dialog": "1.1.6",
26
+ "@radix-ui/react-dropdown-menu": "2.1.6",
27
+ "@radix-ui/react-hover-card": "1.1.6",
28
+ "@radix-ui/react-label": "2.1.2",
29
+ "@radix-ui/react-menubar": "1.1.6",
30
+ "@radix-ui/react-navigation-menu": "1.2.5",
31
+ "@radix-ui/react-popover": "1.1.6",
32
+ "@radix-ui/react-progress": "1.1.2",
33
+ "@radix-ui/react-radio-group": "1.2.3",
34
+ "@radix-ui/react-scroll-area": "1.2.3",
35
+ "@radix-ui/react-select": "2.1.6",
36
+ "@radix-ui/react-separator": "1.1.2",
37
+ "@radix-ui/react-slider": "1.2.3",
38
+ "@radix-ui/react-slot": "1.1.2",
39
+ "@radix-ui/react-switch": "1.1.3",
40
+ "@radix-ui/react-tabs": "1.1.3",
41
+ "@radix-ui/react-toggle": "1.1.2",
42
+ "@radix-ui/react-toggle-group": "1.1.2",
43
+ "@radix-ui/react-tooltip": "1.1.8",
44
+ "class-variance-authority": "0.7.1",
45
+ "clsx": "2.1.1",
46
+ "cmdk": "1.1.1",
47
+ "date-fns": "3.6.0",
48
+ "embla-carousel-react": "8.6.0",
49
+ "input-otp": "1.4.2",
50
+ "lucide-react": "0.487.0",
51
+ "motion": "12.23.24",
52
+ "next-themes": "0.4.6",
53
+ "react-day-picker": "8.10.1",
54
+ "react-dnd": "16.0.1",
55
+ "react-dnd-html5-backend": "16.0.1",
56
+ "react-hook-form": "7.55.0",
57
+ "react-popper": "2.3.0",
58
+ "react-resizable-panels": "2.1.7",
59
+ "react-responsive-masonry": "2.7.1",
60
+ "react-router": "^7.13.0",
61
+ "react-slick": "0.31.0",
62
+ "recharts": "2.15.2",
63
+ "sonner": "2.0.3",
64
+ "tailwind-merge": "3.2.0",
65
+ "tw-animate-css": "1.3.8",
66
+ "vaul": "1.1.2"
67
+ },
68
+ "devDependencies": {
69
+ "@tailwindcss/vite": "4.1.12",
70
+ "@vitejs/plugin-react": "4.7.0",
71
+ "tailwindcss": "4.1.12",
72
+ "vite": "6.3.5"
73
+ },
74
+ "peerDependencies": {
75
+ "react": "18.3.1",
76
+ "react-dom": "18.3.1"
77
+ },
78
+ "peerDependenciesMeta": {
79
+ "react": {
80
+ "optional": true
81
+ },
82
+ "react-dom": {
83
+ "optional": true
84
+ }
85
+ },
86
+ "pnpm": {
87
+ "overrides": {
88
+ "vite": "6.3.5"
89
+ }
90
+ }
91
+ }
package/postcss.config.mjs ADDED
@@ -0,0 +1,15 @@
1
+ /**
2
+ * PostCSS Configuration
3
+ *
4
+ * Tailwind CSS v4 (via @tailwindcss/vite) automatically sets up all required
5
+ * PostCSS plugins — you do NOT need to include `tailwindcss` or `autoprefixer` here.
6
+ *
7
+ * This file only exists for adding additional PostCSS plugins, if needed.
8
+ * For example:
9
+ *
10
+ * import postcssNested from 'postcss-nested'
11
+ * export default { plugins: [postcssNested()] }
12
+ *
13
+ * Otherwise, you can leave this file empty.
14
+ */
15
+ export default {}
package/src/app/App.tsx ADDED
@@ -0,0 +1,6 @@
1
+ import { RouterProvider } from "react-router";
2
+ import { router } from "./routes";
3
+
4
+ export default function App() {
5
+ return <RouterProvider router={router} />;
6
+ }