@rovula/ui 0.0.71 → 0.0.72

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/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);
 }
@@ -3563,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);
 }
@@ -3574,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);
 }