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

A Figma React UI components for creating plugins and widgets

import { jsx, jsxs } from 'react/jsx-runtime';
import { createContext, forwardRef, useRef, useEffect, useContext } from 'react';
import { cn } from '../../utils/cn.mjs';
import { inputVariants } from './input-variants.mjs';

const InputContext = createContext({
  disabled: false,
  invalid: false
});
const Input = forwardRef(
  ({ className, variant, invalid, disabled, children, ...props }, forwardedRef) => {
    const ref = useRef(null);
    useEffect(() => {
      if (!ref || !forwardedRef) {
        return;
      }
      const node = ref.current;
      if (typeof forwardedRef === "function") {
        forwardedRef(node);
      } else if (forwardedRef) {
        forwardedRef.current = node;
      }
    }, [ref]);
    return /* @__PURE__ */ jsx(InputContext.Provider, { value: { disabled, invalid }, children: /* @__PURE__ */ jsxs(
      "div",
      {
        className: cn("peer", "relative", "h-8", "flex", "items-center"),
        "data-disabled": disabled,
        "data-invalid": invalid,
        onClick: () => ref.current?.focus?.(),
        children: [
          children,
          /* @__PURE__ */ jsx(
            "input",
            {
              ref,
              "data-invalid": invalid,
              "aria-invalid": invalid,
              className: cn(
                "inline-block",
                "h-full",
                "px-2",
                inputVariants({ variant, disabled, invalid, className })
              ),
              ...props,
              disabled
            }
          )
        ]
      }
    ) });
  }
);
Input.displayName = "Input";
const InputSlot = forwardRef(({ className, side = "left", ...props }, ref) => {
  const { disabled, invalid } = useContext(InputContext);
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref,
      className: cn(
        "absolute",
        "flex",
        "shrink-0",
        "w-8",
        "items-center",
        "justify-center",
        "transition-colors",
        side === "left" ? ["left-0", "[&~input]:pl-8"] : ["right-0", "[&~input]:pr-8"],
        disabled ? ["cursor-not-allowed", "text-figma-disabled", "fill-figma-icon-disabled"] : ["cursor-default", "text-figma-secondary", "fill-figma-icon-secondary"],
        invalid && !disabled ? ["text-figma-danger", "fill-figma-icon-danger"] : "",
        className
      ),
      ...props,
      "data-side": side,
      "data-invalid": invalid,
      "data-disabled": disabled
    }
  );
});
InputSlot.displayName = "InputSlot";

export { Input, InputSlot };