@rovula/ui 0.0.4 → 0.0.6

package/src/theme/presets/colors.js

@@ -0,0 +1,166 @@
+const { DEFAULTS } = require("@rollup/plugin-node-resolve");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        // Palette 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>)",
+        },
+        // Component color
+        input: {
+          text: {
+            DEFAULT: "rgb(var(--input-default-text-color) / <alpha-value>)",
+            active: "rgb(var(--input-active-text-color) / <alpha-value>)",
+            disabled: "rgb(var(--input-disabled-text-color) / <alpha-value>)",
+          },
+          stroke: {
+            DEFAULT: "rgb(var(--input-default-stroke-color) / <alpha-value>)",
+            active: "rgb(var(--input-active-stroke-color) / <alpha-value>)",
+            disabled: "rgb(var(--input-disabled-stroke-color) / <alpha-value>)",
+          },
+          background: {
+            DEFAULT: "transparent",
+            active: "transparent",
+            disabled:
+              "rgb(var(--input-disabled-background-color) / <alpha-value>)",
+          },
+          label: {
+            background:
+              "rgb(var(--input-label-background-color) / <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;

package/dist/src/components/Form/TextInput.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 TextInput = ({ value, onChange, placeholder = '', type = 'text', disabled = false, className = '', }) => {
-    return (react_1.default.createElement("input", { className: `text-input ${className}`, type: type, value: value, onChange: onChange, placeholder: placeholder, disabled: disabled }));
-};
-exports.default = TextInput;

package/dist/src/components/Table/Table.js

@@ -1,13 +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 Table = ({ columns, data }) => {
-    return (react_1.default.createElement("table", { className: "table" },
-        react_1.default.createElement("thead", null,
-            react_1.default.createElement("tr", null, columns.map((column, index) => (react_1.default.createElement("th", { key: index }, column.header))))),
-        react_1.default.createElement("tbody", null, data.map((row, rowIndex) => (react_1.default.createElement("tr", { key: rowIndex }, columns.map((column, colIndex) => (react_1.default.createElement("td", { key: colIndex }, row[column.accessor])))))))));
-};
-exports.default = Table;

package/dist/src/components/Tabs/Tabs.js

@@ -1,33 +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;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const Tabs = ({ tabs, initialTab = 0 }) => {
-    const [activeTab, setActiveTab] = (0, react_1.useState)(initialTab);
-    return (react_1.default.createElement("div", { className: "tabs" },
-        react_1.default.createElement("div", { className: "tab-buttons" }, tabs.map((tab, index) => (react_1.default.createElement("button", { key: index, className: index === activeTab ? "active" : "", onClick: () => setActiveTab(index) }, tab.label)))),
-        react_1.default.createElement("div", { className: "tab-content" }, tabs[activeTab].content)));
-};
-exports.default = Tabs;

package/dist/src/style.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

package/dist/src/utils/datetime.js

@@ -1,37 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTimestampUTC = exports.getStartEndTimestampOfDay = exports.getEndDateOfDay = exports.getStartDateOfDay = exports.resloveTimestamp = void 0;
-const resloveTimestamp = (timestamp) => {
-    if (String(timestamp).length > 10)
-        return timestamp / 1000;
-    return timestamp;
-};
-exports.resloveTimestamp = resloveTimestamp;
-// Set the time to the start of the day (00:00:00)
-const getStartDateOfDay = (date) => {
-    const startDate = new Date(date);
-    startDate.setHours(0, 0, 0, 0);
-    return startDate;
-};
-exports.getStartDateOfDay = getStartDateOfDay;
-// Set the time to the end of the day (23:59:59.999)
-const getEndDateOfDay = (date) => {
-    const startDate = new Date(date);
-    startDate.setHours(23, 59, 59, 999);
-    return startDate;
-};
-exports.getEndDateOfDay = getEndDateOfDay;
-const getStartEndTimestampOfDay = () => {
-    const startTime = getStartDateOfDay(new Date());
-    const endTime = getEndDateOfDay(startTime);
-    return {
-        startTime,
-        endTime,
-    };
-};
-exports.getStartEndTimestampOfDay = getStartEndTimestampOfDay;
-const getTimestampUTC = (date) => {
-    const dateUtc = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds());
-    return resloveTimestamp(dateUtc);
-};
-exports.getTimestampUTC = getTimestampUTC;

package/src/style.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;