{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "Questionnaire",
  "dependencies": [
    "@shadcn/react",
    "cn",
    "lucide-react",
    "rescript-base-ui",
    "rescript-shadcn-react"
  ],
  "registryDependencies": [
    "@rescript-shadcn/Button",
    "@rescript-shadcn/Icons"
  ],
  "files": [
    {
      "path": "registry/base/ui/Questionnaire.res",
      "content": "@@directive(\"'use client'\")\n@@jsxConfig({version: 4, mode: \"automatic\", module_: \"BaseUi.BaseUiJsxDOM\"})\n\n@module(\"cn\") external cn: (string, option<string>) => string = \"cn\"\n@module(\"cn\") external cn3: (string, string, option<string>) => string = \"cn\"\n\nmodule Primitive = ShadcnReact.Questionnaire\nmodule Shortcuts = {\n  type t = Primitive.shortcuts\n}\nmodule Status = {\n  type t = Primitive.status\n}\n\ntype props = Primitive.Root.props\nlet toPrimitiveProps: props => props = %raw(`({className, ...props}) => props`)\n@react.componentWithProps(props)\nlet make = (props: props) =>\n  <Primitive.Root\n    {...toPrimitiveProps(props)}\n    dataSlot={props.dataSlot->Option.getOr(\"questionnaire\")}\n    className={cn(\"gap-4 flex w-full min-w-0 flex-col\", props.className)}\n  />\n\nmodule Progress = {\n  type props = Primitive.Progress.props\n  let toPrimitiveProps: props => props = %raw(`({className, ...props}) => props`)\n  @react.componentWithProps(props)\n  let make = (props: props) =>\n    <Primitive.Progress\n      {...toPrimitiveProps(props)}\n      dataSlot={props.dataSlot->Option.getOr(\"questionnaire-progress\")}\n      className={cn(\n        \"text-xs min-h-[1lh] w-fit min-w-[14ch] font-medium text-muted-foreground tabular-nums\",\n        props.className,\n      )}\n    />\n  module WithRender = {\n    type props = Primitive.Progress.WithRender.props\n    let toPrimitiveProps: props => props = %raw(`({className, ...props}) => props`)\n    @react.componentWithProps(props)\n    let make = (props: props) =>\n      <Primitive.Progress.WithRender\n        {...toPrimitiveProps(props)}\n        dataSlot={props.dataSlot->Option.getOr(\"questionnaire-progress\")}\n        className={cn(\n          \"text-xs min-h-[1lh] w-fit min-w-[14ch] font-medium text-muted-foreground tabular-nums\",\n          props.className,\n        )}\n      />\n  }\n}\n\nmodule Item = {\n  type props = Primitive.Item.props\n  let toPrimitiveProps: props => props = %raw(`({className, ...props}) => props`)\n  @react.componentWithProps(props)\n  let make = (props: props) =>\n    <Primitive.Item\n      {...toPrimitiveProps(props)}\n      dataSlot={props.dataSlot->Option.getOr(\"questionnaire-item\")}\n      className={cn(\"flex flex-col gap-4 min-w-0 border-0 p-0 outline-none\", props.className)}\n    />\n}\n\nmodule Title = {\n  type props = Primitive.Title.props\n  let toPrimitiveProps: props => props = %raw(`({className, ...props}) => props`)\n  @react.componentWithProps(props)\n  let make = (props: props) =>\n    <Primitive.Title\n      {...toPrimitiveProps(props)}\n      dataSlot={props.dataSlot->Option.getOr(\"questionnaire-title\")}\n      className={cn(\n        \"text-base leading-snug font-medium [&:not(:has(~[data-slot=questionnaire-description]))]:mb-4 font-heading text-pretty\",\n        props.className,\n      )}\n    />\n}\n\nmodule Description = {\n  type props = Primitive.Description.props\n  let toPrimitiveProps: props => props = %raw(`({className, ...props}) => props`)\n  @react.componentWithProps(props)\n  let make = (props: props) =>\n    <Primitive.Description\n      {...toPrimitiveProps(props)}\n      dataSlot={props.dataSlot->Option.getOr(\"questionnaire-description\")}\n      className={cn(\"text-sm text-pretty text-muted-foreground\", props.className)}\n    />\n}\n\nmodule Choices = {\n  type props = Primitive.Choices.props\n  let toPrimitiveProps: props => props = %raw(`({className, ...props}) => props`)\n  @react.componentWithProps(props)\n  let make = (props: props) =>\n    <Primitive.Choices\n      {...toPrimitiveProps(props)}\n      dataSlot={props.dataSlot->Option.getOr(\"questionnaire-choices\")}\n      className={cn(\"gap-2 group/questionnaire-choices grid min-w-0\", props.className)}\n    />\n}\n\nmodule Error = {\n  type props = Primitive.Error.props\n  let toPrimitiveProps: props => props = %raw(`({className, ...props}) => props`)\n  @react.componentWithProps(props)\n  let make = (props: props) =>\n    <Primitive.Error\n      {...toPrimitiveProps(props)}\n      dataSlot={props.dataSlot->Option.getOr(\"questionnaire-error\")}\n      className={cn(\"mt-2 text-sm text-destructive\", props.className)}\n    />\n}\n\nmodule ChoiceDescription = {\n  type props = BaseUi.Types.DomProps.t\n  let toDomProps: props => props = %raw(`({className, ...props}) => props`)\n  @react.componentWithProps(props)\n  let make = (props: props) =>\n    <span\n      {...toDomProps(props)}\n      dataSlot={props.dataSlot->Option.getOr(\"questionnaire-choice-description\")}\n      className={cn(\"text-muted-foreground\", props.className)}\n    />\n}\n\nmodule Actions = {\n  type props = BaseUi.Types.DomProps.t\n  let toDomProps: props => props = %raw(`({className, ...props}) => props`)\n  @react.componentWithProps(props)\n  let make = (props: props) =>\n    <div\n      {...toDomProps(props)}\n      dataSlot={props.dataSlot->Option.getOr(\"questionnaire-actions\")}\n      className={cn(\n        \"gap-2 sm:min-h-8 grid min-h-11 w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center\",\n        props.className,\n      )}\n    />\n}\n\nmodule Choice = {\n  type props = Primitive.Choice.props\n  let toPrimitiveProps: props => props = %raw(`({className, children, ...props}) => props`)\n  @react.componentWithProps(props)\n  let make = (props: props) =>\n    <Primitive.Choice\n      {...toPrimitiveProps(props)}\n      dataSlot={props.dataSlot->Option.getOr(\"questionnaire-choice\")}\n      className={cn(\n        \"border-input dark:bg-input/20 hover:bg-muted/50 data-checked:border-primary/40 data-checked:bg-muted dark:data-checked:bg-muted data-invalid:border-destructive has-[>input:focus-visible]:border-ring has-[>input:focus-visible]:ring-ring/50 gap-2.5 rounded-lg border bg-transparent px-3 py-2.5 text-sm has-[>input:focus-visible]:ring-3 group/questionnaire-choice relative flex min-h-11 cursor-pointer items-start text-start transition-colors outline-none select-none data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50\",\n        props.className,\n      )}\n    >\n      <Primitive.ChoiceInput\n        dataSlot=\"questionnaire-choice-input\"\n        className=\"absolute inset-0 z-10 size-full cursor-pointer opacity-0\"\n      />\n      <span\n        ariaHidden=true\n        dataSlot=\"questionnaire-choice-indicator\"\n        className=\"border-input dark:bg-input/30 group-data-checked/questionnaire-choice:bg-primary dark:group-data-checked/questionnaire-choice:bg-primary group-data-checked/questionnaire-choice:text-primary-foreground group-data-checked/questionnaire-choice:border-primary size-4 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 rounded-[4px] pointer-events-none relative flex shrink-0 items-center justify-center border group-data-[type=radio]/questionnaire-choice:rounded-full\"\n      >\n        <span\n          dataSlot=\"questionnaire-choice-indicator-dot\"\n          className=\"bg-primary-foreground size-2 hidden rounded-full group-data-[type=checkbox]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block\"\n        />\n        <Icons.Check\n          dataSlot=\"questionnaire-choice-indicator-check\"\n          className=\"size-3.5 hidden group-data-[type=radio]/questionnaire-choice:hidden group-data-checked/questionnaire-choice:block\"\n        />\n      </span>\n      <Primitive.ChoiceLabel\n        dataSlot=\"questionnaire-choice-label\"\n        className=\"gap-0.5 flex min-w-0 flex-1 flex-col leading-snug\"\n      >\n        {props.children->Option.getOr(React.null)}\n      </Primitive.ChoiceLabel>\n      <Primitive.ChoiceShortcut\n        dataSlot=\"questionnaire-choice-shortcut\"\n        className=\"border-input bg-background text-muted-foreground size-5 translate-y-[--spacing(0.45)] group-has-data-[slot=questionnaire-choice-description]/questionnaire-choice:translate-y-0.5 items-center justify-center rounded-md border font-mono text-[0.625rem] font-medium leading-none pointer-events-none ms-auto hidden shrink-0 group-data-[shortcut]/questionnaire-choice:inline-flex\"\n      />\n    </Primitive.Choice>\n}\n\nmodule Input = {\n  type props = Primitive.Input.props\n  let toPrimitiveProps: props => props = %raw(`({className, ...props}) => props`)\n  @react.componentWithProps(props)\n  let make = (props: props) =>\n    <div\n      dataSlot=\"questionnaire-input-wrapper\"\n      className=\"w-full group/questionnaire-input relative min-w-0\"\n    >\n      <Primitive.Input\n        {...toPrimitiveProps(props)}\n        dataSlot={props.dataSlot->Option.getOr(\"questionnaire-input\")}\n        className={cn(\n          \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base focus-visible:ring-3 aria-invalid:ring-3 md:text-sm min-h-11 w-full min-w-0 transition-[color,box-shadow,background-color] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 sm:min-h-0 selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground\",\n          props.className,\n        )}\n      />\n    </div>\n}\n\nmodule Previous = {\n  type props = {...Primitive.Previous.props, size?: Button.Size.t, variant?: Button.Variant.t}\n  let toPrimitiveProps: props => Primitive.Previous.props = %raw(`({className, children, size, variant, ...props}) => props`)\n  @react.componentWithProps(props)\n  let make = (props: props) => {\n    let size = props.size->Option.getOr(Button.Size.Default)\n    let variant = props.variant->Option.getOr(Button.Variant.Outline)\n    <Primitive.Previous\n      {...toPrimitiveProps(props)}\n      dataSlot={props.dataSlot->Option.getOr(\"questionnaire-previous\")}\n      dataSize={props.dataSize->Option.getOr((size :> string))}\n      dataVariant={props.dataVariant->Option.getOr((variant :> string))}\n      className={cn3(\n        Button.buttonVariants(~size, ~variant),\n        \" col-start-1 row-start-1 min-h-11 justify-self-start sm:min-h-0\",\n        props.className,\n      )}\n    >\n      {props.children->Option.getOr(React.string(\"Previous\"))}\n    </Primitive.Previous>\n  }\n}\n\nmodule Skip = {\n  type props = {...Primitive.Skip.props, size?: Button.Size.t, variant?: Button.Variant.t}\n  let toPrimitiveProps: props => Primitive.Skip.props = %raw(`({className, children, size, variant, ...props}) => props`)\n  @react.componentWithProps(props)\n  let make = (props: props) => {\n    let size = props.size->Option.getOr(Button.Size.Default)\n    let variant = props.variant->Option.getOr(Button.Variant.Outline)\n    <Primitive.Skip\n      {...toPrimitiveProps(props)}\n      dataSlot={props.dataSlot->Option.getOr(\"questionnaire-skip\")}\n      dataSize={props.dataSize->Option.getOr((size :> string))}\n      dataVariant={props.dataVariant->Option.getOr((variant :> string))}\n      className={cn3(\n        Button.buttonVariants(~size, ~variant),\n        \" col-start-2 row-start-1 min-h-11 justify-self-end sm:min-h-0\",\n        props.className,\n      )}\n    >\n      {props.children->Option.getOr(React.string(\"Skip\"))}\n    </Primitive.Skip>\n  }\n}\n\nmodule Next = {\n  type props = {...Primitive.Next.props, size?: Button.Size.t, variant?: Button.Variant.t}\n  let toPrimitiveProps: props => Primitive.Next.props = %raw(`({className, children, size, variant, ...props}) => props`)\n  @react.componentWithProps(props)\n  let make = (props: props) => {\n    let size = props.size->Option.getOr(Button.Size.Default)\n    let variant = props.variant->Option.getOr(Button.Variant.Default)\n    <Primitive.Next\n      {...toPrimitiveProps(props)}\n      dataSlot={props.dataSlot->Option.getOr(\"questionnaire-next\")}\n      dataSize={props.dataSize->Option.getOr((size :> string))}\n      dataVariant={props.dataVariant->Option.getOr((variant :> string))}\n      className={cn3(\n        Button.buttonVariants(~size, ~variant),\n        \" col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0\",\n        props.className,\n      )}\n    >\n      {props.children->Option.getOr(React.string(\"Next\"))}\n    </Primitive.Next>\n  }\n}\n\nmodule Submit = {\n  type props = {...Primitive.Submit.props, size?: Button.Size.t, variant?: Button.Variant.t}\n  let toPrimitiveProps: props => Primitive.Submit.props = %raw(`({className, children, size, variant, ...props}) => props`)\n  @react.componentWithProps(props)\n  let make = (props: props) => {\n    let size = props.size->Option.getOr(Button.Size.Default)\n    let variant = props.variant->Option.getOr(Button.Variant.Default)\n    <Primitive.Submit\n      {...toPrimitiveProps(props)}\n      dataSlot={props.dataSlot->Option.getOr(\"questionnaire-submit\")}\n      dataSize={props.dataSize->Option.getOr((size :> string))}\n      dataVariant={props.dataVariant->Option.getOr((variant :> string))}\n      className={cn3(\n        Button.buttonVariants(~size, ~variant),\n        \" col-start-3 row-start-1 min-h-11 justify-self-end sm:min-h-0\",\n        props.className,\n      )}\n    >\n      {props.children->Option.getOr(React.string(\"Submit\"))}\n    </Primitive.Submit>\n  }\n}\n",
      "type": "registry:file",
      "target": "@ui/Questionnaire.res"
    }
  ],
  "type": "registry:ui"
}