gvf3n4ygn-test/__generated/registry-schemes/styles/css/accordion.json

CLI for SIGMA-UI components.

{
  "name": "accordion",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "name": "Accordion.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  AccordionRoot,\n  type AccordionRootEmits,\n  type AccordionRootProps,\n  useForwardPropsEmits,\n} from 'radix-vue';\n\nconst props = defineProps<AccordionRootProps>();\nconst emits = defineEmits<AccordionRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <AccordionRoot v-bind=\"forwarded\">\n    <slot />\n  </AccordionRoot>\n</template>\n"
    },
    {
      "name": "AccordionContent.vue",
      "content": "<script setup lang=\"ts\">\nimport { AccordionContent, type AccordionContentProps, useForwardProps } from 'radix-vue';\n\nconst props = defineProps<AccordionContentProps>();\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n  <AccordionContent\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-accordion-content\"\n  >\n    <div\n      class=\"sigma-ui-accordion-content-inner\"\n      :class=\"[$attrs.class]\"\n    >\n      <slot />\n    </div>\n  </AccordionContent>\n</template>\n\n<style>\n.sigma-ui-accordion-content {\n  overflow: hidden;\n  font-size: 0.875rem;\n  transition: all 0.2s;\n}\n\n.sigma-ui-accordion-content[data-state='closed'] {\n  animation: accordion-up 0.2s ease-out;\n}\n\n.sigma-ui-accordion-content[data-state='open'] {\n  animation: accordion-down 0.2s ease-out;\n}\n\n.sigma-ui-accordion-content-inner {\n  padding: 0 0 1rem 0;\n}\n\n@keyframes accordion-up {\n  from {\n    height: var(--radix-accordion-content-height);\n  }\n  to {\n    height: 0;\n  }\n}\n\n@keyframes accordion-down {\n  from {\n    height: 0;\n  }\n  to {\n    height: var(--radix-accordion-content-height);\n  }\n}\n</style>\n"
    },
    {
      "name": "AccordionItem.vue",
      "content": "<script setup lang=\"ts\">\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue';\n\nconst props = defineProps<AccordionItemProps>();\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n  <AccordionItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-accordion-item\"\n    :class=\"[$attrs.class]\"\n  >\n    <slot />\n  </AccordionItem>\n</template>\n\n<style>\n.sigma-ui-accordion-item {\n  border-bottom: 1px solid hsl(var(--border));\n}\n</style>\n"
    },
    {
      "name": "AccordionTrigger.vue",
      "content": "<script setup lang=\"ts\">\nimport { AccordionHeader, AccordionTrigger, type AccordionTriggerProps, useForwardProps } from 'radix-vue';\nimport { ChevronDownIcon } from 'lucide-vue-next';\n\nconst props = defineProps<AccordionTriggerProps>();\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n  <AccordionHeader class=\"sigma-ui-accordion-header\">\n    <AccordionTrigger\n      v-bind=\"forwarded\"\n      class=\"sigma-ui-accordion-trigger\"\n      :class=\"[$attrs.class]\"\n    >\n      <slot />\n      <slot name=\"icon\">\n        <ChevronDownIcon class=\"sigma-ui-accordion-trigger-icon\" />\n      </slot>\n    </AccordionTrigger>\n  </AccordionHeader>\n</template>\n\n<style>\n.sigma-ui-accordion-header {\n  display: flex;\n}\n\n.sigma-ui-accordion-trigger {\n  display: flex;\n  flex: 1;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem 0;\n  font-weight: 500;\n  transition: all 0.2s;\n}\n\n.sigma-ui-accordion-trigger-icon {\n  height: 1rem;\n  width: 1rem;\n  flex-shrink: 0;\n  transition: transform 0.2s;\n}\n\n.sigma-ui-accordion-trigger[data-state=\"open\"] .sigma-ui-accordion-trigger-icon {\n  transform: rotate(180deg);\n}\n</style>\n"
    },
    {
      "name": "index.ts",
      "content": "export { default as Accordion } from './Accordion.vue';\nexport { default as AccordionContent } from './AccordionContent.vue';\nexport { default as AccordionItem } from './AccordionItem.vue';\nexport { default as AccordionTrigger } from './AccordionTrigger.vue';\n"
    }
  ],
  "type": "components:ui"
}