Dashboard/ui/components/SearchInput/SearchInput.tsx

// @subframe/sync-disable
// @ts-nocheck
"use client";
/*
 * Documentation:
 * Badge Shortcut — https://app.subframe.com/f023064a5ca0/library?component=Badge+Shortcut_97bdb082-1124-4dd7-a335-b14b822d0157
 * Search Input — https://app.subframe.com/f023064a5ca0/library?component=Search+Input_75a35ed3-52c0-4435-8586-e390eb77d723
 */

import React from "react";
import { FeatherLoader } from "@subframe/core";
import { FeatherSearch } from "@subframe/core";
import { FeatherX } from "@subframe/core";
import * as SubframeUtils from "../../utils";
import { BadgeShortcut } from "../BadgeShortcut";

export interface InputProps
  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "placeholder"> {
  placeholder?: React.ReactNode;
  className?: string;
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
  { placeholder, className, ...otherProps }: InputProps,
  ref
) {
  return (
    <input
      className={SubframeUtils.twClassNames(
        "h-full w-full min-w-[0px] text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-secondary outline-none placeholder:text-text-neutral-subtle",
        className
      )}
      placeholder={placeholder}
      value=""
      ref={ref}
      type="search"
      {...otherProps}
    />
  );
});

export interface SearchInputRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  disabled?: boolean;
  error?: boolean;
  state?: "default" | "loading" | "filled";
  variant?: "outline" | "filled";
  size?: "small" | "medium" | "large";
  fillContainer?: boolean;
  borderless?: boolean;
  noPadding?: boolean;
  showLabel?: boolean;
  label?: React.ReactNode;
  helpText?: React.ReactNode;
  message?: React.ReactNode;
  hideShortcut?: boolean;
  children?: React.ReactNode;
  className?: string;
}

const SearchInputRoot = React.forwardRef<HTMLDivElement, SearchInputRootProps>(
  function SearchInputRoot(
    {
      disabled = false,
      error = false,
      state = "default",
      variant = "outline",
      size = "medium",
      fillContainer = false,
      borderless = false,
      noPadding = false,
      showLabel = false,
      label,
      helpText,
      message,
      hideShortcut = false,
      children,
      className,
      ...otherProps
    }: SearchInputRootProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "group/75a35ed3 flex cursor-pointer flex-col items-start justify-center gap-1.5",
          { "h-9 w-full": fillContainer },
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <div
          className={SubframeUtils.twClassNames(
            "hidden flex-col items-start gap-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,
                  "text-text-neutral-disabled": disabled,
                }
              )}
            >
              {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,
                  "text-text-neutral-disabled": disabled,
                }
              )}
            >
              {helpText}
            </span>
          ) : null}
        </div>
        <div
          className={SubframeUtils.twClassNames(
            "flex h-9 w-full min-w-[192px] max-w-[320px] flex-none items-center gap-2 rounded-sm border border-solid border-border-strong bg-surface-neutral-primary px-3 group-hover/75a35ed3:bg-surface-neutral-secondary group-focus-within/75a35ed3:bg-surface-neutral-secondary group-focus-within/75a35ed3:shadow-focus",
            {
              "h-auto px-0 py-0": noPadding,
              "border-none": borderless,
              "min-w-[0px] max-w-none": fillContainer,
              "h-12": size === "large",
              "h-8": size === "small",
              "bg-surface-neutral-secondary": variant === "filled",
              "border border-solid border-border-negative-solid group-focus-within/75a35ed3:border-2 group-focus-within/75a35ed3:border-solid group-focus-within/75a35ed3:border-border-negative-solid group-focus-within/75a35ed3:shadow-none":
                error,
              "border border-solid border-border-disabled bg-surface-neutral-disabled group-hover/75a35ed3:bg-surface-neutral-disabled group-focus-within/75a35ed3:bg-surface-neutral-disabled group-focus-within/75a35ed3:shadow-none":
                disabled,
            }
          )}
        >
          <FeatherSearch
            className={SubframeUtils.twClassNames(
              "text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary",
              {
                "text-body-small-regular-0 font-body-small-regular-0":
                  size === "small",
                "text-icon-feedback-negative": error,
                "text-icon-neutral-disabled": disabled,
              }
            )}
          />
          {children ? (
            <div className="flex min-w-[0px] flex-col items-start justify-center self-stretch grow shrink basis-0">
              {children}
            </div>
          ) : null}
          <div
            className={SubframeUtils.twClassNames(
              "flex items-center gap-1 rounded-sm group-focus-within/75a35ed3:hidden",
              {
                hidden:
                  hideShortcut || state === "filled" || state === "loading",
              }
            )}
          >
            <BadgeShortcut
              className={SubframeUtils.twClassNames({
                "h-auto min-h-[20px] w-auto flex-none": disabled,
              })}
            >
              K
            </BadgeShortcut>
          </div>
          <FeatherLoader
            className={SubframeUtils.twClassNames(
              "hidden text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary animate-spin",
              { "inline-flex": state === "loading" }
            )}
          />
          <div
            className={SubframeUtils.twClassNames(
              "hidden h-5 w-5 flex-none items-center justify-center rounded-round cursor-pointer hover:bg-surface-neutral-tertiary",
              { flex: state === "filled" }
            )}
          >
            <FeatherX className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary" />
          </div>
        </div>
        <div
          className={SubframeUtils.twClassNames(
            "hidden flex-col items-start gap-1",
            { flex: showLabel }
          )}
        >
          {message ? (
            <span
              className={SubframeUtils.twClassNames(
                "text-body-extra-small-regular-0 font-body-extra-small-regular-0 text-text-neutral-tertiary",
                {
                  "text-text-feedback-negative": error,
                  "text-text-neutral-disabled": disabled,
                }
              )}
            >
              {message}
            </span>
          ) : null}
        </div>
      </div>
    );
  }
);

export const SearchInput = Object.assign(SearchInputRoot, {
  Input,
});