@overmap-ai/blocks 1.0.35-alpha.0 → 1.0.35-slider.0

package/dist/Slider/Slider.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import * as RadixSlider from "@radix-ui/react-slider";
+import type { SliderVariantProps } from "./typings";
+export interface SliderRootProps extends RadixSlider.SliderProps, SliderVariantProps {
+}
+export declare const Slider: import("react").NamedExoticComponent<SliderRootProps>;

package/dist/Slider/cva.d.ts

@@ -0,0 +1,19 @@
+export declare const sliderRootCva: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    variant?: "soft" | "surface" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const sliderTrackCva: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    variant?: "soft" | "surface" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const sliderRangeCva: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    variant?: "soft" | "surface" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const sliderThumbCva: (props?: ({
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    variant?: "soft" | "surface" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/Slider/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Slider";
+export * from "./typings";

package/dist/Slider/typings.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentRadius } from "../Provider";
+import type { AccentColorProps } from "../typings";
+export type SliderSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type SliderOrientation = "horizontal" | "vertical";
+export type SliderVariant = "surface" | "soft";
+export interface SliderVariantProps extends AccentColorProps {
+    size?: SliderSize;
+    orientation?: SliderOrientation;
+    radius?: ComponentRadius;
+    variant?: SliderVariant;
+}

package/dist/blocks.js

@@ -25,6 +25,7 @@ import * as RadixPopover from "@radix-ui/react-popover";
 import * as RadixRadioGroup from "@radix-ui/react-radio-group";
 import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
 import * as RadixTabs from "@radix-ui/react-tabs";
+import * as RadixSlider from "@radix-ui/react-slider";
 import * as RadixSwitch from "@radix-ui/react-switch";
 import * as RadixToast from "@radix-ui/react-toast";
 import { ToastProvider as ToastProvider$1, ToastViewport } from "@radix-ui/react-toast";
@@ -1191,11 +1192,11 @@ const commandMenuItemCva = cva(
   {
     variants: {
       size: {
-        xs: ["h-10", "gap-3.5", "px-5.25", "after:inset-x-1.75"],
-        sm: ["h-11", "gap-4", "px-6", "after:inset-x-2"],
-        md: ["h-12", "gap-4.5", "px-6.75", "after:inset-x-2.25"],
-        lg: ["h-13", "gap-5", "px-7.5", "after:inset-x-2.5"],
-        xl: ["h-14", "gap-5.5", "px-8.25", "after:inset-x-2.75"]
+        xs: ["py-2.5", "gap-3.5", "px-5.25", "after:inset-x-1.75"],
+        sm: ["py-2.5", "gap-4", "px-6", "after:inset-x-2"],
+        md: ["py-3", "gap-4.5", "px-6.75", "after:inset-x-2.25"],
+        lg: ["py-3", "gap-5", "px-7.5", "after:inset-x-2.5"],
+        xl: ["py-3.25", "gap-5.5", "px-8.25", "after:inset-x-2.75"]
       },
       variant: {
         solid: [
@@ -1248,31 +1249,31 @@ const commandMenuGroupCva = cva(
       size: {
         xs: [
           "[&_[cmdk-group-heading]]:px-2.5",
-          "[&_[cmdk-group-heading]]:h-6",
+          "[&_[cmdk-group-heading]]:py-1",
           "[&_[cmdk-group-heading]]:text-xs",
           "[&_[cmdk-group-heading]]:gap-2.5"
         ],
         sm: [
           "[&_[cmdk-group-heading]]:px-2.75",
-          "[&_[cmdk-group-heading]]:h-6.5",
+          "[&_[cmdk-group-heading]]:py-1",
           "[&_[cmdk-group-heading]]:text-sm",
           "[&_[cmdk-group-heading]]:gap-2.75"
         ],
         md: [
           "[&_[cmdk-group-heading]]:px-3",
-          "[&_[cmdk-group-heading]]:h-7",
+          "[&_[cmdk-group-heading]]:py-1.25",
           "[&_[cmdk-group-heading]]:text-sm",
           "[&_[cmdk-group-heading]]:gap-3"
         ],
         lg: [
           "[&_[cmdk-group-heading]]:px-3.25",
-          "[&_[cmdk-group-heading]]:h-7.5",
+          "[&_[cmdk-group-heading]]:py-1.25",
           "[&_[cmdk-group-heading]]:text-base",
           "[&_[cmdk-group-heading]]:gap-3.25"
         ],
         xl: [
           "[&_[cmdk-group-heading]]:px-3.5",
-          "[&_[cmdk-group-heading]]:h-8",
+          "[&_[cmdk-group-heading]]:py-1.25",
           "[&_[cmdk-group-heading]]:text-base",
           "[&_[cmdk-group-heading]]:gap-3.5"
         ]
@@ -2704,11 +2705,11 @@ const menuItem = cva(
   {
     variants: {
       size: {
-        xs: ["h-5", "gap-1.5", "px-1.5"],
-        sm: ["h-6", "gap-2.25", "px-2.25"],
-        md: ["h-7", "gap-3", "px-3"],
-        lg: ["h-8", "gap-3.75", "px-3.75"],
-        xl: ["h-9", "gap-4.5", "px-4.5"]
+        xs: ["py-0.5", "gap-1.5", "px-1.5"],
+        sm: ["py-0.5", "gap-2.25", "px-2.25"],
+        md: ["py-0.5", "gap-3", "px-3"],
+        lg: ["py-0.5", "gap-3.75", "px-3.75"],
+        xl: ["py-0.5", "gap-4.5", "px-4.5"]
       },
       variant: {
         solid: [
@@ -4377,6 +4378,199 @@ const Separator = forwardRef((props, ref) => {
   );
 });
 Separator.displayName = "Separator";
+const sliderRootCva = cva(["relative", "select-none", "touch-none", "flex", "items-center"], {
+  variants: {
+    size: {
+      xs: [],
+      sm: [],
+      md: [],
+      lg: [],
+      xl: []
+    },
+    variant: {
+      surface: [],
+      soft: []
+    },
+    orientation: {
+      horizontal: ["flex-row"],
+      vertical: ["flex-col"]
+    }
+  },
+  compoundVariants: [
+    // horizontal
+    {
+      orientation: "horizontal",
+      size: "xs",
+      className: ["h-1.5"]
+    },
+    {
+      orientation: "horizontal",
+      size: "sm",
+      className: ["h-2"]
+    },
+    {
+      orientation: "horizontal",
+      size: "md",
+      className: ["h-2.5"]
+    },
+    {
+      orientation: "horizontal",
+      size: "lg",
+      className: ["h-3"]
+    },
+    {
+      orientation: "horizontal",
+      size: "xl",
+      className: ["h-3.5"]
+    },
+    // vertical
+    {
+      orientation: "vertical",
+      size: "xs",
+      className: ["w-1.5"]
+    },
+    {
+      orientation: "vertical",
+      size: "sm",
+      className: ["w-2"]
+    },
+    {
+      orientation: "vertical",
+      size: "md",
+      className: ["w-2.5"]
+    },
+    {
+      orientation: "vertical",
+      size: "lg",
+      className: ["w-3"]
+    },
+    {
+      orientation: "vertical",
+      size: "xl",
+      className: ["w-3.5"]
+    }
+  ]
+});
+const sliderTrackCva = cva(
+  [
+    "overflow-hidden",
+    "relative",
+    "grow",
+    "rounded-[inherit]",
+    "select-none",
+    "data-disabled:opacity-50",
+    "disabled:pointer-events-none"
+  ],
+  {
+    variants: {
+      size: {
+        xs: [],
+        sm: [],
+        md: [],
+        lg: [],
+        xl: []
+      },
+      variant: {
+        surface: ["bg-(--base-a3)", "inset-ring", "inset-ring-(--base-a5)"],
+        soft: ["bg-(--base-a4)"]
+      },
+      orientation: {
+        horizontal: ["h-full"],
+        vertical: ["w-full"]
+      }
+    }
+  }
+);
+const sliderRangeCva = cva(
+  ["absolute", "rounded-[inherit]", "data-disabled:opacity-50", "disabled:pointer-events-none"],
+  {
+    variants: {
+      size: {
+        xs: [],
+        sm: [],
+        md: [],
+        lg: [],
+        xl: []
+      },
+      variant: {
+        surface: ["inset-ring", "inset-ring-(--base-a5)", "bg-(--accent-track)"],
+        soft: ["bg-(--accent-8)"]
+      },
+      orientation: {
+        horizontal: ["h-full"],
+        vertical: ["w-full"]
+      }
+    }
+  }
+);
+const sliderThumbCva = cva(
+  [
+    "block",
+    "shrink-0",
+    "bg-(--accent-contrast)",
+    "inset-ring",
+    "inset-ring-(--base-a6)",
+    "disabled:pointer-events-none",
+    "dark:data-disabled:brightness-50",
+    "focus:outline-none",
+    "focus-visible:outline-2",
+    "focus-visible:outline-offset-1",
+    "focus-visible:outline-(--accent-8)"
+  ],
+  {
+    variants: {
+      size: {
+        xs: ["size-4"],
+        sm: ["size-5"],
+        md: ["size-6"],
+        lg: ["size-7"],
+        xl: ["size-8"]
+      },
+      variant: {
+        surface: [],
+        soft: []
+      }
+    }
+  }
+);
+const Slider = memo((props) => {
+  const providerContext = useProvider();
+  const {
+    className,
+    size: size2 = "md",
+    orientation = "horizontal",
+    accentColor = providerContext.accentColor,
+    radius = providerContext.radius,
+    variant = "surface",
+    tabIndex,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    RadixSlider.Root,
+    {
+      className: cx(
+        className,
+        sliderRootCva({ size: size2, variant, orientation }),
+        radiusCva({ radius, maxLarge: false })
+      ),
+      orientation,
+      "data-accent-color": accentColor,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(RadixSlider.Track, { className: sliderTrackCva({ size: size2, variant, orientation }), children: /* @__PURE__ */ jsx(RadixSlider.Range, { className: sliderRangeCva({ size: size2, variant, orientation }) }) }),
+        (props.value ?? rest.defaultValue ?? []).map((value, index) => /* @__PURE__ */ jsx(
+          RadixSlider.Thumb,
+          {
+            className: cx(sliderThumbCva({ size: size2, variant }), radiusCva({ radius, maxLarge: false })),
+            ...tabIndex !== void 0 ? { tabIndex } : void 0
+          },
+          `${index}-${value}`
+        ))
+      ]
+    }
+  );
+});
+Slider.displayName = "Slider";
 const Spinner = memo(() => {
   return /* @__PURE__ */ jsx("div", { className: "size-5 animate-spin rounded-full border-2 border-(--base-a12) border-b-transparent" });
 });
@@ -5303,6 +5497,7 @@ export {
   SelectedIndicatorContext,
   Separator,
   SlideOut,
+  Slider,
   Spinner,
   Switch,
   SwitchRoot,