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

package/src/components/primary-entry-btn.tsx

@@ -1,48 +1,48 @@
-import { ReactNode } from 'react';
-import { Button, ButtonProps } from './ui/button';
-import { BotIcon } from './bot-icon';
-import { cn } from '../lib/utils';
-import { transCls } from '../const/ui';
-
-export interface PrimaryEntryBtnProps extends ButtonProps {
-  minimal?: boolean;
-  entryVariant?: 'default' | 'ghost' | 'selected' | 'light';
-  icon?: ReactNode;
-}
-
-export const PrimaryEntryBtn = ({
-  children,
-  className,
-  minimal,
-  entryVariant = 'default',
-  icon,
-  ...rest
-}: PrimaryEntryBtnProps) => {
-  const variantStyles = {
-    // background: linear-gradient(180deg, #267AFF 0%, #B2EEFF 100%);
-    default:
-      "relative overflow-hidden bg-[linear-gradient(180deg,#DBE9FF_0%,#E9FFFD_100%)] h-[30px] hover:text-white before:content-[''] before:absolute before:inset-0 before:z-0 before:bg-[linear-gradient(180deg,#267AFF_0%,#B2EEFF_100%)] before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-200 before:ease-out font-[500] text-[#0265ff]",
-    ghost: 'bg-transparent text-[#030303] font-[400] px-[10px] hover:bg-[#EFF0F6] h-[34px]',
-    light: 'text-[#030303] font-[400] px-[10px] bg-[#F0F6FF] hover:bg-[#d8dde5] h-[34px]',
-    selected: 'bg-[#EFF0F6] text-[#030303] font-[400] px-[10px]',
-  };
-
-  return (
-    <Button
-      {...rest}
-      variant="entry"
-      size="entry"
-      className={cn(
-        'rounded-[4px] cursor-pointer',
-        transCls,
-        variantStyles[entryVariant],
-        className
-      )}
-    >
-      <span className="relative z-10 inline-flex items-center gap-1.5">
-        {icon ?? <BotIcon />}
-        {minimal ? null : children}
-      </span>
-    </Button>
-  );
-};
+import { ReactNode } from 'react';
+import { Button, ButtonProps } from './ui/button';
+import { BotIcon } from './bot-icon';
+import { cn } from '../lib/utils';
+import { transCls } from '../const/ui';
+
+export interface PrimaryEntryBtnProps extends ButtonProps {
+  minimal?: boolean;
+  entryVariant?: 'default' | 'ghost' | 'selected' | 'light';
+  icon?: ReactNode;
+}
+
+export const PrimaryEntryBtn = ({
+  children,
+  className,
+  minimal,
+  entryVariant = 'default',
+  icon,
+  ...rest
+}: PrimaryEntryBtnProps) => {
+  const variantStyles = {
+    // background: linear-gradient(180deg, #267AFF 0%, #B2EEFF 100%);
+    default:
+      "relative overflow-hidden bg-[linear-gradient(180deg,#DBE9FF_0%,#E9FFFD_100%)] h-[30px] hover:text-white before:content-[''] before:absolute before:inset-0 before:z-0 before:bg-[linear-gradient(180deg,#267AFF_0%,#B2EEFF_100%)] before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-200 before:ease-out font-[500] text-[#0265ff]",
+    ghost: 'bg-transparent text-[#030303] font-[400] px-[10px] hover:bg-[#EFF0F6] h-[34px]',
+    light: 'text-[#030303] font-[400] px-[10px] bg-[#F0F6FF] hover:bg-[#d8dde5] h-[34px]',
+    selected: 'bg-[#EFF0F6] text-[#030303] font-[400] px-[10px]',
+  };
+
+  return (
+    <Button
+      {...rest}
+      variant="entry"
+      size="entry"
+      className={cn(
+        'rounded-[4px] cursor-pointer',
+        transCls,
+        variantStyles[entryVariant],
+        className
+      )}
+    >
+      <span className="relative z-10 inline-flex items-center gap-1.5">
+        {icon ?? <BotIcon />}
+        {minimal ? null : children}
+      </span>
+    </Button>
+  );
+};

package/src/components/radio-card.tsx

@@ -1,63 +1,63 @@
-import { useState } from 'react';
-import { cn } from '../lib/utils';
-import { CircleChecker, type CircleCheckerProps } from './circle-checker';
-
-export interface RadioCardProps extends CircleCheckerProps {
-  title: string;
-  description: string;
-}
-
-export const RadioCard = ({
-  defaultChecked = false,
-  checked: controlledChecked,
-  onCheckedChange,
-  title,
-  description,
-  disabled = false,
-  className,
-}: RadioCardProps) => {
-  const [internalChecked, setInternalChecked] = useState(defaultChecked);
-
-  const isControlled = controlledChecked !== undefined;
-  const isChecked = isControlled ? controlledChecked : internalChecked;
-
-  const handleClick = () => {
-    if (disabled) return;
-
-    const newChecked = !isChecked;
-    if (!isControlled) {
-      setInternalChecked(newChecked);
-    }
-    onCheckedChange?.(newChecked);
-  };
-
-  return (
-    <button
-      type="button"
-      role="checkbox"
-      aria-checked={isChecked}
-      disabled={disabled}
-      onClick={handleClick}
-      className={cn(
-        'flex flex-col gap-[6px] p-[10px] rounded-[4px] cursor-pointer select-none',
-        'border border-[#e0e0e0]',
-        disabled && 'cursor-not-allowed opacity-50',
-        className
-      )}
-    >
-      <div className="inline-flex items-center gap-[6px]">
-        <CircleChecker
-          checked={isChecked}
-          onCheckedChange={(_) => {
-            if (!isChecked) {
-              handleClick();
-            }
-          }}
-          disabled={disabled}
-        />
-        <span className="text-[#030303] text-[14px]">{title}</span>
-      </div>
-      <p className="text-[#666] text-[12px] pl-[22px]">{description}</p>
-    </button>
-  );
-};
+import { useState } from 'react';
+import { cn } from '../lib/utils';
+import { CircleChecker, type CircleCheckerProps } from './circle-checker';
+
+export interface RadioCardProps extends CircleCheckerProps {
+  title: string;
+  description: string;
+}
+
+export const RadioCard = ({
+  defaultChecked = false,
+  checked: controlledChecked,
+  onCheckedChange,
+  title,
+  description,
+  disabled = false,
+  className,
+}: RadioCardProps) => {
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+
+  const isControlled = controlledChecked !== undefined;
+  const isChecked = isControlled ? controlledChecked : internalChecked;
+
+  const handleClick = () => {
+    if (disabled) return;
+
+    const newChecked = !isChecked;
+    if (!isControlled) {
+      setInternalChecked(newChecked);
+    }
+    onCheckedChange?.(newChecked);
+  };
+
+  return (
+    <button
+      type="button"
+      role="checkbox"
+      aria-checked={isChecked}
+      disabled={disabled}
+      onClick={handleClick}
+      className={cn(
+        'flex flex-col gap-[6px] p-[10px] rounded-[4px] cursor-pointer select-none',
+        'border border-[#e0e0e0]',
+        disabled && 'cursor-not-allowed opacity-50',
+        className
+      )}
+    >
+      <div className="inline-flex items-center gap-[6px]">
+        <CircleChecker
+          checked={isChecked}
+          onCheckedChange={(_) => {
+            if (!isChecked) {
+              handleClick();
+            }
+          }}
+          disabled={disabled}
+        />
+        <span className="text-[#030303] text-[14px]">{title}</span>
+      </div>
+      <p className="text-[#666] text-[12px] pl-[22px]">{description}</p>
+    </button>
+  );
+};

package/src/components/scroll-to-bottom-btn.tsx

@@ -1,28 +1,28 @@
-import { cn } from '../lib/utils';
-import { transCls } from '../const/ui';
-import { ScrollArrowDownIcon } from './bs-icons';
-
-export interface ScrollToBottomProps {
-  onClick?: () => void;
-  className?: string;
-}
-
-export const ScrollToBottomBtn = ({ onClick, className }: ScrollToBottomProps) => {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={cn(
-        'inline-flex items-center justify-center',
-        'w-[36px] h-[36px] rounded-full',
-        'bg-white text-[#666] shadow-[0px_0px_14px_0px_rgba(0,0,0,0.1)]',
-        'hover:shadow-[0px_14px_14px_0px_rgba(0,0,0,0.14)]',
-        'cursor-pointer hover:text-[#333] aspect-square',
-        transCls,
-        className
-      )}
-    >
-      <ScrollArrowDownIcon />
-    </button>
-  );
-};
+import { cn } from '../lib/utils';
+import { transCls } from '../const/ui';
+import { ScrollArrowDownIcon } from './bs-icons';
+
+export interface ScrollToBottomProps {
+  onClick?: () => void;
+  className?: string;
+}
+
+export const ScrollToBottomBtn = ({ onClick, className }: ScrollToBottomProps) => {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        'inline-flex items-center justify-center',
+        'w-[36px] h-[36px] rounded-full',
+        'bg-white text-[#666] shadow-[0px_0px_14px_0px_rgba(0,0,0,0.1)]',
+        'hover:shadow-[0px_14px_14px_0px_rgba(0,0,0,0.14)]',
+        'cursor-pointer hover:text-[#333] aspect-square',
+        transCls,
+        className
+      )}
+    >
+      <ScrollArrowDownIcon />
+    </button>
+  );
+};

package/src/components/split-line.tsx

@@ -1,9 +1,9 @@
-import { cn } from '../lib/utils';
-
-export interface SplitLineProps {
-  className?: string;
-}
-
-export const SplitLine = ({ className }: SplitLineProps) => {
-  return <div className={cn('h-[1px] w-full bg-[#E0E0E0]', className)} />;
-};
+import { cn } from '../lib/utils';
+
+export interface SplitLineProps {
+  className?: string;
+}
+
+export const SplitLine = ({ className }: SplitLineProps) => {
+  return <div className={cn('h-[1px] w-full bg-[#E0E0E0]', className)} />;
+};

package/src/components/square-checker.tsx

@@ -1,87 +1,87 @@
-import * as React from 'react';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { cn } from '../lib/utils';
-import { CheckerInBoxIcon } from './bs-icons';
-
-const SquareInBoxIcon = () => {
-  // size 8, border 1px svg
-  return (
-    <svg
-      width="8"
-      height="8"
-      viewBox="0 0 8 8"
-      // fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect x="0.5" y="0.5" width="7" height="7" rx="1" fill="#0265ff" />
-    </svg>
-  );
-};
-
-export type SquareCheckerProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
-  /** Optional label rendered beside the checkbox */
-  children?: React.ReactNode;
-  readonly?: boolean;
-  intermediate?: boolean;
-};
-
-export const SquareChecker = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  SquareCheckerProps
->(({ className, children, id, readonly, disabled, intermediate, ...props }, ref) => {
-  const generatedId = React.useId();
-  const checkboxId = id ?? generatedId;
-
-  return (
-    <label
-      htmlFor={checkboxId}
-      className={cn(
-        'inline-flex items-center gap-[6px] select-none text-[#121111] text-[14px]',
-        disabled ? 'cursor-not-allowed' : 'cursor-pointer',
-        {
-          'pointer-events-none': readonly,
-        }
-      )}
-    >
-      <CheckboxPrimitive.Root
-        ref={ref}
-        id={checkboxId}
-        disabled={disabled}
-        className={cn(
-          // base layout
-          'inline-flex shrink-0 items-center justify-center',
-          'w-[16px] h-[16px] rounded-[2px] box-border border',
-          'transition-colors duration-200',
-          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0265FF] focus-visible:ring-offset-1',
-          // normal: gray border, white bg
-          'border-[#E0E0E0] bg-white',
-          // hover: blue border (browsers suppress hover on disabled <button>)
-          'hover:border-[#0265FF]',
-          // checked: blue fill
-          'data-[state=checked]:bg-[#0265FF] data-[state=checked]:border-[#0265FF]',
-          // disabled unchecked: gray bg + gray border
-          'disabled:cursor-not-allowed disabled:bg-[#F0F0F0] disabled:border-[#C2C2C2]',
-          // disabled checked: use muted gray fill
-          'disabled:data-[state=checked]:bg-[#C2C2C2] disabled:data-[state=checked]:border-[#C2C2C2]',
-          // indeterminate: blue fill
-          intermediate && 'bg-white border-[#0265FF] text-[#0265FF]',
-          className,
-          {
-            'opacity-50': readonly,
-          }
-        )}
-        {...props}
-      >
-        <CheckboxPrimitive.Indicator className="text-white" forceMount={intermediate || undefined}>
-          {intermediate ? <SquareInBoxIcon /> : <CheckerInBoxIcon />}
-        </CheckboxPrimitive.Indicator>
-      </CheckboxPrimitive.Root>
-
-      {children != null && (
-        <span className={cn('text-sm leading-none', disabled && 'text-[#C2C2C2]')}>{children}</span>
-      )}
-    </label>
-  );
-});
-
-SquareChecker.displayName = 'SquareChecker';
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { cn } from '../lib/utils';
+import { CheckerInBoxIcon } from './bs-icons';
+
+const SquareInBoxIcon = () => {
+  // size 8, border 1px svg
+  return (
+    <svg
+      width="8"
+      height="8"
+      viewBox="0 0 8 8"
+      // fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect x="0.5" y="0.5" width="7" height="7" rx="1" fill="#0265ff" />
+    </svg>
+  );
+};
+
+export type SquareCheckerProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
+  /** Optional label rendered beside the checkbox */
+  children?: React.ReactNode;
+  readonly?: boolean;
+  intermediate?: boolean;
+};
+
+export const SquareChecker = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  SquareCheckerProps
+>(({ className, children, id, readonly, disabled, intermediate, ...props }, ref) => {
+  const generatedId = React.useId();
+  const checkboxId = id ?? generatedId;
+
+  return (
+    <label
+      htmlFor={checkboxId}
+      className={cn(
+        'inline-flex items-center gap-[6px] select-none text-[#121111] text-[14px]',
+        disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+        {
+          'pointer-events-none': readonly,
+        }
+      )}
+    >
+      <CheckboxPrimitive.Root
+        ref={ref}
+        id={checkboxId}
+        disabled={disabled}
+        className={cn(
+          // base layout
+          'inline-flex shrink-0 items-center justify-center',
+          'w-[16px] h-[16px] rounded-[2px] box-border border',
+          'transition-colors duration-200',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0265FF] focus-visible:ring-offset-1',
+          // normal: gray border, white bg
+          'border-[#E0E0E0] bg-white',
+          // hover: blue border (browsers suppress hover on disabled <button>)
+          'hover:border-[#0265FF]',
+          // checked: blue fill
+          'data-[state=checked]:bg-[#0265FF] data-[state=checked]:border-[#0265FF]',
+          // disabled unchecked: gray bg + gray border
+          'disabled:cursor-not-allowed disabled:bg-[#F0F0F0] disabled:border-[#C2C2C2]',
+          // disabled checked: use muted gray fill
+          'disabled:data-[state=checked]:bg-[#C2C2C2] disabled:data-[state=checked]:border-[#C2C2C2]',
+          // indeterminate: blue fill
+          intermediate && 'bg-white border-[#0265FF] text-[#0265FF]',
+          className,
+          {
+            'opacity-50': readonly,
+          }
+        )}
+        {...props}
+      >
+        <CheckboxPrimitive.Indicator className="text-white" forceMount={intermediate || undefined}>
+          {intermediate ? <SquareInBoxIcon /> : <CheckerInBoxIcon />}
+        </CheckboxPrimitive.Indicator>
+      </CheckboxPrimitive.Root>
+
+      {children != null && (
+        <span className={cn('text-sm leading-none', disabled && 'text-[#C2C2C2]')}>{children}</span>
+      )}
+    </label>
+  );
+});
+
+SquareChecker.displayName = 'SquareChecker';