@work-rjkashyap/unified-ui 0.3.4 → 0.3.6

package/dist/components/input-group.mjs

@@ -0,0 +1,178 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn.mjs";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+const containerVariants = cva(
+  [
+    "flex w-full items-stretch overflow-hidden",
+    "rounded-md border bg-background",
+    "transition-[border-color,box-shadow] duration-fast",
+    "focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/20",
+    "has-[:disabled]:pointer-events-none has-[:disabled]:opacity-50"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "border-input",
+        filled: "border-transparent bg-muted"
+      },
+      size: {
+        sm: "h-8 text-xs",
+        md: "h-9 text-sm",
+        lg: "h-10 text-sm"
+      },
+      error: {
+        true: "border-danger focus-within:border-danger focus-within:ring-danger/20",
+        false: ""
+      }
+    },
+    defaultVariants: { variant: "default", size: "md", error: false }
+  }
+);
+const addonVariants = cva(
+  [
+    "inline-flex items-center justify-center shrink-0",
+    "bg-muted text-muted-foreground font-medium",
+    "select-none",
+    "border-border"
+  ],
+  {
+    variants: {
+      position: {
+        left: "border-r",
+        right: "border-l"
+      },
+      size: {
+        sm: "text-xs px-2",
+        md: "text-sm px-3",
+        lg: "text-sm px-3"
+      }
+    },
+    defaultVariants: { position: "left", size: "md" }
+  }
+);
+const iconSizeMap = {
+  sm: "[&>svg]:size-3.5",
+  md: "[&>svg]:size-4",
+  lg: "[&>svg]:size-4"
+};
+const prefixPaddingMap = {
+  sm: "pl-2",
+  md: "pl-3",
+  lg: "pl-3"
+};
+const suffixPaddingMap = {
+  sm: "pr-2",
+  md: "pr-3",
+  lg: "pr-3"
+};
+const inputLeftPaddingWithPrefix = {
+  sm: "pl-1.5",
+  md: "pl-2",
+  lg: "pl-2"
+};
+const inputLeftPaddingWithAddon = {
+  sm: "pl-2",
+  md: "pl-3",
+  lg: "pl-3"
+};
+const inputLeftPaddingWithoutPrefix = {
+  sm: "pl-2",
+  md: "pl-3",
+  lg: "pl-3"
+};
+const inputRightPaddingWithSuffix = {
+  sm: "pr-1.5",
+  md: "pr-2",
+  lg: "pr-2"
+};
+const inputRightPaddingWithAddon = {
+  sm: "pr-2",
+  md: "pr-3",
+  lg: "pr-3"
+};
+const inputRightPaddingWithoutSuffix = {
+  sm: "pr-2",
+  md: "pr-3",
+  lg: "pr-3"
+};
+const InputGroup = forwardRef(
+  function InputGroup2({
+    size = "md",
+    variant = "default",
+    prefix,
+    suffix,
+    addonLeft,
+    addonRight,
+    disabled = false,
+    error = false,
+    className,
+    inputClassName,
+    inputProps,
+    children
+  }, ref) {
+    const hasPrefix = !!prefix;
+    const hasSuffix = !!suffix;
+    const hasAddonRight = !!addonRight;
+    const inputPaddingLeft = hasPrefix ? inputLeftPaddingWithPrefix[size] : addonLeft ? inputLeftPaddingWithAddon[size] : inputLeftPaddingWithoutPrefix[size];
+    const inputPaddingRight = hasSuffix ? inputRightPaddingWithSuffix[size] : hasAddonRight ? inputRightPaddingWithAddon[size] : inputRightPaddingWithoutSuffix[size];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(containerVariants({ variant, size, error }), className),
+        "data-ds": "",
+        "data-ds-component": "input-group",
+        "data-ds-size": size,
+        "data-ds-error": error ? "" : void 0,
+        children: [
+          addonLeft && /* @__PURE__ */ jsx("div", { className: cn(addonVariants({ position: "left", size })), children: addonLeft }),
+          prefix && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center justify-center shrink-0",
+                "text-muted-foreground pointer-events-none",
+                prefixPaddingMap[size],
+                iconSizeMap[size]
+              ),
+              children: prefix
+            }
+          ),
+          children ? /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center min-w-0", children }) : /* @__PURE__ */ jsx(
+            "input",
+            {
+              disabled,
+              className: cn(
+                "flex-1 h-full bg-transparent outline-none text-foreground min-w-0",
+                "placeholder:text-muted-foreground",
+                inputPaddingLeft,
+                inputPaddingRight,
+                inputClassName
+              ),
+              ...inputProps
+            }
+          ),
+          suffix && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "inline-flex items-center justify-center shrink-0",
+                "text-muted-foreground pointer-events-none",
+                suffixPaddingMap[size],
+                iconSizeMap[size]
+              ),
+              children: suffix
+            }
+          ),
+          addonRight && /* @__PURE__ */ jsx("div", { className: cn(addonVariants({ position: "right", size })), children: addonRight })
+        ]
+      }
+    );
+  }
+);
+InputGroup.displayName = "InputGroup";
+export {
+  InputGroup
+};

package/dist/components/input.cjs

@@ -0,0 +1,318 @@
+"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 input_exports = {};
+__export(input_exports, {
+  Input: () => Input,
+  inputVariants: () => inputVariants
+});
+module.exports = __toCommonJS(input_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 inputVariants = (0, import_class_variance_authority.cva)(
+  // Base styles — shared across all variants and sizes
+  [
+    // Layout
+    "flex w-full",
+    // 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",
+    // File input styling
+    "file:border-0 file:bg-transparent file:text-sm file:font-medium"
+  ],
+  {
+    variants: {
+      // -----------------------------------------------------------------
+      // Visual Variants
+      // -----------------------------------------------------------------
+      variant: {
+        /**
+         * Default — standard input 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, tables, toolbars.
+         * Height: 32px (h-8)
+         */
+        sm: "h-8 px-2.5 text-xs",
+        /**
+         * Medium — default size for most inputs.
+         * Height: var(--ds-control-height)
+         */
+        md: "h-(--ds-control-height) px-3 text-sm",
+        /**
+         * Large — prominent inputs for hero sections, forms.
+         * Height: 40px (h-10)
+         */
+        lg: "h-10 px-3.5 text-sm"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+const inputWrapperVariants = (0, import_class_variance_authority.cva)(["relative flex items-center w-full"], {
+  variants: {
+    size: {
+      sm: "",
+      md: "",
+      lg: ""
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+const iconSizeMap = {
+  sm: "[&>svg]:size-3.5",
+  md: "[&>svg]:size-4",
+  lg: "[&>svg]:size-4"
+};
+const iconPaddingLeftMap = {
+  sm: "pl-7",
+  md: "pl-9",
+  lg: "pl-10"
+};
+const iconPaddingRightMap = {
+  sm: "pr-7",
+  md: "pr-9",
+  lg: "pr-10"
+};
+const iconLeftPositionMap = {
+  sm: "left-2",
+  md: "left-3",
+  lg: "left-3.5"
+};
+const iconRightPositionMap = {
+  sm: "right-2",
+  md: "right-3",
+  lg: "right-3.5"
+};
+function ClearButton({
+  size,
+  onClick
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: (0, import_cn.cn)(
+        "absolute flex items-center justify-center",
+        "text-muted-foreground hover:text-foreground",
+        "transition-colors duration-fast",
+        import_focus_ring.focusRingInsetClasses,
+        "rounded-sm",
+        iconRightPositionMap[size],
+        iconSizeMap[size]
+      ),
+      "aria-label": "Clear input",
+      tabIndex: -1,
+      children: /* @__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: size === "sm" ? "size-3.5" : "size-4",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })
+          ]
+        }
+      )
+    }
+  );
+}
+const Input = (0, import_react.forwardRef)(function Input2({
+  variant = "default",
+  size = "md",
+  iconLeft,
+  iconRight,
+  clearable = false,
+  onClear,
+  wrapperClassName,
+  className,
+  disabled,
+  readOnly,
+  value,
+  defaultValue,
+  "aria-invalid": ariaInvalid,
+  ...rest
+}, ref) {
+  const internalRef = (0, import_react.useRef)(null);
+  const hasIcons = !!iconLeft || !!iconRight || clearable;
+  const showClear = clearable && !disabled && !readOnly && (value !== void 0 ? String(value).length > 0 : false);
+  const handleClear = (0, import_react.useCallback)(() => {
+    if (onClear) {
+      onClear();
+    } else if (internalRef.current) {
+      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "value"
+      )?.set;
+      if (nativeInputValueSetter) {
+        nativeInputValueSetter.call(internalRef.current, "");
+        internalRef.current.dispatchEvent(
+          new Event("input", { bubbles: true })
+        );
+      }
+    }
+    internalRef.current?.focus();
+  }, [onClear]);
+  const resolvedAriaInvalid = ariaInvalid !== void 0 ? ariaInvalid : variant === "error" ? true : void 0;
+  const inputClasses = (0, import_cn.cn)(
+    inputVariants({ variant, size }),
+    iconLeft && iconPaddingLeftMap[size],
+    (iconRight || showClear) && iconPaddingRightMap[size],
+    className
+  );
+  if (!hasIcons) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        ref: (0, import_cn.composeRefs)(internalRef, ref),
+        disabled,
+        readOnly,
+        value,
+        defaultValue,
+        "aria-invalid": resolvedAriaInvalid,
+        "aria-disabled": disabled || void 0,
+        className: inputClasses,
+        "data-ds": "",
+        "data-ds-component": "input",
+        "data-ds-variant": variant,
+        "data-ds-size": size,
+        ...rest
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_cn.cn)(inputWrapperVariants({ size }), wrapperClassName),
+      "data-ds": "",
+      "data-ds-component": "input-wrapper",
+      children: [
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: (0, import_cn.cn)(
+              "pointer-events-none absolute flex items-center justify-center",
+              "text-muted-foreground",
+              iconLeftPositionMap[size],
+              iconSizeMap[size]
+            ),
+            "aria-hidden": "true",
+            children: iconLeft
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            ref: (0, import_cn.composeRefs)(internalRef, ref),
+            disabled,
+            readOnly,
+            value,
+            defaultValue,
+            "aria-invalid": resolvedAriaInvalid,
+            "aria-disabled": disabled || void 0,
+            className: inputClasses,
+            "data-ds": "",
+            "data-ds-component": "input",
+            "data-ds-variant": variant,
+            "data-ds-size": size,
+            ...rest
+          }
+        ),
+        showClear ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ClearButton, { size, onClick: handleClear }) : iconRight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: (0, import_cn.cn)(
+              "pointer-events-none absolute flex items-center justify-center",
+              "text-muted-foreground",
+              iconRightPositionMap[size],
+              iconSizeMap[size]
+            ),
+            "aria-hidden": "true",
+            children: iconRight
+          }
+        )
+      ]
+    }
+  );
+});
+Input.displayName = "Input";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Input,
+  inputVariants
+});

package/dist/components/input.d.cts

@@ -0,0 +1,99 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const inputVariants: (props?: ({
+    variant?: "success" | "default" | "error" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type InputVariant = "default" | "error" | "success";
+type InputSize = "sm" | "md" | "lg";
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
+    /**
+     * Visual variant of the input.
+     * @default "default"
+     */
+    variant?: InputVariant;
+    /**
+     * Size of the input.
+     * @default "md"
+     */
+    size?: InputSize;
+    /**
+     * Icon to display on the left side of the input.
+     * Typically a Lucide icon component rendered at the appropriate size.
+     */
+    iconLeft?: ReactNode;
+    /**
+     * Icon to display on the right side of the input.
+     * If `clearable` is true and there is a value, the clear button
+     * takes precedence over `iconRight`.
+     */
+    iconRight?: ReactNode;
+    /**
+     * Whether to show a clear button when the input has a value.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Callback fired when the clear button is clicked.
+     * If not provided, the input will dispatch a native change event
+     * with an empty string value.
+     */
+    onClear?: () => void;
+    /**
+     * Additional CSS classes for the outer wrapper element.
+     * Use this when you need to control the width/margin of the input group.
+     */
+    wrapperClassName?: string;
+    /** Additional CSS classes to merge on the input element. */
+    className?: string;
+}
+/**
+ * Input — a text input for capturing user data.
+ *
+ * Built on the design system's token layer with CVA for variant composition.
+ * 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
+ *   - Clear button has `aria-label` and is excluded from tab order
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Input placeholder="Enter your name" />
+ *
+ * // With variant
+ * <Input variant="error" aria-describedby="email-error" />
+ *
+ * // With icons
+ * <Input iconLeft={<SearchIcon />} placeholder="Search..." />
+ * <Input iconRight={<MailIcon />} placeholder="Email" />
+ *
+ * // Clearable
+ * <Input
+ *   clearable
+ *   value={value}
+ *   onChange={(e) => setValue(e.target.value)}
+ *   onClear={() => setValue("")}
+ * />
+ *
+ * // Sizes
+ * <Input size="sm" placeholder="Small" />
+ * <Input size="md" placeholder="Medium" />
+ * <Input size="lg" placeholder="Large" />
+ *
+ * // Disabled / Read-only
+ * <Input disabled placeholder="Disabled" />
+ * <Input readOnly value="Read-only value" />
+ * ```
+ */
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+export { Input, type InputProps, type InputSize, type InputVariant, inputVariants };

package/dist/components/input.d.ts

@@ -0,0 +1,99 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const inputVariants: (props?: ({
+    variant?: "success" | "default" | "error" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type InputVariant = "default" | "error" | "success";
+type InputSize = "sm" | "md" | "lg";
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof inputVariants> {
+    /**
+     * Visual variant of the input.
+     * @default "default"
+     */
+    variant?: InputVariant;
+    /**
+     * Size of the input.
+     * @default "md"
+     */
+    size?: InputSize;
+    /**
+     * Icon to display on the left side of the input.
+     * Typically a Lucide icon component rendered at the appropriate size.
+     */
+    iconLeft?: ReactNode;
+    /**
+     * Icon to display on the right side of the input.
+     * If `clearable` is true and there is a value, the clear button
+     * takes precedence over `iconRight`.
+     */
+    iconRight?: ReactNode;
+    /**
+     * Whether to show a clear button when the input has a value.
+     * @default false
+     */
+    clearable?: boolean;
+    /**
+     * Callback fired when the clear button is clicked.
+     * If not provided, the input will dispatch a native change event
+     * with an empty string value.
+     */
+    onClear?: () => void;
+    /**
+     * Additional CSS classes for the outer wrapper element.
+     * Use this when you need to control the width/margin of the input group.
+     */
+    wrapperClassName?: string;
+    /** Additional CSS classes to merge on the input element. */
+    className?: string;
+}
+/**
+ * Input — a text input for capturing user data.
+ *
+ * Built on the design system's token layer with CVA for variant composition.
+ * 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
+ *   - Clear button has `aria-label` and is excluded from tab order
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Input placeholder="Enter your name" />
+ *
+ * // With variant
+ * <Input variant="error" aria-describedby="email-error" />
+ *
+ * // With icons
+ * <Input iconLeft={<SearchIcon />} placeholder="Search..." />
+ * <Input iconRight={<MailIcon />} placeholder="Email" />
+ *
+ * // Clearable
+ * <Input
+ *   clearable
+ *   value={value}
+ *   onChange={(e) => setValue(e.target.value)}
+ *   onClear={() => setValue("")}
+ * />
+ *
+ * // Sizes
+ * <Input size="sm" placeholder="Small" />
+ * <Input size="md" placeholder="Medium" />
+ * <Input size="lg" placeholder="Large" />
+ *
+ * // Disabled / Read-only
+ * <Input disabled placeholder="Disabled" />
+ * <Input readOnly value="Read-only value" />
+ * ```
+ */
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+export { Input, type InputProps, type InputSize, type InputVariant, inputVariants };