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

CLI for SIGMA-UI components.

{
  "name": "command",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "name": "Command.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui';\nimport { ComboboxRoot, useForwardPropsEmits } from 'reka-ui';\n\nconst props = withDefaults(defineProps<ComboboxRootProps>(), {\n  open: true,\n  modelValue: '',\n});\n\nconst emits = defineEmits<ComboboxRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ComboboxRoot\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-command\"\n  >\n    <slot />\n  </ComboboxRoot>\n</template>\n\n<style>\n.sigma-ui-command {\n  display: flex;\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n  flex-direction: column;\n  border-radius: var(--radius-md);\n  background-color: hsl(var(--popover));\n  color: hsl(var(--popover-foreground));\n}\n</style>\n"
    },
    {
      "name": "CommandDialog.vue",
      "content": "<script setup lang=\"ts\">\nimport { useForwardPropsEmits } from 'reka-ui';\nimport type { DialogRootEmits, DialogRootProps } from 'reka-ui';\nimport Command from './Command.vue';\nimport { Dialog, DialogContent } from '@ui/registry/css/ui/dialog';\n\nconst props = defineProps<DialogRootProps>();\nconst emits = defineEmits<DialogRootEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <Dialog v-bind=\"forwarded\">\n    <DialogContent class=\"sigma-ui-command-dialog\">\n      <Command class=\"sigma-ui-command-dialog__command\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n\n<style>\n.sigma-ui-command-dialog {\n  overflow: hidden;\n  padding: 0;\n  box-shadow: var(--shadow-lg);\n}\n\n.sigma-ui-command-dialog__command [cmdk-group-heading] {\n  padding-right: 0.5rem;\n  padding-left: 0.5rem;\n  color: hsl(var(--muted-foreground));\n  font-weight: 500;\n}\n\n.sigma-ui-command-dialog__command [cmdk-group]:not([hidden]) ~ [cmdk-group] {\n  padding-top: 0;\n}\n\n.sigma-ui-command-dialog__command [cmdk-group] {\n  padding-right: 0.5rem;\n  padding-left: 0.5rem;\n}\n\n.sigma-ui-command-dialog__command [cmdk-input-wrapper] svg {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n.sigma-ui-command-dialog__command [cmdk-input] {\n  height: 3rem;\n}\n\n.sigma-ui-command-dialog__command [cmdk-item] {\n  padding: 0.75rem 0.5rem;\n}\n\n.sigma-ui-command-dialog__command [cmdk-item] svg {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n</style>\n"
    },
    {
      "name": "CommandEmpty.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ComboboxEmptyProps } from 'reka-ui';\nimport { ComboboxEmpty } from 'reka-ui';\n\nconst props = defineProps<ComboboxEmptyProps>();\n</script>\n\n<template>\n  <ComboboxEmpty\n    v-bind=\"props\"\n    class=\"sigma-ui-command-empty\"\n  >\n    <slot />\n  </ComboboxEmpty>\n</template>\n\n<style>\n.sigma-ui-command-empty {\n  padding-top: 1.5rem;\n  padding-bottom: 1.5rem;\n  font-size: var(--text-sm);\n  text-align: center;\n}\n</style>\n"
    },
    {
      "name": "CommandGroup.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'reka-ui';\nimport { ComboboxGroup, ComboboxLabel } from 'reka-ui';\n\nconst props = defineProps<ComboboxGroupProps & {\n  heading?: string;\n}>();\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"props\"\n    class=\"sigma-ui-command-group text-xs\"\n  >\n    <ComboboxLabel\n      v-if=\"heading\"\n      class=\"sigma-ui-command-group__heading\"\n    >\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n\n<style>\n.sigma-ui-command-group {\n  overflow: hidden;\n  padding: 0.25rem;\n  color: hsl(var(--foreground));\n}\n\n.sigma-ui-command-group [cmdk-group-heading] {\n  padding: 0.375rem 0.5rem;\n  color: hsl(var(--muted-foreground));\n  font-size: 0.75rem;\n  font-weight: 500;\n  line-height: 1rem;\n}\n\n.sigma-ui-command-group__heading {\n  padding: 0.375rem 0.5rem;\n  color: hsl(var(--muted-foreground));\n  font-size: 0.75rem;\n  font-weight: 500;\n  line-height: 1rem;\n}\n</style>\n"
    },
    {
      "name": "CommandInput.vue",
      "content": "<script setup lang=\"ts\">\nimport { SearchIcon } from 'lucide-vue-next';\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'reka-ui';\n\ndefineOptions({\n  inheritAttrs: false,\n});\n\nconst props = defineProps<ComboboxInputProps>();\n\nconst forwardedProps = useForwardProps(props);\n</script>\n\n<template>\n  <div\n    class=\"sigma-ui-command-input\"\n    cmdk-input-wrapper\n  >\n    <SearchIcon class=\"sigma-ui-command-input__icon\" />\n    <ComboboxInput\n      v-bind=\"{ ...forwardedProps, ...$attrs }\"\n      auto-focus\n      class=\"sigma-ui-command-input__field\"\n    />\n  </div>\n</template>\n\n<style>\n.sigma-ui-command-input {\n  display: flex;\n  align-items: center;\n  padding-right: 0.75rem;\n  padding-left: 0.75rem;\n  border-bottom: 1px solid hsl(var(--border));\n}\n\n.sigma-ui-command-input__icon {\n  width: 1rem;\n  height: 1rem;\n  flex-shrink: 0;\n  margin-right: 0.5rem;\n  opacity: 0.5;\n}\n\n.sigma-ui-command-input__field {\n  display: flex;\n  width: 100%;\n  height: 2.75rem;\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n  border-radius: var(--radius-md);\n  background-color: transparent;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n}\n\n.sigma-ui-command-input__field::placeholder {\n  color: hsl(var(--muted-foreground));\n}\n\n.sigma-ui-command-input__field:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n</style>\n"
    },
    {
      "name": "CommandItem.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui';\nimport { ComboboxItem, useForwardPropsEmits } from 'reka-ui';\n\nconst props = defineProps<ComboboxItemProps>();\nconst emits = defineEmits<ComboboxItemEmits>();\n\nconst forwarded = useForwardPropsEmits(props, emits);\n</script>\n\n<template>\n  <ComboboxItem\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-command-item\"\n  >\n    <slot />\n  </ComboboxItem>\n</template>\n\n<style>\n.sigma-ui-command-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0.375rem 0.5rem;\n  border-radius: var(--radius-sm);\n  cursor: default;\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  outline: none;\n  user-select: none;\n}\n\n.sigma-ui-command-item[data-highlighted] {\n  background-color: hsl(var(--accent));\n  color: hsl(var(--accent-foreground));\n}\n\n.sigma-ui-command-item[data-disabled] {\n  opacity: 0.5;\n  pointer-events: none;\n}\n</style>\n"
    },
    {
      "name": "CommandList.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ListboxContentProps } from 'reka-ui';\nimport { ListboxContent, useForwardProps } from 'reka-ui';\n\nconst props = defineProps<ListboxContentProps>();\n\nconst forwarded = useForwardProps(props);\n</script>\n\n<template>\n  <ListboxContent\n    v-bind=\"forwarded\"\n    class=\"sigma-ui-command-list\"\n  >\n    <div\n      role=\"presentation\"\n      class=\"sigma-ui-command-list__content\"\n    >\n      <slot />\n    </div>\n  </ListboxContent>\n</template>\n\n<style>\n.sigma-ui-command-list {\n  overflow: hidden auto;\n  max-height: 300px;\n}\n\n.sigma-ui-command-list__content {\n  position: relative;\n}\n</style>\n"
    },
    {
      "name": "CommandSeparator.vue",
      "content": "<script setup lang=\"ts\">\nimport type { ComboboxSeparatorProps } from 'reka-ui';\nimport { ComboboxSeparator } from 'reka-ui';\n\nconst props = defineProps<ComboboxSeparatorProps>();\n</script>\n\n<template>\n  <ComboboxSeparator\n    v-bind=\"props\"\n    class=\"sigma-ui-command-separator\"\n  >\n    <slot />\n  </ComboboxSeparator>\n</template>\n\n<style>\n.sigma-ui-command-separator {\n  height: 1px;\n  margin-right: -0.25rem;\n  margin-left: -0.25rem;\n  background-color: hsl(var(--border));\n}\n</style>\n"
    },
    {
      "name": "CommandShortcut.vue",
      "content": "<script setup lang=\"ts\">\n\n</script>\n\n<template>\n  <span\n    class=\"sigma-ui-command-shortcut\"\n    :class=\"$attrs.class\"\n  >\n    <slot />\n  </span>\n</template>\n\n<style>\n.sigma-ui-command-shortcut {\n  margin-left: auto;\n  color: hsl(var(--muted-foreground));\n  font-size: 0.75rem;\n  letter-spacing: 0.1em;\n  line-height: 1rem;\n}\n</style>\n"
    },
    {
      "name": "index.ts",
      "content": "export { default as Command } from './Command.vue';\nexport { default as CommandDialog } from './CommandDialog.vue';\nexport { default as CommandEmpty } from './CommandEmpty.vue';\nexport { default as CommandGroup } from './CommandGroup.vue';\nexport { default as CommandInput } from './CommandInput.vue';\nexport { default as CommandItem } from './CommandItem.vue';\nexport { default as CommandList } from './CommandList.vue';\nexport { default as CommandSeparator } from './CommandSeparator.vue';\nexport { default as CommandShortcut } from './CommandShortcut.vue';\n"
    }
  ],
  "type": "components:ui"
}