@work-rjkashyap/unified-ui 0.3.4 → 0.3.6

package/dist/components/form-field.d.cts

@@ -0,0 +1,163 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type FormFieldSize = "sm" | "md" | "lg";
+type FormFieldOrientation = "vertical" | "horizontal";
+interface FormFieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Label text for the form field.
+     * Rendered as a `<label>` element linked to the control via `htmlFor`.
+     */
+    label?: ReactNode;
+    /**
+     * Description / helper text displayed below the label (or below the
+     * control in vertical orientation).
+     * Linked to the control via `aria-describedby`.
+     */
+    description?: ReactNode;
+    /**
+     * Error message displayed below the control.
+     * When provided, the field is treated as invalid and the error
+     * replaces the description.
+     * Linked to the control via `aria-describedby`.
+     */
+    error?: ReactNode;
+    /**
+     * Size of the form field. Controls label text size, spacing, and
+     * provides the correct sizing context for child controls.
+     * @default "md"
+     */
+    size?: FormFieldSize;
+    /**
+     * Layout orientation for the label + control pair.
+     * - `"vertical"` — label stacked above control (default)
+     * - `"horizontal"` — label to the left, control to the right
+     * @default "vertical"
+     */
+    orientation?: FormFieldOrientation;
+    /**
+     * Whether the field is required.
+     * Displays a red asterisk (*) after the label text.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the field is disabled.
+     * Reduces opacity on all elements (label, description, error).
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The HTML `id` attribute for the form control.
+     * When provided, the label's `htmlFor` will point to this id, and
+     * `aria-describedby` / `aria-errormessage` ids are derived from it.
+     * When omitted, a unique id is auto-generated.
+     */
+    htmlFor?: string;
+    /**
+     * Additional CSS classes for the label element.
+     */
+    labelClassName?: string;
+    /**
+     * Additional CSS classes for the description element.
+     */
+    descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the error message element.
+     */
+    errorClassName?: string;
+    /**
+     * Additional CSS classes for the control wrapper element
+     * (the container around the children).
+     */
+    controlClassName?: string;
+    /**
+     * The form control(s) to render inside the field.
+     * Can be a single element or a render function that receives
+     * accessibility props to spread on the control.
+     */
+    children: ReactNode | ((props: FormFieldControlProps) => ReactNode);
+    /** Additional CSS classes to merge on the root element. */
+    className?: string;
+}
+/**
+ * Props passed to the render-function form of `children`.
+ * Spread these on your form control for full accessibility.
+ */
+interface FormFieldControlProps {
+    /** The id to set on the control element. */
+    id: string;
+    /** Space-separated ids of description and/or error elements. */
+    "aria-describedby"?: string;
+    /** Whether the control is in an invalid state. */
+    "aria-invalid"?: boolean;
+    /** Whether the control is required. */
+    "aria-required"?: boolean;
+    /** Whether the control is disabled. */
+    disabled?: boolean;
+}
+/**
+ * FormField — a composable form field wrapper that handles label,
+ * description, error message, and accessibility attributes.
+ *
+ * Wraps any form control (Input, Textarea, Select, Checkbox, etc.) with
+ * consistent layout, labeling, and error display. Automatically generates
+ * and wires up `htmlFor`, `aria-describedby`, and `aria-invalid` attributes.
+ *
+ * For maximum accessibility, use the render-function form of `children`
+ * to receive and spread the control props:
+ *
+ * ```tsx
+ * <FormField label="Email" error={errors.email}>
+ *   {(controlProps) => <Input {...controlProps} type="email" />}
+ * </FormField>
+ * ```
+ *
+ * Alternatively, pass a single child element and manually set its `id`
+ * to match the `htmlFor` prop (or rely on auto-generated ids and the
+ * native label click behavior).
+ *
+ * Accessibility:
+ *   - Label is linked to the control via `htmlFor` / `id`
+ *   - Description is linked via `aria-describedby`
+ *   - Error message is linked via `aria-describedby` (replaces description)
+ *   - Error state sets `aria-invalid="true"` on the control (via render fn)
+ *   - Required state adds visual indicator and `aria-required` (via render fn)
+ *   - Disabled state is propagated to all visual elements
+ *
+ * @example
+ * ```tsx
+ * // Basic vertical layout
+ * <FormField label="Email" description="We'll never share your email.">
+ *   <Input id="email" type="email" />
+ * </FormField>
+ *
+ * // With error
+ * <FormField label="Password" required error="Password is required.">
+ *   <Input id="password" type="password" variant="error" />
+ * </FormField>
+ *
+ * // Render function for auto-wired accessibility
+ * <FormField label="Name" required error={errors.name}>
+ *   {(props) => <Input {...props} placeholder="Enter your name" />}
+ * </FormField>
+ *
+ * // Horizontal layout
+ * <FormField label="Username" orientation="horizontal">
+ *   <Input id="username" />
+ * </FormField>
+ *
+ * // Small size
+ * <FormField label="Code" size="sm" description="6-digit code">
+ *   <Input id="code" size="sm" />
+ * </FormField>
+ *
+ * // Disabled
+ * <FormField label="Locked" disabled>
+ *   <Input id="locked" disabled value="Cannot edit" />
+ * </FormField>
+ * ```
+ */
+declare const FormField: react.ForwardRefExoticComponent<FormFieldProps & react.RefAttributes<HTMLDivElement>>;
+
+export { FormField, type FormFieldControlProps, type FormFieldOrientation, type FormFieldProps, type FormFieldSize };

package/dist/components/form-field.d.ts

@@ -0,0 +1,163 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type FormFieldSize = "sm" | "md" | "lg";
+type FormFieldOrientation = "vertical" | "horizontal";
+interface FormFieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    /**
+     * Label text for the form field.
+     * Rendered as a `<label>` element linked to the control via `htmlFor`.
+     */
+    label?: ReactNode;
+    /**
+     * Description / helper text displayed below the label (or below the
+     * control in vertical orientation).
+     * Linked to the control via `aria-describedby`.
+     */
+    description?: ReactNode;
+    /**
+     * Error message displayed below the control.
+     * When provided, the field is treated as invalid and the error
+     * replaces the description.
+     * Linked to the control via `aria-describedby`.
+     */
+    error?: ReactNode;
+    /**
+     * Size of the form field. Controls label text size, spacing, and
+     * provides the correct sizing context for child controls.
+     * @default "md"
+     */
+    size?: FormFieldSize;
+    /**
+     * Layout orientation for the label + control pair.
+     * - `"vertical"` — label stacked above control (default)
+     * - `"horizontal"` — label to the left, control to the right
+     * @default "vertical"
+     */
+    orientation?: FormFieldOrientation;
+    /**
+     * Whether the field is required.
+     * Displays a red asterisk (*) after the label text.
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Whether the field is disabled.
+     * Reduces opacity on all elements (label, description, error).
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * The HTML `id` attribute for the form control.
+     * When provided, the label's `htmlFor` will point to this id, and
+     * `aria-describedby` / `aria-errormessage` ids are derived from it.
+     * When omitted, a unique id is auto-generated.
+     */
+    htmlFor?: string;
+    /**
+     * Additional CSS classes for the label element.
+     */
+    labelClassName?: string;
+    /**
+     * Additional CSS classes for the description element.
+     */
+    descriptionClassName?: string;
+    /**
+     * Additional CSS classes for the error message element.
+     */
+    errorClassName?: string;
+    /**
+     * Additional CSS classes for the control wrapper element
+     * (the container around the children).
+     */
+    controlClassName?: string;
+    /**
+     * The form control(s) to render inside the field.
+     * Can be a single element or a render function that receives
+     * accessibility props to spread on the control.
+     */
+    children: ReactNode | ((props: FormFieldControlProps) => ReactNode);
+    /** Additional CSS classes to merge on the root element. */
+    className?: string;
+}
+/**
+ * Props passed to the render-function form of `children`.
+ * Spread these on your form control for full accessibility.
+ */
+interface FormFieldControlProps {
+    /** The id to set on the control element. */
+    id: string;
+    /** Space-separated ids of description and/or error elements. */
+    "aria-describedby"?: string;
+    /** Whether the control is in an invalid state. */
+    "aria-invalid"?: boolean;
+    /** Whether the control is required. */
+    "aria-required"?: boolean;
+    /** Whether the control is disabled. */
+    disabled?: boolean;
+}
+/**
+ * FormField — a composable form field wrapper that handles label,
+ * description, error message, and accessibility attributes.
+ *
+ * Wraps any form control (Input, Textarea, Select, Checkbox, etc.) with
+ * consistent layout, labeling, and error display. Automatically generates
+ * and wires up `htmlFor`, `aria-describedby`, and `aria-invalid` attributes.
+ *
+ * For maximum accessibility, use the render-function form of `children`
+ * to receive and spread the control props:
+ *
+ * ```tsx
+ * <FormField label="Email" error={errors.email}>
+ *   {(controlProps) => <Input {...controlProps} type="email" />}
+ * </FormField>
+ * ```
+ *
+ * Alternatively, pass a single child element and manually set its `id`
+ * to match the `htmlFor` prop (or rely on auto-generated ids and the
+ * native label click behavior).
+ *
+ * Accessibility:
+ *   - Label is linked to the control via `htmlFor` / `id`
+ *   - Description is linked via `aria-describedby`
+ *   - Error message is linked via `aria-describedby` (replaces description)
+ *   - Error state sets `aria-invalid="true"` on the control (via render fn)
+ *   - Required state adds visual indicator and `aria-required` (via render fn)
+ *   - Disabled state is propagated to all visual elements
+ *
+ * @example
+ * ```tsx
+ * // Basic vertical layout
+ * <FormField label="Email" description="We'll never share your email.">
+ *   <Input id="email" type="email" />
+ * </FormField>
+ *
+ * // With error
+ * <FormField label="Password" required error="Password is required.">
+ *   <Input id="password" type="password" variant="error" />
+ * </FormField>
+ *
+ * // Render function for auto-wired accessibility
+ * <FormField label="Name" required error={errors.name}>
+ *   {(props) => <Input {...props} placeholder="Enter your name" />}
+ * </FormField>
+ *
+ * // Horizontal layout
+ * <FormField label="Username" orientation="horizontal">
+ *   <Input id="username" />
+ * </FormField>
+ *
+ * // Small size
+ * <FormField label="Code" size="sm" description="6-digit code">
+ *   <Input id="code" size="sm" />
+ * </FormField>
+ *
+ * // Disabled
+ * <FormField label="Locked" disabled>
+ *   <Input id="locked" disabled value="Cannot edit" />
+ * </FormField>
+ * ```
+ */
+declare const FormField: react.ForwardRefExoticComponent<FormFieldProps & react.RefAttributes<HTMLDivElement>>;
+
+export { FormField, type FormFieldControlProps, type FormFieldOrientation, type FormFieldProps, type FormFieldSize };

package/dist/components/form-field.mjs

@@ -0,0 +1,167 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../utils/cn.mjs";
+import { forwardRef, useId } from "react";
+const labelSizeMap = {
+  sm: "text-xs leading-4 font-medium",
+  md: "text-sm leading-5 font-medium",
+  lg: "text-sm leading-5 font-semibold"
+};
+const descriptionSizeMap = {
+  sm: "text-[11px] leading-4",
+  md: "text-xs leading-4",
+  lg: "text-xs leading-4"
+};
+const errorSizeMap = {
+  sm: "text-[11px] leading-4",
+  md: "text-xs leading-4",
+  lg: "text-xs leading-4"
+};
+const gapSizeMap = {
+  sm: "gap-1",
+  md: "gap-1.5",
+  lg: "gap-2"
+};
+const horizontalLabelWidthMap = {
+  sm: "w-24 shrink-0",
+  md: "w-32 shrink-0",
+  lg: "w-40 shrink-0"
+};
+function RequiredIndicator() {
+  return /* @__PURE__ */ jsx("span", { className: "text-danger ml-0.5", "aria-hidden": "true", children: "*" });
+}
+const FormField = forwardRef(
+  function FormField2({
+    label,
+    description,
+    error,
+    size = "md",
+    orientation = "vertical",
+    required = false,
+    disabled = false,
+    htmlFor: htmlForProp,
+    labelClassName,
+    descriptionClassName,
+    errorClassName,
+    controlClassName,
+    children,
+    className,
+    ...rest
+  }, ref) {
+    const autoId = useId();
+    const fieldId = htmlForProp ?? autoId;
+    const descriptionId = description ? `${fieldId}-description` : void 0;
+    const errorId = error ? `${fieldId}-error` : void 0;
+    const hasError = !!error;
+    const ariaDescribedBy = hasError ? errorId : descriptionId ? descriptionId : void 0;
+    const controlProps = {
+      id: fieldId,
+      ...ariaDescribedBy ? { "aria-describedby": ariaDescribedBy } : {},
+      ...hasError ? { "aria-invalid": true } : {},
+      ...required ? { "aria-required": true } : {},
+      ...disabled ? { disabled: true } : {}
+    };
+    const renderedChildren = typeof children === "function" ? children(controlProps) : children;
+    const isHorizontal = orientation === "horizontal";
+    const labelElement = label ? /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor: fieldId,
+        className: cn(
+          labelSizeMap[size],
+          "text-foreground",
+          "select-none",
+          disabled && "opacity-50 cursor-not-allowed",
+          !disabled && "cursor-pointer",
+          isHorizontal && horizontalLabelWidthMap[size],
+          isHorizontal && "pt-2",
+          // Align with control baseline
+          labelClassName
+        ),
+        children: [
+          label,
+          required && /* @__PURE__ */ jsx(RequiredIndicator, {})
+        ]
+      }
+    ) : null;
+    const descriptionElement = description && !hasError ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        id: descriptionId,
+        className: cn(
+          descriptionSizeMap[size],
+          "text-muted-foreground",
+          disabled && "opacity-50",
+          descriptionClassName
+        ),
+        children: description
+      }
+    ) : null;
+    const errorElement = hasError ? /* @__PURE__ */ jsx(
+      "span",
+      {
+        id: errorId,
+        role: "alert",
+        className: cn(
+          errorSizeMap[size],
+          "text-danger",
+          disabled && "opacity-50",
+          errorClassName
+        ),
+        children: error
+      }
+    ) : null;
+    if (!isHorizontal) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          className: cn("flex flex-col", gapSizeMap[size], className),
+          "data-ds": "",
+          "data-ds-component": "form-field",
+          "data-ds-size": size,
+          "data-ds-orientation": orientation,
+          ...hasError ? { "data-ds-error": "" } : {},
+          ...disabled ? { "data-ds-disabled": "" } : {},
+          ...required ? { "data-ds-required": "" } : {},
+          ...rest,
+          children: [
+            (labelElement || descriptionElement) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-0.5", children: [
+              labelElement,
+              descriptionElement
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: cn(controlClassName), children: renderedChildren }),
+            errorElement
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-row items-start", gapSizeMap[size], className),
+        "data-ds": "",
+        "data-ds-component": "form-field",
+        "data-ds-size": size,
+        "data-ds-orientation": orientation,
+        ...hasError ? { "data-ds-error": "" } : {},
+        ...disabled ? { "data-ds-disabled": "" } : {},
+        ...required ? { "data-ds-required": "" } : {},
+        ...rest,
+        children: [
+          labelElement,
+          /* @__PURE__ */ jsxs("div", { className: cn("flex flex-1 flex-col", gapSizeMap[size]), children: [
+            /* @__PURE__ */ jsx("div", { className: cn(controlClassName), children: renderedChildren }),
+            descriptionElement,
+            errorElement
+          ] })
+        ]
+      }
+    );
+  }
+);
+FormField.displayName = "FormField";
+export {
+  FormField
+};

package/dist/components/hover-card.cjs

@@ -0,0 +1,99 @@
+"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 hover_card_exports = {};
+__export(hover_card_exports, {
+  HoverCard: () => HoverCard,
+  HoverCardContent: () => HoverCardContent,
+  HoverCardTrigger: () => HoverCardTrigger
+});
+module.exports = __toCommonJS(hover_card_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_motion = require("../motion/index.cjs");
+var import_cn = require("../utils/cn.cjs");
+var import_framer_motion = require("framer-motion");
+var import_radix_ui = require("radix-ui");
+var import_react = require("react");
+function HoverCard({
+  openDelay = 200,
+  closeDelay = 150,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_radix_ui.HoverCard.Root,
+    {
+      openDelay,
+      closeDelay,
+      ...props
+    }
+  );
+}
+HoverCard.displayName = "HoverCard";
+const HoverCardTrigger = import_radix_ui.HoverCard.Trigger;
+HoverCardTrigger.displayName = "HoverCardTrigger";
+const HoverCardContent = (0, import_react.forwardRef)(function HoverCardContent2({
+  side = "bottom",
+  align = "center",
+  sideOffset = 8,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const shouldReduce = (0, import_framer_motion.useReducedMotion)();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.HoverCard.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_radix_ui.HoverCard.Content,
+    {
+      ref,
+      side,
+      align,
+      sideOffset,
+      asChild: true,
+      ...rest,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_framer_motion.motion.div,
+        {
+          className: (0, import_cn.cn)(
+            "z-popover w-64 rounded-lg border border-border bg-popover p-4 shadow-lg outline-none",
+            "text-sm text-popover-foreground",
+            className
+          ),
+          variants: shouldReduce ? void 0 : import_motion.scaleIn.variants,
+          initial: shouldReduce ? { opacity: 0 } : "initial",
+          animate: shouldReduce ? { opacity: 1 } : "animate",
+          exit: shouldReduce ? { opacity: 0 } : "exit",
+          transition: shouldReduce ? { duration: 0.12 } : import_motion.scaleIn.transition,
+          "data-ds": "",
+          "data-ds-component": "hover-card-content",
+          "data-ds-animated": "",
+          children: [
+            children,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.HoverCard.Arrow, { className: "fill-border" })
+          ]
+        }
+      )
+    }
+  ) });
+});
+HoverCardContent.displayName = "HoverCardContent";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger
+});

package/dist/components/hover-card.d.cts

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HoverCard as HoverCard$1 } from 'radix-ui';
+
+type HoverCardSide = "top" | "right" | "bottom" | "left";
+type HoverCardAlign = "start" | "center" | "end";
+interface HoverCardProps extends ComponentPropsWithoutRef<typeof HoverCard$1.Root> {
+    openDelay?: number;
+    closeDelay?: number;
+}
+interface HoverCardTriggerProps extends ComponentPropsWithoutRef<typeof HoverCard$1.Trigger> {
+}
+interface HoverCardContentProps extends ComponentPropsWithoutRef<typeof HoverCard$1.Content> {
+    side?: HoverCardSide;
+    align?: HoverCardAlign;
+    sideOffset?: number;
+    className?: string;
+    children?: ReactNode;
+}
+declare function HoverCard({ openDelay, closeDelay, ...props }: HoverCardProps): react_jsx_runtime.JSX.Element;
+declare namespace HoverCard {
+    var displayName: string;
+}
+declare const HoverCardTrigger: react.ForwardRefExoticComponent<HoverCard$1.HoverCardTriggerProps & react.RefAttributes<HTMLAnchorElement>>;
+declare const HoverCardContent: react.ForwardRefExoticComponent<HoverCardContentProps & react.RefAttributes<HTMLDivElement>>;
+
+export { HoverCard, type HoverCardAlign, HoverCardContent, type HoverCardContentProps, type HoverCardProps, type HoverCardSide, HoverCardTrigger, type HoverCardTriggerProps };

package/dist/components/hover-card.d.ts

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { HoverCard as HoverCard$1 } from 'radix-ui';
+
+type HoverCardSide = "top" | "right" | "bottom" | "left";
+type HoverCardAlign = "start" | "center" | "end";
+interface HoverCardProps extends ComponentPropsWithoutRef<typeof HoverCard$1.Root> {
+    openDelay?: number;
+    closeDelay?: number;
+}
+interface HoverCardTriggerProps extends ComponentPropsWithoutRef<typeof HoverCard$1.Trigger> {
+}
+interface HoverCardContentProps extends ComponentPropsWithoutRef<typeof HoverCard$1.Content> {
+    side?: HoverCardSide;
+    align?: HoverCardAlign;
+    sideOffset?: number;
+    className?: string;
+    children?: ReactNode;
+}
+declare function HoverCard({ openDelay, closeDelay, ...props }: HoverCardProps): react_jsx_runtime.JSX.Element;
+declare namespace HoverCard {
+    var displayName: string;
+}
+declare const HoverCardTrigger: react.ForwardRefExoticComponent<HoverCard$1.HoverCardTriggerProps & react.RefAttributes<HTMLAnchorElement>>;
+declare const HoverCardContent: react.ForwardRefExoticComponent<HoverCardContentProps & react.RefAttributes<HTMLDivElement>>;
+
+export { HoverCard, type HoverCardAlign, HoverCardContent, type HoverCardContentProps, type HoverCardProps, type HoverCardSide, HoverCardTrigger, type HoverCardTriggerProps };