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

CLI for SIGMA-UI components.

{
  "name": "dropdown-menu",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "name": "DropdownMenu.vue",
      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'reka-ui';\n\nconst props = defineProps<DropdownMenuRootProps>();\nconst emits = defineEmits<DropdownMenuRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DropdownMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRoot>\n</template>\n"
    },
    {
      "name": "DropdownMenuCheckboxItem.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { CheckIcon } from 'lucide-vue-next';\n\nconst props = defineProps<DropdownMenuCheckboxItemProps>();\nconst emits = defineEmits<DropdownMenuCheckboxItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DropdownMenuCheckboxItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-dropdown-menu-checkbox-item\"\n  >\n    <span class=\"sigma-ui-dropdown-menu-checkbox-item__indicator\">\n      <DropdownMenuItemIndicator>\n\n        <CheckIcon class=\"sigma-ui-dropdown-menu-checkbox-item__icon\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuCheckboxItem>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-checkbox-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0.375rem 0.5rem 0.375rem 2rem;\n  border-radius: var(--radius-sm);\n  cursor: default;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n  transition: background-color 150ms ease, color 150ms ease;\n  user-select: none;\n}\n\n.sigma-ui-dropdown-menu-checkbox-item:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-dropdown-menu-checkbox-item[data-disabled] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-dropdown-menu-checkbox-item__indicator {\n  position: absolute;\n  left: 0.5rem;\n  display: flex;\n  width: 0.875rem;\n  height: 0.875rem;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-dropdown-menu-checkbox-item__icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\n"
    },
    {
      "name": "DropdownMenuContent.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = withDefaults(\n  defineProps<DropdownMenuContentProps>(),\n  {\n    sideOffset: 4,\n  },\n);\nconst emits = defineEmits<DropdownMenuContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DropdownMenuPortal>\n    <DropdownMenuContent\n      v-bind=\"forwarded\"\n      class=\"sigma-ui-dropdown-menu-content\"\n      :class=\"$attrs.class\"\n    >\n      <slot />\n    </DropdownMenuContent>\n  </DropdownMenuPortal>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-content {\n  z-index: 50;\n  overflow: hidden;\n  min-width: 8rem;\n  padding: 0.25rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  animation: fadeOut 100ms ease-in forwards;\n  background-color: hsl(var(--popover));\n  box-shadow: var(--shadow-md);\n  color: hsl(var(--popover-foreground));\n  transform-origin: var(--reka-dropdown-menu-content-transform-origin);\n}\n\n.sigma-ui-dropdown-menu-content[data-state=\"open\"] {\n  animation: fade-in 200ms ease-out;\n}\n\n@keyframes fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes fade-out {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n</style>\n"
    },
    {
      "name": "DropdownMenuGroup.vue",
      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuGroup, type DropdownMenuGroupProps } from 'reka-ui';\n\nconst props = defineProps<DropdownMenuGroupProps>();\n</script>\n\n<template>\n  <DropdownMenuGroup v-bind=\"props\">\n    <slot />\n  </DropdownMenuGroup>\n</template>\n"
    },
    {
      "name": "DropdownMenuItem.vue",
      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<DropdownMenuItemProps & { inset?: boolean }>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <DropdownMenuItem\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-dropdown-menu-item\"\n    :class=\"[{ 'sigma-ui-dropdown-menu-item--inset': inset }]\"\n  >\n    <slot />\n  </DropdownMenuItem>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0.375rem 0.5rem;\n  border-radius: var(--radius-sm);\n  cursor: default;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n  transition: background-color 150ms ease, color 150ms ease;\n  user-select: none;\n}\n\n.sigma-ui-dropdown-menu-item--inset {\n  padding-left: 2rem;\n}\n\n.sigma-ui-dropdown-menu-item:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-dropdown-menu-item[data-disabled] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n</style>\n"
    },
    {
      "name": "DropdownMenuLabel.vue",
      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<DropdownMenuLabelProps & { inset?: boolean }>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <DropdownMenuLabel\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-dropdown-menu-label\"\n    :class=\"[{ 'sigma-ui-dropdown-menu-label--inset': inset }]\"\n  >\n    <slot />\n  </DropdownMenuLabel>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-label {\n  padding: 0.375rem 0.5rem;\n  color: hsl(var(--foreground));\n  font-size: 0.875rem;\n  font-weight: 600;\n  line-height: 1.25rem;\n}\n\n.sigma-ui-dropdown-menu-label--inset {\n  padding-left: 2rem;\n}\n</style>\n"
    },
    {
      "name": "DropdownMenuRadioGroup.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuRadioGroup,\n  type DropdownMenuRadioGroupEmits,\n  type DropdownMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = defineProps<DropdownMenuRadioGroupProps>();\nconst emits = defineEmits<DropdownMenuRadioGroupEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DropdownMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuRadioGroup>\n</template>\n"
    },
    {
      "name": "DropdownMenuRadioItem.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { CircleIcon } from 'lucide-vue-next';\n\nconst props = defineProps<DropdownMenuRadioItemProps>();\nconst emits = defineEmits<DropdownMenuRadioItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DropdownMenuRadioItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-dropdown-menu-radio-item\"\n  >\n    <span class=\"sigma-ui-dropdown-menu-radio-item__indicator\">\n      <DropdownMenuItemIndicator>\n\n        <CircleIcon class=\"sigma-ui-dropdown-menu-radio-item__icon\" />\n      </DropdownMenuItemIndicator>\n    </span>\n    <slot />\n  </DropdownMenuRadioItem>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-radio-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0.375rem 0.5rem 0.375rem 2rem;\n  border-radius: var(--radius-sm);\n  cursor: default;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n  transition: background-color 150ms ease, color 150ms ease;\n  user-select: none;\n}\n\n.sigma-ui-dropdown-menu-radio-item:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-dropdown-menu-radio-item[data-disabled] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-dropdown-menu-radio-item__indicator {\n  position: absolute;\n  left: 0.5rem;\n  display: flex;\n  width: 0.875rem;\n  height: 0.875rem;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-dropdown-menu-radio-item__icon {\n  width: 0.5rem;\n  height: 0.5rem;\n  fill: currentcolor;\n}\n</style>\n"
    },
    {
      "name": "DropdownMenuSeparator.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'reka-ui';\n\nconst props = defineProps<DropdownMenuSeparatorProps>();\n</script>\n\n<template>\n  <DropdownMenuSeparator\n    v-bind=\"props\"\n    class=\"sigma-ui-dropdown-menu-separator\"\n  />\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-separator {\n  height: 1px;\n  margin: 0.25rem -0.25rem;\n  background-color: hsl(var(--border));\n}\n</style>\n"
    },
    {
      "name": "DropdownMenuShortcut.vue",
      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <span\n    class=\"sigma-ui-dropdown-menu-shortcut\"\n    :class=\"$attrs.class\"\n  >\n    <slot />\n  </span>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-shortcut {\n  margin-left: auto;\n  color: hsl(var(--muted-foreground));\n  font-size: 0.75rem;\n  letter-spacing: 0.1em;\n  line-height: 1rem;\n}\n</style>\n"
    },
    {
      "name": "DropdownMenuSub.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSub,\n  type DropdownMenuSubEmits,\n  type DropdownMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = defineProps<DropdownMenuSubProps>();\nconst emits = defineEmits<DropdownMenuSubEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DropdownMenuSub v-bind=\"forwarded\">\n    <slot />\n  </DropdownMenuSub>\n</template>\n"
    },
    {
      "name": "DropdownMenuSubContent.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = withDefaults(\n  defineProps<DropdownMenuSubContentProps>(),\n  {\n    sideOffset: 4,\n  },\n);\nconst emits = defineEmits<DropdownMenuSubContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <DropdownMenuSubContent\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-dropdown-menu-sub-content\"\n  >\n    <slot />\n  </DropdownMenuSubContent>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-sub-content {\n  z-index: 50;\n  overflow: hidden;\n  min-width: 8rem;\n  padding: 0.25rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  animation: fadeOut 100ms ease-in forwards;\n  background-color: hsl(var(--popover));\n  box-shadow: var(--shadow-md);\n  color: hsl(var(--popover-foreground));\n  transform-origin: var(--reka-dropdown-menu-content-transform-origin);\n}\n\n.sigma-ui-dropdown-menu-sub-content[data-state=\"open\"] {\n  animation: fade-in 200ms ease-out;\n}\n\n@keyframes fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes fade-out {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n</style>\n"
    },
    {
      "name": "DropdownMenuSubTrigger.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui';\nimport { ChevronRightIcon } from 'lucide-vue-next';\n\nconst props = defineProps<DropdownMenuSubTriggerProps & { inset?: boolean }>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <DropdownMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-dropdown-menu-sub-trigger\"\n    :class=\"[{ 'sigma-ui-dropdown-menu-sub-trigger--inset': inset }]\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"sigma-ui-dropdown-menu-sub-trigger__icon\" />\n  </DropdownMenuSubTrigger>\n</template>\n\n<style>\n.sigma-ui-dropdown-menu-sub-trigger {\n  display: flex;\n  align-items: center;\n  padding: 0.375rem 0.5rem;\n  border-radius: var(--radius-sm);\n  cursor: default;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n  transition: background-color 150ms ease, color 150ms ease;\n  user-select: none;\n}\n\n.sigma-ui-dropdown-menu-sub-trigger:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-dropdown-menu-sub-trigger[data-state=\"open\"] {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-dropdown-menu-sub-trigger--inset {\n  padding-left: 2rem;\n}\n\n.sigma-ui-dropdown-menu-sub-trigger__icon {\n  width: 1rem;\n  height: 1rem;\n  margin-left: auto;\n}\n</style>\n"
    },
    {
      "name": "DropdownMenuTrigger.vue",
      "content": "<script setup lang=\"ts\">\nimport { DropdownMenuTrigger, type DropdownMenuTriggerProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<DropdownMenuTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <DropdownMenuTrigger\n    class=\"outline-hidden\"\n    v-bind=\"forwardedProps\"\n  >\n    <slot />\n  </DropdownMenuTrigger>\n</template>\n"
    },
    {
      "name": "index.ts",
      "content": "export { DropdownMenuPortal } from 'reka-ui';\n\nexport { default as DropdownMenu } from './DropdownMenu.vue';\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue';\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue';\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue';\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue';\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue';\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue';\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue';\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue';\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue';\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue';\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue';\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue';\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue';\n"
    }
  ],
  "type": "components:ui"
}