Phone Input

import { PhoneInput } from "@tilt-legal/cubitt-components/phone-input";

const states = ["default", "error", "disabled", "readonly"] as const;
const [state, setState] =
  useState<"default" | "error" | "disabled" | "readonly">("default");

<>
  <PhoneInput
    aria-invalid={state === "error" ? true : undefined}
    disabled={state === "disabled"}
    placeholder={
      state === "readonly"
        ? "Readonly"
        : `${state[0]?.toUpperCase()}${state.slice(1)}`
    }
    readOnly={state === "readonly"}
  />
  <PreviewFooter>
    <ToggleGroup
      aria-label="Phone input state"
      groupVariant="segmented"
      multiple={false}
      onValueChange={(value) => {
        if (states.includes(value as (typeof states)[number])) {
          setState(value as (typeof states)[number]);
        }
      }}
      value={state}
    >
      <ToggleGroupItem value="default">Default</ToggleGroupItem>
      <ToggleGroupItem value="error">Error</ToggleGroupItem>
      <ToggleGroupItem value="disabled">Disabled</ToggleGroupItem>
      <ToggleGroupItem value="readonly">Readonly</ToggleGroupItem>
    </ToggleGroup>
  </PreviewFooter>
</>;