@rovula/ui 0.0.21 → 0.0.22

package/dist/components/Input/Input.styles.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-export var inputVariants = cva([
+export const inputVariants = cva([
     "border-0 outline-none",
     "p-1 flex w-auto h-fit box-border",
     "peer text-input-filled-text placeholder:text-input-default-text bg-transparent caret-primary",

package/dist/components/Label/Label.js

@@ -1,15 +1,4 @@
 "use client";
-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)
@@ -26,9 +15,9 @@ import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cn } from "@/utils/cn";
 import { labelVariant } from "./Label.styles";
-var Label = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(LabelPrimitive.Root, __assign({ ref: ref, className: cn(labelVariant({
+const Label = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(LabelPrimitive.Root, Object.assign({ ref: ref, className: cn(labelVariant({
             size: props.size,
             disabled: props.disabled,
             error: props.error,

package/dist/components/Label/Label.stories.js

@@ -1,18 +1,7 @@
-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 { Checkbox } from "../Checkbox/Checkbox";
 import { Label } from "./Label";
-var meta = {
+const meta = {
     title: "Components/Label",
     component: Label,
     tags: ["autodocs"],
@@ -20,19 +9,19 @@ 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: {
     // label: "Lorem Ipsum",
     // value: "Lorem Ipsum",
     // fullwidth: true,
     },
-    render: function (args) {
+    render: (args) => {
         console.log("args ", args);
-        var props = __assign({}, args);
+        const props = Object.assign({}, args);
         return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: "terms" }), _jsx(Label, { htmlFor: "terms", children: "Accept terms and conditions" })] }) }));
     },
 };

package/dist/components/Label/Label.styles.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-export var labelVariant = cva([
+export const labelVariant = cva([
     "block duration-450 transition-all px-[2px] text-input-text peer-focus:text-input-text-active",
 ], {
     variants: {

package/dist/components/Loading/Loading.js

@@ -1,23 +1,11 @@
-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 { cn } from "@/utils/cn";
-var Loading = function (_a) {
-    var _b = _a.size, size = _b === void 0 ? 16 : _b, _c = _a.color, color = _c === void 0 ? "" : _c, _d = _a.trackColor, trackColor = _d === void 0 ? "" : _d, _e = _a.strokeWidth, strokeWidth = _e === void 0 ? 2 : _e, _f = _a.percentage, percentage = _f === void 0 ? 75 : _f, _g = _a.animate, animate = _g === void 0 ? true : _g, className = _a.className, progressClassName = _a.progressClassName, trackClassName = _a.trackClassName;
-    var radius = (size - strokeWidth * 2) / 2;
-    var circumference = 2 * Math.PI * radius;
-    var offset = circumference - (percentage / 100) * circumference;
+const Loading = ({ size = 16, color = "", trackColor = "", strokeWidth = 2, percentage = 75, animate = true, className, progressClassName, trackClassName, }) => {
+    const radius = (size - strokeWidth * 2) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - (percentage / 100) * circumference;
     return (_jsxs("svg", { className: cn({
             "animate-spin": animate,
-        }, className), xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 ".concat(size, " ").concat(size), width: size, height: size, role: "status", "aria-live": "polite", children: [_jsx("circle", { className: cn("text-[var(--loading-track-color)]", trackClassName), style: __assign({}, (trackColor ? { color: trackColor } : {})), cx: size / 2, cy: size / 2, r: radius, stroke: "currentColor", strokeWidth: strokeWidth }), _jsx("circle", { className: cn("text-[var(--loading-process-color)]", progressClassName), style: __assign({}, (color ? { color: color } : {})), cx: size / 2, cy: size / 2, r: radius, stroke: "currentColor", strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round" })] }));
+        }, className), xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: `0 0 ${size} ${size}`, width: size, height: size, role: "status", "aria-live": "polite", children: [_jsx("circle", { className: cn("text-[var(--loading-track-color)]", trackClassName), style: Object.assign({}, (trackColor ? { color: trackColor } : {})), cx: size / 2, cy: size / 2, r: radius, stroke: "currentColor", strokeWidth: strokeWidth }), _jsx("circle", { className: cn("text-[var(--loading-process-color)]", progressClassName), style: Object.assign({}, (color ? { color: color } : {})), cx: size / 2, cy: size / 2, r: radius, stroke: "currentColor", strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round" })] }));
 };
 export default Loading;

package/dist/components/Loading/Loading.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 } from "react/jsx-runtime";
 import Loading from "./Loading";
-var meta = {
+const meta = {
     title: "Components/Loading",
     component: Loading,
     tags: ["autodocs"],
@@ -19,19 +8,19 @@ 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: {
     // Loading: "Lorem Ipsum",
     // value: "Lorem Ipsum",
     // fullwidth: true,
     },
-    render: function (args) {
+    render: (args) => {
         console.log("args ", args);
-        var props = __assign({}, args);
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx("div", { className: "flex items-center space-x-2", children: _jsx(Loading, __assign({}, props)) }) }));
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx("div", { className: "flex items-center space-x-2", children: _jsx(Loading, Object.assign({}, props)) }) }));
     },
 };

package/dist/components/Navbar/Navbar.js

@@ -1,9 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "@/utils/cn";
-var Navbar = function (_a) {
-    var children = _a.children, className = _a.className, center = _a.center, leftNav = _a.leftNav, rightNav = _a.rightNav, position = _a.position, _b = _a.container, container = _b === void 0 ? false : _b;
-    return (_jsx("header", { className: cn("w-full px-4 py-6 h-[var(--navbar-height)] box-border overflow-hidden typography-subtitile2 border-solid border-b-2 bg-[rgb(var(--navbar-bg-color))] text-[rgb(var(--navbar-text-color))] border-b-[rgb(var(--navbar-border-color))]", { position: position }, className), children: _jsx("div", { className: cn("mx-auto flex h-full justify-between items-center", {
-                container: container,
+const Navbar = ({ children, className, center, leftNav, rightNav, position, container = false, }) => {
+    return (_jsx("header", { className: cn("w-full px-4 py-6 h-[var(--navbar-height)] box-border overflow-hidden typography-subtitile2 border-solid border-b-2 bg-[rgb(var(--navbar-bg-color))] text-[rgb(var(--navbar-text-color))] border-b-[rgb(var(--navbar-border-color))]", { position }, className), children: _jsx("div", { className: cn("mx-auto flex h-full justify-between items-center", {
+                container,
             }), children: children || (_jsxs(_Fragment, { children: [_jsx("nav", { className: "flex w-1/2 gap-x-[var(--navbar-gap)] text-xl", children: leftNav }), _jsx("div", { className: "flex flex-shrink-0 flex-wrap justify-center", children: center }), _jsx("nav", { className: "flex w-1/2 justify-end gap-x-[var(--navbar-gap)] text-xl", children: rightNav })] })) }) }));
 };
 export default Navbar;

package/dist/components/Navbar/Navbar.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, Fragment as _Fragment } from "react/jsx-runtime";
 import Navbar from "./Navbar";
-var meta = {
+const meta = {
     title: "Components/Navbar",
     component: Navbar,
     tags: ["autodocs"],
@@ -19,23 +8,23 @@ var meta = {
         layout: "fullscreen",
     },
     decorators: [
-        function (Story) { return (_jsx("div", { className: "p-5 w-full h-screen", children: _jsx(Story, {}) })); },
+        (Story) => (_jsx("div", { className: "p-5 w-full h-screen", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
-export var Default = {
+export const Default = {
     args: {},
-    render: function (args) {
+    render: (args) => {
         console.log("args ", args);
-        var props = __assign({}, args);
+        const props = Object.assign({}, args);
         return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Navbar, { leftNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "link 1" }), _jsx("li", { children: "link 2" }), _jsx("li", { children: "link 3" })] }), center: _jsx(_Fragment, { children: "Center text" }), rightNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "sss 1" }), _jsx("li", { children: "ddd 2" }), _jsx("li", { children: "vvvv 3" })] }) }) }));
     },
 };
-export var Custom = {
+export const Custom = {
     args: {},
-    render: function (args) {
+    render: (args) => {
         console.log("args ", args);
-        var props = __assign({}, args);
+        const props = Object.assign({}, args);
         return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Navbar, { className: "px-8", leftNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "link 1" }), _jsx("li", { children: "link 2" }), _jsx("li", { children: "link 3" })] }), center: _jsx(_Fragment, { children: "Center text" }), rightNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "sss 1" }), _jsx("li", { children: "ddd 2" }), _jsx("li", { children: "vvvv 3" })] }) }) }));
     },
 };

package/dist/components/Popover/Popover.js

@@ -1,15 +1,4 @@
 "use client";
-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)
@@ -25,11 +14,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { cn } from "@/utils/cn";
-var Popover = PopoverPrimitive.Root;
-var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React.forwardRef(function (_a, ref) {
-    var className = _a.className, _b = _a.align, align = _b === void 0 ? "center" : _b, _c = _a.sideOffset, sideOffset = _c === void 0 ? 4 : _c, props = __rest(_a, ["className", "align", "sideOffset"]);
-    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, __assign({ ref: ref, align: align, sideOffset: sideOffset, className: cn("z-50 min-w-72 rounded-md border bg-base-popup-highlight border-none overflow-hidden p-0 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props)) }));
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverContent = React.forwardRef((_a, ref) => {
+    var { className, align = "center", sideOffset = 4 } = _a, props = __rest(_a, ["className", "align", "sideOffset"]);
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, Object.assign({ ref: ref, align: align, sideOffset: sideOffset, className: cn("z-50 min-w-72 rounded-md border bg-base-popup-highlight border-none overflow-hidden p-0 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props)) }));
 });
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 export { Popover, PopoverTrigger, PopoverContent };

package/dist/components/Popover/Popover.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 { Popover, PopoverTrigger, PopoverContent } from "./Popover";
-var meta = {
+const meta = {
     title: "Components/Popver",
     component: Popover,
     tags: ["autodocs"],
@@ -19,15 +8,15 @@ 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: {},
-    render: function (args) {
+    render: (args) => {
         console.log("args ", args);
-        var props = __assign({}, args);
+        const props = Object.assign({}, args);
         return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: "Open" }), _jsx(PopoverContent, { children: "Place content for the popover here." })] }) }));
     },
 };

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,22 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@/utils/cn";
 import { useEffect, useState } from "react";
-var ProgressBar = function (_a) {
-    var _b = _a.progress, progress = _b === void 0 ? 0 : _b, color = _a.color, gradientStart = _a.gradientStart, gradientEnd = _a.gradientEnd, _c = _a.animationDuration, animationDuration = _c === void 0 ? 0.5 : _c, _d = _a.height, height = _d === void 0 ? 8 : _d, trackClassName = _a.trackClassName, progressClassName = _a.progressClassName;
-    var _e = useState(0), width = _e[0], setWidth = _e[1];
-    useEffect(function () {
+const ProgressBar = ({ progress = 0, color, gradientStart, gradientEnd, animationDuration = 0.5, height = 8, trackClassName, progressClassName, }) => {
+    const [width, setWidth] = useState(0);
+    useEffect(() => {
         setWidth(progress);
     }, [progress]);
-    var getBackgroundStyle = function () {
+    const getBackgroundStyle = () => {
         if (gradientStart && gradientEnd) {
-            return "linear-gradient(to right, ".concat(gradientStart, ", ").concat(gradientEnd, ")");
+            return `linear-gradient(to right, ${gradientStart}, ${gradientEnd})`;
         }
         return color;
     };
-    return (_jsx("div", { className: cn("w-full bg-grey2-transparent-16 rounded-full overflow-hidden", trackClassName), style: { height: "".concat(height, "px") }, children: _jsx("div", { className: cn("h-full rounded-full transition-all ease-out bg-primary", progressClassName), style: {
-                width: "".concat(width, "%"),
+    return (_jsx("div", { className: cn("w-full bg-grey2-transparent-16 rounded-full overflow-hidden", trackClassName), style: { height: `${height}px` }, children: _jsx("div", { className: cn("h-full rounded-full transition-all ease-out bg-primary", progressClassName), style: {
+                width: `${width}%`,
                 background: getBackgroundStyle(),
-                transition: "width ".concat(animationDuration, "s ease-out"),
+                transition: `width ${animationDuration}s ease-out`,
             } }) }));
 };
 export default ProgressBar;

package/dist/components/ProgressBar/ProgressBar.stories.js

@@ -1,18 +1,7 @@
-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 { useEffect, useState } from "react";
 import ProgressBar from "./ProgressBar";
-var meta = {
+const meta = {
     title: "Components/ProgressBar",
     component: ProgressBar,
     tags: ["autodocs"],
@@ -20,33 +9,31 @@ 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: {},
-    render: function (args) {
-        var props = __assign({}, args);
-        return (_jsx("div", { className: "p-4 space-y-4 w-full", children: _jsx(ProgressBar, __assign({}, props)) }));
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "p-4 space-y-4 w-full", children: _jsx(ProgressBar, Object.assign({}, props)) }));
     },
 };
-export var Preview = {
+export const Preview = {
     args: {},
-    render: function (args) {
+    render: (args) => {
         console.log("args ", args);
-        var _a = useState(0), progress = _a[0], setProgress = _a[1];
-        useEffect(function () {
-            var timer = setInterval(function () {
-                setProgress(function (prevProgress) {
-                    return prevProgress >= 100 ? 0 : prevProgress + 10;
-                });
+        const [progress, setProgress] = useState(0);
+        useEffect(() => {
+            const timer = setInterval(() => {
+                setProgress((prevProgress) => prevProgress >= 100 ? 0 : prevProgress + 10);
             }, 1000);
-            return function () {
+            return () => {
                 clearInterval(timer);
             };
         }, []);
-        var props = __assign({}, args);
+        const props = Object.assign({}, args);
         return (_jsxs("div", { className: "p-4 space-y-4 w-full", children: [_jsx(ProgressBar, { progress: progress, color: "#3b82f6", animationDuration: 0.7 }), _jsx(ProgressBar, { progress: progress, gradientStart: "#8a8a8a", gradientEnd: "#c0c0c0", animationDuration: 0.7 })] }));
     },
 };

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,15 +1,4 @@
 "use client";
-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)
@@ -25,14 +14,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import { cn } from "@/utils/cn";
-var RadioGroup = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(RadioGroupPrimitive.Root, __assign({ className: cn("grid gap-2", className) }, props, { ref: ref })));
+const RadioGroup = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(RadioGroupPrimitive.Root, Object.assign({ className: cn("grid gap-2", className) }, props, { ref: ref })));
 });
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(RadioGroupPrimitive.Item, __assign({ ref: ref, className: cn("aspect-square h-4 w-4 rounded-full border text-primary disabled:fill-state-disable-solid ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:state-disable-solid", {
+const RadioGroupItem = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(RadioGroupPrimitive.Item, Object.assign({ ref: ref, className: cn("aspect-square h-4 w-4 rounded-full border text-primary disabled:fill-state-disable-solid ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:state-disable-solid", {
             "border-primary-30 data-[state=checked]:border-primary": !props.disabled,
             "border-state-disable-solid data-disabled:border-state-disable-solid text-state-disable-solid fill-state-disable-solid": props.disabled,
         }, className) }, props, { children: _jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: _jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "fill-current text-current", children: _jsx("circle", { cx: "5", cy: "5", r: "5", fill: "current" }) }) }) })));

package/dist/components/RadioGroup/RadioGroup.stories.js

@@ -1,18 +1,7 @@
-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 { RadioGroup, RadioGroupItem } from "./RadioGroup";
 import { Label } from "../Label/Label";
-var meta = {
+const meta = {
     title: "Components/RadioGroup",
     component: RadioGroup,
     tags: ["autodocs"],
@@ -20,25 +9,25 @@ 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: false,
     },
-    render: function (args) {
-        var props = __assign({}, args);
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsxs(RadioGroup, __assign({ defaultValue: "option-one" }, props, { children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-one", id: "option-one" }), _jsx(Label, { htmlFor: "option-one", children: "Option One" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-two", id: "option-two" }), _jsx(Label, { htmlFor: "option-two", children: "Option Two" })] })] })) }));
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsxs(RadioGroup, Object.assign({ defaultValue: "option-one" }, props, { children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-one", id: "option-one" }), _jsx(Label, { htmlFor: "option-one", children: "Option One" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-two", id: "option-two" }), _jsx(Label, { htmlFor: "option-two", children: "Option Two" })] })] })) }));
     },
 };
-export var Diabled = {
+export const Diabled = {
     args: {
         disabled: true,
     },
-    render: function (args) {
-        var props = __assign({}, args);
+    render: (args) => {
+        const props = Object.assign({}, args);
         return (_jsx("div", { className: "flex items-center space-x-2", children: _jsxs(RadioGroup, { defaultValue: "option-one", disabled: true, children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-one", id: "option-one" }), _jsx(Label, { htmlFor: "option-one", children: "Option One" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-two", id: "option-two" }), _jsx(Label, { htmlFor: "option-two", children: "Option Two" })] })] }) }));
     },
 };

package/dist/components/Search/Search.js

@@ -1,18 +1,7 @@
-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 } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import Dropdown from "../Dropdown/Dropdown";
-var Search = forwardRef(function (props, ref) {
-    return (_jsx(Dropdown, __assign({}, props, { ref: ref, hasClearIcon: true, hasSearchIcon: true, label: "Search", endIcon: null, filterMode: true })));
+const Search = forwardRef((props, ref) => {
+    return (_jsx(Dropdown, Object.assign({}, props, { ref: ref, hasClearIcon: true, hasSearchIcon: true, label: "Search", endIcon: null, filterMode: true })));
 });
 export { Search };

package/dist/components/Search/Search.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 { Search } from "./Search";
-var meta = {
+const meta = {
     title: "Components/Search",
     component: Search,
     tags: ["autodocs"],
@@ -19,21 +8,21 @@ 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;
-var options = new Array(100).fill("").map(function (__, index) { return ({
-    value: "option".concat(index + 1),
-    label: "Option ".concat(index + 1),
-}); });
-export var Default = {
+const options = new Array(100).fill("").map((__, index) => ({
+    value: `option${index + 1}`,
+    label: `Option ${index + 1}`,
+}));
+export const Default = {
     args: {
         label: "Choose an option:",
         fullwidth: true,
-        options: options,
+        options,
     },
-    render: function (args) {
-        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(Search, __assign({ id: "1", size: "lg", options: options }, args)), _jsx(Search, __assign({ id: "2", size: "md", options: options }, args)), _jsx(Search, __assign({ id: "3", size: "sm", options: options }, args))] }));
+    render: (args) => {
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(Search, Object.assign({ id: "1", size: "lg", options: options }, args)), _jsx(Search, Object.assign({ id: "2", size: "md", options: options }, args)), _jsx(Search, Object.assign({ id: "3", size: "sm", options: options }, args))] }));
     },
 };

package/dist/components/Slider/Slider.js

@@ -0,0 +1,22 @@
+"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, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "@/utils/cn";
+const Slider = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsxs(SliderPrimitive.Root, Object.assign({ ref: ref, className: cn("relative flex w-full touch-none select-none items-center", className) }, props, { children: [_jsx(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-grey-50", children: _jsx(SliderPrimitive.Range, { className: "absolute h-full bg-primary" }) }), _jsx(SliderPrimitive.Thumb, { className: "block cursor-pointer h-5 w-5 rounded-full border-[3px] border-primary bg-background ring-0 outline-none disabled:pointer-events-none disabled:opacity-50" })] })));
+});
+Slider.displayName = SliderPrimitive.Root.displayName;
+export { Slider };

package/dist/components/Slider/Slider.stories.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slider } from "./Slider";
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta = {
+    title: "Components/Slider",
+    component: Slider,
+    tags: ["autodocs"],
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+        layout: "fullscreen",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        defaultValue: [50],
+        max: 100,
+        step: 1,
+        name: "test",
+        minStepsBetweenThumbs: 1,
+        // orientation: "horizontal", // "horizontal" | "vertical" | undefined,
+        disabled: false,
+        inverted: false,
+    },
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Slider, Object.assign({ defaultValue: [50], max: 100, step: 1 }, props)) }));
+    },
+};