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

CLI for SIGMA-UI components.

{
  "name": "separator",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "name": "Separator.vue",
      "content": "<script setup lang=\"ts\">\nimport { Separator, type SeparatorProps } from 'reka-ui';\n\nconst props = defineProps<\n  SeparatorProps & { label?: string }\n>();\n</script>\n\n<template>\n  <Separator\n    v-bind=\"props\"\n    class=\"sigma-ui-separator\"\n  >\n    <span\n      v-if=\"props.label\"\n\n      class=\"sigma-ui-separator__label\"\n    >{{ props.label }}</span>\n  </Separator>\n</template>\n\n<style>\n.sigma-ui-separator {\n  position: relative;\n  flex-shrink: 0;\n  background-color: hsl(var(--border));\n}\n\n.sigma-ui-separator[data-orientation=\"vertical\"] {\n  width: 1px;\n  height: 100%;\n}\n\n.sigma-ui-separator[data-orientation=\"horizontal\"] {\n  width: 100%;\n  height: 1px;\n}\n\n.sigma-ui-separator__label {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: hsl(var(--background));\n  color: hsl(var(--muted-foreground));\n  font-size: 0.75rem;\n  transform: translate(-50%, -50%);\n}\n\n.sigma-ui-separator[data-orientation=\"vertical\"] .sigma-ui-separator__label {\n  width: 1px;\n  padding: 0 0.25rem;\n  padding-block: 0.5rem;\n}\n\n.sigma-ui-separator[data-orientation=\"horizontal\"] .sigma-ui-separator__label {\n  height: 1px;\n  padding: 0.25rem 0;\n  padding-inline: 0.5rem;\n}\n</style>\n"
    },
    {
      "name": "index.ts",
      "content": "export { default as Separator } from './Separator.vue';\n"
    }
  ],
  "type": "components:ui"
}