mm

2026-06-08 04:19:23 +08:00
parent 8351498071
commit f2d8ad0de2
152 changed files with 2362 additions and 2227 deletions
@@ -0,0 +1,12 @@
+export const BoldSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
+    />
+  </svg>
+);
@@ -0,0 +1,8 @@
+export const CheckIndicatorSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      d="M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41z"
+    />
+  </svg>
+);
@@ -0,0 +1,12 @@
+export const ChevronRightSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="m9 6l6 6l-6 6"
+    />
+  </svg>
+);
@@ -0,0 +1,8 @@
+export const CutSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      d="M12.14 9.342L7.37 2.329a.75.75 0 1 0-1.24.844l5.13 7.545l-2.395 3.743a4 4 0 1 0 1.178.943l2.135-3.337l2.065 3.036a4 4 0 1 0 1.261-.813l-2.447-3.597l.002-.002zM4.5 18a2.5 2.5 0 1 1 5 0a2.5 2.5 0 0 1-5 0m10 0a2.5 2.5 0 1 1 5 0a2.5 2.5 0 0 1-5 0m-.562-8.684l3.943-6.162a.75.75 0 1 0-1.263-.808L13.02 7.968z"
+    />
+  </svg>
+);
@@ -0,0 +1,8 @@
+export const DownloadSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      d="M20 16a1 1 0 0 1 1 1v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-2a1 1 0 0 1 2 0v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2a1 1 0 0 1 1-1M12 3a1 1 0 0 1 1 1v9.585l3.293-3.292a1 1 0 0 1 1.414 1.414l-5 5a1 1 0 0 1-.09.08l.09-.08a1 1 0 0 1-.674.292L12 17h-.032l-.054-.004L12 17a1 1 0 0 1-.617-.213a1 1 0 0 1-.09-.08l-5-5a1 1 0 0 1 1.414-1.414L11 13.585V4a1 1 0 0 1 1-1"
+    />
+  </svg>
+);
@@ -0,0 +1,14 @@
+export const FileSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <g
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+    >
+      <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+      <path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2" />
+    </g>
+  </svg>
+);
@@ -0,0 +1,8 @@
+export const KeySvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      d="M7 14q-.825 0-1.412-.587T5 12t.588-1.412T7 10t1.413.588T9 12t-.587 1.413T7 14m0 4q-2.5 0-4.25-1.75T1 12t1.75-4.25T7 6q1.675 0 3.038.825T12.2 9h8.375q.2 0 .388.075t.337.225l2 2q.15.15.212.325t.063.375t-.063.375t-.212.325l-3.175 3.175q-.125.125-.3.2t-.35.1t-.35-.025t-.325-.175L17.5 15l-1.425 1.075q-.125.1-.275.15t-.3.05t-.313-.05t-.287-.15L13.375 15H12.2q-.8 1.35-2.163 2.175T7 18m0-2q1.4 0 2.463-.85T10.875 13H14l1.45 1.025v.013v-.013L17.5 12.5l1.775 1.375L21.15 12h-.012h.012l-1-1v-.012V11h-9.275q-.35-1.3-1.412-2.15T7 8Q5.35 8 4.175 9.175T3 12t1.175 2.825T7 16"
+    />
+  </svg>
+);
@@ -0,0 +1,14 @@
+export const MeshSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <g
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+    >
+      <path d="M3 9h18M3 15h18M8 4c.485.445 3.5 3.312 3.5 8c0 .663-.07 4.848-3.5 8m7-16a17 17 0 0 1 2.004 8c0 1.51-.201 4.628-2.004 8" />
+      <path d="M18.778 20H5.222A2.22 2.22 0 0 1 3 17.778V6.222C3 4.995 3.995 4 5.222 4h13.556C20.005 4 21 4.995 21 6.222v11.556A2.22 2.22 0 0 1 18.778 20" />
+    </g>
+  </svg>
+);
@@ -0,0 +1,12 @@
+export const MoonSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z"
+    />
+  </svg>
+);
@@ -0,0 +1,8 @@
+export const PasteSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      d="M12.753 2c1.158 0 2.111.875 2.234 2h1.763a2.25 2.25 0 0 1 2.245 2.096L19 6.25a.75.75 0 0 1-.647.742L18.249 7a.75.75 0 0 1-.742-.647L17.5 6.25a.75.75 0 0 0-.648-.743L16.75 5.5h-2.132a2.24 2.24 0 0 1-1.865.993H9.247a2.24 2.24 0 0 1-1.865-.992L5.25 5.5a.75.75 0 0 0-.743.648L4.5 6.25v13.505c0 .38.282.693.648.743l.102.007h3a.75.75 0 0 1 .743.647l.007.102a.75.75 0 0 1-.75.75h-3a2.25 2.25 0 0 1-2.245-2.095L3 19.755V6.25a2.25 2.25 0 0 1 2.096-2.245L5.25 4h1.763a2.247 2.247 0 0 1 2.234-2zm5.997 6a2.25 2.25 0 0 1 2.245 2.096l.005.154v9.5a2.25 2.25 0 0 1-2.096 2.245L18.75 22h-6.5a2.25 2.25 0 0 1-2.245-2.096L10 19.75v-9.5a2.25 2.25 0 0 1 2.096-2.245L12.25 8zm0 1.5h-6.5a.75.75 0 0 0-.743.648l-.007.102v9.5c0 .38.282.694.648.743l.102.007h6.5a.75.75 0 0 0 .743-.648l.007-.102v-9.5a.75.75 0 0 0-.648-.743zm-5.997-6H9.247a.747.747 0 0 0 0 1.493h3.506a.747.747 0 1 0 0-1.493"
+    />
+  </svg>
+);
@@ -0,0 +1,12 @@
+export const RulerSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M5 4h14a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-7a1 1 0 0 0-1 1v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1M4 8h2m-2 4h3m-3 4h2M8 4v2m4-2v3m4-3v2"
+    />
+  </svg>
+);
@@ -0,0 +1,8 @@
+export const SearchSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      d="M9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.6 5.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-5.6-5.6q-.75.6-1.725.95T9.5 16m0-2q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
+    />
+  </svg>
+);
@@ -0,0 +1,9 @@
+export const SettingSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      fill-rule="evenodd"
+      d="M12.563 3.2h-1.126l-.645 2.578l-.647.2a6.3 6.3 0 0 0-1.091.452l-.599.317l-2.28-1.368l-.796.797l1.368 2.28l-.317.598a6.3 6.3 0 0 0-.453 1.091l-.199.647l-2.578.645v1.126l2.578.645l.2.647q.173.568.452 1.091l.317.599l-1.368 2.28l.797.796l2.28-1.368l.598.317q.523.278 1.091.453l.647.199l.645 2.578h1.126l.645-2.578l.647-.2a6.3 6.3 0 0 0 1.091-.452l.599-.317l2.28 1.368l.796-.797l-1.368-2.28l.317-.598q.278-.523.453-1.091l.199-.647l2.578-.645v-1.126l-2.578-.645l-.2-.647a6.3 6.3 0 0 0-.452-1.091l-.317-.599l1.368-2.28l-.797-.796l-2.28 1.368l-.598-.317a6.3 6.3 0 0 0-1.091-.453l-.647-.199zm2.945 2.17l1.833-1.1a1 1 0 0 1 1.221.15l1.018 1.018a1 1 0 0 1 .15 1.221l-1.1 1.833q.33.62.54 1.3l2.073.519a1 1 0 0 1 .757.97v1.438a1 1 0 0 1-.757.97l-2.073.519q-.21.68-.54 1.3l1.1 1.833a1 1 0 0 1-.15 1.221l-1.018 1.018a1 1 0 0 1-1.221.15l-1.833-1.1q-.62.33-1.3.54l-.519 2.073a1 1 0 0 1-.97.757h-1.438a1 1 0 0 1-.97-.757l-.519-2.073a7.5 7.5 0 0 1-1.3-.54l-1.833 1.1a1 1 0 0 1-1.221-.15L4.42 18.562a1 1 0 0 1-.15-1.221l1.1-1.833a7.5 7.5 0 0 1-.54-1.3l-2.073-.519A1 1 0 0 1 2 12.72v-1.438a1 1 0 0 1 .757-.97l2.073-.519q.21-.68.54-1.3L4.27 6.66a1 1 0 0 1 .15-1.221L5.438 4.42a1 1 0 0 1 1.221-.15l1.833 1.1q.62-.33 1.3-.54l.519-2.073A1 1 0 0 1 11.28 2h1.438a1 1 0 0 1 .97.757l.519 2.073q.68.21 1.3.54zM12 14.8a2.8 2.8 0 1 0 0-5.6a2.8 2.8 0 0 0 0 5.6m0 1.2a4 4 0 1 1 0-8a4 4 0 0 1 0 8"
+    />
+  </svg>
+);
@@ -0,0 +1,23 @@
+export const SpinnerSvg = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+        opacity="0.25"
+      />
+      <path
+        fill="currentColor"
+        d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+      >
+        <animateTransform
+          attributeName="transform"
+          dur="0.75s"
+          repeatCount="indefinite"
+          type="rotate"
+          values="0 12 12;360 12 12"
+        />
+      </path>
+    </svg>
+  );
+};
@@ -0,0 +1,12 @@
+export const SunSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M8 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0m-5 0h1m8-9v1m8 8h1m-9 8v1M5.6 5.6l.7.7m12.1-.7l-.7.7m0 11.4l.7.7m-12.1-.7l-.7.7"
+    />
+  </svg>
+);
@@ -0,0 +1,14 @@
+export const UserSvg = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M19.618 21.25c0-3.602-4.016-6.53-7.618-6.53s-7.618 2.928-7.618 6.53M12 11.456a4.353 4.353 0 1 0 0-8.706a4.353 4.353 0 0 0 0 8.706"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,12 @@
+export const VolumeHighSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M15 8a5 5 0 0 1 0 8m2.7-11a9 9 0 0 1 0 14M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z"
+    />
+  </svg>
+);
@@ -0,0 +1,12 @@
+export const VolumeLowSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M15 8a5 5 0 0 1 0 8m-9-1H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z"
+    />
+  </svg>
+);
@@ -0,0 +1,12 @@
+export const VolumeMuteSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5zm10-5l4 4m0-4l-4 4"
+    />
+  </svg>
+);
@@ -0,0 +1,19 @@
+import { useEffect } from "react";
+import { Slot } from "../../utils/Slot";
+import { useButtonContext } from "./common/ButtonContext";
+
+export const ButtonIcon = (props: any) => {
+  const { children, ...rest } = props;
+
+  const { slotRegistry } = useButtonContext();
+
+  useEffect(() => {
+    slotRegistry.setSlots?.((prev) => ({
+      ...prev,
+      icon: <Slot {...rest}>{children}</Slot>,
+    }));
+  }, [children, slotRegistry]);
+
+  return null;
+};
+ButtonIcon.displayName = "ButtonIcon";
@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import type { ReactNode } from "react";
+import { useButtonContext } from "./common/ButtonContext";
+import { Slot } from "../../utils/Slot";
+
+
+type ButtonLoadingProps = {
+  children: ReactNode;
+};
+
+export const ButtonLoading = (props: ButtonLoadingProps) => {
+  const { children, ...rest } = props;
+  const { slotRegistry } = useButtonContext();
+
+  useEffect(() => {
+    slotRegistry.setSlots?.(prev => ({
+      ...prev,
+      loading: <Slot {...rest}>{children}</Slot>,
+    }));
+  }, [children, slotRegistry]);
+
+  return null;
+};
+
+ButtonLoading.displayName = "ButtonLoading";
@@ -0,0 +1,60 @@
+import { type ComponentPropsWithoutRef, forwardRef } from "react";
+import { ButtonContext, type ButtonSlot } from "./common/ButtonContext";
+import { useSlotRegistry } from "../../utils/useSlotRegistry";
+import { mergeProps } from "../../utils/mergeProps";
+import { useDefaultedProps } from "../../utils/useDefaultedProps";
+import { brandRecipe, cpm, itemSizeRecipe, variantRecipe } from "@dg/css";
+
+export type ButtonRootOwnProps = {
+  size?: "xs" | "sm" | "md" | "lg";
+  variant?: "filled" | "outline" | "subtle" | "ghost";
+  shape?: "rounded" | "square" | "circle";
+  brand?: "success" | "danger" | "info" | "warning" | "emphasize";
+  iconOnly?: boolean;
+  hideIcon?: boolean;
+  loading?: boolean;
+  disabled?: boolean;
+};
+
+export type ButtonRootPrimitiveProps = Omit<
+  ComponentPropsWithoutRef<"button">,
+  keyof ButtonRootOwnProps
+>;
+
+export type ButtonRootProps = ButtonRootOwnProps & ButtonRootPrimitiveProps;
+
+export const ButtonRoot = forwardRef<HTMLButtonElement, ButtonRootProps>(
+  (props, ref) => {
+    const defaultedProps = useDefaultedProps(props, {
+      size: "md",
+      variant: "filled",
+      shape: "rounded",
+      brand: "info",
+      iconOnly: false,
+      disabled: false,
+    });
+    const { size, variant, shape, brand, iconOnly, disabled, children } =
+      defaultedProps;
+
+    const clx = cpm(
+      itemSizeRecipe({ size, shape, iconOnly }),
+      variantRecipe({ variant, disabled }),
+      brandRecipe({ brand }),
+    );
+
+    const mergedProps = mergeProps({ className: clx }, defaultedProps);
+
+    const slotRegistry = useSlotRegistry<ButtonSlot>();
+
+    return (
+      <ButtonContext.Provider value={{ slotRegistry }}>
+        <button ref={ref} {...mergedProps}>
+          {slotRegistry.slots?.icon}
+          {children}
+          {slotRegistry.slots?.loading}
+        </button>
+      </ButtonContext.Provider>
+    );
+  },
+);
+ButtonRoot.displayName = "Button.Root";
@@ -0,0 +1,26 @@
+// ButtonContext.ts
+import { createContext, useContext, type ReactNode } from "react";
+
+export type ButtonSlot = {
+  icon?: ReactNode;
+  loading?: ReactNode;
+};
+
+type ButtonContextValue = {
+  slotRegistry: {
+    slots?: ButtonSlot;
+    setSlots?: React.Dispatch<React.SetStateAction<ButtonSlot | undefined>>;
+  };
+};
+
+export const ButtonContext = createContext<ButtonContextValue | undefined>(
+  undefined,
+);
+
+export const useButtonContext = () => {
+  const ctx = useContext(ButtonContext);
+  if (!ctx) {
+    throw new Error("Button 子组件必须在 Button.Root 内使用");
+  }
+  return ctx;
+};
@@ -0,0 +1,9 @@
+import { ButtonIcon } from "./ButtonIcon";
+import { ButtonLoading } from "./ButtonLoading";
+import { ButtonRoot } from "./ButtonRoot";
+
+export const Button = {
+  Root: ButtonRoot,
+  Icon: ButtonIcon,
+  Loading: ButtonLoading,
+}
@@ -0,0 +1,29 @@
+import './index.css';
+export * from './assets/svg/BoldSvg';
+export * from './assets/svg/CheckIndicatorSvg';
+export * from './assets/svg/ChevronRightSvg';
+export * from './assets/svg/CutSvg';
+export * from './assets/svg/DownloadSvg';
+export * from './assets/svg/FileSvg';
+export * from './assets/svg/KeySvg';
+export * from './assets/svg/MeshSvg';
+export * from './assets/svg/MoonSvg';
+export * from './assets/svg/PasteSvg';
+export * from './assets/svg/Ruler';
+export * from './assets/svg/SearchSvg';
+export * from './assets/svg/SettingSvg';
+export * from './assets/svg/SpinnerSvg';
+export * from './assets/svg/SunSvg';
+export * from './assets/svg/UserSvg';
+export * from './assets/svg/VolumeHighSvg';
+export * from './assets/svg/VolumeLowSvg';
+export * from './assets/svg/VolumeMuteSvg';
+export * from './componnets/button/index';
+export * from './componnets/button/ButtonIcon';
+export * from './componnets/button/ButtonLoading';
+export * from './componnets/button/ButtonRoot';
+export * from './componnets/button/common/ButtonContext';
+export * from './utils/mergeProps';
+export * from './utils/Slot';
+export * from './utils/useDefaultedProps';
+export * from './utils/useSlotRegistry';
@@ -0,0 +1,4 @@
+declare module "*.css" {
+  const content: string;
+  export default content;
+}
@@ -0,0 +1,14 @@
+import { cloneElement, isValidElement } from "react";
+import { mergeProps } from "./mergeProps";
+
+export const Slot = (props: any) => {
+  const { children, ...rest } = props;
+
+  if (!isValidElement(children)) {
+    throw new Error("Slot requires a single valid React element");
+  }
+
+  const mergedProps = mergeProps(children.props as Record<string, any>, rest);
+
+  return cloneElement(children, mergedProps);
+};
@@ -0,0 +1,107 @@
+type AnyProps = Record<string, any>;
+
+function defaultClassMergeFn(...classes: string[]): string {
+  return classes
+    .map((s) => s.trim())
+    .filter(Boolean)
+    .join(" ")
+    .trim();
+}
+
+// 工具类型
+type UnionToIntersection<U> =
+  (U extends any ? (k: U) => void : never) extends
+  (k: infer I) => void ? I : never;
+
+// 泛型入口
+export function mergeProps<
+  T extends AnyProps[]
+>(
+  ...args: [...T]
+): UnionToIntersection<T[number]>;
+
+export function mergeProps<
+  T extends AnyProps[]
+>(
+  options: { classMergeFn: (...cls: string[]) => string },
+  ...args: [...T]
+): UnionToIntersection<T[number]>;
+
+export function mergeProps(
+  arg1: any,
+  ...rest: any[]
+): any {
+  let options = {
+    classMergeFn: defaultClassMergeFn,
+  };
+
+  let propsList: AnyProps[];
+
+  if (
+    arg1 &&
+    typeof arg1 === "object" &&
+    !Array.isArray(arg1) &&
+    "classMergeFn" in arg1 &&
+    typeof arg1.classMergeFn === "function"
+  ) {
+    options = arg1;
+    propsList = rest;
+  } else {
+    propsList = [arg1, ...rest];
+  }
+
+  const result: AnyProps = {};
+  const eventHandlers = new Map<string, Function[]>();
+  const refs: any[] = [];
+
+  for (const props of propsList) {
+    if (!props) continue;
+
+    if (props.className) {
+      result.className = options.classMergeFn(
+        result.className ?? "",
+        props.className,
+      );
+    }
+
+    if (props.style) {
+      result.style = { ...(result.style ?? {}), ...props.style };
+    }
+
+    if (props.ref) {
+      refs.push(props.ref);
+    }
+
+    for (const key of Object.keys(props)) {
+      if (key.startsWith("on") && typeof props[key] === "function") {
+        if (!eventHandlers.has(key)) {
+          eventHandlers.set(key, []);
+        }
+        eventHandlers.get(key)!.push(props[key]);
+      } else if (key !== "ref" && key !== "className" && key !== "style") {
+        result[key] = props[key];
+      }
+    }
+  }
+
+  // refs
+  if (refs.length === 1) {
+    result.ref = refs[0];
+  } else if (refs.length > 1) {
+    result.ref = (node: any) => {
+      refs.forEach((ref) => {
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      });
+    };
+  }
+
+  // events
+  eventHandlers.forEach((handlers, key) => {
+    result[key] = (...args: any[]) => {
+      handlers.forEach((fn) => fn(...args));
+    };
+  });
+
+  return result;
+}
@@ -0,0 +1,10 @@
+import { useMemo } from "react";
+
+export function useDefaultedProps<
+  P extends Record<string, any>,
+  D extends Partial<P>,
+>(props: P, defaults: D): P & D {
+  return useMemo(() => {
+    return { ...defaults, ...props };
+  }, [props, defaults]);
+}
@@ -0,0 +1,8 @@
+// useButtonSlots.ts
+import { useState } from "react";
+
+export function useSlotRegistry<S>() {
+    const [slots, setSlots] = useState<S>()
+
+    return { slots, setSlots }
+}