gvf3n4ygn-test/__generated/registry-schemes/style-system/css/alert.json

CLI for SIGMA-UI components.

{
  "name": "alert",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "name": "Alert.vue",
      "content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue';\nimport { type AlertVariants, alertVariants } from '.';\n\nconst { variant } = defineProps<{\n  variant?: AlertVariants['variant'];\n}>();\nconst attrs = useAttrs();\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-alert\"\n    :class=\"[alertVariants({ variant }), attrs.class]\"\n    role=\"alert\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n.sigma-ui-alert {\n  position: relative;\n  width: 100%;\n  border-radius: var(--radius);\n  border-width: 1px;\n  padding: 1rem;\n}\n\n.sigma-ui-alert > svg ~ * {\n  padding-left: 1.75rem;\n}\n\n.sigma-ui-alert > svg + div {\n  transform: translateY(-3px);\n}\n\n.sigma-ui-alert > svg {\n  position: absolute;\n  left: 1rem;\n  top: 1rem;\n  color: hsl(var(--foreground));\n}\n\n.sigma-ui-alert-default {\n  background-color: hsl(var(--background));\n  color: hsl(var(--foreground));\n}\n\n.sigma-ui-alert-destructive {\n  border-color: hsl(var(--destructive) / 0.5);\n  color: hsl(var(--destructive));\n}\n\n.dark .sigma-ui-alert-destructive {\n  border-color: hsl(var(--destructive));\n  background-color: hsl(var(--destructive) / 0.2);\n  color: hsl(var(--red-500));\n}\n\n.sigma-ui-alert-destructive > svg {\n  color: hsl(var(--red-500));\n}\n</style>\n"
    },
    {
      "name": "AlertDescription.vue",
      "content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue';\n\nconst attrs = useAttrs();\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-alert-description\"\n    :class=\"attrs.class\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n.sigma-ui-alert-description {\n  font-size: 0.875rem;\n}\n\n.sigma-ui-alert-description p {\n  line-height: 1.65;\n}\n</style>\n"
    },
    {
      "name": "AlertTitle.vue",
      "content": "<script setup lang=\"ts\">\nimport { useAttrs } from 'vue';\n\nconst attrs = useAttrs();\n</script>\n\n<template>\n  <h5\n    class=\"sigma-ui-alert-title\"\n    :class=\"attrs.class\"\n  >\n    <slot />\n  </h5>\n</template>\n\n<style>\n.sigma-ui-alert-title {\n  margin-bottom: 0.25rem;\n  font-weight: 500;\n  line-height: 1;\n  letter-spacing: -0.025em;\n}\n</style>\n"
    },
    {
      "name": "index.ts",
      "content": "import { type VariantProps, cva } from 'class-variance-authority';\n\nexport { default as Alert } from './Alert.vue';\nexport { default as AlertTitle } from './AlertTitle.vue';\nexport { default as AlertDescription } from './AlertDescription.vue';\n\nexport const alertVariants = cva(\n  'sigma-ui-alert',\n  {\n    variants: {\n      variant: {\n        default: 'sigma-ui-alert-default',\n        destructive: 'sigma-ui-alert-destructive',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n);\n\nexport type AlertVariants = VariantProps<typeof alertVariants>;\n"
    }
  ],
  "type": "components:ui"
}