npm - @lotte-innovate/ui-component-test - Versions diffs - 0.0.4 → 0.0.6 - Mend

@lotte-innovate/ui-component-test 0.0.4 → 0.0.6

Files changed (137) hide show

package/dist/Typography/index.d.ts +2 -0
package/dist/Typography/index.js +2 -0
package/dist/app/layout.d.ts +7 -0
package/dist/app/layout.jsx +13 -0
package/dist/app/page.d.ts +2 -0
package/dist/app/page.jsx +42 -0
package/dist/app/template/badgeTemplate.d.ts +12 -0
package/dist/app/template/badgeTemplate.jsx +82 -0
package/dist/app/template/buttonTemplate.d.ts +12 -0
package/dist/app/template/buttonTemplate.jsx +82 -0
package/dist/app/template/colorPicker.d.ts +7 -0
package/dist/app/template/colorPicker.jsx +19 -0
package/dist/app/template/textTemplate.d.ts +11 -0
package/dist/app/template/textTemplate.jsx +72 -0
package/dist/app/template/theme.d.ts +12 -0
package/dist/app/template/theme.jsx +44 -0
package/dist/color/alpha.d.ts +784 -0
package/dist/color/alpha.js +784 -0
package/dist/color/constants.d.ts +20 -0
package/dist/color/constants.js +200 -0
package/dist/color/dark.d.ts +392 -0
package/dist/color/dark.js +392 -0
package/dist/color/krdsColors.d.ts +309 -0
package/dist/color/krdsColors.js +309 -0
package/dist/color/light.d.ts +392 -0
package/dist/color/light.js +393 -0
package/dist/components/index.js +0 -3
package/dist/constants.d.ts +185 -0
package/dist/constants.js +569 -0
package/dist/index.d.ts +5 -0
package/dist/index.js +5 -0
package/dist/stories/Welcome.d.ts +3 -0
package/dist/stories/Welcome.jsx +48 -0
package/dist/stories/accordion/Accordion.stories.d.ts +71 -0
package/dist/stories/accordion/Accordion.stories.jsx +79 -0
package/dist/stories/alert-dialog/AlertDialog.stories.d.ts +107 -0
package/dist/stories/alert-dialog/AlertDialog.stories.jsx +73 -0
package/dist/stories/aspect-ratio/AspectRatio.stories.d.ts +68 -0
package/dist/stories/aspect-ratio/AspectRatio.stories.jsx +106 -0
package/dist/stories/avatar/Avatar.stories.d.ts +127 -0
package/dist/stories/avatar/Avatar.stories.jsx +105 -0
package/dist/stories/badge/Badge.stories.d.ts +133 -0
package/dist/stories/badge/Badge.stories.jsx +130 -0
package/dist/stories/bubble-chart/BubbleChart.stories.d.ts +103 -0
package/dist/stories/bubble-chart/BubbleChart.stories.jsx +176 -0
package/dist/stories/button/Button.stories.d.ts +148 -0
package/dist/stories/button/Button.stories.jsx +98 -0
package/dist/stories/button/IconButton.stories.d.ts +125 -0
package/dist/stories/button/IconButton.stories.jsx +93 -0
package/dist/stories/callout/Callout.stories.d.ts +129 -0
package/dist/stories/callout/Callout.stories.jsx +205 -0
package/dist/stories/card/Card.stories.d.ts +100 -0
package/dist/stories/card/Card.stories.jsx +134 -0
package/dist/stories/checkbox/Checkbox.stories.d.ts +147 -0
package/dist/stories/checkbox/Checkbox.stories.jsx +166 -0
package/dist/stories/checkbox/CheckboxCard.stories.d.ts +129 -0
package/dist/stories/checkbox/CheckboxCard.stories.jsx +125 -0
package/dist/stories/checkbox/CheckboxGroup.stories.d.ts +91 -0
package/dist/stories/checkbox/CheckboxGroup.stories.jsx +144 -0
package/dist/stories/context-menu/ContextMenu.stories.d.ts +113 -0
package/dist/stories/context-menu/ContextMenu.stories.jsx +155 -0
package/dist/stories/data-list/DataList.stories.d.ts +97 -0
package/dist/stories/data-list/DataList.stories.jsx +185 -0
package/dist/stories/dialog/Dialog.stories.d.ts +88 -0
package/dist/stories/dialog/Dialog.stories.jsx +82 -0
package/dist/stories/doughnut-chart/DoughnutChart.stories.d.ts +181 -0
package/dist/stories/doughnut-chart/DoughnutChart.stories.jsx +236 -0
package/dist/stories/dropdown-menu/DropdownMenu.stories.d.ts +112 -0
package/dist/stories/dropdown-menu/DropdownMenu.stories.jsx +170 -0
package/dist/stories/header/Header.stories.d.ts +112 -0
package/dist/stories/header/Header.stories.jsx +116 -0
package/dist/stories/hover-card/HoverCard.stories.d.ts +107 -0
package/dist/stories/hover-card/HoverCard.stories.jsx +98 -0
package/dist/stories/inset/Inset.stories.d.ts +58 -0
package/dist/stories/inset/Inset.stories.jsx +79 -0
package/dist/stories/label/Label.stories.d.ts +94 -0
package/dist/stories/label/Label.stories.jsx +112 -0
package/dist/stories/menubar/Menubar.stories.d.ts +119 -0
package/dist/stories/menubar/Menubar.stories.jsx +135 -0
package/dist/stories/navigation-menu/NavigationMenu.stories.d.ts +385 -0
package/dist/stories/navigation-menu/NavigationMenu.stories.jsx +144 -0
package/dist/stories/pie-chart/PieChart.stories.d.ts +186 -0
package/dist/stories/pie-chart/PieChart.stories.jsx +300 -0
package/dist/stories/popover/Popover.stories.d.ts +78 -0
package/dist/stories/popover/Popover.stories.jsx +107 -0
package/dist/stories/progress/Progress.stories.d.ts +113 -0
package/dist/stories/progress/Progress.stories.jsx +82 -0
package/dist/stories/radar-chart/RadarChart.stories.d.ts +111 -0
package/dist/stories/radar-chart/RadarChart.stories.jsx +200 -0
package/dist/stories/radio/Radio.stories.d.ts +108 -0
package/dist/stories/radio/Radio.stories.jsx +94 -0
package/dist/stories/radio/RadioCards.stories.d.ts +127 -0
package/dist/stories/radio/RadioCards.stories.jsx +153 -0
package/dist/stories/radio/RadioGroup.stories.d.ts +111 -0
package/dist/stories/radio/RadioGroup.stories.jsx +142 -0
package/dist/stories/scroll-area/ScrollArea.stories.d.ts +59 -0
package/dist/stories/scroll-area/ScrollArea.stories.jsx +123 -0
package/dist/stories/segmented-control/SegmentedControl.stories.d.ts +97 -0
package/dist/stories/segmented-control/SegmentedControl.stories.jsx +101 -0
package/dist/stories/select/Select.stories.d.ts +116 -0
package/dist/stories/select/Select.stories.jsx +149 -0
package/dist/stories/separator/Separator.stories.d.ts +93 -0
package/dist/stories/separator/Separator.stories.jsx +106 -0
package/dist/stories/skeleton/Skeleton.stories.d.ts +88 -0
package/dist/stories/skeleton/Skeleton.stories.jsx +119 -0
package/dist/stories/slider/Slider.stories.d.ts +114 -0
package/dist/stories/slider/Slider.stories.jsx +94 -0
package/dist/stories/spinner/Spinner.stories.d.ts +83 -0
package/dist/stories/spinner/Spinner.stories.jsx +112 -0
package/dist/stories/switch/Switch.stories.d.ts +146 -0
package/dist/stories/switch/Switch.stories.jsx +119 -0
package/dist/stories/tab-nav/TabNav.stories.d.ts +55 -0
package/dist/stories/tab-nav/TabNav.stories.jsx +68 -0
package/dist/stories/table/Table.stories.d.ts +87 -0
package/dist/stories/table/Table.stories.jsx +106 -0
package/dist/stories/tabs/Tabs.stories.d.ts +55 -0
package/dist/stories/tabs/Tabs.stories.jsx +76 -0
package/dist/stories/text/Text.stories.d.ts +74 -0
package/dist/stories/text/Text.stories.jsx +91 -0
package/dist/stories/textArea/TextArea.stories.d.ts +117 -0
package/dist/stories/textArea/TextArea.stories.jsx +112 -0
package/dist/stories/textfield/TextField.stories.d.ts +116 -0
package/dist/stories/textfield/TextField.stories.jsx +120 -0
package/dist/stories/toast/Toast.stories.d.ts +138 -0
package/dist/stories/toast/Toast.stories.jsx +122 -0
package/dist/stories/toggle/Toggle.stories.d.ts +115 -0
package/dist/stories/toggle/Toggle.stories.jsx +106 -0
package/dist/stories/toggle/ToggleGroup.stories.d.ts +103 -0
package/dist/stories/toggle/ToggleGroup.stories.jsx +127 -0
package/dist/stories/tooltip/Tooltip.stories.d.ts +93 -0
package/dist/stories/tooltip/Tooltip.stories.jsx +91 -0
package/dist/tsconfig.tsbuildinfo +1 -0
package/dist/types.d.ts +11 -0
package/dist/types.js +1 -0
package/dist/utils/utils.d.ts +3 -0
package/dist/utils/utils.js +27 -0
package/package.json +4 -6

package/dist/Typography/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as Header } from './Header';
2	+ export { default as Text } from './Text';

package/dist/Typography/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default as Header } from '../Typography/Header';
2	+ export { default as Text } from '../Typography/Text';

package/dist/app/layout.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { Metadata } from 'next';
+import './globals.css';
+export declare const metadata: Metadata;
+export default function RootLayout({ children, }: Readonly<{
+    children: React.ReactNode;
+}>): import("react").JSX.Element;

package/dist/app/layout.jsx ADDED Viewed

@@ -0,0 +1,13 @@
+import { Inter } from 'next/font/google';
+import './globals.css';
+var inter = Inter({ subsets: ['latin'] });
+export var metadata = {
+    title: 'Create Next App',
+    description: 'Generated by create next app',
+};
+export default function RootLayout(_a) {
+    var children = _a.children;
+    return (<html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>);
+}

package/dist/app/page.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import React from 'react';
2	+ export default function Home(): false \| React.JSX.Element;

package/dist/app/page.jsx ADDED Viewed

@@ -0,0 +1,42 @@
+'use client';
+import React, { useEffect, useState } from 'react';
+import Theme from './template/theme';
+import BadgeTemplate from './template/badgeTemplate';
+import ButtonTemplate from './template/buttonTemplate';
+import TextTemplate from './template/textTemplate';
+import Button from 'components/Button';
+import { Toast, ToastActionButton, ToastDescription } from 'components/Toast';
+export default function Home() {
+    var _a = useState('full'), radiusTheme = _a[0], setRadiusTheme = _a[1];
+    var _b = useState('95%'), scalingTheme = _b[0], setScalingTheme = _b[1];
+    var _c = useState('semibold'), fontWeightTheme = _c[0], setFontWeightTheme = _c[1];
+    var _d = useState('blue'), colorTheme = _d[0], setColorTheme = _d[1];
+    var _e = useState('blue'), fontColorTheme = _e[0], setFontColorTheme = _e[1];
+    var _f = useState('light'), mode = _f[0], setMode = _f[1];
+    var _g = useState(false), mounted = _g[0], setMounted = _g[1];
+    var _h = useState(false), open = _h[0], setOpen = _h[1];
+    useEffect(function () {
+        setMounted(true);
+    }, []);
+    return (mounted && (<div className={"flex flex-col w-full h-auto min-h-screen ".concat(mode == 'light' ? 'bg-white text-black' : 'bg-black text-white', " p-3")}>
+        <div onClick={function () {
+            setMode(mode === 'light' ? 'dark' : 'light');
+        }}>
+          {mode === 'light' ? 'light' : 'dark'}
+        </div>
+        <Button onClick={function () { return setOpen(true); }} className="w-[200px]" scaling={'95%'}>
+          toast
+        </Button>
+        <Toast openToast={open} setOpenToast={setOpen}>
+          <ToastDescription>There was a problem with your request.</ToastDescription>
+          <ToastActionButton altText="액션버튼">버튼</ToastActionButton>
+        </Toast>
+        <Theme setRadiusTheme={setRadiusTheme} setScalingTheme={setScalingTheme} setFontWeightTheme={setFontWeightTheme} setColorTheme={setColorTheme} setFontColorTheme={setFontColorTheme} mode={mode}/>
+        <BadgeTemplate radiusTheme={radiusTheme} scalingTheme={scalingTheme} fontWeightTheme={fontWeightTheme} colorTheme={colorTheme} mode={mode}/>
+        <ButtonTemplate radiusTheme={radiusTheme} scalingTheme={scalingTheme} fontWeightTheme={fontWeightTheme} colorTheme={colorTheme} mode={mode}/>
+        <TextTemplate scalingTheme={scalingTheme} fontWeightTheme={fontWeightTheme} colorTheme={fontColorTheme} mode={mode}/>
+      </div>));
+}

package/dist/app/template/badgeTemplate.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import React from 'react';
+import 'react-tabs/style/react-tabs.css';
+import { ITheme, IColor, IRadius, IScaling, IWeight } from 'types';
+type IBadgeTemplate = {
+    radiusTheme: IRadius;
+    scalingTheme: IScaling;
+    fontWeightTheme: IWeight;
+    colorTheme: IColor;
+    mode: ITheme;
+};
+declare const BadgeTemplate: ({ radiusTheme, scalingTheme, fontWeightTheme, colorTheme, mode, }: IBadgeTemplate) => React.JSX.Element;
+export default BadgeTemplate;

package/dist/app/template/badgeTemplate.jsx ADDED Viewed

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import 'react-tabs/style/react-tabs.css';
+import { radiusOptions, scalingOptions } from '../../constants';
+import Badge from 'components/Badge';
+import { colorOptions } from 'color/constants';
+var BadgeTemplate = function (_a) {
+    var radiusTheme = _a.radiusTheme, scalingTheme = _a.scalingTheme, fontWeightTheme = _a.fontWeightTheme, colorTheme = _a.colorTheme, mode = _a.mode;
+    return (<div className="m-3">
+      <div className=" font-extrabold">Badge</div>
+      <div className="">
+        <div className="border p-2 space-x-2">
+          <Tabs className="">
+            <TabList>
+              <Tab>Theme colors</Tab>
+              <Tab>All colors</Tab>
+              <Tab>All sizes</Tab>
+            </TabList>
+            <TabPanel>
+              <p className="">Main Color 적용 뱃지</p>
+              <Badge radius={radiusTheme} scaling={scalingTheme} color={colorTheme}>
+                Badge
+              </Badge>
+              <Badge radius={radiusTheme} scaling={scalingTheme} color={colorTheme}>
+                outline
+              </Badge>
+            </TabPanel>
+            <TabPanel>
+              <table>
+                <tr>
+                  <th></th>
+                  <th>default</th>
+                  <th>outline</th>
+                </tr>
+                {colorOptions === null || colorOptions === void 0 ? void 0 : colorOptions.map(function (color) { return (<tr key={color}>
+                    <th>{color}</th>
+                    <td>
+                      <Badge radius={radiusTheme} scaling={scalingTheme} color={color}>
+                        Badge
+                      </Badge>
+                    </td>
+                    <td>
+                      <Badge radius={radiusTheme} scaling={scalingTheme} color={color}>
+                        outline
+                      </Badge>
+                    </td>
+                  </tr>); })}
+              </table>
+            </TabPanel>
+            <TabPanel>
+              <table>
+                <tr>
+                  <th></th>
+                  {radiusOptions.map(function (radius) { return (<th key={radius}>{radius}</th>); })}
+                </tr>
+                {scalingOptions.map(function (scale) { return (<tr key={scale}>
+                    <th>{scale}</th>
+                    {radiusOptions.map(function (radius) { return (<td key={radius}>
+                        <Badge scaling={scale} radius={radius} color={colorTheme}>
+                          Badge
+                        </Badge>
+                      </td>); })}
+                  </tr>); })}
+              </table>
+              <table>
+                {scalingOptions.map(function (scale) { return (<tr key={scale}>
+                    <th>{scale}</th>
+                    {radiusOptions.map(function (radius) { return (<td key={radius}>
+                        <Badge scaling={scale} radius={radius} color={colorTheme}>
+                          outline
+                        </Badge>
+                      </td>); })}
+                  </tr>); })}
+              </table>
+            </TabPanel>
+          </Tabs>
+        </div>
+      </div>
+    </div>);
+};
+export default BadgeTemplate;

package/dist/app/template/buttonTemplate.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ITheme, IColor, IRadius, IScaling, IWeight } from 'types';
+import 'react-tabs/style/react-tabs.css';
+type IButtonTemplate = {
+    radiusTheme: IRadius;
+    scalingTheme: IScaling;
+    fontWeightTheme: IWeight;
+    colorTheme: IColor;
+    mode: ITheme;
+};
+declare const ButtonTemplate: ({ radiusTheme, scalingTheme, fontWeightTheme, colorTheme, mode, }: IButtonTemplate) => React.JSX.Element;
+export default ButtonTemplate;

package/dist/app/template/buttonTemplate.jsx ADDED Viewed

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import 'react-tabs/style/react-tabs.css';
+import { radiusOptions, scalingOptions } from '../../constants';
+import Button from 'components/Button';
+import { colorOptions } from 'color/constants';
+var ButtonTemplate = function (_a) {
+    var radiusTheme = _a.radiusTheme, scalingTheme = _a.scalingTheme, fontWeightTheme = _a.fontWeightTheme, colorTheme = _a.colorTheme, mode = _a.mode;
+    return (<div className="m-3">
+      <div className=" font-extrabold">Button</div>
+      <div className="">
+        <div className="border p-2 space-x-2">
+          <Tabs className="">
+            <TabList>
+              <Tab>Theme colors</Tab>
+              <Tab>All colors</Tab>
+              <Tab>All sizes</Tab>
+            </TabList>
+            <TabPanel>
+              <p className="">Main Color 적용 Button</p>
+              <Button radius={radiusTheme} scaling={scalingTheme} weight={fontWeightTheme} color={colorTheme}>
+                Button
+              </Button>
+              <Button radius={radiusTheme} scaling={scalingTheme} weight={fontWeightTheme} color={colorTheme}>
+                outline
+              </Button>
+            </TabPanel>
+            <TabPanel>
+              <table>
+                <tr>
+                  <th></th>
+                  <th>default</th>
+                  <th>outline</th>
+                </tr>
+                {colorOptions === null || colorOptions === void 0 ? void 0 : colorOptions.map(function (color) { return (<tr key={color}>
+                    <th>{color}</th>
+                    <td>
+                      <Button radius={radiusTheme} scaling={scalingTheme} weight={fontWeightTheme} color={color}>
+                        Button
+                      </Button>
+                    </td>
+                    <td>
+                      <Button radius={radiusTheme} scaling={scalingTheme} weight={fontWeightTheme} color={color}>
+                        outline
+                      </Button>
+                    </td>
+                  </tr>); })}
+              </table>
+            </TabPanel>
+            <TabPanel>
+              <table>
+                <tr>
+                  <th></th>
+                  {radiusOptions.map(function (radius) { return (<th key={radius}>{radius}</th>); })}
+                </tr>
+                {scalingOptions.map(function (scale) { return (<tr key={scale}>
+                    <th>{scale}</th>
+                    {radiusOptions.map(function (radius) { return (<td key={radius}>
+                        <Button scaling={scale} radius={radius} weight={fontWeightTheme} color={colorTheme}>
+                          Button
+                        </Button>
+                      </td>); })}
+                  </tr>); })}
+              </table>
+              <table>
+                {scalingOptions.map(function (scale) { return (<tr key={scale}>
+                    <th>{scale}</th>
+                    {radiusOptions.map(function (radius) { return (<td key={radius}>
+                        <Button scaling={scale} radius={radius} weight={fontWeightTheme} color={colorTheme}>
+                          outline
+                        </Button>
+                      </td>); })}
+                  </tr>); })}
+              </table>
+            </TabPanel>
+          </Tabs>
+        </div>
+      </div>
+    </div>);
+};
+export default ButtonTemplate;

package/dist/app/template/colorPicker.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IColor } from 'types';
+declare const ColorPicker: ({ setColorTheme, mode, }: {
+    setColorTheme: (color: IColor) => void;
+    mode: string;
+}) => import("react").JSX.Element;
+export default ColorPicker;

package/dist/app/template/colorPicker.jsx ADDED Viewed

@@ -0,0 +1,19 @@
+'use client';
+import { bgColorStyle } from '../../constants';
+var ColorPicker = function (_a) {
+    var setColorTheme = _a.setColorTheme, mode = _a.mode;
+    var handleColorClick = function (color) {
+        setColorTheme(color);
+    };
+    return (<div>
+      <div className="flex flex-row flex-wrap gap-2">
+        {Object.entries(bgColorStyle).map(function (_a) {
+            var key = _a[0], value = _a[1];
+            return (<button className={"w-12 p-2 rounded-full text-xs cursor-pointer hover:border-gray-900 ".concat(value, " text-white hover:text-black")} key={key}>
+            {key.replace('Dark', '')}
+          </button>);
+        })}
+      </div>
+    </div>);
+};
+export default ColorPicker;

package/dist/app/template/textTemplate.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ITheme, IScaling, IWeight, IColor } from 'types';
+import 'react-tabs/style/react-tabs.css';
+type ITextTemplate = {
+    scalingTheme: IScaling;
+    fontWeightTheme: IWeight;
+    colorTheme: IColor;
+    mode: ITheme;
+};
+declare const TextTemplate: ({ scalingTheme, fontWeightTheme, colorTheme, mode }: ITextTemplate) => React.JSX.Element;
+export default TextTemplate;

package/dist/app/template/textTemplate.jsx ADDED Viewed

@@ -0,0 +1,72 @@
+import React from 'react';
+import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import 'react-tabs/style/react-tabs.css';
+import { scalingOptions, weightOptions } from '../../constants';
+import { Text } from '../../Typography/Text';
+import { colorOptions } from 'color/constants';
+var TextTemplate = function (_a) {
+    var scalingTheme = _a.scalingTheme, fontWeightTheme = _a.fontWeightTheme, colorTheme = _a.colorTheme, mode = _a.mode;
+    return (<div className="m-3">
+      <div className=" font-extrabold">Text</div>
+      <div className="">
+        <div className="border p-2 space-x-2">
+          <Tabs className="">
+            <TabList>
+              <Tab>All colors</Tab>
+              <Tab>All sizes</Tab>
+              <Tab>All weights</Tab>
+            </TabList>
+            <TabPanel>
+              <table>
+                <tbody>
+                  {colorOptions === null || colorOptions === void 0 ? void 0 : colorOptions.map(function (color) { return (<tr key={color}>
+                      <td>{color}</td>
+                      <td>
+                        <Text
+        // scaling={scalingTheme}
+        weight={fontWeightTheme} color={color}>
+                          The quick brown fox jumps over the lazy dog.
+                        </Text>
+                      </td>
+                    </tr>); })}
+                </tbody>
+              </table>
+            </TabPanel>
+            <TabPanel>
+              <table>
+                <tbody>
+                  {scalingOptions === null || scalingOptions === void 0 ? void 0 : scalingOptions.map(function (scale) { return (<tr key={scale}>
+                      <td>{scale}</td>
+                      <td>
+                        <Text
+        // scaling={scale}
+        weight={fontWeightTheme} color={colorTheme}>
+                          The quick brown fox jumps over the lazy dog.
+                        </Text>
+                      </td>
+                    </tr>); })}
+                </tbody>
+              </table>
+            </TabPanel>
+            <TabPanel>
+              <table>
+                <tbody>
+                  {weightOptions === null || weightOptions === void 0 ? void 0 : weightOptions.map(function (weight) { return (<tr key={weight}>
+                      <td>{weight}</td>
+                      <td>
+                        <Text
+        // scaling={scalingTheme}
+        weight={weight} color={colorTheme}>
+                          The quick brown fox jumps over the lazy dog.
+                        </Text>
+                      </td>
+                    </tr>); })}
+                </tbody>
+              </table>
+            </TabPanel>
+          </Tabs>
+        </div>
+      </div>
+    </div>);
+};
+export default TextTemplate;

package/dist/app/template/theme.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import React, { Dispatch, SetStateAction } from 'react';
+import { IColor, IRadius, IScaling, IWeight } from 'types';
+type ITheme = {
+    setRadiusTheme: Dispatch<SetStateAction<IRadius>>;
+    setScalingTheme: Dispatch<SetStateAction<IScaling>>;
+    setFontWeightTheme: Dispatch<SetStateAction<IWeight>>;
+    setColorTheme: Dispatch<SetStateAction<IColor>>;
+    setFontColorTheme: Dispatch<SetStateAction<IColor>>;
+    mode: string;
+};
+declare const Theme: ({ setRadiusTheme, setScalingTheme, setFontWeightTheme, setColorTheme, setFontColorTheme, mode, }: ITheme) => React.JSX.Element;
+export default Theme;

package/dist/app/template/theme.jsx ADDED Viewed

@@ -0,0 +1,44 @@
+import React from 'react';
+import ColorPicker from './colorPicker';
+import { radiusOptions, scalingOptions, weightOptions } from '../../constants';
+var Theme = function (_a) {
+    var setRadiusTheme = _a.setRadiusTheme, setScalingTheme = _a.setScalingTheme, setFontWeightTheme = _a.setFontWeightTheme, setColorTheme = _a.setColorTheme, setFontColorTheme = _a.setFontColorTheme, mode = _a.mode;
+    var setColor = function (color) {
+        setColorTheme(color);
+        setFontColorTheme(color);
+    };
+    return (<div className="flex flex-col p-3">
+      <p className="text-2xl font-bold">Themes</p>
+      <div className="flex flex-col text-xl gap-2">
+        Accent Color
+        <ColorPicker mode={mode} setColorTheme={setColor}/>
+      </div>
+      <div className="flex gap-4">
+        <div className="flex gap-2">
+          <p>Radius</p>
+          <select className="border border-gray-900" onChange={function (e) { return setRadiusTheme(e.target.value); }} defaultValue={'full'}>
+            {radiusOptions.map(function (item) { return (<option key={item} value={item}>
+                {item}
+              </option>); })}
+          </select>
+        </div>
+        <div className="flex gap-2">
+          <p>Scaling</p>
+          <select className="border border-gray-900" onChange={function (e) { return setScalingTheme(e.target.value); }}>
+            {scalingOptions.map(function (item) { return (<option key={item} value={item}>
+                {item}
+              </option>); })}
+          </select>
+        </div>
+        <div className="flex gap-2">
+          <p>Font Weight</p>
+          <select className="border border-gray-900" onChange={function (e) { return setFontWeightTheme(e.target.value); }} defaultValue={'semibold'}>
+            {weightOptions.map(function (item) { return (<option key={item} value={item}>
+                {item}
+              </option>); })}
+          </select>
+        </div>
+      </div>
+    </div>);
+};
+export default Theme;