@springbrand/message-panel 0.1.3-alpha.0 → 0.1.3-alpha.10

package/cloud-os/primitives/dropdown-menu.tsx

@@ -0,0 +1,82 @@
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import {
+  cloneElement,
+  isValidElement,
+  type ComponentProps,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { cn } from "../internal/cn";
+import { useCloudOsMode } from "../internal/theme-context";
+
+/**
+ * Kumo 的 DropdownMenu 用的是 `<DropdownMenu.Trigger render={<button/>} />`
+ * 这种「render prop 传元素」的写法。这里保留同一个调用面(免得改动拷来的 JSX),
+ * 内部翻译成 radix 的 asChild。
+ */
+function Root({ children }: { children: ReactNode }) {
+  return <DropdownMenuPrimitive.Root>{children}</DropdownMenuPrimitive.Root>;
+}
+
+function Trigger({ render }: { render: ReactElement }) {
+  return (
+    <DropdownMenuPrimitive.Trigger asChild>
+      {isValidElement(render)
+        ? // data-[popup-open] 是 Kumo 的开合标记,拷来的 className 里在用;
+          // radix 给的是 data-state="open",这里补一份等价属性。
+          cloneElement(render as ReactElement<Record<string, unknown>>, {})
+        : render}
+    </DropdownMenuPrimitive.Trigger>
+  );
+}
+
+function Content({
+  className,
+  collisionPadding = 12,
+  align = "start",
+  sideOffset = 6,
+  children,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  const mode = useCloudOsMode();
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-cloud-os-portal=""
+        data-mode={mode}
+        align={align}
+        sideOffset={sideOffset}
+        collisionPadding={collisionPadding}
+        className={cn("z-[1100] outline-none", className)}
+        {...props}
+      >
+        {children}
+      </DropdownMenuPrimitive.Content>
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function Item({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Item>) {
+  return (
+    <DropdownMenuPrimitive.Item
+      className={cn(
+        "flex cursor-pointer select-none items-center outline-none",
+        // Kumo 用 data-highlighted;radix 也叫 data-highlighted,直接通用。
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </DropdownMenuPrimitive.Item>
+  );
+}
+
+export const DropdownMenu = Object.assign(Root, {
+  Trigger,
+  Content,
+  Item,
+});

package/cloud-os/primitives/tooltip.tsx

@@ -0,0 +1,68 @@
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import type { ReactNode } from "react";
+import { cn } from "../internal/cn";
+import { useCloudOsMode } from "../internal/theme-context";
+
+/**
+ * 对齐 `@cloudflare/kumo` 的 `<Tooltip content side align asChild>` 调用面,
+ * 底座换成 radix —— 这样拷过来的 JSX 一个字都不用改,又不必把整个 Kumo
+ * 设计系统拖进本仓(它会和 ui 的 shadcn 主题在同一层 @theme 里打架)。
+ */
+export function TooltipProvider({ children }: { children: ReactNode }) {
+  return (
+    <TooltipPrimitive.Provider delayDuration={250} skipDelayDuration={300}>
+      {children}
+    </TooltipPrimitive.Provider>
+  );
+}
+
+export interface TooltipProps {
+  content: ReactNode;
+  children: ReactNode;
+  side?: "top" | "right" | "bottom" | "left";
+  align?: "start" | "center" | "end";
+  /** Kumo 里 asChild 表示「把触发器渲染成 children 本身」;radix 语义一致。 */
+  asChild?: boolean;
+  disabled?: boolean;
+}
+
+export function Tooltip({
+  content,
+  children,
+  side = "top",
+  align = "center",
+  asChild = false,
+  disabled = false,
+}: TooltipProps) {
+  const mode = useCloudOsMode();
+  if (disabled || content == null || content === "") return <>{children}</>;
+  return (
+    // 自带 Provider:radix 的 Root 必须活在 Provider 里,而这些行会被单独渲染
+    // (单测、宿主局部挂载)。Provider 可以嵌套,外面再包一层也不冲突。
+    <TooltipPrimitive.Provider delayDuration={250} skipDelayDuration={300}>
+      <TooltipPrimitive.Root>
+        <TooltipPrimitive.Trigger asChild={asChild}>
+          {children}
+        </TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Portal>
+          <TooltipPrimitive.Content
+            data-cloud-os-portal=""
+            data-mode={mode}
+            side={side}
+            align={align}
+            sideOffset={6}
+            collisionPadding={12}
+            className={cn(
+              "z-[1200] max-w-[min(28rem,90vw)] rounded-lg border px-2.5 py-1.5",
+              "text-[12px] leading-4 tracking-[-0.2px]",
+              "border-kumo-line bg-kumo-base text-kumo-default",
+              "shadow-[0_8px_20px_var(--color-kumo-tip-shadow)]",
+            )}
+          >
+            {content}
+          </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  );
+}

package/cloud-os/primitives/workshop-controls.tsx

@@ -0,0 +1,114 @@
+import type { ButtonHTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
+
+/**
+ * 从 cloudflare-os-main `components/WorkshopControls.tsx` 拷来。
+ * 唯一改动:底座从 `@cloudflare/kumo` 的 <Button>/<Input> 换成原生元素,
+ * 因为那几个组件除了 focus ring 之外的视觉全靠这里的 className 覆盖。
+ */
+
+const buttonBaseClassName =
+  "inline-flex cursor-pointer items-center justify-center rounded-lg text-[13px] leading-[18px] font-medium tracking-[-0.25px] transition-[background-color,color,opacity,transform] duration-150 ease-out active:scale-[0.98] disabled:cursor-not-allowed disabled:active:scale-100";
+
+const buttonToneClassNames = {
+  primary:
+    "!h-9 bg-kumo-contrast px-3 text-kumo-inverse enabled:hover:bg-kumo-strong disabled:opacity-50",
+  secondary:
+    "!h-8 border border-kumo-line bg-kumo-base px-3 text-kumo-default enabled:hover:bg-kumo-elevated disabled:opacity-40",
+  danger:
+    "!h-8 bg-kumo-danger px-3 text-white enabled:hover:opacity-90 disabled:opacity-50",
+} as const;
+
+type WorkshopButtonTone = keyof typeof buttonToneClassNames;
+
+type WorkshopButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  tone?: WorkshopButtonTone;
+};
+
+export function WorkshopButton({
+  tone = "secondary",
+  className = "",
+  type = "button",
+  ...props
+}: WorkshopButtonProps) {
+  return (
+    <button
+      type={type}
+      {...props}
+      className={`${buttonBaseClassName} ${buttonToneClassNames[tone]} ${className}`}
+    />
+  );
+}
+
+type WorkshopIconButtonProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "children"
+> & {
+  children: ReactNode;
+  danger?: boolean;
+  tone?: "ghost" | "primary";
+  "aria-label": string;
+};
+
+export function WorkshopIconButton({
+  children,
+  danger = false,
+  tone = "ghost",
+  className = "",
+  type = "button",
+  ...props
+}: WorkshopIconButtonProps) {
+  const toneClassName =
+    tone === "primary"
+      ? "bg-kumo-contrast text-kumo-inverse enabled:hover:bg-kumo-strong enabled:hover:text-kumo-inverse"
+      : danger
+        ? "text-kumo-subtle enabled:hover:bg-kumo-danger-tint enabled:hover:text-kumo-danger"
+        : "text-kumo-subtle enabled:hover:bg-kumo-tint enabled:hover:text-kumo-default";
+
+  return (
+    <button
+      type={type}
+      {...props}
+      className={`!flex !h-8 !w-8 shrink-0 cursor-pointer items-center justify-center rounded-md !p-0 transition-[background-color,color,opacity,transform] duration-150 ease-out active:scale-[0.96] disabled:cursor-not-allowed disabled:opacity-40 disabled:active:scale-100 ${toneClassName} ${className}`}
+    >
+      {children}
+    </button>
+  );
+}
+
+type WorkshopInputProps = InputHTMLAttributes<HTMLInputElement>;
+
+export function WorkshopInput({ className = "", ...props }: WorkshopInputProps) {
+  return (
+    <input
+      {...props}
+      className={`!h-9 rounded-lg border border-kumo-line bg-kumo-base px-3 text-[13px] leading-[18px] font-normal tracking-[-0.25px] text-kumo-default placeholder:text-kumo-inactive shadow-none focus:border-kumo-ring focus:outline-none focus:ring-1 focus:ring-kumo-ring/15 ${className}`}
+    />
+  );
+}
+
+export function CountBadge({
+  count,
+  tone = "tint",
+  max = 9,
+  className = "",
+}: {
+  count: number;
+  tone?: "solid" | "tint";
+  max?: number;
+  className?: string;
+}) {
+  if (count <= 0) return null;
+
+  const toneClassName =
+    tone === "solid"
+      ? "border border-kumo-base bg-kumo-brand text-white"
+      : "bg-kumo-brand/15 text-kumo-strong";
+
+  return (
+    <span
+      className={`grid h-4 min-w-4 flex-shrink-0 place-items-center rounded-full px-1 text-[10px] font-semibold leading-none tabular-nums ${toneClassName} ${className}`}
+    >
+      {count > max ? `${max}+` : count}
+    </span>
+  );
+}