@work-rjkashyap/unified-ui 0.3.4 → 0.3.5

package/dist/components/select.mjs

@@ -0,0 +1,288 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { scaleIn } from "../motion/index";
+import { cn } from "../utils/cn";
+import { focusRingClasses } from "../utils/focus-ring";
+import { cva } from "class-variance-authority";
+import { motion, useReducedMotion } from "framer-motion";
+import { Select as SelectPrimitive } from "radix-ui";
+import {
+  forwardRef
+} from "react";
+const selectTriggerVariants = cva(
+  [
+    "inline-flex items-center justify-between w-full",
+    "text-sm leading-5",
+    "rounded-md",
+    "border",
+    "bg-background text-input-foreground",
+    "transition-[color,background-color,border-color,box-shadow,opacity]",
+    "duration-fast ease-standard",
+    focusRingClasses,
+    "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-disabled disabled:text-disabled-foreground",
+    "data-[placeholder]:text-input-placeholder",
+    "cursor-pointer"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "border-input",
+          "hover:border-border-strong",
+          "focus-visible:border-border-strong"
+        ],
+        error: [
+          "border-danger",
+          "text-foreground",
+          "focus-visible:border-danger"
+        ],
+        success: [
+          "border-success",
+          "text-foreground",
+          "focus-visible:border-success"
+        ]
+      },
+      size: {
+        sm: "h-8 px-2.5 text-xs gap-1.5",
+        md: "h-9 px-3 text-sm gap-2",
+        lg: "h-10 px-3.5 text-sm gap-2"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+function ChevronDownIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
+  );
+}
+function ChevronUpIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" })
+    }
+  );
+}
+function CheckIconInternal({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+    }
+  );
+}
+const iconSizeMap = {
+  sm: "size-3.5",
+  md: "size-4",
+  lg: "size-4"
+};
+const Select = SelectPrimitive.Root;
+const SelectTrigger = forwardRef(function SelectTrigger2({ className, children, variant = "default", size = "md", ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      ref,
+      className: cn(selectTriggerVariants({ variant, size }), className),
+      "data-ds": "",
+      "data-ds-component": "select-trigger",
+      "data-ds-variant": variant,
+      "data-ds-size": size,
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
+          ChevronDownIcon,
+          {
+            className: cn(iconSizeMap[size], "shrink-0 text-muted-foreground")
+          }
+        ) })
+      ]
+    }
+  );
+});
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectValue = SelectPrimitive.Value;
+const SelectContent = forwardRef(function SelectContent2({ className, children, position = "popper", sideOffset = 4, ...props }, ref) {
+  const shouldReduce = useReducedMotion();
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    SelectPrimitive.Content,
+    {
+      ref,
+      position,
+      sideOffset,
+      asChild: true,
+      ...props,
+      children: /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          className: cn(
+            "relative z-[var(--z-popover)]",
+            "min-w-[var(--radix-select-trigger-width)]",
+            "max-h-[min(var(--radix-select-content-available-height),320px)]",
+            "overflow-hidden",
+            "rounded-md",
+            "border border-border",
+            "bg-background",
+            "shadow-lg",
+            className
+          ),
+          variants: shouldReduce ? void 0 : scaleIn.variants,
+          initial: shouldReduce ? { opacity: 0 } : "initial",
+          animate: shouldReduce ? { opacity: 1 } : "animate",
+          exit: shouldReduce ? { opacity: 0 } : "exit",
+          transition: shouldReduce ? { duration: 0.15 } : scaleIn.transition,
+          "data-ds-animated": "",
+          children: [
+            /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+            /* @__PURE__ */ jsx(
+              SelectPrimitive.Viewport,
+              {
+                className: cn(
+                  "p-1",
+                  position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)]"
+                ),
+                children
+              }
+            ),
+            /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+          ]
+        }
+      )
+    }
+  ) });
+});
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectScrollUpButton = forwardRef(function SelectScrollUpButton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollUpButton,
+    {
+      ref,
+      className: cn(
+        "flex items-center justify-center py-1",
+        "cursor-default text-muted-foreground",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" })
+    }
+  );
+});
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = forwardRef(function SelectScrollDownButton2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.ScrollDownButton,
+    {
+      ref,
+      className: cn(
+        "flex items-center justify-center py-1",
+        "cursor-default text-muted-foreground",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" })
+    }
+  );
+});
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+const SelectItem = forwardRef(function SelectItem2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Item,
+    {
+      ref,
+      className: cn(
+        "relative flex w-full cursor-pointer select-none items-center",
+        "rounded-sm py-1.5 pl-8 pr-2",
+        "text-sm leading-5 text-foreground",
+        "outline-none",
+        "focus:bg-muted focus:text-foreground",
+        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "select-item",
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIconInternal, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+      ]
+    }
+  );
+});
+SelectItem.displayName = "SelectItem";
+const SelectGroup = forwardRef(function SelectGroup2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Group, { ref, className: cn("", className), ...rest, children });
+});
+SelectGroup.displayName = "SelectGroup";
+const SelectLabel = forwardRef(function SelectLabel2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Label,
+    {
+      ref,
+      className: cn(
+        "py-1.5 pl-8 pr-2 text-xs font-semibold text-muted-foreground",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+SelectLabel.displayName = "SelectLabel";
+const SelectSeparator = forwardRef(function SelectSeparator2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    SelectPrimitive.Separator,
+    {
+      ref,
+      className: cn("-mx-1 my-1 h-px bg-border", className),
+      ...rest
+    }
+  );
+});
+SelectSeparator.displayName = "SelectSeparator";
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  selectTriggerVariants
+};

package/dist/components/separator.cjs

@@ -0,0 +1,193 @@
+"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 separator_exports = {};
+__export(separator_exports, {
+  Separator: () => Separator,
+  separatorVariants: () => separatorVariants
+});
+module.exports = __toCommonJS(separator_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn");
+var import_class_variance_authority = require("class-variance-authority");
+var import_radix_ui = require("radix-ui");
+var import_react = require("react");
+const separatorVariants = (0, import_class_variance_authority.cva)(
+  // Base styles — shared across all variants
+  "shrink-0 bg-border",
+  {
+    variants: {
+      /**
+       * Visual variant of the separator line.
+       */
+      variant: {
+        /**
+         * Default — solid line using the border token color.
+         */
+        default: "",
+        /**
+         * Muted — lighter separator using the muted-foreground color at
+         * reduced opacity. Useful for less prominent divisions.
+         */
+        muted: "bg-muted-foreground/20",
+        /**
+         * Dashed — renders a dashed border instead of a solid background.
+         * Uses border-style rather than background.
+         */
+        dashed: "bg-transparent !h-auto !w-auto",
+        /**
+         * Gradient — fades in from transparent at both ends.
+         * Creates a more elegant, subtle divider.
+         */
+        gradient: "bg-transparent"
+      },
+      /**
+       * Orientation of the separator.
+       */
+      orientation: {
+        horizontal: "h-px w-full",
+        vertical: "h-full w-px"
+      }
+    },
+    compoundVariants: [
+      // Dashed + horizontal
+      {
+        variant: "dashed",
+        orientation: "horizontal",
+        class: "border-b border-dashed border-border w-full"
+      },
+      // Dashed + vertical
+      {
+        variant: "dashed",
+        orientation: "vertical",
+        class: "border-l border-dashed border-border h-full"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      orientation: "horizontal"
+    }
+  }
+);
+const spacingYMap = {
+  0: "my-0",
+  1: "my-1",
+  2: "my-2",
+  3: "my-3",
+  4: "my-4",
+  5: "my-5",
+  6: "my-6",
+  8: "my-8",
+  10: "my-10",
+  12: "my-12"
+};
+const spacingXMap = {
+  0: "mx-0",
+  1: "mx-1",
+  2: "mx-2",
+  3: "mx-3",
+  4: "mx-4",
+  5: "mx-5",
+  6: "mx-6",
+  8: "mx-8",
+  10: "mx-10",
+  12: "mx-12"
+};
+const gradientHorizontal = "bg-gradient-to-r from-transparent via-border to-transparent";
+const gradientVertical = "bg-gradient-to-b from-transparent via-border to-transparent";
+const Separator = (0, import_react.forwardRef)(function Separator2({
+  variant = "default",
+  orientation = "horizontal",
+  decorative = true,
+  spacing = 4,
+  label,
+  className,
+  ...rest
+}, ref) {
+  const isVertical = orientation === "vertical";
+  const spacingClass = isVertical ? spacingXMap[spacing] ?? "mx-4" : spacingYMap[spacing] ?? "my-4";
+  const gradientClass = variant === "gradient" ? isVertical ? gradientVertical : gradientHorizontal : void 0;
+  if (label && !isVertical) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: (0, import_cn.cn)("flex items-center w-full", spacingClass, className),
+        role: decorative ? "none" : "separator",
+        "aria-orientation": decorative ? void 0 : orientation,
+        "data-ds": "",
+        "data-ds-component": "separator",
+        "data-ds-variant": variant,
+        "data-ds-orientation": orientation,
+        "data-ds-labeled": "",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_radix_ui.Separator.Root,
+            {
+              decorative: true,
+              orientation,
+              className: (0, import_cn.cn)(
+                separatorVariants({ variant, orientation }),
+                gradientClass,
+                "flex-1"
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "px-3 text-xs text-muted-foreground font-medium select-none shrink-0", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_radix_ui.Separator.Root,
+            {
+              decorative: true,
+              orientation,
+              className: (0, import_cn.cn)(
+                separatorVariants({ variant, orientation }),
+                gradientClass,
+                "flex-1"
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_radix_ui.Separator.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: (0, import_cn.cn)(
+        separatorVariants({ variant, orientation }),
+        gradientClass,
+        spacingClass,
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "separator",
+      "data-ds-variant": variant,
+      "data-ds-orientation": orientation,
+      ...rest
+    }
+  );
+});
+Separator.displayName = "Separator";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Separator,
+  separatorVariants
+});

package/dist/components/separator.d.cts

@@ -0,0 +1,92 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { Separator as Separator$1 } from 'radix-ui';
+
+declare const separatorVariants: (props?: ({
+    variant?: "default" | "dashed" | "muted" | "gradient" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SeparatorVariant = NonNullable<VariantProps<typeof separatorVariants>["variant"]>;
+type SeparatorOrientation = "horizontal" | "vertical";
+type SeparatorSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+interface SeparatorProps extends ComponentPropsWithoutRef<typeof Separator$1.Root> {
+    /**
+     * Visual variant of the separator.
+     * @default "default"
+     */
+    variant?: SeparatorVariant;
+    /**
+     * Orientation of the separator.
+     * @default "horizontal"
+     */
+    orientation?: SeparatorOrientation;
+    /**
+     * Whether the separator is purely decorative. When `true`, it is hidden
+     * from the accessibility tree. When `false`, it renders as a semantic
+     * separator with `role="separator"`.
+     * @default true
+     */
+    decorative?: boolean;
+    /**
+     * Vertical margin (horizontal orientation) or horizontal margin
+     * (vertical orientation), using Tailwind spacing scale.
+     * @default 4
+     */
+    spacing?: SeparatorSpacing;
+    /**
+     * Optional label to render centered on the separator.
+     * Creates a "divider with text" pattern (e.g., "OR", "Continue", etc.).
+     * Only supported for horizontal orientation.
+     */
+    label?: ReactNode;
+    /**
+     * Additional CSS classes applied to the separator line (or wrapper
+     * when a label is present).
+     */
+    className?: string;
+}
+/**
+ * Separator — a visual divider between content sections.
+ *
+ * Built on Radix UI's Separator primitive with design system tokens for
+ * consistent styling. Supports horizontal and vertical orientations,
+ * optional labels, and multiple visual variants.
+ *
+ * Accessibility:
+ *   - `decorative={true}` (default) → `role="none"`, hidden from AT
+ *   - `decorative={false}` → `role="separator"` + `aria-orientation`
+ *   - Label text is visible but does not affect semantics when decorative
+ *
+ * @example
+ * ```tsx
+ * // Basic horizontal separator
+ * <Separator />
+ *
+ * // With custom spacing
+ * <Separator spacing={6} />
+ *
+ * // Vertical separator (e.g., in a toolbar)
+ * <Separator orientation="vertical" />
+ *
+ * // With a label
+ * <Separator label="OR" />
+ * <Separator label={<span className="text-muted-foreground">Section</span>} />
+ *
+ * // Muted variant
+ * <Separator variant="muted" />
+ *
+ * // Dashed variant
+ * <Separator variant="dashed" />
+ *
+ * // Gradient variant
+ * <Separator variant="gradient" />
+ *
+ * // Semantic (non-decorative) separator
+ * <Separator decorative={false} />
+ * ```
+ */
+declare const Separator: react.ForwardRefExoticComponent<SeparatorProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Separator, type SeparatorOrientation, type SeparatorProps, type SeparatorSpacing, type SeparatorVariant, separatorVariants };

package/dist/components/separator.d.ts

@@ -0,0 +1,92 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { Separator as Separator$1 } from 'radix-ui';
+
+declare const separatorVariants: (props?: ({
+    variant?: "default" | "dashed" | "muted" | "gradient" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SeparatorVariant = NonNullable<VariantProps<typeof separatorVariants>["variant"]>;
+type SeparatorOrientation = "horizontal" | "vertical";
+type SeparatorSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12;
+interface SeparatorProps extends ComponentPropsWithoutRef<typeof Separator$1.Root> {
+    /**
+     * Visual variant of the separator.
+     * @default "default"
+     */
+    variant?: SeparatorVariant;
+    /**
+     * Orientation of the separator.
+     * @default "horizontal"
+     */
+    orientation?: SeparatorOrientation;
+    /**
+     * Whether the separator is purely decorative. When `true`, it is hidden
+     * from the accessibility tree. When `false`, it renders as a semantic
+     * separator with `role="separator"`.
+     * @default true
+     */
+    decorative?: boolean;
+    /**
+     * Vertical margin (horizontal orientation) or horizontal margin
+     * (vertical orientation), using Tailwind spacing scale.
+     * @default 4
+     */
+    spacing?: SeparatorSpacing;
+    /**
+     * Optional label to render centered on the separator.
+     * Creates a "divider with text" pattern (e.g., "OR", "Continue", etc.).
+     * Only supported for horizontal orientation.
+     */
+    label?: ReactNode;
+    /**
+     * Additional CSS classes applied to the separator line (or wrapper
+     * when a label is present).
+     */
+    className?: string;
+}
+/**
+ * Separator — a visual divider between content sections.
+ *
+ * Built on Radix UI's Separator primitive with design system tokens for
+ * consistent styling. Supports horizontal and vertical orientations,
+ * optional labels, and multiple visual variants.
+ *
+ * Accessibility:
+ *   - `decorative={true}` (default) → `role="none"`, hidden from AT
+ *   - `decorative={false}` → `role="separator"` + `aria-orientation`
+ *   - Label text is visible but does not affect semantics when decorative
+ *
+ * @example
+ * ```tsx
+ * // Basic horizontal separator
+ * <Separator />
+ *
+ * // With custom spacing
+ * <Separator spacing={6} />
+ *
+ * // Vertical separator (e.g., in a toolbar)
+ * <Separator orientation="vertical" />
+ *
+ * // With a label
+ * <Separator label="OR" />
+ * <Separator label={<span className="text-muted-foreground">Section</span>} />
+ *
+ * // Muted variant
+ * <Separator variant="muted" />
+ *
+ * // Dashed variant
+ * <Separator variant="dashed" />
+ *
+ * // Gradient variant
+ * <Separator variant="gradient" />
+ *
+ * // Semantic (non-decorative) separator
+ * <Separator decorative={false} />
+ * ```
+ */
+declare const Separator: react.ForwardRefExoticComponent<SeparatorProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Separator, type SeparatorOrientation, type SeparatorProps, type SeparatorSpacing, type SeparatorVariant, separatorVariants };