funuicss 2.7.13 → 2.7.15

package/ui/carousel/Carousel.d.ts

@@ -4,6 +4,7 @@ interface CarouselProps {
     gap?: number;
     funcss?: string;
     children: ReactNode;
+    showDashes?: boolean;
 }
 declare const Carousel: React.FC<CarouselProps>;
 export default Carousel;

package/ui/carousel/Carousel.js

@@ -43,8 +43,35 @@ var Circle_1 = __importDefault(require("../specials/Circle"));
 var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
 var Functions_1 = require("../../utils/Functions");
 var Carousel = function (_a) {
-    var _b = _a.scrollNumber, scrollNumber = _b === void 0 ? 320 : _b, _c = _a.gap, gap = _c === void 0 ? 0.5 : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, children = _a.children;
+    var _b = _a.scrollNumber, scrollNumber = _b === void 0 ? 320 : _b, _c = _a.gap, gap = _c === void 0 ? 0.5 : _c, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, _e = _a.showDashes, showDashes = _e === void 0 ? true : _e, children = _a.children;
     var scrollRef = (0, react_1.useRef)(null);
+    var _f = (0, react_1.useState)('start'), scrollPosition = _f[0], setScrollPosition = _f[1];
+    var _g = (0, react_1.useState)(false), isPhone = _g[0], setIsPhone = _g[1];
+    (0, react_1.useEffect)(function () {
+        if ((0, Functions_1.isTouchDevice)()) {
+            setIsPhone(true);
+        }
+        else {
+            setIsPhone(false);
+        }
+    }, []);
+    // Track scroll position
+    var handleScroll = function () {
+        var container = scrollRef.current;
+        if (!container)
+            return;
+        var scrollLeft = container.scrollLeft, scrollWidth = container.scrollWidth, clientWidth = container.clientWidth;
+        var maxScrollLeft = scrollWidth - clientWidth;
+        if (scrollLeft === 0) {
+            setScrollPosition('start');
+        }
+        else if (scrollLeft >= maxScrollLeft - 10) {
+            setScrollPosition('end');
+        }
+        else {
+            setScrollPosition('middle');
+        }
+    };
     var scroll = function (direction) {
         var container = scrollRef.current;
         if (!container)
@@ -54,25 +81,52 @@ var Carousel = function (_a) {
             behavior: 'smooth',
         });
     };
-    var _e = (0, react_1.useState)(false), isPhone = _e[0], setisPhone = _e[1];
     (0, react_1.useEffect)(function () {
-        if ((0, Functions_1.isTouchDevice)()) {
-            setisPhone(true);
-        }
-        else {
-            setisPhone(false);
+        var container = scrollRef.current;
+        if (container) {
+            container.addEventListener('scroll', handleScroll);
+            return function () { return container.removeEventListener('scroll', handleScroll); };
         }
     }, []);
-    return (react_1.default.createElement(RowFlex_1.default, { gap: 1, wrap: "nowrap", alignItems: "center" },
-        !isPhone &&
-            react_1.default.createElement("div", null,
+    return (react_1.default.createElement("div", { className: "carousel-wrapper ".concat(funcss) },
+        react_1.default.createElement(RowFlex_1.default, { gap: 1, wrap: "nowrap", alignItems: "center" },
+            !isPhone && (react_1.default.createElement("div", null,
                 react_1.default.createElement(Circle_1.default, { onClick: function () { return scroll('left'); } },
-                    react_1.default.createElement(pi_1.PiCaretLeft, { size: 24 }))),
-        react_1.default.createElement("div", { ref: scrollRef, className: "carousel-container scrollbar-hide w-full ".concat(funcss), style: { width: "100%", gap: gap + "rem" } }, react_1.default.Children.map(children, function (child) { return (react_1.default.createElement("div", { className: "carousel-item" },
-            react_1.default.createElement("div", { className: "carousel-card" }, child))); })),
-        !isPhone &&
-            react_1.default.createElement("div", null,
+                    react_1.default.createElement(pi_1.PiCaretLeft, { size: 24 })))),
+            react_1.default.createElement("div", { ref: scrollRef, className: "carousel-container scrollbar-hide w-full", style: {
+                    width: '100%',
+                    gap: gap + 'rem',
+                    overflowX: 'auto',
+                    display: 'flex',
+                    scrollSnapType: 'x mandatory',
+                    scrollBehavior: 'smooth',
+                } }, react_1.default.Children.map(children, function (child) { return (react_1.default.createElement("div", { className: "carousel-item", style: { flexShrink: 0 } },
+                react_1.default.createElement("div", { className: "carousel-card" }, child))); })),
+            !isPhone && (react_1.default.createElement("div", null,
                 react_1.default.createElement(Circle_1.default, { onClick: function () { return scroll('right'); } },
-                    react_1.default.createElement(pi_1.PiCaretRight, { size: 24 })))));
+                    react_1.default.createElement(pi_1.PiCaretRight, { size: 24 }))))),
+        showDashes && (react_1.default.createElement("div", { className: "center padding-top-10" },
+            react_1.default.createElement(RowFlex_1.default, { gap: 0.5, justify: "center" }, ['start', 'middle', 'end'].map(function (pos) { return (react_1.default.createElement("div", { className: 'pointer ', key: pos, onClick: function () {
+                    var _a, _b;
+                    if (pos === 'start') {
+                        scroll('left');
+                    }
+                    else if (pos === 'middle') {
+                        (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+                            left: ((_b = scrollRef.current) === null || _b === void 0 ? void 0 : _b.scrollWidth) / 2,
+                            behavior: 'smooth',
+                        });
+                    }
+                    else if (pos === 'end') {
+                        scroll('right');
+                    }
+                }, style: {
+                    width: '10px',
+                    height: '10px',
+                    background: scrollPosition === pos ? 'var(--primary)' : 'var(--borderColor)',
+                    borderRadius: '50%',
+                    transform: scrollPosition === pos ? 'scale(1.3)' : 'scale(0.9)',
+                    transition: 'transform 0.3s ease, background 0.3s ease',
+                } })); }))))));
 };
 exports.default = Carousel;

package/ui/carousel/Carousel.tsx

@@ -6,15 +6,48 @@ import RowFlex from '../specials/RowFlex';
 import { isTouchDevice } from '../../utils/Functions';
 
 interface CarouselProps {
-
-scrollNumber?: number;
-gap?:number;
-funcss?: string;
-children: ReactNode;
+  scrollNumber?: number;
+  gap?: number;
+  funcss?: string;
+  children: ReactNode;
+  showDashes?: boolean;
 }
 
-const Carousel: React.FC<CarouselProps> = ({ scrollNumber = 320, gap = 0.5, funcss  = '',  children   }) => {
+const Carousel: React.FC<CarouselProps> = ({
+  scrollNumber = 320,
+  gap = 0.5,
+  funcss = '',
+  showDashes = true,
+  children,
+}) => {
   const scrollRef = useRef<HTMLDivElement | null>(null);
+  const [scrollPosition, setScrollPosition] = useState<'start' | 'middle' | 'end'>('start');
+  const [isPhone, setIsPhone] = useState(false);
+
+  useEffect(() => {
+    if (isTouchDevice()) {
+      setIsPhone(true);
+    } else {
+      setIsPhone(false);
+    }
+  }, []);
+
+  // Track scroll position
+  const handleScroll = () => {
+    const container = scrollRef.current;
+    if (!container) return;
+
+    const { scrollLeft, scrollWidth, clientWidth } = container;
+    const maxScrollLeft = scrollWidth - clientWidth;
+
+    if (scrollLeft === 0) {
+      setScrollPosition('start');
+    } else if (scrollLeft >= maxScrollLeft - 10) {
+      setScrollPosition('end');
+    } else {
+      setScrollPosition('middle');
+    }
+  };
 
   const scroll = (direction: 'left' | 'right') => {
     const container = scrollRef.current;
@@ -25,48 +58,90 @@ const Carousel: React.FC<CarouselProps> = ({ scrollNumber = 320, gap = 0.5, func
       behavior: 'smooth',
     });
   };
-  const [isPhone, setisPhone] = useState(false)
-    useEffect(() => {
-    if (isTouchDevice()) {
-      setisPhone(true)
-    } else {
-      setisPhone(false)
+
+  useEffect(() => {
+    const container = scrollRef.current;
+    if (container) {
+      container.addEventListener('scroll', handleScroll);
+      return () => container.removeEventListener('scroll', handleScroll);
     }
   }, []);
 
   return (
-    <RowFlex gap={1} wrap="nowrap" alignItems="center">
-     {
-        !isPhone &&
-      <div >
-        <Circle  onClick={() => scroll('left')}>
-          <PiCaretLeft size={24} />
-        </Circle>
-      </div>
-     }
+    <div className={`carousel-wrapper ${funcss}`}>
+      <RowFlex gap={1} wrap="nowrap" alignItems="center">
+        {!isPhone && (
+          <div>
+            <Circle onClick={() => scroll('left')}>
+              <PiCaretLeft size={24} />
+            </Circle>
+          </div>
+        )}
 
-      {/* Scrollable container */}
-      <div
-        ref={scrollRef}
-        className={`carousel-container scrollbar-hide w-full ${funcss}`}
-        style={{width:"100%" , gap:gap + "rem"}}
-      >
-        {React.Children.map(children, (child) => (
-          <div className="carousel-item">
-            <div className="carousel-card">{child}</div>
+        <div
+          ref={scrollRef}
+          className={`carousel-container scrollbar-hide w-full`}
+          style={{
+            width: '100%',
+            gap: gap + 'rem',
+            overflowX: 'auto',
+            display: 'flex',
+            scrollSnapType: 'x mandatory',
+            scrollBehavior: 'smooth',
+          }}
+        >
+          {React.Children.map(children, (child) => (
+            <div className="carousel-item" style={{ flexShrink: 0 }}>
+              <div className="carousel-card">{child}</div>
+            </div>
+          ))}
+        </div>
+
+        {!isPhone && (
+          <div>
+            <Circle onClick={() => scroll('right')}>
+              <PiCaretRight size={24} />
+            </Circle>
           </div>
-        ))}
-      </div>
+        )}
+      </RowFlex>
 
-    {
-        !isPhone &&
-           <div>
-        <Circle  onClick={() => scroll('right')}>
-          <PiCaretRight size={24} />
-        </Circle>
-      </div>
-    }
-    </RowFlex>
+      {/* Dashes below the carousel */}
+      {
+        showDashes && (
+          <div className="center padding-top-10">
+          <RowFlex gap={0.5} justify="center">
+            {['start', 'middle', 'end'].map((pos) => (
+              <div
+              className={'pointer '}
+                key={pos}
+                onClick={() => {
+                  if(pos === 'start') {
+                   scroll('left')
+                  } else if(pos === 'middle') {
+                    scrollRef.current?.scrollTo({
+                      left: scrollRef.current?.scrollWidth / 2,
+                      behavior: 'smooth',
+                    });
+                  } else if(pos === 'end') {
+                    scroll('right')
+                  }
+                }}
+                style={{
+                  width: '10px',
+                  height: '10px',
+                  background: scrollPosition === pos ? 'var(--primary)' : 'var(--borderColor)',
+                  borderRadius: '50%',
+                  transform: scrollPosition === pos ? 'scale(1.3)' : 'scale(0.9)',
+                  transition: 'transform 0.3s ease, background 0.3s ease',
+                }}
+              />
+            ))}
+          </RowFlex>
+        </div> 
+        )
+      }
+    </div>
   );
 };
 

package/ui/richtext/RichText.d.ts

@@ -1,17 +1,19 @@
 import React from 'react';
 import 'quill/dist/quill.bubble.css';
+import 'quill/dist/quill.snow.css';
 interface RichTextProps {
-    /** The HTML content of the editor */
     value: string;
-    showEmojis: boolean;
-    /** Function triggered when the editor content changes */
     onChange: (content: string) => void;
-    /** Placeholder shown when editor is empty */
+    showEmojis?: boolean;
     placeholder?: string;
-    /** Optional ReactNode to be rendered after the emoji dropdown */
     afterEmoji?: React.ReactNode;
-    /** Extra class names for container styling */
     funcss?: string;
+    /** Custom Quill modules (e.g., additional toolbar items) */
+    modules?: any;
+    /** Quill theme (e.g. 'bubble' | 'snow') */
+    theme?: 'bubble' | 'snow';
+    /** Optional fontFamily override */
+    fontFamily?: string;
 }
 declare const RichText: React.FC<RichTextProps>;
 export default RichText;

package/ui/richtext/RichText.js

@@ -40,6 +40,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var react_quilljs_1 = require("react-quilljs");
 require("quill/dist/quill.bubble.css");
+require("quill/dist/quill.snow.css"); // Add support for snow theme
 var md_1 = require("react-icons/md");
 var Emojis_1 = require("../../utils/Emojis");
 var Dropdown_1 = __importDefault(require("../drop/Dropdown"));
@@ -48,15 +49,17 @@ var ToolTip_1 = __importDefault(require("../tooltip/ToolTip"));
 var Circle_1 = __importDefault(require("../specials/Circle"));
 var Tip_1 = __importDefault(require("../tooltip/Tip"));
 var RichText = function (_a) {
-    var value = _a.value, onChange = _a.onChange, _b = _a.placeholder, placeholder = _b === void 0 ? 'Write something...' : _b, afterEmoji = _a.afterEmoji, showEmojis = _a.showEmojis, _c = _a.funcss, funcss = _c === void 0 ? '' : _c;
-    var _d = (0, react_quilljs_1.useQuill)({
-        theme: 'bubble',
-        placeholder: placeholder,
-        modules: {
-            toolbar: [['bold', 'italic', 'underline'], [{ list: 'bullet' }]],
-        },
-    }), quill = _d.quill, quillRef = _d.quillRef;
+    var value = _a.value, onChange = _a.onChange, _b = _a.showEmojis, showEmojis = _b === void 0 ? false : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Write something...' : _c, afterEmoji = _a.afterEmoji, _d = _a.funcss, funcss = _d === void 0 ? '' : _d, modules = _a.modules, _e = _a.theme, theme = _e === void 0 ? 'bubble' : _e, fontFamily = _a.fontFamily;
     var savedRange = (0, react_1.useRef)(null);
+    // Default modules (basic toolbar)
+    var defaultModules = {
+        toolbar: [['bold', 'italic', 'underline'], [{ list: 'bullet' }]],
+    };
+    var _f = (0, react_quilljs_1.useQuill)({
+        theme: theme,
+        placeholder: placeholder,
+        modules: modules || defaultModules,
+    }), quill = _f.quill, quillRef = _f.quillRef;
     (0, react_1.useEffect)(function () {
         if (!quill)
             return;
@@ -89,24 +92,25 @@ var RichText = function (_a) {
         react_1.default.createElement("div", { className: "mb-2 mt-2 text-sm" }, title),
         react_1.default.createElement(RowFlex_1.default, { gap: 0.3 }, emojis.map(function (emoji, i) { return (react_1.default.createElement("span", { key: i, className: "h6 pointer", onClick: function () { return insertEmoji(emoji); } }, emoji)); })))); };
     return (react_1.default.createElement("div", { className: funcss },
-        react_1.default.createElement("div", { id: "bubble-editor-container", className: "bubble-editor-container p-0" },
-            react_1.default.createElement("div", { ref: quillRef, className: "bubble-editor" })),
-        react_1.default.createElement(RowFlex_1.default, { gap: 0.5 },
-            showEmojis &&
-                react_1.default.createElement(Dropdown_1.default, { closableOnlyOutside: true, direction: "dropdown", openOnHover: false, button: react_1.default.createElement(ToolTip_1.default, null,
-                        react_1.default.createElement(Circle_1.default, { funcss: "bg border" },
-                            react_1.default.createElement(md_1.MdOutlineEmojiEmotions, null)),
-                        react_1.default.createElement(Tip_1.default, { tip: "top", animation: "ScaleUp", duration: 0.5, content: "Emojis" })), items: [
-                        {
-                            label: (react_1.default.createElement("div", { className: "w-200 h-300", style: { overflowY: 'auto' } },
-                                renderEmojiSection('❤️ Smileys & People', Emojis_1.AllEmojis.Smiley),
-                                renderEmojiSection('👍 Gestures & Body Parts', Emojis_1.AllEmojis.Gesture),
-                                renderEmojiSection('🔥 Symbols & Expressions', Emojis_1.AllEmojis.Symbols),
-                                renderEmojiSection('🚀 Travel, Objects & Activities', Emojis_1.AllEmojis.Travel),
-                                renderEmojiSection('👨‍👩‍👧‍👦 People & Professions', Emojis_1.AllEmojis.People),
-                                renderEmojiSection('🐶 Animals & Nature', Emojis_1.AllEmojis.Animals))),
-                        },
-                    ] }),
-            afterEmoji || null)));
+        react_1.default.createElement("div", { id: "editor-container", className: "bubble-editor-container  p-0" },
+            react_1.default.createElement("div", { ref: quillRef, className: theme === 'bubble' ? "bubble-editor " : "snow-editor ", style: {
+                    fontFamily: fontFamily || 'inherit',
+                } })),
+        (showEmojis || afterEmoji) && (react_1.default.createElement(RowFlex_1.default, { gap: 0.5, funcss: 'mt-1' },
+            showEmojis && (react_1.default.createElement(Dropdown_1.default, { closableOnlyOutside: true, direction: "dropdown", openOnHover: false, button: react_1.default.createElement(ToolTip_1.default, null,
+                    react_1.default.createElement(Circle_1.default, { funcss: "bg border" },
+                        react_1.default.createElement(md_1.MdOutlineEmojiEmotions, null)),
+                    react_1.default.createElement(Tip_1.default, { tip: "top", animation: "ScaleUp", duration: 0.5, content: "Emojis" })), items: [
+                    {
+                        label: (react_1.default.createElement("div", { className: "w-200 h-300", style: { overflowY: 'auto' } },
+                            renderEmojiSection('❤️ Smileys & People', Emojis_1.AllEmojis.Smiley),
+                            renderEmojiSection('👍 Gestures & Body Parts', Emojis_1.AllEmojis.Gesture),
+                            renderEmojiSection('🔥 Symbols & Expressions', Emojis_1.AllEmojis.Symbols),
+                            renderEmojiSection('🚀 Travel, Objects & Activities', Emojis_1.AllEmojis.Travel),
+                            renderEmojiSection('👨‍👩‍👧‍👦 People & Professions', Emojis_1.AllEmojis.People),
+                            renderEmojiSection('🐶 Animals & Nature', Emojis_1.AllEmojis.Animals))),
+                    },
+                ] })),
+            afterEmoji))));
 };
 exports.default = RichText;

package/ui/richtext/RichText.tsx

@@ -2,6 +2,7 @@
 import React, { useEffect, useRef } from 'react';
 import { useQuill } from 'react-quilljs';
 import 'quill/dist/quill.bubble.css';
+import 'quill/dist/quill.snow.css'; // Add support for snow theme
 import { MdOutlineEmojiEmotions } from 'react-icons/md';
 import { AllEmojis } from '../../utils/Emojis';
 import Dropdown from '../drop/Dropdown';
@@ -10,47 +11,53 @@ import ToolTip from '../tooltip/ToolTip';
 import Circle from '../specials/Circle';
 import Tip from '../tooltip/Tip';
 
-// ✅ Define RangeStatic locally since Quill does not export it
 type RangeStatic = {
   index: number;
   length: number;
 };
 
 interface RichTextProps {
-  /** The HTML content of the editor */
   value: string;
-  showEmojis: boolean;
-  /** Function triggered when the editor content changes */
   onChange: (content: string) => void;
-
-  /** Placeholder shown when editor is empty */
+  showEmojis?: boolean;
   placeholder?: string;
-
-  /** Optional ReactNode to be rendered after the emoji dropdown */
   afterEmoji?: React.ReactNode;
-
-  /** Extra class names for container styling */
   funcss?: string;
+
+  /** Custom Quill modules (e.g., additional toolbar items) */
+  modules?: any;
+
+  /** Quill theme (e.g. 'bubble' | 'snow') */
+  theme?: 'bubble' | 'snow';
+
+  /** Optional fontFamily override */
+  fontFamily?: string;
 }
 
 const RichText: React.FC<RichTextProps> = ({
   value,
   onChange,
+  showEmojis = false,
   placeholder = 'Write something...',
   afterEmoji,
-  showEmojis,
   funcss = '',
+  modules,
+  theme = 'bubble',
+  fontFamily,
 }) => {
+  const savedRange = useRef<RangeStatic | null>(null);
+
+  // Default modules (basic toolbar)
+  const defaultModules = {
+    toolbar: [['bold', 'italic', 'underline'], [{ list: 'bullet' }]],
+  };
+
   const { quill, quillRef } = useQuill({
-    theme: 'bubble',
+    theme,
     placeholder,
-    modules: {
-      toolbar: [['bold', 'italic', 'underline'], [{ list: 'bullet' }]],
-    },
+    modules: modules || defaultModules,
   });
 
-  const savedRange = useRef<RangeStatic | null>(null);
-
   useEffect(() => {
     if (!quill) return;
 
@@ -98,46 +105,50 @@ const RichText: React.FC<RichTextProps> = ({
   );
 
   return (
-    <div className={funcss} >
-      {/* Editor Container */}
-      <div id={"bubble-editor-container"} className="bubble-editor-container p-0">
-        <div ref={quillRef} className="bubble-editor" />
+    <div
+   className={funcss}
+    >
+      <div id="editor-container" className="bubble-editor-container  p-0">
+        <div ref={quillRef}    className={theme === 'bubble' ? "bubble-editor " : "snow-editor "}
+      style={{
+        fontFamily: fontFamily || 'inherit',
+      }}/>
       </div>
 
-      {/* Emoji Dropdown */}
-      <RowFlex gap={0.5}>
-        {
-            showEmojis &&
-               <Dropdown
-               closableOnlyOutside
-          direction="dropdown"
-          openOnHover={false}
-          button={
-            <ToolTip>
-              <Circle funcss="bg border">
-                <MdOutlineEmojiEmotions />
-              </Circle>
-              <Tip tip="top" animation="ScaleUp" duration={0.5} content="Emojis" />
-            </ToolTip>
-          }
-          items={[
-            {
-              label: (
-                <div className="w-200 h-300" style={{ overflowY: 'auto' }}>
-                  {renderEmojiSection('❤️ Smileys & People', AllEmojis.Smiley)}
-                  {renderEmojiSection('👍 Gestures & Body Parts', AllEmojis.Gesture)}
-                  {renderEmojiSection('🔥 Symbols & Expressions', AllEmojis.Symbols)}
-                  {renderEmojiSection('🚀 Travel, Objects & Activities', AllEmojis.Travel)}
-                  {renderEmojiSection('👨‍👩‍👧‍👦 People & Professions', AllEmojis.People)}
-                  {renderEmojiSection('🐶 Animals & Nature', AllEmojis.Animals)}
-                </div>
-              ),
-            },
-          ]}
-        />
-        }
-        {afterEmoji || null}
-      </RowFlex>
+      {(showEmojis || afterEmoji) && (
+        <RowFlex gap={0.5} funcss='mt-1'>
+          {showEmojis && (
+            <Dropdown
+              closableOnlyOutside
+              direction="dropdown"
+              openOnHover={false}
+              button={
+                <ToolTip>
+                  <Circle funcss="bg border">
+                    <MdOutlineEmojiEmotions />
+                  </Circle>
+                  <Tip tip="top" animation="ScaleUp" duration={0.5} content="Emojis" />
+                </ToolTip>
+              }
+              items={[
+                {
+                  label: (
+                    <div className="w-200 h-300" style={{ overflowY: 'auto' }}>
+                      {renderEmojiSection('❤️ Smileys & People', AllEmojis.Smiley)}
+                      {renderEmojiSection('👍 Gestures & Body Parts', AllEmojis.Gesture)}
+                      {renderEmojiSection('🔥 Symbols & Expressions', AllEmojis.Symbols)}
+                      {renderEmojiSection('🚀 Travel, Objects & Activities', AllEmojis.Travel)}
+                      {renderEmojiSection('👨‍👩‍👧‍👦 People & Professions', AllEmojis.People)}
+                      {renderEmojiSection('🐶 Animals & Nature', AllEmojis.Animals)}
+                    </div>
+                  ),
+                },
+              ]}
+            />
+          )}
+          {afterEmoji}
+        </RowFlex>
+      )}
     </div>
   );
 };

package/ui/slider/Slider.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+type RangeSliderProps = {
+    min?: number;
+    max?: number;
+    step?: number;
+    value: number;
+    height?: number;
+    onChange: (value: number) => void;
+    label?: string;
+    showTooltip?: boolean;
+    funcss?: string;
+};
+declare const Slider: React.FC<RangeSliderProps>;
+export default Slider;

package/ui/slider/Slider.js

@@ -0,0 +1,57 @@
+"use strict";
+'use client';
+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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var getCssVariable_1 = require("../../utils/getCssVariable");
+var Slider = function (_a) {
+    var _b = _a.min, min = _b === void 0 ? 0 : _b, _c = _a.max, max = _c === void 0 ? 100 : _c, _d = _a.step, step = _d === void 0 ? 1 : _d, value = _a.value, onChange = _a.onChange, _e = _a.height, height = _e === void 0 ? 6 : _e, label = _a.label, _f = _a.showTooltip, showTooltip = _f === void 0 ? true : _f, _g = _a.funcss, funcss = _g === void 0 ? '' : _g;
+    var _h = (0, react_1.useState)(false), isDragging = _h[0], setIsDragging = _h[1];
+    var handleChange = function (e) {
+        onChange(Number(e.target.value));
+    };
+    var percent = ((value - min) / (max - min)) * 100;
+    var pColor = (0, getCssVariable_1.getCssVariableValue)("primary");
+    return (react_1.default.createElement("div", { className: "range-slider-container ".concat(funcss) },
+        react_1.default.createElement("div", { className: "range-wrapper" },
+            showTooltip && (react_1.default.createElement("div", { className: "range-tooltip ".concat(isDragging ? 'visible' : ''), style: { left: "calc(".concat(percent, "% - 20px)") } },
+                value,
+                "%")),
+            react_1.default.createElement("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, onMouseDown: function () { return setIsDragging(true); }, onMouseUp: function () { return setIsDragging(false); }, onTouchStart: function () { return setIsDragging(true); }, onTouchEnd: function () { return setIsDragging(false); }, className: "range-slider", style: {
+                    background: "linear-gradient(to right, ".concat(pColor, " 0%, ").concat(pColor, " ").concat(percent, "%, var(--lighter) ").concat(percent, "%, var(--lighter) 100%)"),
+                    height: "".concat(height, "px"),
+                } }))));
+};
+exports.default = Slider;