@baishuyun/ai-design 1.0.2 → 1.0.4

package/src/components/ui/form.tsx

@@ -0,0 +1,202 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import {
+  Controller,
+  type ControllerProps,
+  type ControllerRenderProps,
+  type FieldPath,
+  type FieldValues,
+  type UseFormReturn,
+  FormProvider,
+  useForm,
+  useFormContext,
+} from 'react-hook-form';
+
+import { cn } from '../../lib/utils';
+import { Label } from './label';
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+);
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+);
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  if (!fieldContext) {
+    throw new Error('useFormField must be used within <FormField>');
+  }
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+const Form = React.forwardRef<
+  HTMLFormElement,
+  React.FormHTMLAttributes<HTMLFormElement> & {
+    formMethods: UseFormReturn<any>;
+  }
+>(({ className, formMethods, children, ...props }, ref) => (
+  <form ref={ref} className={cn(className)} {...props}>
+    <FormProvider {...formMethods}>{children}</FormProvider>
+  </form>
+));
+Form.displayName = 'Form';
+
+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 FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        ref={ref}
+        className={cn('flex flex-col gap-[6px]', className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  );
+});
+FormItem.displayName = 'FormItem';
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof Label>,
+  React.ComponentPropsWithoutRef<typeof Label>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && 'text-[#ff5631]', 'peer', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = 'FormLabel';
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-invalid={!!error}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      {...props}
+    />
+  );
+});
+FormControl.displayName = 'FormControl';
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn(
+        'text-[12px] text-[#999999] leading-normal dark:text-muted-foreground',
+        className
+      )}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = 'FormDescription';
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn(
+        'text-[12px] text-[#ff5631] leading-normal',
+        className
+      )}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = 'FormMessage';
+
+export {
+  useFormField,
+  useForm,
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  type UseFormReturn,
+  type ControllerRenderProps,
+};

package/src/components/ui/input.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+const Input = React.forwardRef<
+  HTMLInputElement,
+  React.InputHTMLAttributes<HTMLInputElement>
+>(({ className, type, ...props }, ref) => (
+  <input
+    type={type}
+    className={cn(
+      'h-[34px] px-[10px] py-[7px] rounded-[4px]',
+      'bg-white border border-[#e0e0e0]',
+      'text-[14px] text-[#030303] placeholder:text-[#999999]',
+      'focus:outline-none focus:border-[#0265ff] focus:ring-0',
+      'disabled:bg-[#eff0f6] disabled:cursor-not-allowed disabled:opacity-100',
+      'dark:bg-background dark:border-border dark:text-foreground dark:placeholder:text-muted-foreground',
+      'dark:disabled:bg-[oklch(0.279_0.041_260.031)]',
+      'w-full',
+      className
+    )}
+    ref={ref}
+    {...props}
+  />
+));
+Input.displayName = 'Input';
+
+export { Input };

package/src/components/ui/label.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+import { cn } from '../../lib/utils';
+
+interface LabelProps
+  extends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
+  required?: boolean;
+}
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  LabelProps
+>(({ className, children, required, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(
+      'text-[14px] font-bold text-[#030303] leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-foreground',
+      className
+    )}
+    {...props}
+  >
+    {required && <span className="text-[#ff5631]">*</span>}
+    {children}
+  </LabelPrimitive.Root>
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
+export type { LabelProps };

package/src/components/ui/popover.tsx

@@ -20,30 +20,58 @@ const PopoverContent = React.forwardRef<
   PopoverContentProps
 >(
   (
-    { className, align = 'start', sideOffset = 4, portalContainer, ...props },
+    { className, align = 'start', sideOffset = 4, portalContainer, style, onWheel, ...props },
     ref
-  ) => (
-    <PopoverPrimitive.Portal container={portalContainer ?? undefined}>
-      <PopoverPrimitive.Content
-        ref={ref}
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          'z-50 w-60 rounded-[4px] border bg-white p-1 text-[#121111] shadow-[0_0_16px_rgba(0,0,0,0.1)] outline-none',
-          'data-[state=open]:animate-in data-[state=closed]:animate-out',
-          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
-          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
-          'data-[side=bottom]:slide-in-from-top-2',
-          'data-[side=left]:slide-in-from-right-2',
-          'data-[side=right]:slide-in-from-left-2',
-          'data-[side=top]:slide-in-from-bottom-2',
-          'origin-[--radix-popover-content-transform-origin]',
-          className
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  )
+  ) => {
+    const handleWheel = portalContainer
+      ? (e: React.WheelEvent<HTMLDivElement>) => {
+          let el: HTMLElement | null = e.target as HTMLElement;
+          while (el && el !== e.currentTarget) {
+            const { overflowY } = window.getComputedStyle(el);
+            if (overflowY === 'auto' || overflowY === 'scroll') {
+              if (el.scrollHeight > el.clientHeight) {
+                const atTop = el.scrollTop <= 0;
+                const atBottom = el.scrollTop + el.clientHeight >= el.scrollHeight;
+                if ((e.deltaY < 0 && !atTop) || (e.deltaY > 0 && !atBottom)) {
+                  e.preventDefault();
+                  el.scrollTop += e.deltaY;
+                }
+                return;
+              }
+            }
+            el = el.parentElement;
+          }
+          onWheel?.(e);
+        }
+      : onWheel;
+
+    return (
+      <PopoverPrimitive.Portal container={portalContainer ?? undefined}>
+        <PopoverPrimitive.Content
+          ref={ref}
+          align={align}
+          sideOffset={sideOffset}
+          onWheel={handleWheel}
+          className={cn(
+            'z-50 w-60 rounded-[8px] bg-white p-1 text-[#121111] shadow-[0px_6px_16px_rgba(0,0,0,0.06)] outline-none',
+            'data-[state=open]:animate-in data-[state=closed]:animate-out',
+            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+            'data-[side=bottom]:slide-in-from-top-2',
+            'data-[side=left]:slide-in-from-right-2',
+            'data-[side=right]:slide-in-from-left-2',
+            'data-[side=top]:slide-in-from-bottom-2',
+            className
+          )}
+          style={{
+            transformOrigin: 'var(--radix-popover-content-transform-origin)',
+            ...style,
+          }}
+          {...props}
+        />
+      </PopoverPrimitive.Portal>
+    );
+  }
 );
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 

package/src/components/ui/select.tsx

@@ -0,0 +1,236 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'flex items-center justify-between gap-2',
+      '[&>span]:truncate [&>span]:min-w-0',
+      'h-[34px] px-[10px] py-[7px] rounded-[4px]',
+      'bg-white border border-[#e0e0e0]',
+      'text-[14px] text-[#030303]',
+      'data-[placeholder]:text-[#999999]',
+      'focus:outline-none focus:border-[#0265ff] focus:ring-0',
+      'disabled:bg-[#eff0f6] disabled:cursor-not-allowed',
+      'dark:bg-background dark:border-border dark:text-foreground',
+      'dark:data-[placeholder]:text-muted-foreground',
+      'dark:disabled:bg-[oklch(0.279_0.041_260.031)]',
+      'w-full',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 shrink-0 opacity-50 transition-transform data-[state=open]:rotate-180" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      'flex items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      'flex items-center justify-center py-1',
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
+    container?: HTMLElement | null;
+  }
+>(
+  (
+    { className, children, position = 'popper', container: containerProp, style, ...props },
+    ref
+  ) => {
+    const [autoContainer, setAutoContainer] = React.useState<HTMLElement | null>(null);
+
+    const setDetectorRef = React.useCallback((node: HTMLElement | null) => {
+      if (!node) return;
+      const rootNode = node.getRootNode();
+      if (rootNode instanceof ShadowRoot) {
+        const existing = rootNode.querySelector<HTMLElement>('[data-bs-select-portal]');
+        if (existing) {
+          setAutoContainer(existing);
+          return;
+        }
+
+        const container = document.createElement('div');
+        container.setAttribute('data-bs-select-portal', 'true');
+        rootNode.appendChild(container);
+        setAutoContainer(container);
+      }
+    }, []);
+
+    const effectiveContainer = containerProp !== undefined ? containerProp : autoContainer;
+
+    return (
+      <>
+        {containerProp === undefined && (
+          <span ref={setDetectorRef} style={{ display: 'none' }} aria-hidden />
+        )}
+        <SelectPrimitive.Portal container={effectiveContainer ?? undefined}>
+          <SelectPrimitive.Content
+            ref={ref}
+            className={cn(
+              'z-50 bg-white rounded-[4px] p-[4px]',
+              'shadow-[0_0_8px_rgba(0,0,0,0.1)]',
+              'data-[state=open]:animate-in data-[state=closed]:animate-out',
+              'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+              'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+              'data-[side=bottom]:slide-in-from-top-2',
+              'data-[side=left]:slide-in-from-right-2',
+              'data-[side=right]:slide-in-from-left-2',
+              'data-[side=top]:slide-in-from-bottom-2',
+              'dark:bg-background dark:border-border',
+              position === 'popper' &&
+                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+              className
+            )}
+            position={position}
+            style={{
+              boxSizing: 'border-box',
+              maxHeight: 'var(--radix-select-content-available-height)',
+              minWidth:
+                position === 'popper'
+                  ? 'var(--radix-select-trigger-width)'
+                  : '120px',
+              ...style,
+            }}
+            {...props}
+          >
+            <SelectScrollUpButton />
+            <SelectPrimitive.Viewport
+              className={cn(
+                'p-1',
+                position === 'popper' && 'w-full'
+              )}
+              style={
+                position === 'popper'
+                  ? {
+                      height: 'var(--radix-select-trigger-height)',
+                      minWidth: 'var(--radix-select-trigger-width)',
+                    }
+                  : undefined
+              }
+            >
+              {children}
+            </SelectPrimitive.Viewport>
+            <SelectScrollDownButton />
+          </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+      </>
+    );
+  }
+);
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn(
+      'px-[10px] py-[6px] text-[14px] font-bold text-[#030303] dark:text-foreground',
+      className
+    )}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      'relative flex items-center gap-2 px-[10px] py-[7px]',
+      'text-[14px] text-[#030303]',
+      'cursor-pointer select-none rounded-[4px]',
+      'data-[highlighted]:bg-[#eff0f6] data-[highlighted]:outline-none',
+      'data-[state=checked]:bg-[#f0f6ff] data-[state=checked]:text-[#0265ff]',
+      'dark:text-foreground dark:data-[highlighted]:bg-accent dark:data-[state=checked]:bg-accent',
+      className
+    )}
+    {...props}
+  >
+    {/* <span className="absolute left-[10px] flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span> */}
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn('h-px bg-[#e0e0e0] my-1 dark:bg-border', className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};

package/src/components/ui/switch.tsx

@@ -0,0 +1,33 @@
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch inline-flex shrink-0 items-center rounded-full transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-[#4ACC8C]/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[20px] data-[size=default]:w-[40px] data-[size=sm]:h-[14px] data-[size=sm]:w-[28px] data-[state=checked]:bg-[#4ACC8C] data-[state=unchecked]:bg-[#ccc]",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "pointer-events-none block rounded-full bg-white transition-transform group-data-[size=default]/switch:size-[16px] group-data-[size=sm]/switch:size-[10px] data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-[2px]"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/components/ui/tabs.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+import { cn } from '../../lib/utils';
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      'inline-flex items-center w-full gap-[2px] p-[2px] bg-[#EFF0F6] rounded-[4px]',
+      className
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      'inline-flex items-center justify-center w-full h-[30px]',
+      'px-[10px] py-[7px] rounded-[4px]',
+      'text-[14px] text-[#121111] leading-normal',
+      'bg-transparent border border-solid border-[#EFF0F6]',
+      'transition-all duration-200 ease-out',
+      'outline-none cursor-pointer',
+      'hover:text-[#121111] hover:border-[#E0E0E0] hover:bg-white',
+      'data-[state=active]:text-[#0265FF] data-[state=active]:border-[#E0E0E0] data-[state=active]:bg-white',
+      'focus-visible:ring-2 focus-visible:ring-[#0265FF] focus-visible:ring-offset-1',
+      className
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 outline-none',
+      'data-[state=inactive]:hidden',
+      className
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };