sigma-ui/__generated/registry-schemes/style-system/css/toggle.json

CLI for SIGMA-UI components.

{
  "name": "toggle",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "name": "Toggle.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue';\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'reka-ui';\nimport { type ToggleVariants, toggleVariants } from '.';\n\nconst props = withDefaults(defineProps<ToggleProps & {\n  variant?: ToggleVariants['variant'];\n  size?: ToggleVariants['size'];\n}>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n});\n\nconst emits = defineEmits<ToggleEmits>();\n\nconst delegatedProps = computed(() => ({ ...props, size: undefined, variant: undefined }));\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits);\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"[toggleVariants({ variant, size })]\"\n  >\n    <slot />\n  </Toggle>\n</template>\n\n<style>\n.sigma-ui-toggle {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius-md);\n  font-size: 0.875rem;\n  font-weight: 500;\n  transition-duration: 150ms;\n  transition-property: color, background-color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.sigma-ui-toggle:hover {\n  background-color: hsl(var(--muted));\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-toggle:focus-visible {\n  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring));\n  outline: none;\n}\n\n.sigma-ui-toggle:disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-toggle[data-state=\"on\"] {\n  background-color: hsl(var(--secondary));\n  color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-toggle--default {\n  background-color: transparent;\n}\n\n.sigma-ui-toggle--outline {\n  border: 1px solid hsl(var(--input));\n  background-color: transparent;\n}\n\n.sigma-ui-toggle--outline:hover {\n  background-color: hsl(var(--secondary));\n  color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-toggle--size-default {\n  height: 2.5rem;\n  padding-inline: 0.75rem;\n}\n\n.sigma-ui-toggle--size-sm {\n  height: 2.25rem;\n  padding-inline: 0.625rem;\n}\n\n.sigma-ui-toggle--size-lg {\n  height: 2.75rem;\n  padding-inline: 1.25rem;\n}\n</style>\n"
    },
    {
      "name": "index.ts",
      "content": "import { type VariantProps, cva } from 'class-variance-authority';\n\nexport { default as Toggle } from './Toggle.vue';\n\nexport const toggleVariants = cva(\n  'sigma-ui-toggle',\n  {\n    variants: {\n      variant: {\n        default: 'sigma-ui-toggle--default',\n        outline: 'sigma-ui-toggle--outline',\n      },\n      size: {\n        default: 'sigma-ui-toggle--size-default',\n        sm: 'sigma-ui-toggle--size-sm',\n        lg: 'sigma-ui-toggle--size-lg',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>;\n"
    }
  ],
  "type": "components:ui"
}