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

CLI for SIGMA-UI components.

{
  "name": "context-menu",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "name": "ContextMenu.vue",
      "content": "<script setup lang=\"ts\">\nimport { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui';\nimport type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui';\n\nconst props = defineProps<ContextMenuRootProps>();\nconst emits = defineEmits<ContextMenuRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ContextMenuRoot v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRoot>\n</template>\n"
    },
    {
      "name": "ContextMenuCheckboxItem.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { CheckIcon } from 'lucide-vue-next';\n\nconst props = defineProps<ContextMenuCheckboxItemProps>();\nconst emits = defineEmits<ContextMenuCheckboxItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ContextMenuCheckboxItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-context-menu-checkbox-item\"\n  >\n    <span class=\"sigma-ui-context-menu-checkbox-item__indicator\">\n      <ContextMenuItemIndicator>\n        <CheckIcon class=\"sigma-ui-context-menu-checkbox-item__icon\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuCheckboxItem>\n</template>\n\n<style>\n.sigma-ui-context-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  user-select: none;\n}\n\n.sigma-ui-context-menu-checkbox-item:focus {\n  background-color: hsl(var(--secondary));\n  color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-context-menu-checkbox-item[data-disabled] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-context-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-context-menu-checkbox-item__icon {\n  width: 1rem;\n  height: 1rem;\n}\n</style>\n"
    },
    {
      "name": "ContextMenuContent.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = defineProps<ContextMenuContentProps>();\nconst emits = defineEmits<ContextMenuContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ContextMenuPortal>\n    <ContextMenuContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      class=\"sigma-ui-context-menu-content\"\n      :class=\"$attrs.class\"\n    >\n      <slot />\n    </ContextMenuContent>\n  </ContextMenuPortal>\n</template>\n\n<style>\n.sigma-ui-context-menu-content {\n  z-index: 50;\n  min-width: 8rem;\n  padding: 0.25rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius-md);\n  backdrop-filter: blur(var(--backdrop-filter-blur));\n  background-color: hsl(var(--popover));\n  box-shadow: var(--shadow-md);\n  color: hsl(var(--popover-foreground));\n  transform-origin: var(--reka-context-menu-content-transform-origin);\n}\n\n.sigma-ui-context-menu-content[data-state=\"open\"] {\n  animation: fade-in 200ms ease-out;\n}\n\n.sigma-ui-context-menu-content[data-state=\"closed\"] {\n  animation: fade-out 100ms ease-in forwards;\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": "ContextMenuGroup.vue",
      "content": "<script setup lang=\"ts\">\nimport { ContextMenuGroup, type ContextMenuGroupProps } from 'reka-ui';\n\nconst props = defineProps<ContextMenuGroupProps>();\n</script>\n\n<template>\n  <ContextMenuGroup v-bind=\"props\">\n    <slot />\n  </ContextMenuGroup>\n</template>\n"
    },
    {
      "name": "ContextMenuItem.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = defineProps<ContextMenuItemProps & { inset?: boolean }>();\nconst emits = defineEmits<ContextMenuItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ContextMenuItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-context-menu-item\"\n    :class=\"[{ 'sigma-ui-context-menu-item--inset': inset }]\"\n  >\n    <slot />\n  </ContextMenuItem>\n</template>\n\n<style>\n.sigma-ui-context-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  user-select: none;\n}\n\n.sigma-ui-context-menu-item--inset {\n  padding-left: 2rem;\n}\n\n.sigma-ui-context-menu-item:focus {\n  background-color: hsl(var(--secondary));\n  color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-context-menu-item[data-disabled] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n</style>\n"
    },
    {
      "name": "ContextMenuLabel.vue",
      "content": "<script setup lang=\"ts\">\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'reka-ui';\n\nconst props = defineProps<ContextMenuLabelProps & { inset?: boolean }>();\n</script>\n\n<template>\n  <ContextMenuLabel\n    v-bind=\"props\"\n    class=\"sigma-ui-context-menu-label\"\n    :class=\"[{ 'sigma-ui-context-menu-label--inset': inset }]\"\n  >\n    <slot />\n  </ContextMenuLabel>\n</template>\n\n<style>\n.sigma-ui-context-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-context-menu-label--inset {\n  padding-left: 2rem;\n}\n</style>\n"
    },
    {
      "name": "ContextMenuPortal.vue",
      "content": "<script setup lang=\"ts\">\nimport { ContextMenuPortal, type ContextMenuPortalProps } from 'reka-ui';\n\nconst props = defineProps<ContextMenuPortalProps>();\n</script>\n\n<template>\n  <ContextMenuPortal v-bind=\"props\">\n    <slot />\n  </ContextMenuPortal>\n</template>\n"
    },
    {
      "name": "ContextMenuRadioGroup.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuRadioGroup,\n  type ContextMenuRadioGroupEmits,\n  type ContextMenuRadioGroupProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = defineProps<ContextMenuRadioGroupProps>();\nconst emits = defineEmits<ContextMenuRadioGroupEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ContextMenuRadioGroup v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuRadioGroup>\n</template>\n"
    },
    {
      "name": "ContextMenuRadioItem.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { CircleIcon } from 'lucide-vue-next';\n\nconst props = defineProps<ContextMenuRadioItemProps>();\nconst emits = defineEmits<ContextMenuRadioItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ContextMenuRadioItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-context-menu-radio-item\"\n  >\n    <span class=\"sigma-ui-context-menu-radio-item__indicator\">\n      <ContextMenuItemIndicator>\n        <CircleIcon class=\"sigma-ui-context-menu-radio-item__icon\" />\n      </ContextMenuItemIndicator>\n    </span>\n    <slot />\n  </ContextMenuRadioItem>\n</template>\n\n<style>\n.sigma-ui-context-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  user-select: none;\n}\n\n.sigma-ui-context-menu-radio-item:focus {\n  background-color: hsl(var(--secondary));\n  color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-context-menu-radio-item[data-disabled] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-context-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-context-menu-radio-item__icon {\n  width: 0.5rem;\n  height: 0.5rem;\n  fill: currentcolor;\n}\n</style>\n"
    },
    {
      "name": "ContextMenuSeparator.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'reka-ui';\n\nconst props = defineProps<ContextMenuSeparatorProps>();\n</script>\n\n<template>\n  <ContextMenuSeparator\n    v-bind=\"props\"\n    class=\"sigma-ui-context-menu-separator\"\n  />\n</template>\n\n<style>\n.sigma-ui-context-menu-separator {\n  height: 1px;\n  margin: 0.25rem -0.25rem;\n  background-color: hsl(var(--border));\n}\n</style>\n"
    },
    {
      "name": "ContextMenuShortcut.vue",
      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <span\n    class=\"sigma-ui-context-menu-shortcut\"\n    :class=\"$attrs.class\"\n  >\n    <slot />\n  </span>\n</template>\n\n<style>\n.sigma-ui-context-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": "ContextMenuSub.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSub,\n  type ContextMenuSubEmits,\n  type ContextMenuSubProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\nconst props = defineProps<ContextMenuSubProps>();\nconst emits = defineEmits<ContextMenuSubEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ContextMenuSub v-bind=\"forwarded\">\n    <slot />\n  </ContextMenuSub>\n</template>\n"
    },
    {
      "name": "ContextMenuSubContent.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSubContent,\n  type ContextMenuSubContentEmits,\n  type ContextMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'reka-ui';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = defineProps<ContextMenuSubContentProps>();\nconst emits = defineEmits<ContextMenuSubContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ContextMenuSubContent\n    v-bind=\"{ ...forwarded, ...$attrs }\"\n    class=\"sigma-ui-context-menu-sub-content\"\n    :class=\"$attrs.class\"\n  >\n    <slot />\n  </ContextMenuSubContent>\n</template>\n\n<style>\n.sigma-ui-context-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  backdrop-filter: blur(var(--backdrop-filter-blur));\n  background-color: hsl(var(--popover));\n  box-shadow: var(--shadow-md);\n  color: hsl(var(--popover-foreground));\n  transform-origin: var(--reka-context-menu-content-transform-origin);\n}\n\n.sigma-ui-context-menu-sub-content[data-state=\"open\"] {\n  animation: fade-in 200ms ease-out;\n}\n\n.sigma-ui-context-menu-sub-content[data-state=\"closed\"] {\n  animation: fade-out 100ms ease-in forwards;\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": "ContextMenuSubTrigger.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'reka-ui';\nimport { ChevronRightIcon } from 'lucide-vue-next';\n\nconst props = defineProps<ContextMenuSubTriggerProps & { inset?: boolean }>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <ContextMenuSubTrigger\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-context-menu-sub-trigger\"\n    :class=\"[{ 'sigma-ui-context-menu-sub-trigger--inset': inset }]\"\n  >\n    <slot />\n    <ChevronRightIcon class=\"sigma-ui-context-menu-sub-trigger__icon\" />\n  </ContextMenuSubTrigger>\n</template>\n\n<style>\n.sigma-ui-context-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  user-select: none;\n}\n\n.sigma-ui-context-menu-sub-trigger:focus {\n  background-color: hsl(var(--secondary));\n  color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-context-menu-sub-trigger[data-state=\"open\"] {\n  background-color: hsl(var(--secondary));\n  color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-context-menu-sub-trigger--inset {\n  padding-left: 2rem;\n}\n\n.sigma-ui-context-menu-sub-trigger__icon {\n  width: 1rem;\n  height: 1rem;\n  margin-left: auto;\n}\n</style>\n"
    },
    {
      "name": "ContextMenuTrigger.vue",
      "content": "<script setup lang=\"ts\">\nimport { ContextMenuTrigger, type ContextMenuTriggerProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<ContextMenuTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <ContextMenuTrigger v-bind=\"forwardedProps\">\n    <slot />\n  </ContextMenuTrigger>\n</template>\n"
    },
    {
      "name": "index.ts",
      "content": "export { default as ContextMenu } from './ContextMenu.vue';\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue';\nexport { default as ContextMenuContent } from './ContextMenuContent.vue';\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue';\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue';\nexport { default as ContextMenuItem } from './ContextMenuItem.vue';\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue';\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue';\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue';\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue';\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue';\nexport { default as ContextMenuSub } from './ContextMenuSub.vue';\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue';\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue';\n"
    }
  ],
  "type": "components:ui"
}