@eggspot/ui 0.0.0

package/src/components/Form.tsx

@@ -0,0 +1,195 @@
+"use client"
+
+import * as React from "react"
+import { Label } from "@eggspot/ui/components/Label"
+import { cn } from "@eggspot/ui/lib/utils"
+import { Slot } from "@radix-ui/react-slot"
+import { LabelProps } from "react-aria-components"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  UseFormReturn,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+function FormItem({
+  className,
+  flow = "column",
+  ...props
+}: React.ComponentProps<"div"> & { flow?: "row" | "column" }) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn(
+          "flex gap-2",
+          flow === "column" && "flex-col",
+          flow === "row" && "flex-row items-center",
+          className
+        )}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({ className, ...props }: LabelProps) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("whitespace-nowrap", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  const ariaProps = {
+    isInvalid: !!error,
+  }
+
+  return (
+    <Slot
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...ariaProps}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-gray-11 my-0 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-error-11 my-0 text-xs", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+function setSubmitErrors(
+  form: UseFormReturn<any>,
+  error: Record<string, string>
+) {
+  try {
+    Object.entries(error).forEach(([key, value]) => {
+      form.setError(key, { message: value })
+    })
+
+    // focus the first error
+    form.setFocus(Object.keys(error)[0] as string)
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  setSubmitErrors,
+  useFormField,
+}

package/src/components/Heading.tsx

@@ -0,0 +1,41 @@
+import { cn } from "@eggspot/ui/lib/utils"
+import { cva, VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+const headingVariants = cva("font-semibold", {
+  variants: {
+    variant: {
+      h1: "text-3xl",
+      h2: "text-2xl",
+      h3: "text-xl",
+      h4: "text-lg",
+      h5: "text-md",
+      h6: "text-base",
+      subtitle1: "text-sm",
+      subtitle2: "text-xs",
+    },
+  },
+  defaultVariants: {
+    variant: "h1",
+  },
+})
+
+interface HeadingProps
+  extends React.ComponentProps<"h1">,
+    VariantProps<typeof headingVariants> {
+  asChild?: boolean
+}
+
+export function Heading({
+  asChild = false,
+  className,
+  variant,
+  ...props
+}: HeadingProps) {
+  const defaultElement = (variant?.startsWith("h") ? variant : "p") as any
+  const Comp = asChild ? Slot.Root : defaultElement
+
+  return (
+    <Comp className={cn(headingVariants({ variant, className }))} {...props} />
+  )
+}

package/src/components/Input.tsx

@@ -0,0 +1,221 @@
+"use client"
+
+import React, { useState } from "react"
+import { Button } from "@eggspot/ui/components/Button"
+import { FieldGroup } from "@eggspot/ui/components/Field"
+import { Label } from "@eggspot/ui/components/Label"
+import { cn } from "@eggspot/ui/lib/utils"
+import { EyeIcon, EyeOffIcon, SearchIcon, XIcon } from "lucide-react"
+import {
+  Input as AriaInput,
+  SearchField as AriaSearchField,
+  SearchFieldProps as AriaSearchFieldProps,
+  TextArea as AriaTextArea,
+  TextField as AriaTextField,
+  TextFieldProps as AriaTextFieldProps,
+} from "react-aria-components"
+import { useDebounce } from "react-use"
+
+interface InputProps extends AriaTextFieldProps {
+  label?: string
+  withAsterisk?: boolean
+  tooltip?: React.ReactNode
+  placeholder?: string
+  leftIcon?: React.ReactNode
+  rightIcon?: React.ReactNode
+  ref?: React.RefCallback<HTMLInputElement>
+}
+
+function Input({
+  className,
+  label,
+  withAsterisk,
+  tooltip,
+  leftIcon,
+  rightIcon,
+  ref,
+  ...props
+}: InputProps) {
+  return (
+    <AriaTextField
+      className={"flex flex-col gap-1.5"}
+      isInvalid={(props as any)["aria-invalid"]}
+      {...props}
+    >
+      {label && (
+        <Label withAsterisk={withAsterisk} tooltip={tooltip}>
+          {label}
+        </Label>
+      )}
+      <FieldGroup className={cn("py-0", className)}>
+        {leftIcon && <div className="pr-2">{leftIcon}</div>}
+        <AriaInput
+          ref={ref}
+          className="placeholder:text-gray-11 h-full flex-1 focus-visible:outline-none"
+        />
+        {rightIcon && <div className="pl-2">{rightIcon}</div>}
+      </FieldGroup>
+    </AriaTextField>
+  )
+}
+
+interface PasswordInputProps extends AriaTextFieldProps {
+  placeholder?: string
+  label?: string
+  withAsterisk?: boolean
+  tooltip?: React.ReactNode
+  ref?: React.RefCallback<HTMLInputElement>
+}
+
+function PasswordInput({
+  className,
+  label,
+  withAsterisk,
+  tooltip,
+  ref,
+  ...props
+}: PasswordInputProps) {
+  const [isVisible, setIsVisible] = React.useState(false)
+
+  return (
+    <AriaTextField className={cn("flex flex-col gap-1.5")} {...props}>
+      {label && (
+        <Label withAsterisk={withAsterisk} tooltip={tooltip}>
+          {label}
+        </Label>
+      )}
+      <FieldGroup className={cn("py-0 pr-1", className)}>
+        <AriaInput
+          ref={ref}
+          type={isVisible ? "text" : "password"}
+          className="placeholder:text-gray-11 h-full flex-1 focus-visible:outline-none"
+        />
+        <Button
+          size="sm"
+          mode="icon"
+          variant="ghost"
+          intent="secondary"
+          onClick={() => setIsVisible(!isVisible)}
+          tooltip="Toggle password visibility"
+          tooltipDelay={1000}
+          className="rounded-sm"
+        >
+          {isVisible ? <EyeIcon /> : <EyeOffIcon />}
+        </Button>
+      </FieldGroup>
+    </AriaTextField>
+  )
+}
+
+interface TextAreaProps extends AriaTextFieldProps {
+  label?: string
+  withAsterisk?: boolean
+  tooltip?: React.ReactNode
+  placeholder?: string
+  ref?: React.RefCallback<HTMLTextAreaElement>
+}
+
+function TextArea({
+  className,
+  label,
+  withAsterisk,
+  tooltip,
+  ref,
+  ...props
+}: TextAreaProps) {
+  return (
+    <AriaTextField className={cn("grid gap-1.5", className)} {...props}>
+      {label && (
+        <Label withAsterisk={withAsterisk} tooltip={tooltip}>
+          {label}
+        </Label>
+      )}
+      <AriaTextArea
+        ref={ref}
+        className={cn(
+          "bg-gray-2 ring-offset-gray-1 placeholder:text-gray-11 flex field-sizing-content min-h-[80px] w-full rounded-md px-3 py-2 md:text-sm",
+          "ring-gray-7 ring",
+          /* Focus Within */
+          "data-[focused]:ring-accent-9 transition-all data-[focused]:ring-2",
+          /* Disabled */
+          "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-60",
+          /* Resets */
+          "focus-visible:outline-none",
+          /* Invalid */
+          "data-[invalid]:ring-error-9 aria-invalid:ring-error-9",
+          className
+        )}
+      />
+    </AriaTextField>
+  )
+}
+
+interface SearchInputProps extends AriaSearchFieldProps {
+  placeholder?: string
+  ref?: React.RefCallback<HTMLInputElement>
+}
+
+function SearchInput({ className, ref, ...props }: SearchInputProps) {
+  return (
+    <AriaSearchField {...props} aria-label="Search" className="group">
+      <FieldGroup className={cn("py-0 pr-1", className)}>
+        <div className="pr-2">
+          <SearchIcon aria-hidden className="text-gray-11 size-4" />
+        </div>
+        <AriaInput
+          ref={ref}
+          aria-label="Search"
+          className="placeholder:text-gray-11 h-full flex-1 focus-visible:outline-none [&::-webkit-search-cancel-button]:hidden"
+        />
+        <Button
+          size="sm"
+          mode="icon"
+          variant="ghost"
+          tooltip="Clear"
+          className={cn(
+            "size-6 rounded-sm",
+            /* Hover */
+            "data-[hovered]:opacity-100",
+            /* Disabled */
+            "data-[disabled]:pointer-events-none",
+            /* Empty */
+            "group-data-[empty]:invisible"
+          )}
+        >
+          <XIcon />
+        </Button>
+      </FieldGroup>
+    </AriaSearchField>
+  )
+}
+
+interface DebouncedSearchInputProps extends SearchInputProps {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  debounceTime?: number
+}
+
+function DebouncedSearchInput({
+  value,
+  onChange,
+  placeholder = "Search...",
+  debounceTime = 200,
+  ...props
+}: DebouncedSearchInputProps) {
+  const [internalValue, setInternalValue] = useState(value)
+
+  useDebounce(() => onChange(internalValue), debounceTime, [internalValue])
+
+  return (
+    <SearchInput
+      value={internalValue}
+      onChange={setInternalValue}
+      placeholder={placeholder}
+      {...props}
+    />
+  )
+}
+
+export { DebouncedSearchInput, Input, PasswordInput, SearchInput, TextArea }
+export type { InputProps, PasswordInputProps, SearchInputProps }

package/src/components/InputOTP.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@eggspot/ui/lib/utils"
+import { OTPInput, OTPInputContext } from "input-otp"
+import { MinusIcon } from "lucide-react"
+
+function InputOTP({
+  className,
+  containerClassName,
+  ...props
+}: React.ComponentProps<typeof OTPInput> & {
+  containerClassName?: string
+}) {
+  return (
+    <OTPInput
+      data-slot="input-otp"
+      containerClassName={cn(
+        "group flex items-center gap-2 has-disabled:opacity-50",
+        containerClassName
+      )}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-otp-group"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function InputOTPSlot({
+  index,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  index: number
+}) {
+  const inputOTPContext = React.useContext(OTPInputContext)
+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+
+  return (
+    <div
+      data-slot="input-otp-slot"
+      data-active={isActive}
+      className={cn(
+        "ring-gray-7 bg-gray-2 relative flex size-9 items-center justify-center rounded-md shadow-sm ring transition-all outline-none sm:size-10",
+        /* Active */
+        "data-[active=true]:ring-accent-9 data-[active=true]:z-10 data-[active=true]:ring-2",
+        className
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+        </div>
+      )}
+    </div>
+  )
+}
+
+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="input-otp-separator" role="separator" {...props}>
+      <MinusIcon />
+    </div>
+  )
+}
+
+export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot }

package/src/components/Label.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import { Tooltip, TooltipTrigger } from "@eggspot/ui/components/Tooltip"
+import { cn } from "@eggspot/ui/lib/utils"
+import { cva } from "class-variance-authority"
+import { InfoIcon } from "lucide-react"
+import {
+  Label as AriaLabel,
+  LabelProps as AriaLabelProps,
+  Focusable,
+} from "react-aria-components"
+
+import { Button } from "./Button"
+import { Popover, PopoverDialog, PopoverTrigger } from "./Popover"
+
+const labelVariants = cva([
+  "flex items-center gap-1 text-sm font-medium",
+  /* Disabled */
+  "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70",
+])
+
+interface LabelProps extends AriaLabelProps {
+  withAsterisk?: boolean
+  tooltip?: React.ReactNode
+}
+
+function Label({
+  children,
+  className,
+  withAsterisk,
+  tooltip,
+  ...props
+}: LabelProps) {
+  return (
+    <AriaLabel className={cn(labelVariants(), className)} {...props}>
+      {children}
+      {withAsterisk && <span className="text-error-9"> *</span>}
+      {tooltip && (
+        <>
+          <TooltipTrigger delay={0}>
+            <Focusable>
+              <InfoIcon className="text-gray-11 size-[14px] outline-none pointer-coarse:hidden" />
+            </Focusable>
+            <Tooltip>{tooltip}</Tooltip>
+          </TooltipTrigger>
+          <PopoverTrigger>
+            <Button
+              size="sm"
+              mode="icon"
+              variant="ghost"
+              className="-translate-x-1 pointer-fine:hidden"
+            >
+              <InfoIcon className="text-gray-11 size-[14px]! outline-none" />
+            </Button>
+            <Popover>
+              <PopoverDialog className="p-2 text-sm">{tooltip}</PopoverDialog>
+            </Popover>
+          </PopoverTrigger>
+        </>
+      )}
+    </AriaLabel>
+  )
+}
+
+export { Label, labelVariants }