@rovula/ui 0.0.70 → 0.0.72

package/dist/cjs/types/components/Dropdown/Dropdown.styles.d.ts

@@ -2,7 +2,6 @@ export declare const iconWrapperVariant: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const dropdownIconVariant: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
     disabled?: boolean | null | undefined;
     isFocus?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/cjs/types/components/Slider/Slider.d.ts

@@ -1,5 +1,13 @@
 import * as React from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
-declare const Slider: React.ForwardRefExoticComponent<Omit<SliderPrimitive.SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export interface CustomSliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+    trackClassName?: string;
+    rangeClassName?: string;
+    thumbClassName?: string;
+    trackStyle?: React.CSSProperties;
+    thumbStyle?: React.CSSProperties;
+    rangeStyle?: React.CSSProperties;
+}
+declare const Slider: React.ForwardRefExoticComponent<CustomSliderProps & React.RefAttributes<HTMLSpanElement>>;
 export type SliderProps = React.ComponentProps<typeof Slider>;
 export { Slider };

package/dist/cjs/types/components/Slider/Slider.stories.d.ts

@@ -1,12 +1,19 @@
 import React from "react";
+import type { StoryObj } from "@storybook/react";
 declare const meta: {
     title: string;
-    component: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slider").SliderProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+    component: React.ForwardRefExoticComponent<import("./Slider").CustomSliderProps & React.RefAttributes<HTMLSpanElement>>;
     tags: string[];
     parameters: {
         layout: string;
     };
     decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        trackClassName?: string | undefined;
+        rangeClassName?: string | undefined;
+        thumbClassName?: string | undefined;
+        trackStyle?: React.CSSProperties | undefined;
+        thumbStyle?: React.CSSProperties | undefined;
+        rangeStyle?: React.CSSProperties | undefined;
         suppressHydrationWarning?: boolean | undefined | undefined;
         className?: string | undefined | undefined;
         color?: string | undefined | undefined;
@@ -303,3 +310,4 @@ export declare const Default: {
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const GradientColor: StoryObj;

package/dist/components/Dropdown/Dropdown.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
 import * as Portal from "@radix-ui/react-portal";
 import TextInput from "../TextInput/TextInput";
-import { customInputVariant, dropdownIconVariant, iconWrapperVariant, } from "./Dropdown.styles";
+import { customInputVariant, dropdownIconVariant } from "./Dropdown.styles";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
 const Dropdown = forwardRef((_a, ref) => {
@@ -170,7 +170,7 @@ const Dropdown = forwardRef((_a, ref) => {
         keyCode.current = e.code;
         (_a = props === null || props === void 0 ? void 0 : props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
     }, [props === null || props === void 0 ? void 0 : props.onKeyDown]);
-    return (_jsxs("div", { className: `relative  ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx("div", { className: iconWrapperVariant({ size }), children: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ size, isFocus: isFocused }) }) }) }, props, { ref: inputRef, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", autoComplete: "off", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size }), onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: handleOnKeyDown })), isFocused &&
+    return (_jsxs("div", { className: `relative  ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ isFocus: isFocused }) }) }, props, { ref: inputRef, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", autoComplete: "off", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size }), onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: handleOnKeyDown })), isFocused &&
                 (usePortal ? (_jsx(Portal.Root, { container: document.body, children: renderOptions() })) : (renderOptions()))] }));
 });
 export default Dropdown;

package/dist/components/Dropdown/Dropdown.stories.js

@@ -89,6 +89,7 @@ export const CustomOption = {
         fullwidth: true,
         options: customOptions,
         filterMode: true,
+        // iconMode: "flat",
     },
     render: (args) => {
         console.log("args ", args);

package/dist/components/Dropdown/Dropdown.styles.js

@@ -13,11 +13,12 @@ export const iconWrapperVariant = cva(["absolute inset-y-0 right-0 flex items-ce
 });
 export const dropdownIconVariant = cva(["transition-all"], {
     variants: {
-        size: {
-            sm: "size-[14px]",
-            md: "size-5",
-            lg: "size-6",
-        },
+        // Controll by text-input
+        // size: {
+        //   sm: "size-[14px]",
+        //   md: "size-5",
+        //   lg: "size-6",
+        // },
         disabled: {
             true: "fill-input-text-disabled",
             false: "fill-inherit",
@@ -28,7 +29,6 @@ export const dropdownIconVariant = cva(["transition-all"], {
         },
     },
     defaultVariants: {
-        size: "md",
         disabled: false,
         isFocus: false,
     },

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -31,13 +31,13 @@ DropdownMenuSubTrigger.displayName =
     DropdownMenuPrimitive.SubTrigger.displayName;
 const DropdownMenuSubContent = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(DropdownMenuPrimitive.SubContent, Object.assign({ ref: ref, className: cn("z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground shadow-[var(--dropdown-menu-shadow)] 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)));
+    return (_jsx(DropdownMenuPrimitive.SubContent, Object.assign({ ref: ref, className: cn("z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground 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, { style: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, props.style) })));
 });
 DropdownMenuSubContent.displayName =
     DropdownMenuPrimitive.SubContent.displayName;
 const DropdownMenuContent = React.forwardRef((_a, ref) => {
     var { className, sideOffset = 4 } = _a, props = __rest(_a, ["className", "sideOffset"]);
-    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, Object.assign({ ref: ref, sideOffset: sideOffset, className: cn("z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground shadow-[0px_2px_24px_0px_rgba(145,_158,_171,_0.24)] 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)) }));
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, Object.assign({ ref: ref, sideOffset: sideOffset, className: cn("z-50 min-w-[154px] overflow-hidden rounded-md bg-base-popup text-base-popup-foreground 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, { style: Object.assign({ boxShadow: "var(--dropdown-menu-shadow)" }, props.style) })) }));
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 const DropdownMenuItem = React.forwardRef((_a, ref) => {

package/dist/components/Slider/Slider.js

@@ -15,8 +15,8 @@ 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" })] })));
+    var { className, trackClassName, rangeClassName, thumbClassName, thumbStyle, trackStyle, rangeStyle } = _a, props = __rest(_a, ["className", "trackClassName", "rangeClassName", "thumbClassName", "thumbStyle", "trackStyle", "rangeStyle"]);
+    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: cn("relative h-2 w-full grow overflow-hidden rounded-full bg-grey-50", trackClassName), style: trackStyle, children: _jsx(SliderPrimitive.Range, { className: cn("absolute h-full bg-primary", rangeClassName), style: rangeStyle }) }), _jsx(SliderPrimitive.Thumb, { className: cn("block h-5 w-5 cursor-pointer rounded-full border-[3px] border-primary bg-background outline-none ring-0 transition-colors disabled:pointer-events-none disabled:opacity-50", thumbClassName), style: thumbStyle })] })));
 });
 Slider.displayName = SliderPrimitive.Root.displayName;
 export { Slider };

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

@@ -1,4 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 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 = {
@@ -10,7 +11,7 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-background", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
@@ -31,3 +32,22 @@ export const Default = {
         return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Slider, Object.assign({ defaultValue: [50], max: 100, step: 1 }, props)) }));
     },
 };
+export const GradientColor = {
+    render: () => {
+        const [exposure, setExposure] = useState([50]);
+        const [empty, setEmpty] = useState([50]);
+        const [rainbow, setRainbow] = useState([50]);
+        const [darkRed, setDarkRed] = useState([50]);
+        return (_jsxs("div", { className: "w-[400px] p-6 space-y-8 rounded-md shadow-lg bg-surface", children: [_jsx(Slider, { value: exposure, onValueChange: setExposure, className: "bg-grey-transparent-24", trackClassName: "h-1 rounded-full bg-grey-transparent-24 bg-gradient-to-r from-black to-white", rangeClassName: "bg-unset", thumbClassName: "bg-white border border-white shadow", thumbStyle: {
+                        filter: "drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.12))",
+                    }, min: 0, max: 100, step: 1 }), _jsx(Slider, { value: empty, onValueChange: setEmpty, className: "bg-grey-transparent-24", trackClassName: "h-1 rounded-full bg-grey-transparent-24", rangeClassName: "bg-unset", thumbClassName: "bg-white border border-white shadow", thumbStyle: {
+                        filter: "drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.12))",
+                    }, min: 0, max: 100, step: 1 }), _jsx(Slider, { value: rainbow, onValueChange: setRainbow, className: "bg-grey-transparent-24", trackClassName: "h-1 rounded-full bg-grey-transparent-24", trackStyle: {
+                        backgroundImage: "linear-gradient(90deg, #F00 0%, #FF8502 11.54%, #F2FF05 23.08%, #06F90F 35.58%, #00E6FF 48.56%, #0404FF 61.54%, #AB02FF 74.52%, #FF069E 87.5%, #FF0408 100%)",
+                    }, rangeClassName: "bg-unset", thumbClassName: "bg-white border border-white shadow", thumbStyle: {
+                        filter: "drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.12))",
+                    }, min: 0, max: 100, step: 1 }), _jsx(Slider, { value: darkRed, onValueChange: setDarkRed, className: "bg-grey-transparent-24", trackClassName: "h-1 rounded-full bg-grey-transparent-24 bg-gradient-to-r from-[#848484] to-[#A00202]", rangeClassName: "bg-unset", thumbClassName: "bg-white border border-white shadow", thumbStyle: {
+                        filter: "drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.12))",
+                    }, min: 0, max: 100, step: 1 })] }));
+    },
+};

package/dist/esm/bundle.css

@@ -828,6 +828,9 @@ input[type=number] {
   width: 100%;
   height: 100%;
 }
+.h-1{
+  height: 0.25rem;
+}
 .h-1\/2{
   height: 50%;
 }
@@ -1166,6 +1169,11 @@ input[type=number] {
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
+.space-y-8 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
 .self-center{
   align-self: center;
 }
@@ -1472,6 +1480,10 @@ input[type=number] {
   --tw-border-opacity: 1;
   border-color: color-mix(in srgb, var(--state-color-warning-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
+.border-white{
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
+}
 .border-b-\[rgb\(var\(--navbar-border-color\)\)\]{
   border-bottom-color: rgb(var(--navbar-border-color));
 }
@@ -2713,6 +2725,25 @@ input[type=number] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--other-transparency-white-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
+.bg-gradient-to-r{
+  background-image: linear-gradient(to right, var(--tw-gradient-stops));
+}
+.from-\[\#848484\]{
+  --tw-gradient-from: #848484 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(132 132 132 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.from-black{
+  --tw-gradient-from: #000 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+.to-\[\#A00202\]{
+  --tw-gradient-to: #A00202 var(--tw-gradient-to-position);
+}
+.to-white{
+  --tw-gradient-to: #fff var(--tw-gradient-to-position);
+}
 .fill-action-button-icon-active{
   fill: color-mix(in srgb, var(--action-button-icon-active-text) calc(100% * 1), transparent);
 }
@@ -3517,11 +3548,6 @@ input[type=number] {
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.shadow-\[0px_2px_24px_0px_rgba\(145\2c _158\2c _171\2c _0\.24\)\]{
-  --tw-shadow: 0px 2px 24px 0px rgba(145, 158, 171, 0.24);
-  --tw-shadow-colored: 0px 2px 24px 0px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
 .shadow-lg{
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -3532,10 +3558,6 @@ input[type=number] {
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.shadow-\[var\(--dropdown-menu-shadow\)\]{
-  --tw-shadow-color: var(--dropdown-menu-shadow);
-  --tw-shadow: var(--tw-shadow-colored);
-}
 .outline-none{
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -3572,10 +3594,6 @@ input[type=number] {
   --tw-ring-opacity: 1;
   --tw-ring-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
-.ring-primary{
-  --tw-ring-opacity: 1;
-  --tw-ring-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-ring-opacity, 1)), transparent);
-}
 .ring-offset-background{
   --tw-ring-offset-color: color-mix(in srgb, var(--background) calc(100% * 1), transparent);
 }
@@ -3583,6 +3601,10 @@ input[type=number] {
   --tw-blur: blur(8px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.drop-shadow{
+  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .filter{
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }