{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"aspect-ratio","type":"registry:ui","title":"Aspect Ratio","description":"A box that keeps its shape as it resizes, for an image, a video or a map.","dependencies":["radix-ui"],"registryDependencies":["https://dashral.com/r/utils.json"],"files":[{"path":"registry/dashral/aspect-ratio.tsx","type":"registry:file","target":"components/dashral/aspect-ratio.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { AspectRatio as AspectRatioPrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\n\ntype AspectRatioProps = Omit<React.ComponentProps<typeof AspectRatioPrimitive.Root>, \"ratio\"> & {\n  /** Width over height: 16 / 9 (default), 4 / 3, 1 for a square. */\n  ratio?: number\n  /** The box's classes, e.g. a radius or a background. Its children fill it. */\n  className?: string\n  /** The classes of the wrapper that holds the ratio, e.g. a width. */\n  wrapperClassName?: string\n}\n\n/**\n * A box that keeps its shape as it grows and shrinks, for an image, a video or a map: `<AspectRatio ratio={4 / 3}>`. An\n * <img> or <video> inside fills it and is cropped to fit (object-cover), unless you give it classes of your own.\n */\nfunction AspectRatio({ ratio = 16 / 9, className, wrapperClassName, style, ...props }: AspectRatioProps) {\n  return (\n    // Radix wraps the box in a div that holds the ratio with padding; that one takes the width.\n    <div data-slot=\"aspect-ratio-wrapper\" className={cn(\"w-full\", wrapperClassName)}>\n      <AspectRatioPrimitive.Root\n        data-slot=\"aspect-ratio\"\n        ratio={ratio}\n        style={style}\n        className={cn(\n          \"overflow-hidden [&>img:not([class])]:size-full [&>img:not([class])]:object-cover [&>video:not([class])]:size-full [&>video:not([class])]:object-cover\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nexport { AspectRatio, type AspectRatioProps }\n"}]}