{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "icons",
  "title": "Icons",
  "type": "registry:ui",
  "description": "Showcase + recipe page for the registry’s default icon set (Lucide). Not a runtime component — install the npm package directly. Documented here so consumers can browse names and import recipes.",
  "categories": [
    "data-display"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/components/icons/icons.ts",
      "content": "import { LitElement, css, html, nothing } from 'lit'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'inherit'\nexport type IconFlip = 'horizontal' | 'vertical' | 'both'\n\nconst sizeClasses: Record<IconSize, string> = {\n  xs: 'size-3',\n  sm: 'size-4',\n  md: 'size-5',\n  lg: 'size-6',\n  xl: 'size-8',\n  '2xl': 'size-12',\n  inherit: 'size-full',\n}\n\n/**\n * <uip-icon> — universal icon wrapper.\n */\nexport class UipIcon extends LitElement {\n  static styles = [\n    tailwind,\n    css`\n      :host {\n        display: inline-flex;\n      }\n    `,\n  ]\n\n  static properties = {\n    size: { reflect: true },\n    color: { reflect: true },\n    src: { reflect: true },\n    alt: { reflect: true },\n    rotation: { reflect: true },\n    flip: { reflect: true },\n    label: { reflect: true },\n    ariaLabel: { attribute: 'aria-label', reflect: true },\n    inline: { type: Boolean, reflect: true },\n  }\n\n  size: IconSize = 'md'\n  color?: string\n  src?: string\n  alt?: string\n  rotation?: number | string\n  flip?: IconFlip\n  label?: string\n  override ariaLabel: string | null = null\n  inline = true\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'icon')\n  }\n\n  render() {\n    const rotationDeg = this.rotation ? (typeof this.rotation === 'string' ? parseInt(this.rotation) : this.rotation) : undefined\n    const accessibleName = this.ariaLabel || this.label\n\n    const flipClasses =\n      this.flip === 'horizontal'\n        ? '-scale-x-100'\n        : this.flip === 'vertical'\n          ? '-scale-y-100'\n          : this.flip === 'both'\n            ? '-scale-x-100 -scale-y-100'\n            : ''\n\n    const transform = rotationDeg ? `rotate(${rotationDeg}deg)` : undefined\n    const style = [\n      this.color ? `color: ${this.color};` : '',\n      transform ? `transform: ${transform};` : '',\n    ].filter(Boolean).join(' ')\n\n    if (this.src) {\n      return html`\n        <img\n          part=\"base\"\n          data-slot=\"icon\"\n          src=${this.src}\n          alt=${this.alt || this.label || ''}\n          class=${cn(\n            'shrink-0 object-contain',\n            this.inline ? 'inline-block' : 'block',\n            this.size !== 'inherit' ? sizeClasses[this.size] : '',\n            flipClasses,\n          )}\n          style=${style || nothing}\n          aria-label=${accessibleName || nothing}\n          role=\"img\"\n        />\n      `\n    }\n\n    return html`\n      <span\n        part=\"base\"\n        data-slot=\"icon\"\n        class=${cn(\n          'shrink-0 items-center justify-center',\n          this.inline ? 'inline-flex' : 'flex',\n          this.size !== 'inherit' ? sizeClasses[this.size] : '',\n          flipClasses,\n        )}\n        style=${style || nothing}\n        role=${accessibleName ? 'img' : nothing}\n        aria-label=${accessibleName || nothing}\n        aria-hidden=${accessibleName ? nothing : 'true'}\n      >\n        <slot class=\"[&::slotted(svg)]:size-full [&::slotted(svg)]:shrink-0\"></slot>\n      </span>\n    `\n  }\n}\n\ncustomElements.get('uip-icon') || customElements.define('uip-icon', UipIcon)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-icon': UipIcon\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/components/icons/icons.ts"
    }
  ],
  "dependencies": [
    "lit"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/lit-core.json"
  ]
}