@nice2dev/icons 1.3.15 → 1.3.17

package/dist/esm/headless-ui.js

@@ -1,5 +1,4 @@
-import React, { forwardRef, createElement } from 'react';
-
+import React, { forwardRef, createElement } from "react";
 /**
  * @file headless-ui.tsx
  * @description Headless UI / shadcn/ui compatibility layer for @nice2dev/icons
@@ -27,393 +26,283 @@ import React, { forwardRef, createElement } from 'react';
  * @since 2026-03
  * @license MIT
  */
-/* ────────────────────────────────────────────────────────────────────────────
-   SLOT IMPLEMENTATION
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Simple Slot implementation for asChild pattern.
- * Compatible with Radix UI's Slot component behavior.
- */
 const Slot = /* @__PURE__ */ Object.assign(
-/* @__PURE__ */ forwardRef(({ children, ...props }, forwardedRef) => {
-    if (!React.isValidElement(children)) {
+  /* @__PURE__ */ forwardRef(
+    ({ children, ...props }, forwardedRef) => {
+      if (!React.isValidElement(children)) {
         return null;
-    }
-    return React.cloneElement(children, {
+      }
+      return React.cloneElement(children, {
         ...props,
         ...children.props,
-        ref: forwardedRef,
-    });
-}), { displayName: 'Slot' });
-/* ────────────────────────────────────────────────────────────────────────────
-   FORWARD REF WRAPPER
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Wraps a NtdIcon component with forwardRef for Headless UI / Radix compatibility.
- * Supports the asChild pattern used by shadcn/ui and Radix primitives.
- *
- * @param IconComponent - The NtdIcon component to wrap
- * @param displayName - Optional display name for debugging
- * @returns A forwardRef-wrapped icon component
- *
- * @example
- * ```tsx
- * import { NtdUser, NtdSettings } from '@nice2dev/icons';
- * import { forwardRefIcon } from '@nice2dev/icons/headless-ui';
- *
- * // Create ref-compatible versions
- * const UserIcon = forwardRefIcon(NtdUser);
- * const SettingsIcon = forwardRefIcon(NtdSettings, 'SettingsIcon');
- *
- * // Use with Radix UI / shadcn
- * <DropdownMenu.Trigger asChild>
- *   <SettingsIcon className="h-5 w-5" />
- * </DropdownMenu.Trigger>
- * ```
- */
+        ref: forwardedRef
+      });
+    }
+  ),
+  { displayName: "Slot" }
+);
 function forwardRefIcon(IconComponent, displayName) {
-    const WrappedIcon = forwardRef(({ asChild, children, ...props }, ref) => {
-        if (asChild && React.isValidElement(children)) {
-            return createElement(Slot, { ref, ...props }, children);
-        }
-        return createElement(IconComponent, { ...props, ref });
-    });
-    WrappedIcon.displayName = displayName || IconComponent.displayName || 'NtdIcon';
-    return WrappedIcon;
+  const WrappedIcon = forwardRef(
+    ({ asChild, children, ...props }, ref) => {
+      if (asChild && React.isValidElement(children)) {
+        return createElement(Slot, { ref, ...props }, children);
+      }
+      return createElement(IconComponent, { ...props, ref });
+    }
+  );
+  WrappedIcon.displayName = displayName || IconComponent.displayName || "NtdIcon";
+  return WrappedIcon;
 }
-/* ────────────────────────────────────────────────────────────────────────────
-   SHADCN/UI PRESET
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * shadcn/ui icon size presets matching their button sizes
- */
 const SHADCN_ICON_SIZES = {
-    default: '1rem', // 16px - matches default button text
-    sm: '0.875rem', // 14px - matches sm button
-    lg: '1.125rem', // 18px - matches lg button
-    icon: '1rem', // 16px - for icon-only buttons
+  default: "1rem",
+  // 16px - matches default button text
+  sm: "0.875rem",
+  // 14px - matches sm button
+  lg: "1.125rem",
+  // 18px - matches lg button
+  icon: "1rem"
+  // 16px - for icon-only buttons
 };
-/**
- * shadcn/ui color tokens mapping.
- *
- * These names belong to the host application: shadcn declares them on :root as
- * HSL triplets (`--primary: 222 47% 11%`), which is why every value wraps them
- * in `hsl()`. They are deliberately not `--nice-*` tokens — ours hold hex, so
- * `hsl(#3b82f6)` would be invalid and the colour would be dropped. The token
- * audit skips this file for the same reason.
- */
 const SHADCN_COLOR_TOKENS = {
-    foreground: 'hsl(var(--foreground))',
-    mutedForeground: 'hsl(var(--muted-foreground))',
-    primary: 'hsl(var(--primary))',
-    primaryForeground: 'hsl(var(--primary-foreground))',
-    secondary: 'hsl(var(--secondary))',
-    secondaryForeground: 'hsl(var(--secondary-foreground))',
-    accent: 'hsl(var(--accent))',
-    accentForeground: 'hsl(var(--accent-foreground))',
-    destructive: 'hsl(var(--destructive))',
-    destructiveForeground: 'hsl(var(--destructive-foreground))',
+  foreground: "hsl(var(--foreground))",
+  mutedForeground: "hsl(var(--muted-foreground))",
+  primary: "hsl(var(--primary))",
+  primaryForeground: "hsl(var(--primary-foreground))",
+  secondary: "hsl(var(--secondary))",
+  secondaryForeground: "hsl(var(--secondary-foreground))",
+  accent: "hsl(var(--accent))",
+  accentForeground: "hsl(var(--accent-foreground))",
+  destructive: "hsl(var(--destructive))",
+  destructiveForeground: "hsl(var(--destructive-foreground))"
 };
-/**
- * Creates shadcn/ui themed icon props
- *
- * @param variant - shadcn button variant
- * @param size - shadcn button size
- * @returns Props object for the icon
- */
-function getShadcnIconProps(variant = 'default', size = 'default') {
-    const colorMap = {
-        default: SHADCN_COLOR_TOKENS.primaryForeground,
-        destructive: SHADCN_COLOR_TOKENS.destructiveForeground,
-        outline: SHADCN_COLOR_TOKENS.foreground,
-        secondary: SHADCN_COLOR_TOKENS.secondaryForeground,
-        ghost: SHADCN_COLOR_TOKENS.foreground,
-        link: SHADCN_COLOR_TOKENS.primary,
-    };
-    return {
-        size: SHADCN_ICON_SIZES[size],
-        color: colorMap[variant] || SHADCN_COLOR_TOKENS.foreground,
-    };
+function getShadcnIconProps(variant = "default", size = "default") {
+  const colorMap = {
+    default: SHADCN_COLOR_TOKENS.primaryForeground,
+    destructive: SHADCN_COLOR_TOKENS.destructiveForeground,
+    outline: SHADCN_COLOR_TOKENS.foreground,
+    secondary: SHADCN_COLOR_TOKENS.secondaryForeground,
+    ghost: SHADCN_COLOR_TOKENS.foreground,
+    link: SHADCN_COLOR_TOKENS.primary
+  };
+  return {
+    size: SHADCN_ICON_SIZES[size],
+    color: colorMap[variant] || SHADCN_COLOR_TOKENS.foreground
+  };
 }
-/**
- * Preset shadcn/ui className utilities for icons
- */
 const shadcnIconClasses = {
-    /** Standard icon in button */
-    button: 'h-4 w-4',
-    /** Icon with right margin (before text) */
-    buttonLeft: 'mr-2 h-4 w-4',
-    /** Icon with left margin (after text) */
-    buttonRight: 'ml-2 h-4 w-4',
-    /** Small icon */
-    sm: 'h-3.5 w-3.5',
-    /** Large icon */
-    lg: 'h-5 w-5',
-    /** Icon-only button */
-    iconOnly: 'h-4 w-4',
-    /** Navigation menu icon */
-    nav: 'h-4 w-4 shrink-0',
-    /** Dropdown menu icon */
-    dropdown: 'mr-2 h-4 w-4',
-    /** Alert/toast icon */
-    alert: 'h-4 w-4',
-    /** Badge icon */
-    badge: 'h-3 w-3',
-    /** Card header icon */
-    card: 'h-5 w-5 text-muted-foreground',
-    /** Spinner/loading */
-    spinner: 'h-4 w-4 animate-spin',
+  /** Standard icon in button */
+  button: "h-4 w-4",
+  /** Icon with right margin (before text) */
+  buttonLeft: "mr-2 h-4 w-4",
+  /** Icon with left margin (after text) */
+  buttonRight: "ml-2 h-4 w-4",
+  /** Small icon */
+  sm: "h-3.5 w-3.5",
+  /** Large icon */
+  lg: "h-5 w-5",
+  /** Icon-only button */
+  iconOnly: "h-4 w-4",
+  /** Navigation menu icon */
+  nav: "h-4 w-4 shrink-0",
+  /** Dropdown menu icon */
+  dropdown: "mr-2 h-4 w-4",
+  /** Alert/toast icon */
+  alert: "h-4 w-4",
+  /** Badge icon */
+  badge: "h-3 w-3",
+  /** Card header icon */
+  card: "h-5 w-5 text-muted-foreground",
+  /** Spinner/loading */
+  spinner: "h-4 w-4 animate-spin"
 };
-/* ────────────────────────────────────────────────────────────────────────────
-   RADIX UI HELPERS
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Creates an icon component compatible with Radix UI primitives.
- * Automatically handles ref forwarding and asChild pattern.
- *
- * @param IconComponent - The NtdIcon component
- * @param defaultProps - Default props to apply
- * @returns Radix-compatible icon component
- *
- * @example
- * ```tsx
- * import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
- * import { NtdChevronDown } from '@nice2dev/icons';
- * import { createRadixIcon } from '@nice2dev/icons/headless-ui';
- *
- * const ChevronIcon = createRadixIcon(NtdChevronDown, {
- *   className: 'h-4 w-4 text-muted-foreground'
- * });
- *
- * <DropdownMenu.Trigger>
- *   Options <ChevronIcon />
- * </DropdownMenu.Trigger>
- * ```
- */
 function createRadixIcon(IconComponent, defaultProps = {}) {
-    const RadixIcon = forwardRef((props, ref) => {
-        const mergedProps = { ...defaultProps, ...props };
-        return createElement(IconComponent, { ...mergedProps, ref });
-    });
-    RadixIcon.displayName = `Radix${IconComponent.displayName || 'Icon'}`;
-    return RadixIcon;
+  const RadixIcon = forwardRef((props, ref) => {
+    const mergedProps = { ...defaultProps, ...props };
+    return createElement(IconComponent, { ...mergedProps, ref });
+  });
+  RadixIcon.displayName = `Radix${IconComponent.displayName || "Icon"}`;
+  return RadixIcon;
 }
-/**
- * HOC that adds Radix UI state-based styling to icons.
- * Supports data-state attributes for open/closed states.
- *
- * @param IconComponent - The icon component to enhance
- * @returns Enhanced icon with state-aware styling
- *
- * @example
- * ```tsx
- * const StateAwareChevron = withRadixState(NtdChevronDown);
- *
- * // Automatically rotates when parent has data-state="open"
- * <Collapsible.Trigger>
- *   <StateAwareChevron />
- * </Collapsible.Trigger>
- * ```
- */
 function withRadixState(IconComponent) {
-    const StateIcon = forwardRef(({ className, style, ...props }, ref) => {
-        const stateStyles = {
-            transition: 'transform 200ms ease',
-            ...style,
-        };
-        // Add CSS for data-state rotation
-        const stateClassName = `${className || ''} data-[state=open]:rotate-180`.trim();
-        return createElement(IconComponent, {
-            ...props,
-            ref,
-            className: stateClassName,
-            style: stateStyles,
-        });
-    });
-    StateIcon.displayName = `StateAware${IconComponent.displayName || 'Icon'}`;
-    return StateIcon;
+  const StateIcon = forwardRef(
+    ({ className, style, ...props }, ref) => {
+      const stateStyles = {
+        transition: "transform 200ms ease",
+        ...style
+      };
+      const stateClassName = `${className || ""} data-[state=open]:rotate-180`.trim();
+      return createElement(IconComponent, {
+        ...props,
+        ref,
+        className: stateClassName,
+        style: stateStyles
+      });
+    }
+  );
+  StateIcon.displayName = `StateAware${IconComponent.displayName || "Icon"}`;
+  return StateIcon;
 }
-/* ────────────────────────────────────────────────────────────────────────────
-   HEADLESS UI HELPERS
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Transition presets for Headless UI Transition component with icons.
- */
 const headlessTransitions = {
-    /** Fade in/out */
-    fade: {
-        enter: 'transition-opacity duration-150 ease-out',
-        enterFrom: 'opacity-0',
-        enterTo: 'opacity-100',
-        leave: 'transition-opacity duration-100 ease-in',
-        leaveFrom: 'opacity-100',
-        leaveTo: 'opacity-0',
-    },
-    /** Scale up/down */
-    scale: {
-        enter: 'transition-transform duration-150 ease-out',
-        enterFrom: 'scale-75',
-        enterTo: 'scale-100',
-        leave: 'transition-transform duration-100 ease-in',
-        leaveFrom: 'scale-100',
-        leaveTo: 'scale-75',
-    },
-    /** Rotate */
-    rotate: {
-        enter: 'transition-transform duration-200 ease-out',
-        enterFrom: 'rotate-0',
-        enterTo: 'rotate-180',
-        leave: 'transition-transform duration-200 ease-in',
-        leaveFrom: 'rotate-180',
-        leaveTo: 'rotate-0',
-    },
-    /** Spin (for loading) */
-    spin: {
-        enter: 'animate-spin',
-        enterFrom: '',
-        enterTo: '',
-        leave: '',
-        leaveFrom: '',
-        leaveTo: '',
-    },
+  /** Fade in/out */
+  fade: {
+    enter: "transition-opacity duration-150 ease-out",
+    enterFrom: "opacity-0",
+    enterTo: "opacity-100",
+    leave: "transition-opacity duration-100 ease-in",
+    leaveFrom: "opacity-100",
+    leaveTo: "opacity-0"
+  },
+  /** Scale up/down */
+  scale: {
+    enter: "transition-transform duration-150 ease-out",
+    enterFrom: "scale-75",
+    enterTo: "scale-100",
+    leave: "transition-transform duration-100 ease-in",
+    leaveFrom: "scale-100",
+    leaveTo: "scale-75"
+  },
+  /** Rotate */
+  rotate: {
+    enter: "transition-transform duration-200 ease-out",
+    enterFrom: "rotate-0",
+    enterTo: "rotate-180",
+    leave: "transition-transform duration-200 ease-in",
+    leaveFrom: "rotate-180",
+    leaveTo: "rotate-0"
+  },
+  /** Spin (for loading) */
+  spin: {
+    enter: "animate-spin",
+    enterFrom: "",
+    enterTo: "",
+    leave: "",
+    leaveFrom: "",
+    leaveTo: ""
+  }
 };
-/**
- * Creates a Headless UI compatible icon with transition support.
- *
- * @param IconComponent - The icon component
- * @param transition - Transition preset name
- * @returns Icon component with transition classes
- */
-function createHeadlessIcon(IconComponent, transition = 'fade') {
-    const HeadlessIcon = ({ show = true, className, ...props }) => {
-        const t = headlessTransitions[transition];
-        const transitionClass = show ? `${t.enter} ${t.enterTo}` : `${t.leave} ${t.leaveTo}`;
-        return createElement(IconComponent, {
-            ...props,
-            className: `${className || ''} ${transitionClass}`.trim(),
-        });
-    };
-    HeadlessIcon.displayName = `Headless${IconComponent.displayName || 'Icon'}`;
-    return HeadlessIcon;
+function createHeadlessIcon(IconComponent, transition = "fade") {
+  const HeadlessIcon = ({
+    show = true,
+    className,
+    ...props
+  }) => {
+    const t = headlessTransitions[transition];
+    const transitionClass = show ? `${t.enter} ${t.enterTo}` : `${t.leave} ${t.leaveTo}`;
+    return createElement(IconComponent, {
+      ...props,
+      className: `${className || ""} ${transitionClass}`.trim()
+    });
+  };
+  HeadlessIcon.displayName = `Headless${IconComponent.displayName || "Icon"}`;
+  return HeadlessIcon;
 }
-/* ────────────────────────────────────────────────────────────────────────────
-   ICON BUTTON PRESETS
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Props generator for common icon button patterns in shadcn/ui.
- */
 const iconButtonPresets = {
-    /**
-     * Close button (X icon)
-     */
-    close: {
-        className: 'rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground',
-        size: 16,
-    },
-    /**
-     * Chevron (accordion, collapsible)
-     */
-    chevron: {
-        className: 'h-4 w-4 shrink-0 transition-transform duration-200',
-        'data-chevron': true,
-    },
-    /**
-     * Menu trigger
-     */
-    menuTrigger: {
-        className: 'h-5 w-5',
-        strokeWidth: 1.5,
-    },
-    /**
-     * Navigation item icon
-     */
-    navItem: {
-        className: 'mr-2 h-4 w-4 shrink-0',
-    },
-    /**
-     * Sidebar icon
-     */
-    sidebar: {
-        className: 'h-4 w-4',
-        strokeWidth: 2,
-    },
-    /**
-     * Toast icon
-     */
-    toast: {
-        className: 'h-5 w-5',
-    },
-    /**
-     * Dialog icon
-     */
-    dialog: {
-        className: 'h-4 w-4 opacity-70',
-    },
+  /**
+   * Close button (X icon)
+   */
+  close: {
+    className: "rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+    size: 16
+  },
+  /**
+   * Chevron (accordion, collapsible)
+   */
+  chevron: {
+    className: "h-4 w-4 shrink-0 transition-transform duration-200",
+    "data-chevron": true
+  },
+  /**
+   * Menu trigger
+   */
+  menuTrigger: {
+    className: "h-5 w-5",
+    strokeWidth: 1.5
+  },
+  /**
+   * Navigation item icon
+   */
+  navItem: {
+    className: "mr-2 h-4 w-4 shrink-0"
+  },
+  /**
+   * Sidebar icon
+   */
+  sidebar: {
+    className: "h-4 w-4",
+    strokeWidth: 2
+  },
+  /**
+   * Toast icon
+   */
+  toast: {
+    className: "h-5 w-5"
+  },
+  /**
+   * Dialog icon
+   */
+  dialog: {
+    className: "h-4 w-4 opacity-70"
+  }
 };
-/* ────────────────────────────────────────────────────────────────────────────
-   UTILITY FUNCTIONS
-───────────────────────────────────────────────────────────────────────────── */
-/**
- * Merges icon props with shadcn/ui defaults.
- *
- * @param props - User-provided props
- * @param preset - Preset name from iconButtonPresets
- * @returns Merged props
- */
 function mergeIconProps(props, preset) {
-    const presetProps = iconButtonPresets[preset];
-    return {
-        ...presetProps,
-        ...props,
-        className: `${presetProps.className || ''} ${props.className || ''}`.trim(),
-    };
+  const presetProps = iconButtonPresets[preset];
+  return {
+    ...presetProps,
+    ...props,
+    className: `${presetProps.className || ""} ${props.className || ""}`.trim()
+  };
 }
-/**
- * Creates a className string for icons based on variant and size.
- *
- * @param options - Styling options
- * @returns Tailwind className string
- */
 function getIconClassName(options = {}) {
-    const { variant = 'default', size = 'md', interactive = false, spinning = false } = options;
-    const sizeMap = {
-        xs: 'h-3 w-3',
-        sm: 'h-3.5 w-3.5',
-        md: 'h-4 w-4',
-        lg: 'h-5 w-5',
-        xl: 'h-6 w-6',
-    };
-    const variantMap = {
-        default: '',
-        muted: 'text-muted-foreground',
-        primary: 'text-primary',
-        destructive: 'text-destructive',
-    };
-    const classes = [
-        sizeMap[size],
-        variantMap[variant],
-        interactive && 'transition-colors hover:text-foreground cursor-pointer',
-        spinning && 'animate-spin',
-    ].filter(Boolean);
-    return classes.join(' ');
+  const { variant = "default", size = "md", interactive = false, spinning = false } = options;
+  const sizeMap = {
+    xs: "h-3 w-3",
+    sm: "h-3.5 w-3.5",
+    md: "h-4 w-4",
+    lg: "h-5 w-5",
+    xl: "h-6 w-6"
+  };
+  const variantMap = {
+    default: "",
+    muted: "text-muted-foreground",
+    primary: "text-primary",
+    destructive: "text-destructive"
+  };
+  const classes = [
+    sizeMap[size],
+    variantMap[variant],
+    interactive && "transition-colors hover:text-foreground cursor-pointer",
+    spinning && "animate-spin"
+  ].filter(Boolean);
+  return classes.join(" ");
 }
-/* ────────────────────────────────────────────────────────────────────────────
-   EXPORTS
-───────────────────────────────────────────────────────────────────────────── */
-var headlessUi = {
-    forwardRefIcon,
-    createRadixIcon,
-    withRadixState,
-    createHeadlessIcon,
-    getShadcnIconProps,
-    mergeIconProps,
-    getIconClassName,
-    Slot,
-    SHADCN_ICON_SIZES,
-    SHADCN_COLOR_TOKENS,
-    shadcnIconClasses,
-    headlessTransitions,
-    iconButtonPresets,
+const headlessUi = {
+  forwardRefIcon,
+  createRadixIcon,
+  withRadixState,
+  createHeadlessIcon,
+  getShadcnIconProps,
+  mergeIconProps,
+  getIconClassName,
+  Slot,
+  SHADCN_ICON_SIZES,
+  SHADCN_COLOR_TOKENS,
+  shadcnIconClasses,
+  headlessTransitions,
+  iconButtonPresets
+};
+export {
+  SHADCN_COLOR_TOKENS,
+  SHADCN_ICON_SIZES,
+  Slot,
+  createHeadlessIcon,
+  createRadixIcon,
+  headlessUi as default,
+  forwardRefIcon,
+  getIconClassName,
+  getShadcnIconProps,
+  headlessTransitions,
+  iconButtonPresets,
+  mergeIconProps,
+  shadcnIconClasses,
+  withRadixState
 };
-
-export { SHADCN_COLOR_TOKENS, SHADCN_ICON_SIZES, Slot, createHeadlessIcon, createRadixIcon, headlessUi as default, forwardRefIcon, getIconClassName, getShadcnIconProps, headlessTransitions, iconButtonPresets, mergeIconProps, shadcnIconClasses, withRadixState };