gvf3n4ygn-test/__generated/registry-schemes/styles/css/number-field.json

CLI for SIGMA-UI components.

{
  "name": "number-field",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "name": "NumberField.vue",
      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue';\nimport { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue';\n\nconst props = defineProps<NumberFieldRootProps>();\nconst emits = defineEmits<NumberFieldRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <NumberFieldRoot\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-number-field\"\n  >\n    <slot />\n  </NumberFieldRoot>\n</template>\n\n<style>\n.sigma-ui-number-field {\n  display: grid;\n  gap: 0.375rem;\n}\n</style>\n"
    },
    {
      "name": "NumberFieldContent.vue",
      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-number-field-content\"\n    :class=\"$attrs.class\"\n  >\n    <slot />\n  </div>\n</template>\n\n<style>\n.sigma-ui-number-field-content {\n  position: relative;\n}\n\n.sigma-ui-number-field-content > [data-slot=\"input\"]:has([data-slot=\"increment\"]) {\n  padding-right: 1.25rem;\n}\n\n.sigma-ui-number-field-content > [data-slot=\"input\"]:has([data-slot=\"decrement\"]) {\n  padding-left: 1.25rem;\n}\n</style>\n"
    },
    {
      "name": "NumberFieldDecrement.vue",
      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'radix-vue';\nimport { NumberFieldDecrement, useForwardProps } from 'radix-vue';\nimport { MinusIcon } from 'lucide-vue-next';\n\nconst props = defineProps<NumberFieldDecrementProps>();\n\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n  <NumberFieldDecrement\n    data-slot=\"decrement\"\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-number-field-decrement\"\n  >\n    <slot>\n      <MinusIcon class=\"sigma-ui-number-field-decrement__icon\" />\n    </slot>\n  </NumberFieldDecrement>\n</template>\n\n<style>\n.sigma-ui-number-field-decrement {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  transform: translateY(-50%);\n  padding: 0.75rem;\n}\n\n.sigma-ui-number-field-decrement:disabled {\n  cursor: not-allowed;\n  opacity: 0.2;\n}\n\n.sigma-ui-number-field-decrement__icon {\n  height: 1rem;\n  width: 1rem;\n}\n</style>\n"
    },
    {
      "name": "NumberFieldIncrement.vue",
      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'radix-vue';\nimport { NumberFieldIncrement, useForwardProps } from 'radix-vue';\nimport { PlusIcon } from 'lucide-vue-next';\n\nconst props = defineProps<NumberFieldIncrementProps>();\n\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n  <NumberFieldIncrement\n    data-slot=\"increment\"\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-number-field-increment\"\n  >\n    <slot>\n      <PlusIcon class=\"sigma-ui-number-field-increment__icon\" />\n    </slot>\n  </NumberFieldIncrement>\n</template>\n\n<style>\n.sigma-ui-number-field-increment {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  transform: translateY(-50%);\n  padding: 0.75rem;\n}\n\n.sigma-ui-number-field-increment:disabled {\n  cursor: not-allowed;\n  opacity: 0.2;\n}\n\n.sigma-ui-number-field-increment__icon {\n  height: 1rem;\n  width: 1rem;\n}\n</style>\n"
    },
    {
      "name": "NumberFieldInput.vue",
      "content": "<script setup lang=\"ts\">\nimport { NumberFieldInput } from 'radix-vue';\n</script>\n\n<template>\n  <NumberFieldInput\n    data-slot=\"input\"\n    class=\"sigma-ui-number-field-input\"\n  />\n</template>\n\n<style>\n.sigma-ui-number-field-input {\n  display: flex;\n  height: 2.5rem;\n  width: 100%;\n  border-radius: 0.375rem;\n  border: 1px solid hsl(var(--input));\n  background-color: hsl(var(--background));\n  padding: 0.5rem;\n  font-size: 0.875rem;\n  text-align: center;\n  ring-offset: hsl(var(--background));\n}\n\n.sigma-ui-number-field-input::placeholder {\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-number-field-input:focus-visible {\n  outline: none;\n  ring: 2px solid hsl(var(--ring));\n  ring-offset: 2px;\n}\n\n.sigma-ui-number-field-input:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n</style>\n"
    },
    {
      "name": "index.ts",
      "content": "export { default as NumberField } from './NumberField.vue';\nexport { default as NumberFieldInput } from './NumberFieldInput.vue';\nexport { default as NumberFieldIncrement } from './NumberFieldIncrement.vue';\nexport { default as NumberFieldDecrement } from './NumberFieldDecrement.vue';\nexport { default as NumberFieldContent } from './NumberFieldContent.vue';\n"
    }
  ],
  "type": "components:ui"
}