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

CLI for SIGMA-UI components.

{
  "name": "pin-input",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "name": "PinInput.vue",
      "content": "<script setup lang=\"ts\">\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'reka-ui';\n\nconst props = withDefaults(defineProps<PinInputRootProps>(), {\n  modelValue: () => [],\n});\nconst emits = defineEmits<PinInputRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <PinInputRoot\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-pin-input\"\n  >\n    <slot />\n  </PinInputRoot>\n</template>\n\n<style>\n.sigma-ui-pin-input {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n</style>\n"
    },
    {
      "name": "PinInputGroup.vue",
      "content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<PrimitiveProps>();\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-pin-input-group\"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<style>\n.sigma-ui-pin-input-group {\n  display: flex;\n  align-items: center;\n}\n</style>\n"
    },
    {
      "name": "PinInputInput.vue",
      "content": "<script setup lang=\"ts\">\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<PinInputInputProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <PinInputInput\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-pin-input-input\"\n  />\n</template>\n\n<style>\n.sigma-ui-pin-input-input {\n  position: relative;\n  display: flex;\n  width: 2.5rem;\n  height: 2.5rem;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid hsl(var(--input));\n  border-left: none;\n  font-size: 0.875rem;\n  text-align: center;\n  transition: all 150ms;\n}\n\n.sigma-ui-pin-input-input:first-child {\n  border-left: 1px solid hsl(var(--input));\n  border-bottom-left-radius: 0.375rem;\n  border-top-left-radius: 0.375rem;\n}\n\n.sigma-ui-pin-input-input:last-child {\n  border-bottom-right-radius: 0.375rem;\n  border-top-right-radius: 0.375rem;\n}\n\n.sigma-ui-pin-input-input:focus {\n  position: relative;\n  z-index: 10;\n  box-shadow: 0 0 0 2px hsl(var(--ring));\n  outline: none;\n}\n</style>\n"
    },
    {
      "name": "PinInputSeparator.vue",
      "content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'reka-ui';\nimport { DotIcon } from 'lucide-vue-next';\n\nconst props = defineProps<PrimitiveProps>();\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <Primitive\n    v-bind=\"forwardedProps\"\n    class=\"sigma-ui-pin-input-separator\"\n  >\n    <slot>\n      <DotIcon class=\"sigma-ui-pin-input-separator__icon\" />\n    </slot>\n  </Primitive>\n</template>\n\n<style>\n.sigma-ui-pin-input-separator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.sigma-ui-pin-input-separator__icon {\n  width: 1rem;\n  height: 1rem;\n  color: hsl(var(--muted-foreground));\n}\n</style>\n"
    },
    {
      "name": "index.ts",
      "content": "export { default as PinInput } from './PinInput.vue';\nexport { default as PinInputGroup } from './PinInputGroup.vue';\nexport { default as PinInputSeparator } from './PinInputSeparator.vue';\nexport { default as PinInputInput } from './PinInputInput.vue';\n"
    }
  ],
  "type": "components:ui"
}