@baishuyun/ai-design 2.0.38 → 2.1.0-alpha.0

package/src/components/ui/select.tsx

@@ -1,236 +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,
-};
+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/spinner.tsx

@@ -1,17 +1,17 @@
-import { Loader2Icon } from "lucide-react";
-
-import { cn } from "../../lib/utils";
-
-function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
-  return (
-    // @ts-ignore
-    <Loader2Icon
-      role="status"
-      aria-label="Loading"
-      className={cn("size-4 animate-spin", className)}
-      {...props}
-    />
-  );
-}
-
-export { Spinner };
+import { Loader2Icon } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    // @ts-ignore
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  );
+}
+
+export { Spinner };

package/src/components/ui/switch.tsx

@@ -1,33 +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 }
+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 }