aback-ui 0.0.0-stage → 0.2.0

package/registry/faq.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "https://abackui.com/schema/registry-item.json",
+  "name": "faq",
+  "type": "registry:block",
+  "title": "FAQ",
+  "description": "Questions in an accordion with indexable closed answers and optional FAQPage structured data.",
+  "registryDependencies": [
+    "https://abackui.com/r/accordion.json",
+    "https://abackui.com/r/section-heading.json"
+  ],
+  "categories": [
+    "Marketing"
+  ],
+  "docs": "https://abackui.com/docs/blocks/faq",
+  "meta": {
+    "status": "beta",
+    "usedIn": [
+      "aback-tools",
+      "aback-launch",
+      "aback-group"
+    ]
+  },
+  "files": [
+    {
+      "path": "components/blocks/faq.tsx",
+      "content": "import { useId, type ReactNode } from \"react\";\n\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\nimport { SectionHeading } from \"@/components/ui/section-heading\";\n\nexport interface FaqItem {\n  question: string;\n  /** Plain text, so it can be mirrored in structured data. Blank lines start new paragraphs. */\n  answer: string;\n}\n\nexport interface FaqBlockProps {\n  eyebrow?: ReactNode;\n  title?: ReactNode;\n  description?: ReactNode;\n  items: FaqItem[];\n  /** Emit FAQPage JSON-LD for search engines. Only for questions you answer on the page. */\n  structuredData?: boolean;\n  /** A line after the list, such as a contact link. */\n  footer?: ReactNode;\n}\n\nfunction faqJsonLd(items: FaqItem[]) {\n  const data = {\n    \"@context\": \"https://schema.org\",\n    \"@type\": \"FAQPage\",\n    mainEntity: items.map((item) => ({\n      \"@type\": \"Question\",\n      name: item.question,\n      acceptedAnswer: { \"@type\": \"Answer\", text: item.answer },\n    })),\n  };\n  // Escaping \"<\" keeps an answer containing \"</script>\" inside the tag.\n  return JSON.stringify(data).replace(/</g, \"\\\\u003c\");\n}\n\n/**\n * Frequently asked questions in an accordion. The first answer is open and\n * closed answers stay in the HTML, so they are searchable and indexable.\n */\nexport function FaqBlock({\n  eyebrow,\n  title = \"Frequently asked questions\",\n  description,\n  items,\n  structuredData = false,\n  footer,\n}: FaqBlockProps) {\n  const headingId = useId();\n  return (\n    <section aria-labelledby={headingId} className=\"mx-auto w-full max-w-3xl px-4 py-16 md:px-6 lg:py-20\">\n      <SectionHeading eyebrow={eyebrow} title={title} description={description} headingId={headingId} />\n\n      <Accordion\n        type=\"multiple\"\n        defaultValue={items.length ? [\"faq-0\"] : []}\n        className=\"mt-8 border-t border-border\"\n      >\n        {items.map((item, index) => (\n          <AccordionItem key={item.question} value={`faq-${index}`}>\n            <AccordionTrigger className=\"text-base\">{item.question}</AccordionTrigger>\n            <AccordionContent forceMount className=\"flex flex-col gap-3 [[data-state=closed]>&]:hidden\">\n              {item.answer.split(/\\n\\s*\\n/).map((paragraph, paragraphIndex) => (\n                <p key={paragraphIndex}>{paragraph}</p>\n              ))}\n            </AccordionContent>\n          </AccordionItem>\n        ))}\n      </Accordion>\n\n      {footer ? <div className=\"mt-6 text-sm text-muted-foreground\">{footer}</div> : null}\n\n      {structuredData && items.length ? (\n        <script type=\"application/ld+json\" dangerouslySetInnerHTML={{ __html: faqJsonLd(items) }} />\n      ) : null}\n    </section>\n  );\n}\n",
+      "type": "registry:block",
+      "target": "components/blocks/faq.tsx"
+    }
+  ]
+}

package/registry/feature-grid.json

@@ -0,0 +1,33 @@
+{
+  "$schema": "https://abackui.com/schema/registry-item.json",
+  "name": "feature-grid",
+  "type": "registry:block",
+  "title": "Feature grid",
+  "description": "A titled grid of features with brand icon chips and optional links, joined by hairlines.",
+  "dependencies": [
+    "@tabler/icons-react"
+  ],
+  "registryDependencies": [
+    "https://abackui.com/r/utils.json",
+    "https://abackui.com/r/section-heading.json"
+  ],
+  "categories": [
+    "Marketing"
+  ],
+  "docs": "https://abackui.com/docs/blocks/feature-grid",
+  "meta": {
+    "status": "beta",
+    "usedIn": [
+      "aback-tools",
+      "aback-launch"
+    ]
+  },
+  "files": [
+    {
+      "path": "components/blocks/feature-grid.tsx",
+      "content": "import type { ReactNode } from \"react\";\nimport { IconArrowRight } from \"@tabler/icons-react\";\n\nimport { SectionHeading } from \"@/components/ui/section-heading\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface Feature {\n  /** A 20px Tabler icon. It is decorative. */\n  icon: ReactNode;\n  title: string;\n  description: ReactNode;\n  /** Makes the feature a link to its detail page. */\n  href?: string;\n}\n\nexport interface FeatureGridBlockProps {\n  eyebrow?: ReactNode;\n  title: ReactNode;\n  description?: ReactNode;\n  features: Feature[];\n  columns?: 2 | 3 | 4;\n  /** Id of the section heading, unique per page. */\n  headingId?: string;\n}\n\nconst columnClasses = {\n  2: \"sm:grid-cols-2\",\n  3: \"sm:grid-cols-2 lg:grid-cols-3\",\n  4: \"sm:grid-cols-2 lg:grid-cols-4\",\n} as const;\n\n/**\n * A titled grid of features with brand icon chips. Cells share hairline\n * borders instead of floating cards. A feature with an href becomes one\n * link whose name is its title.\n */\nexport function FeatureGridBlock({\n  eyebrow,\n  title,\n  description,\n  features,\n  columns = 3,\n  headingId = \"features-title\",\n}: FeatureGridBlockProps) {\n  return (\n    <section aria-labelledby={headingId} className=\"mx-auto w-full max-w-6xl px-4 py-16 md:px-6 lg:py-20\">\n      <SectionHeading eyebrow={eyebrow} title={title} description={description} headingId={headingId} />\n\n      <ul className={cn(\"mt-10 grid gap-px border border-border bg-border\", columnClasses[columns])}>\n        {features.map((feature) => {\n          const body = (\n            <>\n              <span\n                aria-hidden=\"true\"\n                className=\"flex size-10 items-center justify-center bg-brand-chip text-brand-icon [&_svg]:size-5\"\n              >\n                {feature.icon}\n              </span>\n              <h3 className=\"mt-4 flex items-center gap-1.5 text-base font-semibold text-foreground\">\n                {feature.title}\n                {feature.href ? (\n                  <IconArrowRight\n                    aria-hidden=\"true\"\n                    className=\"size-4 text-muted-foreground transition-transform duration-200 group-hover:translate-x-0.5 motion-reduce:transition-none\"\n                  />\n                ) : null}\n              </h3>\n              <p className=\"mt-1.5 text-sm leading-relaxed text-muted-foreground\">{feature.description}</p>\n            </>\n          );\n\n          return (\n            <li key={feature.title} className=\"bg-card\">\n              {feature.href ? (\n                <a\n                  href={feature.href}\n                  className=\"group block h-full p-6 outline-none transition-colors duration-200 hover:bg-muted/40 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-ring\"\n                >\n                  {body}\n                </a>\n              ) : (\n                <div className=\"h-full p-6\">{body}</div>\n              )}\n            </li>\n          );\n        })}\n      </ul>\n    </section>\n  );\n}\n",
+      "type": "registry:block",
+      "target": "components/blocks/feature-grid.tsx"
+    }
+  ]
+}

package/registry/field.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://abackui.com/schema/registry-item.json",
+  "name": "field",
+  "type": "registry:ui",
+  "title": "Field",
+  "description": "A form field frame that wires labels, help text, and errors.",
+  "dependencies": [
+    "@tabler/icons-react"
+  ],
+  "registryDependencies": [
+    "https://abackui.com/r/utils.json"
+  ],
+  "categories": [
+    "Forms"
+  ],
+  "docs": "https://abackui.com/docs/components/field",
+  "meta": {
+    "status": "stable",
+    "usedIn": []
+  },
+  "files": [
+    {
+      "path": "components/ui/field.tsx",
+      "content": "import * as React from \"react\";\nimport { IconAlertCircle } from \"@tabler/icons-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface FieldProps extends React.ComponentProps<\"div\"> {\n  /** The control id this field labels. */\n  htmlFor: string;\n  label: React.ReactNode;\n  description?: React.ReactNode;\n  error?: React.ReactNode;\n  required?: boolean;\n}\n\n/**\n * Layout and labeling for a single form control. It does not inject props into\n * the control; pass `id`, `aria-describedby`, and `aria-invalid` explicitly so\n * the relationship stays visible in the consuming code.\n */\nfunction Field({\n  htmlFor,\n  label,\n  description,\n  error,\n  required,\n  className,\n  children,\n  ...props\n}: FieldProps) {\n  return (\n    <div data-slot=\"field\" className={cn(\"flex flex-col gap-1.5\", className)} {...props}>\n      <label\n        htmlFor={htmlFor}\n        className=\"flex items-center gap-1 text-sm font-medium leading-none text-foreground\"\n      >\n        {label}\n        {required ? (\n          <span aria-hidden=\"true\" className=\"text-destructive\">\n            *\n          </span>\n        ) : null}\n      </label>\n      {children}\n      {description ? (\n        <p id={`${htmlFor}-description`} className=\"text-xs leading-relaxed text-muted-foreground\">\n          {description}\n        </p>\n      ) : null}\n      {error ? (\n        <p\n          id={`${htmlFor}-error`}\n          role=\"alert\"\n          className=\"flex items-start gap-1.5 text-xs font-medium leading-relaxed text-danger\"\n        >\n          <IconAlertCircle aria-hidden=\"true\" className=\"mt-0.5 size-3.5 shrink-0\" />\n          {error}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n\nexport { Field };\n",
+      "type": "registry:ui",
+      "target": "components/ui/field.tsx"
+    }
+  ]
+}

package/registry/hero.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://abackui.com/schema/registry-item.json",
+  "name": "hero",
+  "type": "registry:block",
+  "title": "Hero",
+  "description": "A landing-page opening with announcement, h1, highlight line, actions, proof points, and an aside.",
+  "dependencies": [
+    "@tabler/icons-react"
+  ],
+  "registryDependencies": [
+    "https://abackui.com/r/button.json"
+  ],
+  "categories": [
+    "Marketing"
+  ],
+  "docs": "https://abackui.com/docs/blocks/hero",
+  "meta": {
+    "status": "beta",
+    "usedIn": [
+      "aback-launch",
+      "aback-group"
+    ]
+  },
+  "files": [
+    {
+      "path": "components/blocks/hero.tsx",
+      "content": "import { useId, type ReactNode } from \"react\";\nimport { IconArrowRight, IconCheck } from \"@tabler/icons-react\";\n\nimport { Button } from \"@/components/ui/button\";\n\nexport interface HeroAction {\n  label: string;\n  href: string;\n}\n\nexport interface HeroBlockProps {\n  /** A short announcement linked from a pill above the title. */\n  announcement?: { label: ReactNode; href: string };\n  /** The first line of the h1. */\n  title: ReactNode;\n  /** An optional second line of the h1, set in the brand colour. */\n  highlight?: ReactNode;\n  description: ReactNode;\n  primaryAction: HeroAction;\n  secondaryAction?: HeroAction;\n  /** A line under the actions, such as \"No credit card required.\" */\n  note?: ReactNode;\n  /** Short proof points with check marks. Keep them true and specific. */\n  highlights?: string[];\n  /** Content for the right column on wide screens: a product shot, stats, or a demo. */\n  aside?: ReactNode;\n}\n\n/**\n * The opening section of a landing page. It renders the page's h1, so use it\n * once. The layout is two columns from lg and stacks on smaller screens, with\n * the aside after the actions.\n */\nexport function HeroBlock({\n  announcement,\n  title,\n  highlight,\n  description,\n  primaryAction,\n  secondaryAction,\n  note,\n  highlights = [],\n  aside,\n}: HeroBlockProps) {\n  const headingId = useId();\n  return (\n    <section aria-labelledby={headingId} className=\"border-b border-separator\">\n      <div className=\"mx-auto grid w-full max-w-6xl gap-12 px-4 py-14 md:px-6 lg:grid-cols-[1.05fr_0.95fr] lg:items-center lg:py-20\">\n        <div className=\"flex flex-col items-start\">\n          {announcement ? (\n            <a\n              href={announcement.href}\n              className=\"group mb-6 inline-flex items-center gap-2 border border-border bg-card px-2.5 py-1 text-xs font-medium text-muted-foreground outline-none transition-colors duration-200 hover:border-primary-300 hover:text-foreground focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\"\n            >\n              <span aria-hidden=\"true\" className=\"size-1.5 bg-primary-500\" />\n              {announcement.label}\n              <IconArrowRight\n                aria-hidden=\"true\"\n                className=\"size-3 transition-transform duration-200 group-hover:translate-x-0.5 motion-reduce:transition-none\"\n              />\n            </a>\n          ) : null}\n\n          <h1\n            id={headingId}\n            className=\"max-w-xl text-4xl font-bold leading-[1.05] tracking-tight text-foreground text-balance sm:text-5xl\"\n          >\n            {title}\n            {highlight ? <span className=\"block text-link\">{highlight}</span> : null}\n          </h1>\n\n          <p className=\"mt-5 max-w-xl text-base leading-relaxed text-muted-foreground sm:text-lg\">\n            {description}\n          </p>\n\n          <div className=\"mt-8 flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap\">\n            <Button size=\"lg\" variant=\"brand\" asChild>\n              <a href={primaryAction.href}>\n                {primaryAction.label}\n                <IconArrowRight aria-hidden=\"true\" />\n              </a>\n            </Button>\n            {secondaryAction ? (\n              <Button size=\"lg\" variant=\"outline\" asChild>\n                <a href={secondaryAction.href}>{secondaryAction.label}</a>\n              </Button>\n            ) : null}\n          </div>\n\n          {note ? <p className=\"mt-3 text-xs text-muted-foreground\">{note}</p> : null}\n\n          {highlights.length ? (\n            <ul className=\"mt-6 grid gap-x-6 gap-y-2 text-sm text-muted-foreground sm:grid-cols-2\">\n              {highlights.map((item) => (\n                <li key={item} className=\"flex items-start gap-2\">\n                  <IconCheck aria-hidden=\"true\" className=\"mt-0.5 size-4 shrink-0 text-brand-icon\" />\n                  {item}\n                </li>\n              ))}\n            </ul>\n          ) : null}\n        </div>\n\n        {aside ? <div className=\"min-w-0\">{aside}</div> : null}\n      </div>\n    </section>\n  );\n}\n",
+      "type": "registry:block",
+      "target": "components/blocks/hero.tsx"
+    }
+  ]
+}

package/registry/hover-card.json

@@ -0,0 +1,28 @@
+{
+  "$schema": "https://abackui.com/schema/registry-item.json",
+  "name": "hover-card",
+  "type": "registry:ui",
+  "title": "Hover Card",
+  "description": "A short profile or context card shown on hover and keyboard focus.",
+  "dependencies": [
+    "radix-ui"
+  ],
+  "registryDependencies": [
+    "https://abackui.com/r/utils.json"
+  ],
+  "categories": [
+    "Overlays"
+  ],
+  "docs": "https://abackui.com/docs/components/hover-card",
+  "meta": {
+    "status": "beta"
+  },
+  "files": [
+    {
+      "path": "components/ui/hover-card.tsx",
+      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { HoverCard as HoverCardPrimitive } from \"radix-ui\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst HoverCard = HoverCardPrimitive.Root;\nconst HoverCardTrigger = HoverCardPrimitive.Trigger;\n\nfunction HoverCardContent({\n  className,\n  align = \"center\",\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal>\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-64 border border-border bg-popover p-4 text-popover-foreground shadow-lg outline-none\",\n          \"duration-150 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          \"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n          className,\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  );\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent };\n",
+      "type": "registry:ui",
+      "target": "components/ui/hover-card.tsx"
+    }
+  ]
+}