{
  "name": "variant-selector-multiple-ex-02",
  "type": "registry:example",
  "dependencies": [
    "lucide-react",
    "@radix-ui/react-toggle-group"
  ],
  "registryDependencies": [
    "https://ui.stackzero.co/r/variant-selector-multiple.json"
  ],
  "files": [
    {
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Check } from \"lucide-react\";\nimport VariantSelectorMultiple, {\n  VariantItem,\n} from \"@/components/commerce-ui/variant-selector-multiple\";\n\nconst deliveryOptions: VariantItem[] = [\n  {\n    id: \"standard\",\n    label: \"Standard Delivery (3-5 days)\",\n    value: \"standard\",\n  },\n  {\n    id: \"express\",\n    label: \"Express Delivery (1-2 days)\",\n    value: \"express\",\n  },\n  {\n    id: \"same-day\",\n    label: \"Same Day Delivery\",\n    value: \"same-day\",\n  },\n  {\n    id: \"pickup\",\n    label: \"In-Store Pickup\",\n    value: \"pickup\",\n  },\n];\n\nexport default function VariantSelector_Multiple_Ex_02() {\n  const [selectedOptions, setSelectedOptions] = React.useState<string[]>([\n    \"standard\",\n  ]);\n\n  return (\n    <div className=\"space-y-8\">\n      <div className=\"space-y-4 rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-800 dark:bg-gray-900\">\n        <h3 className=\"text-lg font-semibold text-gray-900 dark:text-gray-100\">\n          Delivery Options\n        </h3>\n        <p className=\"text-sm text-gray-600 dark:text-gray-400\">\n          Select your preferred delivery methods. You can choose multiple\n          options.\n        </p>\n\n        <div className=\"space-y-2\">\n          <label className=\"text-sm font-medium text-gray-700 dark:text-gray-300\">\n            Available Options:\n          </label>\n          <VariantSelectorMultiple\n            values={selectedOptions}\n            onValuesChange={setSelectedOptions}\n            variants={deliveryOptions}\n            className=\"grid grid-cols-1 gap-3 sm:grid-cols-2\"\n            itemClassName=\"relative bg-white border-2 border-gray-200 rounded-lg hover:border-purple-300 \n                         data-[state=on]:border-purple-600 data-[state=on]:bg-purple-50\n                         dark:bg-gray-900 dark:border-gray-700 dark:data-[state=on]:bg-purple-900/20\n                         dark:data-[state=on]:border-purple-500 dark:hover:border-purple-400\n                         focus:outline-none focus:ring-2 focus:ring-purple-500/50 focus:ring-offset-2\n                         dark:focus:ring-purple-500/40 dark:focus:ring-offset-gray-900\n                         h-auto py-4 px-4 text-left flex items-center justify-between\"\n            labelClassName=\"text-sm\"\n          />\n        </div>\n\n        <div className=\"mt-4 min-h-[200px] rounded-lg bg-gray-50 p-4 dark:bg-gray-800\">\n          <p className=\"font-medium text-gray-900 dark:text-gray-100\">\n            Selected Delivery Options:\n            {selectedOptions.length > 0 ? (\n              <span className=\"ml-1 text-purple-600 dark:text-purple-400\">\n                {selectedOptions.length}{\" \"}\n                {selectedOptions.length === 1 ? \"option\" : \"options\"}\n              </span>\n            ) : (\n              <span className=\"ml-1 text-gray-500\">None</span>\n            )}\n          </p>\n          {selectedOptions.length > 0 && (\n            <ul className=\"mt-2 space-y-1\">\n              {selectedOptions.map((option) => (\n                <li\n                  key={option}\n                  className=\"flex items-center text-sm text-gray-700 dark:text-gray-300\"\n                >\n                  <span className=\"mr-2 flex h-5 w-5 items-center justify-center rounded-full bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400\">\n                    <Check className=\"h-3.5 w-3.5\" />\n                  </span>\n                  {deliveryOptions.find((item) => item.value === option)?.label}\n                </li>\n              ))}\n            </ul>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "path": "/components/commerce-ui/components/variant-selector/multiple/variant-selector-multiple-ex-02.tsx",
      "target": "components/commerce-ui/variant-selector-multiple-ex-02.tsx"
    }
  ]
}