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

CLI for SIGMA-UI components.

{
  "name": "toaster",
  "dependencies": [
    "vue-sonner"
  ],
  "registryDependencies": [],
  "files": [
    {
      "name": "CustomProgress.vue",
      "content": "<script lang=\"ts\" setup>\nimport { Button } from '@ui/registry/css/ui/button';\n\nexport type ToastItem = {\n  data: {\n    id: number | string;\n    title: string;\n    description: string;\n    progress: number;\n    timer: number;\n    actionText: string;\n    cleanup: () => void;\n  };\n};\n\ntype Emits = {\n  action: [];\n};\n\nconst props = defineProps<ToastItem>();\nconst emit = defineEmits<Emits>();\n</script>\n\n<template>\n  <div class=\"sigma-ui-toaster-progress\">\n    <div class=\"sigma-ui-toaster-progress__content\">\n      <div class=\"sigma-ui-toaster-progress__header\">\n        {{ props.data.title }}\n        <div\n          v-if=\"props.data.progress && props.data.progress < 100\"\n          class=\"sigma-ui-toaster-progress__percentage\"\n        >\n          {{ props.data.progress }}%\n        </div>\n      </div>\n      <div class=\"sigma-ui-toaster-progress__description\">\n        {{ props.data.description }}\n      </div>\n      <div class=\"sigma-ui-toaster-progress__bar\">\n        <div\n          class=\"sigma-ui-toaster-progress__bar-fill\"\n          :style=\"{ width: `${props.data.progress}%` }\"\n        />\n      </div>\n    </div>\n    <Button\n      size=\"xs\"\n      @click=\"emit('action')\"\n    >\n      {{ props.data.actionText }}\n    </Button>\n  </div>\n</template>\n\n<style>\n.sigma-ui-toaster-progress {\n  display: flex;\n  width: 100%;\n  align-items: flex-end;\n  justify-content: space-between;\n  padding: 1rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius);\n  background-color: hsl(var(--background));\n  box-shadow: var(--shadow-md);\n  gap: 1.5rem;\n}\n\n.sigma-ui-toaster-progress__content {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n}\n\n.sigma-ui-toaster-progress__header {\n  display: flex;\n  align-items: center;\n  font-size: 0.875rem;\n  font-weight: 600;\n  gap: 0.5rem;\n}\n\n.sigma-ui-toaster-progress__percentage {\n  color: hsl(var(--muted-foreground));\n  font-size: 0.75rem;\n}\n\n.sigma-ui-toaster-progress__description {\n  color: hsl(var(--muted-foreground));\n  font-size: 0.875rem;\n}\n\n.sigma-ui-toaster-progress__bar {\n  width: 100%;\n  height: 2px;\n  border-radius: var(--rounded-full);\n  margin-top: 0.5rem;\n  background-color: hsl(var(--primary) / 10%);\n  font-size: 0.875rem;\n}\n\n.sigma-ui-toaster-progress__bar-fill {\n  height: 2px;\n  border-radius: var(--rounded-full);\n  background-color: hsl(var(--primary));\n}\n</style>\n"
    },
    {
      "name": "CustomSimple.vue",
      "content": "<script setup lang=\"ts\">\nimport { Button } from '@ui/registry/css/ui/button';\n\ntype Props = {\n  title: string;\n  description: string;\n  actionText: string;\n};\n\ntype Emits = {\n  action: [];\n};\n\nconst props = defineProps<Props>();\nconst emit = defineEmits<Emits>();\n</script>\n\n<template>\n  <div class=\"sigma-ui-toaster-default\">\n    <div class=\"sigma-ui-toaster-default__content\">\n      <div class=\"sigma-ui-toaster-default__title\">\n        {{ props.title }}\n      </div>\n      <div class=\"sigma-ui-toaster-default__description\">\n        {{ props.description }}\n      </div>\n    </div>\n    <Button\n      size=\"xs\"\n      @click=\"emit('action')\"\n    >\n      {{ props.actionText }}\n    </Button>\n  </div>\n</template>\n\n<style>\n.sigma-ui-toaster-default {\n  display: flex;\n  width: 100%;\n  align-items: flex-end;\n  justify-content: space-between;\n  padding: 1rem;\n  border: 1px solid hsl(var(--border));\n  border-radius: var(--radius);\n  background-color: hsl(var(--background));\n  box-shadow: var(--shadow-md);\n}\n\n.sigma-ui-toaster-default__title {\n  font-size: 0.875rem;\n  font-weight: 600;\n}\n\n.sigma-ui-toaster-default__description {\n  color: hsl(var(--muted-foreground));\n  font-size: 0.875rem;\n}\n</style>\n"
    },
    {
      "name": "Toaster.vue",
      "content": "<script lang=\"ts\" setup>\nimport { Toaster, type ToasterProps } from 'vue-sonner';\n\nconst props = defineProps<ToasterProps>();\n</script>\n\n<template>\n  <Toaster\n    class=\"sigma-ui-toaster\"\n    v-bind=\"props\"\n    :toast-options=\"{\n      ...props.toastOptions,\n      unstyled: true,\n      classes: {\n        toast: 'sigma-ui-toast',\n        description: 'sigma-ui-toast__description',\n        actionButton: 'sigma-ui-toast__action-button',\n        cancelButton: 'sigma-ui-toast__cancel-button',\n      },\n    }\"\n  />\n</template>\n\n<style>\n.sigma-ui-toaster {\n  position: fixed;\n  z-index: 60;\n  display: flex;\n  max-width: 420px;\n  flex-direction: column;\n  gap: 10px;\n  pointer-events: auto;\n}\n\n.sigma-ui-toast {\n  display: flex;\n  width: 100%;\n  align-items: center;\n  border-radius: var(--radius);\n  background-color: hsl(var(--background));\n  box-shadow: 0 4px 12px rgb(0 0 0 / 10%);\n  color: hsl(var(--foreground));\n  cursor: default;\n  gap: 0.5rem;\n}\n\n.sigma-ui-toast[data-type=\"default\"] {\n  padding: 0.75rem 1rem;\n  border: 1px solid hsl(var(--border));\n}\n\n.sigma-ui-toast[data-type=\"default\"] [data-content] {\n  display: flex;\n  flex: 1;\n}\n\n.sigma-ui-toast[data-type=\"default\"] .sigma-ui-toast__description {\n  width: 100%;\n}\n\n.sigma-ui-toast[data-type=\"default\"] .sigma-ui-toast__action-button {\n  padding: 2px 6px;\n  border-radius: var(--radius-sm);\n  background-color: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n}\n\n.sigma-ui-toast[data-type=\"default\"] .sigma-ui-toast__action-button:hover {\n  opacity: 0.9;\n}\n\n.sigma-ui-toast[data-type=\"default\"] .sigma-ui-toast__cancel-button {\n  padding: 2px 6px;\n  border-radius: var(--radius-sm);\n  background-color: hsl(var(--muted));\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-toast[data-type=\"default\"] .sigma-ui-toast__cancel-button:hover {\n  opacity: 0.9;\n}\n</style>\n"
    },
    {
      "name": "index.ts",
      "content": "export { toast } from 'vue-sonner';\nexport { default as Toaster } from './Toaster.vue';\nexport { default as CustomSimple } from './CustomSimple.vue';\nexport { default as CustomProgress } from './CustomProgress.vue';\n"
    }
  ],
  "type": "components:ui"
}