@work-rjkashyap/unified-ui 0.3.3 → 0.3.5

package/dist/components/badge.cjs

@@ -0,0 +1,325 @@
+"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 badge_exports = {};
+__export(badge_exports, {
+  Badge: () => Badge,
+  Tag: () => Tag,
+  badgeVariants: () => badgeVariants,
+  tagVariants: () => tagVariants
+});
+module.exports = __toCommonJS(badge_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_motion = require("../motion/index");
+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_framer_motion = require("framer-motion");
+var import_react = require("react");
+const badgeVariants = (0, import_class_variance_authority.cva)(
+  // Base styles — shared across all variants and sizes
+  [
+    // Layout
+    "inline-flex items-center gap-1.5",
+    // Shape — pill by default
+    "rounded-full",
+    // Typography
+    "font-medium leading-none whitespace-nowrap",
+    // Transition
+    "transition-[color,background-color,border-color,box-shadow,opacity]",
+    "duration-fast ease-standard",
+    // Prevent text selection
+    "select-none",
+    // Shrink protection
+    "shrink-0"
+  ],
+  {
+    variants: {
+      // -----------------------------------------------------------------
+      // Visual Variants
+      // -----------------------------------------------------------------
+      variant: {
+        /**
+         * Default — neutral, muted background.
+         * Use for generic labels, tags, and metadata.
+         */
+        default: ["bg-muted text-foreground", "border border-transparent"],
+        /**
+         * Primary — uses brand/primary color.
+         * Use for highlighting primary categories or active filters.
+         */
+        primary: [
+          "bg-primary-muted text-primary-muted-foreground",
+          "border border-transparent"
+        ],
+        /**
+         * Secondary — subdued variant with visible border.
+         * Use for archived items, subtle categorization.
+         */
+        secondary: [
+          "bg-secondary text-secondary-foreground",
+          "border border-border"
+        ],
+        /**
+         * Success — positive status indicator.
+         * Use for "active", "complete", "approved" states.
+         */
+        success: [
+          "bg-success-muted text-success-muted-foreground",
+          "border border-transparent"
+        ],
+        /**
+         * Warning — caution status indicator.
+         * Use for "pending", "review", "expiring" states.
+         */
+        warning: [
+          "bg-warning-muted text-warning-muted-foreground",
+          "border border-transparent"
+        ],
+        /**
+         * Danger — negative/critical status indicator.
+         * Use for "error", "failed", "blocked", "critical" states.
+         */
+        danger: [
+          "bg-danger-muted text-danger-muted-foreground",
+          "border border-transparent"
+        ],
+        /**
+         * Info — informational status indicator.
+         * Use for "new", "beta", "info", "note" labels.
+         */
+        info: [
+          "bg-info-muted text-info-muted-foreground",
+          "border border-transparent"
+        ],
+        /**
+         * Outline — transparent background with visible border.
+         * Use for subtle categorization that doesn't compete with content.
+         */
+        outline: ["bg-transparent text-foreground", "border border-border"]
+      },
+      // -----------------------------------------------------------------
+      // Size Variants
+      // -----------------------------------------------------------------
+      size: {
+        /**
+         * Small — very compact, for inline metadata and dense UIs.
+         * Height: ~20px, Font: 11px
+         */
+        sm: "px-2 py-0.5 text-[11px] gap-1",
+        /**
+         * Medium — default badge size, comfortable readability.
+         * Height: ~24px, Font: 12px
+         */
+        md: "px-2.5 py-1 text-xs gap-1.5",
+        /**
+         * Large — prominent badge for larger touch targets and filter chips.
+         * Height: ~28px, Font: 14px
+         */
+        lg: "px-3 py-1.5 text-sm gap-2"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+const dotColorMap = {
+  default: "bg-muted-foreground",
+  primary: "bg-primary",
+  secondary: "bg-foreground",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-danger",
+  info: "bg-info",
+  outline: "bg-foreground"
+};
+const dotSizeMap = {
+  sm: "size-1.5",
+  md: "size-2",
+  lg: "size-2"
+};
+function RemoveButton({
+  size,
+  label,
+  disabled,
+  onClick
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      className: (0, import_cn.cn)(
+        "inline-flex items-center justify-center shrink-0",
+        "rounded-full",
+        "text-current opacity-60",
+        "hover:opacity-100",
+        "transition-opacity duration-fast",
+        "focus-visible:outline-none focus-visible:border-current",
+        "disabled:pointer-events-none disabled:opacity-40",
+        // Slightly negative margin to visually tuck the button in
+        "-mr-0.5 ml-0.5",
+        size === "sm" ? "size-3" : size === "lg" ? "size-4" : "size-3.5",
+        import_focus_ring.focusRingClasses
+      ),
+      "aria-label": label,
+      tabIndex: 0,
+      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.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: size === "sm" ? "size-2.5" : size === "lg" ? "size-3.5" : "size-3",
+          "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" })
+          ]
+        }
+      )
+    }
+  );
+}
+function DotIndicator({
+  variant,
+  size
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      className: (0, import_cn.cn)(
+        "shrink-0 rounded-full",
+        dotSizeMap[size],
+        dotColorMap[variant]
+      ),
+      "aria-hidden": "true"
+    }
+  );
+}
+const Badge = (0, import_react.forwardRef)(function Badge2({
+  variant = "default",
+  size = "md",
+  dot = false,
+  removable = false,
+  dismissible = false,
+  onRemove,
+  onDismiss,
+  removeLabel,
+  dismissLabel,
+  as: Component = "span",
+  icon,
+  avatar,
+  disabled = false,
+  animated = false,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const shouldReduce = (0, import_framer_motion.useReducedMotion)();
+  const showDismiss = removable || dismissible;
+  const handleDismissClick = (e) => {
+    onRemove?.(e);
+    onDismiss?.(e);
+  };
+  const resolvedLabel = removeLabel ?? dismissLabel ?? "Remove";
+  const iconSizeClass = size === "sm" ? "[&>svg]:size-2.5" : size === "lg" ? "[&>svg]:size-3.5" : "[&>svg]:size-3";
+  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    avatar && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0 -ml-0.5", children: avatar }),
+    dot && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DotIndicator, { variant, size }),
+    icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_cn.cn)("shrink-0", iconSizeClass), "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children }),
+    showDismiss && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      RemoveButton,
+      {
+        size,
+        label: resolvedLabel,
+        disabled,
+        onClick: handleDismissClick
+      }
+    )
+  ] });
+  const classes = (0, import_cn.cn)(
+    badgeVariants({ variant, size }),
+    disabled && "opacity-50 pointer-events-none",
+    className
+  );
+  const dataAttrs = {
+    "data-ds": "",
+    "data-ds-component": "badge",
+    "data-ds-variant": variant,
+    "data-ds-size": size,
+    ...disabled ? { "data-ds-disabled": "" } : {},
+    ...animated ? { "data-ds-animated": "" } : {}
+  };
+  if (animated && !shouldReduce) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_framer_motion.motion.span,
+      {
+        ref,
+        className: classes,
+        variants: import_motion.popSubtle.variants,
+        initial: "initial",
+        animate: "animate",
+        transition: import_motion.popSubtle.transition,
+        ...dataAttrs,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Component,
+    {
+      ref,
+      className: classes,
+      "aria-disabled": disabled || void 0,
+      ...dataAttrs,
+      ...rest,
+      children: content
+    }
+  );
+});
+Badge.displayName = "Badge";
+const Tag = (0, import_react.forwardRef)(function Tag2({ animated = true, dismissLabel = "Remove tag", ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Badge,
+    {
+      ref,
+      animated,
+      dismissLabel,
+      ...rest
+    }
+  );
+});
+Tag.displayName = "Tag";
+const tagVariants = badgeVariants;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Badge,
+  Tag,
+  badgeVariants,
+  tagVariants
+});

package/dist/components/badge.d.cts

@@ -0,0 +1,259 @@
+import * as react from 'react';
+import { ElementType, ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+
+declare const badgeVariants: (props?: ({
+    variant?: "outline" | "info" | "success" | "warning" | "danger" | "default" | "primary" | "secondary" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type BadgeVariant = "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "info" | "outline";
+type BadgeSize = "sm" | "md" | "lg";
+interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">, VariantProps<typeof badgeVariants> {
+    /**
+     * Visual variant of the badge.
+     * @default "default"
+     */
+    variant?: BadgeVariant;
+    /**
+     * Size of the badge.
+     * @default "md"
+     */
+    size?: BadgeSize;
+    /**
+     * Whether to show a colored dot indicator before the text.
+     * Useful for status indicators (online/offline, active/inactive).
+     * The dot color automatically matches the badge variant.
+     * @default false
+     */
+    dot?: boolean;
+    /**
+     * Whether the badge can be dismissed/removed.
+     * When true, a small "×" button is rendered after the text.
+     * Alias for `dismissible` — both work identically.
+     * @default false
+     */
+    removable?: boolean;
+    /**
+     * Whether the badge can be dismissed/removed.
+     * When true, a small "×" button is rendered after the text.
+     * Alias for `removable` — both work identically.
+     * @default false
+     */
+    dismissible?: boolean;
+    /**
+     * Callback fired when the remove/dismiss (×) button is clicked.
+     * Only relevant when `removable` or `dismissible` is true.
+     */
+    onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Callback fired when the remove/dismiss (×) button is clicked.
+     * Alias for `onRemove` — both work identically.
+     * Only relevant when `removable` or `dismissible` is true.
+     */
+    onDismiss?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Accessible label for the remove/dismiss button.
+     * Screen readers will announce this when the remove button is focused.
+     * @default "Remove"
+     */
+    removeLabel?: string;
+    /**
+     * Accessible label for the remove/dismiss button.
+     * Alias for `removeLabel` — both work identically.
+     * @default "Remove"
+     */
+    dismissLabel?: string;
+    /**
+     * The HTML element or component to render as.
+     * @default "span"
+     */
+    as?: ElementType;
+    /**
+     * Icon to display before the text (after the dot if both are present).
+     * Typically a small Lucide icon.
+     */
+    icon?: ReactNode;
+    /**
+     * Avatar element to display before the label.
+     * Common for user-mention chips and team tags.
+     */
+    avatar?: ReactNode;
+    /**
+     * Whether the badge is disabled.
+     * Reduces opacity and disables pointer events.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to animate the badge entrance with a subtle pop animation.
+     * Uses the `popSubtle` Framer Motion preset.
+     * @default false
+     */
+    animated?: boolean;
+    /** Content to render inside the badge. */
+    children?: ReactNode;
+    /** Additional CSS classes to merge. */
+    className?: string;
+}
+/**
+ * Badge — a compact inline label for categorization, status, and metadata.
+ *
+ * This is the unified Badge component that merges the former Badge and Tag
+ * components into a single API. All features from both are available:
+ * - Dot indicators, icons, avatars, removable/dismissible, polymorphic `as`,
+ *   disabled state, and optional Framer Motion animation.
+ *
+ * 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.
+ *
+ * Badges are non-interactive by default (rendered as `<span>`). For
+ * clickable badges, use `as="button"` or `as="a"` and add appropriate
+ * event handlers.
+ *
+ * Accessibility:
+ *   - Color is never the sole means of conveying information — use text labels
+ *   - Dot indicators are decorative (`aria-hidden`)
+ *   - Remove/dismiss button has a configurable `aria-label` (defaults to "Remove")
+ *   - Semantic colors meet WCAG AA contrast on their muted backgrounds
+ *   - Disabled state applies `pointer-events-none` and reduced opacity
+ *
+ * @example
+ * ```tsx
+ * // Basic variants
+ * <Badge>Default</Badge>
+ * <Badge variant="primary">Primary</Badge>
+ * <Badge variant="secondary">Secondary</Badge>
+ * <Badge variant="success">Active</Badge>
+ * <Badge variant="warning">Pending</Badge>
+ * <Badge variant="danger">Critical</Badge>
+ * <Badge variant="info">New</Badge>
+ * <Badge variant="outline">Draft</Badge>
+ *
+ * // Sizes
+ * <Badge size="sm">Small</Badge>
+ * <Badge size="md">Medium</Badge>
+ * <Badge size="lg">Large</Badge>
+ *
+ * // Dot indicator (status badges)
+ * <Badge variant="success" dot>Online</Badge>
+ * <Badge variant="danger" dot>Offline</Badge>
+ * <Badge variant="warning" dot>Away</Badge>
+ *
+ * // With icon
+ * <Badge variant="info" icon={<StarIcon className="size-3" />}>
+ *   Featured
+ * </Badge>
+ *
+ * // With avatar (user mention chips)
+ * <Badge variant="secondary" avatar={<Avatar name="RK" size="xs" className="size-4" />}>
+ *   @rjkashyap
+ * </Badge>
+ *
+ * // Removable (Badge-style API)
+ * <Badge variant="primary" removable onRemove={handleRemove}>
+ *   Tag Name
+ * </Badge>
+ *
+ * // Dismissible (Tag-style API — both work identically)
+ * <Badge variant="primary" dismissible onDismiss={handleDismiss}>
+ *   React
+ * </Badge>
+ *
+ * // Animated entrance
+ * <Badge variant="success" animated>Live</Badge>
+ *
+ * // Disabled
+ * <Badge variant="primary" disabled>Disabled</Badge>
+ *
+ * // As a link
+ * <Badge as="a" href="/category/react" variant="primary">
+ *   React
+ * </Badge>
+ *
+ * // As a button
+ * <Badge as="button" variant="outline" onClick={handleClick}>
+ *   Filter
+ * </Badge>
+ * ```
+ */
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+type TagVariant = BadgeVariant;
+type TagSize = BadgeSize;
+interface TagProps extends Omit<BadgeProps, "as" | "dot" | "removable" | "onRemove" | "removeLabel"> {
+    /**
+     * Visual variant of the tag.
+     * @default "default"
+     */
+    variant?: TagVariant;
+    /**
+     * Size of the tag.
+     * @default "md"
+     */
+    size?: TagSize;
+    /**
+     * Leading avatar or icon slot.
+     */
+    avatar?: ReactNode;
+    /**
+     * Trailing icon (shown before close button).
+     */
+    icon?: ReactNode;
+    /**
+     * Whether the tag can be dismissed.
+     */
+    dismissible?: boolean;
+    /**
+     * Called when the dismiss button is clicked.
+     */
+    onDismiss?: () => void;
+    /**
+     * Accessible label for the dismiss button.
+     * @default "Remove tag"
+     */
+    dismissLabel?: string;
+    /**
+     * Whether the tag is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Whether to animate the badge entrance.
+     * Tags default to `true` to preserve original Tag behavior.
+     * @default true
+     */
+    animated?: boolean;
+    /** Additional CSS classes. */
+    className?: string;
+    children?: ReactNode;
+}
+/**
+ * Tag — backward-compatible alias for Badge.
+ *
+ * Renders an animated Badge by default (`animated={true}`).
+ * All Tag-specific props (dismissible, onDismiss, avatar, disabled)
+ * map directly to Badge props.
+ *
+ * @deprecated Use `Badge` directly with `animated` prop if entrance
+ *   animation is desired. The `Tag` alias will be removed in a future
+ *   major version.
+ *
+ * @example
+ * ```tsx
+ * <Tag variant="primary" dismissible onDismiss={handleDismiss}>
+ *   React
+ * </Tag>
+ *
+ * // Equivalent Badge usage:
+ * <Badge variant="primary" dismissible onDismiss={handleDismiss} animated>
+ *   React
+ * </Badge>
+ * ```
+ */
+declare const Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<HTMLSpanElement>>;
+declare const tagVariants: (props?: ({
+    variant?: "outline" | "info" | "success" | "warning" | "danger" | "default" | "primary" | "secondary" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+export { Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Tag, type TagProps, type TagSize, type TagVariant, badgeVariants, tagVariants };