Dashboard/ui/components/Select/Select.tsx

// @subframe/sync-disable
// @ts-nocheck
"use client";
/*
 * Documentation:
 * Avatar — https://app.subframe.com/f023064a5ca0/library?component=Avatar_bec25ae6-5010-4485-b46b-cf79e3943ab2
 * Select — https://app.subframe.com/f023064a5ca0/library?component=Select_bb88f90b-8c43-4b73-9c2f-3558ce7838f3
 */

import React from "react";
import { FeatherCheck } from "@subframe/core";
import { FeatherChevronDown } from "@subframe/core";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";
import { Avatar } from "../Avatar";

export interface ContentProps
  extends React.ComponentProps<typeof SubframeCore.Select.Content> {
  children?: React.ReactNode;
  className?: string;
}

const Content = React.forwardRef<HTMLDivElement, ContentProps>(function Content(
  { children, className, ...otherProps }: ContentProps,
  ref
) {
  return children ? (
    <SubframeCore.Select.Content asChild={true} {...otherProps}>
      <div
        className={SubframeUtils.twClassNames(
          "flex w-full flex-col items-start gap-1 overflow-hidden rounded-sm border border-solid border-border-default bg-surface-neutral-secondary px-1 py-1 shadow-sm",
          className
        )}
        ref={ref}
      >
        {children}
      </div>
    </SubframeCore.Select.Content>
  ) : null;
});

export interface ItemProps
  extends Omit<React.ComponentProps<typeof SubframeCore.Select.Item>, "value"> {
  value: React.ReactNode;
  children?: React.ReactNode;
  showItemText?: boolean;
  content?: React.ReactNode;
  className?: string;
}

const Item = React.forwardRef<HTMLDivElement, ItemProps>(function Item(
  {
    value,
    children,
    showItemText = false,
    content,
    className,
    ...otherProps
  }: ItemProps,
  ref
) {
  return (
    <SubframeCore.Select.Item
      value={value as string}
      asChild={true}
      {...otherProps}
    >
      <div
        className={SubframeUtils.twClassNames(
          "group/969e345b flex w-full cursor-pointer items-center gap-1 rounded-sm px-2 py-2 hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary active:shadow-focus data-[state=checked]:bg-brand-brand-surface-subtle-default hover:data-[state=checked]:bg-brand-subtle-hover active:data-[state=checked]:bg-brand-subtle-active data-[highlighted]:bg-brand-subtle-default hover:data-[highlighted]:bg-brand-subtle-hover active:data-[highlighted]:bg-brand-subtle-active",
          className
        )}
        ref={ref}
      >
        <Select.ItemText
          className={SubframeUtils.twClassNames(
            "hidden h-auto grow shrink-0 basis-0",
            { inline: showItemText }
          )}
          variant={undefined}
        >
          {children || value}
        </Select.ItemText>
        {content ? (
          <div
            className={SubframeUtils.twClassNames(
              "flex grow shrink-0 basis-0 items-center gap-1",
              { hidden: showItemText }
            )}
          >
            {content}
          </div>
        ) : null}
        <FeatherCheck className="hidden text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-primary group-data-[state=checked]/969e345b:inline-flex" />
      </div>
    </SubframeCore.Select.Item>
  );
});

export interface ItemTextProps
  extends React.ComponentProps<typeof SubframeCore.Select.ItemText> {
  children?: React.ReactNode;
  variant?: "option-1" | "selected";
  className?: string;
}

const ItemText = React.forwardRef<HTMLSpanElement, ItemTextProps>(
  function ItemText(
    { children, variant = "option-1", className, ...otherProps }: ItemTextProps,
    ref
  ) {
    return children ? (
      <SubframeCore.Select.ItemText {...otherProps}>
        <span
          className={SubframeUtils.twClassNames(
            "group/c3085a74 text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-tertiary",
            { "text-text-neutral-secondary": variant === "selected" },
            className
          )}
          ref={ref}
        >
          {children}
        </span>
      </SubframeCore.Select.ItemText>
    ) : null;
  }
);

export interface TriggerProps
  extends Omit<
    React.ComponentProps<typeof SubframeCore.Select.Trigger>,
    "placeholder"
  > {
  placeholder?: React.ReactNode;
  icon?: React.ReactNode;
  variant?: "not-filled" | "disabled" | "filled";
  noPadding?: boolean;
  showContent?: boolean;
  selectedContent?: React.ReactNode;
  className?: string;
}

const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(
  function Trigger(
    {
      placeholder,
      icon = null,
      variant = "not-filled",
      noPadding = false,
      showContent = false,
      selectedContent,
      className,
      ...otherProps
    }: TriggerProps,
    ref
  ) {
    return (
      <SubframeCore.Select.Trigger asChild={true} {...otherProps}>
        <button
          className={SubframeUtils.twClassNames(
            "group/7ce1d396 flex h-full w-full items-center justify-between px-3 text-left gap-2",
            { "px-0 py-0": noPadding },
            className
          )}
          ref={ref}
        >
          {icon ? (
            <SubframeCore.IconWrapper className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-subtle">
              {icon}
            </SubframeCore.IconWrapper>
          ) : null}
          {selectedContent ? (
            <div
              className={SubframeUtils.twClassNames(
                "hidden grow shrink-0 basis-0 items-center gap-1 overflow-hidden",
                { flex: showContent }
              )}
            >
              {selectedContent}
            </div>
          ) : null}
          <Select.TriggerValue
            className={SubframeUtils.twClassNames({ invisible: showContent })}
            placeholder={placeholder as string}
            variant={variant === "filled" ? "filled" : undefined}
          />
          <FeatherChevronDown
            className={SubframeUtils.twClassNames(
              "text-body-default-medium-0 font-body-default-medium-0 text-icon-neutral-tertiary",
              { "text-icon-neutral-disabled": variant === "disabled" }
            )}
          />
        </button>
      </SubframeCore.Select.Trigger>
    );
  }
);

export interface TriggerValueProps
  extends React.ComponentProps<typeof SubframeCore.Select.Value> {
  placeholder?: React.ReactNode;
  variant?: "not-filled" | "disabled" | "filled";
  size?: "m" | "s" | "l";
  className?: string;
}

const TriggerValue = React.forwardRef<
  React.ElementRef<typeof SubframeCore.Select.Value>,
  TriggerValueProps
>(function TriggerValue(
  {
    placeholder,
    variant = "not-filled",
    size = "m",
    className,
    ...otherProps
  }: TriggerValueProps,
  ref
) {
  return (
    <SubframeCore.Select.Value
      className={SubframeUtils.twClassNames(
        "group/21c51472 w-full whitespace-nowrap text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-subtle",
        {
          "text-text-neutral-secondary": variant === "filled",
          "text-text-neutral-disabled": variant === "disabled",
        },
        className
      )}
      ref={ref}
      placeholder={placeholder}
      {...otherProps}
    >
      Value
    </SubframeCore.Select.Value>
  );
});

export interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
}

const Divider = React.forwardRef<HTMLDivElement, DividerProps>(function Divider(
  { className, ...otherProps }: DividerProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "flex w-full items-start gap-2 px-1 py-1",
        className
      )}
      ref={ref}
      {...otherProps}
    >
      <div className="flex h-px grow shrink-0 basis-0 flex-col items-center gap-2 bg-border-default" />
    </div>
  );
});

export interface UserItemProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
  value?: React.ReactNode;
  title?: React.ReactNode;
  subtitle?: React.ReactNode;
  image?: string;
  selected?: boolean;
  className?: string;
}

const UserItem = React.forwardRef<HTMLDivElement, UserItemProps>(
  function UserItem(
    {
      value,
      title,
      subtitle,
      image,
      selected = false,
      className,
      ...otherProps
    }: UserItemProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "group/65e658d6 flex w-full cursor-pointer items-center gap-2 rounded-md px-2 py-2 hover:bg-surface-neutral-tertiary active:bg-surface-neutral-secondary",
          {
            "bg-surface-ui-subtle-blue-default hover:bg-surface-ui-subtle-blue-hover active:bg-surface-ui-subtle-blue-active":
              selected,
          },
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <Avatar size="small" image={image}>
          OR
        </Avatar>
        <div className="flex grow shrink-0 basis-0 flex-col items-start">
          {title ? (
            <span className="line-clamp-1 w-full text-body-small-medium-150 font-body-small-medium-150 text-text-neutral-primary">
              {title}
            </span>
          ) : null}
          {subtitle ? (
            <span className="line-clamp-1 w-full text-body-extra-small-regular-150 font-body-extra-small-regular-150 text-text-neutral-tertiary">
              {subtitle}
            </span>
          ) : null}
        </div>
      </div>
    );
  }
);

export interface SelectRootProps
  extends React.ComponentProps<typeof SubframeCore.Select.Root> {
  disabled?: boolean;
  error?: boolean;
  variant?: "outline" | "filled";
  borderless?: boolean;
  noPadding?: boolean;
  fillContainer?: boolean;
  size?: "medium" | "small" | "large";
  showLabel?: boolean;
  label?: React.ReactNode;
  placeholder?: React.ReactNode;
  helpText?: React.ReactNode;
  icon?: React.ReactNode;
  selectedContent?: React.ReactNode;
  showContent?: boolean;
  children?: React.ReactNode;
  errorText?: React.ReactNode;
  message?: React.ReactNode;
  value?: string;
  onValueChange?: (value: string) => void;
  className?: string;
}

const SelectRoot = React.forwardRef<HTMLDivElement, SelectRootProps>(
  function SelectRoot(
    {
      disabled = false,
      error = false,
      variant = "outline",
      borderless = false,
      noPadding = false,
      fillContainer = false,
      size = "medium",
      showLabel = false,
      label,
      placeholder,
      helpText,
      icon = null,
      selectedContent,
      showContent = false,
      children,
      errorText,
      message,
      className,
      value,
      defaultValue,
      onValueChange,
      open,
      defaultOpen,
      onOpenChange,
      dir,
      name,
      autoComplete,
      required,
      form,
      ...otherProps
    }: SelectRootProps,
    ref
  ) {
    return (
      <SubframeCore.Select.Root
        disabled={disabled}
        value={value}
        defaultValue={defaultValue}
        onValueChange={onValueChange}
        open={open}
        defaultOpen={defaultOpen}
        onOpenChange={onOpenChange}
        dir={dir}
        name={name}
        autoComplete={autoComplete}
        required={required}
        form={form}
      >
        <div
          className={SubframeUtils.twClassNames(
            "group/bb88f90b flex w-full min-w-[192px] max-w-[320px] cursor-pointer flex-col items-start gap-4",
            { "max-w-none": fillContainer },
            className
          )}
          ref={ref}
          {...otherProps}
        >
          <div className="flex w-full flex-col items-start">
            <div
              className={SubframeUtils.twClassNames(
                "hidden flex-col items-start gap-2 pb-1.5",
                { flex: showLabel }
              )}
            >
              {label ? (
                <span
                  className={SubframeUtils.twClassNames(
                    "text-body-default-medium-0 font-body-default-medium-0 text-text-neutral-primary",
                    { "text-text-feedback-negative": error }
                  )}
                >
                  {label}
                </span>
              ) : null}
              {helpText ? (
                <span
                  className={SubframeUtils.twClassNames(
                    "text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-tertiary",
                    { "text-text-feedback-negative": error }
                  )}
                >
                  {helpText}
                </span>
              ) : null}
            </div>
            <div className="flex w-full flex-col items-start gap-1">
              <div
                className={SubframeUtils.twClassNames(
                  "flex h-9 w-full flex-none flex-col items-start gap-4 rounded-[4px]",
                  { "h-12": size === "large", "h-8": size === "small" }
                )}
              >
                <div
                  className={SubframeUtils.twClassNames(
                    "flex w-full grow shrink-0 basis-0 flex-col items-start rounded-sm border border-solid border-border-strong bg-surface-neutral-primary relative group-hover/bb88f90b:border group-hover/bb88f90b:border-solid group-hover/bb88f90b:border-brand-brand-border-solid-hover group-hover/bb88f90b:bg-surface-neutral-secondary group-focus-within/bb88f90b:bg-surface-neutral-secondary group-focus-within/bb88f90b:shadow-focus",
                    {
                      "border-none group-hover/bb88f90b:border-none":
                        borderless,
                      "bg-surface-neutral-secondary": variant === "filled",
                      "border border-solid border-border-negative-solid group-hover/bb88f90b:border group-hover/bb88f90b:border-solid group-hover/bb88f90b:border-border-negative-solid group-focus-within/bb88f90b:border-2 group-focus-within/bb88f90b:border-solid group-focus-within/bb88f90b:border-border-negative-solid group-focus-within/bb88f90b:shadow-none":
                        error,
                      "border border-solid border-border-disabled bg-surface-neutral-disabled group-hover/bb88f90b:border group-hover/bb88f90b:border-solid group-hover/bb88f90b:border-border-disabled group-hover/bb88f90b:bg-surface-neutral-disabled group-focus-within/bb88f90b:bg-surface-neutral-disabled group-focus-within/bb88f90b:shadow-none":
                        disabled,
                    }
                  )}
                >
                  {selectedContent ? (
                    <div
                      className={SubframeUtils.twClassNames(
                        "hidden items-center gap-1 overflow-hidden pr-8 pointer-events-none absolute left-3 top-0 bottom-0 z-10",
                        { flex: showContent }
                      )}
                    >
                      {selectedContent}
                    </div>
                  ) : null}
                  <Trigger
                    placeholder={placeholder}
                    icon={icon}
                    variant={
                      variant === "filled"
                        ? "filled"
                        : disabled
                        ? "disabled"
                        : undefined
                    }
                    noPadding={noPadding ? false : undefined}
                    showContent={showContent ? true : undefined}
                  />
                </div>
              </div>
              {message ? (
                <span
                  className={SubframeUtils.twClassNames(
                    "hidden text-body-extra-small-medium-0 font-body-extra-small-medium-0 text-text-neutral-tertiary",
                    { inline: showLabel, "text-text-feedback-negative": error }
                  )}
                >
                  {message}
                </span>
              ) : null}
            </div>
          </div>
          <Content>
            {children ? (
              <div className="flex w-full grow shrink-0 basis-0 flex-col items-start gap-1">
                {children}
              </div>
            ) : null}
          </Content>
        </div>
      </SubframeCore.Select.Root>
    );
  }
);

export const Select = Object.assign(SelectRoot, {
  Content,
  Item,
  ItemText,
  Trigger,
  TriggerValue,
  Divider,
  UserItem,
});