@flanksource/clicky-ui/dist/data/Icon.js

Flanksource Clicky UI — React component library built on shadcn/ui with light/dark and density theming.

import { jsx } from "react/jsx-runtime";
import { iconLoaded, Icon as Icon$1 } from "@iconify/react";
import { cn } from "../lib/utils.js";
import { resolveSize } from "../lib/size.js";
import { useDensityValue } from "../hooks/use-density.js";
const TONE_CLASSES = {
  emerald: "text-emerald-700 ring-emerald-200/80",
  amber: "text-amber-700 ring-amber-200/80",
  rose: "text-rose-700 ring-rose-200/80",
  slate: "text-slate-700 ring-slate-200/80",
  sky: "text-sky-700 ring-sky-200/80",
  violet: "text-violet-700 ring-violet-200/80",
  neutral: "text-foreground ring-border"
};
let fallbackIcon = null;
function setFallbackIconProvider(component) {
  fallbackIcon = component;
}
function renderGlyph(name, glyphWidth, glyphHeight, rotate, flip, inline, glyphClassName, title) {
  if (iconLoaded(name)) {
    return /* @__PURE__ */ jsx(
      Icon$1,
      {
        icon: name,
        ...glyphClassName ? { className: glyphClassName } : {},
        ...glyphWidth != null ? { width: glyphWidth } : {},
        ...glyphHeight != null ? { height: glyphHeight } : {},
        ...typeof rotate === "number" ? { rotate } : {},
        ...flip != null ? { flip } : {},
        ...inline != null ? { inline } : {},
        ...title ? { title } : {}
      }
    );
  }
  if (fallbackIcon) {
    const Fallback = fallbackIcon;
    const glyphSize = typeof glyphWidth === "number" ? glyphWidth : glyphHeight;
    return /* @__PURE__ */ jsx(
      Fallback,
      {
        name,
        ...glyphClassName ? { className: glyphClassName } : {},
        ...glyphSize != null ? { size: glyphSize } : {},
        ...title ? { alt: title } : {}
      }
    );
  }
  const iconifyProps = {
    icon: name,
    className: glyphClassName,
    "aria-hidden": title ? void 0 : true
  };
  if (glyphWidth != null) iconifyProps.width = glyphWidth;
  if (glyphHeight != null) iconifyProps.height = glyphHeight;
  if (rotate != null) iconifyProps.rotate = rotate;
  if (flip != null) iconifyProps.flip = flip;
  if (inline != null) iconifyProps.inline = inline;
  if (title != null) iconifyProps.title = title;
  return /* @__PURE__ */ jsx("iconify-icon", { ...iconifyProps });
}
function Icon({
  name,
  className,
  width,
  height,
  rotate,
  flip,
  inline,
  title,
  style = "plain",
  size,
  tone = "neutral"
}) {
  const density = useDensityValue();
  const pxSize = size != null ? resolveSize(size, density) : void 0;
  const glyphSize = pxSize != null ? Math.max(8, Math.round(pxSize * 0.5)) : void 0;
  const resolvedWidth = width ?? (style === "badge" ? glyphSize : pxSize);
  const resolvedHeight = height ?? (style === "badge" ? glyphSize : pxSize);
  const glyphClassName = cn("shrink-0", style === "plain" ? className : void 0);
  const glyphTitle = style === "plain" ? title : void 0;
  const icon = renderGlyph(
    name,
    resolvedWidth,
    resolvedHeight,
    rotate,
    flip,
    inline,
    glyphClassName,
    glyphTitle
  );
  if (style === "plain") {
    return icon;
  }
  const badgeStyle = pxSize != null ? { width: pxSize, height: pxSize } : void 0;
  return /* @__PURE__ */ jsx(
    "span",
    {
      title,
      "aria-label": title,
      role: title ? "img" : void 0,
      className: cn(
        "inline-flex items-center justify-center rounded-full bg-white shadow-sm ring-1 ring-inset",
        TONE_CLASSES[tone],
        className
      ),
      style: badgeStyle,
      children: icon
    }
  );
}
export {
  Icon,
  setFallbackIconProvider
};
//# sourceMappingURL=Icon.js.map