gvf3n4ygn-test/__generated/registry-schemes/styles/css/navigation-menu.json

CLI for SIGMA-UI components.

{
  "name": "navigation-menu",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "name": "NavigationMenu.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'radix-vue';\nimport NavigationMenuViewport from './NavigationMenuViewport.vue';\n\nconst props = defineProps<NavigationMenuRootProps>();\nconst emits = defineEmits<NavigationMenuRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <NavigationMenuRoot\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-navigation-menu\"\n  >\n    <slot />\n    <NavigationMenuViewport />\n  </NavigationMenuRoot>\n</template>\n\n<style>\n.sigma-ui-navigation-menu {\n  position: relative;\n  z-index: 10;\n  display: flex;\n  max-width: max-content;\n  flex: 1;\n  align-items: center;\n  justify-content: center;\n}\n</style>\n"
    },
    {
      "name": "NavigationMenuContent.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue';\n\nconst props = defineProps<NavigationMenuContentProps>();\nconst emits = defineEmits<NavigationMenuContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <NavigationMenuContent\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-navigation-menu-content\"\n  >\n    <slot />\n  </NavigationMenuContent>\n</template>\n\n<style>\n.sigma-ui-navigation-menu-content {\n  left: 0;\n  top: 0;\n  width: 100%;\n}\n\n.sigma-ui-navigation-menu-content[data-state^=\"open\"] {\n  animation: fadeIn 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-state^=\"closed\"] {\n  animation: fadeOut 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"from-end\"] {\n  animation: slideInFromRight 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"from-start\"] {\n  animation: slideInFromLeft 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"to-end\"] {\n  animation: slideOutToRight 200ms ease-in-out;\n}\n\n.sigma-ui-navigation-menu-content[data-motion=\"to-start\"] {\n  animation: slideOutToLeft 200ms ease-in-out;\n}\n\n@media (min-width: 768px) {\n  .sigma-ui-navigation-menu-content {\n    position: absolute;\n    width: auto;\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    filter: blur(12px);\n  }\n  to {\n    opacity: 1;\n    filter: blur(0);\n  }\n}\n\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n\n@keyframes slideInFromRight {\n  from {\n    opacity: 0;\n    transform: translateX(13rem);\n    filter: blur(12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slideInFromLeft {\n  from {\n    opacity: 0;\n    transform: translateX(-13rem);\n    filter: blur(12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n}\n\n@keyframes slideOutToRight {\n  from {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n  to {\n    transform: translateX(13rem);\n    filter: blur(12px);\n    opacity: 0;\n  }\n}\n\n@keyframes slideOutToLeft {\n  from {\n    opacity: 1;\n    transform: translateX(0);\n    filter: blur(0);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(-13rem);\n    filter: blur(12px);\n  }\n}\n</style>\n"
    },
    {
      "name": "NavigationMenuIndicator.vue",
      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue';\n\nconst props = defineProps<NavigationMenuIndicatorProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <NavigationMenuIndicator\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-navigation-menu-indicator\"\n  >\n    <div class=\"sigma-ui-navigation-menu-indicator__pointer\" />\n  </NavigationMenuIndicator>\n</template>\n\n<style>\n.sigma-ui-navigation-menu-indicator {\n  position: relative;\n  top: 100%;\n  z-index: 1;\n  display: flex;\n  height: 0.375rem;\n  align-items: flex-end;\n  justify-content: center;\n  overflow: hidden;\n}\n\n.sigma-ui-navigation-menu-indicator[data-state=\"visible\"] {\n  animation: navigationMenuIndicatorIn 0.2s ease;\n}\n\n.sigma-ui-navigation-menu-indicator[data-state=\"hidden\"] {\n  animation: navigationMenuIndicatorOut 0.2s ease;\n}\n\n.sigma-ui-navigation-menu-indicator__pointer {\n  position: relative;\n  top: 60%;\n  height: 0.5rem;\n  width: 0.5rem;\n  transform: rotate(45deg);\n  border-top-left-radius: 0.125rem;\n  background-color: hsl(var(--border));\n  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n}\n\n@keyframes navigationMenuIndicatorIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes navigationMenuIndicatorOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n</style>\n"
    },
    {
      "name": "NavigationMenuItem.vue",
      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuItem, type NavigationMenuItemProps } from 'radix-vue';\n\nconst props = defineProps<NavigationMenuItemProps>();\n</script>\n\n<template>\n  <NavigationMenuItem v-bind=\"props\">\n    <slot />\n  </NavigationMenuItem>\n</template>\n"
    },
    {
      "name": "NavigationMenuLink.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuLink,\n  type NavigationMenuLinkEmits,\n  type NavigationMenuLinkProps,\n  useForwardPropsEmits,\n} from 'radix-vue';\n\nconst props = defineProps<NavigationMenuLinkProps>();\nconst emits = defineEmits<NavigationMenuLinkEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <NavigationMenuLink v-bind=\"forwarded\">\n    <slot />\n  </NavigationMenuLink>\n</template>\n"
    },
    {
      "name": "NavigationMenuList.vue",
      "content": "<script setup lang=\"ts\">\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue';\n\nconst props = defineProps<NavigationMenuListProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <NavigationMenuList\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-navigation-menu-list\"\n  >\n    <slot />\n  </NavigationMenuList>\n</template>\n\n<style>\n.sigma-ui-navigation-menu-list {\n  display: flex;\n  flex: 1;\n  list-style: none;\n  align-items: center;\n  justify-content: center;\n  gap: 0.25rem;\n}\n</style>\n"
    },
    {
      "name": "NavigationMenuTrigger.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'radix-vue';\nimport { ChevronDownIcon } from 'lucide-vue-next';\nimport { navigationMenuTriggerStyle } from '.';\n\nconst props = defineProps<NavigationMenuTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <NavigationMenuTrigger\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-navigation-menu-trigger\"\n    :class=\"[navigationMenuTriggerStyle()]\"\n  >\n    <slot />\n    <ChevronDownIcon\n      class=\"sigma-ui-navigation-menu-trigger__icon\"\n      aria-hidden=\"true\"\n    />\n  </NavigationMenuTrigger>\n</template>\n\n<style>\n.sigma-ui-navigation-menu-trigger {\n  position: relative;\n}\n\n.sigma-ui-navigation-menu-trigger__base {\n  display: inline-flex;\n  height: 2.5rem;\n  width: max-content;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.375rem;\n  background-color: hsl(var(--background));\n  padding: 0.5rem 1rem;\n  font-size: 0.875rem;\n  font-weight: 500;\n  transition-property: color, background-color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n\n.sigma-ui-navigation-menu-trigger__base:hover {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-navigation-menu-trigger__base:focus {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n  outline: none;\n}\n\n.sigma-ui-navigation-menu-trigger__base:disabled {\n  pointer-events: none;\n  opacity: 0.5;\n}\n\n.sigma-ui-navigation-menu-trigger__base[data-active] {\n  background-color: hsl(var(--accent) / 0.5);\n}\n\n.sigma-ui-navigation-menu-trigger__base[data-state=\"open\"] {\n  background-color: hsl(var(--accent) / 0.5);\n}\n\n.sigma-ui-navigation-menu-trigger__icon {\n  position: relative;\n  top: 1px;\n  margin-left: 0.25rem;\n  height: 0.75rem;\n  width: 0.75rem;\n  transition: transform 0.2s;\n}\n\n.sigma-ui-navigation-menu-trigger__icon[data-state=\"open\"] {\n  transform: rotate(180deg);\n}\n</style>\n"
    },
    {
      "name": "NavigationMenuViewport.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'radix-vue';\n\nconst props = defineProps<NavigationMenuViewportProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <div class=\"sigma-ui-navigation-menu-viewport-wrapper\">\n    <NavigationMenuViewport\n      v-bind=\"forwardedProps\"\n      class=\"sigma-ui-navigation-menu-viewport\"\n      :class=\"$attrs.class\"\n    />\n  </div>\n</template>\n\n<style>\n.sigma-ui-navigation-menu-viewport-wrapper {\n  position: absolute;\n  left: 0;\n  top: 100%;\n  display: flex;\n  justify-content: center;\n}\n\n.sigma-ui-navigation-menu-viewport {\n  position: relative;\n  margin-top: 0.375rem;\n  height: var(--radix-navigation-menu-viewport-height);\n  width: 100%;\n  overflow: hidden;\n  border-radius: 0.375rem;\n  border: 1px solid hsl(var(--border));\n  background-color: hsl(var(--popover));\n  color: hsl(var(--popover-foreground));\n  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n  transform-origin: top center;\n}\n\n@media (min-width: 768px) {\n  .sigma-ui-navigation-menu-viewport {\n    width: var(--radix-navigation-menu-viewport-width);\n  }\n}\n\n.sigma-ui-navigation-menu-viewport[data-state=\"open\"] {\n  animation: navigationMenuViewportIn 0.2s ease;\n}\n\n.sigma-ui-navigation-menu-viewport[data-state=\"closed\"] {\n  animation: navigationMenuViewportOut 0.2s ease;\n}\n\n@keyframes navigationMenuViewportIn {\n  from {\n    opacity: 0;\n    transform: scale(0.9);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes navigationMenuViewportOut {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n}\n</style>\n"
    },
    {
      "name": "index.ts",
      "content": "import { cva } from 'class-variance-authority';\n\nexport { default as NavigationMenu } from './NavigationMenu.vue';\nexport { default as NavigationMenuList } from './NavigationMenuList.vue';\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue';\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue';\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue';\nexport { default as NavigationMenuLink } from './NavigationMenuLink.vue';\n\nexport const navigationMenuTriggerStyle = cva(\n  'sigma-ui-navigation-menu-trigger__base',\n);\n"
    }
  ],
  "type": "components:ui"
}