@work-rjkashyap/unified-ui 0.3.4 → 0.3.6

package/dist/components/resizable.mjs

@@ -0,0 +1,99 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn.mjs";
+import { motion, useReducedMotion } from "framer-motion";
+import {
+  Group,
+  Panel,
+  Separator
+} from "react-resizable-panels";
+function ResizablePanelGroup({
+  direction = "horizontal",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    Group,
+    {
+      orientation: direction,
+      className: cn(
+        "flex h-full w-full",
+        direction === "vertical" && "flex-col",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "resizable-panel-group",
+      "data-ds-direction": direction,
+      ...rest
+    }
+  );
+}
+ResizablePanelGroup.displayName = "ResizablePanelGroup";
+const ResizablePanel = Panel;
+function GripIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "9", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsx("circle", { cx: "9", cy: "5", r: "1" }),
+        /* @__PURE__ */ jsx("circle", { cx: "9", cy: "19", r: "1" }),
+        /* @__PURE__ */ jsx("circle", { cx: "15", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsx("circle", { cx: "15", cy: "5", r: "1" }),
+        /* @__PURE__ */ jsx("circle", { cx: "15", cy: "19", r: "1" })
+      ]
+    }
+  );
+}
+function ResizableHandle({
+  withHandle = false,
+  className,
+  ...rest
+}) {
+  const shouldReduce = useReducedMotion();
+  return /* @__PURE__ */ jsx(
+    Separator,
+    {
+      className: cn(
+        "relative flex w-px items-center justify-center bg-border",
+        "after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
+        "[&[aria-orientation=horizontal]]:h-px [&[aria-orientation=horizontal]]:w-full",
+        "[&[aria-orientation=horizontal]]:after:left-0 [&[aria-orientation=horizontal]]:after:h-1",
+        "[&[aria-orientation=horizontal]]:after:w-full [&[aria-orientation=horizontal]]:after:-translate-y-1/2",
+        "[&[aria-orientation=horizontal]]:after:translate-x-0",
+        "[&[aria-orientation=horizontal]>div]:rotate-90",
+        className
+      ),
+      "data-ds-component": "resizable-handle",
+      ...rest,
+      children: withHandle && /* @__PURE__ */ jsx(
+        motion.div,
+        {
+          className: cn(
+            "z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-border bg-border"
+          ),
+          whileHover: shouldReduce ? void 0 : { opacity: 1, scale: 1.15 },
+          initial: { opacity: 0.7 },
+          "data-ds-animated": "",
+          children: /* @__PURE__ */ jsx(GripIcon, { className: "size-2.5 text-muted-foreground" })
+        }
+      )
+    }
+  );
+}
+ResizableHandle.displayName = "ResizableHandle";
+export {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup
+};

package/dist/components/scroll-area.cjs

@@ -0,0 +1,168 @@
+"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 scroll_area_exports = {};
+__export(scroll_area_exports, {
+  ScrollArea: () => ScrollArea,
+  ScrollBar: () => ScrollBar,
+  scrollbarThumbVariants: () => scrollbarThumbVariants,
+  scrollbarVariants: () => scrollbarVariants
+});
+module.exports = __toCommonJS(scroll_area_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn.cjs");
+var import_class_variance_authority = require("class-variance-authority");
+var import_radix_ui = require("radix-ui");
+var import_react = require("react");
+const scrollbarThumbVariants = (0, import_class_variance_authority.cva)(
+  [
+    // Shape
+    "relative rounded-full",
+    // Color
+    "bg-border",
+    // Transition
+    "transition-[background-color] duration-fast ease-standard",
+    // Hover
+    "hover:bg-muted-foreground/50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "",
+        md: ""
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const scrollbarVariants = (0, import_class_variance_authority.cva)(
+  [
+    // Layout
+    "flex touch-none select-none",
+    // Transition
+    "transition-[background-color,opacity] duration-fast ease-standard",
+    // Background
+    "bg-transparent",
+    // Hover — subtle track background
+    "hover:bg-muted/50",
+    // Border
+    "border-transparent"
+  ],
+  {
+    variants: {
+      orientation: {
+        vertical: "h-full border-l border-l-transparent p-px",
+        horizontal: "flex-col border-t border-t-transparent p-px"
+      },
+      size: {
+        /**
+         * Small — thin scrollbar for compact UIs.
+         * Track width/height: 6px
+         */
+        sm: "",
+        /**
+         * Medium — default scrollbar width.
+         * Track width/height: 10px
+         */
+        md: ""
+      }
+    },
+    compoundVariants: [
+      { orientation: "vertical", size: "sm", className: "w-1.5" },
+      { orientation: "vertical", size: "md", className: "w-2.5" },
+      { orientation: "horizontal", size: "sm", className: "h-1.5" },
+      { orientation: "horizontal", size: "md", className: "h-2.5" }
+    ],
+    defaultVariants: {
+      orientation: "vertical",
+      size: "md"
+    }
+  }
+);
+const ScrollBar = (0, import_react.forwardRef)(function ScrollBar2({ orientation = "vertical", size = "md", className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_radix_ui.ScrollArea.Scrollbar,
+    {
+      ref,
+      orientation,
+      className: (0, import_cn.cn)(scrollbarVariants({ orientation, size }), className),
+      "data-ds": "",
+      "data-ds-component": "scroll-bar",
+      "data-ds-orientation": orientation,
+      "data-ds-size": size,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_radix_ui.ScrollArea.Thumb,
+        {
+          className: (0, import_cn.cn)(scrollbarThumbVariants({ size }))
+        }
+      )
+    }
+  );
+});
+ScrollBar.displayName = "ScrollBar";
+const ScrollArea = (0, import_react.forwardRef)(function ScrollArea2({
+  type = "hover",
+  scrollbarSize = "md",
+  showVertical = true,
+  showHorizontal = false,
+  viewportClassName,
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_radix_ui.ScrollArea.Root,
+    {
+      ref,
+      type,
+      className: (0, import_cn.cn)("relative overflow-hidden", className),
+      "data-ds": "",
+      "data-ds-component": "scroll-area",
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_radix_ui.ScrollArea.Viewport,
+          {
+            className: (0, import_cn.cn)(
+              "size-full rounded-[inherit]",
+              // Ensure the viewport stretches children to full width
+              "[&>div]:!block",
+              viewportClassName
+            ),
+            children
+          }
+        ),
+        showVertical && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollBar, { orientation: "vertical", size: scrollbarSize }),
+        showHorizontal && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ScrollBar, { orientation: "horizontal", size: scrollbarSize }),
+        showVertical && showHorizontal && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.ScrollArea.Corner, { className: "bg-muted/50" })
+      ]
+    }
+  );
+});
+ScrollArea.displayName = "ScrollArea";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ScrollArea,
+  ScrollBar,
+  scrollbarThumbVariants,
+  scrollbarVariants
+});

package/dist/components/scroll-area.d.cts

@@ -0,0 +1,131 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { ScrollArea as ScrollArea$1 } from 'radix-ui';
+
+declare const scrollbarThumbVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const scrollbarVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ScrollAreaType = "auto" | "always" | "scroll" | "hover";
+type ScrollBarSize = "sm" | "md";
+type ScrollBarOrientation = "vertical" | "horizontal";
+interface ScrollAreaProps extends Omit<ComponentPropsWithoutRef<typeof ScrollArea$1.Root>, "type"> {
+    /**
+     * The scrollbar visibility behavior.
+     * - `"auto"` — scrollbars visible when content overflows
+     * - `"always"` — scrollbars always visible
+     * - `"scroll"` — scrollbars visible during scrolling only
+     * - `"hover"` — scrollbars visible on hover only
+     * @default "hover"
+     */
+    type?: ScrollAreaType;
+    /**
+     * Size of the scrollbar track.
+     * @default "md"
+     */
+    scrollbarSize?: ScrollBarSize;
+    /**
+     * Whether to show the vertical scrollbar.
+     * @default true
+     */
+    showVertical?: boolean;
+    /**
+     * Whether to show the horizontal scrollbar.
+     * @default false
+     */
+    showHorizontal?: boolean;
+    /**
+     * Additional CSS classes for the viewport element.
+     */
+    viewportClassName?: string;
+    /** Additional CSS classes to merge on the root element. */
+    className?: string;
+    /** Content to render inside the scrollable area. */
+    children?: ReactNode;
+}
+interface ScrollBarProps extends ComponentPropsWithoutRef<typeof ScrollArea$1.Scrollbar> {
+    /**
+     * Orientation of the scrollbar.
+     * @default "vertical"
+     */
+    orientation?: ScrollBarOrientation;
+    /**
+     * Size of the scrollbar.
+     * @default "md"
+     */
+    size?: ScrollBarSize;
+    /** Additional CSS classes to merge. */
+    className?: string;
+}
+/**
+ * ScrollBar — a styled scrollbar track and thumb.
+ *
+ * Used internally by ScrollArea but can also be used standalone when
+ * composing custom scroll area layouts.
+ *
+ * @example
+ * ```tsx
+ * <ScrollArea.Root>
+ *   <ScrollArea.Viewport>{content}</ScrollArea.Viewport>
+ *   <ScrollBar orientation="vertical" size="sm" />
+ *   <ScrollBar orientation="horizontal" size="sm" />
+ * </ScrollArea.Root>
+ * ```
+ */
+declare const ScrollBar: react.ForwardRefExoticComponent<ScrollBarProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * ScrollArea — a custom scrollbar container for consistent cross-browser
+ * scroll appearance.
+ *
+ * Built on Radix UI's ScrollArea primitive. Replaces native browser
+ * scrollbars with styled, consistent scrollbar tracks and thumbs that
+ * match the design system's visual language.
+ *
+ * Accessibility:
+ *   - Keyboard scrolling works natively (not intercepted)
+ *   - Custom scrollbars are decorative — assistive technology uses the
+ *     native scrollable region
+ *   - Focus management and tab order are preserved
+ *   - Scroll position is announced by screen readers naturally
+ *
+ * @example
+ * ```tsx
+ * // Basic vertical scroll
+ * <ScrollArea className="h-72 w-full rounded-md border">
+ *   <div className="p-4">
+ *     {longContent}
+ *   </div>
+ * </ScrollArea>
+ *
+ * // Horizontal scroll
+ * <ScrollArea className="w-96" showHorizontal showVertical={false}>
+ *   <div className="flex gap-4 p-4 w-max">
+ *     {horizontalItems}
+ *   </div>
+ * </ScrollArea>
+ *
+ * // Both scrollbars with small size
+ * <ScrollArea className="h-64 w-64" showHorizontal scrollbarSize="sm">
+ *   <div className="w-[800px] h-[800px]">
+ *     {largeContent}
+ *   </div>
+ * </ScrollArea>
+ *
+ * // Always visible scrollbars
+ * <ScrollArea className="h-48" type="always">
+ *   {content}
+ * </ScrollArea>
+ *
+ * // Scroll on hover only
+ * <ScrollArea className="h-48" type="hover">
+ *   {content}
+ * </ScrollArea>
+ * ```
+ */
+declare const ScrollArea: react.ForwardRefExoticComponent<ScrollAreaProps & react.RefAttributes<HTMLDivElement>>;
+
+export { ScrollArea, type ScrollAreaProps, type ScrollAreaType, ScrollBar, type ScrollBarOrientation, type ScrollBarProps, type ScrollBarSize, scrollbarThumbVariants, scrollbarVariants };

package/dist/components/scroll-area.d.ts

@@ -0,0 +1,131 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { ScrollArea as ScrollArea$1 } from 'radix-ui';
+
+declare const scrollbarThumbVariants: (props?: ({
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const scrollbarVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ScrollAreaType = "auto" | "always" | "scroll" | "hover";
+type ScrollBarSize = "sm" | "md";
+type ScrollBarOrientation = "vertical" | "horizontal";
+interface ScrollAreaProps extends Omit<ComponentPropsWithoutRef<typeof ScrollArea$1.Root>, "type"> {
+    /**
+     * The scrollbar visibility behavior.
+     * - `"auto"` — scrollbars visible when content overflows
+     * - `"always"` — scrollbars always visible
+     * - `"scroll"` — scrollbars visible during scrolling only
+     * - `"hover"` — scrollbars visible on hover only
+     * @default "hover"
+     */
+    type?: ScrollAreaType;
+    /**
+     * Size of the scrollbar track.
+     * @default "md"
+     */
+    scrollbarSize?: ScrollBarSize;
+    /**
+     * Whether to show the vertical scrollbar.
+     * @default true
+     */
+    showVertical?: boolean;
+    /**
+     * Whether to show the horizontal scrollbar.
+     * @default false
+     */
+    showHorizontal?: boolean;
+    /**
+     * Additional CSS classes for the viewport element.
+     */
+    viewportClassName?: string;
+    /** Additional CSS classes to merge on the root element. */
+    className?: string;
+    /** Content to render inside the scrollable area. */
+    children?: ReactNode;
+}
+interface ScrollBarProps extends ComponentPropsWithoutRef<typeof ScrollArea$1.Scrollbar> {
+    /**
+     * Orientation of the scrollbar.
+     * @default "vertical"
+     */
+    orientation?: ScrollBarOrientation;
+    /**
+     * Size of the scrollbar.
+     * @default "md"
+     */
+    size?: ScrollBarSize;
+    /** Additional CSS classes to merge. */
+    className?: string;
+}
+/**
+ * ScrollBar — a styled scrollbar track and thumb.
+ *
+ * Used internally by ScrollArea but can also be used standalone when
+ * composing custom scroll area layouts.
+ *
+ * @example
+ * ```tsx
+ * <ScrollArea.Root>
+ *   <ScrollArea.Viewport>{content}</ScrollArea.Viewport>
+ *   <ScrollBar orientation="vertical" size="sm" />
+ *   <ScrollBar orientation="horizontal" size="sm" />
+ * </ScrollArea.Root>
+ * ```
+ */
+declare const ScrollBar: react.ForwardRefExoticComponent<ScrollBarProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * ScrollArea — a custom scrollbar container for consistent cross-browser
+ * scroll appearance.
+ *
+ * Built on Radix UI's ScrollArea primitive. Replaces native browser
+ * scrollbars with styled, consistent scrollbar tracks and thumbs that
+ * match the design system's visual language.
+ *
+ * Accessibility:
+ *   - Keyboard scrolling works natively (not intercepted)
+ *   - Custom scrollbars are decorative — assistive technology uses the
+ *     native scrollable region
+ *   - Focus management and tab order are preserved
+ *   - Scroll position is announced by screen readers naturally
+ *
+ * @example
+ * ```tsx
+ * // Basic vertical scroll
+ * <ScrollArea className="h-72 w-full rounded-md border">
+ *   <div className="p-4">
+ *     {longContent}
+ *   </div>
+ * </ScrollArea>
+ *
+ * // Horizontal scroll
+ * <ScrollArea className="w-96" showHorizontal showVertical={false}>
+ *   <div className="flex gap-4 p-4 w-max">
+ *     {horizontalItems}
+ *   </div>
+ * </ScrollArea>
+ *
+ * // Both scrollbars with small size
+ * <ScrollArea className="h-64 w-64" showHorizontal scrollbarSize="sm">
+ *   <div className="w-[800px] h-[800px]">
+ *     {largeContent}
+ *   </div>
+ * </ScrollArea>
+ *
+ * // Always visible scrollbars
+ * <ScrollArea className="h-48" type="always">
+ *   {content}
+ * </ScrollArea>
+ *
+ * // Scroll on hover only
+ * <ScrollArea className="h-48" type="hover">
+ *   {content}
+ * </ScrollArea>
+ * ```
+ */
+declare const ScrollArea: react.ForwardRefExoticComponent<ScrollAreaProps & react.RefAttributes<HTMLDivElement>>;
+
+export { ScrollArea, type ScrollAreaProps, type ScrollAreaType, ScrollBar, type ScrollBarOrientation, type ScrollBarProps, type ScrollBarSize, scrollbarThumbVariants, scrollbarVariants };

package/dist/components/scroll-area.mjs

@@ -0,0 +1,143 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn.mjs";
+import { cva } from "class-variance-authority";
+import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
+import {
+  forwardRef
+} from "react";
+const scrollbarThumbVariants = cva(
+  [
+    // Shape
+    "relative rounded-full",
+    // Color
+    "bg-border",
+    // Transition
+    "transition-[background-color] duration-fast ease-standard",
+    // Hover
+    "hover:bg-muted-foreground/50"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "",
+        md: ""
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const scrollbarVariants = cva(
+  [
+    // Layout
+    "flex touch-none select-none",
+    // Transition
+    "transition-[background-color,opacity] duration-fast ease-standard",
+    // Background
+    "bg-transparent",
+    // Hover — subtle track background
+    "hover:bg-muted/50",
+    // Border
+    "border-transparent"
+  ],
+  {
+    variants: {
+      orientation: {
+        vertical: "h-full border-l border-l-transparent p-px",
+        horizontal: "flex-col border-t border-t-transparent p-px"
+      },
+      size: {
+        /**
+         * Small — thin scrollbar for compact UIs.
+         * Track width/height: 6px
+         */
+        sm: "",
+        /**
+         * Medium — default scrollbar width.
+         * Track width/height: 10px
+         */
+        md: ""
+      }
+    },
+    compoundVariants: [
+      { orientation: "vertical", size: "sm", className: "w-1.5" },
+      { orientation: "vertical", size: "md", className: "w-2.5" },
+      { orientation: "horizontal", size: "sm", className: "h-1.5" },
+      { orientation: "horizontal", size: "md", className: "h-2.5" }
+    ],
+    defaultVariants: {
+      orientation: "vertical",
+      size: "md"
+    }
+  }
+);
+const ScrollBar = forwardRef(function ScrollBar2({ orientation = "vertical", size = "md", className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.Scrollbar,
+    {
+      ref,
+      orientation,
+      className: cn(scrollbarVariants({ orientation, size }), className),
+      "data-ds": "",
+      "data-ds-component": "scroll-bar",
+      "data-ds-orientation": orientation,
+      "data-ds-size": size,
+      ...rest,
+      children: /* @__PURE__ */ jsx(
+        ScrollAreaPrimitive.Thumb,
+        {
+          className: cn(scrollbarThumbVariants({ size }))
+        }
+      )
+    }
+  );
+});
+ScrollBar.displayName = "ScrollBar";
+const ScrollArea = forwardRef(function ScrollArea2({
+  type = "hover",
+  scrollbarSize = "md",
+  showVertical = true,
+  showHorizontal = false,
+  viewportClassName,
+  className,
+  children,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ jsxs(
+    ScrollAreaPrimitive.Root,
+    {
+      ref,
+      type,
+      className: cn("relative overflow-hidden", className),
+      "data-ds": "",
+      "data-ds-component": "scroll-area",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollAreaPrimitive.Viewport,
+          {
+            className: cn(
+              "size-full rounded-[inherit]",
+              // Ensure the viewport stretches children to full width
+              "[&>div]:!block",
+              viewportClassName
+            ),
+            children
+          }
+        ),
+        showVertical && /* @__PURE__ */ jsx(ScrollBar, { orientation: "vertical", size: scrollbarSize }),
+        showHorizontal && /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal", size: scrollbarSize }),
+        showVertical && showHorizontal && /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, { className: "bg-muted/50" })
+      ]
+    }
+  );
+});
+ScrollArea.displayName = "ScrollArea";
+export {
+  ScrollArea,
+  ScrollBar,
+  scrollbarThumbVariants,
+  scrollbarVariants
+};