{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "skeleton",
  "title": "Skeleton",
  "description": "Placeholder block or wrapper for loading content; pulses or shimmers, set app-wide by a provider.",
  "registryDependencies": [
    "@ikas/theme",
    "@ikas/utils"
  ],
  "files": [
    {
      "path": "registry/ui/skeleton.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype SkeletonVariant = \"pulse\" | \"shimmer\"\n\nconst SkeletonContext = React.createContext<SkeletonVariant | null>(null)\n\n/** The variant placeholders use here: a Skeleton's own `variant`, else the nearest SkeletonProvider, else `pulse`. */\nfunction useSkeletonVariant(variant?: SkeletonVariant): SkeletonVariant {\n  const inherited = React.useContext(SkeletonContext)\n  return variant ?? inherited ?? \"pulse\"\n}\n\ntype SkeletonProviderProps = {\n  /** Default for every Skeleton, RecordTable and chart placeholder inside. */\n  variant: SkeletonVariant\n  children?: React.ReactNode\n}\n\n/** Sets the placeholder look once for the whole app, so tables, charts and hand-made skeletons match. */\nfunction SkeletonProvider({ variant, children }: SkeletonProviderProps) {\n  return <SkeletonContext.Provider value={variant}>{children}</SkeletonContext.Provider>\n}\n\ntype SkeletonProps = React.ComponentProps<\"div\"> & {\n  /** `pulse` fades the block in place; `shimmer` sweeps a light across it. Both stop with reduced motion. Defaults to the SkeletonProvider's, else `pulse`. */\n  variant?: SkeletonVariant\n  /**\n   * With children: `true` covers them with the placeholder while they keep their size and can't be reached,\n   * `false` shows them. Without children the block always shows.\n   */\n  loading?: boolean\n}\n\n/** The look of the placeholder; on a wrapped child these win over its own background, border and text color. */\nconst surface = \"bg-skeleton bg-none border-transparent text-transparent shadow-none\"\nconst motion: Record<SkeletonVariant, string> = {\n  pulse: \"animate-pulse motion-reduce:animate-none\",\n  shimmer: \"animate-skeleton-shimmer\",\n}\n\nfunction Skeleton({ variant: variantProp, loading = true, className, children, ...props }: SkeletonProps) {\n  const variant = useSkeletonVariant(variantProp)\n\n  if (children == null)\n    return (\n      <div\n        data-slot=\"skeleton\"\n        data-variant={variant}\n        className={cn(\"relative overflow-hidden rounded-md\", surface, motion[variant], className)}\n        {...props}\n      />\n    )\n\n  if (!loading) return <>{children}</>\n\n  // One element takes the placeholder itself, keeping its own tag, size and shape; text gets an inline span.\n  // Plain elements get rounded corners unless they set their own; components (Avatar, Badge…) keep theirs.\n  // Spans become inline-block so the shimmer stays inside them; align-top keeps the line from growing.\n  const child = React.isValidElement<{ className?: string }>(children) ? children : <span>{children}</span>\n  return React.cloneElement(child, {\n    ...props,\n    \"data-skeleton\": variant,\n    \"aria-hidden\": true,\n    inert: true,\n    className: cn(\n      typeof child.type === \"string\" && \"rounded-md\",\n      child.type === \"span\" && \"inline-block align-top\",\n      variant === \"shimmer\" && \"relative overflow-hidden\",\n      child.props.className,\n      surface,\n      \"pointer-events-none select-none [&_*]:invisible\",\n      motion[variant],\n      className\n    ),\n  } as React.HTMLAttributes<HTMLElement>)\n}\n\nexport { Skeleton, SkeletonProvider, useSkeletonVariant, type SkeletonProps, type SkeletonProviderProps, type SkeletonVariant }\n",
      "type": "registry:ui"
    }
  ],
  "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/primitives",
  "categories": [
    "primitives",
    "feedback"
  ],
  "type": "registry:ui"
}