sigma-ui/__generated/registry-schemes/style-system/tailwind/select.json

CLI for SIGMA-UI components.

{
  "name": "select",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "name": "Select.vue",
      "content": "<script setup lang=\"ts\">\nimport type { SelectRootEmits, SelectRootProps } from 'reka-ui';\nimport { SelectRoot, useForwardPropsEmits } from 'reka-ui';\n\nconst props = defineProps<SelectRootProps>();\nconst emits = defineEmits<SelectRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <SelectRoot v-bind=\"forwarded\">\n    <slot />\n  </SelectRoot>\n</template>\n"
    },
    {
      "name": "SelectContent.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'reka-ui';\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.';\nimport { cn } from '@ui/utils';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = withDefaults(\n  defineProps<SelectContentProps>(),\n  {\n    position: 'popper',\n  },\n);\nconst emits = defineEmits<SelectContentEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <SelectPortal>\n    <SelectContent\n      v-bind=\"{ ...forwarded, ...$attrs }\"\n      :class=\"cn(\n        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',\n        position === 'popper'\n          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',\n        $attrs.class ?? '',\n      )\n      \"\n    >\n      <SelectScrollUpButton />\n      <SelectViewport :class=\"cn('p-1', position === 'popper' && 'h-(--reka-select-trigger-height) w-full min-w-(--reka-select-trigger-width)')\">\n        <slot />\n      </SelectViewport>\n      <SelectScrollDownButton />\n    </SelectContent>\n  </SelectPortal>\n</template>\n"
    },
    {
      "name": "SelectGroup.vue",
      "content": "<script setup lang=\"ts\">\nimport { SelectGroup, type SelectGroupProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<SelectGroupProps>();\n</script>\n\n<template>\n  <SelectGroup\n    :class=\"cn('p-1 w-full', $attrs.class ?? '')\"\n    v-bind=\"props\"\n  >\n    <slot />\n  </SelectGroup>\n</template>\n"
    },
    {
      "name": "SelectItem.vue",
      "content": "<script setup lang=\"ts\">\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'reka-ui';\nimport { CheckIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<SelectItemProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <SelectItem\n    v-bind=\"forwardedProps\"\n    :class=\"\n      cn(\n        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n        $attrs.class ?? '',\n      )\n    \"\n  >\n    <span class=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <CheckIcon class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n"
    },
    {
      "name": "SelectItemText.vue",
      "content": "<script setup lang=\"ts\">\nimport { SelectItemText, type SelectItemTextProps } from 'reka-ui';\n\nconst props = defineProps<SelectItemTextProps>();\n</script>\n\n<template>\n  <SelectItemText v-bind=\"props\">\n    <slot />\n  </SelectItemText>\n</template>\n"
    },
    {
      "name": "SelectLabel.vue",
      "content": "<script setup lang=\"ts\">\nimport { SelectLabel, type SelectLabelProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<SelectLabelProps>();\n</script>\n\n<template>\n  <SelectLabel :class=\"cn('py-1.5 pl-8 pr-2 text-sm font-semibold', $attrs.class ?? '')\">\n    <slot />\n  </SelectLabel>\n</template>\n"
    },
    {
      "name": "SelectScrollDownButton.vue",
      "content": "<script setup lang=\"ts\">\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'reka-ui';\nimport { ChevronDownIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<SelectScrollDownButtonProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <SelectScrollDownButton\n    v-bind=\"forwardedProps\"\n    :class=\"cn('flex cursor-default items-center justify-center py-1', $attrs.class ?? '')\"\n  >\n    <slot>\n      <ChevronDownIcon class=\"h-4 w-4\" />\n    </slot>\n  </SelectScrollDownButton>\n</template>\n"
    },
    {
      "name": "SelectScrollUpButton.vue",
      "content": "<script setup lang=\"ts\">\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'reka-ui';\nimport { ChevronUpIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<SelectScrollUpButtonProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <SelectScrollUpButton\n    v-bind=\"forwardedProps\"\n    :class=\"cn('flex cursor-default items-center justify-center py-1', $attrs.class ?? '')\"\n  >\n    <slot>\n      <ChevronUpIcon class=\"h-4 w-4\" />\n    </slot>\n  </SelectScrollUpButton>\n</template>\n"
    },
    {
      "name": "SelectSeparator.vue",
      "content": "<script setup lang=\"ts\">\nimport { SelectSeparator, type SelectSeparatorProps } from 'reka-ui';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<SelectSeparatorProps>();\n</script>\n\n<template>\n  <SelectSeparator\n    v-bind=\"props\"\n    :class=\"cn('-mx-1 my-1 h-px bg-muted', $attrs.class ?? '')\"\n  />\n</template>\n"
    },
    {
      "name": "SelectTrigger.vue",
      "content": "<script setup lang=\"ts\">\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'reka-ui';\nimport { ChevronDownIcon } from 'lucide-vue-next';\nimport { cn } from '@ui/utils';\n\nconst props = defineProps<SelectTriggerProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <SelectTrigger\n    v-bind=\"forwardedProps\"\n    :class=\"cn(\n      'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',\n      $attrs.class ?? '',\n    )\"\n  >\n    <span class=\"break-all\">\n      <slot />\n    </span>\n    <SelectIcon as-child>\n      <ChevronDownIcon class=\"w-4 h-4 ml-2 opacity-50\" />\n    </SelectIcon>\n  </SelectTrigger>\n</template>\n"
    },
    {
      "name": "SelectValue.vue",
      "content": "<script setup lang=\"ts\">\nimport { SelectValue, type SelectValueProps } from 'reka-ui';\n\nconst props = defineProps<SelectValueProps>();\n</script>\n\n<template>\n  <SelectValue v-bind=\"props\">\n    <slot />\n  </SelectValue>\n</template>\n"
    },
    {
      "name": "index.ts",
      "content": "export { default as Select } from './Select.vue';\nexport { default as SelectValue } from './SelectValue.vue';\nexport { default as SelectTrigger } from './SelectTrigger.vue';\nexport { default as SelectContent } from './SelectContent.vue';\nexport { default as SelectGroup } from './SelectGroup.vue';\nexport { default as SelectItem } from './SelectItem.vue';\nexport { default as SelectItemText } from './SelectItemText.vue';\nexport { default as SelectLabel } from './SelectLabel.vue';\nexport { default as SelectSeparator } from './SelectSeparator.vue';\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue';\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue';\n"
    }
  ],
  "type": "components:ui"
}