@thinkbuff/figma-react/dist/components/select/select.mjs

A Figma React UI components for creating plugins and widgets

import { jsx, jsxs } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import * as SelectPrimitive from '@radix-ui/react-select';
import { cn } from '../../utils/cn.mjs';

const SelectRoot = SelectPrimitive.Root;
const SelectGroup = SelectPrimitive.Group;
const SelectValue = SelectPrimitive.Value;
const SelectArrow = forwardRef((props, ref) => /* @__PURE__ */ jsx(
  SelectPrimitive.Arrow,
  {
    className: "z-10 fill-figma-bg-menu",
    ...props,
    ref
  }
));
SelectArrow.displayName = SelectPrimitive.Arrow.displayName;
const SelectTrigger = forwardRef(({ className, children, disabled, placeholder, ...props }, ref) => /* @__PURE__ */ jsxs(
  SelectPrimitive.Trigger,
  {
    className: cn(
      "relative",
      "w-full",
      "h-7",
      "flex",
      "pl-2",
      "items-center",
      "bg-figma",
      "bg-clip-border",
      "border",
      "border-solid",
      "border-transparent",
      "outline-solid",
      "outline-1",
      "-outline-offset-2",
      "outline-transparent",
      "rounded-0.5",
      "data-[placeholder]:text-figma-tertiary data-[placeholder]:fill-figma-icon-tertiary",
      disabled ? [
        "cursor-not-allowed",
        "text-figma-disabled",
        "fill-figma-icon-disabled"
      ] : [
        "group",
        "cursor-default",
        "text-figma",
        "fill-figma-icon",
        "hover:border-figma",
        "focus-visible:border-figma-selected focus-visible:outline-figma-border-selected",
        "data-[state=open]:outline-figma-border-selected"
      ],
      className
    ),
    ...props,
    ref,
    disabled,
    asChild: false,
    children: [
      /* @__PURE__ */ jsx("div", { className: "pointer-events-none flex items-center group-hover:flex-grow group-data-[state=open]:flex-grow", children: children ?? /* @__PURE__ */ jsx(SelectValue, { placeholder }) }),
      /* @__PURE__ */ jsx(
        SelectPrimitive.Icon,
        {
          "data-disabled": disabled,
          className: "i-mdi-chevron-down pointer-events-none ml-1 mr-2 size-3 flex-shrink-0 text-figma-icon-tertiary data-[disabled=true]:text-figma-icon-disabled group-hover:text-figma-icon"
        }
      )
    ]
  }
));
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
const SelectContent = forwardRef(
  ({ className, children, container, withArrow, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { container, children: /* @__PURE__ */ jsxs(
    SelectPrimitive.Content,
    {
      className: cn(
        "relative",
        "text-figma-menu",
        "w-full",
        "bg-figma-menu",
        "rounded-0.5",
        "z-50",
        "data-[side=top]:min-w-[var(--radix-select-trigger-width)]",
        "data-[side=bottom]:min-w-[var(--radix-select-trigger-width)]",
        "max-h-[var(--radix-select-content-available-height)]",
        className
      ),
      sideOffset,
      onCloseAutoFocus: (e) => e.preventDefault(),
      ...props,
      ref,
      children: [
        withArrow && /* @__PURE__ */ jsx(SelectArrow, {}),
        /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, { className: "h-6 flex cursor-default items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "i-tabler-chevron-up size-3.5" }) }),
        /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { className: "py-2", children }),
        /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, { className: "h-6 flex cursor-default items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "i-tabler-chevron-down size-3.5" }) })
      ]
    }
  ) })
);
SelectContent.displayName = SelectPrimitive.Content.displayName;
const SelectLabel = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  SelectPrimitive.Label,
  {
    className: cn(
      "font-size-11",
      "text-figma-menu-secondary",
      "px-8",
      "py-1",
      "font-medium",
      className
    ),
    ...props,
    ref
  }
));
SelectLabel.displayName = SelectPrimitive.Label.displayName;
const SelectItem = forwardRef(({ className, children, asChild = false, ...props }, ref) => /* @__PURE__ */ jsxs(
  SelectPrimitive.Item,
  {
    ref,
    className: cn(
      "relative",
      "w-full",
      "h-6",
      "flex",
      "items-center",
      "font-size-11",
      "pl-8",
      "pr-4",
      "cursor-default",
      "select-none",
      "outline-0",
      "focus:bg-figma-menu-selected",
      "data-[disabled]:text-figma-menu-disabled data-[disabled]:pointer-events-none",
      className
    ),
    ...props,
    children: [
      /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { className: "i-mdi-check-bold absolute left-2 h-3 w-4" }),
      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { asChild, children })
    ]
  }
));
SelectItem.displayName = SelectPrimitive.Item.displayName;
const SelectSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  SelectPrimitive.Separator,
  {
    className: cn(
      "w-full",
      "border-t",
      "border-figma-menu",
      "my-2",
      "h-px",
      className
    ),
    ...props,
    ref
  }
));
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;

export { SelectArrow as Arrow, SelectContent as Content, SelectGroup as Group, SelectItem as Item, SelectLabel as Label, SelectRoot as Root, SelectSeparator as Separator, SelectTrigger as Trigger, SelectValue as Value };