{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"prose","type":"registry:ui","title":"Prose","description":"Good-looking text from the plain HTML that Markdown, MDX or a CMS produces.","dependencies":[],"registryDependencies":["https://dashral.com/r/utils.json"],"files":[{"path":"registry/dashral/prose.tsx","type":"registry:file","target":"components/dashral/prose.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\n\ntype ProseProps = React.ComponentProps<\"div\"> & {\n  /** sm for a sidebar or a card, lg for a reading page. */\n  size?: \"sm\" | \"default\" | \"lg\"\n  /** Render your own element instead of a div, e.g. \"article\". */\n  as?: \"div\" | \"article\" | \"section\" | \"main\"\n}\n\n// Styles for plain HTML elements inside: what Markdown, MDX or a CMS produces. Kit components inside (they carry\n// data-slot) keep their own looks. Every class is written out in full so Tailwind finds it.\nconst base = [\n  \"text-foreground/90 [overflow-wrap:anywhere]\",\n  // Spacing between blocks: everything after the first gets space above, so the first and last sit flush.\n  \"[&>*+*]:mt-[1.1em]\",\n  // Headings\n  \"[&_:is(h1,h2,h3,h4):not([data-slot])]:font-heading [&_:is(h1,h2,h3,h4):not([data-slot])]:font-semibold [&_:is(h1,h2,h3,h4):not([data-slot])]:tracking-tight [&_:is(h1,h2,h3,h4):not([data-slot])]:text-foreground [&_:is(h1,h2,h3,h4):not([data-slot])]:text-balance [&_:is(h1,h2,h3,h4):not([data-slot])]:scroll-mt-20\",\n  \"[&_h1:not([data-slot])]:text-[2em] [&_h1:not([data-slot])]:leading-tight\",\n  \"[&_h2:not([data-slot])]:text-[1.5em] [&_h2:not([data-slot])]:leading-snug [&>h2:not(:first-child)]:mt-[2em]\",\n  \"[&_h3:not([data-slot])]:text-[1.25em] [&_h3:not([data-slot])]:leading-snug [&>h3:not(:first-child)]:mt-[1.6em]\",\n  \"[&_h4:not([data-slot])]:text-[1em] [&>h4:not(:first-child)]:mt-[1.4em]\",\n  \"[&>:is(h2,h3,h4)+*]:mt-[0.6em]\",\n  // Text\n  \"[&_p:not([data-slot])]:text-pretty\",\n  \"[&_a:not([data-slot])]:font-medium [&_a:not([data-slot])]:text-primary-text [&_a:not([data-slot])]:underline [&_a:not([data-slot])]:decoration-primary/40 [&_a:not([data-slot])]:underline-offset-4 [&_a:not([data-slot]):hover]:decoration-primary\",\n  \"[&_strong:not([data-slot])]:font-semibold [&_strong:not([data-slot])]:text-foreground\",\n  \"[&_mark:not([data-slot])]:rounded-sm [&_mark:not([data-slot])]:bg-highlight/20 [&_mark:not([data-slot])]:px-0.5 [&_mark:not([data-slot])]:text-inherit\",\n  // Lists\n  \"[&_ul:not([data-slot])]:list-disc [&_ol:not([data-slot])]:list-decimal [&_:is(ul,ol):not([data-slot])]:ps-[1.5em] [&_li:not([data-slot])]:ps-[0.25em] [&_li+li]:mt-[0.4em] [&_li>:is(ul,ol)]:mt-[0.4em] [&_li::marker]:text-muted-foreground\",\n  // Quotes and rules\n  \"[&_blockquote:not([data-slot])]:border-s-2 [&_blockquote:not([data-slot])]:ps-[1em] [&_blockquote:not([data-slot])]:text-muted-foreground [&_blockquote:not([data-slot])]:italic\",\n  \"[&_hr:not([data-slot])]:my-[2em] [&_hr:not([data-slot])]:border-border\",\n  // Code: inline in a soft pill, blocks in a panel that scrolls sideways, always left to right.\n  \"[&_:not(pre)>code:not([data-slot])]:rounded-[0.3em] [&_:not(pre)>code:not([data-slot])]:bg-muted [&_:not(pre)>code:not([data-slot])]:px-[0.35em] [&_:not(pre)>code:not([data-slot])]:py-[0.1em] [&_:not(pre)>code:not([data-slot])]:font-mono [&_:not(pre)>code:not([data-slot])]:text-[0.875em]\",\n  \"[&_pre:not([data-slot])]:overflow-x-auto [&_pre:not([data-slot])]:rounded-lg [&_pre:not([data-slot])]:border [&_pre:not([data-slot])]:bg-muted/40 [&_pre:not([data-slot])]:px-[1em] [&_pre:not([data-slot])]:py-[0.85em] [&_pre:not([data-slot])]:font-mono [&_pre:not([data-slot])]:text-[0.875em] [&_pre:not([data-slot])]:leading-relaxed [&_pre:not([data-slot])]:[direction:ltr]\",\n  \"[&_kbd:not([data-slot])]:rounded-[0.3em] [&_kbd:not([data-slot])]:border [&_kbd:not([data-slot])]:bg-muted [&_kbd:not([data-slot])]:px-[0.35em] [&_kbd:not([data-slot])]:font-mono [&_kbd:not([data-slot])]:text-[0.8em]\",\n  // Media\n  \"[&_:is(img,video):not([data-slot])]:h-auto [&_:is(img,video):not([data-slot])]:max-w-full [&_:is(img,video):not([data-slot])]:rounded-lg\",\n  \"[&_figcaption:not([data-slot])]:mt-[0.6em] [&_figcaption:not([data-slot])]:text-center [&_figcaption:not([data-slot])]:text-[0.875em] [&_figcaption:not([data-slot])]:text-muted-foreground\",\n  // Tables: full width, lines between rows, scrolling sideways on a phone through the wrapping block's overflow.\n  \"[&_table:not([data-slot])]:w-full [&_table:not([data-slot])]:border-collapse [&_table:not([data-slot])]:text-[0.875em]\",\n  \"[&_:is(th,td):not([data-slot])]:border-b [&_:is(th,td):not([data-slot])]:px-[0.75em] [&_:is(th,td):not([data-slot])]:py-[0.5em] [&_:is(th,td):not([data-slot])]:text-start [&_:is(th,td):not([data-slot])]:align-top\",\n  \"[&_th:not([data-slot])]:font-medium [&_th:not([data-slot])]:text-foreground\",\n]\n\nconst sizes = { sm: \"text-sm leading-6\", default: \"text-base leading-7\", lg: \"text-lg leading-8\" }\n\n/**\n * Good-looking text from plain HTML, in one tag: wrap the output of Markdown, MDX or a CMS in `<Prose>` and its\n * headings, paragraphs, links, lists, quotes, code, tables and images are set for reading, in light and dark, right to\n * left included. Kit components inside keep their own looks. Give it a width (max-w-prose) for comfortable lines.\n */\nfunction Prose({ size = \"default\", as: Component = \"div\", className, ...props }: ProseProps) {\n  return <Component data-slot=\"prose\" className={cn(base, sizes[size], className)} {...props} />\n}\n\nexport { Prose, type ProseProps }\n"}],"cssVars":{"theme":{"color-primary-text":"var(--primary-text, var(--primary))","color-highlight":"var(--highlight)","color-highlight-foreground":"var(--highlight-foreground)","color-highlight-text":"var(--highlight-text)","font-heading":"var(--font-geist, \"Geist\"), var(--font-inter, \"Inter\"), var(--font-arabic, \"IBM Plex Sans Arabic\"), ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif"},"light":{"highlight":"#b8008c","highlight-foreground":"oklch(0.985 0 0)","highlight-text":"#a3007b"},"dark":{"highlight":"#ff2ecf","highlight-foreground":"oklch(0.2 0 0)","highlight-text":"#ff75df"}}}