sh-ui-cli 0.42.1 → 0.44.0

package/data/registry/react/components/code-panel/index.tailwind.tsx

@@ -0,0 +1,107 @@
+import { codeToHtml } from "shiki";
+import { CodePanelCopyButton } from "./copy";
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+export interface CodePanelProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  code?: string;
+  language?: string;
+  filename?: string;
+  showLineNumbers?: boolean;
+  hideCopy?: boolean;
+  children?: React.ReactNode;
+}
+
+const rootClasses =
+  "group relative border border-border rounded-[var(--radius)] bg-background-subtle overflow-hidden text-[0.8125rem] leading-relaxed my-[var(--space-4)] max-sm:text-[length:var(--text-xs)]";
+
+export async function CodePanel({
+  code, language = "text", filename, showLineNumbers = true, hideCopy, className, children, ...rest
+}: CodePanelProps) {
+  const classes = cx(rootClasses, className);
+
+  if (children !== undefined) {
+    return <div className={classes} {...rest}>{children}</div>;
+  }
+  if (code === undefined) throw new Error("CodePanel: `code` prop 또는 children 중 하나가 필요합니다.");
+
+  const trimmed = code.replace(/\n$/, "");
+
+  return (
+    <div className={classes} {...rest}>
+      {filename ? (
+        <CodePanelHeader>
+          <CodePanelFilename>{filename}</CodePanelFilename>
+          {!hideCopy && <CodePanelCopy code={trimmed} />}
+        </CodePanelHeader>
+      ) : (
+        !hideCopy && (
+          <div className="absolute top-[var(--space-2)] right-[var(--space-2)] z-[1] opacity-0 transition-opacity duration-[var(--duration-fast)] group-hover:opacity-100 group-focus-within:opacity-100">
+            <CodePanelCopy code={trimmed} />
+          </div>
+        )
+      )}
+      <CodePanelBody code={trimmed} language={language} showLineNumbers={showLineNumbers} />
+    </div>
+  );
+}
+
+export function CodePanelHeader({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cx(
+        "flex items-center justify-between gap-[var(--space-2)] py-[var(--space-2)] pl-[var(--space-4)] pr-[var(--space-3)] border-b border-border bg-background-muted text-[length:var(--text-xs)] text-foreground-muted",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function CodePanelFilename({ className, children, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span className={cx("font-mono text-foreground", className)} {...props}>{children}</span>
+  );
+}
+
+export interface CodePanelCopyProps { code: string; }
+export function CodePanelCopy({ code }: CodePanelCopyProps) {
+  return <CodePanelCopyButton code={code} />;
+}
+
+export interface CodePanelBodyProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "dangerouslySetInnerHTML"> {
+  code: string;
+  language?: string;
+  showLineNumbers?: boolean;
+}
+
+export async function CodePanelBody({
+  code, language = "text", showLineNumbers = true, className, ...rest
+}: CodePanelBodyProps) {
+  const trimmed = code.replace(/\n$/, "");
+  const html = await codeToHtml(trimmed, {
+    lang: language,
+    themes: { light: "github-light", dark: "github-dark" },
+    defaultColor: false,
+  });
+
+  return (
+    <div
+      className={cx(
+        "overflow-x-auto [&_pre]:m-0 [&_pre]:py-[var(--space-3)] [&_pre]:px-[var(--space-4)] [&_pre]:!bg-transparent [&_pre]:font-mono [&_pre]:text-[length:inherit] [&_pre]:leading-[inherit] [&_pre]:border-none [&_pre]:rounded-none [&_code]:bg-transparent [&_code]:p-0 [&_code]:text-[length:inherit] [&_code]:block [&_.shiki]:!text-[var(--shiki-light)] [&_.shiki_span]:!text-[var(--shiki-light)] [&_.shiki]:!bg-transparent [&_.shiki_span]:!bg-transparent [.dark_&_.shiki]:!text-[var(--shiki-dark)] [.dark_&_.shiki_span]:!text-[var(--shiki-dark)] data-[line-numbers]:[&_pre_code]:[counter-reset:step] data-[line-numbers]:[&_pre_code_.line]:before:[content:counter(step)] data-[line-numbers]:[&_pre_code_.line]:before:[counter-increment:step] data-[line-numbers]:[&_pre_code_.line]:before:inline-block data-[line-numbers]:[&_pre_code_.line]:before:w-7 data-[line-numbers]:[&_pre_code_.line]:before:mr-[var(--space-4)] data-[line-numbers]:[&_pre_code_.line]:before:text-right data-[line-numbers]:[&_pre_code_.line]:before:text-foreground-muted data-[line-numbers]:[&_pre_code_.line]:before:opacity-70 data-[line-numbers]:[&_pre_code_.line]:before:select-none",
+        className,
+      )}
+      data-line-numbers={showLineNumbers || undefined}
+      dangerouslySetInnerHTML={{ __html: html }}
+      {...rest}
+    />
+  );
+}
+
+export { CodePanelCopyButton };

package/data/registry/react/components/combobox/index.tailwind.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import * as React from "react";
+import { Combobox as BaseCombobox } from "@base-ui/react/combobox";
+
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+export const Combobox = BaseCombobox.Root;
+export const ComboboxIcon = BaseCombobox.Icon;
+export const ComboboxTrigger = BaseCombobox.Trigger;
+export const ComboboxClear = BaseCombobox.Clear;
+export const ComboboxValue = BaseCombobox.Value;
+export const ComboboxGroup = BaseCombobox.Group;
+export const ComboboxChips = BaseCombobox.Chips;
+
+export const ComboboxInput = React.forwardRef<
+  HTMLInputElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Input>>
+>(function ComboboxInput({ className, ...props }, ref) {
+  return (
+    <BaseCombobox.Input
+      ref={ref}
+      className={cx(
+        "inline-flex w-full min-w-40 h-[var(--control-md)] px-[var(--space-3)] bg-background text-foreground border border-border rounded-[var(--radius)] text-[length:var(--text-sm)] leading-none outline-none transition-[border-color] duration-[var(--duration-fast)] placeholder:text-foreground-subtle hover:not-disabled:border-border-strong focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const ComboboxContent = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Popup>> & {
+    container?: React.ComponentPropsWithoutRef<typeof BaseCombobox.Portal>["container"];
+    sideOffset?: number;
+  }
+>(function ComboboxContent({ className, children, container, sideOffset = 4, ...props }, ref) {
+  return (
+    <BaseCombobox.Portal container={container}>
+      <BaseCombobox.Positioner
+        className="z-[var(--z-dropdown)] outline-none w-[var(--anchor-width)]"
+        sideOffset={sideOffset}
+        align="start"
+      >
+        <BaseCombobox.Popup
+          ref={ref}
+          className={cx(
+            "max-h-[min(20rem,var(--available-height))] overflow-y-auto p-[var(--space-1)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[0_8px_24px_rgba(0,0,0,0.08)] outline-none origin-[var(--transform-origin)] transition-[opacity,transform] duration-[140ms] ease-out motion-reduce:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.97] data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.97]",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+        </BaseCombobox.Popup>
+      </BaseCombobox.Positioner>
+    </BaseCombobox.Portal>
+  );
+});
+
+export const ComboboxList = BaseCombobox.List;
+
+export const ComboboxItem = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Item>>
+>(function ComboboxItem({ className, children, ...props }, ref) {
+  return (
+    <BaseCombobox.Item
+      ref={ref}
+      className={cx(
+        "flex items-center gap-[var(--space-2)] py-1.5 px-3 text-[length:var(--text-sm)] leading-snug rounded-[calc(var(--radius)-2px)] cursor-pointer select-none outline-none data-[highlighted]:bg-background-muted hover:bg-background-muted data-[selected]:text-foreground data-[selected]:font-medium data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:pointer-events-none",
+        className,
+      )}
+      {...props}
+    >
+      <BaseCombobox.ItemIndicator className="order-1 ml-auto inline-flex items-center justify-center text-foreground">
+        <CheckIcon />
+      </BaseCombobox.ItemIndicator>
+      <span className="flex-1 overflow-hidden text-ellipsis whitespace-nowrap">{children}</span>
+    </BaseCombobox.Item>
+  );
+});
+
+export const ComboboxEmpty = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Empty>>
+>(function ComboboxEmpty({ className, ...props }, ref) {
+  return (
+    <BaseCombobox.Empty
+      ref={ref}
+      className={cx(
+        "py-[var(--space-3)] px-[var(--space-2)] text-center text-[0.8125rem] text-foreground-muted",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const ComboboxGroupLabel = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.GroupLabel>>
+>(function ComboboxGroupLabel({ className, ...props }, ref) {
+  return (
+    <BaseCombobox.GroupLabel
+      ref={ref}
+      className={cx(
+        "py-1.5 px-[var(--space-2)] pb-[var(--space-1)] text-[length:var(--text-xs)] font-semibold text-foreground-muted uppercase tracking-[0.04em]",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const ComboboxChip = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.Chip>>
+>(function ComboboxChip({ className, ...props }, ref) {
+  return (
+    <BaseCombobox.Chip
+      ref={ref}
+      className={cx(
+        "inline-flex items-center gap-[var(--space-1)] py-0.5 pr-1.5 pl-[var(--space-2)] mr-[var(--space-1)] text-[length:var(--text-xs)] leading-5 bg-background-muted rounded-[calc(var(--radius)-2px)] whitespace-nowrap",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const ComboboxChipRemove = React.forwardRef<
+  HTMLButtonElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseCombobox.ChipRemove>>
+>(function ComboboxChipRemove({ className, children, ...props }, ref) {
+  return (
+    <BaseCombobox.ChipRemove
+      ref={ref}
+      className={cx(
+        "inline-flex items-center justify-center w-4 h-4 p-0 border-0 rounded-full bg-transparent text-foreground-muted text-[length:var(--text-sm)] leading-none cursor-pointer transition-[background-color,color] duration-[var(--duration-fast)] hover:bg-background hover:text-foreground motion-reduce:transition-none",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? "×"}
+    </BaseCombobox.ChipRemove>
+  );
+});
+
+function CheckIcon() {
+  return (
+    <svg viewBox="0 0 16 16" width="14" height="14" fill="none" aria-hidden>
+      <path d="M3 8.5l3 3 7-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}

package/data/registry/react/components/context-menu/index.tailwind.tsx

@@ -0,0 +1,170 @@
+import * as React from "react";
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+const itemBase =
+  "relative flex items-center gap-[var(--space-2)] py-2 px-3 rounded-[calc(var(--radius)-2px)] cursor-pointer outline-none select-none transition-colors duration-[80ms] data-[highlighted]:bg-background-muted hover:bg-background-muted data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:pointer-events-none motion-reduce:transition-none";
+const itemCheck = "pl-7";
+const contentClasses =
+  "min-w-40 max-h-[min(24rem,var(--available-height,24rem))] overflow-y-auto p-[var(--space-1)] bg-background text-foreground border border-border rounded-[var(--radius)] shadow-[0_4px_6px_-1px_rgba(0,0,0,0.08),0_2px_4px_-2px_rgba(0,0,0,0.05)] text-[length:var(--text-sm)] origin-[var(--transform-origin)] animate-[sh-ui-cm-in_140ms_ease-out] data-[ending-style]:animate-[sh-ui-cm-out_100ms_ease-in_forwards] outline-none motion-reduce:animate-none motion-reduce:data-[ending-style]:animate-none";
+
+export const ContextMenu = BaseContextMenu.Root;
+
+export const ContextMenuTrigger = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.Trigger>>
+>(function ContextMenuTrigger({ className, ...props }, ref) {
+  return <BaseContextMenu.Trigger ref={ref} className={cx("contents", className)} {...props} />;
+});
+
+export interface ContextMenuContentProps
+  extends WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.Popup>> {
+  container?: React.ComponentPropsWithoutRef<typeof BaseContextMenu.Portal>["container"];
+}
+
+export const ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(
+  function ContextMenuContent({ className, children, container, ...props }, ref) {
+    return (
+      <BaseContextMenu.Portal container={container}>
+        <BaseContextMenu.Positioner className="outline-none z-[var(--z-dropdown)]">
+          <BaseContextMenu.Popup ref={ref} className={cx(contentClasses, className)} {...props}>
+            {children}
+          </BaseContextMenu.Popup>
+        </BaseContextMenu.Positioner>
+      </BaseContextMenu.Portal>
+    );
+  },
+);
+
+export const ContextMenuItem = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.Item>>
+>(function ContextMenuItem({ className, ...props }, ref) {
+  return <BaseContextMenu.Item ref={ref} className={cx(itemBase, className)} {...props} />;
+});
+
+export const ContextMenuCheckboxItem = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.CheckboxItem>>
+>(function ContextMenuCheckboxItem({ className, children, ...props }, ref) {
+  return (
+    <BaseContextMenu.CheckboxItem ref={ref} className={cx(itemBase, itemCheck, className)} {...props}>
+      <span className="absolute left-2 inline-flex items-center justify-center w-4 h-4 text-foreground" aria-hidden>
+        <BaseContextMenu.CheckboxItemIndicator>
+          <CheckIcon />
+        </BaseContextMenu.CheckboxItemIndicator>
+      </span>
+      <span className="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{children}</span>
+    </BaseContextMenu.CheckboxItem>
+  );
+});
+
+export const ContextMenuRadioGroup = BaseContextMenu.RadioGroup;
+
+export const ContextMenuRadioItem = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.RadioItem>>
+>(function ContextMenuRadioItem({ className, children, ...props }, ref) {
+  return (
+    <BaseContextMenu.RadioItem ref={ref} className={cx(itemBase, itemCheck, className)} {...props}>
+      <span className="absolute left-2 inline-flex items-center justify-center w-4 h-4 text-foreground" aria-hidden>
+        <BaseContextMenu.RadioItemIndicator>
+          <DotIcon />
+        </BaseContextMenu.RadioItemIndicator>
+      </span>
+      <span className="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{children}</span>
+    </BaseContextMenu.RadioItem>
+  );
+});
+
+export const ContextMenuGroup = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.Group>>
+>(function ContextMenuGroup({ className, ...props }, ref) {
+  return <BaseContextMenu.Group ref={ref} className={cx("p-0", className)} {...props} />;
+});
+
+export const ContextMenuLabel = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.GroupLabel>>
+>(function ContextMenuLabel({ className, ...props }, ref) {
+  return (
+    <BaseContextMenu.GroupLabel
+      ref={ref}
+      className={cx(
+        "py-[var(--space-2)] px-[var(--space-2)] pb-[var(--space-1)] text-[length:var(--text-xs)] font-semibold text-foreground-muted uppercase tracking-[0.04em]",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const ContextMenuSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  function ContextMenuSeparator({ className, ...props }, ref) {
+    return (
+      <div
+        ref={ref}
+        role="separator"
+        aria-orientation="horizontal"
+        className={cx("h-px bg-border my-[var(--space-1)]", className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const ContextMenuSub = BaseContextMenu.SubmenuRoot;
+
+export const ContextMenuSubTrigger = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseContextMenu.SubmenuTrigger>>
+>(function ContextMenuSubTrigger({ className, children, ...props }, ref) {
+  return (
+    <BaseContextMenu.SubmenuTrigger
+      ref={ref}
+      className={cx(itemBase, "data-[popup-open]:bg-background-muted", className)}
+      {...props}
+    >
+      <span className="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">{children}</span>
+      <span className="inline-flex items-center justify-center ml-auto text-foreground-muted" aria-hidden>
+        <ChevronRightIcon />
+      </span>
+    </BaseContextMenu.SubmenuTrigger>
+  );
+});
+
+export const ContextMenuSubContent = ContextMenuContent;
+
+function CheckIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path d="M3.5 8.5l3 3 6-7" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+function DotIcon() {
+  return <svg width="8" height="8" viewBox="0 0 8 8" fill="currentColor" aria-hidden><circle cx="4" cy="4" r="3" /></svg>;
+}
+function ChevronRightIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="none" aria-hidden>
+      <path d="M6 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+if (typeof document !== "undefined" && !document.querySelector("style[data-sh-ui-cm]")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-sh-ui-cm", "");
+  style.textContent = `
+@keyframes sh-ui-cm-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
+@keyframes sh-ui-cm-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.96); } }
+  `;
+  document.head.appendChild(style);
+}