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

CLI for SIGMA-UI components.

{
  "name": "button",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "name": "Button.vue",
      "content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps } from 'reka-ui';\nimport { Loader2Icon } from 'lucide-vue-next';\nimport { type ButtonVariants, buttonVariants } from '.';\n\ninterface Props extends PrimitiveProps {\n  variant?: ButtonVariants['variant'];\n  size?: ButtonVariants['size'];\n  isLoading?: boolean;\n  loadingText?: string;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  as: 'button',\n  isLoading: false,\n});\n</script>\n\n<template>\n  <Primitive\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"[buttonVariants({ variant, size }), $attrs.class]\"\n    :disabled=\"isLoading || $attrs.disabled\"\n  >\n    <Loader2Icon\n      v-if=\"isLoading\"\n      class=\"sigma-ui-button__loader\"\n    />\n    <template v-if=\"!isLoading || (isLoading && !loadingText)\">\n      <slot />\n    </template>\n    <template v-else>\n      {{ loadingText }}\n    </template>\n  </Primitive>\n</template>\n\n<style>\n.sigma-ui-button {\n  display: inline-flex;\n  width: fit-content;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--radius);\n  font-size: 0.875rem;\n  font-weight: 500;\n  outline: none;\n  transition: background-color 0.1s ease, colors 0.2s;\n  user-select: none;\n  white-space: nowrap;\n}\n\n.sigma-ui-button:focus-visible {\n  box-shadow:\n    0 0 0 2px hsl(var(--background)),\n    0 0 0 4px hsl(var(--ring));\n  outline: none;\n}\n\n.sigma-ui-button:disabled {\n  opacity: 0.5;\n  pointer-events: none;\n}\n\n.sigma-ui-button--default {\n  background-color: hsl(var(--primary));\n  color: hsl(var(--primary-foreground));\n}\n\n.sigma-ui-button--default:hover {\n  background-color: hsl(var(--primary) / 90%);\n}\n\n.sigma-ui-button--destructive {\n  background-color: hsl(var(--destructive));\n  color: hsl(var(--destructive-foreground));\n}\n\n.sigma-ui-button--destructive:hover {\n  background-color: hsl(var(--destructive) / 90%);\n}\n\n.sigma-ui-button--outline {\n  border: 1px solid hsl(var(--border));\n  background-color: transparent;\n}\n\n.sigma-ui-button--outline:hover {\n  background-color: hsl(var(--secondary));\n  color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-button--secondary {\n  background-color: hsl(var(--secondary));\n  color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-button--secondary:hover {\n  background-color: hsl(var(--secondary) / 80%);\n}\n\n.sigma-ui-button--ghost:hover {\n  background-color: hsl(var(--secondary));\n  color: hsl(var(--secondary-foreground));\n}\n\n.sigma-ui-button--link {\n  color: hsl(var(--primary));\n  text-underline-offset: 4px;\n}\n\n.sigma-ui-button--link:hover {\n  text-decoration: underline;\n}\n\n.sigma-ui-button--size-default {\n  height: 2.5rem;\n  padding: 0.5rem 1rem;\n}\n\n.sigma-ui-button--size-xs {\n  height: 1.75rem;\n  padding: 0 0.5rem;\n  border-radius: 0.25rem;\n}\n\n.sigma-ui-button--size-sm {\n  height: 2.25rem;\n  padding: 0 0.75rem;\n  border-radius: var(--radius);\n}\n\n.sigma-ui-button--size-lg {\n  height: 2.75rem;\n  padding: 0 2rem;\n  border-radius: var(--radius);\n}\n\n.sigma-ui-button--size-icon {\n  width: 2.5rem;\n  height: 2.5rem;\n}\n\n.sigma-ui-button__loader {\n  width: 1rem;\n  height: 1rem;\n  margin-right: 0.5rem;\n  animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n}\n</style>\n"
    },
    {
      "name": "index.ts",
      "content": "import { type VariantProps, cva } from 'class-variance-authority';\n\nexport { default as Button } from './Button.vue';\n\nexport const buttonVariants = cva(\n  'sigma-ui-button',\n  {\n    variants: {\n      variant: {\n        default: 'sigma-ui-button--default',\n        destructive: 'sigma-ui-button--destructive',\n        outline: 'sigma-ui-button--outline',\n        secondary: 'sigma-ui-button--secondary',\n        ghost: 'sigma-ui-button--ghost',\n        link: 'sigma-ui-button--link',\n      },\n      size: {\n        default: 'sigma-ui-button--size-default',\n        xs: 'sigma-ui-button--size-xs',\n        sm: 'sigma-ui-button--size-sm',\n        lg: 'sigma-ui-button--size-lg',\n        icon: 'sigma-ui-button--size-icon',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>;\n"
    }
  ],
  "type": "components:ui"
}