config: icons,fakemui,tsx (35 files)

fakemui/icons/AccountCircle.tsx

@@ -0,0 +1,7 @@
+import { Icon, IconProps } from './Icon'
+
+export const AccountCircle = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24ZM74.08,197.5a64,64,0,0,1,107.84,0,87.83,87.83,0,0,1-107.84,0ZM96,120a32,32,0,1,1,32,32A32,32,0,0,1,96,120Zm97.76,66.41a79.66,79.66,0,0,0-36.06-28.75,48,48,0,1,0-59.4,0,79.66,79.66,0,0,0-36.06,28.75,88,88,0,1,1,131.52,0Z" />
+  </Icon>
+)

fakemui/icons/AspectRatio.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const AspectRatio = (props: IconProps) => (
+  <Icon {...props}>
+    <rect x="32" y="48" width="192" height="160" rx="8" />
+    <polyline points="56,96 56,72 80,72" />
+    <polyline points="176,72 200,72 200,96" />
+    <polyline points="200,160 200,184 176,184" />
+    <polyline points="80,184 56,184 56,160" />
+  </Icon>
+)

fakemui/icons/Checkbox.tsx

@@ -0,0 +1,7 @@
+import { Icon, IconProps } from './Icon'
+
+export const Checkbox = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm0,176H48V48H208Zm-32.49-96.49-72,72a12,12,0,0,1-17,0l-32-32a12,12,0,0,1,17-17L95,158l63.51-63.52a12,12,0,0,1,17,17Z" />
+  </Icon>
+)

fakemui/icons/ClosedCaption.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const ClosedCaption = (props: IconProps) => (
+  <Icon {...props}>
+    <rect x="24" y="48" width="208" height="160" rx="8" />
+    <path d="M88 128 C88 104 104 96 120 96 C128 96 136 100 140 104" />
+    <path d="M156 128 C156 104 172 96 188 96 C196 96 204 100 208 104" />
+    <path d="M88 128 C88 152 104 160 120 160 C128 160 136 156 140 152" />
+    <path d="M156 128 C156 152 172 160 188 160 C196 160 204 156 208 152" />
+  </Icon>
+)

fakemui/icons/CropFree.tsx

@@ -0,0 +1,7 @@
+import { Icon, IconProps } from './Icon'
+
+export const CropFree = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm0,176H48V48H208ZM88,64a8,8,0,0,1,0,16H56v32a8,8,0,0,1-16,0V72A8,8,0,0,1,48,64Zm128,80a8,8,0,0,1,16,0v40a8,8,0,0,1-8,8H168a8,8,0,0,1,0-16h40V144Zm-32,48a8,8,0,0,1,0-16h32a8,8,0,0,1,8,8v40a8,8,0,0,1-16,0V168ZM48,112a8,8,0,0,1-8-8V64a8,8,0,0,1,8-8H88a8,8,0,0,1,0,16H56v32A8,8,0,0,1,48,112Z" />
+  </Icon>
+)

fakemui/icons/CropPortrait.tsx

@@ -0,0 +1,7 @@
+import { Icon, IconProps } from './Icon'
+
+export const CropPortrait = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M192,16H64A16,16,0,0,0,48,32V224a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V32A16,16,0,0,0,192,16Zm0,208H64V32H192Z" />
+  </Icon>
+)

fakemui/icons/FormatAlignLeft.tsx

@@ -0,0 +1,7 @@
+import { Icon, IconProps } from './Icon'
+
+export const FormatAlignLeft = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M32,64a8,8,0,0,1,8-8H216a8,8,0,0,1,0,16H40A8,8,0,0,1,32,64Zm8,48H168a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16Zm176,24H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Zm-48,40H40a8,8,0,0,0,0,16H168a8,8,0,0,0,0-16Z" />
+  </Icon>
+)

fakemui/icons/Gamepad.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Gamepad = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M40 96 C40 72 64 56 88 56 L168 56 C192 56 216 72 216 96 L216 144 C216 176 200 200 168 200 L88 200 C56 200 40 176 40 144 Z" />
+    <line x1="80" y1="104" x2="80" y2="136" />
+    <line x1="64" y1="120" x2="96" y2="120" />
+    <circle cx="168" cy="104" r="8" />
+    <circle cx="184" cy="120" r="8" />
+    <circle cx="168" cy="136" r="8" />
+    <circle cx="152" cy="120" r="8" />
+  </Icon>
+)

fakemui/icons/GridView.tsx

@@ -0,0 +1,7 @@
+import { Icon, IconProps } from './Icon'
+
+export const GridView = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M104,40H56A16,16,0,0,0,40,56v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,104,40Zm0,64H56V56h48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V56A16,16,0,0,0,200,40Zm0,64H152V56h48Zm-96,32H56a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,104,136Zm0,64H56V152h48Zm96-64H152a16,16,0,0,0-16,16v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V152A16,16,0,0,0,200,136Zm0,64H152V152h48Z" />
+  </Icon>
+)

fakemui/icons/Headphones.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Headphones = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M32 128 C32 72 72 32 128 32 C184 32 224 72 224 128 L224 176" />
+    <rect x="32" y="144" width="32" height="64" rx="8" />
+    <rect x="192" y="144" width="32" height="64" rx="8" />
+  </Icon>
+)

fakemui/icons/HighQuality.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const HighQuality = (props: IconProps) => (
+  <Icon {...props}>
+    <rect x="24" y="48" width="208" height="160" rx="8" />
+    <path d="M56 96 L56 160" />
+    <path d="M88 96 L88 160" />
+    <path d="M56 128 L88 128" />
+    <path d="M120 96 L120 160" />
+    <path d="M120 96 L152 160" />
+    <path d="M152 96 L152 160" />
+    <path d="M184 96 C200 96 200 120 184 128 C200 128 200 160 184 160 L168 160 L168 96 L184 96" />
+  </Icon>
+)

fakemui/icons/Joystick.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Joystick = (props: IconProps) => (
+  <Icon {...props}>
+    <ellipse cx="128" cy="192" rx="72" ry="32" />
+    <line x1="128" y1="160" x2="128" y2="96" />
+    <circle cx="128" cy="72" r="32" />
+    <circle cx="128" cy="72" r="16" />
+  </Icon>
+)

fakemui/icons/LocalOffer.tsx

@@ -0,0 +1,7 @@
+import { Icon, IconProps } from './Icon'
+
+export const LocalOffer = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M243.31,136,144,36.69A15.86,15.86,0,0,0,132.69,32H40a8,8,0,0,0-8,8v92.69A15.86,15.86,0,0,0,36.69,144L136,243.31a16,16,0,0,0,22.63,0l84.68-84.68a16,16,0,0,0,0-22.63Zm-96,96L48,132.69V48h84.69L232,147.31ZM96,84A12,12,0,1,1,84,72,12,12,0,0,1,96,84Z" />
+  </Icon>
+)

fakemui/icons/LooksOne.tsx

@@ -0,0 +1,7 @@
+import { Icon, IconProps } from './Icon'
+
+export const LooksOne = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M208,32H48A16,16,0,0,0,32,48V208a16,16,0,0,0,16,16H208a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32Zm0,176H48V48H208Zm-80-24V72a8,8,0,0,1,11.58-7.16l32,16a8,8,0,1,1-7.16,14.31L144,85.47V184a8,8,0,0,1-16,0Z" />
+  </Icon>
+)

fakemui/icons/Mic.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Mic = (props: IconProps) => (
+  <Icon {...props}>
+    <rect x="88" y="32" width="80" height="120" rx="40" />
+    <path d="M48 136 C48 180 80 208 128 208 C176 208 208 180 208 136" />
+    <line x1="128" y1="208" x2="128" y2="240" />
+    <line x1="88" y1="240" x2="168" y2="240" />
+  </Icon>
+)

fakemui/icons/MicOff.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const MicOff = (props: IconProps) => (
+  <Icon {...props}>
+    <rect x="88" y="32" width="80" height="120" rx="40" />
+    <path d="M48 136 C48 180 80 208 128 208 C176 208 208 180 208 136" />
+    <line x1="128" y1="208" x2="128" y2="240" />
+    <line x1="88" y1="240" x2="168" y2="240" />
+    <line x1="32" y1="32" x2="224" y2="224" />
+  </Icon>
+)

fakemui/icons/Minus.tsx

@@ -0,0 +1,7 @@
+import { Icon, IconProps } from './Icon'
+
+export const Minus = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z" />
+  </Icon>
+)

fakemui/icons/Radio.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Radio = (props: IconProps) => (
+  <Icon {...props}>
+    <rect x="32" y="72" width="192" height="128" rx="8" />
+    <circle cx="88" cy="144" r="32" />
+    <line x1="144" y1="112" x2="200" y2="112" />
+    <line x1="144" y1="136" x2="200" y2="136" />
+    <line x1="144" y1="160" x2="184" y2="160" />
+    <path d="M200 72 L176 40 L128 40" />
+  </Icon>
+)

fakemui/icons/Repeat.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Repeat = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M56 96 L56 160 C56 176 72 192 88 192 L168 192 C184 192 200 176 200 160 L200 96 C200 80 184 64 168 64 L88 64 C72 64 56 80 56 96" />
+    <polyline points="80,40 56,64 80,88" />
+    <polyline points="176,168 200,192 176,216" />
+  </Icon>
+)

fakemui/icons/RepeatOne.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const RepeatOne = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M56 96 L56 160 C56 176 72 192 88 192 L168 192 C184 192 200 176 200 160 L200 96 C200 80 184 64 168 64 L88 64 C72 64 56 80 56 96" />
+    <polyline points="80,40 56,64 80,88" />
+    <polyline points="176,168 200,192 176,216" />
+    <text x="120" y="144" fontSize="48" fill="currentColor" stroke="none" fontFamily="sans-serif" fontWeight="bold">1</text>
+  </Icon>
+)

fakemui/icons/Shuffle.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Shuffle = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M48 80 L160 80 L208 128" />
+    <path d="M48 176 L160 176 L208 128" />
+    <polyline points="184,104 208,128 184,152" />
+    <polyline points="184,56 208,80 184,104" />
+    <polyline points="184,152 208,176 184,200" />
+    <path d="M48 80 L96 80" />
+    <path d="M48 176 L96 176" />
+  </Icon>
+)

fakemui/icons/Speed.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Speed = (props: IconProps) => (
+  <Icon {...props}>
+    <circle cx="128" cy="136" r="80" />
+    <path d="M128 136 L128 80" />
+    <path d="M128 136 L168 112" />
+    <circle cx="128" cy="136" r="8" />
+    <line x1="72" y1="136" x2="80" y2="136" />
+    <line x1="176" y1="136" x2="184" y2="136" />
+    <line x1="128" y1="72" x2="128" y2="80" />
+  </Icon>
+)

fakemui/icons/Subtitles.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Subtitles = (props: IconProps) => (
+  <Icon {...props}>
+    <rect x="24" y="48" width="208" height="160" rx="8" />
+    <line x1="56" y1="144" x2="120" y2="144" />
+    <line x1="136" y1="144" x2="200" y2="144" />
+    <line x1="56" y1="176" x2="88" y2="176" />
+    <line x1="104" y1="176" x2="168" y2="176" />
+    <line x1="184" y1="176" x2="200" y2="176" />
+  </Icon>
+)

fakemui/icons/TableChart.tsx

@@ -0,0 +1,7 @@
+import { Icon, IconProps } from './Icon'
+
+export const TableChart = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M224,48H32a8,8,0,0,0-8,8V200a8,8,0,0,0,8,8H224a8,8,0,0,0,8-8V56A8,8,0,0,0,224,48ZM40,64H216v32H40Zm0,48H88v80H40Zm176,80H104V112H216Z" />
+  </Icon>
+)

fakemui/icons/TextFields.tsx

@@ -0,0 +1,7 @@
+import { Icon, IconProps } from './Icon'
+
+export const TextFields = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M212,56a8,8,0,0,1-8,8H136V192h28a8,8,0,0,1,0,16H92a8,8,0,0,1,0-16h28V64H52a8,8,0,0,1,0-16H204A8,8,0,0,1,212,56Z" />
+  </Icon>
+)

fakemui/icons/Timer.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Icon, IconProps } from './Icon'
+
+export const Timer = (props: IconProps) => (
+  <Icon {...props}>
+    <circle cx="128" cy="144" r="72" />
+    <line x1="128" y1="144" x2="128" y2="104" />
+    <line x1="128" y1="144" x2="160" y2="144" />
+    <line x1="104" y1="40" x2="152" y2="40" />
+    <line x1="128" y1="40" x2="128" y2="72" />
+    <path d="M192 88 L208 72" />
+  </Icon>
+)

fakemui/icons/ToggleOn.tsx

@@ -0,0 +1,7 @@
+import { Icon, IconProps } from './Icon'
+
+export const ToggleOn = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M176,56H80a72,72,0,0,0,0,144h96a72,72,0,0,0,0-144Zm0,128H80a56,56,0,0,1,0-112h96a56,56,0,0,1,0,112Zm0-96a40,40,0,1,0,40,40A40,40,0,0,0,176,88Zm0,64a24,24,0,1,1,24-24A24,24,0,0,1,176,152Z" />
+  </Icon>
+)

fakemui/icons/TouchApp.tsx

@@ -0,0 +1,7 @@
+import { Icon, IconProps } from './Icon'
+
+export const TouchApp = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M188,88a43.75,43.75,0,0,0-32,13.85V48a44,44,0,0,0-88,0v94.94A44,44,0,0,0,40,180c0,50.68,41.32,60,88,60a68.07,68.07,0,0,0,68-68V132A44.05,44.05,0,0,0,188,88ZM68,48a28,28,0,0,1,56,0v64H68Zm112,124a52.06,52.06,0,0,1-52,52c-39.67,0-72-5.58-72-44a28,28,0,0,1,56,0v8a8,8,0,0,0,16,0V132a28,28,0,0,1,52,0Z" />
+  </Icon>
+)

fakemui/icons/Verified.tsx

@@ -0,0 +1,7 @@
+import { Icon, IconProps } from './Icon'
+
+export const Verified = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M225.86,102.82c-3.77-3.94-7.67-8-9.14-11.57-1.36-3.27-1.44-8.69-1.52-13.94-.15-9.76-.31-20.82-8-28.51s-18.75-7.85-28.51-8c-5.25-.08-10.67-.16-13.94-1.52-3.56-1.47-7.63-5.37-11.57-9.14C146.28,23.51,138.44,16,128,16s-18.27,7.51-25.18,14.14c-3.94,3.77-8,7.67-11.57,9.14C88,40.64,82.56,40.72,77.31,40.8c-9.76.15-20.82.31-28.51,8S41,67.55,40.8,77.31c-.08,5.25-.16,10.67-1.52,13.94-1.47,3.56-5.37,7.63-9.14,11.57C23.51,109.72,16,117.56,16,128s7.51,18.27,14.14,25.18c3.77,3.94,7.67,8,9.14,11.57,1.36,3.27,1.44,8.69,1.52,13.94.15,9.76.31,20.82,8,28.51s18.75,7.85,28.51,8c5.25.08,10.67.16,13.94,1.52,3.56,1.47,7.63,5.37,11.57,9.14C109.72,232.49,117.56,240,128,240s18.27-7.51,25.18-14.14c3.94-3.77,8-7.67,11.57-9.14,3.27-1.36,8.69-1.44,13.94-1.52,9.76-.15,20.82-.31,28.51-8s7.85-18.75,8-28.51c.08-5.25.16-10.67,1.52-13.94,1.47-3.56,5.37-7.63,9.14-11.57C232.49,146.28,240,138.44,240,128S232.49,109.73,225.86,102.82Zm-11.55,39.29c-4.79,5-9.75,10.17-12.38,16.52-2.52,6.1-2.63,13.07-2.73,19.82-.1,6.5-.21,13.22-3.59,16.6s-10.1,3.49-16.6,3.59c-6.75.1-13.72.21-19.82,2.73-6.35,2.63-11.52,7.59-16.52,12.38S132,224,128,224s-9.15-4.92-14.67-10.25-10.17-9.75-16.52-12.38c-6.1-2.52-13.07-2.63-19.82-2.73-6.5-.1-13.22-.21-16.6-3.59s-3.49-10.1-3.59-16.6c-.1-6.75-.21-13.72-2.73-19.82-2.63-6.35-7.59-11.52-12.38-16.52S32,132,32,128s4.92-9.15,10.25-14.67,9.75-10.17,12.38-16.52c2.52-6.1,2.63-13.07,2.73-19.82.1-6.5.21-13.22,3.59-16.6s10.1-3.49,16.6-3.59c6.75-.1,13.72-.21,19.82-2.73,6.35-2.63,11.52-7.59,16.52-12.38S124,32,128,32s9.15,4.92,14.67,10.25,10.17,9.75,16.52,12.38c6.1,2.52,13.07,2.63,19.82,2.73,6.5.1,13.22.21,16.6,3.59s3.49,10.1,3.59,16.6c.1,6.75.21,13.72,2.73,19.82,2.63,6.35,7.59,11.52,12.38,16.52S224,124,224,128,219.08,137.15,214.31,142.11Zm-77.23-30.18-29.59,29.59-9.66-9.66a8,8,0,0,0-11.31,11.31l15.31,15.32a8,8,0,0,0,11.32,0l35.24-35.25a8,8,0,0,0-11.31-11.31Z" />
+  </Icon>
+)

fakemui/icons/ViewColumn.tsx

@@ -0,0 +1,7 @@
+import { Icon, IconProps } from './Icon'
+
+export const ViewColumn = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M104,32H64A16,16,0,0,0,48,48V208a16,16,0,0,0,16,16h40a16,16,0,0,0,16-16V48A16,16,0,0,0,104,32Zm0,176H64V48h40Zm88-176H152a16,16,0,0,0-16,16V208a16,16,0,0,0,16,16h40a16,16,0,0,0,16-16V48A16,16,0,0,0,192,32Zm0,176H152V48h40Z" />
+  </Icon>
+)

fakemui/icons/ViewStream.tsx

@@ -0,0 +1,7 @@
+import { Icon, IconProps } from './Icon'
+
+export const ViewStream = (props: IconProps) => (
+  <Icon {...props}>
+    <path d="M208,128a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,128ZM56,72H200a8,8,0,0,0,0-16H56a8,8,0,0,0,0,16Zm144,112H56a8,8,0,0,0,0,16H200a8,8,0,0,0,0-16Z" />
+  </Icon>
+)

fakemui/icons/index.ts

@@ -279,3 +279,56 @@ export { Notifications } from './Notifications'
 export { NotificationsOff } from './NotificationsOff'
 export { ContentCopy } from './ContentCopy'
 export { ContentPaste } from './ContentPaste'
+
+// Component Icon Map
+export { Article } from './Article'
+export { Checkbox } from './Checkbox'
+export { CropFree } from './CropFree'
+export { CropPortrait } from './CropPortrait'
+export { GridView } from './GridView'
+export { LocalOffer } from './LocalOffer'
+export { LooksOne } from './LooksOne'
+export { Minus } from './Minus'
+export { TableChart } from './TableChart'
+export { TextFields } from './TextFields'
+export { ToggleOn } from './ToggleOn'
+export { TouchApp } from './TouchApp'
+export { Verified } from './Verified'
+export { ViewColumn } from './ViewColumn'
+export { ViewStream } from './ViewStream'
+export { AccountCircle } from './AccountCircle'
+export { FormatAlignLeft } from './FormatAlignLeft'
+
+// Media Center Icons
+export { FilmSlate } from './FilmSlate'
+export { Queue } from './Queue'
+export { Tv } from './Tv'
+export { Transform } from './Transform'
+export { PictureAsPdf } from './PictureAsPdf'
+export { Article } from './Article'
+export { MenuBook } from './MenuBook'
+export { SportsEsports } from './SportsEsports'
+export { CameraAlt } from './CameraAlt'
+export { FastForward } from './FastForward'
+export { FastRewind } from './FastRewind'
+export { Fullscreen } from './Fullscreen'
+export { FullscreenExit } from './FullscreenExit'
+export { People } from './People'
+export { ArrowUpDown } from './ArrowUpDown'
+export { SkipPrevious } from './SkipPrevious'
+export { SkipNext } from './SkipNext'
+export { Shuffle } from './Shuffle'
+export { Repeat } from './Repeat'
+export { RepeatOne } from './RepeatOne'
+export { Gamepad } from './Gamepad'
+export { Joystick } from './Joystick'
+export { Radio } from './Radio'
+export { Headphones } from './Headphones'
+export { Mic } from './Mic'
+export { MicOff } from './MicOff'
+export { Subtitles } from './Subtitles'
+export { ClosedCaption } from './ClosedCaption'
+export { HighQuality } from './HighQuality'
+export { AspectRatio } from './AspectRatio'
+export { Speed } from './Speed'
+export { Timer } from './Timer'

frontends/nextjs/src/lib/rendering/component-registry.ts

@@ -0,0 +1,224 @@
+/**
+ * Maps Lua component type names to fakemui React components
+ * Used by the declarative renderer to resolve component types from Lua packages
+ */
+
+import {
+  Box,
+  Stack,
+  Grid,
+  Container,
+  Flex,
+  Paper,
+  Card,
+  CardHeader,
+  CardContent,
+  CardActions,
+  Button,
+  IconButton,
+  Input,
+  TextField,
+  Textarea,
+  Select,
+  NativeSelect,
+  Checkbox,
+  Radio,
+  RadioGroup,
+  Switch,
+  Slider,
+  FormControl,
+  FormGroup,
+  FormLabel,
+  FormHelperText,
+  ButtonGroup,
+  Typography,
+  Avatar,
+  Badge,
+  Chip,
+  Divider,
+  List,
+  ListItem,
+  ListItemText,
+  ListItemIcon,
+  Table,
+  TableHead,
+  TableBody,
+  TableRow,
+  TableCell,
+  TableContainer,
+  Tabs,
+  Tab,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Alert,
+  Snackbar,
+  Menu,
+  MenuItem,
+  Tooltip,
+  AppBar,
+  Toolbar,
+  Breadcrumbs,
+  Link,
+  CircularProgress,
+  LinearProgress,
+  Skeleton,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Stepper,
+  Step,
+  StepLabel,
+  Pagination,
+} from '@/fakemui'
+
+import type { ComponentType } from 'react'
+
+/**
+ * Type definition for component props from Lua
+ */
+export interface LuaComponentProps {
+  [key: string]: unknown
+  children?: React.ReactNode
+}
+
+/**
+ * Component registry mapping Lua type names to React components
+ */
+export const componentRegistry: Record<string, ComponentType<LuaComponentProps>> = {
+  // Layout
+  Box,
+  Stack,
+  Grid,
+  Container,
+  Flex,
+
+  // Surfaces
+  Paper,
+  Card,
+  CardHeader,
+  CardContent,
+  CardActions,
+  CardTitle: CardHeader, // Alias
+  CardFooter: CardActions, // Alias
+
+  // Inputs
+  Button,
+  IconButton,
+  ButtonGroup,
+  Input,
+  TextField,
+  TextArea: Textarea,
+  Textarea,
+  Select,
+  NativeSelect,
+  Checkbox,
+  Radio,
+  RadioGroup,
+  Switch,
+  Slider,
+
+  // Form elements
+  FormControl,
+  FormGroup,
+  FormLabel,
+  FormHelperText,
+
+  // Typography & Data Display
+  Typography,
+  Text: Typography,
+  Avatar,
+  Badge,
+  Chip,
+  Divider,
+
+  // Lists
+  List,
+  ListItem,
+  ListItemText,
+  ListItemIcon,
+
+  // Tables
+  Table,
+  TableHead,
+  TableHeader: TableHead, // Alias
+  TableBody,
+  TableRow,
+  TableCell,
+  TableContainer,
+
+  // Navigation
+  Tabs,
+  Tab,
+  TabsList: Tabs, // Map to Tabs container
+  TabsTrigger: Tab, // Map to Tab
+  TabsContent: Box, // Content wrapper
+  Breadcrumbs,
+  Link,
+  Menu,
+  MenuItem,
+  Pagination,
+  Stepper,
+  Step,
+  StepLabel,
+
+  // Feedback
+  Alert,
+  Snackbar,
+  Toast: Snackbar, // Alias
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  CircularProgress,
+  LinearProgress,
+  Progress: LinearProgress, // Alias
+  Spinner: CircularProgress, // Alias
+  Skeleton,
+
+  // Surfaces
+  AppBar,
+  Toolbar,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+
+  // Utils
+  Tooltip,
+}
+
+/**
+ * Get a React component by its Lua type name
+ * @param typeName - The component type name from Lua
+ * @returns The corresponding React component or undefined
+ */
+export function getComponentByType(typeName: string): ComponentType<LuaComponentProps> | undefined {
+  return componentRegistry[typeName]
+}
+
+/**
+ * Check if a component type is registered
+ * @param typeName - The component type name to check
+ * @returns True if the component is registered
+ */
+export function hasComponent(typeName: string): boolean {
+  return typeName in componentRegistry
+}
+
+/**
+ * Get all registered component type names
+ * @returns Array of component type names
+ */
+export function getRegisteredComponentTypes(): string[] {
+  return Object.keys(componentRegistry)
+}
+
+/**
+ * Register a custom component for Lua rendering
+ * @param typeName - The type name to use in Lua
+ * @param component - The React component to render
+ */
+export function registerComponent(typeName: string, component: ComponentType<LuaComponentProps>): void {
+  componentRegistry[typeName] = component
+}

frontends/nextjs/tsconfig.json

@@ -29,6 +29,12 @@
       "@/*": [
         "./src/*"
       ],
+      "@/fakemui": [
+        "../../fakemui"
+      ],
+      "@/fakemui/*": [
+        "../../fakemui/*"
+      ],
       "@/dbal": [
         "../../dbal/development/src"
       ],

packages/ui_level3/seed/metadata.json

@@ -26,11 +26,13 @@
   "tests": {
     "scripts": [
       "tests/metadata.test.lua",
-      "tests/components.test.lua"
+      "tests/components.test.lua",
+      "tests/moderation.test.lua"
     ],
     "cases": [
       "tests/metadata.cases.json",
-      "tests/components.cases.json"
+      "tests/components.cases.json",
+      "tests/moderation.cases.json"
     ]
   },
   "minLevel": 3