@work-rjkashyap/unified-ui 0.3.4 → 0.3.6

package/dist/components/tabs.mjs

@@ -0,0 +1,304 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn.mjs";
+import { focusRingClasses } from "../utils/focus-ring.mjs";
+import { cva } from "class-variance-authority";
+import { motion, useReducedMotion } from "framer-motion";
+import { Tabs as TabsPrimitive } from "radix-ui";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useId,
+  useState
+} from "react";
+const TabsContext = createContext({
+  variant: "underline",
+  size: "md",
+  orientation: "horizontal",
+  layoutId: "",
+  activeValue: ""
+});
+function useTabsContext() {
+  return useContext(TabsContext);
+}
+const tabsListVariants = cva(["inline-flex items-center", "shrink-0"], {
+  variants: {
+    variant: {
+      underline: ["border-b border-border", "gap-0"],
+      pills: ["gap-1", "rounded-md", "bg-muted", "p-1"],
+      enclosed: ["border-b border-border", "gap-0"]
+    },
+    orientation: {
+      horizontal: "flex-row w-full",
+      vertical: "flex-col w-auto border-b-0"
+    },
+    fullWidth: {
+      true: "",
+      false: ""
+    }
+  },
+  compoundVariants: [
+    // Vertical orientation adjustments
+    {
+      variant: "underline",
+      orientation: "vertical",
+      className: "border-b-0 border-r border-border"
+    },
+    {
+      variant: "enclosed",
+      orientation: "vertical",
+      className: "border-b-0 border-r border-border"
+    }
+  ],
+  defaultVariants: {
+    variant: "underline",
+    orientation: "horizontal",
+    fullWidth: false
+  }
+});
+const tabsTriggerVariants = cva(
+  [
+    // Layout
+    "relative inline-flex items-center justify-center gap-1.5",
+    // Typography
+    "font-medium leading-5 whitespace-nowrap",
+    // Transition
+    "transition-[color,background-color,border-color,box-shadow,opacity]",
+    "duration-fast ease-standard",
+    // Focus ring
+    focusRingClasses,
+    // Disabled
+    "disabled:pointer-events-none disabled:opacity-50",
+    // Cursor
+    "cursor-pointer select-none"
+  ],
+  {
+    variants: {
+      variant: {
+        underline: [
+          "bg-transparent",
+          "text-muted-foreground",
+          "hover:text-foreground",
+          "data-[state=active]:text-foreground",
+          // Bottom border space for the active indicator
+          "border-b-2 border-transparent -mb-px"
+        ],
+        pills: [
+          "rounded-sm",
+          "text-muted-foreground",
+          "hover:text-foreground hover:bg-background/60",
+          "data-[state=active]:text-foreground"
+        ],
+        enclosed: [
+          "bg-transparent",
+          "text-muted-foreground",
+          "border border-transparent",
+          "hover:text-foreground",
+          "data-[state=active]:text-foreground",
+          "data-[state=active]:bg-background",
+          "data-[state=active]:border-border",
+          "data-[state=active]:border-b-transparent",
+          "-mb-px"
+        ]
+      },
+      size: {
+        sm: "text-xs px-3 py-1.5",
+        md: "text-sm px-4 py-2"
+      }
+    },
+    defaultVariants: {
+      variant: "underline",
+      size: "md"
+    }
+  }
+);
+const tabsContentVariants = cva(["mt-2", focusRingClasses, "rounded-sm"], {
+  variants: {
+    orientation: {
+      horizontal: "mt-2",
+      vertical: "mt-0 ml-4"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+const MotionSpan = motion.create("span");
+const indicatorSpringConfig = {
+  type: "spring",
+  stiffness: 500,
+  damping: 35,
+  mass: 0.5
+};
+const indicatorInstantConfig = {
+  type: "tween",
+  duration: 0
+};
+function ActiveIndicator({
+  variant,
+  layoutId
+}) {
+  const prefersReduced = useReducedMotion();
+  const transition = prefersReduced ? indicatorInstantConfig : indicatorSpringConfig;
+  if (variant === "enclosed") {
+    return null;
+  }
+  if (variant === "underline") {
+    return /* @__PURE__ */ jsx(
+      MotionSpan,
+      {
+        layoutId,
+        className: cn(
+          "absolute bottom-0 left-0 right-0 h-0.5",
+          "bg-primary",
+          "rounded-full"
+        ),
+        transition
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    MotionSpan,
+    {
+      layoutId,
+      className: cn(
+        "absolute inset-0",
+        "bg-background",
+        "rounded-sm",
+        "shadow-sm"
+      ),
+      transition
+    }
+  );
+}
+const Tabs = forwardRef(function Tabs2({
+  variant = "underline",
+  size = "md",
+  orientation = "horizontal",
+  className,
+  children,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  ...rest
+}, ref) {
+  const autoId = useId();
+  const layoutId = `tabs-indicator-${autoId}`;
+  const [internalValue, setInternalValue] = useState(
+    controlledValue ?? defaultValue ?? ""
+  );
+  const activeValue = controlledValue !== void 0 ? controlledValue : internalValue;
+  const handleValueChange = useCallback(
+    (newValue) => {
+      if (controlledValue === void 0) {
+        setInternalValue(newValue);
+      }
+      onValueChange?.(newValue);
+    },
+    [controlledValue, onValueChange]
+  );
+  return /* @__PURE__ */ jsx(
+    TabsContext.Provider,
+    {
+      value: { variant, size, orientation, layoutId, activeValue },
+      children: /* @__PURE__ */ jsx(
+        TabsPrimitive.Root,
+        {
+          ref,
+          orientation,
+          value: controlledValue,
+          defaultValue: controlledValue !== void 0 ? void 0 : defaultValue,
+          onValueChange: handleValueChange,
+          className: cn(
+            "not-prose",
+            orientation === "vertical" && "flex flex-row",
+            className
+          ),
+          "data-ds": "",
+          "data-ds-component": "tabs",
+          "data-ds-variant": variant,
+          "data-ds-size": size,
+          "data-ds-orientation": orientation,
+          ...rest,
+          children
+        }
+      )
+    }
+  );
+});
+Tabs.displayName = "Tabs";
+const TabsList = forwardRef(function TabsList2({ fullWidth = false, className, children, ...rest }, ref) {
+  const { variant, orientation } = useTabsContext();
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      ref,
+      className: cn(
+        tabsListVariants({ variant, orientation, fullWidth }),
+        fullWidth && orientation === "horizontal" && "[&>*]:flex-1",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "tabs-list",
+      ...rest,
+      children
+    }
+  );
+});
+TabsList.displayName = "TabsList";
+const TabsTrigger = forwardRef(function TabsTrigger2({ className, icon, children, disabled, value, ...rest }, ref) {
+  const { variant, size, layoutId, activeValue } = useTabsContext();
+  const iconSizeClass = size === "sm" ? "[&>svg]:size-3.5" : "[&>svg]:size-4";
+  const isActive = value === activeValue;
+  return /* @__PURE__ */ jsxs(
+    TabsPrimitive.Trigger,
+    {
+      ref,
+      value,
+      disabled,
+      className: cn(
+        tabsTriggerVariants({ variant, size }),
+        iconSizeClass,
+        // For underline variant, make border transparent — the motion indicator handles the active line
+        variant === "underline" && "data-[state=active]:border-transparent",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "tabs-trigger",
+      ...rest,
+      children: [
+        variant !== "enclosed" && isActive && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 pointer-events-none", children: /* @__PURE__ */ jsx(ActiveIndicator, { variant, layoutId }) }),
+        /* @__PURE__ */ jsxs("span", { className: cn("relative z-[1] inline-flex items-center gap-1.5"), children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", "aria-hidden": "true", children: icon }),
+          children
+        ] })
+      ]
+    }
+  );
+});
+TabsTrigger.displayName = "TabsTrigger";
+const TabsContent = forwardRef(function TabsContent2({ className, children, ...rest }, ref) {
+  const { orientation } = useTabsContext();
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      ref,
+      className: cn(tabsContentVariants({ orientation }), className),
+      "data-ds": "",
+      "data-ds-component": "tabs-content",
+      ...rest,
+      children
+    }
+  );
+});
+TabsContent.displayName = "TabsContent";
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  tabsListVariants,
+  tabsTriggerVariants
+};

package/dist/components/textarea.cjs

@@ -0,0 +1,258 @@
+"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 textarea_exports = {};
+__export(textarea_exports, {
+  Textarea: () => Textarea,
+  textareaVariants: () => textareaVariants
+});
+module.exports = __toCommonJS(textarea_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+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_react = require("react");
+const textareaVariants = (0, import_class_variance_authority.cva)(
+  // Base styles — shared across all variants and sizes
+  [
+    // Layout
+    "flex w-full min-h-[60px]",
+    // Typography
+    "text-sm leading-5",
+    // Shape
+    "rounded-md",
+    // Border
+    "border",
+    // Colors
+    "bg-background text-input-foreground",
+    "placeholder:text-input-placeholder",
+    // Transition
+    "transition-[color,background-color,border-color,box-shadow,opacity]",
+    "duration-fast ease-standard",
+    // Focus ring — WCAG AA compliant, visible on keyboard navigation only
+    import_focus_ring.focusRingClasses,
+    // Disabled
+    "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-disabled disabled:text-disabled-foreground",
+    // Read-only
+    "read-only:bg-muted read-only:cursor-default",
+    // Resize handle
+    "resize-vertical"
+  ],
+  {
+    variants: {
+      // -----------------------------------------------------------------
+      // Visual Variants
+      // -----------------------------------------------------------------
+      variant: {
+        /**
+         * Default — standard textarea with muted border.
+         */
+        default: [
+          "border-input",
+          "hover:border-border-strong",
+          "focus-visible:border-border-strong"
+        ],
+        /**
+         * Error — validation failed. Uses danger color.
+         */
+        error: [
+          "border-danger",
+          "text-foreground",
+          "focus-visible:border-danger",
+          "placeholder:text-input-placeholder"
+        ],
+        /**
+         * Success — validation passed. Uses success color.
+         */
+        success: [
+          "border-success",
+          "text-foreground",
+          "focus-visible:border-success",
+          "placeholder:text-input-placeholder"
+        ]
+      },
+      // -----------------------------------------------------------------
+      // Size Variants
+      // -----------------------------------------------------------------
+      size: {
+        /**
+         * Small — compact for dense UIs.
+         * Padding and font match Input sm.
+         */
+        sm: "px-2.5 py-1.5 text-xs",
+        /**
+         * Medium — default size for most textareas.
+         * Padding and font match Input md.
+         */
+        md: "px-3 py-2 text-sm",
+        /**
+         * Large — prominent textareas for long-form content.
+         * Padding and font match Input lg.
+         */
+        lg: "px-3.5 py-2.5 text-sm"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+function useAutoResize(textareaRef, autoResize, maxHeight) {
+  const adjustHeight = (0, import_react.useCallback)(() => {
+    const textarea = textareaRef.current;
+    if (!textarea || !autoResize) return;
+    textarea.style.height = "auto";
+    const newHeight = textarea.scrollHeight;
+    if (maxHeight && newHeight > maxHeight) {
+      textarea.style.height = `${maxHeight}px`;
+      textarea.style.overflowY = "auto";
+    } else {
+      textarea.style.height = `${newHeight}px`;
+      textarea.style.overflowY = "hidden";
+    }
+  }, [textareaRef, autoResize, maxHeight]);
+  (0, import_react.useEffect)(() => {
+    adjustHeight();
+  }, [adjustHeight]);
+  return adjustHeight;
+}
+function CharacterCount({
+  current,
+  max,
+  variant,
+  className
+}) {
+  const isOverLimit = max !== void 0 && current > max;
+  const isNearLimit = max !== void 0 && current >= max * 0.9;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className: (0, import_cn.cn)(
+        "text-xs leading-4 tabular-nums select-none",
+        // Default muted text
+        "text-muted-foreground",
+        // Near limit warning
+        isNearLimit && !isOverLimit && "text-warning",
+        // Over limit or error variant
+        (isOverLimit || variant === "error") && "text-danger",
+        className
+      ),
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      children: max !== void 0 ? `${current} / ${max}` : current
+    }
+  );
+}
+const Textarea = (0, import_react.forwardRef)(
+  function Textarea2({
+    variant = "default",
+    size = "md",
+    autoResize = false,
+    maxHeight,
+    minRows = 3,
+    showCount = false,
+    wrapperClassName,
+    countClassName,
+    className,
+    disabled,
+    readOnly,
+    value,
+    defaultValue,
+    maxLength,
+    onChange,
+    "aria-invalid": ariaInvalid,
+    ...rest
+  }, ref) {
+    const internalRef = (0, import_react.useRef)(null);
+    const [uncontrolledCharCount, setUncontrolledCharCount] = (0, import_react.useState)(
+      () => {
+        if (defaultValue !== void 0) return String(defaultValue).length;
+        return 0;
+      }
+    );
+    const charCount = value !== void 0 ? String(value).length : uncontrolledCharCount;
+    const adjustHeight = useAutoResize(internalRef, autoResize, maxHeight);
+    const handleChange = (0, import_react.useCallback)(
+      (e) => {
+        setUncontrolledCharCount(e.target.value.length);
+        adjustHeight();
+        onChange?.(e);
+      },
+      [onChange, adjustHeight]
+    );
+    const resolvedAriaInvalid = ariaInvalid !== void 0 ? ariaInvalid : variant === "error" ? true : void 0;
+    const textareaClasses = (0, import_cn.cn)(
+      textareaVariants({ variant, size }),
+      autoResize && "resize-none overflow-hidden",
+      className
+    );
+    const textareaElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "textarea",
+      {
+        ref: (0, import_cn.composeRefs)(internalRef, ref),
+        rows: minRows,
+        disabled,
+        readOnly,
+        value,
+        defaultValue,
+        maxLength,
+        onChange: handleChange,
+        "aria-invalid": resolvedAriaInvalid,
+        "aria-disabled": disabled || void 0,
+        className: textareaClasses,
+        "data-ds": "",
+        "data-ds-component": "textarea",
+        "data-ds-variant": variant,
+        "data-ds-size": size,
+        ...autoResize ? { "data-ds-auto-resize": "" } : {},
+        ...rest
+      }
+    );
+    if (!showCount) {
+      return textareaElement;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: (0, import_cn.cn)("flex flex-col gap-1.5 w-full", wrapperClassName),
+        "data-ds": "",
+        "data-ds-component": "textarea-wrapper",
+        children: [
+          textareaElement,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex justify-end px-0.5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            CharacterCount,
+            {
+              current: charCount,
+              max: maxLength,
+              variant,
+              className: countClassName
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Textarea,
+  textareaVariants
+});

package/dist/components/textarea.d.cts

@@ -0,0 +1,112 @@
+import * as react from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const textareaVariants: (props?: ({
+    variant?: "success" | "default" | "error" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TextareaVariant = "default" | "error" | "success";
+type TextareaSize = "sm" | "md" | "lg";
+interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "size">, VariantProps<typeof textareaVariants> {
+    /**
+     * Visual variant of the textarea.
+     * @default "default"
+     */
+    variant?: TextareaVariant;
+    /**
+     * Size of the textarea.
+     * @default "md"
+     */
+    size?: TextareaSize;
+    /**
+     * Whether the textarea should automatically resize to fit its content.
+     * When enabled, the native resize handle is hidden and the textarea
+     * grows vertically as the user types.
+     * @default false
+     */
+    autoResize?: boolean;
+    /**
+     * Maximum height (in pixels) for the textarea when `autoResize` is enabled.
+     * After reaching this height, the textarea will scroll instead of growing.
+     * Only applies when `autoResize` is true.
+     * @default undefined (no max height constraint)
+     */
+    maxHeight?: number;
+    /**
+     * Minimum number of rows to display.
+     * This sets the initial height of the textarea.
+     * @default 3
+     */
+    minRows?: number;
+    /**
+     * Whether to show the character count below the textarea.
+     * When `maxLength` is also set, displays "current / max".
+     * Otherwise, displays just the current count.
+     * @default false
+     */
+    showCount?: boolean;
+    /**
+     * Additional CSS classes for the outer wrapper element.
+     * Use this when you need to control the width/margin of the textarea group.
+     */
+    wrapperClassName?: string;
+    /**
+     * Additional CSS classes for the character count text.
+     */
+    countClassName?: string;
+    /** Additional CSS classes to merge on the textarea element. */
+    className?: string;
+}
+/**
+ * Textarea — a multi-line text input for capturing longer user content.
+ *
+ * Built on the design system's token layer with CVA for variant composition.
+ * Shares the same visual language as the Input component for consistency.
+ * All colors, radii, spacing, and transitions come from CSS custom properties
+ * defined in design-system.css.
+ *
+ * Accessibility:
+ *   - Focus ring visible on keyboard navigation (focus-visible)
+ *   - Disabled state uses both `disabled` attribute and `aria-disabled`
+ *   - Error variant sets `aria-invalid="true"` automatically
+ *   - Supports `aria-describedby` for linking to error/helper messages
+ *   - Character count uses `aria-live="polite"` for screen reader updates
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Textarea placeholder="Write something..." />
+ *
+ * // With variant
+ * <Textarea variant="error" aria-describedby="desc-error" />
+ * <Textarea variant="success" />
+ *
+ * // Auto-resize
+ * <Textarea autoResize placeholder="This will grow as you type..." />
+ * <Textarea autoResize maxHeight={200} placeholder="Grows up to 200px" />
+ *
+ * // Character count
+ * <Textarea showCount placeholder="With counter" />
+ * <Textarea showCount maxLength={500} placeholder="Max 500 chars" />
+ *
+ * // Sizes
+ * <Textarea size="sm" placeholder="Small" />
+ * <Textarea size="md" placeholder="Medium" />
+ * <Textarea size="lg" placeholder="Large" />
+ *
+ * // Controlled with min rows
+ * <Textarea
+ *   minRows={5}
+ *   value={text}
+ *   onChange={(e) => setText(e.target.value)}
+ * />
+ *
+ * // Disabled / Read-only
+ * <Textarea disabled placeholder="Disabled" />
+ * <Textarea readOnly value="Read-only value" />
+ * ```
+ */
+declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+
+export { Textarea, type TextareaProps, type TextareaSize, type TextareaVariant, textareaVariants };