sh-ui-cli 0.42.1 → 0.44.0

package/README.md

@@ -151,7 +151,7 @@ npx -y sh-ui-cli mcp init --client claude-code --scope user
 ```json
 {
   "platform": "react",
-  "style": "default",
+  "cssFramework": "plain",
   "theme": { "base": "neutral", "radius": "md", "mode": "light-dark" },
   "paths": {
     "tokens": "src/shared/styles/tokens.css",
@@ -161,6 +161,11 @@ npx -y sh-ui-cli mcp init --client claude-code --scope user
 }
 ```
 
+`cssFramework` 옵션:
+
+- `"plain"` — CSS custom properties + 일반 .css 파일. 모든 컴포넌트 지원 (기본).
+- `"tailwind"` — Tailwind v4 utility class TSX 변종 (`class-variance-authority` 기반). button/card/input 부터 시작해 점진적으로 확대 중. 변종 미제공 컴포넌트는 add 시 plain 으로 자동 fallback — Tailwind v4 의 `@theme inline` 브리지가 sh-ui 토큰을 매핑하므로 plain CSS 도 그대로 동작.
+
 ## 더 알아보기
 
 - sh-ui 디자인 시스템: https://github.com/sanghyeonKim0201/sh-ui

package/data/changelog/versions.json

@@ -2,6 +2,31 @@
   "$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",
+      "title": "CSS 프레임워크 변종 시스템 + Tailwind 1차 지원",
+      "type": "minor",
+      "highlights": [
+        "**`cssFramework` 옵션 신설** — `sh-ui.config.json` 에 `cssFramework: \"plain\" | \"tailwind\"`. CLI `--css` / `sh-ui-cli init --cssFramework` / MCP `sh_ui_create_project` 의 `cssFramework` / playground UI 에서 모두 선택 가능. 기존 `style: \"default\"` 필드는 deprecated (무시).",
+        "**Tailwind v4 utility-class 변종** — `button`, `card`, `input` 의 utility-class 변종 (`class-variance-authority` 기반) 추가. registry.json 의 `frameworks: [\"plain\" | \"tailwind\"]` 분기 + dependency 분기 (`{name, frameworks}` 객체 형식) 지원. `cssFramework=\"tailwind\"` 인데 변종이 없는 컴포넌트는 plain 으로 자동 fallback — Tailwind v4 환경에서 그대로 동작.",
+        "**`@theme inline` 단일 소스** — `tokens.css` 가 Tailwind v4 의 `@theme inline { --color-*: var(--*); --radius-{sm,md,lg,xl}; }` 블록을 자동 emit. 템플릿(`nextjs-standalone`, `ui-app-template`)의 하드코딩 `@theme` 제거 — 토큰이 추가/변경돼도 매핑이 자동 동기화.",
+        "**토큰 emitter 디스패처** — `packages/tokens/build.mjs` 에 `(platform × cssFramework) → emitter` 테이블. 향후 `react/css-modules`, `react/vanilla-extract` 등 추가 시 한 줄로 등록."
+      ],
+      "url": "https://github.com/sanghyeonKim0201/sh-ui/releases/tag/v0.43.0"
+    },
     {
       "version": "0.42.1",
       "date": "2026-04-30",

package/data/registry/flutter/registry.json

@@ -1,5 +1,5 @@
 {
-  "$description": "Flutter 레지스트리 매니페스트 — CLI가 각 컴포넌트 name으로 조회해 files를 사용자 프로젝트의 lib/ 아래로 복사한다.",
+  "$description": "Flutter 레지스트리 매니페스트 — CLI가 각 컴포넌트 name으로 조회해 files를 사용자 프로젝트의 lib/ 아래로 복사한다. 컴포넌트 또는 file 엔트리에 frameworks?: string[] 옵션 — 미지정시 모든 cssFramework 에 적용, 지정시 해당 배열에 포함된 경우만 복사.",
   "components": {
     "tokens": {
       "name": "tokens",

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/button/index.tailwind.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-[var(--space-2)] border border-transparent rounded-[var(--radius)] font-medium leading-none cursor-pointer select-none transition-[background-color,color,border-color] duration-[var(--duration-fast)] disabled:opacity-[var(--opacity-disabled)] disabled:pointer-events-none focus-visible:outline-2 focus-visible:outline-foreground focus-visible:outline-offset-2 active:scale-[0.97] active:brightness-90",
+  {
+    variants: {
+      variant: {
+        primary:
+          "bg-primary text-primary-foreground hover:bg-primary-hover",
+        secondary:
+          "bg-background-muted text-foreground border-border hover:bg-background-subtle",
+        ghost:
+          "bg-transparent text-foreground hover:bg-background-muted",
+        danger:
+          "bg-danger text-danger-foreground hover:brightness-95",
+        link:
+          "bg-transparent text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        sm: "h-[var(--control-sm)] px-[var(--space-3)] text-[length:var(--text-sm)]",
+        md: "h-[var(--control-md)] px-[var(--space-4)] text-[length:var(--text-sm)]",
+        lg: "h-[var(--control-lg)] px-[var(--space-5)] text-[length:var(--text-base)]",
+      },
+    },
+    defaultVariants: { variant: "primary", size: "md" },
+  },
+);
+
+type Variant = NonNullable<VariantProps<typeof buttonVariants>["variant"]>;
+type Size = NonNullable<VariantProps<typeof buttonVariants>["size"]>;
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * 시각적 위계.
+   * - `primary` — 페이지의 주요 액션. 한 화면에 하나만 권장.
+   * - `secondary` — 보조 액션. 약한 배경 + border.
+   * - `ghost` — 배경 없는 hover 강조 액션. 툴바/메뉴 항목에 적합.
+   * - `danger` — 파괴적 액션(삭제, 취소 등).
+   * - `link` — 텍스트 링크처럼 보이는 인라인 버튼.
+   *
+   * @default "primary"
+   */
+  variant?: Variant;
+  /**
+   * 크기.
+   * - `sm` — 조밀한 영역(테이블 행, 툴바)
+   * - `md` — 일반
+   * - `lg` — CTA·랜딩 영역
+   *
+   * @default "md"
+   */
+  size?: Size;
+}
+
+/**
+ * 사용자 액션을 트리거하는 기본 버튼 (Tailwind utility class 변종).
+ * variant로 시각적 위계(primary/secondary/ghost/danger/link)를,
+ * size로 크기를 결정한다. 페이지 이동 목적이면 anchor를 감싼 `link` variant를 사용할 것.
+ */
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = "primary", size = "md", className, ...props }, ref) => (
+    <button
+      ref={ref}
+      className={[buttonVariants({ variant, size }), className].filter(Boolean).join(" ")}
+      {...props}
+    />
+  ),
+);
+Button.displayName = "Button";

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

@@ -0,0 +1,111 @@
+import * as React from "react";
+
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+
+function mergeClass(base: string, extra?: string) {
+  return extra ? `${base} ${extra}` : base;
+}
+
+export const Card = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={mergeClass(
+        "flex flex-col gap-[var(--space-6)] py-[var(--space-6)] bg-background text-foreground border border-border rounded-[var(--radius)] max-sm:gap-[var(--space-4)] max-sm:py-[var(--space-4)]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+export const CardHeader = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="card-header"
+      className={mergeClass(
+        "grid grid-cols-1 auto-rows-auto gap-y-1.5 px-[var(--space-6)] has-[[data-slot=card-action]]:grid-cols-[1fr_auto] max-sm:px-[var(--space-4)]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+export const CardTitle = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={mergeClass(
+        "text-[length:var(--text-base)] font-semibold leading-tight tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+export const CardDescription = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={mergeClass(
+        "text-[length:var(--text-sm)] leading-normal text-foreground-muted",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+CardDescription.displayName = "CardDescription";
+
+/**
+ * 헤더 우측에 배치되는 슬롯. CardHeader 내부에서 grid 2번째 컬럼을 차지.
+ * CardHeader가 `has-[[data-slot=card-action]]` 으로 감지해 레이아웃을 전환한다.
+ */
+export const CardAction = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="card-action"
+      className={mergeClass(
+        "col-start-2 row-span-2 self-start justify-self-end",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+CardAction.displayName = "CardAction";
+
+export const CardContent = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={mergeClass(
+        "px-[var(--space-6)] text-[length:var(--text-sm)] leading-relaxed max-sm:px-[var(--space-4)]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+export const CardFooter = React.forwardRef<HTMLDivElement, DivProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={mergeClass(
+        "px-[var(--space-6)] flex items-center gap-[var(--space-2)] max-sm:px-[var(--space-4)] max-sm:flex-wrap",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+CardFooter.displayName = "CardFooter";

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