{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"ecommerce-product-list-filter-list","type":"registry:block","title":"Filter List","files":[{"path":"components/blocks/ecommerce/product-list/filter-list.tsx","content":"import { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Slider } from '@/components/ui/slider';\nimport { Heart, Star, SlidersHorizontal, X } from 'lucide-react';\nimport { useState } from 'react';\n\ninterface Product {\n  id: number;\n  name: string;\n  category: string;\n  price: number;\n  originalPrice: number;\n  rating: number;\n  reviews: number;\n  features: string[];\n}\n\ninterface Filter {\n  search: string;\n  category: string;\n  priceRange: [number, number];\n  minRating: number;\n  features: string[];\n}\n\nexport default function FilterList() {\n  const [showFilters, setShowFilters] = useState(false);\n  const [filters, setFilters] = useState<Filter>({\n    search: '',\n    category: 'all',\n    priceRange: [0, 1000],\n    minRating: 0,\n    features: [],\n  });\n\n  const categories = ['all', 'Accessories', 'Electronics', 'Sports'];\n  const features = [\n    'Water Resistant',\n    'Heart Rate Monitor',\n    'GPS',\n    'Sleep Tracking',\n    'Notifications',\n    'Leather Strap',\n    'Steel Band',\n  ];\n\n  const products: Product[] = [\n    {\n      id: 1,\n      name: 'Classic Leather Watch',\n      category: 'Accessories',\n      price: 299,\n      originalPrice: 399,\n      rating: 4.9,\n      reviews: 128,\n      features: ['Water Resistant', 'Leather Strap'],\n    },\n    {\n      id: 2,\n      name: 'Smart Watch Pro',\n      category: 'Electronics',\n      price: 499,\n      originalPrice: 599,\n      rating: 4.8,\n      reviews: 256,\n      features: [\n        'Heart Rate Monitor',\n        'GPS',\n        'Sleep Tracking',\n        'Notifications',\n      ],\n    },\n    {\n      id: 3,\n      name: 'Sport Watch Elite',\n      category: 'Sports',\n      price: 399,\n      originalPrice: 449,\n      rating: 4.7,\n      reviews: 192,\n      features: ['Water Resistant', 'Heart Rate Monitor', 'GPS'],\n    },\n  ];\n\n  const filteredProducts = products.filter((product) => {\n    const matchesSearch = product.name\n      .toLowerCase()\n      .includes(filters.search.toLowerCase());\n    const matchesCategory =\n      filters.category === 'all' || product.category === filters.category;\n    const matchesPrice =\n      product.price >= filters.priceRange[0] &&\n      product.price <= filters.priceRange[1];\n    const matchesRating = product.rating >= filters.minRating;\n    const matchesFeatures =\n      filters.features.length === 0 ||\n      filters.features.every((f) => product.features.includes(f));\n\n    return (\n      matchesSearch &&\n      matchesCategory &&\n      matchesPrice &&\n      matchesRating &&\n      matchesFeatures\n    );\n  });\n\n  return (\n    <div className=\"mx-auto w-full max-w-7xl p-6\">\n      <div className=\"flex flex-col gap-8 lg:flex-row\">\n        {/* Filters Sidebar */}\n        <div\n          className={`shrink-0 space-y-6 lg:w-64 ${\n            showFilters\n              ? 'bg-background fixed inset-0 z-50 p-6 lg:static lg:p-0'\n              : 'hidden lg:block'\n          }`}\n        >\n          <div className=\"flex items-center justify-between lg:hidden\">\n            <h2 className=\"font-semibold\">Filters</h2>\n            <Button\n              size=\"icon\"\n              variant=\"ghost\"\n              onClick={() => setShowFilters(false)}\n            >\n              <X className=\"h-4 w-4\" />\n            </Button>\n          </div>\n\n          <div className=\"space-y-4\">\n            <div>\n              <label className=\"text-sm font-medium\">Search</label>\n              <Input\n                placeholder=\"Search products...\"\n                value={filters.search}\n                onChange={(e) =>\n                  setFilters({ ...filters, search: e.target.value })\n                }\n                className=\"mt-1\"\n              />\n            </div>\n\n            <div>\n              <label className=\"text-sm font-medium\">Category</label>\n              <div className=\"mt-1 grid grid-cols-2 gap-2\">\n                {categories.map((category) => (\n                  <Button\n                    key={category}\n                    size=\"sm\"\n                    variant={\n                      filters.category === category ? 'default' : 'outline'\n                    }\n                    onClick={() =>\n                      setFilters({ ...filters, category: category })\n                    }\n                    className=\"capitalize\"\n                  >\n                    {category}\n                  </Button>\n                ))}\n              </div>\n            </div>\n\n            <div>\n              <label className=\"text-sm font-medium\">Price Range</label>\n              <div className=\"mt-4\">\n                <Slider\n                  value={filters.priceRange}\n                  min={0}\n                  max={1000}\n                  step={50}\n                  onValueChange={(value: [number, number]) =>\n                    setFilters({ ...filters, priceRange: value })\n                  }\n                />\n                <div className=\"text-muted-foreground mt-2 flex items-center justify-between text-sm\">\n                  <span>${filters.priceRange[0]}</span>\n                  <span>${filters.priceRange[1]}</span>\n                </div>\n              </div>\n            </div>\n\n            <div>\n              <label className=\"text-sm font-medium\">Minimum Rating</label>\n              <div className=\"mt-4\">\n                <Slider\n                  value={[filters.minRating]}\n                  min={0}\n                  max={5}\n                  step={0.5}\n                  onValueChange={(value) =>\n                    setFilters({ ...filters, minRating: value[0]! })\n                  }\n                />\n                <div className=\"mt-2 flex items-center gap-1\">\n                  <Star className=\"fill-primary text-primary h-4 w-4\" />\n                  <span className=\"text-sm\">{filters.minRating}</span>\n                </div>\n              </div>\n            </div>\n\n            <div>\n              <label className=\"text-sm font-medium\">Features</label>\n              <div className=\"mt-1 grid grid-cols-1 gap-2\">\n                {features.map((feature) => (\n                  <Button\n                    key={feature}\n                    size=\"sm\"\n                    variant={\n                      filters.features.includes(feature) ? 'default' : 'outline'\n                    }\n                    onClick={() =>\n                      setFilters({\n                        ...filters,\n                        features: filters.features.includes(feature)\n                          ? filters.features.filter((f) => f !== feature)\n                          : [...filters.features, feature],\n                      })\n                    }\n                  >\n                    {feature}\n                  </Button>\n                ))}\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* Product Grid */}\n        <div className=\"flex-1\">\n          <div className=\"mb-6 flex items-center justify-between\">\n            <div className=\"text-muted-foreground\">\n              {filteredProducts.length} products found\n            </div>\n            <Button\n              variant=\"outline\"\n              className=\"lg:hidden\"\n              onClick={() => setShowFilters(true)}\n            >\n              <SlidersHorizontal className=\"mr-2 h-4 w-4\" />\n              Filters\n            </Button>\n          </div>\n\n          <div className=\"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n            {filteredProducts.map((product) => (\n              <div\n                key={product.id}\n                className=\"group bg-card flex flex-col overflow-hidden rounded-xl border shadow-sm transition-shadow duration-300 hover:shadow-lg\"\n              >\n                <div className=\"bg-muted relative aspect-square\">\n                  <img\n                    src=\"https://images.unsplash.com/photo-1523275335684-37898b6baf30\"\n                    alt={product.name}\n                    className=\"object-cover transition-transform group-hover:scale-105\"\n                    sizes=\"(max-width: 768px) 100vw, (max-width: 1200px) 33vw, 25vw\"\n                  />\n                  <Button\n                    size=\"icon\"\n                    variant=\"ghost\"\n                    className=\"bg-background/80 absolute top-2 right-2 h-8 w-8 rounded-full opacity-0 backdrop-blur-sm transition-opacity group-hover:opacity-100\"\n                  >\n                    <Heart className=\"h-4 w-4\" />\n                  </Button>\n                </div>\n                <div className=\"flex flex-1 flex-col p-4\">\n                  <div className=\"flex-1 space-y-2\">\n                    <div className=\"min-w-0\">\n                      <h3 className=\"font-medium\">{product.name}</h3>\n                      <span className=\"bg-secondary text-secondary-foreground mt-1 inline-block rounded-md px-2 py-1 text-xs font-medium\">\n                        {product.category}\n                      </span>\n                      <div className=\"mt-2 flex items-center gap-1\">\n                        <Star className=\"fill-primary text-primary h-3.5 w-3.5\" />\n                        <span className=\"text-sm\">{product.rating}</span>\n                        <span className=\"text-muted-foreground text-sm\">\n                          ({product.reviews})\n                        </span>\n                      </div>\n                    </div>\n                    <div className=\"flex items-baseline gap-2\">\n                      <div className=\"font-medium\">${product.price}</div>\n                      <div className=\"text-muted-foreground text-sm line-through\">\n                        ${product.originalPrice}\n                      </div>\n                    </div>\n                    <div className=\"flex flex-wrap gap-1\">\n                      {product.features.map((feature) => (\n                        <span\n                          key={feature}\n                          className=\"bg-accent text-accent-foreground inline-block rounded-md px-2 py-1 text-xs font-medium\"\n                        >\n                          {feature}\n                        </span>\n                      ))}\n                    </div>\n                  </div>\n                  <div className=\"mt-4\">\n                    <Button size=\"sm\" className=\"w-full\">\n                      Add to Cart\n                    </Button>\n                  </div>\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n","type":"registry:component","target":"components/blocks/ecommerce/product-list/filter-list.tsx"},{"path":"components/ui/button.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"components/ui/input.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n","type":"registry:ui","target":"components/ui/input.tsx"},{"path":"components/ui/slider.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Slider({\n  className,\n  defaultValue,\n  value,\n  min = 0,\n  max = 100,\n  ...props\n}: React.ComponentProps<typeof SliderPrimitive.Root>) {\n  const _values = React.useMemo(\n    () =>\n      Array.isArray(value)\n        ? value\n        : Array.isArray(defaultValue)\n          ? defaultValue\n          : [min, max],\n    [value, defaultValue, min, max]\n  )\n\n  return (\n    <SliderPrimitive.Root\n      data-slot=\"slider\"\n      defaultValue={defaultValue}\n      value={value}\n      min={min}\n      max={max}\n      className={cn(\n        \"relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className=\"relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5\"\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className=\"absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full\"\n        />\n      </SliderPrimitive.Track>\n      {Array.from({ length: _values.length }, (_, index) => (\n        <SliderPrimitive.Thumb\n          data-slot=\"slider-thumb\"\n          key={index}\n          className=\"block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] select-none hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n","type":"registry:ui","target":"components/ui/slider.tsx"}],"description":"A product list paired with category, price, and attribute filters in a sidebar. Lets shoppers narrow large catalogs and find the right item fast.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}