{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mc-select",
  "title": "MicroClub Select",
  "description": "A select component for MicroClub UI",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/ui/mc-select.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Select as SelectPrimitive } from '@base-ui/react/select';\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon, SearchIcon } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\n\nexport type McSelectVariant =\n  | 'default'\n  | 'icon-leading'\n  | 'avatar-leading'\n  | 'dot-leading'\n  | 'search';\n\nconst McSelect = SelectPrimitive.Root;\n\nfunction McSelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn('scroll-my-1', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McSelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn('flex flex-1 text-left', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McSelectLabel({ className, children }: { className?: string; children: React.ReactNode }) {\n  return (\n    <label\n      className={cn(\n        'mb-1.5 block text-sm font-medium leading-5',\n        'text-muted-foreground',\n        className\n      )}\n    >\n      {children}\n    </label>\n  );\n}\n\ninterface McSelectTriggerProps extends SelectPrimitive.Trigger.Props {\n  size?: 'sm' | 'default';\n  variant?: McSelectVariant;\n\n  leadingIcon?: React.ReactNode;\n\n  leadingAvatar?: React.ReactNode;\n\n  dotColor?: string;\n}\n\nfunction McSelectTrigger({\n  className,\n  size = 'default',\n  variant = 'default',\n  leadingIcon,\n  leadingAvatar,\n  dotColor,\n  children,\n  ...props\n}: McSelectTriggerProps) {\n  const isSearch = variant === 'search';\n\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      data-variant={variant}\n      className={cn(\n        'flex w-80 items-center gap-2 rounded-lg outline-none select-none',\n        'px-3.5 py-2.5 text-sm whitespace-nowrap',\n        'transition-all duration-150',\n\n        isSearch\n          ? ['bg-input', 'border border-border', 'shadow-sm']\n          : ['bg-input', 'border border-border', 'shadow-sm'],\n\n        'data-placeholder:text-muted-foreground',\n\n        'data-popup-open:border-ring',\n        'data-popup-open:ring-4 data-popup-open:ring-ring',\n        'focus-visible:border-ring',\n        'focus-visible:ring-4 focus-visible:ring-ring',\n\n        'disabled:cursor-not-allowed disabled:opacity-50',\n        'aria-invalid:border-destructive aria-invalid:ring-4 aria-invalid:ring-destructive',\n\n        'data-[size=default]:h-11',\n        'data-[size=sm]:h-9 data-[size=sm]:rounded-md data-[size=sm]:px-3 data-[size=sm]:py-1.5',\n\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n\n        '*:data-[slot=select-value]:flex *:data-[slot=select-value]:flex-1 *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2',\n\n        className\n      )}\n      {...props}\n    >\n      {variant === 'search' && <SearchIcon className=\"size-4 shrink-0 text-muted-foreground\" />}\n\n      {variant === 'icon-leading' && leadingIcon && <McSelectIcons>{leadingIcon}</McSelectIcons>}\n\n      {variant === 'avatar-leading' && leadingAvatar && (\n        <span className=\"pointer-events-none flex size-5 shrink-0 items-center justify-center overflow-hidden rounded-full\">\n          {leadingAvatar}\n        </span>\n      )}\n\n      {variant === 'dot-leading' && (\n        <span className=\"dot size-2 shrink-0 rounded-full bg-green-500\" />\n      )}\n\n      {children}\n\n      {!isSearch && (\n        <SelectPrimitive.Icon\n          render={\n            <ChevronDownIcon\n              className={cn(\n                'ml-auto size-4 shrink-0 text-muted-foreground',\n                'transition-transform duration-200',\n                'data-popup-open:rotate-180'\n              )}\n            />\n          }\n        />\n      )}\n    </SelectPrimitive.Trigger>\n  );\n}\n\nfunction McSelectIcons({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {\n  return (\n    <span\n      data-slot=\"select-icons\"\n      className={cn(\n        'pointer-events-none flex shrink-0 items-center justify-center',\n        'text-muted-foreground',\n        '[&_svg]:size-4 [&_svg]:shrink-0',\n        '[&_.dot]:size-2 [&_.dot]:rounded-full',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McSelectContent({\n  className,\n  children,\n  side = 'bottom',\n  sideOffset = 8,\n  scrollbar = false,\n  align = 'center',\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'\n  > & {\n    scrollbar?: boolean;\n  }) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          className={cn(\n            'relative z-50 w-80 h-80',\n            'rounded-lg',\n            'bg-card',\n            'border border-border',\n            'shadow-lg',\n            'overflow-hidden',\n            'data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95',\n            'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',\n            'data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2',\n            className\n          )}\n          {...props}\n        >\n          <SelectPrimitive.List\n            className={cn(\n              'p-0 h-full overflow-y-auto',\n              scrollbar && 'overflow-x-auto',\n              scrollbar\n                ? 'pr-2 [&::-webkit-scrollbar]:w-[8px] [&::-webkit-scrollbar]:h-[312px] [&::-webkit-scrollbar]:opacity-100 [&::-webkit-scrollbar-thumb]:w-[16px] [&::-webkit-scrollbar-thumb]:h-[320px] [&::-webkit-scrollbar-thumb]:p-[4px] [&::-webkit-scrollbar-thumb]:gap-[10px] [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-border mr-1 [&::-webkit-scrollbar-thumb]:opacity-100'\n                : '[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]'\n            )}\n          >\n            {children}\n          </SelectPrimitive.List>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n}\n\nfunction McSelectGroupLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\n        'px-2 py-1.5 text-xs font-medium text-muted-foreground tracking-wide',\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction McSelectItem({\n  className,\n  children,\n  supportingText,\n  leadingIcon,\n  leadingAvatar,\n  dotColor,\n  ...props\n}: SelectPrimitive.Item.Props & {\n  supportingText?: string;\n  leadingIcon?: React.ReactNode;\n  leadingAvatar?: React.ReactNode;\n  dotColor?: string;\n}) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        'group relative flex w-full cursor-default items-center gap-2',\n        'rounded-none px-2 py-2.5 text-sm outline-none select-none',\n        'transition-colors duration-100',\n        'data-highlighted:bg-accent data-highlighted:text-accent-foreground',\n        'data-highlighted=true:bg-accent data-highlighted=true:text-accent-foreground',\n        'data-selected:bg-accent data-selected:text-accent-foreground',\n        'data-selected=true:bg-accent data-selected=true:text-accent-foreground',\n        'data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground',\n        'data-[state=checked=true]:bg-accent data-[state=checked=true]:text-accent-foreground',\n        'data-disabled:pointer-events-none data-disabled:opacity-50',\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg]:text-muted-foreground\",\n        '[&_.dot]:size-2 [&_.dot]:rounded-full [&_.dot]:shrink-0',\n        className\n      )}\n      {...props}\n    >\n      {leadingIcon && (\n        <span className=\"pointer-events-none flex size-4 shrink-0 items-center justify-center text-muted-foreground\">\n          {leadingIcon}\n        </span>\n      )}\n\n      {leadingAvatar && (\n        <span className=\"pointer-events-none flex size-5 shrink-0 items-center justify-center overflow-hidden rounded-full\">\n          {leadingAvatar}\n        </span>\n      )}\n\n      {dotColor && <span className=\"dot size-2 shrink-0 rounded-full bg-green-500\" />}\n\n      <SelectPrimitive.ItemText\n        className={cn(\n          'flex flex-1 min-w-0 whitespace-nowrap',\n          supportingText ? 'flex-row items-center gap-1' : 'flex-row items-center gap-2'\n        )}\n      >\n        <span className=\"text-sm font-medium leading-5 truncate group-data-highlighted:text-accent-foreground group-data-highlighted=true:text-accent-foreground group-data-selected:text-accent-foreground group-data-selected=true:text-accent-foreground group-data-[state=checked]:text-accent-foreground group-data-[state=checked=true]:text-accent-foreground\">\n          {children}\n        </span>\n        {supportingText && (\n          <span className=\"text-xs text-muted-foreground leading-4 truncate group-data-highlighted:text-accent-foreground group-data-highlighted=true:text-accent-foreground group-data-selected:text-accent-foreground group-data-selected=true:text-accent-foreground group-data-[state=checked]:text-accent-foreground group-data-[state=checked=true]:text-accent-foreground\">\n            {supportingText}\n          </span>\n        )}\n      </SelectPrimitive.ItemText>\n\n      <SelectPrimitive.ItemIndicator\n        render={\n          <span className=\"pointer-events-none flex size-4 shrink-0 items-center justify-center text-accent-foreground\">\n            <CheckIcon className=\"size-4\" />\n          </span>\n        }\n      />\n    </SelectPrimitive.Item>\n  );\n}\n\nfunction McSelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn('pointer-events-none mx-0 my-1 h-px bg-border', className)}\n      {...props}\n    />\n  );\n}\n\nfunction McSelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronUpIcon />\n    </SelectPrimitive.ScrollUpArrow>\n  );\n}\n\nfunction McSelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4 bg-accent-red-50 \",\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon />\n    </SelectPrimitive.ScrollDownArrow>\n  );\n}\n\nexport {\n  McSelect,\n  McSelectContent,\n  McSelectGroup,\n  McSelectGroupLabel,\n  McSelectIcons,\n  McSelectItem,\n  McSelectLabel,\n  McSelectScrollDownButton,\n  McSelectScrollUpButton,\n  McSelectSeparator,\n  McSelectTrigger,\n  McSelectValue,\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}