atenea-components 1.4.20 → 1.4.23

package/dist/components/atoms/RangeSlider.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+export type RangeSliderProps = {
+    min: number;
+    max: number;
+    step?: number;
+    value: number;
+    onChange?: (value: number) => void;
+    disabled?: boolean;
+    minLabel?: React.ReactNode;
+    maxLabel?: React.ReactNode;
+    valueFormat?: (value: number) => string;
+    showValue?: boolean;
+    className?: string;
+    id?: string;
+};
+export declare const RangeSlider: React.ForwardRefExoticComponent<RangeSliderProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/atoms/RangeSlider.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RangeSlider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const clsx_1 = __importDefault(require("clsx"));
+exports.RangeSlider = (0, react_1.forwardRef)(({ min, max, step = 1, value, onChange, disabled = false, minLabel, maxLabel, valueFormat = (v) => String(v), showValue = true, className = "", id, }, ref) => {
+    const percentage = max > min ? ((value - min) / (max - min)) * 100 : 0;
+    const handleChange = (e) => {
+        if (!disabled && onChange) {
+            const next = parseFloat(e.target.value);
+            onChange(Number.isNaN(next) ? min : next);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, clsx_1.default)("relative pb-10", className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between mb-2 text-base font-normal leading-6 text-gray-400 align-middle", children: [(0, jsx_runtime_1.jsx)("span", { children: minLabel !== null && minLabel !== void 0 ? minLabel : min }), (0, jsx_runtime_1.jsx)("span", { children: maxLabel !== null && maxLabel !== void 0 ? maxLabel : max })] }), (0, jsx_runtime_1.jsxs)("div", { className: "relative h-1.5 bg-gray-100 rounded-full", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute top-0 left-0 h-full bg-primary-400 rounded-full transition-[width] duration-150", style: { width: `${percentage}%` } }), (0, jsx_runtime_1.jsx)("input", { ref: ref, type: "range", id: id, min: min, max: max, step: step, value: value, onChange: handleChange, disabled: disabled, className: "absolute top-1/2 -translate-y-1/2 left-0 w-full opacity-0 cursor-pointer z-10 h-6 disabled:cursor-not-allowed", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-1/2 -translate-y-1/2 w-6 h-6 bg-primary-400 rounded-full border-2 border-white pointer-events-none transition-all duration-150", style: { left: `calc(${percentage}% - 12px)` } })] }), showValue && ((0, jsx_runtime_1.jsx)("span", { className: "absolute -translate-x-1/2 text-2xl font-semibold leading-7 text-primary-500 align-middle", style: {
+                    left: `${percentage}%`,
+                    top: "calc(100% - 28px)",
+                }, children: valueFormat(value) }))] }));
+});
+exports.RangeSlider.displayName = "RangeSlider";

package/dist/components/icons/IconSleep1.js

@@ -1,10 +1,24 @@
 "use strict";
+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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconSleep1 = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const lu_1 = require("react-icons/lu");
 const IconBase_1 = require("./IconBase");
+const Icon = (_a) => {
+    var { size = 20, color = 'currentColor', className } = _a, rest = __rest(_a, ["size", "color", "className"]);
+    return ((0, jsx_runtime_1.jsx)("svg", Object.assign({ width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className }, rest, { children: (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "2", fill: "none" }) })));
+};
 const IconSleep1 = (props) => {
-    return (0, jsx_runtime_1.jsx)(IconBase_1.IconBase, Object.assign({ icon: lu_1.LuMoon }, props));
+    return (0, jsx_runtime_1.jsx)(IconBase_1.IconBase, Object.assign({ icon: Icon }, props));
 };
 exports.IconSleep1 = IconSleep1;

package/dist/components/icons/IconSleep2.js

@@ -1,10 +1,24 @@
 "use strict";
+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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconSleep2 = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const lu_1 = require("react-icons/lu");
 const IconBase_1 = require("./IconBase");
+const Icon = (_a) => {
+    var { size = 20, color = 'currentColor', className } = _a, rest = __rest(_a, ["size", "color", "className"]);
+    return ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className }, rest, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "2", fill: "none" }), (0, jsx_runtime_1.jsx)("path", { d: "M 12 12 L 22 12 A 10 10 0 0 1 12 22 Z", fill: color })] })));
+};
 const IconSleep2 = (props) => {
-    return (0, jsx_runtime_1.jsx)(IconBase_1.IconBase, Object.assign({ icon: lu_1.LuMoon }, props));
+    return (0, jsx_runtime_1.jsx)(IconBase_1.IconBase, Object.assign({ icon: Icon }, props));
 };
 exports.IconSleep2 = IconSleep2;

package/dist/components/icons/IconSleep3.js

@@ -1,10 +1,24 @@
 "use strict";
+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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconSleep3 = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const lu_1 = require("react-icons/lu");
 const IconBase_1 = require("./IconBase");
+const Icon = (_a) => {
+    var { size = 20, color = 'currentColor', className } = _a, rest = __rest(_a, ["size", "color", "className"]);
+    return ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className }, rest, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "2", fill: "none" }), (0, jsx_runtime_1.jsx)("path", { d: "M 12 12 L 22 12 A 10 10 0 0 1 2 12 Z", fill: color })] })));
+};
 const IconSleep3 = (props) => {
-    return (0, jsx_runtime_1.jsx)(IconBase_1.IconBase, Object.assign({ icon: lu_1.LuMoon }, props));
+    return (0, jsx_runtime_1.jsx)(IconBase_1.IconBase, Object.assign({ icon: Icon }, props));
 };
 exports.IconSleep3 = IconSleep3;

package/dist/components/icons/IconSleep4.js

@@ -1,10 +1,24 @@
 "use strict";
+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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconSleep4 = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const lu_1 = require("react-icons/lu");
 const IconBase_1 = require("./IconBase");
+const Icon = (_a) => {
+    var { size = 20, color = 'currentColor', className } = _a, rest = __rest(_a, ["size", "color", "className"]);
+    return ((0, jsx_runtime_1.jsxs)("svg", Object.assign({ width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className }, rest, { children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10", stroke: color, strokeWidth: "2", fill: "none" }), (0, jsx_runtime_1.jsx)("path", { d: "M 12 12 L 22 12 A 10 10 0 0 1 2 12 A 10 10 0 0 1 12 2 Z", fill: color })] })));
+};
 const IconSleep4 = (props) => {
-    return (0, jsx_runtime_1.jsx)(IconBase_1.IconBase, Object.assign({ icon: lu_1.LuMoon }, props));
+    return (0, jsx_runtime_1.jsx)(IconBase_1.IconBase, Object.assign({ icon: Icon }, props));
 };
 exports.IconSleep4 = IconSleep4;

package/dist/components/icons/IconSleep5.js

@@ -1,10 +1,24 @@
 "use strict";
+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;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconSleep5 = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const lu_1 = require("react-icons/lu");
 const IconBase_1 = require("./IconBase");
+const Icon = (_a) => {
+    var { size = 20, color = 'currentColor', className } = _a, rest = __rest(_a, ["size", "color", "className"]);
+    return ((0, jsx_runtime_1.jsx)("svg", Object.assign({ width: size, height: size, viewBox: "0 0 24 24", fill: "none", className: className }, rest, { children: (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10", fill: color }) })));
+};
 const IconSleep5 = (props) => {
-    return (0, jsx_runtime_1.jsx)(IconBase_1.IconBase, Object.assign({ icon: lu_1.LuMoon }, props));
+    return (0, jsx_runtime_1.jsx)(IconBase_1.IconBase, Object.assign({ icon: Icon }, props));
 };
 exports.IconSleep5 = IconSleep5;

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from "./components/atoms/SelectDropdown";
 export * from "./components/atoms/ActionDropdown";
 export * from "./components/atoms/Checkbox";
 export * from "./components/atoms/Radio";
+export * from "./components/atoms/RangeSlider";
 export * from "./components/atoms/Toggle";
 export * from "./components/atoms/ListItem";
 export * from "./components/atoms/IntroIllustration";

package/dist/index.js

@@ -11,6 +11,7 @@ tslib_1.__exportStar(require("./components/atoms/SelectDropdown"), exports);
 tslib_1.__exportStar(require("./components/atoms/ActionDropdown"), exports);
 tslib_1.__exportStar(require("./components/atoms/Checkbox"), exports);
 tslib_1.__exportStar(require("./components/atoms/Radio"), exports);
+tslib_1.__exportStar(require("./components/atoms/RangeSlider"), exports);
 tslib_1.__exportStar(require("./components/atoms/Toggle"), exports);
 tslib_1.__exportStar(require("./components/atoms/ListItem"), exports);
 tslib_1.__exportStar(require("./components/atoms/IntroIllustration"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atenea-components",
-  "version": "1.4.20",
+  "version": "1.4.23",
   "description": "React component library for Atenea",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",