@rovula/ui 0.0.71 → 0.0.73

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

@@ -298,3 +298,9 @@ export declare const Diabled: {
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const Horizontal: {
+    args: {
+        disabled: boolean;
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

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/cjs/types/index.d.ts

@@ -34,6 +34,7 @@ export * from "./components/Toast/Toaster";
 export * from "./components/Toast/useToast";
 export * from "./components/Tree";
 export * from "./components/FocusedScrollView/FocusedScrollView";
+export * from "./components/RadioGroup/RadioGroup";
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";

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

@@ -1,11 +1,11 @@
 import { cva } from "class-variance-authority";
 export const labelVariant = cva([
-    "block duration-450 transition-all px-[2px] text-input-text peer-focus:text-input-text-active",
+    "block cursor-pointer duration-450 transition-all px-[2px] text-foreground peer-focus:text-input-text-active",
 ], {
     variants: {
         size: {
             sm: "typography-small1",
-            md: "typography-subtitile4",
+            md: "typography-subtitile2",
             lg: "typography-subtitile1",
         },
         disabled: {

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

@@ -31,3 +31,12 @@ export const Diabled = {
         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" })] })] }) }));
     },
 };
+export const Horizontal = {
+    args: {
+        disabled: true,
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsxs(RadioGroup, { defaultValue: "option1", className: "flex flex-row space-x-4", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option1", id: "option1" }), _jsx(Label, { htmlFor: "option1", children: "Option 1" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option2", id: "option2" }), _jsx(Label, { htmlFor: "option2", children: "Option 2" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option3", id: "option3" }), _jsx(Label, { htmlFor: "option3", children: "Option 3" })] })] }));
+    },
+};

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/components/TextInput/TextInput.js

@@ -123,7 +123,7 @@ export const TextInput = forwardRef((_a, ref) => {
     ]);
     return (_jsxs("div", { className: `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, children: [_jsxs("div", { className: "relative", children: [hasSearchIcon && !hasLeftSectionIcon && (_jsx("div", { className: iconSearchWrapperClassname, children: _jsx(MagnifyingGlassIcon, { className: iconClassname }) })), _jsx("input", Object.assign({}, props, { placeholder: " ", ref: inputRef, type: type, id: _id, disabled: disabled, className: cn(inputClassname, props.className) })), startIconElement, hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: iconWrapperClassname, style: {
                             display: keepCloseIconOnValue && props.value ? "flex" : undefined,
-                        }, children: _jsx(XCircleIcon, { type: "button", className: iconClassname, onMouseDown: handleClearInput }) })), endIconElement, _jsxs("label", { htmlFor: _id, className: cn(labelClassname, labelClassName), children: [label, " ", required && (_jsx("span", { className: cn("text-error", {
+                        }, children: _jsx(XCircleIcon, { type: "button", className: iconClassname, onMouseDown: handleClearInput }) })), endIconElement, _jsxs("label", { htmlFor: _id, className: cn(labelClassname), children: [label, " ", required && (_jsx("span", { className: cn("text-error", {
                                     "text-input-disable-text": disabled,
                                 }), children: "*" }))] })] }), (errorMessage || helperText) && (_jsxs("span", { className: helperTextClassname, children: [_jsx("span", { className: "h-full", children: _jsx(ExclamationCircleIcon, { width: 16, height: 16, className: error ? "fill-error" : "" }) }), errorMessage || helperText] }))] }));
 });

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%;
 }
@@ -1156,6 +1159,11 @@ input[type=number] {
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
+.space-x-4 > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
 .space-y-2 > :not([hidden]) ~ :not([hidden]){
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
@@ -1166,6 +1174,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 +1485,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 +2730,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 +3599,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 +3606,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);
 }