{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"skeuomorphic-toggle-modern","type":"registry:item","title":"Modern","description":"A flat, hairline-edged switch with a stretching knob, a check-to-dash mark, and one soft accent pool.","files":[{"path":"snippets/skeuomorphic-toggle-modern.tsx","content":"import { SkeuomorphicToggleCollection } from \"@designcodeio/threeui\";\nimport \"@designcodeio/threeui/style.css\";\n\n// The component fills its parent, so the parent is what gives it a size.\nexport function SkeuomorphicToggleCollectionExample() {\n  return (\n    <div style={{ width: \"100%\", aspectRatio: \"16 / 9\" }}>\n      <SkeuomorphicToggleCollection variant=\"modern\" />\n    </div>\n  );\n}\n","type":"registry:file","target":"~/snippets/skeuomorphic-toggle-modern.tsx"}],"docs":"## Size\n\nThe component is 100% of its parent's width and height and has no size of its own, so a\nparent with no height renders nothing. A box at a 16 to 9 ratio suits it.\n\n## Props\n\nThis item is `SkeuomorphicToggleCollection` with `variant=\"modern\"`. The other settings\nare separate items in this collection, and the snippet sets this one for you.\n\nAll optional. The defaults below are what the snippet renders.\n\n| Prop         | Values                  | Default |\n| ------------ | ----------------------- | ------- |\n| `mode`       | `auto`, `dark`, `light` | `auto`  |\n| `speed`      | 0 to 3                  | `1`     |\n| `size`       | 0.35 to 2.5             | `1`     |\n| `opacity`    | 0.05 to 1               | `1`     |\n| `hue`        | -180 to 180             | `0`     |\n| `saturation` | 0 to 2                  | `1`     |\n| `brightness` | 0.35 to 1.65            | `1`     |\n\n`className` and `style` pass through to the root element.\n","author":"mengto","dependencies":["@designcodeio/threeui","three"]}