@work-rjkashyap/unified-ui 0.3.3 → 0.3.5

package/dist/components/textarea.d.ts

@@ -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 };

package/dist/components/textarea.mjs

@@ -0,0 +1,233 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, composeRefs } from "../utils/cn";
+import { focusRingClasses } from "../utils/focus-ring";
+import { cva } from "class-variance-authority";
+import { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+const textareaVariants = 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
+    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 = 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]);
+  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__ */ jsx(
+    "span",
+    {
+      className: 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 = 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 = useRef(null);
+    const [uncontrolledCharCount, setUncontrolledCharCount] = 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 = 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 = cn(
+      textareaVariants({ variant, size }),
+      autoResize && "resize-none overflow-hidden",
+      className
+    );
+    const textareaElement = /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: 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__ */ jsxs(
+      "div",
+      {
+        className: cn("flex flex-col gap-1.5 w-full", wrapperClassName),
+        "data-ds": "",
+        "data-ds-component": "textarea-wrapper",
+        children: [
+          textareaElement,
+          /* @__PURE__ */ jsx("div", { className: "flex justify-end px-0.5", children: /* @__PURE__ */ jsx(
+            CharacterCount,
+            {
+              current: charCount,
+              max: maxLength,
+              variant,
+              className: countClassName
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+export {
+  Textarea,
+  textareaVariants
+};

package/dist/components/theme-toggle.cjs

@@ -0,0 +1,282 @@
+"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 theme_toggle_exports = {};
+__export(theme_toggle_exports, {
+  ThemeToggle: () => ThemeToggle
+});
+module.exports = __toCommonJS(theme_toggle_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn");
+var import_focus_ring = require("../utils/focus-ring");
+var import_class_variance_authority = require("class-variance-authority");
+var import_react = require("react");
+function SunIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "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__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "5" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" })
+      ]
+    }
+  );
+}
+function MoonIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+    }
+  );
+}
+function MonitorIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "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__ */ (0, import_jsx_runtime.jsx)("rect", { x: "2", y: "3", width: "20", height: "14", rx: "2", ry: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", y1: "21", x2: "16", y2: "21" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "17", x2: "12", y2: "21" })
+      ]
+    }
+  );
+}
+const iconButtonVariants = (0, import_class_variance_authority.cva)(
+  [
+    "inline-flex items-center justify-center",
+    "rounded-md",
+    "border border-border",
+    "bg-secondary text-secondary-foreground",
+    "transition-[color,background-color,border-color,box-shadow,opacity,transform]",
+    "duration-fast ease-standard",
+    "hover:bg-secondary-hover hover:text-foreground",
+    "active:scale-[0.97]",
+    import_focus_ring.focusRingClasses,
+    "cursor-pointer",
+    "select-none"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "size-7 [&>svg]:size-3.5",
+        md: "size-9 [&>svg]:size-4",
+        lg: "size-10 [&>svg]:size-5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const segmentedContainerVariants = (0, import_class_variance_authority.cva)(
+  [
+    "inline-flex items-center",
+    "rounded-md",
+    "border border-border",
+    "bg-muted",
+    "p-0.5",
+    "gap-0.5"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "[&>button]:size-6 [&>button>svg]:size-3",
+        md: "[&>button]:size-7 [&>button>svg]:size-3.5",
+        lg: "[&>button]:size-8 [&>button>svg]:size-4"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const ICON_MAP = {
+  light: SunIcon,
+  dark: MoonIcon,
+  system: MonitorIcon
+};
+const LABEL_MAP = {
+  light: "Light mode",
+  dark: "Dark mode",
+  system: "System theme"
+};
+function getNextTheme(current, mode) {
+  if (mode === "light-dark") {
+    return current === "light" ? "dark" : "light";
+  }
+  const order = ["light", "dark", "system"];
+  const idx = order.indexOf(current);
+  return order[(idx + 1) % order.length];
+}
+const ThemeToggleIcon = (0, import_react.forwardRef)(
+  function ThemeToggleIcon2({ value, onChange, mode = "light-dark", size = "md", className, ...rest }, ref) {
+    const handleClick = (0, import_react.useCallback)(() => {
+      onChange(getNextTheme(value, mode));
+    }, [value, mode, onChange]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        ref,
+        type: "button",
+        onClick: handleClick,
+        className: (0, import_cn.cn)(iconButtonVariants({ size }), className),
+        "aria-label": `Switch to ${LABEL_MAP[getNextTheme(value, mode)] ?? "next theme"}`,
+        "data-ds": "",
+        "data-ds-component": "theme-toggle",
+        "data-ds-variant": "icon",
+        "data-ds-size": size,
+        "data-ds-theme-value": value,
+        ...rest,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            SunIcon,
+            {
+              className: (0, import_cn.cn)(
+                "absolute transition-all duration-300",
+                value !== "light" && "scale-0 rotate-90 opacity-0"
+              )
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            MoonIcon,
+            {
+              className: (0, import_cn.cn)(
+                "absolute transition-all duration-300",
+                value !== "dark" && "scale-0 -rotate-90 opacity-0"
+              )
+            }
+          ),
+          mode === "light-dark-system" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            MonitorIcon,
+            {
+              className: (0, import_cn.cn)(
+                "absolute transition-all duration-300",
+                value !== "system" && "scale-0 rotate-90 opacity-0"
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ThemeToggleIcon.displayName = "ThemeToggleIcon";
+const ThemeToggleSegmented = (0, import_react.forwardRef)(
+  function ThemeToggleSegmented2({ value, onChange, mode = "light-dark", size = "md", className }, ref) {
+    const options = mode === "light-dark-system" ? ["light", "dark", "system"] : ["light", "dark"];
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        role: "radiogroup",
+        "aria-label": "Theme selection",
+        className: (0, import_cn.cn)(segmentedContainerVariants({ size }), className),
+        "data-ds": "",
+        "data-ds-component": "theme-toggle",
+        "data-ds-variant": "segmented",
+        "data-ds-size": size,
+        "data-ds-theme-value": value,
+        children: options.map((option) => {
+          const Icon = ICON_MAP[option];
+          const isActive = value === option;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": isActive,
+              "aria-label": LABEL_MAP[option],
+              onClick: () => onChange(option),
+              className: (0, import_cn.cn)(
+                "inline-flex items-center justify-center rounded-sm transition-all duration-fast ease-standard",
+                import_focus_ring.focusRingClasses,
+                isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {})
+            },
+            option
+          );
+        })
+      }
+    );
+  }
+);
+ThemeToggleSegmented.displayName = "ThemeToggleSegmented";
+const ThemeToggle = (0, import_react.forwardRef)(
+  function ThemeToggle2({ variant = "icon", ...rest }, ref) {
+    if (variant === "segmented") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ThemeToggleSegmented,
+        {
+          ref,
+          variant,
+          ...rest
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ThemeToggleIcon,
+      {
+        ref,
+        variant,
+        ...rest
+      }
+    );
+  }
+);
+ThemeToggle.displayName = "ThemeToggle";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ThemeToggle
+});

package/dist/components/theme-toggle.d.cts

@@ -0,0 +1,58 @@
+import * as react from 'react';
+
+type ThemeToggleMode = "light-dark" | "light-dark-system";
+type ThemeToggleVariant = "icon" | "segmented";
+type ThemeToggleSize = "sm" | "md" | "lg";
+type ThemeValue = "light" | "dark" | "system";
+interface ThemeToggleProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    /** Current theme value. */
+    value: ThemeValue;
+    /** Callback when the theme changes. */
+    onChange: (value: ThemeValue) => void;
+    /**
+     * Toggle mode.
+     * - "light-dark": cycles between light and dark only
+     * - "light-dark-system": cycles through light, dark, and system
+     * @default "light-dark"
+     */
+    mode?: ThemeToggleMode;
+    /**
+     * Visual variant.
+     * - "icon": single button that cycles on click
+     * - "segmented": inline pill group with one button per option
+     * @default "icon"
+     */
+    variant?: ThemeToggleVariant;
+    /**
+     * Size of the toggle.
+     * @default "md"
+     */
+    size?: ThemeToggleSize;
+    /** Additional CSS classes. */
+    className?: string;
+}
+/**
+ * ThemeToggle — a light/dark/system mode switcher.
+ *
+ * This is a headless, controlled component: you provide `value` and
+ * `onChange`. It works with any theme provider (next-themes, custom
+ * context, etc.).
+ *
+ * @example
+ * ```tsx
+ * // With next-themes
+ * const { theme, setTheme } = useTheme();
+ * <ThemeToggle value={theme as ThemeValue} onChange={setTheme} />
+ *
+ * // Segmented variant with system option
+ * <ThemeToggle
+ *   value={theme as ThemeValue}
+ *   onChange={setTheme}
+ *   variant="segmented"
+ *   mode="light-dark-system"
+ * />
+ * ```
+ */
+declare const ThemeToggle: react.ForwardRefExoticComponent<ThemeToggleProps & react.RefAttributes<HTMLElement>>;
+
+export { ThemeToggle, type ThemeToggleMode, type ThemeToggleProps, type ThemeToggleSize, type ThemeToggleVariant, type ThemeValue };