{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toggle-layout",
  "title": "Toggle list layout",
  "description": "Toggle list layout, toggling between a list and a grid view.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/ecommerce/toggle-layout/index.tsx",
      "content": "'use client';\nimport { HTMLMotionProps, LayoutGroup, motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\nimport React from 'react';\n\nconst layout_config = {\n  list: {\n    mode: 'list',\n    className: 'flex flex-col space-y-4',\n    label: 'list view',\n  },\n  col2: {\n    mode: 'col2',\n    className: 'md:grid md:grid-cols-2 gap-4',\n    label: '2 column view',\n  },\n  col3: {\n    mode: 'col3',\n    className: 'md:grid md:grid-cols-3 gap-4',\n    label: '3 column view',\n  },\n  col4: {\n    mode: 'col4',\n    className: 'md:grid md:grid-cols-4 gap-4',\n    label: '4 column view',\n  },\n};\nconst animation_variants = {\n  container: {\n    list: { transition: { staggerChildren: 0.02 } },\n    col2: { transition: { staggerChildren: 0.1 } },\n    col3: { transition: { staggerChildren: 0.15 } },\n    col4: { transition: { staggerChildren: 0.2 } },\n    auto: { transition: { staggerChildren: 0.25 } },\n  },\n  card: {\n    hidden: { opacity: 0, y: 20 },\n    visible: { opacity: 1, y: 0 },\n  },\n};\ninterface ToggleLayoutContextValue {\n  modeIndex: number;\n  setModeIndex: React.Dispatch<React.SetStateAction<number>>;\n}\nconst ToggleLayoutContext = React.createContext<\n  ToggleLayoutContextValue | undefined\n>(undefined);\nfunction useToggleLayoutContext() {\n  const context = React.useContext(ToggleLayoutContext);\n  if (context === undefined) {\n    throw new Error(\n      'useToggleLayoutContext must be used within a ToggleLayoutProvider',\n    );\n  }\n  return context;\n}\nexport function ToggleLayout({\n  children,\n  ...props\n}: React.ComponentProps<typeof LayoutGroup>) {\n  const [modeIndex, setModeIndex] = React.useState<number>(0);\n\n  return (\n    <ToggleLayoutContext.Provider value={{ modeIndex, setModeIndex }}>\n      <LayoutGroup {...props}>{children}</LayoutGroup>\n    </ToggleLayoutContext.Provider>\n  );\n}\nexport function ToggleLayoutContainer({\n  className,\n  ...props\n}: HTMLMotionProps<'div'>) {\n  const { modeIndex } = useToggleLayoutContext();\n  const layout_config_values = [...Object.values(layout_config)];\n\n  const currentConfig = layout_config_values[modeIndex];\n\n  return (\n    <motion.div\n      layout\n      variants={animation_variants.container}\n      initial=\"hidden\"\n      animate={currentConfig.mode}\n      className={cn(currentConfig.className, className)}\n      {...props}\n    />\n  );\n}\n\nexport function SelectLayoutGroup({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n  const { modeIndex, setModeIndex } = useToggleLayoutContext();\n  const layout_config_values = [...Object.values(layout_config)];\n\n  return (\n    <div\n      className={cn(\n        'relative flex -space-x-px -space-y-px flex-col items-start md:flex-row justify-start   w-fit',\n        className,\n      )}\n      {...props}\n    >\n      {layout_config_values.map((config, index) => (\n        <div className=\"relative\" id=\"layout-toggle-button\" key={config.mode}>\n          <button\n            onClick={() => setModeIndex(index)}\n            className=\"appearance-none border  bg-none text-nowrap text-sm px-2.5 font-medium py-2\"\n          >\n            <span className=\"hover:underline-none\">{config.label}</span>\n          </button>\n          {index === modeIndex && (\n            <motion.div\n              className=\"mix-blend-difference z-2 rounded-inherit absolute inset-0 bg-secondary\"\n              layoutId=\"layout-toggle-button\"\n            />\n          )}\n        </div>\n      ))}\n    </div>\n  );\n}\n\nexport function ToggleLayoutCell({ ...props }: HTMLMotionProps<'div'>) {\n  return (\n    <motion.div\n      layout\n      variants={animation_variants.card}\n      initial=\"hidden\"\n      animate=\"visible\"\n      transition={{ type: 'spring', stiffness: 200, damping: 25 }}\n      exit=\"hidden\"\n      {...props}\n    />\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/toggle-layout.tsx"
    }
  ],
  "type": "registry:block"
}