@goplusvn/core 0.1.0 → 0.1.2

package/src/ui/forms/input-otp.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useContext } from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Minus } from "lucide-react";
+
+import type { ComponentProps } from "react";
+
+import { cn } from "../../utils";
+
+type InputOTPProps = ComponentProps<typeof OTPInput> & {
+  containerClassName?: string;
+};
+
+export function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: InputOTPProps) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "flex items-center gap-2 has-disabled:opacity-50",
+        containerClassName,
+      )}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  );
+}
+
+export function InputOTPGroup({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn("flex items-center", className)}
+      {...props}
+    />
+  );
+}
+
+type InputOTPSlotProps = ComponentProps<"div"> & {
+  index: number;
+};
+
+export function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: InputOTPSlotProps) {
+  const inputOTPContext = useContext(OTPInputContext as any) as any;
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      className={cn(
+        "relative flex h-9 w-9 items-center justify-center border-y border-e border-input text-sm transition-all first:rounded-s-md first:border-s last:rounded-e-md",
+        isActive && "z-10 ring-1 ring-ring",
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function InputOTPSeparator({ ...props }: ComponentProps<"div">) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <Minus />
+    </div>
+  );
+}

package/src/ui/forms/input-phone.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { useCallback, useMemo } from "react";
+import Image from "next/image";
+import { useDirection } from "@radix-ui/react-direction";
+import * as RPNInputPrimitive from "react-phone-number-input";
+import { Check, ChevronsUpDown } from "lucide-react";
+
+import type { ComponentProps, ComponentPropsWithoutRef } from "react";
+
+import { cn } from "../../utils";
+
+import { Button } from "../primitives";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "./command";
+import { Input } from "../primitives";
+import { Popover, PopoverContent, PopoverTrigger } from "../primitives/client";
+import { ScrollArea } from "../primitives/client";
+
+type InputPhoneProps = Omit<
+  ComponentPropsWithoutRef<"input">,
+  "onChange" | "value"
+> &
+  Omit<
+    RPNInputPrimitive.Props<typeof RPNInputPrimitive.default>,
+    "onChange"
+  > & {
+    onChange?: (value: RPNInputPrimitive.Value) => void;
+  };
+
+export function InputPhone({ className, onChange, ...props }: InputPhoneProps) {
+  const direction = useDirection();
+
+  return (
+    <RPNInputPrimitive.default
+      data-slot="input-phone"
+      dir={direction}
+      className={cn("w-full flex", className)}
+      flagComponent={FlagComponent}
+      countrySelectComponent={CountrySelect}
+      inputComponent={InputComponent}
+      /**
+       * Handles the onChange event.
+       *
+       * react-phone-number-input might trigger the onChange event as undefined
+       * when a valid phone number is not entered. To prevent this,
+       * the value is coerced to an empty string.
+       *
+       * @param {E164Number | undefined} value - The entered value
+       */
+      onChange={(value) => onChange?.(value as RPNInputPrimitive.Value)}
+      {...props}
+    />
+  );
+}
+
+function InputComponent({ className, ...props }: ComponentProps<"input">) {
+  return (
+    <Input
+      className={cn("rounded-e-md rounded-s-none", className)}
+      {...props}
+    />
+  );
+}
+
+interface CountrySelectOption {
+  label: string;
+  value: RPNInputPrimitive.Country;
+}
+
+interface CountrySelectProps {
+  disabled?: boolean;
+  value: RPNInputPrimitive.Country;
+  onChange: (value: RPNInputPrimitive.Country) => void;
+  options: CountrySelectOption[];
+}
+
+function CountrySelect({
+  disabled,
+  value,
+  onChange,
+  options,
+}: CountrySelectProps) {
+  const handleSelect = useCallback(
+    (country: RPNInputPrimitive.Country) => onChange(country),
+    [onChange],
+  );
+
+  const memoizedOptions = useMemo(
+    () =>
+      options.map((option) => (
+        <CommandItem
+          className="flex gap-2 w-full"
+          key={option.value || "ZZ"}
+          onSelect={() => handleSelect(option.value)}
+        >
+          <FlagComponent country={option.value} countryName={option.label} />
+          <span className="flex-1 text-sm">{option.label}</span>
+          {option.value && (
+            <span className="text-foreground/50 text-sm">
+              {`+${RPNInputPrimitive.getCountryCallingCode(option.value)}`}
+            </span>
+          )}
+          <span aria-label={option.value === value ? "Selected" : undefined}>
+            <Check
+              className={cn(
+                "ms-auto size-4",
+                option.value === value ? "opacity-100" : "opacity-0",
+              )}
+            />
+          </span>
+        </CommandItem>
+      )),
+    [options, handleSelect, value],
+  );
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="outline"
+          className={cn("flex gap-1 rounded-e-none rounded-s-lg px-3")}
+          disabled={disabled}
+        >
+          <FlagComponent country={value} countryName={value} />
+          <ChevronsUpDown
+            className={cn(
+              "-me-2 size-4 opacity-50",
+              disabled ? "hidden" : "opacity-100",
+            )}
+            aria-hidden
+          />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[300px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder="Search country..." />
+          <CommandList>
+            <CommandEmpty>No country found.</CommandEmpty>
+            <ScrollArea className="h-[300px] max-h-[300px]">
+              <CommandGroup>{memoizedOptions}</CommandGroup>
+            </ScrollArea>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+function FlagComponent({ country, countryName }: RPNInputPrimitive.FlagProps) {
+  const flagUrl = `https://purecatamphetamine.github.io/country-flag-icons/3x2/${country}.svg`;
+
+  return (
+    <div className="relative h-4 w-6 bg-foreground/20 rounded-sm">
+      {country && (
+        <Image
+          src={flagUrl}
+          alt={countryName}
+          fill
+          className="rounded-sm object-cover"
+        />
+      )}
+    </div>
+  );
+}

package/src/ui/forms/input-spin.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Minus, Plus } from "lucide-react";
+
+import type { ChangeEvent, ComponentProps } from "react";
+
+import { cn } from "../../utils";
+
+import { Button } from "../primitives";
+
+interface InputSpinProps
+  extends Omit<
+    ComponentProps<"input">,
+    "onChange" | "value" | "min" | "max" | "step"
+  > {
+  value?: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  buttonVariant?: ComponentProps<typeof Button>["variant"];
+}
+
+export function InputSpin({
+  value,
+  onChange,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  disabled = false,
+  className,
+  buttonVariant = "default",
+  ...props
+}: InputSpinProps) {
+  const [internalValue, setInternalValue] = useState<number>(value ?? 0);
+
+  function handleIncrement() {
+    const newValue = internalValue + step;
+    if (newValue <= max) {
+      setInternalValue(newValue);
+      onChange?.(newValue);
+    }
+  }
+
+  function handleDecrement() {
+    const newValue = internalValue - step;
+    if (newValue >= min) {
+      setInternalValue(newValue);
+      onChange?.(newValue);
+    }
+  }
+
+  const handleOnChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const newValue = parseFloat(e.target.value);
+    if (!isNaN(newValue) && newValue >= min && newValue <= max) {
+      setInternalValue(newValue);
+      onChange?.(newValue);
+    }
+  };
+
+  useEffect(() => {
+    if (value !== undefined) {
+      setInternalValue(value);
+    }
+  }, [value]);
+
+  return (
+    <div
+      data-slot="input-spin"
+      className={cn(
+        "h-9 w-fit flex justify-between items-center p-0.5 rounded-md border border-input bg-transparent text-sm transition-colors",
+        disabled && "cursor-not-allowed opacity-50",
+        className,
+      )}
+    >
+      <Button
+        type="button"
+        variant={buttonVariant}
+        size="icon"
+        className="h-full w-auto aspect-square"
+        onClick={handleDecrement}
+        disabled={disabled || internalValue <= min}
+        aria-label="Decrease value"
+      >
+        <Minus className="h-4 w-4" />
+      </Button>
+      <input
+        type="number"
+        value={internalValue}
+        className={cn(
+          "h-full w-10 border-0 bg-transparent text-sm text-center focus:outline-hidden focus:ring-0",
+          "[-moz-appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+        )}
+        onChange={handleOnChange}
+        disabled={disabled}
+        min={min}
+        max={max}
+        step={step}
+        readOnly
+        {...props}
+      />
+      <Button
+        type="button"
+        variant={buttonVariant}
+        size="icon"
+        className="h-full w-auto aspect-square"
+        onClick={handleIncrement}
+        disabled={disabled || internalValue >= max}
+        aria-label="Increase value"
+      >
+        <Plus className="h-4 w-4" />
+      </Button>
+    </div>
+  );
+}

package/src/ui/forms/input-tags.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { useEffect, useImperativeHandle, useRef, useState } from "react";
+import { X } from "lucide-react";
+
+import type { ComponentProps, KeyboardEvent } from "react";
+
+import { cn } from "../../utils";
+
+import { Command, CommandEmpty, CommandItem, CommandList } from "./command";
+import { Popover, PopoverContent, PopoverTrigger } from "../primitives/client";
+import { Button } from "../primitives";
+import { ScrollArea } from "../primitives/client";
+
+export interface InputTagsProps extends ComponentProps<"input"> {
+  placeholder?: string;
+  tags: string[];
+  onTagsChange: (tags: string[]) => void;
+  className?: string;
+}
+
+export function InputTags({
+  placeholder,
+  tags,
+  onTagsChange,
+  className,
+  ...props
+}: InputTagsProps) {
+  const [inputValue, setInputValue] = useState("");
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Forward the ref to the internal ref
+  useImperativeHandle(props.ref, () => inputRef.current!);
+
+  const addTag = (tag: string) => {
+    const trimmedTag = tag.trim();
+    if (trimmedTag && !tags.includes(trimmedTag)) {
+      onTagsChange([...tags, trimmedTag]);
+    }
+    setInputValue("");
+  };
+
+  const removeTag = (indexToRemove: number) => {
+    onTagsChange(tags.filter((_, index) => index !== indexToRemove));
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      addTag(inputValue);
+    } else if (e.key === "Backspace" && !inputValue && tags.length > 0) {
+      removeTag(tags.length - 1);
+    }
+  };
+
+  return (
+    <div
+      data-slot="input-tags"
+      className={cn(
+        "min-h-9 w-full flex flex-wrap gap-2 rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+        className,
+      )}
+      onClick={() => inputRef.current?.focus()}
+    >
+      {tags.map((tag, index) => (
+        <span
+          key={index}
+          className="inline-flex items-center rounded-full bg-secondary px-3 py-0.5 text-sm font-medium text-secondary-foreground"
+        >
+          {tag}
+          <Button
+            variant="ghost"
+            onClick={(e) => {
+              e.preventDefault();
+              removeTag(index);
+            }}
+            className="size-auto p-0.5 ms-0.5 -me-1 rounded-full hover:bg-secondary-foreground/20"
+            aria-label="Remove"
+          >
+            <X className="h-3 w-3" />
+          </Button>
+        </span>
+      ))}
+      <input
+        ref={inputRef}
+        type="text"
+        className="w-0 flex-1 bg-transparent outline-hidden placeholder:text-muted-foreground"
+        value={inputValue}
+        onChange={(e) => setInputValue(e.target.value)}
+        onKeyDown={handleKeyDown}
+        onBlur={() => addTag(inputValue)}
+        placeholder={tags.length === 0 ? placeholder : ""}
+        {...props}
+      />
+    </div>
+  );
+}
+
+interface InputTagsWithSuggestionsProps extends ComponentProps<"input"> {
+  placeholder?: string;
+  tags: string[];
+  suggestions: string[];
+  onTagsChange: (tags: string[]) => void;
+  className?: string;
+}
+
+export function InputTagsWithSuggestions({
+  placeholder,
+  tags,
+  suggestions,
+  onTagsChange,
+  className,
+  ...props
+}: InputTagsWithSuggestionsProps) {
+  const [inputValue, setInputValue] = useState("");
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [popoverWidth, setPopoverWidth] = useState<number | undefined>(
+    undefined,
+  );
+
+  useEffect(() => {
+    if (containerRef.current) {
+      setPopoverWidth(containerRef.current.offsetWidth);
+    }
+  }, [open]);
+
+  const filteredSuggestions = suggestions.filter(
+    (suggestion) =>
+      suggestion.toLowerCase().includes(inputValue.toLowerCase()) &&
+      !tags.includes(suggestion),
+  );
+
+  const addTag = (tag: string) => {
+    const trimmedTag = tag.trim();
+    if (trimmedTag && !tags.includes(trimmedTag)) {
+      onTagsChange([...tags, trimmedTag]);
+    }
+    setInputValue("");
+  };
+
+  const removeTag = (indexToRemove: number) => {
+    onTagsChange(tags.filter((_, index) => index !== indexToRemove));
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && !open) {
+      e.preventDefault();
+      addTag(inputValue);
+    } else if (e.key === "Backspace" && !inputValue && tags.length > 0) {
+      removeTag(tags.length - 1);
+    }
+  };
+
+  return (
+    <Popover modal open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <div
+          data-slot="input-tags-with-suggestions"
+          ref={containerRef}
+          className={cn(
+            "min-h-9 w-full flex flex-wrap gap-2 rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+            className,
+          )}
+        >
+          {tags.map((tag, index) => (
+            <span
+              key={index}
+              className="inline-flex items-center rounded-full bg-secondary px-3 py-0.5 text-sm font-medium text-secondary-foreground"
+            >
+              {tag}
+              <Button
+                variant="ghost"
+                onClick={(e) => {
+                  e.preventDefault();
+                  removeTag(index);
+                }}
+                className="size-auto p-0.5 ms-0.5 -me-1 rounded-full hover:bg-secondary-foreground/20"
+                aria-label="Remove"
+              >
+                <X className="h-3 w-3" />
+              </Button>
+            </span>
+          ))}
+          <input
+            ref={props.ref}
+            type="text"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onKeyDown={handleKeyDown}
+            className="w-0 flex-1 bg-transparent outline-hidden placeholder:text-muted-foreground"
+            placeholder={tags.length === 0 ? placeholder : ""}
+            {...props}
+          />
+        </div>
+      </PopoverTrigger>
+      <PopoverContent
+        style={{ width: popoverWidth ? `${popoverWidth}px` : "auto" }}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        <ScrollArea className="flex flex-col max-h-[300px]">
+          <Command>
+            <CommandList className="max-h-full">
+              <CommandEmpty>No results found.</CommandEmpty>
+              {filteredSuggestions.map((suggestion) => (
+                <CommandItem
+                  key={suggestion}
+                  onSelect={() => addTag(suggestion)}
+                >
+                  {suggestion}
+                </CommandItem>
+              ))}
+            </CommandList>
+          </Command>
+        </ScrollArea>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/ui/forms/input-time.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useState } from "react";
+
+import type { ChangeEvent, ComponentProps } from "react";
+
+import { cn } from "../../utils";
+
+import { Input } from "../primitives";
+
+export interface InputTimeProps extends ComponentProps<"input"> {
+  onValueChange?: (value?: string) => void;
+}
+
+export function InputTime({
+  className,
+  onValueChange,
+  ...props
+}: InputTimeProps) {
+  const [isEmpty, setIsEmpty] = useState(!props.defaultValue && !props.value);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+
+    setIsEmpty(!value);
+    onValueChange?.(value);
+  };
+
+  return (
+    <Input
+      data-slot="input-time"
+      className={cn(
+        "block [&::-webkit-calendar-picker-indicator]:hidden rtl:text-right",
+        isEmpty && "text-muted-foreground",
+        className,
+      )}
+      {...props}
+      type="time"
+      onChange={handleChange}
+    />
+  );
+}