@ultraviolet/ui 3.0.0-beta.8 → 3.0.0

package/dist/components/Slider/index.js

@@ -1,10 +1,11 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
+import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
 import { DoubleSlider } from "./components/DoubleSlider.js";
 import { SingleSlider } from "./components/SingleSlider.js";
-import { SliderContainer } from "./styles.js";
+import { sliderContainer } from "./styles.css.js";
 const Slider = ({
   name,
   label,
@@ -31,15 +32,10 @@ const Slider = ({
   onFocus,
   className,
   tooltipPosition = "top",
+  style,
   "aria-label": ariaLabel
 }) => {
-  const correctedBounds = options ? {
-    max: Array.isArray(options) ? options.length - 1 : max,
-    min: 0
-  } : {
-    max,
-    min
-  };
+  const correctedBounds = options ? { max: Array.isArray(options) ? options.length - 1 : max, min: 0 } : { max, min };
   const gap = useMemo(() => {
     if (options) {
       return 3;
@@ -49,10 +45,86 @@ const Slider = ({
     }
     return 1;
   }, [options, input, double, helper]);
-  return /* @__PURE__ */ jsxs(SliderContainer, { "aria-label": ariaLabel, "data-double": double, "data-options": !!options, gap, children: [
-    double ? /* @__PURE__ */ jsx(DoubleSlider, { "aria-label": ariaLabel, className, "data-testid": dataTestId, direction, disabled, error, id, input, label, max: correctedBounds.max, min: correctedBounds.min, name, onBlur, onChange, onFocus, options, prefix, required, step, suffix, tooltip, tooltipPosition, unit, value }) : /* @__PURE__ */ jsx(SingleSlider, { "aria-label": ariaLabel, className, "data-testid": dataTestId, direction, disabled, error, id, input, label, max: correctedBounds.max, min: correctedBounds.min, name, onBlur, onChange, onFocus, options, prefix, required, step, suffix, tooltip, tooltipPosition, unit, value }),
-    error || helper ? /* @__PURE__ */ jsx(Text, { as: "p", prominence: "weak", sentiment: error ? "danger" : "neutral", variant: "caption", children: typeof error === "string" ? error : helper }) : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      "aria-label": ariaLabel,
+      className: double && !!options ? sliderContainer : "",
+      "data-double": double,
+      "data-options": !!options,
+      gap,
+      style,
+      children: [
+        double ? /* @__PURE__ */ jsx(
+          DoubleSlider,
+          {
+            "aria-label": ariaLabel,
+            className,
+            "data-testid": dataTestId,
+            direction,
+            disabled,
+            error,
+            id,
+            input,
+            label,
+            max: correctedBounds.max,
+            min: correctedBounds.min,
+            name,
+            onBlur,
+            onChange,
+            onFocus,
+            options,
+            prefix,
+            required,
+            step,
+            suffix,
+            tooltip,
+            tooltipPosition,
+            unit,
+            value
+          }
+        ) : /* @__PURE__ */ jsx(
+          SingleSlider,
+          {
+            "aria-label": ariaLabel,
+            className,
+            "data-testid": dataTestId,
+            direction,
+            disabled,
+            error,
+            id,
+            input,
+            label,
+            max: correctedBounds.max,
+            min: correctedBounds.min,
+            name,
+            onBlur,
+            onChange,
+            onFocus,
+            options,
+            prefix,
+            required,
+            step,
+            suffix,
+            tooltip,
+            tooltipPosition,
+            unit,
+            value
+          }
+        ),
+        error || helper ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: "p",
+            prominence: "weak",
+            sentiment: error ? "danger" : "neutral",
+            variant: "caption",
+            children: typeof error === "string" ? error : helper
+          }
+        ) : null
+      ]
+    }
+  );
 };
 export {
   Slider

package/dist/components/Slider/styles.css.d.ts

@@ -0,0 +1,171 @@
+export declare const tooltipLeft: `var(--${string})`;
+export declare const thumbColor: `var(--${string})`;
+export declare const leftVar: `var(--${string})`;
+export declare const leftOption: `var(--${string})`;
+export declare const sliderContainer: string;
+export declare const sliderTooltip: string;
+export declare const sliderDatalist: import("@vanilla-extract/recipes").RuntimeFn<{
+    double: {
+        true: {
+            marginTop: `var(--${string})`;
+        };
+    };
+}>;
+export declare const sliderOption: import("@vanilla-extract/recipes").RuntimeFn<{
+    left: {
+        true: {
+            transform: "none";
+        };
+    };
+    right: {
+        true: {
+            transform: "translateX(-100%)";
+        };
+    };
+}>;
+export declare const sliderThumbStyle: import("@vanilla-extract/recipes").RuntimeFn<{
+    disabled: {
+        true: {
+            selectors: {
+                '&::-moz-range-thumb': {
+                    cursor: "not-allowed";
+                };
+                '&::-webkit-slider-thumb': {
+                    cursor: "not-allowed";
+                };
+            };
+        };
+        false: {
+            selectors: {
+                '&::-webkit-slider-thumb': {
+                    cursor: "grab";
+                };
+                '&::-moz-range-thumb': {
+                    cursor: "grab";
+                };
+                '&:hover::-moz-range-thumb': {
+                    border: `1.5px solid var(--${string})`;
+                };
+                '&:hover::-webkit-slider-thumb': {
+                    border: `1.5px solid var(--${string})`;
+                };
+                '&:active::-moz-range-thumb': {
+                    cursor: "grabbing";
+                    boxShadow: `var(--${string})`;
+                    border: `1.5px solid var(--${string})`;
+                };
+                '&:active::-webkit-slider-thumb': {
+                    cursor: "grabbing";
+                    boxShadow: `var(--${string})`;
+                    border: `1.5px solid var(--${string})`;
+                };
+            };
+        };
+    };
+    isDouble: {
+        true: {
+            selectors: {
+                '&::-webkit-slider-thumb': {
+                    top: "2px";
+                };
+            };
+        };
+        false: {
+            selectors: {
+                '&::-moz-range-thumb': {
+                    top: "-4px";
+                };
+                '&::-webkit-slider-thumb': {
+                    top: "-4px";
+                };
+            };
+        };
+    };
+    hasTooltipDouble: {
+        false: {
+            selectors: {
+                '&::-webkit-slider-thumb': {
+                    top: "-8px";
+                };
+            };
+        };
+    };
+}>;
+export declare const sliderDoubleText: import("@vanilla-extract/recipes").RuntimeFn<{
+    isPadded: {
+        true: {
+            minWidth: `var(--${string})`;
+        };
+    };
+    isDouble: {
+        true: {
+            alignSelf: "center";
+        };
+        false: {
+            alignSelf: "end";
+        };
+    };
+}>;
+export declare const sliderDouble: import("@vanilla-extract/recipes").RuntimeFn<{
+    disabled: {
+        true: {};
+        false: {
+            selectors: {
+                '&:focus::-moz-slider-thumb, &:focus::-webkit-slider-thumb': {
+                    border: `1.5px solid var(--${string})`;
+                    boxShadow: `var(--${string})`;
+                };
+            };
+        };
+    };
+    hasTooltip: {
+        true: {
+            transform: "translate(0, -10px)";
+        };
+    };
+}>;
+export declare const sliderSingle: import("@vanilla-extract/recipes").RuntimeFn<{
+    disabled: {
+        false: {
+            selectors: {
+                '&:focus::-moz-range-thumb': {
+                    border: `1px solid var(--${string})`;
+                    boxShadow: `var(--${string})`;
+                };
+                '&:focus::-webkit-slider-thumb': {
+                    border: `1px solid var(--${string})`;
+                    boxShadow: `var(--${string})`;
+                };
+            };
+        };
+        true: {
+            backgroundImage: `linear-gradient(var(--${string}), var(--${string}))`;
+        };
+    };
+    error: {
+        true: {
+            backgroundImage: `linear-gradient(var(--${string}), var(--${string}))`;
+        };
+    };
+    direction: {
+        column: {
+            alignSelf: "baseline";
+        };
+        row: {};
+    };
+}>;
+export declare const sliderDoubleWrapper: string;
+export declare const sliderCustomRail: string;
+export declare const sliderInnerRail: import("@vanilla-extract/recipes").RuntimeFn<{
+    error: {
+        true: {
+            backgroundColor: `var(--${string})`;
+        };
+    };
+    disabled: {
+        true: {
+            backgroundColor: `var(--${string})`;
+        };
+    };
+}>;
+export declare const sliderNumberInput: string;

package/dist/components/Slider/styles.css.js

@@ -0,0 +1,36 @@
+/* empty css                          */
+import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+var tooltipLeft = "var(--uv_a5ifr10)";
+var thumbColor = "var(--uv_a5ifr11)";
+var leftVar = "var(--uv_a5ifr12)";
+var leftOption = "var(--uv_a5ifr13)";
+var sliderContainer = "uv_a5ifr14";
+var sliderTooltip = "uv_a5ifr15";
+var sliderDatalist = createRuntimeFn({ defaultClassName: "uv_a5ifr16", variantClassNames: { "double": { true: "uv_a5ifr17" } }, defaultVariants: {}, compoundVariants: [] });
+var sliderOption = createRuntimeFn({ defaultClassName: "uv_a5ifr18", variantClassNames: { left: { true: "uv_a5ifr19" }, right: { true: "uv_a5ifr1a" } }, defaultVariants: {}, compoundVariants: [] });
+var sliderThumbStyle = createRuntimeFn({ defaultClassName: "uv_a5ifr1b", variantClassNames: { disabled: { true: "uv_a5ifr1c", false: "uv_a5ifr1d" }, isDouble: { true: "uv_a5ifr1e", false: "uv_a5ifr1f" }, hasTooltipDouble: { false: "uv_a5ifr1g" } }, defaultVariants: { disabled: false, isDouble: false, hasTooltipDouble: true }, compoundVariants: [] });
+var sliderDoubleText = createRuntimeFn({ defaultClassName: "uv_a5ifr1h", variantClassNames: { isPadded: { true: "uv_a5ifr1i" }, isDouble: { true: "uv_a5ifr1j", false: "uv_a5ifr1k" } }, defaultVariants: {}, compoundVariants: [] });
+var sliderDouble = createRuntimeFn({ defaultClassName: "uv_a5ifr1l", variantClassNames: { disabled: { true: "uv_a5ifr1m", false: "uv_a5ifr1n" }, hasTooltip: { true: "uv_a5ifr1o" } }, defaultVariants: { disabled: false, hasTooltip: false }, compoundVariants: [] });
+var sliderSingle = createRuntimeFn({ defaultClassName: "uv_a5ifr1p", variantClassNames: { disabled: { false: "uv_a5ifr1q", true: "uv_a5ifr1r" }, error: { true: "uv_a5ifr1s" }, direction: { column: "uv_a5ifr1t", row: "uv_a5ifr1u" } }, defaultVariants: {}, compoundVariants: [] });
+var sliderDoubleWrapper = "uv_a5ifr1v";
+var sliderCustomRail = "uv_a5ifr1w";
+var sliderInnerRail = createRuntimeFn({ defaultClassName: "uv_a5ifr1x", variantClassNames: { error: { true: "uv_a5ifr1y" }, disabled: { true: "uv_a5ifr1z" } }, defaultVariants: { error: false, disabled: false }, compoundVariants: [] });
+var sliderNumberInput = "uv_a5ifr110";
+export {
+  leftOption,
+  leftVar,
+  sliderContainer,
+  sliderCustomRail,
+  sliderDatalist,
+  sliderDouble,
+  sliderDoubleText,
+  sliderDoubleWrapper,
+  sliderInnerRail,
+  sliderNumberInput,
+  sliderOption,
+  sliderSingle,
+  sliderThumbStyle,
+  sliderTooltip,
+  thumbColor,
+  tooltipLeft
+};

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

@@ -55,7 +55,7 @@ type DefaultProps = {
         label?: string;
     }[];
     'data-testid'?: string;
-} & Pick<HTMLAttributes<HTMLInputElement>, 'id' | 'onBlur' | 'onFocus' | 'aria-label' | 'className'>;
+} & Pick<HTMLAttributes<HTMLInputElement>, 'id' | 'onBlur' | 'onFocus' | 'aria-label' | 'className' | 'style'>;
 type SingleProps = {
     /**
      * Slider value

package/dist/components/Snippet/index.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, CSSProperties } from 'react';
 import { CopyButton } from '../CopyButton';
 type Prefixes = 'lines' | 'command';
 type SnippetProps = {
@@ -17,10 +17,11 @@ type SnippetProps = {
     rows?: number;
     noExpandable?: boolean;
     onCopy?: () => void;
+    style?: CSSProperties;
 } & Pick<ComponentProps<typeof CopyButton>, 'copyText' | 'copiedText'>;
 /**
  * Snippet component is used to display code snippets with the ability to copy the code.
  * It also has the ability to show/hide the code snippet if it has more than 4 lines.
  */
-export declare const Snippet: ({ children, copyText, copiedText, showText, hideText, prefix, className, "data-testid": dataTestId, initiallyExpanded, rows, noExpandable, onCopy, }: SnippetProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Snippet: ({ children, copyText, copiedText, showText, hideText, prefix, className, "data-testid": dataTestId, initiallyExpanded, rows, noExpandable, onCopy, style, }: SnippetProps) => import("react/jsx-runtime").JSX.Element;
 export {};