sh-ui-cli 0.43.0 → 0.44.0

package/data/changelog/versions.json

@@ -2,6 +2,18 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$description": "sh-ui 릴리즈 노트 단일 소스. docs(React)와 showcase(Flutter)가 함께 읽는다. 새 릴리즈마다 맨 앞에 추가.",
   "versions": [
+    {
+      "version": "0.44.0",
+      "date": "2026-04-30",
+      "title": "Tailwind 변종 대규모 확대 — 32 컴포넌트 utility-class 변종",
+      "type": "minor",
+      "highlights": [
+        "**32 컴포넌트가 Tailwind utility-class 변종 제공** — separator, skeleton, avatar, spinner, progress, tooltip, badge, label, switch, toggle, checkbox, radio, textarea, breadcrumb, menubar, numeric-input, page-toc, slider, popover, accordion, dialog, code-panel, pagination, date-picker, tabs, dropdown-menu, context-menu, select, combobox + 기존 button/card/input. cva 기반 variant 매트릭스로 prop 시그니처는 plain 변종과 100% 동일.",
+        "**dependency 분기 일반화** — `class-variance-authority` 같은 Tailwind 전용 의존성은 `{name, frameworks: [\"tailwind\"]}` 객체 형식으로 표기 — plain 사용자에게는 install 안 됨. 6 개 컴포넌트 (button, avatar, badge, spinner, switch, toggle) 가 cva 사용.",
+        "**fallback 자연 동작** — Tailwind 변종이 아직 없는 form, code-editor, calendar, color-picker, markdown-editor, rich-text-editor, carousel, file-upload, toast, header, sidebar 는 add 시 plain 변종으로 자동 설치 + `ℹ <name> — Tailwind 변종 미제공` 알림. plain CSS 도 @theme inline 브리지 덕에 Tailwind v4 환경에서 그대로 동작."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.44.0"
+    },
     {
       "version": "0.43.0",
       "date": "2026-04-30",

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

@@ -0,0 +1,88 @@
+import * as React from "react";
+import { Accordion as BaseAccordion } from "@base-ui/react/accordion";
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+export type AccordionSize = "sm" | "md";
+
+type AccordionProps = WithStringClassName<
+  React.ComponentPropsWithoutRef<typeof BaseAccordion.Root>
+> & {
+  size?: AccordionSize;
+};
+
+export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
+  ({ className, size = "md", ...props }, ref) => (
+    <BaseAccordion.Root
+      ref={ref}
+      className={cx("flex flex-col w-full", className)}
+      data-size={size}
+      {...props}
+    />
+  ),
+);
+Accordion.displayName = "Accordion";
+
+export const AccordionItem = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseAccordion.Item>>
+>(({ className, ...props }, ref) => (
+  <BaseAccordion.Item
+    ref={ref}
+    className={cx("border-b border-border first:border-t", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+export const AccordionTrigger = React.forwardRef<
+  HTMLButtonElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseAccordion.Trigger>>
+>(({ className, children, ...props }, ref) => (
+  <BaseAccordion.Header className="m-0 font-[inherit]">
+    <BaseAccordion.Trigger
+      ref={ref}
+      className={cx(
+        "flex items-center justify-between gap-[var(--space-4)] w-full px-[var(--space-1)] py-[var(--space-4)] bg-transparent border-none text-foreground text-[0.9375rem] font-medium leading-snug text-left cursor-pointer transition-[background-color] duration-[var(--duration-fast)] hover:not-disabled:not-data-[disabled]:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 focus-visible:rounded-[calc(var(--radius)-2px)] disabled:cursor-not-allowed disabled:text-foreground-muted data-[disabled]:cursor-not-allowed data-[disabled]:text-foreground-muted [[data-size=sm]_&]:py-[var(--space-2)] [[data-size=sm]_&]:text-[length:var(--text-xs)] [[data-size=sm]_&]:leading-[1.2] motion-reduce:transition-none",
+        className,
+      )}
+      {...props}
+    >
+      <span className="min-w-0 [overflow-wrap:anywhere]">{children}</span>
+      <svg
+        className="shrink-0 text-foreground-muted transition-transform duration-[180ms] data-[panel-open]:rotate-180 [[data-size=sm]_&]:w-3 [[data-size=sm]_&]:h-3 motion-reduce:transition-none"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        aria-hidden="true"
+      >
+        <path d="M4 6l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    </BaseAccordion.Trigger>
+  </BaseAccordion.Header>
+));
+AccordionTrigger.displayName = "AccordionTrigger";
+
+export const AccordionContent = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseAccordion.Panel>>
+>(({ className, children, ...props }, ref) => (
+  <BaseAccordion.Panel
+    ref={ref}
+    className={cx(
+      "overflow-hidden h-[var(--accordion-panel-height)] transition-[height] duration-[var(--duration-slow)] data-[starting-style]:h-0 data-[ending-style]:h-0 motion-reduce:transition-none",
+      className,
+    )}
+    {...props}
+  >
+    <div className="px-[var(--space-1)] pb-[var(--space-4)] text-[length:var(--text-sm)] leading-relaxed text-foreground-muted [[data-size=sm]_&]:pb-[var(--space-2)] [[data-size=sm]_&]:text-[length:var(--text-xs)] [[data-size=sm]_&]:leading-[1.5]">
+      {children}
+    </div>
+  </BaseAccordion.Panel>
+));
+AccordionContent.displayName = "AccordionContent";

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

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
+import { cva, type VariantProps } from "class-variance-authority";
+
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+const avatarVariants = cva(
+  "relative inline-flex items-center justify-center shrink-0 align-middle overflow-hidden rounded-full bg-background-muted text-foreground-muted font-medium select-none",
+  {
+    variants: {
+      size: {
+        sm: "w-7 h-7 text-[length:var(--text-xs)]",
+        md: "w-10 h-10 text-[0.8125rem]",
+        lg: "w-12 h-12 text-[length:var(--text-sm)]",
+        xl: "w-16 h-16 text-[length:var(--text-base)]",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+export type AvatarSize = NonNullable<VariantProps<typeof avatarVariants>["size"]>;
+
+export interface AvatarProps
+  extends WithStringClassName<
+    React.ComponentPropsWithoutRef<typeof BaseAvatar.Root>
+  > {
+  size?: AvatarSize;
+}
+
+export const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
+  function Avatar({ className, size = "md", ...props }, ref) {
+    return (
+      <BaseAvatar.Root
+        ref={ref}
+        className={cx(avatarVariants({ size }), className)}
+        {...props}
+      />
+    );
+  },
+);
+
+export const AvatarImage = React.forwardRef<
+  HTMLImageElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseAvatar.Image>>
+>(function AvatarImage({ className, ...props }, ref) {
+  return (
+    <BaseAvatar.Image
+      ref={ref}
+      className={cx("w-full h-full object-cover block", className)}
+      {...props}
+    />
+  );
+});
+
+export const AvatarFallback = React.forwardRef<
+  HTMLSpanElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseAvatar.Fallback>>
+>(function AvatarFallback({ className, ...props }, ref) {
+  return (
+    <BaseAvatar.Fallback
+      ref={ref}
+      className={cx(
+        "inline-flex items-center justify-center w-full h-full uppercase tracking-[0.02em]",
+        className,
+      )}
+      {...props}
+    />
+  );
+});

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

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+const badgeVariants = cva(
+  "inline-flex items-center gap-1 px-2 border border-transparent rounded-full font-medium leading-none whitespace-nowrap align-middle select-none",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground",
+        secondary: "bg-background-muted text-foreground border-border",
+        success: "bg-[var(--success,#16a34a)] text-white",
+        warning: "bg-[var(--warning,#d97706)] text-white",
+        danger: "bg-danger text-[var(--danger-foreground,#fff)]",
+        outline: "bg-transparent text-foreground border-border-strong",
+      },
+      size: {
+        sm: "h-5 px-1.5 text-[0.6875rem]",
+        md: "h-6 text-[length:var(--text-xs)]",
+      },
+    },
+    defaultVariants: { variant: "primary", size: "md" },
+  },
+);
+
+export type BadgeVariant = NonNullable<VariantProps<typeof badgeVariants>["variant"]>;
+export type BadgeSize = NonNullable<VariantProps<typeof badgeVariants>["size"]>;
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+}
+
+export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
+  function Badge({ className, variant = "primary", size = "md", ...props }, ref) {
+    return (
+      <span
+        ref={ref}
+        className={cx(badgeVariants({ variant, size }), className)}
+        {...props}
+      />
+    );
+  },
+);

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

@@ -0,0 +1,138 @@
+import * as React from "react";
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+export const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.HTMLAttributes<HTMLElement>
+>(function Breadcrumb({ className, ...props }, ref) {
+  return (
+    <nav
+      ref={ref}
+      aria-label="Breadcrumb"
+      className={cx("text-[length:var(--text-sm)] text-foreground-muted", className)}
+      {...props}
+    />
+  );
+});
+
+export const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.OlHTMLAttributes<HTMLOListElement>
+>(function BreadcrumbList({ className, ...props }, ref) {
+  return (
+    <ol
+      ref={ref}
+      className={cx(
+        "flex items-center flex-wrap gap-1.5 m-0 p-0 list-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.LiHTMLAttributes<HTMLLIElement>
+>(function BreadcrumbItem({ className, ...props }, ref) {
+  return (
+    <li
+      ref={ref}
+      className={cx("inline-flex items-center gap-1.5 min-w-0", className)}
+      {...props}
+    />
+  );
+});
+
+export const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.AnchorHTMLAttributes<HTMLAnchorElement>
+>(function BreadcrumbLink({ className, ...props }, ref) {
+  return (
+    <a
+      ref={ref}
+      className={cx(
+        "text-foreground-muted no-underline rounded-[calc(var(--radius)-2px)] px-0.5 transition-colors duration-[var(--duration-fast)] hover:text-foreground hover:underline hover:underline-offset-[3px] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 motion-reduce:transition-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement>
+>(function BreadcrumbPage({ className, ...props }, ref) {
+  return (
+    <span
+      ref={ref}
+      role="link"
+      aria-current="page"
+      aria-disabled="true"
+      className={cx(
+        "text-foreground font-medium overflow-hidden text-ellipsis whitespace-nowrap",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+export const BreadcrumbSeparator = React.forwardRef<
+  HTMLLIElement,
+  React.LiHTMLAttributes<HTMLLIElement>
+>(function BreadcrumbSeparator({ className, children, ...props }, ref) {
+  return (
+    <li
+      ref={ref}
+      role="presentation"
+      aria-hidden="true"
+      className={cx(
+        "inline-flex items-center text-foreground-muted opacity-60",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? <ChevronRightIcon />}
+    </li>
+  );
+});
+
+export const BreadcrumbEllipsis = React.forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement>
+>(function BreadcrumbEllipsis({ className, ...props }, ref) {
+  return (
+    <span
+      ref={ref}
+      role="presentation"
+      aria-hidden="true"
+      className={cx(
+        "inline-flex items-center w-6 h-6 justify-center text-foreground-muted",
+        className,
+      )}
+      {...props}
+    >
+      <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" aria-hidden>
+        <circle cx="3" cy="8" r="1.25" />
+        <circle cx="8" cy="8" r="1.25" />
+        <circle cx="13" cy="8" r="1.25" />
+      </svg>
+      <span className="absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0 [clip:rect(0,0,0,0)]">
+        더 보기
+      </span>
+    </span>
+  );
+});
+
+function ChevronRightIcon() {
+  return (
+    <svg width="14" height="14" 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>
+  );
+}

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

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox";
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group";
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+export type CheckboxProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseCheckbox.Root>,
+  "className"
+> & {
+  className?: string;
+};
+
+export const Checkbox = React.forwardRef<HTMLElement, CheckboxProps>(
+  ({ className, ...props }, ref) => (
+    <BaseCheckbox.Root
+      ref={ref}
+      className={cx(
+        "inline-flex items-center justify-center w-[1.125rem] h-[1.125rem] border border-border-strong rounded-[calc(var(--radius)-2px)] bg-background text-primary-foreground cursor-pointer shrink-0 transition-[background-color,border-color] duration-[var(--duration-fast)] hover:not-data-[disabled]:border-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 data-[checked]:bg-primary data-[checked]:border-primary data-[indeterminate]:bg-primary data-[indeterminate]:border-primary data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:cursor-not-allowed motion-reduce:transition-none [@media(hover:none)_and_(pointer:coarse)]:w-5 [@media(hover:none)_and_(pointer:coarse)]:h-5",
+        className,
+      )}
+      {...props}
+    >
+      <BaseCheckbox.Indicator className="inline-flex items-center justify-center">
+        {props.indeterminate ? <MinusIcon /> : <CheckIcon />}
+      </BaseCheckbox.Indicator>
+    </BaseCheckbox.Root>
+  ),
+);
+Checkbox.displayName = "Checkbox";
+
+export type CheckboxGroupProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseCheckboxGroup>,
+  "className"
+> & {
+  className?: string;
+  orientation?: "horizontal" | "vertical";
+};
+
+export const CheckboxGroup = React.forwardRef<HTMLDivElement, CheckboxGroupProps>(
+  ({ className, orientation = "vertical", ...props }, ref) => (
+    <BaseCheckboxGroup
+      ref={ref}
+      className={cx(
+        "flex gap-2.5",
+        orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
+        className,
+      )}
+      data-orientation={orientation}
+      {...props}
+    />
+  ),
+);
+CheckboxGroup.displayName = "CheckboxGroup";
+
+function CheckIcon() {
+  return (
+    <svg viewBox="0 0 16 16" width="12" height="12" fill="none" aria-hidden>
+      <path d="M3.5 8.5l3 3 6-7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function MinusIcon() {
+  return (
+    <svg viewBox="0 0 16 16" width="12" height="12" fill="none" aria-hidden>
+      <path d="M4 8h8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+    </svg>
+  );
+}

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 };