{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-slider-21",
  "description": "Object position sliders with reset",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@coss/button",
    "@coss/fieldset",
    "@coss/label",
    "@coss/number-field",
    "@coss/slider"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-slider-21.tsx",
      "content": "\"use client\";\n\nimport { RotateCcwIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  NumberField,\n  NumberFieldGroup,\n  NumberFieldInput,\n} from \"@/registry/default/ui/number-field\";\nimport { Slider } from \"@/registry/default/ui/slider\";\n\nconst min = -10;\nconst max = 10;\nconst defaultValues = { x: 0, y: 0, z: 0 };\nconst initialValues = { x: -2, y: 4, z: 2 };\n\nexport default function Particle() {\n  const [values, setValues] = useState(initialValues);\n\n  const updateValue = (axis: keyof typeof values, v: number | null) => {\n    setValues((prev) => ({ ...prev, [axis]: v ?? 0 }));\n  };\n\n  return (\n    <Fieldset className=\"flex max-w-none flex-col gap-4\">\n      <FieldsetLegend>Object position</FieldsetLegend>\n      <div className=\"flex flex-col gap-2\">\n        {([\"x\", \"y\", \"z\"] as const).map((axis) => (\n          <div className=\"flex items-center gap-2\" key={axis}>\n            <Label className=\"w-3 text-muted-foreground text-xs\">\n              {axis.toUpperCase()}\n            </Label>\n            <Slider\n              aria-label={`${axis.toUpperCase()} position`}\n              className=\"flex-1\"\n              max={max}\n              min={min}\n              onValueChange={(v) =>\n                updateValue(axis, Array.isArray(v) ? v[0] : v)\n              }\n              value={values[axis]}\n            />\n            <NumberField\n              aria-label={`Enter ${axis.toUpperCase()} value`}\n              className=\"w-16\"\n              max={max}\n              min={min}\n              onValueChange={(v) => updateValue(axis, v)}\n              render={<NumberFieldGroup />}\n              size=\"sm\"\n              value={values[axis]}\n            >\n              <NumberFieldInput />\n            </NumberField>\n          </div>\n        ))}\n      </div>\n      <Button\n        className=\"w-full\"\n        onClick={() => setValues(defaultValues)}\n        variant=\"outline\"\n      >\n        <RotateCcwIcon aria-hidden=\"true\" className=\"-ms-1 opacity-60\" />\n        Reset\n      </Button>\n    </Fieldset>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "meta": {
    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"
  },
  "categories": [
    "slider",
    "number field",
    "button"
  ],
  "type": "registry:block"
}