{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "list",
  "title": "List",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/list/List.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface ListProps extends HTMLAttributes<HTMLElement> {\n    as?: 'ul' | 'ol' | 'div'\n    children?: Snippet\n    ref?: HTMLElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, as = 'ul', children, ref = $bindable(null), ...restProps }: ListProps = $props()\n\n  const listClass = $derived(cn('list-none space-y-1', className))\n</script>\n\n{#if as === 'ol'}\n  <ol bind:this={ref} data-uipkge=\"\" data-slot=\"list\" class={listClass} {...restProps}>\n    {@render children?.()}\n  </ol>\n{:else if as === 'div'}\n  <div bind:this={ref} data-uipkge=\"\" data-slot=\"list\" class={listClass} {...restProps}>\n    {@render children?.()}\n  </div>\n{:else}\n  <ul bind:this={ref} data-uipkge=\"\" data-slot=\"list\" class={listClass} {...restProps}>\n    {@render children?.()}\n  </ul>\n{/if}\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/list/List.svelte"
    },
    {
      "path": "packages/registry-svelte/components/list/ListItem.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface ListItemProps extends HTMLAttributes<HTMLElement> {\n    as?: 'li' | 'div' | 'a'\n    active?: boolean\n    disabled?: boolean\n    /** Destination when `as=\"a\"`. Also marks the item interactive, like an `onclick` handler. */\n    href?: string\n    children?: Snippet\n    ref?: HTMLElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let {\n    class: className,\n    as = 'li',\n    active = false,\n    disabled = false,\n    href,\n    onclick,\n    children,\n    ref = $bindable(null),\n    ...restProps\n  }: ListItemProps = $props()\n\n  // Only show pointer/hover affordances when the item is actually interactive.\n  const isInteractive = $derived(!disabled && (as === 'a' || href != null || onclick != null))\n\n  const itemClass = $derived(\n    cn(\n      'rounded-md px-2 py-1.5 text-sm transition-colors duration-200 select-none focus-visible:outline-none',\n      'has-[>[data-slot=list-item-content]]:flex has-[>[data-slot=list-item-content]]:items-center has-[>[data-slot=list-item-content]]:gap-3',\n      !disabled && isInteractive && 'hover:bg-accent focus-visible:bg-accent cursor-pointer',\n      active && 'bg-accent text-accent-foreground',\n      disabled && 'pointer-events-none cursor-not-allowed opacity-50',\n      className,\n    ),\n  )\n\n  const sharedAttrs = $derived({\n    'data-uipkge': '',\n    'data-slot': 'list-item',\n    'data-active': active ? '' : undefined,\n    'data-disabled': disabled ? '' : undefined,\n    'aria-disabled': disabled ? ('true' as const) : undefined,\n    'aria-current': active ? ('true' as const) : undefined,\n    tabindex: disabled ? -1 : undefined,\n    class: itemClass,\n    onclick,\n  })\n</script>\n\n{#if as === 'a'}\n  <a bind:this={ref} href={disabled ? undefined : href} {...sharedAttrs} {...restProps}>\n    {@render children?.()}\n  </a>\n{:else if as === 'div'}\n  <div bind:this={ref} {...sharedAttrs} {...restProps}>\n    {@render children?.()}\n  </div>\n{:else}\n  <li bind:this={ref} {...sharedAttrs} {...restProps}>\n    {@render children?.()}\n  </li>\n{/if}\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/list/ListItem.svelte"
    },
    {
      "path": "packages/registry-svelte/components/list/ListItemMedia.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface ListItemMediaProps extends HTMLAttributes<HTMLDivElement> {\n    children?: Snippet\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ...restProps }: ListItemMediaProps = $props()\n</script>\n\n<div\n  data-uipkge=\"\"\n  data-slot=\"list-item-media\"\n  class={cn('flex shrink-0 items-center justify-center self-center', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/list/ListItemMedia.svelte"
    },
    {
      "path": "packages/registry-svelte/components/list/ListItemContent.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface ListItemContentProps extends HTMLAttributes<HTMLDivElement> {\n    children?: Snippet\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ...restProps }: ListItemContentProps = $props()\n</script>\n\n<div\n  data-uipkge=\"\"\n  data-slot=\"list-item-content\"\n  class={cn('flex min-w-0 flex-1 flex-col gap-0.5 self-center', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/list/ListItemContent.svelte"
    },
    {
      "path": "packages/registry-svelte/components/list/ListItemTitle.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface ListItemTitleProps extends HTMLAttributes<HTMLDivElement> {\n    children?: Snippet\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ...restProps }: ListItemTitleProps = $props()\n</script>\n\n<div\n  data-uipkge=\"\"\n  data-slot=\"list-item-title\"\n  class={cn('text-foreground truncate text-sm leading-none font-medium', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/list/ListItemTitle.svelte"
    },
    {
      "path": "packages/registry-svelte/components/list/ListItemDescription.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface ListItemDescriptionProps extends HTMLAttributes<HTMLDivElement> {\n    children?: Snippet\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ...restProps }: ListItemDescriptionProps = $props()\n</script>\n\n<div\n  data-uipkge=\"\"\n  data-slot=\"list-item-description\"\n  class={cn('text-muted-foreground line-clamp-1 text-xs', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/list/ListItemDescription.svelte"
    },
    {
      "path": "packages/registry-svelte/components/list/ListItemActions.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface ListItemActionsProps extends HTMLAttributes<HTMLDivElement> {\n    children?: Snippet\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ...restProps }: ListItemActionsProps = $props()\n</script>\n\n<div\n  data-uipkge=\"\"\n  data-slot=\"list-item-actions\"\n  class={cn('text-muted-foreground flex shrink-0 items-center gap-1.5 self-center', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/list/ListItemActions.svelte"
    },
    {
      "path": "packages/registry-svelte/components/list/ListSubheader.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface ListSubheaderProps extends HTMLAttributes<HTMLLIElement> {\n    inset?: boolean\n    children?: Snippet\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, inset = false, children, ...restProps }: ListSubheaderProps = $props()\n</script>\n\n<li\n  data-uipkge=\"\"\n  data-slot=\"list-subheader\"\n  class={cn(\n    'text-muted-foreground px-2 py-1.5 text-xs font-semibold tracking-wide uppercase',\n    inset && 'pl-8',\n    className,\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</li>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/list/ListSubheader.svelte"
    },
    {
      "path": "packages/registry-svelte/components/list/index.ts",
      "content": "export { default as List, type ListProps } from './List.svelte'\nexport { default as ListItem, type ListItemProps } from './ListItem.svelte'\nexport { default as ListItemMedia, type ListItemMediaProps } from './ListItemMedia.svelte'\nexport { default as ListItemContent, type ListItemContentProps } from './ListItemContent.svelte'\nexport { default as ListItemTitle, type ListItemTitleProps } from './ListItemTitle.svelte'\nexport { default as ListItemDescription, type ListItemDescriptionProps } from './ListItemDescription.svelte'\nexport { default as ListItemActions, type ListItemActionsProps } from './ListItemActions.svelte'\nexport { default as ListSubheader, type ListSubheaderProps } from './ListSubheader.svelte'\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/list/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "List and Item row primitives with List, ListItem, ListItemMedia, ListItemContent, ListItemTitle, ListItemDescription, ListItemActions, and ListSubheader for structured rows, settings lists, and feeds.",
  "categories": [
    "data-display"
  ]
}