@baishuyun/ai-design 1.0.3 → 1.0.5

package/src/components/ui/calendar.tsx

@@ -0,0 +1,57 @@
+import {
+  DayPicker,
+  type DayPickerProps,
+} from 'react-day-picker';
+import 'react-day-picker/style.css';
+
+import { cn } from '../../lib/utils';
+
+export type CalendarProps = DayPickerProps;
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn('p-2', className)}
+      classNames={{
+        months: 'flex flex-col gap-2',
+        month: 'flex flex-col gap-2',
+        caption: 'flex justify-center pt-1 relative items-center w-full',
+        caption_label: 'text-[12px] font-medium text-[#121111]',
+        nav: 'flex items-center gap-1',
+        button_previous:
+          'absolute left-1 h-5 w-5 flex items-center justify-center rounded-[2px] hover:bg-[#EFF0F6] text-[#666666]',
+        button_next:
+          'absolute right-1 h-5 w-5 flex items-center justify-center rounded-[2px] hover:bg-[#EFF0F6] text-[#666666]',
+        month_grid: 'w-full border-collapse',
+        weekdays: 'flex',
+        weekday:
+          'flex-1 h-7 flex items-center justify-center text-[12px] text-[#999999] font-normal',
+        week: 'flex w-full mt-0.5',
+        day: 'flex-1 h-7 flex items-center justify-center text-[12px] text-[#121111] rounded-[2px] hover:bg-[#EFF0F6] cursor-pointer aria-selected:opacity-100',
+        day_button: 'w-full h-full flex items-center justify-center',
+        range_start:
+          'bg-[#0265FF] text-white rounded-r-none hover:bg-[#0265FF]',
+        range_end:
+          'bg-[#0265FF] text-white rounded-l-none hover:bg-[#0265FF]',
+        range_middle:
+          'bg-[#F0F6FF] text-[#0265FF] rounded-none hover:bg-[#E6EEFF]',
+        selected: 'bg-[#0265FF] text-white hover:bg-[#0265FF]',
+        today: 'text-[#0265FF] font-bold',
+        outside:
+          'text-[#CCCCCC] aria-selected:text-[#CCCCCC]',
+        disabled: 'text-[#CCCCCC] opacity-50',
+        hidden: 'invisible',
+        ...classNames,
+      }}
+      {...props}
+    />
+  );
+}
+
+export { Calendar };

package/src/components/ui/drawer.tsx

@@ -0,0 +1,276 @@
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "../../lib/utils"
+import { IconBtn } from "../icon-btn"
+import { CloseIcon } from "../bs-icons"
+
+function Drawer({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+}
+
+function DrawerTrigger({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
+}
+
+function DrawerPortal({
+  container,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal> & {
+  container?: HTMLElement | null;
+}) {
+  return (
+    <DrawerPrimitive.Portal
+      data-slot="drawer-portal"
+      container={container ?? undefined}
+      {...props}
+    />
+  )
+}
+
+function DrawerClose({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
+}
+
+function DrawerOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/30 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerContent({
+  className,
+  children,
+  container: containerProp,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Content> & {
+  container?: HTMLElement | null;
+}) {
+  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-drawer-portal]');
+      if (existing) {
+        setAutoContainer(existing);
+        return;
+      }
+
+      // vaul injects its CSS (keyframes, transitions) into document.head at module load.
+      // Clone it into the ShadowRoot so animations work when portaled inside Shadow DOM.
+      if (!rootNode.querySelector('style[data-bs-vaul-style]')) {
+        const vaulStyle = Array.from(document.head.querySelectorAll('style')).find(
+          (el) => el.textContent?.includes('[data-vaul-drawer]')
+        );
+        if (vaulStyle) {
+          const cloned = vaulStyle.cloneNode(true) as HTMLStyleElement;
+          cloned.setAttribute('data-bs-vaul-style', '');
+          rootNode.appendChild(cloned);
+        }
+      }
+
+      const container = document.createElement('div');
+      container.setAttribute('data-bs-drawer-portal', 'true');
+      rootNode.appendChild(container);
+      setAutoContainer(container);
+    }
+  }, []);
+
+  const effectiveContainer = containerProp !== undefined ? containerProp : autoContainer;
+
+  return (
+    <>
+      {containerProp === undefined && (
+        <span ref={setDetectorRef} style={{ display: 'none' }} aria-hidden />
+      )}
+      <DrawerPortal container={effectiveContainer ?? undefined}>
+        <DrawerOverlay />
+        <DrawerPrimitive.Content
+          data-slot="drawer-content"
+          className={cn(
+            "group/drawer-content fixed z-50 flex h-auto flex-col bg-white shadow-xl",
+            "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg",
+            "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[calc(100vh-52px)] data-[vaul-drawer-direction=bottom]:rounded-t-[10px]",
+            "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:sm:max-w-sm",
+            "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:sm:max-w-sm",
+            "rounded-0!",
+            className
+          )}
+          {...props}
+          style={{
+            ...(props.style || {}),
+            borderRadius: 0,
+          }}
+        >
+          {children}
+        </DrawerPrimitive.Content>
+      </DrawerPortal>
+    </>
+  )
+}
+
+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(
+        "flex items-center justify-center relative h-[50px] shrink-0 border-b border-[#E0E0E0]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerBody({ className, children, style, ...props }: React.ComponentProps<"div"> & {
+  full?: boolean;
+}) {
+  const bodyRef = React.useRef<HTMLDivElement>(null);
+  const contentRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    const el = bodyRef.current;
+    if (!el) return;
+
+    const handleWheel = (e: WheelEvent) => {
+      const { scrollTop, scrollHeight, clientHeight } = el;
+      const atTop = scrollTop <= 0;
+      const atBottom = scrollTop + clientHeight >= scrollHeight - 1;
+
+      if ((e.deltaY > 0 && !atBottom) || (e.deltaY < 0 && !atTop)) {
+        e.stopPropagation();
+      }
+    };
+
+    el.addEventListener("wheel", handleWheel);
+    return () => el.removeEventListener("wheel", handleWheel);
+  }, []);
+
+  React.useEffect(() => {
+    const content = contentRef.current;
+    const body = bodyRef.current;
+    if (!content || !body) return;
+
+    const observer = new ResizeObserver(() => {
+      body.scrollTo({ top: body.scrollHeight, behavior: "smooth" });
+    });
+
+    observer.observe(content);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div
+      ref={bodyRef}
+      data-slot="drawer-body"
+      className={cn("flex-1 overflow-y-auto bg-[#F5F7FA]", className)}
+      style={{ scrollbarGutter: "stable", ...style }}
+      {...props}
+    >
+      <div
+        ref={contentRef}
+        className={cn("content-wrapper w-[1120px] bg-white mx-auto p-5 rounded-lg my-5", {
+          "w-[calc(100%-40px)]": props.full,
+          "h-[calc(100%-40px)]": props.full,
+          'mx-5': props.full,
+          "w-[1120px]": !props.full,
+        })}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn(
+        "flex items-center justify-center gap-4 h-[52px] shrink-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DrawerTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn("text-[18px] font-semibold text-black", className)}
+      {...props}
+    />
+  )
+}
+
+function DrawerDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+const DrawerCloseButton = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Close>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Close>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Close
+    ref={ref}
+    className={cn(
+      "absolute right-3 top-1/2 -translate-y-1/2 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+      className
+    )}
+    {...props}
+  >
+    {/* <X className="h-4 w-4" /> */}
+    <IconBtn
+      icon={ <CloseIcon />}
+    />
+    <span className="sr-only">Close</span>
+  </DrawerPrimitive.Close>
+))
+DrawerCloseButton.displayName = "DrawerCloseButton"
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerBody,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerCloseButton,
+}

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;