@rovula/ui 0.0.21 → 0.0.22

package/dist/components/Form/Form.js

@@ -1,55 +1,8 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-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());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (g && (g = 0, op[0] && (_ = 0)), _) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // src/Form.tsx
 import { useState } from "react";
 import * as yup from "yup";
-var schema = yup.object().shape({
+const schema = yup.object().shape({
     name: yup.string().required("Name is required"),
     email: yup.string().email("Invalid email").required("Email is required"),
     password: yup
@@ -57,50 +10,36 @@ var schema = yup.object().shape({
         .min(6, "Password must be at least 6 characters")
         .required("Password is required"),
 });
-var Form = function (_a) {
-    var onSubmit = _a.onSubmit, _b = _a.className, className = _b === void 0 ? "" : _b;
-    var _c = useState({
+const Form = ({ onSubmit, className = "" }) => {
+    const [values, setValues] = useState({
         name: "",
         email: "",
         password: "",
-    }), values = _c[0], setValues = _c[1];
-    var _d = useState({}), errors = _d[0], setErrors = _d[1];
-    var handleChange = function (e) {
-        var _a;
-        var _b = e.target, name = _b.name, value = _b.value;
-        setValues(__assign(__assign({}, values), (_a = {}, _a[name] = value, _a)));
+    });
+    const [errors, setErrors] = useState({});
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setValues(Object.assign(Object.assign({}, values), { [name]: value }));
     };
-    var handleSubmit = function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        var err_1, validationErrors_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
-                case 0:
-                    e.preventDefault();
-                    _a.label = 1;
-                case 1:
-                    _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, schema.validate(values, { abortEarly: false })];
-                case 2:
-                    _a.sent();
-                    setErrors({});
-                    onSubmit(values);
-                    return [3 /*break*/, 4];
-                case 3:
-                    err_1 = _a.sent();
-                    if (err_1 instanceof yup.ValidationError) {
-                        validationErrors_1 = {};
-                        err_1.inner.forEach(function (error) {
-                            if (error.path) {
-                                validationErrors_1[error.path] = error.message;
-                            }
-                        });
-                        setErrors(validationErrors_1);
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        try {
+            await 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;
                     }
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
+                });
+                setErrors(validationErrors);
             }
-        });
-    }); };
-    return (_jsxs("form", { className: "form ".concat(className), onSubmit: handleSubmit, children: [_jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: "name", children: "Name" }), _jsx("input", { id: "name", name: "name", type: "text", value: values.name, onChange: handleChange }), errors.name && _jsx("span", { className: "error", children: errors.name })] }), _jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: "email", children: "Email" }), _jsx("input", { id: "email", name: "email", type: "email", value: values.email, onChange: handleChange }), errors.email && _jsx("span", { className: "error", children: errors.email })] }), _jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: "password", children: "Password" }), _jsx("input", { id: "password", name: "password", type: "password", value: values.password, onChange: handleChange }), errors.password && _jsx("span", { className: "error", children: errors.password })] }), _jsx("button", { type: "submit", children: "Submit" })] }));
+        }
+    };
+    return (_jsxs("form", { className: `form ${className}`, onSubmit: handleSubmit, children: [_jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: "name", children: "Name" }), _jsx("input", { id: "name", name: "name", type: "text", value: values.name, onChange: handleChange }), errors.name && _jsx("span", { className: "error", children: errors.name })] }), _jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: "email", children: "Email" }), _jsx("input", { id: "email", name: "email", type: "email", value: values.email, onChange: handleChange }), errors.email && _jsx("span", { className: "error", children: errors.email })] }), _jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: "password", children: "Password" }), _jsx("input", { id: "password", name: "password", type: "password", value: values.password, onChange: handleChange }), errors.password && _jsx("span", { className: "error", children: errors.password })] }), _jsx("button", { type: "submit", children: "Submit" })] }));
 };
 export default Form;

package/dist/components/Form/Text.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-var Text = function (_a) {
-    var children = _a.children, _b = _a.size, size = _b === void 0 ? "medium" : _b, _c = _a.color, color = _c === void 0 ? "black" : _c, _d = _a.className, className = _d === void 0 ? "" : _d;
-    return (_jsx("span", { className: "text ".concat(size, " ").concat(className), style: { color: color }, children: children }));
+const Text = ({ children, size = "medium", color = "black", className = "", }) => {
+    return (_jsx("span", { className: `text ${size} ${className}`, style: { color }, children: children }));
 };
 export default Text;

package/dist/components/Form/TextInput.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-var TextInput = function (_a) {
-    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? '' : _b, _c = _a.type, type = _c === void 0 ? 'text' : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.className, className = _e === void 0 ? '' : _e;
-    return (_jsx("input", { className: "text-input ".concat(className), type: type, value: value, onChange: onChange, placeholder: placeholder, disabled: disabled }));
+const TextInput = ({ value, onChange, placeholder = '', type = 'text', disabled = false, className = '', }) => {
+    return (_jsx("input", { className: `text-input ${className}`, type: type, value: value, onChange: onChange, placeholder: placeholder, disabled: disabled }));
 };
 export default TextInput;

package/dist/components/Icon/Icon.js

@@ -0,0 +1,37 @@
+"use client";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getIcon } from "@/icons";
+import { cn } from "@/utils/cn";
+import React from "react";
+import { iconVariants } from "./Icon.styles";
+const Icon = (_a) => {
+    var { name, type = "heroicons", color = "inherit", variant = "solid", size = "md", className } = _a, props = __rest(_a, ["name", "type", "color", "variant", "size", "className"]);
+    const [IconComponent, setIconComponent] = React.useState(null);
+    React.useEffect(() => {
+        const loadIcon = async () => {
+            const icon = getIcon(type, name, variant);
+            if (icon) {
+                setIconComponent(() => icon);
+            }
+            else {
+                console.warn(`Icon "${name}" from "${type}" not found.`);
+            }
+        };
+        loadIcon();
+    }, [name, type, variant]);
+    if (!IconComponent)
+        return (_jsx("svg", Object.assign({ className: cn(iconVariants({ color, size }), className) }, props)));
+    return (_jsx(IconComponent, Object.assign({ className: cn(iconVariants({ color, size }), className) }, props)));
+};
+export default Icon;

package/dist/components/Icon/Icon.stories.js

@@ -0,0 +1,356 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from "./Icon";
+const meta = {
+    title: "Components/Icon",
+    component: Icon,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "p-5 flex w-full h-full", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        variant: "outline",
+        name: "home",
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Icon, Object.assign({ name: "home" }, props)) }));
+    },
+};
+export const PreviewHeroIcon = {
+    args: {
+    // variant: "outline",
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        const heroIcons = [
+            "arrow-left",
+            "arrow-small-left",
+            "academic-cap",
+            "adjustments-horizontal",
+            "adjustments-vertical",
+            "archive-box-arrow-down",
+            "archive-box",
+            "archive-box-xmark",
+            "arrow-down-circle",
+            "arrow-down",
+            "arrow-down-left",
+            "arrow-down-on-square",
+            "arrow-down-on-square-stack",
+            "arrow-down-right",
+            "arrow-down-tray",
+            "arrow-left-circle",
+            "arrow-left-end-on-rectangle",
+            "arrow-left",
+            "arrow-left-on-rectangle",
+            "arrow-left-start-on-rectangle",
+            "arrow-long-down",
+            "arrow-long-left",
+            "arrow-long-right",
+            "arrow-long-up",
+            "arrow-path",
+            "arrow-path-rounded-square",
+            "arrow-right-circle",
+            "arrow-right-end-on-rectangle",
+            "arrow-right",
+            "arrow-right-on-rectangle",
+            "arrow-right-start-on-rectangle",
+            "arrow-small-down",
+            "arrow-small-left",
+            "arrow-small-right",
+            "arrow-small-up",
+            "arrow-top-right-on-square",
+            "arrow-trending-down",
+            "arrow-trending-up",
+            "arrow-up-circle",
+            "arrow-up",
+            "arrow-up-left",
+            "arrow-up-on-square",
+            "arrow-up-on-square-stack",
+            "arrow-up-right",
+            "arrow-up-tray",
+            "arrow-uturn-down",
+            "arrow-uturn-left",
+            "arrow-uturn-right",
+            "arrow-uturn-up",
+            "arrows-pointing-in",
+            "arrows-pointing-out",
+            "arrows-right-left",
+            "arrows-up-down",
+            "at-symbol",
+            "backspace",
+            "backward",
+            "banknotes",
+            "bars2",
+            "bars3-bottom-left",
+            "bars3-bottom-right",
+            "bars3-center-left",
+            "bars3",
+            "bars4",
+            "bars-arrow-down",
+            "bars-arrow-up",
+            "battery0",
+            "battery100",
+            "battery50",
+            "beaker",
+            "bell-alert",
+            "bell",
+            "bell-slash",
+            "bell-snooze",
+            "bolt",
+            "bolt-slash",
+            "book-open",
+            "bookmark",
+            "bookmark-slash",
+            "bookmark-square",
+            "briefcase",
+            "bug-ant",
+            "building-library",
+            "building-office2",
+            "building-office",
+            "building-storefront",
+            "cake",
+            "calculator",
+            "calendar-days",
+            "calendar",
+            "camera",
+            "chart-bar",
+            "chart-bar-square",
+            "chart-pie",
+            "chat-bubble-bottom-center",
+            "chat-bubble-bottom-center-text",
+            "chat-bubble-left-ellipsis",
+            "chat-bubble-left",
+            "chat-bubble-left-right",
+            "chat-bubble-oval-left-ellipsis",
+            "chat-bubble-oval-left",
+            "check-badge",
+            "check-circle",
+            "check",
+            "chevron-double-down",
+            "chevron-double-left",
+            "chevron-double-right",
+            "chevron-double-up",
+            "chevron-down",
+            "chevron-left",
+            "chevron-right",
+            "chevron-up-down",
+            "chevron-up",
+            "circle-stack",
+            "clipboard-document-check",
+            "clipboard-document",
+            "clipboard-document-list",
+            "clipboard",
+            "clock",
+            "cloud-arrow-down",
+            "cloud-arrow-up",
+            "cloud",
+            "code-bracket",
+            "code-bracket-square",
+            "cog6-tooth",
+            "cog8-tooth",
+            "cog",
+            "command-line",
+            "computer-desktop",
+            "cpu-chip",
+            "credit-card",
+            "cube",
+            "cube-transparent",
+            "currency-bangladeshi",
+            "currency-dollar",
+            "currency-euro",
+            "currency-pound",
+            "currency-rupee",
+            "currency-yen",
+            "cursor-arrow-rays",
+            "cursor-arrow-ripple",
+            "device-phone-mobile",
+            "device-tablet",
+            "document-arrow-down",
+            "document-arrow-up",
+            "document-chart-bar",
+            "document-check",
+            "document-duplicate",
+            "document",
+            "document-magnifying-glass",
+            "document-minus",
+            "document-plus",
+            "document-text",
+            "ellipsis-horizontal-circle",
+            "ellipsis-horizontal",
+            "ellipsis-vertical",
+            "envelope",
+            "envelope-open",
+            "exclamation-circle",
+            "exclamation-triangle",
+            "eye-dropper",
+            "eye",
+            "eye-slash",
+            "face-frown",
+            "face-smile",
+            "film",
+            "finger-print",
+            "fire",
+            "flag",
+            "folder-arrow-down",
+            "folder",
+            "folder-minus",
+            "folder-open",
+            "folder-plus",
+            "forward",
+            "funnel",
+            "gif",
+            "gift",
+            "gift-top",
+            "globe-alt",
+            "globe-americas",
+            "globe-asia-australia",
+            "globe-europe-africa",
+            "hand-raised",
+            "hand-thumb-down",
+            "hand-thumb-up",
+            "hashtag",
+            "heart",
+            "home",
+            "home-modern",
+            "identification",
+            "inbox-arrow-down",
+            "inbox",
+            "inbox-stack",
+            "information-circle",
+            "key",
+            "language",
+            "lifebuoy",
+            "light-bulb",
+            "link",
+            "list-bullet",
+            "lock-closed",
+            "lock-open",
+            "magnifying-glass-circle",
+            "magnifying-glass",
+            "magnifying-glass-minus",
+            "magnifying-glass-plus",
+            "map",
+            "map-pin",
+            "megaphone",
+            "microphone",
+            "minus-circle",
+            "minus",
+            "minus-small",
+            "moon",
+            "musical-note",
+            "newspaper",
+            "no-symbol",
+            "paint-brush",
+            "paper-airplane",
+            "paper-clip",
+            "pause-circle",
+            "pause",
+            "pencil",
+            "pencil-square",
+            "phone-arrow-down-left",
+            "phone-arrow-up-right",
+            "phone",
+            "phone-xmark",
+            "photo",
+            "play-circle",
+            "play",
+            "play-pause",
+            "plus-circle",
+            "plus",
+            "plus-small",
+            "power",
+            "presentation-chart-bar",
+            "presentation-chart-line",
+            "printer",
+            "puzzle-piece",
+            "qr-code",
+            "question-mark-circle",
+            "queue-list",
+            "radio",
+            "receipt-percent",
+            "receipt-refund",
+            "rectangle-group",
+            "rectangle-stack",
+            "rocket-launch",
+            "rss",
+            "scale",
+            "scissors",
+            "server",
+            "server-stack",
+            "share",
+            "shield-check",
+            "shield-exclamation",
+            "shopping-bag",
+            "shopping-cart",
+            "signal",
+            "signal-slash",
+            "sparkles",
+            "speaker-wave",
+            "speaker-xmark",
+            "square2-stack",
+            "square3-stack3-dicon",
+            "squares2-x2",
+            "squares-plus",
+            "star",
+            "stop-circle",
+            "stop",
+            "sun",
+            "swatch",
+            "table-cells",
+            "tag",
+            "ticket",
+            "trash",
+            "trophy",
+            "truck",
+            "tv",
+            "user-circle",
+            "user-group",
+            "user",
+            "user-minus",
+            "user-plus",
+            "users",
+            "variable",
+            "video-camera",
+            "video-camera-slash",
+            "view-columns",
+            "viewfinder-circle",
+            "wallet",
+            "wifi",
+            "window",
+            "wrench",
+            "wrench-screwdriver",
+            "xcircle",
+            "xmark",
+        ];
+        return (_jsx("div", { className: "grid grid-cols-1 gap-4 w-full h-full", children: _jsxs("div", { className: "flex flex-col justify-start gap-4 w-full h-full", children: [_jsx("h4", { children: "Hero icons" }), heroIcons.map((iconName) => (_jsxs("div", { className: "flex flex-row gap-6 items-center", children: [_jsx(Icon, Object.assign({}, props, { name: iconName, variant: "solid", size: "sm" })), _jsx(Icon, Object.assign({}, props, { name: iconName, variant: "outline", size: "sm" })), _jsx(Icon, Object.assign({}, props, { name: iconName, variant: "outline", size: "md" })), _jsx(Icon, Object.assign({}, props, { name: iconName, variant: "solid", size: "md" })), _jsx(Icon, Object.assign({}, props, { name: iconName, variant: "outline", size: "lg" })), _jsx(Icon, Object.assign({}, props, { name: iconName, variant: "solid", size: "lg" })), _jsx("p", { className: "ml-4", children: iconName })] }, iconName)))] }) }));
+    },
+};
+export const PreviewMaterialIcon = {
+    args: {
+    // variant: "outline",
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        const materialIcon = [
+            "chevron-down",
+            "save",
+            "data-table",
+            "table-chart",
+            "interests",
+            "collapse-content",
+            "expand-content",
+            "expand-circle-right",
+            "expand-circle-down",
+            "expand-circle-up",
+            "content-copy",
+            "content-paste",
+        ];
+        return (_jsx("div", { className: "grid grid-cols-1 gap-4 w-full h-full", children: _jsxs("div", { className: "flex flex-col justify-start gap-4 w-full h-full", children: [_jsx("h4", { children: "Material icons" }), materialIcon.map((iconName) => (_jsxs("div", { className: "flex flex-row gap-6 items-center", children: [_jsx(Icon, Object.assign({}, props, { type: "material", name: iconName, variant: "solid", size: "sm" })), _jsx(Icon, Object.assign({}, props, { type: "material", name: iconName, variant: "outline", size: "sm" })), _jsx(Icon, Object.assign({}, props, { type: "material", name: iconName, variant: "outline", size: "md" })), _jsx(Icon, Object.assign({}, props, { type: "material", name: iconName, variant: "solid", size: "md" })), _jsx(Icon, Object.assign({}, props, { type: "material", name: iconName, variant: "outline", size: "lg" })), _jsx(Icon, Object.assign({}, props, { type: "material", name: iconName, variant: "solid", size: "lg" })), _jsx("p", { className: "ml-4", children: iconName })] }, iconName)))] }) }));
+    },
+};

package/dist/components/Icon/Icon.styles.js

@@ -0,0 +1,25 @@
+import { cva } from "class-variance-authority";
+export const iconVariants = cva(["text-inherit"], {
+    variants: {
+        color: {
+            primary: "text-primary",
+            secondary: "text-secondary",
+            tertiary: "text-tertiary",
+            success: "text-success",
+            info: "text-info",
+            warning: "text-warning",
+            error: "text-error",
+            inherit: "text-inherit",
+        },
+        size: {
+            sm: "size-4",
+            md: "size-6",
+            lg: "size-8",
+            inherit: "",
+        },
+    },
+    defaultVariants: {
+        size: "inherit",
+        color: "inherit",
+    },
+});

package/dist/components/Input/Input.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -24,15 +13,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cn } from "@/utils/cn";
 import { inputVariants } from "./Input.styles";
-var Input = forwardRef(function (_a, ref) {
-    var className = _a.className, _b = _a.type, type = _b === void 0 ? "text" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, _e = _a.fullwidth, fullwidth = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.hiddenPlaceholder, hiddenPlaceholder = _j === void 0 ? false : _j, props = __rest(_a, ["className", "type", "size", "variant", "fullwidth", "disabled", "error", "required", "hiddenPlaceholder"]);
-    return (_jsx("input", __assign({ type: type, className: cn(inputVariants({
-            size: size,
-            variant: variant,
-            fullwidth: fullwidth,
-            error: error,
-            hiddenPlaceholder: hiddenPlaceholder,
-            disabled: disabled,
+const Input = forwardRef((_a, ref) => {
+    var { className, type = "text", size = "md", variant = "outline", fullwidth = false, disabled = false, error = false, required = false, hiddenPlaceholder = false } = _a, props = __rest(_a, ["className", "type", "size", "variant", "fullwidth", "disabled", "error", "required", "hiddenPlaceholder"]);
+    return (_jsx("input", Object.assign({ type: type, className: cn(inputVariants({
+            size,
+            variant,
+            fullwidth,
+            error,
+            hiddenPlaceholder,
+            disabled,
         }), className), ref: ref, disabled: disabled }, props)));
 });
 Input.displayName = "Input";

package/dist/components/Input/Input.stories.js

@@ -1,17 +1,6 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input } from "./Input";
-var meta = {
+const meta = {
     title: "Components/Input",
     component: Input,
     tags: ["autodocs"],
@@ -19,18 +8,18 @@ var meta = {
         layout: "fullscreen",
     },
     decorators: [
-        function (Story) { return (_jsx("div", { className: "p-5 flex w-full ", children: _jsx(Story, {}) })); },
+        (Story) => (_jsx("div", { className: "p-5 flex w-full ", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
-export var Default = {
+export const Default = {
     args: {
     // disabled: true,
     // value: "Aaaaa",
     },
-    render: function (args) {
+    render: (args) => {
         console.log("args ", args);
-        var props = __assign({}, args);
-        return (_jsxs("div", { className: "flex flex-row gap-4", children: [_jsx(Input, __assign({ id: "1", size: "lg", placeholder: "Email" }, args)), _jsx(Input, __assign({ id: "2", size: "md", placeholder: "Email" }, args)), _jsx(Input, __assign({ id: "3", size: "sm", placeholder: "Email" }, args))] }));
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4", children: [_jsx(Input, Object.assign({ id: "1", size: "lg", placeholder: "Email" }, args)), _jsx(Input, Object.assign({ id: "2", size: "md", placeholder: "Email" }, args)), _jsx(Input, Object.assign({ id: "3", size: "sm", placeholder: "Email" }, args))] }));
     },
 };