{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "use-array-state-demo",
  "title": "UseArrayStateDemo",
  "description": "use-array-state's hook in action.",
  "registryDependencies": [
    "button",
    "card",
    "input",
    "badge",
    "https://guarahooks.com/r/use-array-state.json"
  ],
  "files": [
    {
      "path": "registry/example/use-array-state-demo.tsx",
      "content": "'use client';\n\nimport React, { 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';\n\nimport { useArrayState } from '@/hooks/guarahooks/use-array-state';\n\nexport default function UseArrayStateDemo() {\n  const [inputValue, setInputValue] = useState('');\n  const [updateIndex, setUpdateIndex] = useState('');\n  const [updateValue, setUpdateValue] = useState('');\n\n  const {\n    array,\n    length,\n    isEmpty,\n    first,\n    last,\n    push,\n    pop,\n    shift,\n    unshift,\n    insert,\n    remove,\n    update,\n    clear,\n    reset,\n    sort,\n    reverse,\n    filter,\n  } = useArrayState<string>({\n    initialValue: ['React', 'TypeScript', 'Next.js'],\n    onChange: (newArray) => {\n      console.log('Array changed:', newArray);\n    },\n  });\n\n  const handleAddItem = () => {\n    if (inputValue.trim()) {\n      push(inputValue.trim());\n      setInputValue('');\n    }\n  };\n\n  const handleUpdateItem = () => {\n    const index = parseInt(updateIndex);\n    if (!isNaN(index) && updateValue.trim()) {\n      update(index, updateValue.trim());\n      setUpdateIndex('');\n      setUpdateValue('');\n    }\n  };\n\n  const handleInsertAtStart = () => {\n    if (inputValue.trim()) {\n      unshift(inputValue.trim());\n      setInputValue('');\n    }\n  };\n\n  const handleRemoveItem = (index: number) => {\n    remove(index);\n  };\n\n  const handleFilterLongItems = () => {\n    filter((item) => item.length <= 6);\n  };\n\n  return (\n    <Card className=\"w-full max-w-2xl mx-auto\">\n      <CardHeader>\n        <CardTitle>useArrayState</CardTitle>\n        <CardDescription>\n          A powerful hook for managing arrays as React state with built-in\n          manipulation methods.\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"space-y-6\">\n        {/* Array Display */}\n        <div>\n          <h3 className=\"text-sm font-medium mb-2\">Current Array:</h3>\n          <div className=\"flex flex-wrap gap-2 min-h-[40px] p-3 border rounded-md bg-muted/20\">\n            {array.map((item, index) => (\n              <Badge\n                key={index}\n                variant=\"secondary\"\n                className=\"cursor-pointer hover:bg-destructive hover:text-destructive-foreground\"\n                onClick={() => handleRemoveItem(index)}\n              >\n                {item} ×\n              </Badge>\n            ))}\n            {isEmpty && (\n              <span className=\"text-muted-foreground text-sm\">\n                Array is empty\n              </span>\n            )}\n          </div>\n        </div>\n\n        {/* Array Stats */}\n        <div className=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n          <div className=\"text-center\">\n            <div className=\"text-2xl font-bold\">{length}</div>\n            <div className=\"text-xs text-muted-foreground\">Length</div>\n          </div>\n          <div className=\"text-center\">\n            <div className=\"text-sm font-medium truncate\">{first || 'N/A'}</div>\n            <div className=\"text-xs text-muted-foreground\">First</div>\n          </div>\n          <div className=\"text-center\">\n            <div className=\"text-sm font-medium truncate\">{last || 'N/A'}</div>\n            <div className=\"text-xs text-muted-foreground\">Last</div>\n          </div>\n          <div className=\"text-center\">\n            <div className=\"text-sm font-medium\">{isEmpty ? 'Yes' : 'No'}</div>\n            <div className=\"text-xs text-muted-foreground\">Empty</div>\n          </div>\n        </div>\n\n        <div className=\"border-t\" />\n\n        {/* Add Items */}\n        <div className=\"space-y-3\">\n          <h3 className=\"text-sm font-medium\">Add Items:</h3>\n          <div className=\"flex gap-2\">\n            <Input\n              placeholder=\"Enter item to add\"\n              value={inputValue}\n              onChange={(e) => setInputValue(e.target.value)}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter') {\n                  handleAddItem();\n                }\n              }}\n            />\n            <Button onClick={handleAddItem} disabled={!inputValue.trim()}>\n              Add to End\n            </Button>\n            <Button\n              onClick={handleInsertAtStart}\n              disabled={!inputValue.trim()}\n              variant=\"outline\"\n            >\n              Add to Start\n            </Button>\n          </div>\n        </div>\n\n        {/* Update Item */}\n        <div className=\"space-y-3\">\n          <h3 className=\"text-sm font-medium\">Update Item:</h3>\n          <div className=\"flex gap-2\">\n            <Input\n              placeholder=\"Index\"\n              value={updateIndex}\n              onChange={(e) => setUpdateIndex(e.target.value)}\n              className=\"w-20\"\n            />\n            <Input\n              placeholder=\"New value\"\n              value={updateValue}\n              onChange={(e) => setUpdateValue(e.target.value)}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter') {\n                  handleUpdateItem();\n                }\n              }}\n            />\n            <Button\n              onClick={handleUpdateItem}\n              disabled={!updateIndex.trim() || !updateValue.trim()}\n              variant=\"outline\"\n            >\n              Update\n            </Button>\n          </div>\n        </div>\n\n        <div className=\"border-t\" />\n\n        {/* Array Operations */}\n        <div className=\"space-y-3\">\n          <h3 className=\"text-sm font-medium\">Array Operations:</h3>\n          <div className=\"grid grid-cols-2 md:grid-cols-4 gap-2\">\n            <Button\n              onClick={() => pop()}\n              disabled={isEmpty}\n              variant=\"outline\"\n              size=\"sm\"\n            >\n              Remove Last\n            </Button>\n            <Button\n              onClick={() => shift()}\n              disabled={isEmpty}\n              variant=\"outline\"\n              size=\"sm\"\n            >\n              Remove First\n            </Button>\n            <Button\n              onClick={() => sort()}\n              disabled={isEmpty}\n              variant=\"outline\"\n              size=\"sm\"\n            >\n              Sort A-Z\n            </Button>\n            <Button\n              onClick={() => reverse()}\n              disabled={isEmpty}\n              variant=\"outline\"\n              size=\"sm\"\n            >\n              Reverse\n            </Button>\n            <Button\n              onClick={handleFilterLongItems}\n              disabled={isEmpty}\n              variant=\"outline\"\n              size=\"sm\"\n            >\n              Filter Short\n            </Button>\n            <Button\n              onClick={clear}\n              disabled={isEmpty}\n              variant=\"destructive\"\n              size=\"sm\"\n            >\n              Clear All\n            </Button>\n            <Button onClick={reset} variant=\"outline\" size=\"sm\">\n              Reset\n            </Button>\n          </div>\n        </div>\n      </CardContent>\n      <CardFooter className=\"text-xs text-muted-foreground\">\n        Click on items to remove them. Use the operations above to manipulate\n        the array.\n      </CardFooter>\n    </Card>\n  );\n}\n",
      "type": "registry:example",
      "target": "components/example/use-array-state-demo.tsx"
    }
  ],
  "type": "registry:example"
}