@codefast/ui 0.3.16-canary.2 → 0.4.0-canary.4

package/src/components/form.tsx

@@ -0,0 +1,258 @@
+import type { Label as LabelPrimitive } from "radix-ui";
+import { Slot } from "radix-ui";
+import { Context } from "radix-ui/internal";
+import type { ComponentProps, JSX, ReactNode } from "react";
+import { useId } from "react";
+import type { ControllerProps, FieldError, FieldPath, FieldValues } from "react-hook-form";
+import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
+
+import { Label } from "#/components/label";
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Form
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FormProps = ComponentProps<typeof FormProvider>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+const Form: typeof FormProvider = FormProvider;
+
+/* -----------------------------------------------------------------------------
+ * Context: FormField
+ * -------------------------------------------------------------------------- */
+
+const FORM_FIELD_NAME = "FormField";
+
+type ScopedProps<P> = P & { __scopeFormField?: Context.Scope };
+
+const [createFormFieldContext, createFormFieldScope] = Context.createContextScope(FORM_FIELD_NAME);
+
+interface FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> {
+  name: TName;
+}
+
+const [FormFieldContextProvider, useFormFieldContext] = createFormFieldContext<FormFieldContextValue>(FORM_FIELD_NAME);
+
+function useFormItem(
+  consumerName: string,
+  scope: Context.Scope,
+): {
+  formDescriptionId: string;
+  formItemId: string;
+  formMessageId: string;
+  id: string;
+  invalid: boolean;
+  isDirty: boolean;
+  isTouched: boolean;
+  isValidating: boolean;
+  name: string;
+  error?: FieldError;
+} {
+  const { id } = useFormItemContext(consumerName, scope);
+  const { name } = useFormFieldContext(consumerName, scope);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name });
+  const fieldState = getFieldState(name, formState);
+
+  return {
+    formDescriptionId: `form-item-description-${id}`,
+    formItemId: `form-item-${id}`,
+    formMessageId: `form-item-message-${id}`,
+    id,
+    name,
+    ...fieldState,
+  };
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: FormField
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FormFieldProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = ControllerProps<TFieldValues, TName>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function FormField<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(formFieldProps: ScopedProps<FormFieldProps<TFieldValues, TName>>): JSX.Element {
+  const { __scopeFormField, ...props } = formFieldProps;
+
+  return (
+    <FormFieldContextProvider name={props.name} scope={__scopeFormField}>
+      <Controller {...props} />
+    </FormFieldContextProvider>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Context: FormItem
+ * -------------------------------------------------------------------------- */
+
+const FORM_ITEM_NAME = "FormItem";
+
+interface FormItemContextValue {
+  id: string;
+}
+
+const [FormItemContextProvider, useFormItemContext] = createFormFieldContext<FormItemContextValue>(FORM_ITEM_NAME);
+
+/* -----------------------------------------------------------------------------
+ * Component: FormItem
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FormItemProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function FormItem({ __scopeFormField, className, ...props }: ScopedProps<FormItemProps>): JSX.Element {
+  const id = useId();
+
+  return (
+    <FormItemContextProvider id={id} scope={__scopeFormField}>
+      <div className={cn("grid gap-2", className)} data-slot="form-item" {...props} />
+    </FormItemContextProvider>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: FormLabel
+ * -------------------------------------------------------------------------- */
+
+const FORM_LABEL_NAME = "FormLabel";
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FormLabelProps = ComponentProps<typeof LabelPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function FormLabel({ __scopeFormField, ...props }: ScopedProps<FormLabelProps>): JSX.Element {
+  const { error, formItemId } = useFormItem(FORM_LABEL_NAME, __scopeFormField);
+
+  return <Label data-invalid={error ? true : undefined} data-slot="form-label" htmlFor={formItemId} {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: FormControl
+ * -------------------------------------------------------------------------- */
+
+const FORM_CONTROL_NAME = "FormControl";
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FormControlProps = ComponentProps<typeof Slot.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function FormControl({ __scopeFormField, ...props }: ScopedProps<FormControlProps>): JSX.Element {
+  const { error, formDescriptionId, formItemId, formMessageId } = useFormItem(FORM_CONTROL_NAME, __scopeFormField);
+
+  return (
+    <Slot.Root
+      aria-describedby={error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId}
+      aria-invalid={Boolean(error)}
+      data-slot="form-control"
+      id={formItemId}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: FormDescription
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FormDescriptionProps = ComponentProps<"p">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function FormDescription({ __scopeFormField, className, ...props }: ScopedProps<FormDescriptionProps>): JSX.Element {
+  const { formDescriptionId } = useFormItem(FORM_MESSAGE_NAME, __scopeFormField);
+
+  return (
+    <p
+      className={cn("text-xs text-muted-foreground", className)}
+      data-slot="form-description"
+      id={formDescriptionId}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: FormMessage
+ * -------------------------------------------------------------------------- */
+
+const FORM_MESSAGE_NAME = "FormMessage";
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type FormMessageProps = ComponentProps<"p">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function FormMessage({ __scopeFormField, children, className, ...props }: ScopedProps<FormMessageProps>): ReactNode {
+  const { error, formMessageId } = useFormItem(FORM_MESSAGE_NAME, __scopeFormField);
+  const body = error?.message ?? children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      className={cn("text-xs", error?.message ? "font-medium text-destructive" : "text-muted-foreground", className)}
+      data-slot="form-message"
+      id={formMessageId}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export type {
+  FormControlProps,
+  FormDescriptionProps,
+  FormFieldProps,
+  FormItemProps,
+  FormLabelProps,
+  FormMessageProps,
+  FormProps,
+};
+export { createFormFieldScope, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage };

package/src/components/hover-card.tsx

@@ -0,0 +1,93 @@
+import { HoverCard as HoverCardPrimitive } from "radix-ui";
+import type { ComponentProps, JSX } from "react";
+
+import { cn } from "#/lib/utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: HoverCard
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type HoverCardProps = ComponentProps<typeof HoverCardPrimitive.Root>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function HoverCard({ ...props }: HoverCardProps): JSX.Element {
+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: HoverCardTrigger
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type HoverCardTriggerProps = ComponentProps<typeof HoverCardPrimitive.Trigger>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function HoverCardTrigger({ ...props }: HoverCardTriggerProps): JSX.Element {
+  return <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: HoverCardContent
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type HoverCardContentProps = ComponentProps<typeof HoverCardPrimitive.Content>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function HoverCardContent({
+  align = "center",
+  className,
+  sideOffset = 4,
+  ...props
+}: HoverCardContentProps): JSX.Element {
+  return (
+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
+      <HoverCardPrimitive.Content
+        align={align}
+        className={cn(
+          "z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-4 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden ease-snappy data-open:animate-in data-open:animation-duration-popup-in data-open:fade-in-0 data-open:zoom-in-95 data-open:data-side-top:slide-in-from-bottom-2 data-open:data-side-right:slide-in-from-left-2 data-open:data-side-bottom:slide-in-from-top-2 data-open:data-side-left:slide-in-from-right-2 data-closed:animate-out data-closed:ease-exit data-closed:animation-duration-popup-out data-closed:fade-out-0 data-closed:zoom-out-95 data-closed:data-side-top:slide-out-to-bottom-2 data-closed:data-side-right:slide-out-to-left-2 data-closed:data-side-bottom:slide-out-to-top-2 data-closed:data-side-left:slide-out-to-right-2",
+          className,
+        )}
+        data-slot="hover-card-content"
+        sideOffset={sideOffset}
+        {...props}
+      />
+    </HoverCardPrimitive.Portal>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: HoverCardArrow
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type HoverCardArrowProps = ComponentProps<typeof HoverCardPrimitive.Arrow>;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function HoverCardArrow({ className, ...props }: HoverCardArrowProps): JSX.Element {
+  return <HoverCardPrimitive.Arrow className={cn("fill-popover", className)} data-slot="hover-card-arrow" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { HoverCard, HoverCardArrow, HoverCardContent, HoverCardTrigger };
+export type { HoverCardArrowProps, HoverCardContentProps, HoverCardProps, HoverCardTriggerProps };

package/src/components/input-group.tsx

@@ -0,0 +1,185 @@
+import type { ComponentProps, JSX } from "react";
+
+import type { ButtonProps } from "#/components/button";
+import { Button } from "#/components/button";
+import type { InputProps } from "#/components/input";
+import { Input } from "#/components/input";
+import type { TextareaProps } from "#/components/textarea";
+import { Textarea } from "#/components/textarea";
+import { cn } from "#/lib/utils";
+import type { InputGroupAddonVariants, InputGroupButtonVariants } from "#/variants/input-group";
+import { inputGroupAddonVariants, inputGroupButtonVariants, inputGroupVariants } from "#/variants/input-group";
+
+/* -----------------------------------------------------------------------------
+ * Component: InputGroup
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type InputGroupProps = ComponentProps<"div">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function InputGroup({ className, ...props }: InputGroupProps): JSX.Element {
+  return <div className={inputGroupVariants({ className })} data-slot="input-group" role="group" {...props} />;
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: InputGroupAddon
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type InputGroupAddonProps = ComponentProps<"div"> & InputGroupAddonVariants;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function InputGroupAddon({ align = "inline-start", className, ...props }: InputGroupAddonProps): JSX.Element {
+  return (
+    <div
+      className={inputGroupAddonVariants({ align, className })}
+      data-align={align}
+      data-slot="input-group-addon"
+      role="group"
+      onPointerDown={(event) => {
+        if ((event.target as HTMLElement).closest("button")) {
+          return;
+        }
+
+        event.preventDefault();
+
+        const control = event.currentTarget.parentElement?.querySelector("input, textarea");
+
+        if (control instanceof HTMLElement) {
+          control.focus();
+        }
+      }}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: InputGroupButton
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type InputGroupButtonProps = Omit<ButtonProps, "size"> & InputGroupButtonVariants;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function InputGroupButton({
+  className,
+  size = "xs",
+  type = "button",
+  variant = "ghost",
+  ...props
+}: InputGroupButtonProps): JSX.Element {
+  return (
+    <Button
+      className={inputGroupButtonVariants({ size, className })}
+      data-size={size}
+      data-slot="input-group-button"
+      type={type}
+      variant={variant}
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: InputGroupText
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type InputGroupTextProps = ComponentProps<"span">;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function InputGroupText({ className, ...props }: InputGroupTextProps): JSX.Element {
+  return (
+    <span
+      className={cn(
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      data-slot="input-group-text"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: InputGroupInput
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type InputGroupInputProps = InputProps;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function InputGroupInput({ className, ...props }: InputGroupInputProps): JSX.Element {
+  return (
+    <Input
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
+        className,
+      )}
+      data-slot="input-group-control"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Component: InputGroupTextarea
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+type InputGroupTextareaProps = TextareaProps;
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function InputGroupTextarea({ className, ...props }: InputGroupTextareaProps): JSX.Element {
+  return (
+    <Textarea
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent",
+        className,
+      )}
+      data-slot="input-group-control"
+      {...props}
+    />
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea };
+
+export type {
+  InputGroupAddonProps,
+  InputGroupButtonProps,
+  InputGroupInputProps,
+  InputGroupProps,
+  InputGroupTextareaProps,
+  InputGroupTextProps,
+};

package/src/components/input-number.tsx

@@ -0,0 +1,141 @@
+import { ChevronDownIcon, ChevronUpIcon, MinusIcon, PlusIcon } from "lucide-react";
+import type { ComponentProps, JSX } from "react";
+
+import { Spinner } from "#/components/spinner";
+import * as InputNumberPrimitive from "#/primitives/input-number";
+import { buttonVariants } from "#/variants/button";
+import type { InputNumberVariants } from "#/variants/input-number";
+import { inputNumberVariants } from "#/variants/input-number";
+
+/* -----------------------------------------------------------------------------
+ * Component: InputNumber
+ * -------------------------------------------------------------------------- */
+
+/**
+ * @since 0.3.16-canary.0
+ */
+interface InputNumberProps
+  extends
+    ComponentProps<typeof InputNumberPrimitive.Field>,
+    ComponentProps<typeof InputNumberPrimitive.Root>,
+    InputNumberVariants {}
+
+/**
+ * @since 0.3.16-canary.0
+ */
+function InputNumber({
+  ariaDecrementLabel,
+  ariaIncrementLabel,
+  className,
+  defaultValue,
+  disabled,
+  formatOptions,
+  id,
+  loaderPosition,
+  loading,
+  max,
+  min,
+  onChange,
+  prefix,
+  readOnly,
+  spinner,
+  step,
+  suffix,
+  value,
+  variant = "stepper",
+  ...props
+}: InputNumberProps): JSX.Element {
+  const isSplit = variant === "split";
+  const { decrementButton, field, incrementButton, root, stepper, stepperButton } = inputNumberVariants({ variant });
+
+  return (
+    <InputNumberPrimitive.Root
+      ariaDecrementLabel={ariaDecrementLabel}
+      ariaIncrementLabel={ariaIncrementLabel}
+      className={root({ className })}
+      data-slot="input-number"
+      data-variant={variant}
+      defaultValue={defaultValue}
+      disabled={disabled}
+      formatOptions={formatOptions}
+      id={id}
+      loaderPosition={loaderPosition}
+      loading={loading}
+      max={max}
+      min={min}
+      prefix={prefix}
+      readOnly={readOnly}
+      spinner={spinner ?? <Spinner key="spinner" />}
+      step={step}
+      suffix={suffix}
+      value={value}
+      onChange={onChange}
+    >
+      {isSplit ? (
+        <InputNumberPrimitive.DecrementButton
+          aria-label="Decrement"
+          className={buttonVariants({
+            className: decrementButton(),
+            variant: "ghost",
+          })}
+          data-slot="input-number-decrement-button"
+        >
+          <MinusIcon />
+        </InputNumberPrimitive.DecrementButton>
+      ) : null}
+
+      <InputNumberPrimitive.Field
+        autoCapitalize="none"
+        autoComplete="off"
+        autoCorrect="off"
+        className={field()}
+        spellCheck="false"
+        {...props}
+      />
+
+      {isSplit ? (
+        <InputNumberPrimitive.IncrementButton
+          aria-label="Increment"
+          className={buttonVariants({
+            className: incrementButton(),
+            variant: "ghost",
+          })}
+          data-slot="input-number-increment-button"
+        >
+          <PlusIcon />
+        </InputNumberPrimitive.IncrementButton>
+      ) : (
+        <div className={stepper()} data-slot="input-number-buttons">
+          <InputNumberPrimitive.IncrementButton
+            aria-label="Increment"
+            className={buttonVariants({
+              className: stepperButton(),
+              variant: "ghost",
+            })}
+            data-slot="input-number-increment-button"
+          >
+            <ChevronUpIcon className="size-3.5" />
+          </InputNumberPrimitive.IncrementButton>
+
+          <InputNumberPrimitive.DecrementButton
+            aria-label="Decrement"
+            className={buttonVariants({
+              className: stepperButton(),
+              variant: "ghost",
+            })}
+            data-slot="input-number-decrement-button"
+          >
+            <ChevronDownIcon className="size-3.5" />
+          </InputNumberPrimitive.DecrementButton>
+        </div>
+      )}
+    </InputNumberPrimitive.Root>
+  );
+}
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { InputNumber };
+export type { InputNumberProps };