{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-ky-demo",
  "title": "UseKyDemo",
  "description": "use-ky's hook in action.",
  "registryDependencies": [
    "card",
    "badge",
    "button",
    "input",
    "label",
    "tabs",
    "https://guarahooks.com/r/use-ky.json"
  ],
  "files": [
    {
      "path": "registry/example/use-ky-demo.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { useState } from 'react';\n\nimport { Badge } from '@/components/ui/badge';\nimport { Button } from '@/components/ui/button';\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/components/ui/card';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';\n\nimport {\n  KyProvider,\n  useKyContext,\n  useKyGet,\n  useKyInstance,\n  useKyPost,\n  type KyConfig,\n} from '@/hooks/guarahooks/use-ky';\n\ninterface HttpBinResponse {\n  args: Record<string, string>;\n  data: string;\n  files: Record<string, string>;\n  form: Record<string, string>;\n  headers: Record<string, string>;\n  json: Record<string, any> | null;\n  origin: string;\n  url: string;\n}\n\ninterface PostData {\n  title: string;\n  body: string;\n  userId: number;\n}\n\ninterface PostResponse extends PostData {\n  id: number;\n}\n\nfunction GetDemo() {\n  const { data, error, loading, refetch, abort, aborted } =\n    useKyGet<HttpBinResponse>('delay/3', { retries: 2, timeout: 5000 });\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>GET Request</CardTitle>\n        <CardDescription>\n          Returns data after a 3-second delay to demonstrate abort\n          functionality.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"space-y-4\">\n        <div className=\"flex items-center gap-2\">\n          <Badge variant={loading ? 'default' : 'secondary'}>\n            {loading ? 'Loading...' : 'Idle'}\n          </Badge>\n          {aborted && <Badge variant=\"destructive\">Aborted</Badge>}\n        </div>\n        {error && <p className=\"text-destructive\">Error: {error.message}</p>}\n        {!loading && !aborted && data && (\n          <pre className=\"mt-2 p-3 rounded-md bg-muted text-sm overflow-auto max-h-32\">\n            {JSON.stringify(data, null, 2)}\n          </pre>\n        )}\n      </CardContent>\n      <CardFooter className=\"flex justify-end gap-2\">\n        <Button variant=\"outline\" onClick={abort} disabled={!loading}>\n          Abort\n        </Button>\n        <Button onClick={refetch} disabled={loading}>\n          Refetch\n        </Button>\n      </CardFooter>\n    </Card>\n  );\n}\n\nfunction PostDemo() {\n  const [title, setTitle] = useState('Test Title');\n  const [body, setBody] = useState('Test body content');\n\n  const {\n    data,\n    error,\n    loading,\n    refetch: createPost,\n  } = useKyPost<HttpBinResponse>(\n    'post',\n    { title, body, userId: 1 },\n    { immediate: false, retries: 2, timeout: 5000 },\n  );\n\n  const handleSubmit = async () => {\n    const result = await createPost();\n    if (result) {\n      console.log('Post response:', result);\n    }\n  };\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>POST Request</CardTitle>\n        <CardDescription>Posts data to /post endpoint</CardDescription>\n      </CardHeader>\n      <CardContent className=\"space-y-4\">\n        <div className=\"space-y-2\">\n          <Label>Title</Label>\n          <Input value={title} onChange={(e) => setTitle(e.target.value)} />\n        </div>\n        <div className=\"space-y-2\">\n          <Label>Body</Label>\n          <textarea\n            value={body}\n            onChange={(e) => setBody(e.target.value)}\n            className=\"w-full rounded-md border px-3 py-2\"\n          />\n        </div>\n        {error && <p className=\"text-destructive\">Error: {error.message}</p>}\n        {data && (\n          <pre className=\"mt-2 p-3 rounded-md bg-muted text-sm overflow-auto\">\n            {JSON.stringify(data, null, 2)}\n          </pre>\n        )}\n      </CardContent>\n      <CardFooter>\n        <Button onClick={handleSubmit} disabled={loading} className=\"w-full\">\n          {loading ? 'Creating...' : 'Create Post'}\n        </Button>\n      </CardFooter>\n    </Card>\n  );\n}\n\nfunction MultipleRequestsDemo() {\n  const { get, post } = useKyInstance();\n  const [users, setUsers] = useState<HttpBinResponse[] | null>(null);\n  const [postResp, setPostResp] = useState<HttpBinResponse | null>(null);\n  const [loading, setLoading] = useState(false);\n  const [error, setError] = useState<string | null>(null);\n\n  const handleFetch = async () => {\n    setLoading(true);\n    setError(null);\n    try {\n      const [userData, postData] = await Promise.all([\n        get<HttpBinResponse[]>('delay/1'),\n        post<HttpBinResponse>('post', { title: 'x', body: 'y', userId: 1 }),\n      ]);\n      setUsers(userData);\n      setPostResp(postData);\n    } catch (err: any) {\n      setError(err.message);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Multiple Requests</CardTitle>\n        <CardDescription>\n          Use instance for parallel GET and POST requests\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"space-y-4\">\n        {error && <p className=\"text-destructive\">Error: {error}</p>}\n        {users && (\n          <pre className=\"mt-2 p-3 rounded-md bg-muted text-sm overflow-auto max-h-32\">\n            {JSON.stringify(users, null, 2)}\n          </pre>\n        )}\n        {postResp && (\n          <pre className=\"mt-2 p-3 rounded-md bg-muted text-sm overflow-auto max-h-32\">\n            {JSON.stringify(postResp, null, 2)}\n          </pre>\n        )}\n      </CardContent>\n      <CardFooter>\n        <Button onClick={handleFetch} disabled={loading} className=\"w-full\">\n          {loading ? 'Loading...' : 'Fetch Multiple'}\n        </Button>\n      </CardFooter>\n    </Card>\n  );\n}\n\nfunction ConfigDemo() {\n  const { config, updateConfig } = useKyContext();\n  const [newPrefix, setNewPrefix] = useState('');\n  const [newTimeout, setNewTimeout] = useState('');\n  const [showSuccess, setShowSuccess] = useState(false);\n\n  const handleUpdate = () => {\n    const updates: Partial<KyConfig> = {};\n    if (newPrefix) updates.prefixUrl = newPrefix;\n    if (newTimeout) updates.timeout = parseInt(newTimeout);\n    updateConfig(updates);\n    setNewPrefix('');\n    setNewTimeout('');\n    setShowSuccess(true);\n    setTimeout(() => setShowSuccess(false), 3000);\n  };\n\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Config</CardTitle>\n        <CardDescription>Dynamically update KyProvider config</CardDescription>\n      </CardHeader>\n      <CardContent className=\"space-y-4\">\n        <pre className=\"mt-2 p-3 rounded-md bg-muted text-sm overflow-auto\">\n          {JSON.stringify(config, null, 2)}\n        </pre>\n        <div className=\"space-y-2\">\n          <Label>Prefix URL</Label>\n          <Input\n            value={newPrefix}\n            onChange={(e) => setNewPrefix(e.target.value)}\n          />\n        </div>\n        <div className=\"space-y-2\">\n          <Label>Timeout (ms)</Label>\n          <Input\n            value={newTimeout}\n            onChange={(e) => setNewTimeout(e.target.value)}\n          />\n        </div>\n        {showSuccess && <Badge>Config Updated!</Badge>}\n      </CardContent>\n      <CardFooter>\n        <Button\n          onClick={handleUpdate}\n          disabled={!newPrefix && !newTimeout}\n          className=\"w-full\"\n        >\n          Update Config\n        </Button>\n      </CardFooter>\n    </Card>\n  );\n}\n\nfunction UseKyDemoContent() {\n  return (\n    <Tabs defaultValue=\"get\" className=\"w-full\">\n      <TabsList>\n        <TabsTrigger value=\"get\">GET</TabsTrigger>\n        <TabsTrigger value=\"post\">POST</TabsTrigger>\n        <TabsTrigger value=\"multiple\">Multiple</TabsTrigger>\n        <TabsTrigger value=\"config\">Config</TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"get\">\n        <GetDemo />\n      </TabsContent>\n      <TabsContent value=\"post\">\n        <PostDemo />\n      </TabsContent>\n      <TabsContent value=\"multiple\">\n        <MultipleRequestsDemo />\n      </TabsContent>\n      <TabsContent value=\"config\">\n        <ConfigDemo />\n      </TabsContent>\n    </Tabs>\n  );\n}\n\nexport default function UseKyDemo() {\n  return (\n    <KyProvider\n      config={{\n        prefixUrl: 'https://httpbin.org',\n        timeout: 10000,\n        retry: 2,\n        headers: { 'User-Agent': 'useKy-Demo/1.0' },\n      }}\n    >\n      <div className=\"w-full max-w-4xl mx-auto p-4\">\n        <h1 className=\"text-2xl font-bold mb-4\">useKy Hook Demo</h1>\n        <UseKyDemoContent />\n      </div>\n    </KyProvider>\n  );\n}\n",
      "type": "registry:example",
      "target": "components/example/use-ky-demo.tsx"
    }
  ],
  "type": "registry:example"
}