@codefast/ui 0.0.65 → 0.0.67

package/src/react/form.tsx

@@ -1,218 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import {
-  Controller,
-  type ControllerProps,
-  type FieldError,
-  type FieldErrorsImpl,
-  type FieldPath,
-  type FieldValues,
-  FormProvider,
-  type Merge,
-  useFormContext,
-} from 'react-hook-form';
-import type * as LabelPrimitive from '@radix-ui/react-label';
-import { cn } from '../lib/utils';
-import { Label } from './label';
-
-/* -----------------------------------------------------------------------------
- * Context: Form
- * -------------------------------------------------------------------------- */
-
-interface FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> {
-  name: TName;
-}
-
-interface FormItemContextValue {
-  id: string;
-}
-
-const FormFieldContext = React.createContext<FormFieldContextValue | null>(null);
-
-const FormItemContext = React.createContext<FormItemContextValue | null>(null);
-
-const useFormField = (): {
-  formDescriptionId: string;
-  formItemId: string;
-  formMessageId: string;
-  id: string;
-  invalid: boolean;
-  isDirty: boolean;
-  isTouched: boolean;
-  isValidating: boolean;
-  name: string;
-  error?: FieldError | Merge<FieldError, FieldErrorsImpl> | undefined;
-} => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
-
-  if (!fieldContext || !itemContext) {
-    throw new Error('useFormField should be used within <FormField>');
-  }
-
-  const fieldState = getFieldState(fieldContext.name, formState);
-
-  const { id } = itemContext;
-
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `form-item-${id}`,
-    formDescriptionId: `form-item-description-${id}`,
-    formMessageId: `form-item-message-${id}`,
-    ...fieldState,
-  };
-};
-
-/* -----------------------------------------------------------------------------
- * Component: Form
- * -------------------------------------------------------------------------- */
-
-type FormProps = React.ComponentProps<typeof FormProvider>;
-const Form = FormProvider;
-
-/* -----------------------------------------------------------------------------
- * Component: FormField
- * -------------------------------------------------------------------------- */
-
-type FormFieldProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = ControllerProps<TFieldValues, TName>;
-
-function FormField<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({ ...props }: FormFieldProps<TFieldValues, TName>): React.JSX.Element {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
-}
-
-/* -----------------------------------------------------------------------------
- * Component: FormItem
- * -------------------------------------------------------------------------- */
-
-type FormItemElement = HTMLDivElement;
-type FormItemProps = React.HTMLAttributes<HTMLDivElement>;
-
-const FormItem = React.forwardRef<FormItemElement, FormItemProps>(({ className, ...props }, ref) => {
-  const id = React.useId();
-
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn('space-y-2', className)} {...props} />
-    </FormItemContext.Provider>
-  );
-});
-
-FormItem.displayName = 'FormItem';
-
-/* -----------------------------------------------------------------------------
- * Component: FormLabel
- * -------------------------------------------------------------------------- */
-
-type FormFieldElement = React.ElementRef<typeof LabelPrimitive.Root>;
-type FormLabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>;
-
-const FormLabel = React.forwardRef<FormFieldElement, FormLabelProps>(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
-
-  return <Label ref={ref} className={cn(error && 'text-destructive', className)} htmlFor={formItemId} {...props} />;
-});
-
-FormLabel.displayName = 'FormLabel';
-
-/* -----------------------------------------------------------------------------
- * Component: FormControl
- * -------------------------------------------------------------------------- */
-
-type FormControlElement = React.ElementRef<typeof Slot>;
-type FormControlProps = React.ComponentPropsWithoutRef<typeof Slot>;
-
-const FormControl = React.forwardRef<FormControlElement, FormControlProps>(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-
-  return (
-    <Slot
-      ref={ref}
-      aria-describedby={!error ? formDescriptionId : `${formDescriptionId} ${formMessageId}`}
-      aria-invalid={Boolean(error)}
-      id={formItemId}
-      {...props}
-    />
-  );
-});
-
-FormControl.displayName = 'FormControl';
-
-/* -----------------------------------------------------------------------------
- * Component: FormDescription
- * -------------------------------------------------------------------------- */
-
-type FormDescriptionElement = HTMLParagraphElement;
-type FormDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
-
-const FormDescription = React.forwardRef<FormDescriptionElement, FormDescriptionProps>(
-  ({ className, ...props }, ref) => {
-    const { formDescriptionId } = useFormField();
-
-    return <p ref={ref} className={cn('text-muted-foreground text-xs', className)} id={formDescriptionId} {...props} />;
-  },
-);
-
-FormDescription.displayName = 'FormDescription';
-
-/* -----------------------------------------------------------------------------
- * Component: FormMessage
- * -------------------------------------------------------------------------- */
-
-type FormMessageElement = HTMLParagraphElement;
-type FormMessageProps = React.HTMLAttributes<HTMLParagraphElement>;
-
-const FormMessage = React.forwardRef<FormMessageElement, FormMessageProps>(({ children, className, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error?.message ? String(error.message) : children;
-
-  if (!body) {
-    return null;
-  }
-
-  return (
-    <p ref={ref} className={cn('text-destructive text-xs font-medium', className)} id={formMessageId} {...props}>
-      {body}
-    </p>
-  );
-});
-
-FormMessage.displayName = 'FormMessage';
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
-  type FormProps,
-  type FormItemProps,
-  type FormLabelProps,
-  type FormControlProps,
-  type FormDescriptionProps,
-  type FormMessageProps,
-  type FormFieldProps,
-};

package/src/react/heading.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-
-/* -----------------------------------------------------------------------------
- * Component: Heading
- * -------------------------------------------------------------------------- */
-
-type HeadingElement = HTMLHeadingElement;
-
-interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
-  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  asChild?: boolean;
-}
-
-const Heading = React.forwardRef<HeadingElement, HeadingProps>(({ asChild, as: Tag = 'h1', ...props }, ref) => {
-  const Component = asChild ? Slot : Tag;
-
-  return <Component ref={ref} {...props} />;
-});
-
-Heading.displayName = 'Heading';
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export { Heading, type HeadingProps };

package/src/react/hover-card.tsx

@@ -1,73 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
-import { cn } from '../lib/utils';
-
-/* -----------------------------------------------------------------------------
- * Component: HoverCard
- * -------------------------------------------------------------------------- */
-
-type HoverCardProps = React.ComponentProps<typeof HoverCardPrimitive.Root>;
-const HoverCard = HoverCardPrimitive.Root;
-
-/* -----------------------------------------------------------------------------
- * Component: HoverCardTrigger
- * -------------------------------------------------------------------------- */
-
-type HoverCardTriggerProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Trigger>;
-const HoverCardTrigger = HoverCardPrimitive.Trigger;
-
-/* -----------------------------------------------------------------------------
- * Component: HoverCardContent
- * -------------------------------------------------------------------------- */
-
-type HoverCardContentElement = React.ElementRef<typeof HoverCardPrimitive.Content>;
-type HoverCardContentProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>;
-
-const HoverCardContent = React.forwardRef<HoverCardContentElement, HoverCardContentProps>(
-  ({ className, align = 'center', sideOffset = 6, ...props }, ref) => (
-    <HoverCardPrimitive.Portal>
-      <HoverCardPrimitive.Content
-        ref={ref}
-        align={align}
-        className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:data-[side=top]:slide-in-from-bottom-2 data-[state=open]:data-[side=left]:slide-in-from-right-2 data-[state=open]:data-[side=bottom]:slide-in-from-top-2 data-[state=open]:data-[side=right]:slide-in-from-left-2 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:data-[side=top]:slide-out-to-bottom-2 data-[state=closed]:data-[side=left]:slide-out-to-right-2 data-[state=closed]:data-[side=bottom]:slide-out-to-top-2 data-[state=closed]:data-[side=right]:slide-out-to-left-2 z-50 min-w-32 rounded-md border p-4 shadow-md',
-          className,
-        )}
-        sideOffset={sideOffset}
-        {...props}
-      />
-    </HoverCardPrimitive.Portal>
-  ),
-);
-
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
-
-/* -----------------------------------------------------------------------------
- * Component: HoverCardArrow
- * -------------------------------------------------------------------------- */
-
-type HoverCardArrowElement = React.ElementRef<typeof HoverCardPrimitive.Arrow>;
-type HoverCardArrowProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Arrow>;
-
-const HoverCardArrow = React.forwardRef<HoverCardArrowElement, HoverCardArrowProps>(({ className, ...props }, ref) => (
-  <HoverCardPrimitive.Arrow ref={ref} className={cn('fill-popover', className)} {...props} />
-));
-
-HoverCardArrow.displayName = HoverCardPrimitive.Arrow.displayName;
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export {
-  HoverCard,
-  HoverCardTrigger,
-  HoverCardContent,
-  HoverCardArrow,
-  type HoverCardProps,
-  type HoverCardTriggerProps,
-  type HoverCardContentProps,
-  type HoverCardArrowProps,
-};

package/src/react/input-otp.tsx

@@ -1,114 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { DotFilledIcon } from '@radix-ui/react-icons';
-import {
-  OTPInput,
-  OTPInputContext,
-  REGEXP_ONLY_CHARS,
-  REGEXP_ONLY_DIGITS,
-  REGEXP_ONLY_DIGITS_AND_CHARS,
-} from 'input-otp';
-import { cn } from '../lib/utils';
-
-/* -----------------------------------------------------------------------------
- * Component: InputOtp
- * -------------------------------------------------------------------------- */
-
-type InputOTPElement = React.ElementRef<typeof OTPInput>;
-type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput>;
-
-const InputOTP = React.forwardRef<InputOTPElement, InputOTPProps>(
-  ({ className, containerClassName, ...props }, ref) => (
-    <OTPInput
-      ref={ref}
-      className={cn('disabled:cursor-not-allowed', className)}
-      containerClassName={cn('flex items-center gap-2 has-[:disabled]:opacity-50', containerClassName)}
-      {...props}
-    />
-  ),
-);
-
-InputOTP.displayName = 'InputOTP';
-
-/* -----------------------------------------------------------------------------
- * Component: InputOTPGroup
- * -------------------------------------------------------------------------- */
-
-type InputOTPGroupElement = HTMLDivElement;
-type InputOTPGroupProps = React.HTMLAttributes<HTMLDivElement>;
-
-const InputOTPGroup = React.forwardRef<InputOTPGroupElement, InputOTPGroupProps>(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn('flex items-center', className)} {...props} />
-));
-
-InputOTPGroup.displayName = 'InputOTPGroup';
-
-/* -----------------------------------------------------------------------------
- * Component: InputOTPSlot
- * -------------------------------------------------------------------------- */
-
-type InputOTPSlotElement = HTMLDivElement;
-
-interface InputOTPSlotProps extends React.HTMLAttributes<HTMLDivElement> {
-  index: number;
-}
-
-const InputOTPSlot = React.forwardRef<InputOTPSlotElement, InputOTPSlotProps>(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext);
-  const slot = inputOTPContext.slots[index];
-
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        'border-input relative flex size-10 items-center justify-center border-y border-r text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md',
-        slot?.isActive && 'z-10 outline outline-2',
-        className,
-      )}
-      {...props}
-    >
-      {slot?.char}
-      {slot?.hasFakeCaret ? (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground animate-duration-1000 h-4 w-px" />
-        </div>
-      ) : null}
-    </div>
-  );
-});
-
-InputOTPSlot.displayName = 'InputOTPSlot';
-
-/* -----------------------------------------------------------------------------
- * Component: InputOTPSeparator
- * -------------------------------------------------------------------------- */
-
-type InputOTPSeparatorElement = HTMLDivElement;
-type InputOTPSeparatorProps = React.HTMLAttributes<HTMLDivElement>;
-
-const InputOTPSeparator = React.forwardRef<InputOTPSeparatorElement, InputOTPSeparatorProps>(({ ...props }, ref) => (
-  <div ref={ref} role="separator" {...props}>
-    <DotFilledIcon />
-  </div>
-));
-
-InputOTPSeparator.displayName = 'InputOTPSeparator';
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot,
-  InputOTPSeparator,
-  type InputOTPProps,
-  type InputOTPGroupProps,
-  type InputOTPSlotProps,
-  type InputOTPSeparatorProps,
-  REGEXP_ONLY_DIGITS_AND_CHARS,
-  REGEXP_ONLY_CHARS,
-  REGEXP_ONLY_DIGITS,
-};

package/src/react/input.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react';
-import { tv, type VariantProps } from 'tailwind-variants';
-
-/* -----------------------------------------------------------------------------
- * Variant: Input
- * -------------------------------------------------------------------------- */
-
-const inputVariants = tv({
-  base: 'border-input placeholder:text-muted-foreground flex w-full rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm transition file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-  variants: {
-    inputSize: {
-      default: 'h-10',
-      xs: 'h-8',
-      sm: 'h-9',
-      lg: 'h-11',
-    },
-  },
-  defaultVariants: {
-    inputSize: 'default',
-  },
-});
-
-type InputVariantsProps = VariantProps<typeof inputVariants>;
-
-/* -----------------------------------------------------------------------------
- * Component: Input
- * -------------------------------------------------------------------------- */
-
-type InputElement = HTMLInputElement;
-type InputProps = React.InputHTMLAttributes<HTMLInputElement> & InputVariantsProps;
-
-const Input = React.forwardRef<InputElement, InputProps>(({ className, inputSize, ...props }, ref) => {
-  return <input ref={ref} className={inputVariants({ className, inputSize })} type="text" {...props} />;
-});
-
-Input.displayName = 'Input';
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export { Input, type InputProps };

package/src/react/kbd.tsx

@@ -1,36 +0,0 @@
-import * as React from 'react';
-import { Slot } from '@radix-ui/react-slot';
-import { cn } from '../lib/utils';
-
-/* -----------------------------------------------------------------------------
- * Component: Kbd
- * -------------------------------------------------------------------------- */
-
-type KbdElement = HTMLElement;
-
-interface KbdProps extends React.HTMLAttributes<HTMLElement> {
-  asChild?: boolean;
-}
-
-const Kbd = React.forwardRef<KbdElement, KbdProps>(({ asChild, className, ...props }, ref) => {
-  const Component = asChild ? Slot : 'kbd';
-
-  return (
-    <Component
-      ref={ref}
-      className={cn(
-        'bg-muted text-muted-foreground inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-xs font-medium',
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-
-Kbd.displayName = 'Kbd';
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export { Kbd, type KbdProps };

package/src/react/label.tsx

@@ -1,31 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { cn } from '../lib/utils';
-
-/* -----------------------------------------------------------------------------
- * Component: Label
- * -------------------------------------------------------------------------- */
-
-type LabelElement = React.ElementRef<typeof LabelPrimitive.Root>;
-type LabelProps = React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>;
-
-const Label = React.forwardRef<LabelElement, LabelProps>(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(
-      'text-sm font-medium leading-none peer-disabled:pointer-events-none peer-disabled:opacity-70',
-      className,
-    )}
-    {...props}
-  />
-));
-
-Label.displayName = LabelPrimitive.Root.displayName;
-
-/* -----------------------------------------------------------------------------
- * Exports
- * -------------------------------------------------------------------------- */
-
-export { Label, type LabelProps };