@work-rjkashyap/unified-ui 0.3.4 → 0.3.6

package/dist/components/input.mjs

@@ -0,0 +1,296 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, composeRefs } from "../utils/cn.mjs";
+import {
+  focusRingClasses,
+  focusRingInsetClasses
+} from "../utils/focus-ring.mjs";
+import { cva } from "class-variance-authority";
+import { forwardRef, useCallback, useRef } from "react";
+const inputVariants = 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
+    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 = 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__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "absolute flex items-center justify-center",
+        "text-muted-foreground hover:text-foreground",
+        "transition-colors duration-fast",
+        focusRingInsetClasses,
+        "rounded-sm",
+        iconRightPositionMap[size],
+        iconSizeMap[size]
+      ),
+      "aria-label": "Clear input",
+      tabIndex: -1,
+      children: /* @__PURE__ */ 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__ */ jsx("path", { d: "M18 6 6 18" }),
+            /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+          ]
+        }
+      )
+    }
+  );
+}
+const Input = 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 = useRef(null);
+  const hasIcons = !!iconLeft || !!iconRight || clearable;
+  const showClear = clearable && !disabled && !readOnly && (value !== void 0 ? String(value).length > 0 : false);
+  const handleClear = 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 = cn(
+    inputVariants({ variant, size }),
+    iconLeft && iconPaddingLeftMap[size],
+    (iconRight || showClear) && iconPaddingRightMap[size],
+    className
+  );
+  if (!hasIcons) {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: 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__ */ jsxs(
+    "div",
+    {
+      className: cn(inputWrapperVariants({ size }), wrapperClassName),
+      "data-ds": "",
+      "data-ds-component": "input-wrapper",
+      children: [
+        iconLeft && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "pointer-events-none absolute flex items-center justify-center",
+              "text-muted-foreground",
+              iconLeftPositionMap[size],
+              iconSizeMap[size]
+            ),
+            "aria-hidden": "true",
+            children: iconLeft
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: 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__ */ jsx(ClearButton, { size, onClick: handleClear }) : iconRight && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: 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";
+export {
+  Input,
+  inputVariants
+};

package/dist/components/kbd.cjs

@@ -0,0 +1,69 @@
+"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 kbd_exports = {};
+__export(kbd_exports, {
+  Kbd: () => Kbd,
+  kbdVariants: () => kbdVariants
+});
+module.exports = __toCommonJS(kbd_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn.cjs");
+var import_class_variance_authority = require("class-variance-authority");
+var import_react = require("react");
+const kbdVariants = (0, import_class_variance_authority.cva)(
+  [
+    "inline-flex items-center gap-0.5",
+    "font-mono font-medium leading-none",
+    "rounded border border-border",
+    "bg-muted text-muted-foreground",
+    "shadow-[0_1px_0_1px_hsl(var(--border))]",
+    "select-none whitespace-nowrap"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "px-1.5 py-0.5 text-[10px]",
+        md: "px-2 py-1 text-xs",
+        lg: "px-2.5 py-1 text-sm"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+const Kbd = (0, import_react.forwardRef)(function Kbd2({ size = "md", className, children, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "kbd",
+    {
+      ref,
+      className: (0, import_cn.cn)(kbdVariants({ size }), className),
+      "data-ds": "",
+      "data-ds-component": "kbd",
+      "data-ds-size": size,
+      ...rest,
+      children
+    }
+  );
+});
+Kbd.displayName = "Kbd";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Kbd,
+  kbdVariants
+});

package/dist/components/kbd.d.cts

@@ -0,0 +1,25 @@
+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 kbdVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type KbdSize = "sm" | "md" | "lg";
+interface KbdProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof kbdVariants> {
+    size?: KbdSize;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * Kbd — keyboard shortcut display.
+ *
+ * @example
+ * <Kbd>⌘K</Kbd>
+ * <Kbd>Ctrl</Kbd><span>+</span><Kbd>S</Kbd>
+ * <Kbd size="sm">Enter</Kbd>
+ */
+declare const Kbd: react.ForwardRefExoticComponent<KbdProps & react.RefAttributes<HTMLElement>>;
+
+export { Kbd, type KbdProps, type KbdSize, kbdVariants };

package/dist/components/kbd.d.ts

@@ -0,0 +1,25 @@
+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 kbdVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type KbdSize = "sm" | "md" | "lg";
+interface KbdProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof kbdVariants> {
+    size?: KbdSize;
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * Kbd — keyboard shortcut display.
+ *
+ * @example
+ * <Kbd>⌘K</Kbd>
+ * <Kbd>Ctrl</Kbd><span>+</span><Kbd>S</Kbd>
+ * <Kbd size="sm">Enter</Kbd>
+ */
+declare const Kbd: react.ForwardRefExoticComponent<KbdProps & react.RefAttributes<HTMLElement>>;
+
+export { Kbd, type KbdProps, type KbdSize, kbdVariants };

package/dist/components/kbd.mjs

@@ -0,0 +1,44 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../utils/cn.mjs";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+const kbdVariants = cva(
+  [
+    "inline-flex items-center gap-0.5",
+    "font-mono font-medium leading-none",
+    "rounded border border-border",
+    "bg-muted text-muted-foreground",
+    "shadow-[0_1px_0_1px_hsl(var(--border))]",
+    "select-none whitespace-nowrap"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "px-1.5 py-0.5 text-[10px]",
+        md: "px-2 py-1 text-xs",
+        lg: "px-2.5 py-1 text-sm"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+const Kbd = forwardRef(function Kbd2({ size = "md", className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      ref,
+      className: cn(kbdVariants({ size }), className),
+      "data-ds": "",
+      "data-ds-component": "kbd",
+      "data-ds-size": size,
+      ...rest,
+      children
+    }
+  );
+});
+Kbd.displayName = "Kbd";
+export {
+  Kbd,
+  kbdVariants
+};

package/dist/components/label.cjs

@@ -0,0 +1,138 @@
+"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 label_exports = {};
+__export(label_exports, {
+  Label: () => Label,
+  labelVariants: () => labelVariants
+});
+module.exports = __toCommonJS(label_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_cn = require("../utils/cn.cjs");
+var import_class_variance_authority = require("class-variance-authority");
+var import_radix_ui = require("radix-ui");
+var import_react = require("react");
+const labelVariants = (0, import_class_variance_authority.cva)(
+  // Base styles — shared across all sizes
+  [
+    // Typography
+    "font-medium leading-none text-foreground",
+    // Prevent text selection on double-click
+    "select-none",
+    // Peer-disabled styling (when used with peer inputs)
+    "peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      // -----------------------------------------------------------------
+      // Size Variants
+      // -----------------------------------------------------------------
+      size: {
+        /**
+         * Small — for compact forms and dense UIs.
+         * Font: 12px
+         */
+        sm: "text-xs leading-4",
+        /**
+         * Medium — default size for most labels.
+         * Font: 14px
+         */
+        md: "text-sm leading-5",
+        /**
+         * Large — for prominent form fields.
+         * Font: 14px with slightly more weight
+         */
+        lg: "text-sm leading-5 font-semibold"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function RequiredIndicator({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_cn.cn)("text-danger ml-0.5", className), "aria-hidden": "true", children: "*" });
+}
+const Label = (0, import_react.forwardRef)(function Label2({
+  size = "md",
+  required = false,
+  disabled = false,
+  description,
+  descriptionClassName,
+  wrapperClassName,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const descriptionSizeClass = size === "sm" ? "text-[11px] leading-4" : "text-xs leading-4";
+  const labelElement = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_radix_ui.Label.Root,
+    {
+      ref,
+      className: (0, import_cn.cn)(
+        labelVariants({ size }),
+        disabled && "opacity-50 cursor-not-allowed",
+        !disabled && "cursor-pointer",
+        className
+      ),
+      "data-ds": "",
+      "data-ds-component": "label",
+      "data-ds-size": size,
+      ...disabled ? { "data-ds-disabled": "" } : {},
+      ...required ? { "data-ds-required": "" } : {},
+      ...rest,
+      children: [
+        children,
+        required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequiredIndicator, {})
+      ]
+    }
+  );
+  if (!description) {
+    return labelElement;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: (0, import_cn.cn)("flex flex-col gap-1", wrapperClassName),
+      "data-ds": "",
+      "data-ds-component": "label-group",
+      children: [
+        labelElement,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            className: (0, import_cn.cn)(
+              descriptionSizeClass,
+              "text-muted-foreground",
+              disabled && "opacity-50",
+              descriptionClassName
+            ),
+            children: description
+          }
+        )
+      ]
+    }
+  );
+});
+Label.displayName = "Label";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Label,
+  labelVariants
+});

package/dist/components/label.d.cts

@@ -0,0 +1,91 @@
+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';
+import { Label as Label$1 } from 'radix-ui';
+
+declare const labelVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type LabelSize = "sm" | "md" | "lg";
+interface LabelProps extends Omit<React.ComponentPropsWithoutRef<typeof Label$1.Root>, "asChild">, VariantProps<typeof labelVariants> {
+    /**
+     * Size of the label text.
+     * @default "md"
+     */
+    size?: LabelSize;
+    /**
+     * Whether the associated field is required.
+     * When true, a red asterisk (*) is displayed after the label text.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the associated field is disabled.
+     * Applies reduced opacity and not-allowed cursor.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional description or helper text displayed below the label.
+     * Useful for providing additional context about the field.
+     */
+    description?: ReactNode;
+    /**
+     * Additional CSS classes for the description text.
+     */
+    descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the outer wrapper element.
+     * Only applied when `description` is provided (wrapper is needed
+     * to stack label + description).
+     */
+    wrapperClassName?: string;
+    /** Content to render inside the label. */
+    children?: ReactNode;
+    /** Additional CSS classes to merge on the label element. */
+    className?: string;
+}
+/**
+ * Label — an accessible label for form controls.
+ *
+ * Built on Radix UI's Label primitive for proper accessibility semantics
+ * and the design system's token layer for consistent styling. When used
+ * with Radix form controls, clicking the label will focus the associated
+ * input automatically.
+ *
+ * Accessibility:
+ *   - Renders as a native `<label>` element for proper semantics
+ *   - Use `htmlFor` to associate with the corresponding input's `id`
+ *   - Required indicator is decorative (`aria-hidden`) — use `aria-required`
+ *     on the input itself for screen reader support
+ *   - Disabled state is visual only — disable the input for functional disabling
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Label htmlFor="email">Email address</Label>
+ * <Input id="email" type="email" />
+ *
+ * // Required field
+ * <Label htmlFor="name" required>Full name</Label>
+ * <Input id="name" aria-required="true" />
+ *
+ * // With description
+ * <Label htmlFor="bio" description="Keep it under 200 characters.">
+ *   Bio
+ * </Label>
+ * <Textarea id="bio" />
+ *
+ * // Small size for dense UIs
+ * <Label htmlFor="code" size="sm">Verification code</Label>
+ * <Input id="code" size="sm" />
+ *
+ * // Disabled
+ * <Label htmlFor="locked" disabled>Locked field</Label>
+ * <Input id="locked" disabled />
+ * ```
+ */
+declare const Label: react.ForwardRefExoticComponent<LabelProps & react.RefAttributes<HTMLLabelElement>>;
+
+export { Label, type LabelProps, type LabelSize, labelVariants };