@eggspot/ui 0.0.2 → 0.0.3

package/src/components/Form.tsx

@@ -1,195 +0,0 @@
-"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

@@ -1,41 +0,0 @@
-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

@@ -1,221 +0,0 @@
-"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

@@ -1,78 +0,0 @@
-"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

@@ -1,65 +0,0 @@
-"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 }