@baishuyun/ai-design 1.0.2 → 1.0.4

package/src/components/office-container.tsx

@@ -1,80 +1,174 @@
-import { FC } from 'react';
+import { FC, useCallback, useRef } from 'react';
 import { useResizableWidth } from '../hooks/use-resizable-width';
+import { useColumnAppear } from '../hooks/use-column-appear';
 import classNames from 'classnames';
 
+export type FullScreenPart = 'leftCol' | 'rightCol' | 'none';
+
 export interface IOfficeContainerProps {
     headerHeight?: number;
 
     hideLeftCol?: boolean;
 
     leftColWidthRange?: [number, number];
+    rightColWidthRange?: [number, number];
+
+    leftColCls?: string;
+    rightColCls?: string;
+
     leftColHeaderElement?: React.ReactNode;
     leftColContentElement?: React.ReactNode;
     rightColHeaderElement?: React.ReactNode;
     rightColContentElement?: React.ReactNode;
+
+    fullscreenPart?: FullScreenPart;
+
+    children?: React.ReactNode;
+
 }
 
+
 export const OfficeContainer: FC<IOfficeContainerProps> = ({
     headerHeight = 64,
     hideLeftCol = false,
     leftColWidthRange = [360, 500],
+    rightColWidthRange,
+    leftColCls,
+    rightColCls,
+    children,
     leftColHeaderElement,
     leftColContentElement,
     rightColHeaderElement,
     rightColContentElement,
+    fullscreenPart = 'none',
 }) => {
-    const { width: leftColWidth, handleMouseDown, isDragging } = useResizableWidth({
-        range: leftColWidthRange,
-        initialWidth: leftColWidthRange[0]
+    const isRightResizable = !!rightColWidthRange;
+    const activeRange = rightColWidthRange ?? leftColWidthRange;
+
+    const { width, handleMouseDown, isDragging } = useResizableWidth({
+        range: activeRange,
+        initialWidth: activeRange[0],
+        invertDrag: isRightResizable,
     });
 
-    const borderColorCls = /* isAtEdge ? 'border-[#ff8888]' : */ 'border-[#0265fc]';
+    const isLeftFullscreen = fullscreenPart === 'leftCol';
+    const isRightFullscreen = fullscreenPart === 'rightCol';
+    const isFullscreen = isLeftFullscreen || isRightFullscreen;
+
+    const leftHidden = hideLeftCol || isRightFullscreen;
+    const rightHidden = isLeftFullscreen;
+
+    // ---- column appear/hide animation ----
+
+    const {
+        colRef: leftColRef,
+        getTransitionStyle: leftTransitionStyle,
+    } = useColumnAppear({ hidden: leftHidden });
+
+    const {
+        colRef: rightColRef,
+        getTransitionStyle: rightTransitionStyle,
+    } = useColumnAppear({ hidden: rightHidden });
+
+    // ---- 列宽计算：始终返回明确像素值，避免 flex 计算宽与 transition 冲突 ----
+
+    const leftColInnerRef = useRef<HTMLDivElement>(null);
+    const rightColInnerRef = useRef<HTMLDivElement>(null);
+
+    const getColWidth = useCallback((col: 'left' | 'right'): number | string => {
+        if (col === 'left') {
+            if (hideLeftCol || isRightFullscreen) return 0;
+            if (isLeftFullscreen) return '100%';
+            if (isRightResizable) {
+                if (leftColInnerRef.current) return leftColInnerRef.current.offsetWidth;
+                return `calc(100% - ${width}px)`;
+            }
+            return width;
+        }
+        // right col
+        if (isLeftFullscreen) return 0;
+        if (isRightFullscreen) return '100%';
+        if (isRightResizable) return width;
+        if (rightColInnerRef.current) return rightColInnerRef.current.offsetWidth;
+        return `calc(100% - ${width}px)`;
+    }, [hideLeftCol, isLeftFullscreen, isRightFullscreen, isRightResizable, width]);
+
+    const borderColorCls = 'border-[#0265fc]';
+
+    // 全屏时补全 shrink-0，确保 width: 100% 或 width: 0 不会被 flex 容器挤压
+    const leftFlexCls = isFullscreen
+        ? 'shrink-0'
+        : isRightResizable
+            ? 'flex-1'
+            : 'shrink-0';
+    const rightFlexCls = isFullscreen
+        ? 'shrink-0'
+        : isRightResizable
+            ? 'shrink-0'
+            : 'flex-1';
+
+    // 滚动条使用 scrollbar-gutter: stable 预留空间，避免 overflow 切换时布局抖动
+    const contentCls = 'flex-1 min-h-0 overflow-auto w-full';
+    const contentStyle: React.CSSProperties = { /*scrollbarGutter: 'stable' */};
 
     return (
         <div className="relative h-full w-full flex overflow-hidden bg-white">
+            {/* fullscreen overlay */}
+            {children && (
+                <div>
+                    {children}
+                </div>
+            )}
+
             {/* left col */}
             <div
-                className={classNames("shrink-0 h-full flex flex-col relative bg-[#F5F7FA]", {
-                    "pointer-events-none": hideLeftCol,
-                    "opacity-0": hideLeftCol,
+                ref={leftColRef}
+                className={classNames("h-full flex flex-col relative office-left-col", leftColCls, leftFlexCls, {
+                    "pointer-events-none": hideLeftCol || isRightFullscreen,
+                    "opacity-0": hideLeftCol || isRightFullscreen,
+                    "overflow-hidden": /* isRightFullscreen */ true,
                 })}
-                style={{ width: hideLeftCol ? 0 : leftColWidth }}
+                style={{ ...leftTransitionStyle, width: getColWidth('left'), ...(isDragging ? { transition: 'none' } : {}) }}
             >
-                    <div
-                        className="shrink-0 w-full"
+                <div
+                    ref={leftColInnerRef}
+                    className="shrink-0 w-full overflow-hidden"
                     style={{ height: headerHeight }}
                 >
                     {leftColHeaderElement}
                 </div>
-                <div className="flex-1 min-h-0 overflow-auto">
+                <div className={contentCls} style={contentStyle}>
                     {leftColContentElement}
                 </div>
                 {/* resizer */}
-                <div
-                    className={classNames(`h-full w-5 cursor-col-resize z-10 flex justify-center group absolute top-0 right-0 hover:border-r hover:${borderColorCls}`, {
-                        [`border-r ${borderColorCls}`]: isDragging,
-                    })}
-                    onMouseDown={handleMouseDown}
-                >
-
-                </div>
+                {!isFullscreen && (
+                    <div
+                        className={classNames(`h-full w-5 cursor-col-resize z-10 flex justify-center group absolute top-0 right-0 hover:border-r hover:${borderColorCls}`, {
+                            [`border-r ${borderColorCls}`]: isDragging,
+                        })}
+                        onMouseDown={handleMouseDown}
+                    />
+                )}
             </div>
 
-
             {/* right col */}
-            <div className={
-                classNames("flex-1 h-full flex flex-col min-w-0", {
-                    // "shadow-[0_0_16px_rgba(0,0,0,0.10)]": !isDragging,
-                    // "shadow-[0_0_20px_rgba(0,0,0,0.10)]": isDragging,
-                })
-            }>
+            <div
+                ref={rightColRef}
+                className={classNames("h-full flex flex-col min-w-0 office-right-col", rightColCls, rightFlexCls, {
+                    "pointer-events-none": isLeftFullscreen,
+                    "opacity-0": isLeftFullscreen,
+                    "overflow-hidden": isLeftFullscreen,
+                })}
+                style={{ ...rightTransitionStyle, width: getColWidth('right'), ...(isDragging ? { transition: 'none' } : {}) }}
+            >
                 <div
+                    ref={rightColInnerRef}
                     className="shrink-0 w-full"
                     style={{ height: headerHeight }}
                 >
                     {rightColHeaderElement}
                 </div>
-                <div className="flex-1 min-h-0 overflow-auto">
+                <div className={contentCls} style={contentStyle}>
                     {rightColContentElement}
                 </div>
             </div>

package/src/components/output-config-editor.tsx

@@ -0,0 +1,409 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+import type { OutputParam, FieldType } from '@baishuyun/types';
+import { cn } from '../lib/utils';
+import { transCls, FieldTypeNameMap } from '../const/ui';
+import { TrashIcon, SearchIcon } from '../components/bs-icons';
+import { FieldIcon } from '../components/field-icon';
+
+const PlusIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M8 3.5v9M3.5 8h9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+);
+
+const CaretIcon = ({ className }: { className?: string }) => (
+  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M3 4.5l3 3 3-3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+const ExpandArrowIcon = ({ className }: { className?: string }) => (
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
+    <path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+  </svg>
+);
+
+export interface OutputFieldOption {
+  fieldName: string;
+  fieldDesc: string;
+  type: FieldType;
+  children?: OutputFieldOption[];
+}
+
+type DropdownTarget = { index: number; field: 'name' | 'type' } | null;
+
+export interface OutputConfigEditorProps {
+  value: OutputParam[];
+  onChange?: (value: OutputParam[]) => void;
+  availableFields?: OutputFieldOption[];
+  className?: string;
+}
+
+export function OutputConfigEditor({ value, onChange, availableFields, className }: OutputConfigEditorProps) {
+  const [dropdownTarget, setDropdownTarget] = useState<DropdownTarget>(null);
+  const [searchText, setSearchText] = useState('');
+  const [collapsedParents, setCollapsedParents] = useState<Set<string>>(new Set());
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!dropdownTarget) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        setDropdownTarget(null);
+        setSearchText('');
+        setCollapsedParents(new Set());
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [dropdownTarget]);
+
+  useEffect(() => {
+    if (dropdownTarget && searchInputRef.current) {
+      setTimeout(() => searchInputRef.current?.focus(), 0);
+    }
+  }, [dropdownTarget]);
+
+  const handleAdd = useCallback(() => {
+    onChange?.([...value, { name: '', type: '', description: '' }]);
+  }, [value, onChange]);
+
+  const handleDelete = useCallback((index: number) => {
+    onChange?.(value.filter((_, i) => i !== index));
+  }, [value, onChange]);
+
+  const handleOpenDropdown = useCallback((index: number, field: 'name' | 'type') => {
+    setDropdownTarget({ index, field });
+    setSearchText('');
+    setCollapsedParents(new Set());
+  }, []);
+
+  const handleSelectField = useCallback((index: number, field: OutputFieldOption) => {
+    const newValue = [...value];
+    newValue[index] = { ...newValue[index], name: field.fieldDesc };
+    onChange?.(newValue);
+    setDropdownTarget(null);
+    setSearchText('');
+  }, [value, onChange]);
+
+  const handleSelectType = useCallback((index: number, type: FieldType | '') => {
+    const newValue = [...value];
+    newValue[index] = {
+      ...newValue[index],
+      type,
+      subformParams: type === 'subform' ? (newValue[index].subformParams || []) : undefined,
+    };
+    onChange?.(newValue);
+    setDropdownTarget(null);
+    setSearchText('');
+  }, [value, onChange]);
+
+  const toggleParent = useCallback((fieldName: string) => {
+    setCollapsedParents(prev => {
+      const next = new Set(prev);
+      if (next.has(fieldName)) {
+        next.delete(fieldName);
+      } else {
+        next.add(fieldName);
+      }
+      return next;
+    });
+  }, []);
+
+  const matchSearch = (text: string) =>
+    !searchText || text?.toLowerCase().includes(searchText.toLowerCase());
+
+  const filteredTypes = Object.entries(FieldTypeNameMap).filter(([, name]) =>
+    matchSearch(name),
+  );
+
+  const filterFields = (fields: OutputFieldOption[]): OutputFieldOption[] =>
+    fields.reduce<OutputFieldOption[]>((acc, f) => {
+      const selfMatches = matchSearch(f.fieldDesc) || matchSearch(f.fieldName);
+      const filteredChildren = f.children ? filterFields(f.children) : [];
+      if (selfMatches || filteredChildren.length > 0) {
+        acc.push({ ...f, children: filteredChildren.length > 0 ? filteredChildren : f.children });
+      }
+      return acc;
+    }, []);
+
+  const filteredFields = availableFields ? filterFields(availableFields) : [];
+
+  const fieldRowCls = cn(
+    'bg-white border border-[#e0e0e0] rounded-[4px] h-[34px] px-[10px] py-[7px]',
+    'flex items-center min-w-0',
+    'text-[14px] text-[#030303] leading-normal',
+    'hover:border-[#0265ff]',
+    transCls,
+  );
+
+  const isDropdownOpen = (index: number, field: 'name' | 'type') =>
+    dropdownTarget?.index === index && dropdownTarget?.field === field;
+
+  if (value.length === 0) {
+    return (
+      <div className={className}>
+        <button
+          type="button"
+          onClick={handleAdd}
+          className={cn(
+            'inline-flex items-center gap-[6px]',
+            'bg-transparent border-0 cursor-pointer p-0',
+            'text-[#0265ff] text-[14px] leading-normal',
+            'hover:opacity-80',
+            transCls,
+          )}
+        >
+          <PlusIcon />
+          <span>添加出参名称</span>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn(
+      'bg-[#f5f5f5] border border-[#e0e0e0] border-dashed rounded-[4px] p-[10px]',
+      'flex flex-col gap-[10px]',
+      className,
+    )}>
+      {value.map((param, index) => (
+        <div key={index} className="flex gap-[10px] items-center">
+          {/* Name selector */}
+          <div className="relative flex-1 min-w-0">
+            <button
+              type="button"
+              onClick={() => handleOpenDropdown(index, 'name')}
+              className={cn(
+                fieldRowCls,
+                'w-full justify-between cursor-pointer',
+                isDropdownOpen(index, 'name') ? 'border-[#0265ff]' : 'border-[#e0e0e0]',
+              )}
+            >
+              <span className="text-[14px] text-[#030303] leading-normal truncate">
+                {param.name || <span className="text-[#999]">请选择字段</span>}
+              </span>
+              <CaretIcon className={cn(
+                'shrink-0 text-[#666]',
+                isDropdownOpen(index, 'name') && 'rotate-180',
+                transCls,
+              )} />
+            </button>
+
+            {isDropdownOpen(index, 'name') && (
+              <div
+                ref={dropdownRef}
+                className={cn(
+                  'absolute top-[38px] left-0 z-10 w-[216px]',
+                  'bg-white rounded-[4px] p-[4px]',
+                  'shadow-[0px_0px_16px_0px_rgba(0,0,0,0.1)]',
+                )}
+              >
+                <div className="relative flex items-center border border-[#e0e0e0] rounded-[4px] mb-[4px]">
+                  <span className="absolute left-[10px] top-1/2 -translate-y-1/2">
+                    <SearchIcon />
+                  </span>
+                  <input
+                    ref={searchInputRef}
+                    type="text"
+                    value={searchText}
+                    onChange={e => setSearchText(e.target.value)}
+                    placeholder="搜索"
+                    className={cn(
+                      'w-full h-[34px] pl-[32px] pr-[10px]',
+                      'text-[14px] text-[#030303] leading-normal outline-none',
+                      'bg-transparent border-0 rounded-[4px]',
+                      'placeholder:text-[#999]',
+                    )}
+                  />
+                </div>
+                <div className="max-h-[210px] overflow-auto">
+                  {filteredFields.map((field) => {
+                    const isParent = field.children && field.children.length > 0;
+                    const isCollapsed = collapsedParents.has(field.fieldName);
+
+                    return (
+                      <div key={field.fieldName}>
+                        {isParent ? (
+                          <button
+                            type="button"
+                            onClick={() => toggleParent(field.fieldName)}
+                            className={cn(
+                              'flex items-center gap-[6px] w-full px-[10px] py-[7px] h-[34px] rounded-[4px]',
+                              'text-[14px] text-[#030303] leading-normal',
+                              'hover:bg-[#EFF0F6] bg-transparent border-0 cursor-pointer',
+                              transCls,
+                            )}
+                          >
+                            <ExpandArrowIcon className={cn(
+                              'shrink-0 text-[#999]',
+                              !isCollapsed && 'rotate-90',
+                              transCls,
+                            )} />
+                            <span className="truncate">{field.fieldDesc}</span>
+                          </button>
+                        ) : (
+                          <button
+                            type="button"
+                            onClick={() => handleSelectField(index, field)}
+                            className={cn(
+                              'flex items-center w-full px-[10px] py-[7px] h-[34px] rounded-[4px]',
+                              'text-[14px] text-[#030303] leading-normal',
+                              'hover:bg-[#EFF0F6] bg-transparent border-0 cursor-pointer',
+                              param.name === field.fieldDesc && 'bg-[#EFF0F6] text-[#0265ff]',
+                              transCls,
+                            )}
+                          >
+                            <span className="truncate">{field.fieldDesc}</span>
+                          </button>
+                        )}
+                        {isParent && !isCollapsed && field.children!.map((child) => (
+                          <button
+                            key={child.fieldName}
+                            type="button"
+                            onClick={() => handleSelectField(index, child)}
+                            className={cn(
+                              'flex items-center w-full pl-[34px] pr-[10px] py-[7px] h-[34px] rounded-[4px]',
+                              'text-[14px] text-[#030303] leading-normal',
+                              'hover:bg-[#EFF0F6] bg-transparent border-0 cursor-pointer',
+                              param.name === child.fieldDesc && 'bg-[#EFF0F6] text-[#0265ff]',
+                              transCls,
+                            )}
+                          >
+                            <span className="truncate">{child.fieldDesc}</span>
+                          </button>
+                        ))}
+                      </div>
+                    );
+                  })}
+                  {filteredFields.length === 0 && (
+                    <div className="px-[10px] py-[7px] text-[14px] text-[#999] leading-normal">
+                      无匹配结果
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* "设置为" label */}
+          <div className="bg-[#d9d9d9] rounded-[4px] h-[34px] w-[98px] shrink-0 flex items-center justify-center">
+            <span className="text-[14px] text-[#030303] leading-normal whitespace-nowrap">设置为</span>
+          </div>
+
+          {/* Type selector */}
+          <div className="relative flex-1 min-w-0">
+            <button
+              type="button"
+              onClick={() => handleOpenDropdown(index, 'type')}
+              className={cn(
+                fieldRowCls,
+                'w-full justify-between cursor-pointer',
+                isDropdownOpen(index, 'type') ? 'border-[#0265ff]' : 'border-[#e0e0e0]',
+              )}
+            >
+              <span className="flex items-center gap-[6px] min-w-0">
+                {param.type ? (
+                  <>
+                    <FieldIcon type={param.type} />
+                    <span className="text-[14px] text-[#030303] leading-normal truncate">
+                      {FieldTypeNameMap[param.type]}
+                    </span>
+                  </>
+                ) : (
+                  <span className="text-[14px] text-[#999] leading-normal">请选择</span>
+                )}
+              </span>
+              <CaretIcon className={cn(
+                'shrink-0 text-[#666]',
+                isDropdownOpen(index, 'type') && 'rotate-180',
+                transCls,
+              )} />
+            </button>
+
+            {isDropdownOpen(index, 'type') && (
+              <div
+                ref={dropdownRef}
+                className={cn(
+                  'absolute top-[38px] left-0 z-10 w-[216px]',
+                  'bg-white rounded-[4px] p-[4px]',
+                  'shadow-[0px_0px_16px_0px_rgba(0,0,0,0.1)]',
+                )}
+              >
+                <div className="relative flex items-center border border-[#e0e0e0] rounded-[4px] mb-[4px]">
+                  <span className="absolute left-[10px] top-1/2 -translate-y-1/2">
+                    <SearchIcon />
+                  </span>
+                  <input
+                    ref={searchInputRef}
+                    type="text"
+                    value={searchText}
+                    onChange={e => setSearchText(e.target.value)}
+                    placeholder="搜索"
+                    className={cn(
+                      'w-full h-[34px] pl-[32px] pr-[10px]',
+                      'text-[14px] text-[#030303] leading-normal outline-none',
+                      'bg-transparent border-0 rounded-[4px]',
+                      'placeholder:text-[#999]',
+                    )}
+                  />
+                </div>
+                <div className="max-h-[210px] overflow-auto">
+                  {filteredTypes.map(([type, name]) => (
+                    <button
+                      key={type}
+                      type="button"
+                      onClick={() => handleSelectType(index, type as FieldType)}
+                      className={cn(
+                        'flex items-center gap-[6px] w-full px-[10px] py-[7px] h-[34px] rounded-[4px]',
+                        'text-[14px] text-[#030303] leading-normal',
+                        'hover:bg-[#EFF0F6] bg-transparent border-0 cursor-pointer',
+                        param.type === type && 'bg-[#EFF0F6] text-[#0265ff]',
+                        transCls,
+                      )}
+                    >
+                      <FieldIcon type={type as FieldType} />
+                      <span className="truncate">{name}</span>
+                    </button>
+                  ))}
+                  {filteredTypes.length === 0 && (
+                    <div className="px-[10px] py-[7px] text-[14px] text-[#999] leading-normal">
+                      无匹配结果
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Delete button */}
+          <button
+            type="button"
+            onClick={() => handleDelete(index)}
+            className="shrink-0 cursor-pointer bg-transparent border-0 p-0"
+          >
+            <span className="inline-flex items-center justify-center size-[16px] text-[#666] hover:text-[#FF4D4F] [&_svg_path]:fill-[#666] [&_svg_path]:hover:fill-[#FF4D4F]">
+              <TrashIcon />
+            </span>
+          </button>
+        </div>
+      ))}
+
+      <button
+        type="button"
+        onClick={handleAdd}
+        className={cn(
+          'inline-flex items-center gap-[6px] w-fit',
+          'bg-transparent border-0 cursor-pointer p-0',
+          'text-[#0265ff] text-[14px] leading-normal',
+          'hover:opacity-80',
+          transCls,
+        )}
+      >
+        <PlusIcon />
+        <span>添加出参名称</span>
+      </button>
+    </div>
+  );
+}

package/src/components/radio-card.tsx

@@ -0,0 +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>
+  );
+};