{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-group",
  "title": "Input Group",
  "description": "Input or textarea with pixel addons and buttons inside one sunken field.",
  "dependencies": [
    "class-variance-authority",
    "cn"
  ],
  "registryDependencies": [
    "@ui95/theme",
    "@ui95/button",
    "@ui95/input",
    "@ui95/textarea"
  ],
  "files": [
    {
      "path": "components/ui/input-group.tsx",
      "content": "\"use client\"\n\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"cn\"\nimport * as React from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-10 w-full min-w-0 items-stretch overflow-hidden pixel-border border-border well bg-input text-foreground outline-none has-[[data-slot=input-group-control]:focus-visible]:outline-dashed has-[[data-slot=input-group-control]:focus-visible]:outline-(length:--pixel) has-[[data-slot=input-group-control]:focus-visible]:outline-offset-(--pixel) has-[[data-slot=input-group-control]:focus-visible]:outline-foreground has-disabled:bg-muted has-disabled:text-muted-foreground has-[[data-slot][aria-invalid=true]]:border-dashed has-[[data-slot][aria-invalid=true]]:border-destructive has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-1.5 font-pixel text-[16px] leading-none text-well-muted uppercase select-none group-data-[disabled=true]/input-group:text-well-muted [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]\",\n        \"inline-end\":\n          \"order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]\",\n        \"block-start\":\n          \"order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2\",\n        \"block-end\":\n          \"order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"flex items-center gap-2\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 px-1.5 text-sm [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 font-pixel text-[16px] leading-none text-well-muted uppercase [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"h-full flex-1 border-0! bg-transparent shadow-none! outline-none focus-visible:outline-none disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none border-0! bg-transparent py-2 shadow-none! outline-none focus-visible:outline-none disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupText,\n  InputGroupTextarea,\n}\n",
      "type": "registry:ui"
    }
  ],
  "meta": {
    "sounds": {
      "typewriter.key": {
        "note": "Typebar strike: sharp metal clack, then the platen thud just after",
        "layers": [
          {
            "wave": "sine",
            "frequency": 365,
            "attack": 0,
            "decay": 0.00239,
            "gain": 0.55,
            "filter": {
              "type": "highpass",
              "frequency": 240,
              "q": 0.972
            },
            "curve": 6
          }
        ],
        "jitter": {
          "cents": 97,
          "gainDb": 0,
          "decay": 0.08
        }
      },
      "typewriter.space": {
        "note": "Stabilized space bar: deeper plate ring and thock, with a faint stabilizer rattle",
        "layers": [
          {
            "wave": "square",
            "frequency": 40,
            "attack": 0.0001,
            "decay": 0.005,
            "curve": 5,
            "gain": 0.3,
            "delay": 0
          },
          {
            "wave": "square",
            "frequency": 1100,
            "attack": 0.0003,
            "decay": 0.00137,
            "curve": 1.4,
            "gain": 0.21,
            "filter": {
              "type": "bandpass",
              "frequency": 183,
              "q": 0.604
            },
            "delay": 0,
            "frequencyEnd": 348
          },
          {
            "wave": "sine",
            "frequency": 1390,
            "sineShare": 0.75,
            "attack": 0.0004,
            "decay": 0.00222,
            "curve": 5,
            "gain": 0.23,
            "delay": 0,
            "frequencyEnd": 173,
            "pitchTime": 0.124
          },
          {
            "wave": "noise",
            "frequency": 0,
            "attack": 0.0039,
            "decay": 0.00702,
            "curve": 2.2,
            "gain": 0.4,
            "delay": 0.111,
            "filter": {
              "type": "bandpass",
              "frequency": 420,
              "q": 3.15
            }
          }
        ],
        "jitter": {
          "cents": 45,
          "gainDb": 1.9,
          "decay": 0.1
        }
      },
      "typewriter.return": {
        "note": "Carriage return: lever clunk, then the end-of-line bell",
        "layers": [
          {
            "wave": "noise",
            "frequency": 0,
            "attack": 0.0021,
            "decay": 0.001,
            "gain": 0.43,
            "filter": {
              "type": "bandpass",
              "frequency": 415,
              "q": 1.34
            }
          },
          {
            "wave": "sine",
            "frequency": 159,
            "frequencyEnd": 80,
            "pitchTime": 0.037,
            "attack": 0.001,
            "decay": 0.001,
            "gain": 0.27,
            "delay": 0
          },
          {
            "wave": "sine",
            "frequency": 141,
            "attack": 0.0005,
            "decay": 0.00111,
            "gain": 0.07,
            "delay": 0.02
          },
          {
            "wave": "noise",
            "frequency": 0,
            "attack": 0.0005,
            "decay": 0.00135,
            "gain": 0,
            "delay": 0.02,
            "pitchTime": 0.027,
            "frequencyEnd": 40.7,
            "curve": 1,
            "pitchSteps": 2
          }
        ],
        "jitter": {
          "cents": 40,
          "gainDb": 2,
          "decay": 0.08
        }
      }
    }
  },
  "categories": [
    "ui"
  ],
  "type": "registry:ui"
}