@rovula/ui 0.0.4 → 0.0.5

package/src/theme/global.css

@@ -0,0 +1,136 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --white: 255 255 255; /* #ffffff */
+    --black: 28 28 28; /* #1c1c1c */
+
+    --theme-50: 232 242 255; /* #E8F2FF -> 232 242 255 */
+    --theme-100: 213 230 255; /* #D5E6FF -> 213 230 255 */
+    --theme-200: 179 207 255; /* #B3CFFF -> 179 207 255 */
+    --theme-300: 136 174 255; /* #85AEFF -> 136 174 255 */
+    --theme-400: 86 126 255; /* #567EFF -> 86 126 255 */
+    --theme-500: 47 78 255; /* #2F4EFF -> 47 78 255 */
+    --theme-600: 12 26 255; /* #0C1AFF -> 12 26 255 */
+    --theme-700: 0 12 255; /* #000CFF -> 0 12 255 */
+    --theme-800: 6 18 205; /* #0612CD -> 6 18 205 */
+    --theme-900: 16 29 159; /* #101D9F -> 16 29 159 */
+    --theme-default: var(--theme-100);
+    --theme-foreground: var(--white);
+
+    --primary-5: 242 242 246; /* #F2F2F6 */
+    --primary-10: 230 230 236; /* #E6E6EC */
+    --primary-20: 204 204 218; /* #CCCCDA */
+    --primary-30: 179 179 199; /* #B3B3C7 */
+    --primary-40: 153 153 180; /* #9999B4 */
+    --primary-50: 128 128 161; /* #8080A1 */
+    --primary-60: 103 103 143; /* #67678F */
+    --primary-70: 77 77 124; /* #4D4D7C */
+    --primary-80: 52 52 105; /* #343469 */
+    --primary-90: 26 26 87; /* #1A1A57 */
+    --primary-100: 1 1 68; /* #010144 */
+    --primary-110: 1 1 61; /* #01013D */
+    --primary-120: 1 1 54; /* #010136 */
+    --primary-130: 1 1 48; /* #010130 */
+    --primary-140: 1 1 41; /* #010129 */
+    --primary-150: 1 1 34; /* #010122 */
+    --primary-default: var(--primary-100);
+    --primary-foreground: var(--white);
+
+    --secondary-5: 254 254 255; /* #FEFEFF */
+    --secondary-10: 253 254 255; /* #FDFEFF */
+    --secondary-20: 251 252 255; /* #FBFCFF */
+    --secondary-30: 249 251 255; /* #F9FBFF */
+    --secondary-40: 247 249 255; /* #F7F9FF */
+    --secondary-50: 245 248 255; /* #F5F8FF */
+    --secondary-60: 242 247 255; /* #F2F7FF */
+    --secondary-70: 240 245 255; /* #F0F5FF */
+    --secondary-80: 238 244 255; /* #EEF4FF */
+    --secondary-90: 236 242 255; /* #ECF2FF */
+    --secondary-100: 234 241 255; /* #EAF1FF */
+    --secondary-110: 211 217 229; /* #D3D9E5 */
+    --secondary-120: 187 193 204; /* #BBC1CC */
+    --secondary-130: 164 169 178; /* #A4A9B2 */
+    --secondary-140: 140 145 153; /* #8C9199 */
+    --secondary-150: 117 121 128; /* #757980 */
+    --secondary-default: var(--secondary-100);
+    --secondary-foreground: 1 1 68;
+
+    --tertiary-5: 245 246 255; /* #F5F6FF */
+    --tertiary-10: 234 237 255; /* #EAEDFF */
+    --tertiary-20: 213 220 255; /* #D5DCFF */
+    --tertiary-30: 193 202 255; /* #C1CAFF */
+    --tertiary-40: 172 184 255; /* #ACB8FF */
+    --tertiary-50: 151 166 255; /* #97A6FF */
+    --tertiary-60: 132 149 255; /* #8295FF */
+    --tertiary-70: 109 131 255; /* #6D83FF */
+    --tertiary-80: 89 113 255; /* #5971FF */
+    --tertiary-90: 68 96 255; /* #4460FF */
+    --tertiary-100: 47 78 255; /* #2F4EFF */
+    --tertiary-110: 42 70 229; /* #2A46E5 */
+    --tertiary-120: 38 62 204; /* #263ECC */
+    --tertiary-130: 33 55 178; /* #2137B2 */
+    --tertiary-140: 28 47 153; /* #1C2F99 */
+    --tertiary-150: 24 39 128; /* #182780 */
+    --tertiary-default: var(--tertiary-100);
+    --tertiary-foreground: var(--white);
+
+    --grey-5: 250 250 250; /* #FAFAFA */
+    --grey-10: 245 245 245; /* #F5F5F5 */
+    --grey-20: 236 236 236; /* #ECECEC */
+    --grey-30: 226 226 226; /* #E2E2E2 */
+    --grey-40: 216 216 216; /* #D8D8D8 */
+    --grey-50: 207 207 207; /* #CFCFCF */
+    --grey-60: 197 197 197; /* #C5C5C5 */
+    --grey-70: 187 187 187; /* #BBBBBB */
+    --grey-80: 177 177 177; /* #B1B1B1 */
+    --grey-90: 168 168 168; /* #A8A8A8 */
+    --grey-100: 158 158 158; /* #9E9E9E */
+    --grey-110: 142 142 142; /* #8E8E8E */
+    --grey-120: 126 126 126; /* #7E7E7E */
+    --grey-130: 111 111 111; /* #6F6F6F */
+    --grey-140: 95 95 95; /* #5F5F5F */
+    --grey-150: 79 79 79; /* #4F4F4F */
+    --grey-default: var(--grey-100);
+    --grey-foreground: 1 1 68;
+  
+    --grey2-100: 249 250 251; /* #F9FAFB */
+    --grey2-200: 244 246 248; /* #F4F6F8 */
+    --grey2-300: 223 227 232; /* #DFE3E8 */
+    --grey2-400: 196 205 213; /* #C4CDD5 */
+    --grey2-500: 145 158 171; /* #919EAB */
+    --grey2-600: 99 115 129; /* #637381 */
+    --grey2-700: 69 79 91; /* #454F5B */
+    --grey2-800: 33 43 54; /* #212B36 */
+    --grey2-900: 22 28 36; /* #161C24 */
+    --grey-default: var(--grey-100);
+    --grey-foreground: var(--white);
+  
+    --info-100: 41 152 255; /* #2998FF */
+    --info-120: 33 122 204; /* #217ACC */
+    --info-default: var(--info-100);
+    --info-foreground: var(--white);
+    
+    --success-100: 84 214 44; /* #54D62C */
+    --success-120: 67 171 35; /* #43AB23 */
+    --success-default: var(--success-100);
+    --success-foreground: var(--white);
+    
+    --warning-100: 255 193 7; /* #FFC107 */
+    --warning-120: 204 154 6; /* #CC9A06 */
+    --warning-default: var(--warning-100);
+    --warning-foreground: var(--white);
+    
+    --error-100: 255 77 53; /* #FF4D35 */
+    --error-120: 204 62 42; /* #CC3E2A */
+    --error-default: var(--error-100);
+    --error-foreground: var(--white);
+
+
+    --btn-rounded-sm: 10px;
+    --btn-rounded-md: 12px;
+    --btn-rounded-lg: 16px;
+  }
+}

package/src/theme/main-preset.js

@@ -0,0 +1,159 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: "class",
+  theme: {
+    extend: {
+      fontSize: {
+        h1: [
+          "64px",
+          {
+            lineHeight: "80px",
+            fontWeight: "700",
+          },
+        ],
+        h2: [
+          "48px",
+          {
+            lineHeight: "60px",
+            fontWeight: "700",
+          },
+        ],
+        h3: [
+          "32px",
+          {
+            lineHeight: "48px",
+            fontWeight: "700",
+          },
+        ],
+        h4: [
+          "24px",
+          {
+            lineHeight: "32px",
+            fontWeight: "700",
+          },
+        ],
+        h5: [
+          "20px",
+          {
+            lineHeight: "28px",
+            fontWeight: "700",
+          },
+        ],
+        h6: [
+          "18px",
+          {
+            lineHeight: "24px",
+            fontWeight: "700",
+          },
+        ],
+        subtitile1: [
+          "16px",
+          {
+            lineHeight: "24px",
+            fontWeight: "400",
+          },
+        ],
+        subtitile2: [
+          "16px",
+          {
+            lineHeight: "24px",
+            fontWeight: "500",
+          },
+        ],
+        subtitile3: [
+          "16px",
+          {
+            lineHeight: "24px",
+            fontWeight: "600",
+          },
+        ],
+        subtitile4: [
+          "14px",
+          {
+            lineHeight: "22px",
+            fontWeight: "400",
+          },
+        ],
+        subtitile5: [
+          "14px",
+          {
+            lineHeight: "22px",
+            fontWeight: "500",
+          },
+        ],
+        subtitile6: [
+          "14px",
+          {
+            lineHeight: "22px",
+            fontWeight: "600",
+          },
+        ],
+        body1: [
+          "16px",
+          {
+            lineHeight: "20px",
+            fontWeight: "400",
+          },
+        ],
+        body2: [
+          "16px",
+          {
+            lineHeight: "20px",
+            fontWeight: "500",
+          },
+        ],
+        body3: [
+          "14px",
+          {
+            lineHeight: "18px",
+            fontWeight: "400",
+          },
+        ],
+        body4: [
+          "14px",
+          {
+            lineHeight: "18px",
+            fontWeight: "500",
+          },
+        ],
+        small1: [
+          "12px",
+          {
+            lineHeight: "14px",
+            fontWeight: "400",
+          },
+        ],
+        small2: [
+          "12px",
+          {
+            lineHeight: "14px",
+            fontWeight: "500",
+          },
+        ],
+        small3: [
+          "10px",
+          {
+            lineHeight: "12px",
+            fontWeight: "400",
+          },
+        ],
+        label1: [
+          "12px",
+          {
+            lineHeight: "12px",
+            fontWeight: "400",
+          },
+        ],
+        label2: [
+          "10px",
+          {
+            lineHeight: "10px",
+            fontWeight: "400",
+          },
+        ],
+      },
+    },
+  },
+  presets: [require("./presets/colors")],
+  plugins: [require("./plugins/utilities/typography")],
+};

package/src/theme/plugins/utilities/typography.js

@@ -0,0 +1,69 @@
+const plugin = require("tailwindcss/plugin");
+
+module.exports = plugin(function ({ addUtilities }) {
+  addUtilities({
+    ".typography-h1": {
+      "@apply text-h1": {},
+    },
+    ".typography-h2": {
+      "@apply text-h2": {},
+    },
+    ".typography-h3": {
+      "@apply text-h3": {},
+    },
+    ".typography-h4": {
+      "@apply text-h4": {},
+    },
+    ".typography-h5": {
+      "@apply text-h5": {},
+    },
+    ".typography-h6": {
+      "@apply text-h6": {},
+    },
+    ".typography-subtitile1": {
+      "@apply text-subtitile1": {},
+    },
+    ".typography-subtitile2": {
+      "@apply text-subtitile2": {},
+    },
+    ".typography-subtitile3": {
+      "@apply text-subtitile3": {},
+    },
+    ".typography-subtitile4": {
+      "@apply text-subtitile4": {},
+    },
+    ".typography-subtitile5": {
+      "@apply text-subtitile5": {},
+    },
+    ".typography-subtitile6": {
+      "@apply text-subtitile6": {},
+    },
+    ".typography-body1": {
+      "@apply text-body1": {},
+    },
+    ".typography-body2": {
+      "@apply text-body2": {},
+    },
+    ".typography-body3": {
+      "@apply text-body3": {},
+    },
+    ".typography-body4": {
+      "@apply text-body4": {},
+    },
+    ".typography-small1": {
+      "@apply text-small1": {},
+    },
+    ".typography-small2": {
+      "@apply text-small2": {},
+    },
+    ".typography-small3": {
+      "@apply text-small3": {},
+    },
+    ".typography-label1": {
+      "@apply text-label1": {},
+    },
+    ".typography-label2": {
+      "@apply text-label2": {},
+    },
+  });
+});

package/src/theme/presets/colors.js

@@ -0,0 +1,140 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        themes: {
+          50: "rgb(var(--themes-50) / <alpha-value>)",
+          100: "rgb(var(--themes-100) / <alpha-value>)",
+          200: "rgb(var(--themes-200) / <alpha-value>)",
+          300: "rgb(var(--themes-300) / <alpha-value>)",
+          400: "rgb(var(--themes-400) / <alpha-value>)",
+          500: "rgb(var(--themes-500) / <alpha-value>)",
+          600: "rgb(var(--themes-600) / <alpha-value>)",
+          700: "rgb(var(--themes-700) / <alpha-value>)",
+          800: "rgb(var(--themes-800) / <alpha-value>)",
+          900: "rgb(var(--themes-900) / <alpha-value>)",
+          DEFAULT: "rgb(var(--themes-default) / <alpha-value>)",
+          foreground: "rgb(var(--themes-foreground) / <alpha-value>)",
+        },
+        primary: {
+          5: "rgb(var(--primary-5) / <alpha-value>)",
+          10: "rgb(var(--primary-10) / <alpha-value>)",
+          20: "rgb(var(--primary-20) / <alpha-value>)",
+          30: "rgb(var(--primary-30) / <alpha-value>)",
+          40: "rgb(var(--primary-40) / <alpha-value>)",
+          50: "rgb(var(--primary-50) / <alpha-value>)",
+          60: "rgb(var(--primary-60) / <alpha-value>)",
+          70: "rgb(var(--primary-70) / <alpha-value>)",
+          80: "rgb(var(--primary-80) / <alpha-value>)",
+          90: "rgb(var(--primary-90) / <alpha-value>)",
+          100: "rgb(var(--primary-100) / <alpha-value>)",
+          110: "rgb(var(--primary-110) / <alpha-value>)",
+          120: "rgb(var(--primary-120) / <alpha-value>)",
+          130: "rgb(var(--primary-130) / <alpha-value>)",
+          140: "rgb(var(--primary-140) / <alpha-value>)",
+          150: "rgb(var(--primary-150) / <alpha-value>)",
+          DEFAULT: "rgb(var(--primary-default) / <alpha-value>)",
+          foreground: "rgb(var(--primary-foreground) / <alpha-value>)",
+        },
+        secondary: {
+          5: "rgb(var(--secondary-5) / <alpha-value>)",
+          10: "rgb(var(--secondary-10) / <alpha-value>)",
+          20: "rgb(var(--secondary-20) / <alpha-value>)",
+          30: "rgb(var(--secondary-30) / <alpha-value>)",
+          40: "rgb(var(--secondary-40) / <alpha-value>)",
+          50: "rgb(var(--secondary-50) / <alpha-value>)",
+          60: "rgb(var(--secondary-60) / <alpha-value>)",
+          70: "rgb(var(--secondary-70) / <alpha-value>)",
+          80: "rgb(var(--secondary-80) / <alpha-value>)",
+          90: "rgb(var(--secondary-90) / <alpha-value>)",
+          100: "rgb(var(--secondary-100) / <alpha-value>)",
+          110: "rgb(var(--secondary-110) / <alpha-value>)",
+          120: "rgb(var(--secondary-120) / <alpha-value>)",
+          130: "rgb(var(--secondary-130) / <alpha-value>)",
+          140: "rgb(var(--secondary-140) / <alpha-value>)",
+          150: "rgb(var(--secondary-150) / <alpha-value>)",
+          DEFAULT: "rgb(var(--secondary-default) / <alpha-value>)",
+          foreground: "rgb(var(--secondary-foreground) / <alpha-value>)",
+        },
+        tertiary: {
+          5: "rgb(var(--tertiary-5) / <alpha-value>)",
+          10: "rgb(var(--tertiary-10) / <alpha-value>)",
+          20: "rgb(var(--tertiary-20) / <alpha-value>)",
+          30: "rgb(var(--tertiary-30) / <alpha-value>)",
+          40: "rgb(var(--tertiary-40) / <alpha-value>)",
+          50: "rgb(var(--tertiary-50) / <alpha-value>)",
+          60: "rgb(var(--tertiary-60) / <alpha-value>)",
+          70: "rgb(var(--tertiary-70) / <alpha-value>)",
+          80: "rgb(var(--tertiary-80) / <alpha-value>)",
+          90: "rgb(var(--tertiary-90) / <alpha-value>)",
+          100: "rgb(var(--tertiary-100) / <alpha-value>)",
+          110: "rgb(var(--tertiary-110) / <alpha-value>)",
+          120: "rgb(var(--tertiary-120) / <alpha-value>)",
+          130: "rgb(var(--tertiary-130) / <alpha-value>)",
+          140: "rgb(var(--tertiary-140) / <alpha-value>)",
+          150: "rgb(var(--tertiary-150) / <alpha-value>)",
+          DEFAULT: "rgb(var(--tertiary-default) / <alpha-value>)",
+          foreground: "rgb(var(--tertiary-foreground) / <alpha-value>)",
+        },
+        grey: {
+          5: "rgb(var(--grey-5) / <alpha-value>)",
+          10: "rgb(var(--grey-10) / <alpha-value>)",
+          20: "rgb(var(--grey-20) / <alpha-value>)",
+          30: "rgb(var(--grey-30) / <alpha-value>)",
+          40: "rgb(var(--grey-40) / <alpha-value>)",
+          50: "rgb(var(--grey-50) / <alpha-value>)",
+          60: "rgb(var(--grey-60) / <alpha-value>)",
+          70: "rgb(var(--grey-70) / <alpha-value>)",
+          80: "rgb(var(--grey-80) / <alpha-value>)",
+          90: "rgb(var(--grey-90) / <alpha-value>)",
+          100: "rgb(var(--grey-100) / <alpha-value>)",
+          110: "rgb(var(--grey-110) / <alpha-value>)",
+          120: "rgb(var(--grey-120) / <alpha-value>)",
+          130: "rgb(var(--grey-130) / <alpha-value>)",
+          140: "rgb(var(--grey-140) / <alpha-value>)",
+          150: "rgb(var(--grey-150) / <alpha-value>)",
+          DEFAULT: "rgb(var(--grey-default) / <alpha-value>)",
+          foreground: "rgb(var(--grey-foreground) / <alpha-value>)",
+        },
+        grey2: {
+          100: "rgb(var(--grey2-100) / <alpha-value>)",
+          200: "rgb(var(--grey2-200) / <alpha-value>)",
+          300: "rgb(var(--grey2-300) / <alpha-value>)",
+          400: "rgb(var(--grey2-400) / <alpha-value>)",
+          500: "rgb(var(--grey2-500) / <alpha-value>)",
+          600: "rgb(var(--grey2-600) / <alpha-value>)",
+          700: "rgb(var(--grey2-700) / <alpha-value>)",
+          800: "rgb(var(--grey2-800) / <alpha-value>)",
+          900: "rgb(var(--grey2-900) / <alpha-value>)",
+          DEFAULT: "rgb(var(--grey2-default) / <alpha-value>)",
+          foreground: "rgb(var(--grey2-foreground) / <alpha-value>)",
+        },
+        info: {
+          100: "rgb(var(--info-100)) / <alpha-value>)",
+          120: "rgb(var(--info-120)) / <alpha-value>)",
+          DEFAULT: "rgb(var(--info-default) / <alpha-value>)",
+          foreground: "rgb(var(--info-foreground) / <alpha-value>)",
+        },
+        success: {
+          100: "rgb(var(--success-100)) / <alpha-value>)",
+          120: "rgb(var(--success-120)) / <alpha-value>)",
+          DEFAULT: "rgb(var(--success-default) / <alpha-value>)",
+          foreground: "rgb(var(--success-foreground) / <alpha-value>)",
+        },
+        warning: {
+          100: "rgb(var(--warning-100) / <alpha-value>)",
+          120: "rgb(var(--warning-120) / <alpha-value>)",
+          DEFAULT: "rgb(var(--warning-default) / <alpha-value>)",
+          foreground: "rgb(var(--warning-foreground) / <alpha-value>)",
+        },
+        error: {
+          100: "rgb(var(--error-100) / <alpha-value>)",
+          120: "rgb(var(--error-120) / <alpha-value>)",
+          DEFAULT: "rgb(var(--error-100) / <alpha-value>)",
+          foreground: "rgb(var(--error-foreground) / <alpha-value>)",
+        },
+      },
+    },
+  },
+};

package/dist/main.d.ts

@@ -1,7 +0,0 @@
-import "./src/style.css";
-export { default as Button } from "./src/components/Button/Button";
-export { default as Table } from "./src/components/Table/Table";
-export { default as TextInput } from "./src/components/Form/TextInput";
-export { default as Text } from "./src/components/Form/Text";
-export { default as Tabs } from "./src/components/Tabs/Tabs";
-export { resloveTimestamp, getStartDateOfDay, getEndDateOfDay, getStartEndTimestampOfDay, getTimestampUTC, } from "./src/utils/datetime";

package/dist/main.js

@@ -1,25 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTimestampUTC = exports.getStartEndTimestampOfDay = exports.getEndDateOfDay = exports.getStartDateOfDay = exports.resloveTimestamp = exports.Tabs = exports.Text = exports.TextInput = exports.Table = exports.Button = void 0;
-// UI Components
-require("./src/style.css");
-var Button_1 = require("./src/components/Button/Button");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
-var Table_1 = require("./src/components/Table/Table");
-Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
-var TextInput_1 = require("./src/components/Form/TextInput");
-Object.defineProperty(exports, "TextInput", { enumerable: true, get: function () { return __importDefault(TextInput_1).default; } });
-var Text_1 = require("./src/components/Form/Text");
-Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return __importDefault(Text_1).default; } });
-var Tabs_1 = require("./src/components/Tabs/Tabs");
-Object.defineProperty(exports, "Tabs", { enumerable: true, get: function () { return __importDefault(Tabs_1).default; } });
-// UTILS
-var datetime_1 = require("./src/utils/datetime");
-Object.defineProperty(exports, "resloveTimestamp", { enumerable: true, get: function () { return datetime_1.resloveTimestamp; } });
-Object.defineProperty(exports, "getStartDateOfDay", { enumerable: true, get: function () { return datetime_1.getStartDateOfDay; } });
-Object.defineProperty(exports, "getEndDateOfDay", { enumerable: true, get: function () { return datetime_1.getEndDateOfDay; } });
-Object.defineProperty(exports, "getStartEndTimestampOfDay", { enumerable: true, get: function () { return datetime_1.getStartEndTimestampOfDay; } });
-Object.defineProperty(exports, "getTimestampUTC", { enumerable: true, get: function () { return datetime_1.getTimestampUTC; } });

package/dist/src/components/Button/Button.d.ts

@@ -1,12 +0,0 @@
-import React from "react";
-interface ButtonProps {
-    children: React.ReactNode;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    type?: "button" | "submit" | "reset";
-    disabled?: boolean;
-    className?: string;
-    isLoading?: boolean;
-    variant?: "primary" | "secondary";
-}
-declare const Button: React.FC<ButtonProps>;
-export default Button;

package/dist/src/components/Button/Button.js

@@ -1,10 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const Button = ({ children, onClick, type = "button", disabled = false, className = "", isLoading = false, variant = "primary", }) => {
-    return (react_1.default.createElement("button", { className: `btn ${className} ${variant}`, onClick: onClick, type: type, disabled: disabled || isLoading }, isLoading ? "Loading..." : children));
-};
-exports.default = Button;

package/dist/src/components/Form/Form.js

@@ -1,91 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-// src/Form.tsx
-const react_1 = __importStar(require("react"));
-const yup = __importStar(require("yup"));
-const schema = yup.object().shape({
-    name: yup.string().required("Name is required"),
-    email: yup.string().email("Invalid email").required("Email is required"),
-    password: yup
-        .string()
-        .min(6, "Password must be at least 6 characters")
-        .required("Password is required"),
-});
-const Form = ({ onSubmit, className = "" }) => {
-    const [values, setValues] = (0, react_1.useState)({
-        name: "",
-        email: "",
-        password: "",
-    });
-    const [errors, setErrors] = (0, react_1.useState)({});
-    const handleChange = (e) => {
-        const { name, value } = e.target;
-        setValues(Object.assign(Object.assign({}, values), { [name]: value }));
-    };
-    const handleSubmit = (e) => __awaiter(void 0, void 0, void 0, function* () {
-        e.preventDefault();
-        try {
-            yield schema.validate(values, { abortEarly: false });
-            setErrors({});
-            onSubmit(values);
-        }
-        catch (err) {
-            if (err instanceof yup.ValidationError) {
-                const validationErrors = {};
-                err.inner.forEach((error) => {
-                    if (error.path) {
-                        validationErrors[error.path] = error.message;
-                    }
-                });
-                setErrors(validationErrors);
-            }
-        }
-    });
-    return (react_1.default.createElement("form", { className: `form ${className}`, onSubmit: handleSubmit },
-        react_1.default.createElement("div", { className: "form-group" },
-            react_1.default.createElement("label", { htmlFor: "name" }, "Name"),
-            react_1.default.createElement("input", { id: "name", name: "name", type: "text", value: values.name, onChange: handleChange }),
-            errors.name && react_1.default.createElement("span", { className: "error" }, errors.name)),
-        react_1.default.createElement("div", { className: "form-group" },
-            react_1.default.createElement("label", { htmlFor: "email" }, "Email"),
-            react_1.default.createElement("input", { id: "email", name: "email", type: "email", value: values.email, onChange: handleChange }),
-            errors.email && react_1.default.createElement("span", { className: "error" }, errors.email)),
-        react_1.default.createElement("div", { className: "form-group" },
-            react_1.default.createElement("label", { htmlFor: "password" }, "Password"),
-            react_1.default.createElement("input", { id: "password", name: "password", type: "password", value: values.password, onChange: handleChange }),
-            errors.password && react_1.default.createElement("span", { className: "error" }, errors.password)),
-        react_1.default.createElement("button", { type: "submit" }, "Submit")));
-};
-exports.default = Form;

package/dist/src/components/Form/Text.js

@@ -1,10 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const Text = ({ children, size = "medium", color = "black", className = "", }) => {
-    return (react_1.default.createElement("span", { className: `text ${size} ${className}`, style: { color } }, children));
-};
-exports.default = Text;