@work-rjkashyap/unified-ui 0.3.4 → 0.3.6

package/dist/components/skeleton.mjs

@@ -0,0 +1,182 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../utils/cn.mjs";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+const skeletonVariants = cva(
+  // Base styles — shared across all shapes
+  [
+    // Background
+    "bg-muted",
+    // Animation — gentle pulse
+    "animate-pulse",
+    // Ensure it doesn't collapse
+    "shrink-0"
+  ],
+  {
+    variants: {
+      // -----------------------------------------------------------------
+      // Shape Variants
+      // -----------------------------------------------------------------
+      shape: {
+        /**
+         * Text — a horizontal line placeholder for text content.
+         * Default height matches body text line-height.
+         * Rounded for a softer appearance.
+         */
+        text: "h-4 w-full rounded-sm",
+        /**
+         * Circle — a circular placeholder for avatars, icons.
+         * Uses border-radius: 9999px (full circle).
+         */
+        circle: "rounded-full aspect-square",
+        /**
+         * Rect — a rectangular placeholder for images, cards, media.
+         * Uses standard border-radius.
+         */
+        rect: "rounded-md"
+      }
+    },
+    defaultVariants: {
+      shape: "text"
+    }
+  }
+);
+const circleSizeMap = {
+  xs: "size-6",
+  sm: "size-8",
+  md: "size-10",
+  lg: "size-12",
+  xl: "size-16"
+};
+const textHeightMap = {
+  xs: "h-3",
+  sm: "h-3.5",
+  md: "h-4",
+  lg: "h-5"
+};
+function resolveDimension(value) {
+  if (value === void 0) return void 0;
+  if (typeof value === "number") return `${value}px`;
+  return value;
+}
+const Skeleton = forwardRef(
+  function Skeleton2({
+    shape = "text",
+    width,
+    height,
+    size = "md",
+    textSize = "md",
+    animate = true,
+    className,
+    style,
+    ...rest
+  }, ref) {
+    const dimensionStyles = {
+      ...style,
+      width: resolveDimension(width),
+      height: resolveDimension(height)
+    };
+    if (dimensionStyles.width === void 0) delete dimensionStyles.width;
+    if (dimensionStyles.height === void 0) delete dimensionStyles.height;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "presentation",
+        "aria-hidden": "true",
+        className: cn(
+          skeletonVariants({ shape }),
+          // Circle: apply size class
+          shape === "circle" && !width && !height && circleSizeMap[size],
+          // Text: apply text height class (unless custom height provided)
+          shape === "text" && !height && textHeightMap[textSize],
+          // Disable animation
+          !animate && "animate-none",
+          className
+        ),
+        style: Object.keys(dimensionStyles).length > 0 ? dimensionStyles : void 0,
+        "data-ds": "",
+        "data-ds-component": "skeleton",
+        "data-ds-shape": shape,
+        ...rest
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+const SkeletonText = forwardRef(
+  function SkeletonText2({
+    lines = 3,
+    textSize = "md",
+    lastLineWidth = "60%",
+    gap = "gap-2.5",
+    animate = true,
+    className,
+    ...rest
+  }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "presentation",
+        "aria-hidden": "true",
+        className: cn("flex flex-col w-full", gap, className),
+        "data-ds": "",
+        "data-ds-component": "skeleton-text",
+        ...rest,
+        children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            shape: "text",
+            textSize,
+            width: i === lines - 1 && lines > 1 ? lastLineWidth : void 0,
+            animate
+          },
+          i
+        ))
+      }
+    );
+  }
+);
+SkeletonText.displayName = "SkeletonText";
+const SkeletonCircle = forwardRef(
+  function SkeletonCircle2({ size = "md", animate = true, className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        ref,
+        shape: "circle",
+        size,
+        animate,
+        className,
+        ...rest
+      }
+    );
+  }
+);
+SkeletonCircle.displayName = "SkeletonCircle";
+const SkeletonRect = forwardRef(
+  function SkeletonRect2({ width = "100%", height = 120, animate = true, className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        ref,
+        shape: "rect",
+        width,
+        height,
+        animate,
+        className,
+        ...rest
+      }
+    );
+  }
+);
+SkeletonRect.displayName = "SkeletonRect";
+export {
+  Skeleton,
+  SkeletonCircle,
+  SkeletonRect,
+  SkeletonText,
+  skeletonVariants
+};

package/dist/components/slider.cjs

@@ -0,0 +1,319 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var slider_exports = {};
+__export(slider_exports, {
+  Slider: () => Slider,
+  sliderRangeVariants: () => sliderRangeVariants,
+  sliderThumbVariants: () => sliderThumbVariants,
+  sliderTrackVariants: () => sliderTrackVariants
+});
+module.exports = __toCommonJS(slider_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_motion = require("../motion/index.cjs");
+var import_cn = require("../utils/cn.cjs");
+var import_focus_ring = require("../utils/focus-ring.cjs");
+var import_class_variance_authority = require("class-variance-authority");
+var import_framer_motion = require("framer-motion");
+var import_radix_ui = require("radix-ui");
+var import_react = require("react");
+const sliderTrackVariants = (0, import_class_variance_authority.cva)(
+  [
+    "relative flex touch-none select-none",
+    "rounded-full",
+    "bg-muted",
+    "overflow-hidden"
+  ],
+  {
+    variants: {
+      orientation: {
+        horizontal: "w-full items-center",
+        vertical: "h-full flex-col justify-center"
+      },
+      size: {
+        sm: "",
+        md: "",
+        lg: ""
+      }
+    },
+    compoundVariants: [
+      { orientation: "horizontal", size: "sm", className: "h-1" },
+      { orientation: "horizontal", size: "md", className: "h-1.5" },
+      { orientation: "horizontal", size: "lg", className: "h-2" },
+      { orientation: "vertical", size: "sm", className: "w-1" },
+      { orientation: "vertical", size: "md", className: "w-1.5" },
+      { orientation: "vertical", size: "lg", className: "w-2" }
+    ],
+    defaultVariants: {
+      orientation: "horizontal",
+      size: "md"
+    }
+  }
+);
+const sliderRangeVariants = (0, import_class_variance_authority.cva)(["absolute rounded-full"], {
+  variants: {
+    variant: {
+      default: "bg-primary",
+      primary: "bg-primary",
+      success: "bg-success",
+      danger: "bg-danger"
+    },
+    orientation: {
+      horizontal: "h-full",
+      vertical: "w-full"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    orientation: "horizontal"
+  }
+});
+const sliderThumbVariants = (0, import_class_variance_authority.cva)(
+  [
+    "block rounded-full",
+    "bg-background border-2",
+    "shadow-md",
+    "transition-colors duration-fast",
+    import_focus_ring.focusRingClasses,
+    "disabled:pointer-events-none disabled:opacity-50",
+    "cursor-grab active:cursor-grabbing"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "border-primary",
+        primary: "border-primary",
+        success: "border-success",
+        danger: "border-danger"
+      },
+      size: {
+        sm: "size-3",
+        md: "size-4",
+        lg: "size-5"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+function SliderTooltip({
+  value,
+  visible,
+  format
+}) {
+  const shouldReduce = (0, import_framer_motion.useReducedMotion)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: visible && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_framer_motion.motion.div,
+    {
+      className: (0, import_cn.cn)(
+        "absolute -top-8 left-1/2 -translate-x-1/2",
+        "px-2 py-0.5 rounded-md",
+        "bg-foreground text-background",
+        "text-xs font-medium whitespace-nowrap",
+        "pointer-events-none select-none",
+        "z-tooltip"
+      ),
+      variants: import_motion.fadeInFast.variants,
+      initial: shouldReduce ? false : "initial",
+      animate: "animate",
+      exit: "exit",
+      transition: import_motion.fadeInFast.transition,
+      "data-ds-animated": "",
+      children: [
+        format(value),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: "absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-foreground",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  ) });
+}
+const MotionThumb = import_framer_motion.motion.create(import_radix_ui.Slider.Thumb);
+function SliderThumbItem({
+  variant = "default",
+  size = "md",
+  value,
+  showTooltip = false,
+  formatTooltip,
+  shouldReduce
+}) {
+  const [isActive, setIsActive] = (0, import_react.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    MotionThumb,
+    {
+      className: (0, import_cn.cn)(
+        "relative overflow-visible",
+        sliderThumbVariants({ variant, size })
+      ),
+      onMouseEnter: () => setIsActive(true),
+      onMouseLeave: () => setIsActive(false),
+      onFocus: () => setIsActive(true),
+      onBlur: () => setIsActive(false),
+      whileTap: shouldReduce ? void 0 : {
+        scale: 1.2,
+        transition: { type: "spring", stiffness: 400, damping: 25 }
+      },
+      whileHover: shouldReduce ? void 0 : {
+        scale: 1.1,
+        transition: { type: "spring", stiffness: 400, damping: 30 }
+      },
+      "data-ds-animated": "",
+      children: showTooltip && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        SliderTooltip,
+        {
+          value,
+          visible: isActive,
+          format: formatTooltip
+        }
+      )
+    }
+  );
+}
+const Slider = (0, import_react.forwardRef)(function Slider2({
+  variant = "default",
+  size = "md",
+  orientation = "horizontal",
+  showMarks = false,
+  marks,
+  showTooltip = false,
+  formatTooltip = (v) => String(v),
+  className,
+  value,
+  defaultValue,
+  min = 0,
+  max = 100,
+  step = 1,
+  onValueChange,
+  ...rest
+}, ref) {
+  const shouldReduce = (0, import_framer_motion.useReducedMotion)();
+  const [internalValue, setInternalValue] = (0, import_react.useState)(
+    value ?? defaultValue ?? [min]
+  );
+  const handleValueChange = (0, import_react.useCallback)(
+    (newValue) => {
+      setInternalValue(newValue);
+      onValueChange?.(newValue);
+    },
+    [onValueChange]
+  );
+  const currentValue = value ?? internalValue;
+  const resolvedMarks = marks ?? (showMarks && step ? Array.from({ length: Math.floor((max - min) / step) + 1 }, (_, i) => ({
+    value: min + i * step
+  })) : []);
+  const isVertical = orientation === "vertical";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_radix_ui.Slider.Root,
+    {
+      ref,
+      className: (0, import_cn.cn)(
+        "relative flex touch-none select-none items-center",
+        isVertical ? "flex-col h-full w-fit" : "w-full h-fit",
+        className
+      ),
+      orientation,
+      min,
+      max,
+      step,
+      value,
+      defaultValue,
+      onValueChange: handleValueChange,
+      "data-ds": "",
+      "data-ds-component": "slider",
+      "data-ds-variant": variant,
+      "data-ds-size": size,
+      "data-ds-orientation": orientation,
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_radix_ui.Slider.Track,
+          {
+            className: (0, import_cn.cn)(sliderTrackVariants({ orientation, size })),
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_radix_ui.Slider.Range,
+              {
+                className: (0, import_cn.cn)(sliderRangeVariants({ variant, orientation }))
+              }
+            )
+          }
+        ),
+        resolvedMarks.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: (0, import_cn.cn)(
+              "absolute",
+              isVertical ? "left-1/2 -translate-x-1/2 h-full flex-col" : "top-1/2 -translate-y-1/2 w-full",
+              "flex items-center justify-between pointer-events-none"
+            ),
+            "aria-hidden": "true",
+            children: resolvedMarks.map((mark) => {
+              const pct = (mark.value - min) / (max - min) * 100;
+              return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  className: "absolute flex flex-col items-center",
+                  style: isVertical ? { bottom: `${pct}%` } : { left: `${pct}%`, transform: "translateX(-50%)" },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "div",
+                      {
+                        className: (0, import_cn.cn)(
+                          "rounded-full bg-border",
+                          size === "sm" ? "size-1" : size === "md" ? "size-1.5" : "size-2"
+                        )
+                      }
+                    ),
+                    mark.label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "mt-2 text-xs text-muted-foreground", children: mark.label })
+                  ]
+                },
+                mark.value
+              );
+            })
+          }
+        ),
+        currentValue.map((thumbValue, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          SliderThumbItem,
+          {
+            variant,
+            size,
+            value: thumbValue,
+            showTooltip,
+            formatTooltip,
+            shouldReduce: shouldReduce ?? false
+          },
+          index
+        ))
+      ]
+    }
+  );
+});
+Slider.displayName = "Slider";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Slider,
+  sliderRangeVariants,
+  sliderThumbVariants,
+  sliderTrackVariants
+});

package/dist/components/slider.d.cts

@@ -0,0 +1,82 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { Slider as Slider$1 } from 'radix-ui';
+
+declare const sliderTrackVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const sliderRangeVariants: (props?: ({
+    variant?: "success" | "danger" | "default" | "primary" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const sliderThumbVariants: (props?: ({
+    variant?: "success" | "danger" | "default" | "primary" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SliderVariant = "default" | "primary" | "success" | "danger";
+type SliderSize = "sm" | "md" | "lg";
+type SliderOrientation = "horizontal" | "vertical";
+interface SliderMark {
+    value: number;
+    label?: ReactNode;
+}
+interface SliderProps extends Omit<ComponentPropsWithoutRef<typeof Slider$1.Root>, "orientation"> {
+    /**
+     * Visual variant of the slider range and thumb.
+     * @default "default"
+     */
+    variant?: SliderVariant;
+    /**
+     * Size of the slider track and thumb.
+     * @default "md"
+     */
+    size?: SliderSize;
+    /**
+     * Orientation of the slider.
+     * @default "horizontal"
+     */
+    orientation?: SliderOrientation;
+    /**
+     * Whether to show step marks along the track.
+     * @default false
+     */
+    showMarks?: boolean;
+    /**
+     * Custom marks to render along the track.
+     * When provided, overrides auto-generated step marks.
+     */
+    marks?: SliderMark[];
+    /**
+     * Whether to show a value tooltip above/beside the thumb on hover/drag.
+     * @default false
+     */
+    showTooltip?: boolean;
+    /**
+     * Format the tooltip value for display.
+     * @default (v) => String(v)
+     */
+    formatTooltip?: (value: number) => string;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * Slider — a range input built on Radix UI's Slider primitive.
+ *
+ * @example
+ * // Single thumb
+ * <Slider defaultValue={[50]} />
+ *
+ * // Range (dual thumb)
+ * <Slider defaultValue={[25, 75]} min={0} max={100} />
+ *
+ * // With marks and tooltip
+ * <Slider defaultValue={[50]} step={10} showMarks showTooltip />
+ *
+ * // Danger variant
+ * <Slider variant="danger" defaultValue={[80]} />
+ */
+declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLSpanElement>>;
+
+export { Slider, type SliderMark, type SliderOrientation, type SliderProps, type SliderSize, type SliderVariant, sliderRangeVariants, sliderThumbVariants, sliderTrackVariants };

package/dist/components/slider.d.ts

@@ -0,0 +1,82 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { Slider as Slider$1 } from 'radix-ui';
+
+declare const sliderTrackVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const sliderRangeVariants: (props?: ({
+    variant?: "success" | "danger" | "default" | "primary" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const sliderThumbVariants: (props?: ({
+    variant?: "success" | "danger" | "default" | "primary" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SliderVariant = "default" | "primary" | "success" | "danger";
+type SliderSize = "sm" | "md" | "lg";
+type SliderOrientation = "horizontal" | "vertical";
+interface SliderMark {
+    value: number;
+    label?: ReactNode;
+}
+interface SliderProps extends Omit<ComponentPropsWithoutRef<typeof Slider$1.Root>, "orientation"> {
+    /**
+     * Visual variant of the slider range and thumb.
+     * @default "default"
+     */
+    variant?: SliderVariant;
+    /**
+     * Size of the slider track and thumb.
+     * @default "md"
+     */
+    size?: SliderSize;
+    /**
+     * Orientation of the slider.
+     * @default "horizontal"
+     */
+    orientation?: SliderOrientation;
+    /**
+     * Whether to show step marks along the track.
+     * @default false
+     */
+    showMarks?: boolean;
+    /**
+     * Custom marks to render along the track.
+     * When provided, overrides auto-generated step marks.
+     */
+    marks?: SliderMark[];
+    /**
+     * Whether to show a value tooltip above/beside the thumb on hover/drag.
+     * @default false
+     */
+    showTooltip?: boolean;
+    /**
+     * Format the tooltip value for display.
+     * @default (v) => String(v)
+     */
+    formatTooltip?: (value: number) => string;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * Slider — a range input built on Radix UI's Slider primitive.
+ *
+ * @example
+ * // Single thumb
+ * <Slider defaultValue={[50]} />
+ *
+ * // Range (dual thumb)
+ * <Slider defaultValue={[25, 75]} min={0} max={100} />
+ *
+ * // With marks and tooltip
+ * <Slider defaultValue={[50]} step={10} showMarks showTooltip />
+ *
+ * // Danger variant
+ * <Slider variant="danger" defaultValue={[80]} />
+ */
+declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLSpanElement>>;
+
+export { Slider, type SliderMark, type SliderOrientation, type SliderProps, type SliderSize, type SliderVariant, sliderRangeVariants, sliderThumbVariants, sliderTrackVariants };