{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "icon-box",
  "title": "Icon Box",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/icon-box/IconBox.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Component, Snippet } from 'svelte'\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export type IconBoxVariant =\n    | 'primary'\n    | 'muted'\n    | 'outline'\n    | 'solid'\n    | 'subtle'\n    | 'destructive'\n    | 'success'\n    | 'warning'\n    | 'ghost'\n    | 'custom'\n  export type IconBoxSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  export type IconBoxShape = 'rounded' | 'circle' | 'square'\n\n  export interface IconBoxProps extends HTMLAttributes<HTMLDivElement> {\n    icon?: Component\n    variant?: IconBoxVariant\n    shape?: IconBoxShape\n    size?: IconBoxSize\n    iconClass?: string\n    children?: Snippet\n  }\n\n  const variantClasses: Record<IconBoxVariant, string> = {\n    primary: 'bg-primary/10 text-primary',\n    muted: 'bg-muted text-muted-foreground',\n    outline: 'border border-border bg-background text-foreground shadow-xs',\n    solid: 'bg-foreground text-background shadow-xs',\n    subtle: 'bg-accent text-accent-foreground',\n    destructive: 'bg-destructive/10 text-destructive',\n    success: 'bg-success/15 text-success',\n    warning: 'bg-warning/15 text-warning',\n    ghost: 'text-muted-foreground hover:bg-accent hover:text-foreground',\n    custom: '',\n  }\n\n  const shapeClasses: Record<IconBoxShape, string> = {\n    rounded: 'rounded-lg',\n    circle: 'rounded-full',\n    square: 'rounded-none',\n  }\n\n  const sizeClasses: Record<IconBoxSize, string> = {\n    '2xs': 'size-6 p-1',\n    xs: 'size-7 p-1.5',\n    sm: 'size-8 p-1.5',\n    md: 'size-9 p-2',\n    lg: 'size-11 p-2.5',\n    xl: 'size-14 p-3.5',\n  }\n\n  const iconSizes: Record<IconBoxSize, string> = {\n    '2xs': 'size-3',\n    xs: 'size-3.5',\n    sm: 'size-4',\n    md: 'size-4.5',\n    lg: 'size-6',\n    xl: 'size-7',\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let {\n    class: className,\n    icon,\n    variant = 'primary',\n    shape = 'rounded',\n    size = 'md',\n    iconClass,\n    children,\n    ...restProps\n  }: IconBoxProps = $props()\n</script>\n\n<div\n  data-uipkge\n  data-slot=\"icon-box\"\n  data-variant={variant}\n  data-size={size}\n  data-shape={shape}\n  {...restProps}\n  class={cn(\n    'inline-flex shrink-0 items-center justify-center transition-colors',\n    variantClasses[variant],\n    shapeClasses[shape],\n    sizeClasses[size],\n    className,\n  )}\n>\n  {#if children}\n    {@render children()}\n  {:else if icon}\n    {@const Icon = icon}\n    <Icon class={cn(iconSizes[size], iconClass)} aria-hidden=\"true\" />\n  {/if}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/icon-box/IconBox.svelte"
    },
    {
      "path": "packages/registry-svelte/components/icon-box/IconStack.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Component, Snippet } from 'svelte'\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export type IconStackVariant = 'primary' | 'muted' | 'destructive' | 'success' | 'warning'\n  export type IconStackSize = 'sm' | 'md' | 'lg' | 'xl'\n\n  export interface IconStackProps extends HTMLAttributes<HTMLDivElement> {\n    icon?: Component\n    variant?: IconStackVariant\n    size?: IconStackSize\n    iconClass?: string\n    children?: Snippet\n  }\n\n  const sizeMap: Record<IconStackSize, { root: string; base: string; icon: string }> = {\n    sm: { root: 'size-10', base: 'size-8 rounded-lg', icon: 'size-4' },\n    md: { root: 'size-14', base: 'size-11 rounded-xl', icon: 'size-5' },\n    lg: { root: 'size-18', base: 'size-14 rounded-2xl', icon: 'size-7' },\n    xl: { root: 'size-24', base: 'size-18 rounded-3xl', icon: 'size-9' },\n  }\n\n  const variantMap: Record<IconStackVariant, { back: string; front: string; text: string }> = {\n    primary: {\n      back: 'bg-primary/20 border-primary/30',\n      front: 'bg-background border-primary/20 shadow-primary/10',\n      text: 'text-primary',\n    },\n    muted: {\n      back: 'bg-muted border-border',\n      front: 'bg-card border-border shadow-black/5',\n      text: 'text-muted-foreground',\n    },\n    destructive: {\n      back: 'bg-destructive/20 border-destructive/30',\n      front: 'bg-background border-destructive/20 shadow-destructive/10',\n      text: 'text-destructive',\n    },\n    success: {\n      back: 'bg-success/20 border-success/30',\n      front: 'bg-background border-success/20 shadow-success/10',\n      text: 'text-success',\n    },\n    warning: {\n      back: 'bg-warning/20 border-warning/30',\n      front: 'bg-background border-warning/20 shadow-warning/10',\n      text: 'text-warning',\n    },\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let {\n    class: className,\n    icon,\n    variant = 'primary',\n    size = 'md',\n    iconClass,\n    children,\n    ...restProps\n  }: IconStackProps = $props()\n</script>\n\n<div\n  data-uipkge\n  data-slot=\"icon-stack\"\n  data-variant={variant}\n  data-size={size}\n  {...restProps}\n  class={cn('relative inline-flex items-center justify-center select-none', sizeMap[size].root, className)}\n>\n  <!-- Background offset sheet -->\n  <div\n    aria-hidden=\"true\"\n    class={cn(\n      'absolute inset-0 m-auto rotate-6 border transition-transform duration-300',\n      sizeMap[size].base,\n      variantMap[variant].back,\n    )}\n  ></div>\n  <!-- Top elevated card -->\n  <div\n    class={cn(\n      'relative z-10 flex items-center justify-center border shadow-md transition-transform duration-300 group-hover:-translate-y-0.5',\n      sizeMap[size].base,\n      variantMap[variant].front,\n      variantMap[variant].text,\n    )}\n  >\n    {#if children}\n      {@render children()}\n    {:else if icon}\n      {@const Icon = icon}\n      <Icon class={cn(sizeMap[size].icon, iconClass)} aria-hidden=\"true\" />\n    {/if}\n  </div>\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/icon-box/IconStack.svelte"
    },
    {
      "path": "packages/registry-svelte/components/icon-box/index.ts",
      "content": "export {\n  default as IconBox,\n  type IconBoxProps,\n  type IconBoxVariant,\n  type IconBoxSize,\n  type IconBoxShape,\n} from './IconBox.svelte'\nexport {\n  default as IconStack,\n  type IconStackProps,\n  type IconStackVariant,\n  type IconStackSize,\n} from './IconStack.svelte'\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/icon-box/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Icon container primitive with calibrated sizes (2xs to xl), surface variants (solid, outline, subtle, primary, muted), and 2.5D layered IconStack for empty states and feature hero cards.",
  "categories": [
    "data-display"
  ]
}