@work-rjkashyap/unified-ui 0.3.4 → 0.3.5

package/dist/components/code.mjs

@@ -0,0 +1,243 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { fadeInFast } from "../motion/index";
+import { cn } from "../utils/cn";
+import { focusRingClasses } from "../utils/focus-ring";
+import { cva } from "class-variance-authority";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
+import {
+  forwardRef,
+  useCallback,
+  useMemo,
+  useState
+} from "react";
+import { TOKEN_COLORS, tokenizeLine } from "./code-highlight";
+const inlineCodeVariants = cva([
+  "inline font-mono font-medium rounded",
+  "px-[0.3em] py-[0.15em]",
+  "bg-muted text-muted-foreground",
+  "border border-border/50",
+  "text-[0.875em] leading-none"
+]);
+const codeBlockVariants = cva(
+  [
+    "relative rounded-lg overflow-hidden",
+    "border border-code-border",
+    "bg-code-bg text-code-foreground",
+    "font-mono text-sm leading-relaxed"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "",
+        dark: ""
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+function CopyIcon({ 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("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+      ]
+    }
+  );
+}
+function CheckIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+    }
+  );
+}
+function HighlightedLine({
+  line,
+  language
+}) {
+  const tokens = useMemo(() => tokenizeLine(line, language), [line, language]);
+  return /* @__PURE__ */ jsx(Fragment, { children: tokens.map((token, i) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: token.type !== "plain" ? { color: TOKEN_COLORS[token.type] } : void 0,
+      children: token.value
+    },
+    i
+  )) });
+}
+const InlineCode = forwardRef(
+  function InlineCode2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      "code",
+      {
+        ref,
+        className: cn(inlineCodeVariants(), className),
+        "data-ds": "",
+        "data-ds-component": "inline-code",
+        ...rest,
+        children
+      }
+    );
+  }
+);
+InlineCode.displayName = "InlineCode";
+const CodeBlock = forwardRef(
+  function CodeBlock2({
+    variant = "default",
+    language,
+    showLineNumbers = false,
+    showCopyButton = true,
+    filename,
+    className,
+    children,
+    ...rest
+  }, ref) {
+    const shouldReduce = useReducedMotion();
+    const [copied, setCopied] = useState(false);
+    const handleCopy = useCallback(() => {
+      const text = (typeof children === "string" ? children.replace(/^\n+|\n+$/g, "") : ref && "current" in ref && ref.current ? ref.current.textContent ?? "" : "").trim();
+      navigator.clipboard.writeText(text).then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2e3);
+      });
+    }, [children, ref]);
+    const code = typeof children === "string" ? children.replace(/^\n+|\n+$/g, "") : "";
+    const lines = code.split("\n");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(codeBlockVariants({ variant }), className),
+        "data-ds": "",
+        "data-ds-component": "code-block",
+        "data-ds-variant": variant,
+        children: [
+          (filename || language || showCopyButton) && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "flex items-center justify-between px-4 py-2 border-b",
+                "border-code-header-border bg-code-header-bg"
+              ),
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 min-w-0", children: [
+                  filename && /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-code-header-foreground truncate", children: filename }),
+                  language && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "text-[10px] px-2 py-0.5 rounded font-mono font-medium leading-none",
+                        "bg-code-badge-bg text-code-badge-foreground",
+                        "border border-code-badge-border"
+                      ),
+                      children: language
+                    }
+                  )
+                ] }),
+                showCopyButton && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleCopy,
+                    className: cn(
+                      "inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs shrink-0",
+                      "text-code-copy-foreground hover:text-code-copy-hover-foreground",
+                      "hover:bg-code-copy-hover-bg",
+                      "transition-colors duration-150",
+                      focusRingClasses
+                    ),
+                    "aria-label": copied ? "Copied!" : "Copy code",
+                    children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", initial: false, children: copied ? /* @__PURE__ */ jsxs(
+                      motion.span,
+                      {
+                        className: "flex items-center gap-1",
+                        variants: shouldReduce ? void 0 : fadeInFast.variants,
+                        initial: shouldReduce ? void 0 : "initial",
+                        animate: shouldReduce ? void 0 : "animate",
+                        exit: shouldReduce ? void 0 : "exit",
+                        transition: shouldReduce ? void 0 : fadeInFast.transition,
+                        "data-ds-animated": "",
+                        children: [
+                          /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5 text-code-success" }),
+                          /* @__PURE__ */ jsx("span", { className: "text-code-success", children: "Copied!" })
+                        ]
+                      },
+                      "check"
+                    ) : /* @__PURE__ */ jsxs(
+                      motion.span,
+                      {
+                        className: "flex items-center gap-1",
+                        variants: shouldReduce ? void 0 : fadeInFast.variants,
+                        initial: shouldReduce ? void 0 : "initial",
+                        animate: shouldReduce ? void 0 : "animate",
+                        exit: shouldReduce ? void 0 : "exit",
+                        transition: shouldReduce ? void 0 : fadeInFast.transition,
+                        "data-ds-animated": "",
+                        children: [
+                          /* @__PURE__ */ jsx(CopyIcon, { className: "size-3.5" }),
+                          /* @__PURE__ */ jsx("span", { children: "Copy" })
+                        ]
+                      },
+                      "copy"
+                    ) })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "pre",
+            {
+              ref,
+              className: cn(
+                "overflow-x-auto p-4 m-0",
+                "text-[13px] leading-[1.7]",
+                "bg-transparent border-0 shadow-none rounded-none"
+              ),
+              ...rest,
+              children: code ? /* @__PURE__ */ jsx("code", { className: "bg-transparent border-0 p-0 rounded-none shadow-none text-inherit", children: lines.map((line, i) => /* @__PURE__ */ jsxs("span", { className: "block", children: [
+                showLineNumbers && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "inline-block w-8 text-right mr-4 text-code-line-number select-none text-xs",
+                    "aria-hidden": "true",
+                    children: i + 1
+                  }
+                ),
+                /* @__PURE__ */ jsx(HighlightedLine, { line, language })
+              ] }, i)) }) : /* @__PURE__ */ jsx("code", { className: "bg-transparent border-0 p-0 rounded-none shadow-none text-inherit", children })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CodeBlock.displayName = "CodeBlock";
+export {
+  CodeBlock,
+  InlineCode,
+  codeBlockVariants,
+  inlineCodeVariants
+};

package/dist/components/collapsible.cjs

@@ -0,0 +1,143 @@
+"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 collapsible_exports = {};
+__export(collapsible_exports, {
+  Collapsible: () => Collapsible,
+  CollapsibleContent: () => CollapsibleContent,
+  CollapsibleTrigger: () => CollapsibleTrigger,
+  useCollapsibleContext: () => useCollapsibleContext
+});
+module.exports = __toCommonJS(collapsible_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn");
+var import_framer_motion = require("framer-motion");
+var import_radix_ui = require("radix-ui");
+var import_react = require("react");
+const CollapsibleContext = (0, import_react.createContext)({
+  open: false,
+  contentId: ""
+});
+function useCollapsibleContext() {
+  return (0, import_react.useContext)(CollapsibleContext);
+}
+const collapseTransition = {
+  duration: 0.2,
+  ease: [0.25, 0.1, 0.25, 1]
+};
+const reducedMotionTransition = {
+  duration: 0.01,
+  ease: "linear"
+};
+function Collapsible({
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange,
+  disabled = false,
+  className,
+  children,
+  ...rest
+}) {
+  const contentId = (0, import_react.useId)();
+  const isControlled = openProp !== void 0;
+  const [internalOpen, setInternalOpen] = (0, import_react.useState)(defaultOpen);
+  const open = isControlled ? openProp : internalOpen;
+  const handleOpenChange = (0, import_react.useCallback)(
+    (value) => {
+      if (!isControlled) {
+        setInternalOpen(value);
+      }
+      onOpenChange?.(value);
+    },
+    [isControlled, onOpenChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsibleContext.Provider, { value: { open, contentId }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_radix_ui.Collapsible.Root,
+    {
+      open,
+      onOpenChange: handleOpenChange,
+      disabled,
+      className: (0, import_cn.cn)(className),
+      "data-ds": "",
+      "data-ds-component": "collapsible",
+      ...open ? { "data-ds-open": "" } : {},
+      ...rest,
+      children
+    }
+  ) });
+}
+Collapsible.displayName = "Collapsible";
+const CollapsibleTrigger = (0, import_react.forwardRef)(function CollapsibleTrigger2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_radix_ui.Collapsible.Trigger,
+    {
+      ref,
+      className: (0, import_cn.cn)(className),
+      "data-ds": "",
+      "data-ds-component": "collapsible-trigger",
+      ...rest
+    }
+  );
+});
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+const MotionDiv = import_framer_motion.motion.div;
+function AnimatedCollapsibleInner({
+  duration = 0.2,
+  className,
+  children
+}) {
+  const prefersReduced = (0, import_framer_motion.useReducedMotion)();
+  const transition = prefersReduced ? reducedMotionTransition : { ...collapseTransition, duration };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    MotionDiv,
+    {
+      initial: { height: 0, opacity: 0, overflow: "hidden" },
+      animate: {
+        height: "auto",
+        opacity: 1,
+        overflow: "hidden",
+        transitionEnd: { overflow: "visible" }
+      },
+      exit: { height: 0, opacity: 0, overflow: "hidden" },
+      transition,
+      className: (0, import_cn.cn)(className),
+      "data-ds": "",
+      "data-ds-component": "collapsible-content",
+      children
+    }
+  );
+}
+const CollapsibleContent = (0, import_react.forwardRef)(function CollapsibleContent2({ duration = 0.2, forceMount = false, className, children, ...rest }, ref) {
+  const { open } = useCollapsibleContext();
+  if (forceMount) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_radix_ui.Collapsible.Content, { forceMount: true, ref, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatedCollapsibleInner, { duration, className, children }) }),
+      !open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: 0, overflow: "hidden" }, "aria-hidden": "true" })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: open && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Collapsible.Content, { forceMount: true, ref, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatedCollapsibleInner, { duration, className, children }) }) });
+});
+CollapsibleContent.displayName = "CollapsibleContent";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  useCollapsibleContext
+});

package/dist/components/collapsible.d.cts

@@ -0,0 +1,159 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Collapsible as Collapsible$1 } from 'radix-ui';
+
+interface CollapsibleContextValue {
+    open: boolean;
+    contentId: string;
+}
+declare function useCollapsibleContext(): CollapsibleContextValue;
+interface CollapsibleProps extends Omit<ComponentPropsWithoutRef<typeof Collapsible$1.Root>, "asChild"> {
+    /**
+     * Whether the collapsible is expanded.
+     * When provided, the component is controlled.
+     */
+    open?: boolean;
+    /**
+     * Default open state for uncontrolled mode.
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Callback fired when the open state changes.
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the collapsible is disabled.
+     * When disabled, the trigger cannot be interacted with.
+     * @default false
+     */
+    disabled?: boolean;
+    /** Content to render inside the collapsible root. */
+    children: ReactNode;
+    /** Additional CSS classes to merge on the root element. */
+    className?: string;
+}
+interface CollapsibleTriggerProps extends ComponentPropsWithoutRef<typeof Collapsible$1.Trigger> {
+    /** Additional CSS classes to merge. */
+    className?: string;
+}
+interface CollapsibleContentProps extends Omit<ComponentPropsWithoutRef<typeof Collapsible$1.Content>, "asChild" | "forceMount"> {
+    /**
+     * Duration of the expand/collapse animation in seconds.
+     * @default 0.2
+     */
+    duration?: number;
+    /**
+     * Whether to force-mount the content in the DOM even when collapsed.
+     * Useful for SEO or when you need to measure the content.
+     * @default false
+     */
+    forceMount?: boolean;
+    /** Additional CSS classes to merge on the content wrapper. */
+    className?: string;
+    /** Content to render inside the collapsible section. */
+    children: ReactNode;
+}
+/**
+ * Collapsible — an animated show/hide section.
+ *
+ * Built on Radix UI's Collapsible primitive for accessibility and Framer
+ * Motion for smooth height animations. The root component manages the
+ * open/closed state and provides context to child components.
+ *
+ * Accessibility:
+ *   - Radix handles `aria-expanded` on the trigger
+ *   - Radix handles `aria-controls` linking trigger → content
+ *   - Keyboard: Space/Enter toggles the collapsible
+ *   - Disabled state prevents interaction
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled
+ * <Collapsible>
+ *   <CollapsibleTrigger asChild>
+ *     <Button variant="ghost">Show more</Button>
+ *   </CollapsibleTrigger>
+ *   <CollapsibleContent>
+ *     <p>Hidden content revealed on toggle.</p>
+ *   </CollapsibleContent>
+ * </Collapsible>
+ *
+ * // Controlled
+ * <Collapsible open={isOpen} onOpenChange={setIsOpen}>
+ *   <CollapsibleTrigger asChild>
+ *     <Button variant="ghost">
+ *       {isOpen ? "Hide" : "Show"} details
+ *     </Button>
+ *   </CollapsibleTrigger>
+ *   <CollapsibleContent>
+ *     <p>Controlled collapsible content.</p>
+ *   </CollapsibleContent>
+ * </Collapsible>
+ *
+ * // Default open
+ * <Collapsible defaultOpen>
+ *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+ *   <CollapsibleContent>
+ *     <p>This content is visible by default.</p>
+ *   </CollapsibleContent>
+ * </Collapsible>
+ * ```
+ */
+declare function Collapsible({ open: openProp, defaultOpen, onOpenChange, disabled, className, children, ...rest }: CollapsibleProps): react_jsx_runtime.JSX.Element;
+declare namespace Collapsible {
+    var displayName: string;
+}
+/**
+ * CollapsibleTrigger — the button that toggles the collapsible open/closed.
+ *
+ * Use `asChild` to render your own trigger element (e.g., a Button)
+ * instead of the default `<button>`.
+ *
+ * @example
+ * ```tsx
+ * <CollapsibleTrigger asChild>
+ *   <Button variant="ghost" size="sm">
+ *     <ChevronDown className="size-4" />
+ *     Toggle section
+ *   </Button>
+ * </CollapsibleTrigger>
+ * ```
+ */
+declare const CollapsibleTrigger: react.ForwardRefExoticComponent<CollapsibleTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+/**
+ * CollapsibleContent — the content section that expands/collapses.
+ *
+ * Uses Framer Motion's AnimatePresence for enter/exit animations.
+ * The content smoothly animates its height from 0 to auto when opening,
+ * and from auto to 0 when closing. Overflow is hidden during the
+ * animation to prevent content from being visible outside the bounds.
+ *
+ * The `forceMount` prop can be used to keep the content in the DOM
+ * even when collapsed (useful for SEO or measurement purposes). When
+ * force-mounted and collapsed, the content is visually hidden with
+ * `height: 0` and `overflow: hidden`.
+ *
+ * @example
+ * ```tsx
+ * <CollapsibleContent>
+ *   <div className="p-4">
+ *     <p>This content animates in and out.</p>
+ *   </div>
+ * </CollapsibleContent>
+ *
+ * // Custom animation duration
+ * <CollapsibleContent duration={0.3}>
+ *   <p>Slower animation.</p>
+ * </CollapsibleContent>
+ *
+ * // Force mounted (always in DOM)
+ * <CollapsibleContent forceMount>
+ *   <p>Always in the DOM, visually hidden when collapsed.</p>
+ * </CollapsibleContent>
+ * ```
+ */
+declare const CollapsibleContent: react.ForwardRefExoticComponent<CollapsibleContentProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Collapsible, CollapsibleContent, type CollapsibleContentProps, type CollapsibleProps, CollapsibleTrigger, type CollapsibleTriggerProps, useCollapsibleContext };