sh-ui-cli 0.43.0 → 0.44.0

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

@@ -0,0 +1,255 @@
+"use client";
+
+import * as React from "react";
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+function clamp(n: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, n));
+}
+
+function snap(value: number, step: number, min: number) {
+  if (step <= 0) return value;
+  return min + Math.round((value - min) / step) * step;
+}
+
+interface SliderContextValue {
+  value: number;
+  setValue: (next: number) => void;
+  min: number;
+  max: number;
+  step: number;
+  disabled: boolean;
+  ariaLabel?: string;
+  trackRef: React.RefObject<HTMLDivElement | null>;
+  setTrackEl: (el: HTMLDivElement | null) => void;
+  percent: string;
+}
+
+const SliderContext = React.createContext<SliderContextValue | null>(null);
+
+function useSliderContext(): SliderContextValue {
+  const ctx = React.useContext(SliderContext);
+  if (!ctx) throw new Error("Slider 하위 컴포넌트는 <Slider> 안에서만 사용할 수 있습니다.");
+  return ctx;
+}
+
+export function useSliderState(): Pick<
+  SliderContextValue,
+  "value" | "min" | "max" | "step" | "disabled"
+> {
+  const { value, min, max, step, disabled } = useSliderContext();
+  return { value, min, max, step, disabled };
+}
+
+export interface SliderProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+  value?: number;
+  defaultValue?: number;
+  onValueChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+  "aria-label"?: string;
+}
+
+export const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
+  function Slider(
+    {
+      value: valueProp,
+      defaultValue = 0,
+      onValueChange,
+      min = 0,
+      max = 100,
+      step = 1,
+      disabled = false,
+      className,
+      children,
+      "aria-label": ariaLabel,
+      ...rest
+    },
+    ref,
+  ) {
+    const isControlled = valueProp !== undefined;
+    const [internal, setInternal] = React.useState(defaultValue);
+    const rawValue = isControlled ? (valueProp as number) : internal;
+    const value = clamp(rawValue, min, max);
+
+    const trackRef = React.useRef<HTMLDivElement | null>(null);
+    const setTrackEl = React.useCallback((el: HTMLDivElement | null) => {
+      trackRef.current = el;
+    }, []);
+
+    const setValue = React.useCallback(
+      (next: number) => {
+        const snapped = clamp(snap(next, step, min), min, max);
+        if (snapped === value) return;
+        if (!isControlled) setInternal(snapped);
+        onValueChange?.(snapped);
+      },
+      [isControlled, max, min, onValueChange, step, value],
+    );
+
+    const ratio = max === min ? 0 : (value - min) / (max - min);
+    const percent = `${ratio * 100}%`;
+
+    const ctxValue = React.useMemo<SliderContextValue>(
+      () => ({
+        value, setValue, min, max, step, disabled, ariaLabel,
+        trackRef, setTrackEl, percent,
+      }),
+      [ariaLabel, disabled, max, min, percent, setTrackEl, setValue, step, value],
+    );
+
+    return (
+      <SliderContext.Provider value={ctxValue}>
+        <div
+          ref={ref}
+          {...rest}
+          className={cx(
+            "relative w-full py-[var(--space-2)] select-none",
+            disabled && "opacity-[var(--opacity-disabled)] pointer-events-none",
+            className,
+          )}
+          data-disabled={disabled || undefined}
+        >
+          {children ?? (
+            <SliderTrack>
+              <SliderRange />
+              <SliderThumb />
+            </SliderTrack>
+          )}
+        </div>
+      </SliderContext.Provider>
+    );
+  },
+);
+Slider.displayName = "Slider";
+
+export const SliderTrack = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  function SliderTrack({ className, onPointerDown: userOnPointerDown, children, ...props }, ref) {
+    const { disabled, setValue, min, max, setTrackEl, trackRef } = useSliderContext();
+
+    const mergedRef = React.useCallback(
+      (el: HTMLDivElement | null) => {
+        setTrackEl(el);
+        if (typeof ref === "function") ref(el);
+        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;
+      },
+      [ref, setTrackEl],
+    );
+
+    const moveToClient = (clientX: number) => {
+      const el = trackRef.current;
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      const ratio = clamp((clientX - r.left) / r.width, 0, 1);
+      setValue(min + ratio * (max - min));
+    };
+
+    const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+      userOnPointerDown?.(e);
+      if (e.defaultPrevented || disabled) return;
+      const el = trackRef.current;
+      if (!el) return;
+      el.setPointerCapture(e.pointerId);
+      moveToClient(e.clientX);
+
+      const onMove = (ev: PointerEvent) => moveToClient(ev.clientX);
+      const onUp = (ev: PointerEvent) => {
+        el.releasePointerCapture(ev.pointerId);
+        el.removeEventListener("pointermove", onMove);
+        el.removeEventListener("pointerup", onUp);
+      };
+      el.addEventListener("pointermove", onMove);
+      el.addEventListener("pointerup", onUp);
+    };
+
+    return (
+      <div
+        ref={mergedRef}
+        className={cx(
+          "relative w-full h-1.5 bg-background-muted rounded-full cursor-pointer touch-none",
+          className,
+        )}
+        onPointerDown={onPointerDown}
+        {...props}
+      >
+        {children ?? (
+          <>
+            <SliderRange />
+            <SliderThumb />
+          </>
+        )}
+      </div>
+    );
+  },
+);
+SliderTrack.displayName = "SliderTrack";
+
+export const SliderRange = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  function SliderRange({ className, style, ...props }, ref) {
+    const { percent } = useSliderContext();
+    return (
+      <div
+        ref={ref}
+        className={cx(
+          "absolute top-0 left-0 h-full bg-primary rounded-full pointer-events-none",
+          className,
+        )}
+        style={{ width: percent, ...style }}
+        {...props}
+      />
+    );
+  },
+);
+SliderRange.displayName = "SliderRange";
+
+export const SliderThumb = React.forwardRef<
+  HTMLDivElement,
+  Omit<React.HTMLAttributes<HTMLDivElement>, "role" | "tabIndex">
+>(function SliderThumb({ className, style, onKeyDown: userOnKeyDown, ...props }, ref) {
+  const { value, setValue, min, max, step, disabled, ariaLabel, percent } = useSliderContext();
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    userOnKeyDown?.(e);
+    if (e.defaultPrevented || disabled) return;
+    const big = e.shiftKey ? step * 10 : step;
+    switch (e.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        e.preventDefault(); setValue(value + big); break;
+      case "ArrowLeft":
+      case "ArrowDown":
+        e.preventDefault(); setValue(value - big); break;
+      case "Home": e.preventDefault(); setValue(min); break;
+      case "End": e.preventDefault(); setValue(max); break;
+      case "PageUp": e.preventDefault(); setValue(value + step * 10); break;
+      case "PageDown": e.preventDefault(); setValue(value - step * 10); break;
+    }
+  };
+
+  return (
+    <div
+      ref={ref}
+      role="slider"
+      tabIndex={disabled ? -1 : 0}
+      aria-label={ariaLabel}
+      aria-valuemin={min}
+      aria-valuemax={max}
+      aria-valuenow={value}
+      aria-disabled={disabled || undefined}
+      onKeyDown={onKeyDown}
+      className={cx(
+        "absolute top-1/2 w-4 h-4 -ml-2 -translate-y-1/2 bg-background border-2 border-primary rounded-full shadow-[0_1px_2px_rgba(0,0,0,0.1)] cursor-grab transition-transform duration-[80ms] active:cursor-grabbing active:scale-110 active:-translate-y-1/2 focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 [@media(hover:none)_and_(pointer:coarse)]:w-5 [@media(hover:none)_and_(pointer:coarse)]:h-5 [@media(hover:none)_and_(pointer:coarse)]:-ml-2.5",
+        className,
+      )}
+      style={{ left: percent, ...style }}
+      {...props}
+    />
+  );
+});
+SliderThumb.displayName = "SliderThumb";

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

@@ -0,0 +1,63 @@
+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 spinnerVariants = cva(
+  "inline-flex items-center justify-center align-middle text-current",
+  {
+    variants: {
+      size: {
+        sm: "w-3.5 h-3.5",
+        md: "w-[1.125rem] h-[1.125rem]",
+        lg: "w-6 h-6",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+export type SpinnerSize = NonNullable<VariantProps<typeof spinnerVariants>["size"]>;
+
+export interface SpinnerProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "role"> {
+  size?: SpinnerSize;
+  "aria-label"?: string;
+}
+
+export const Spinner = React.forwardRef<HTMLSpanElement, SpinnerProps>(
+  function Spinner(
+    { size = "md", className, "aria-label": ariaLabel = "로딩 중", ...props },
+    ref,
+  ) {
+    const ringBorder = size === "sm" ? "border-[1.5px]" : "border-2";
+    return (
+      <span
+        ref={ref}
+        role="status"
+        aria-live="polite"
+        aria-label={ariaLabel}
+        className={cx(spinnerVariants({ size }), className)}
+        {...props}
+      >
+        <span
+          aria-hidden
+          className={cx(
+            "inline-block w-full h-full rounded-full border-current border-t-transparent opacity-80 animate-[sh-ui-spinner-rotate_0.8s_linear_infinite] motion-reduce:[animation-duration:3s]",
+            ringBorder,
+          )}
+        />
+      </span>
+    );
+  },
+);
+Spinner.displayName = "Spinner";
+
+if (typeof document !== "undefined" && !document.querySelector("style[data-sh-ui-spinner]")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-sh-ui-spinner", "");
+  style.textContent = `@keyframes sh-ui-spinner-rotate { to { transform: rotate(360deg) } }`;
+  document.head.appendChild(style);
+}

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

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import { cva, type VariantProps } from "class-variance-authority";
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+const switchRoot = cva(
+  "inline-flex items-center border-none rounded-full bg-background-muted cursor-pointer shrink-0 p-0.5 transition-colors duration-150 hover:not-data-[disabled]:bg-border-strong focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 data-[checked]:bg-primary data-[checked]:hover:not-data-[disabled]:bg-primary-hover data-[disabled]:opacity-[var(--opacity-disabled)] data-[disabled]:cursor-not-allowed motion-reduce:transition-none",
+  {
+    variants: {
+      size: {
+        sm: "w-8 h-[1.125rem]",
+        md: "w-10 h-[1.375rem]",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+const switchThumb = cva(
+  "block rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.12)] transition-transform duration-150 ease-out motion-reduce:transition-none",
+  {
+    variants: {
+      size: {
+        sm: "w-3.5 h-3.5",
+        md: "w-[1.125rem] h-[1.125rem]",
+      },
+    },
+    defaultVariants: { size: "md" },
+  },
+);
+
+type SwitchSize = NonNullable<VariantProps<typeof switchRoot>["size"]>;
+
+export type SwitchProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseSwitch.Root>,
+  "className"
+> & {
+  className?: string;
+  size?: SwitchSize;
+};
+
+export const Switch = React.forwardRef<HTMLElement, SwitchProps>(
+  ({ className, size = "md", ...props }, ref) => (
+    <BaseSwitch.Root
+      ref={ref}
+      className={cx(switchRoot({ size }), className)}
+      {...props}
+    >
+      <BaseSwitch.Thumb
+        className={cx(
+          switchThumb({ size }),
+          size === "sm" && "data-[checked]:translate-x-3.5",
+          size === "md" && "data-[checked]:translate-x-[1.125rem]",
+        )}
+      />
+    </BaseSwitch.Root>
+  ),
+);
+Switch.displayName = "Switch";

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

@@ -0,0 +1,113 @@
+"use client";
+
+import * as React from "react";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+export type TabsVariant = "underline" | "pill" | "plain";
+
+interface TabsContextValue { variant: TabsVariant; }
+const TabsContext = React.createContext<TabsContextValue>({ variant: "underline" });
+
+export type TabsProps = WithStringClassName<
+  React.ComponentPropsWithoutRef<typeof BaseTabs.Root>
+> & {
+  variant?: TabsVariant;
+};
+
+export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
+  ({ className, variant = "underline", ...props }, ref) => (
+    <TabsContext.Provider value={{ variant }}>
+      <BaseTabs.Root
+        ref={ref}
+        data-variant={variant}
+        className={cx("flex flex-col gap-[var(--space-3)] w-full data-[orientation=vertical]:flex-row", className)}
+        {...props}
+      />
+    </TabsContext.Provider>
+  ),
+);
+Tabs.displayName = "Tabs";
+
+const listVariantClasses =
+  "data-[variant=underline]:[&]:w-full data-[variant=underline]:[&]:gap-0 data-[variant=underline]:[&]:shadow-[inset_0_-1px_0_var(--border)] data-[variant=pill]:[&]:p-[var(--space-1)] data-[variant=pill]:[&]:bg-[var(--background-muted,var(--background))] data-[variant=pill]:[&]:border data-[variant=pill]:[&]:border-border data-[variant=pill]:[&]:rounded-[var(--radius)] [[data-orientation=vertical]_&]:flex-col [[data-orientation=vertical]_&]:items-stretch [[data-orientation=vertical][data-variant=underline]_&]:w-auto [[data-orientation=vertical][data-variant=underline]_&]:shadow-[inset_-1px_0_0_var(--border)]";
+
+export const TabsList = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseTabs.List>>
+>(({ className, ...props }, ref) => {
+  const { variant } = React.useContext(TabsContext);
+  return (
+    <BaseTabs.List
+      ref={ref}
+      data-variant={variant}
+      className={cx(
+        "relative inline-flex items-center gap-[var(--space-1)] w-fit",
+        listVariantClasses,
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+TabsList.displayName = "TabsList";
+
+const triggerVariantClasses =
+  "[[data-variant=underline]_&]:py-2.5 [[data-variant=underline]_&]:px-[var(--space-4)] [[data-variant=pill]_&]:py-1.5 [[data-variant=pill]_&]:px-[var(--space-3)] [[data-variant=pill]_&]:rounded-[calc(var(--radius)-2px)] [[data-variant=plain]_&]:py-1.5 [[data-variant=plain]_&]:px-[var(--space-2)] [[data-variant=plain]_&]:rounded-[calc(var(--radius)-2px)] data-[selected]:[[data-variant=plain]_&]:bg-[var(--background-muted,transparent)]";
+
+export const TabsTrigger = React.forwardRef<
+  HTMLButtonElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseTabs.Tab>>
+>(({ className, ...props }, ref) => (
+  <BaseTabs.Tab
+    ref={ref}
+    className={cx(
+      "relative z-[1] inline-flex items-center justify-center gap-1.5 py-[var(--space-2)] px-[var(--space-3)] bg-transparent text-foreground-muted border-0 text-[length:var(--text-sm)] font-medium leading-none cursor-pointer transition-[color,background-color] duration-[var(--duration-fast)] select-none whitespace-nowrap hover:not-disabled:not-data-[selected]:text-foreground focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 data-[selected]:text-foreground disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed",
+      triggerVariantClasses,
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = "TabsTrigger";
+
+const indicatorVariantClasses =
+  "[[data-variant=underline]_&]:shadow-[inset_0_-2px_0_var(--foreground)] [[data-variant=pill]_&]:bg-background [[data-variant=pill]_&]:rounded-[calc(var(--radius)-2px)] [[data-variant=pill]_&]:shadow-[0_1px_2px_rgba(0,0,0,0.06)] [[data-variant=plain]_&]:hidden [[data-orientation=vertical][data-variant=underline]_&]:shadow-[inset_-2px_0_0_var(--foreground)]";
+
+export const TabsIndicator = React.forwardRef<
+  HTMLSpanElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseTabs.Indicator>>
+>(({ className, ...props }, ref) => (
+  <BaseTabs.Indicator
+    ref={ref}
+    className={cx(
+      "absolute z-0 pointer-events-none transition-[top,left,width,height] duration-[180ms] data-[activation-direction=none]:transition-none top-[var(--active-tab-top)] left-[var(--active-tab-left)] w-[var(--active-tab-width)] h-[var(--active-tab-height)]",
+      indicatorVariantClasses,
+      className,
+    )}
+    {...props}
+  />
+));
+TabsIndicator.displayName = "TabsIndicator";
+
+export const TabsContent = React.forwardRef<
+  HTMLDivElement,
+  WithStringClassName<React.ComponentPropsWithoutRef<typeof BaseTabs.Panel>>
+>(({ className, ...props }, ref) => (
+  <BaseTabs.Panel
+    ref={ref}
+    className={cx(
+      "outline-none focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 focus-visible:rounded-[var(--radius)]",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = "TabsContent";
+
+export const useTabsVariant = () => React.useContext(TabsContext).variant;

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

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => (
+    <textarea
+      ref={ref}
+      className={cx(
+        "block w-full min-h-20 px-[var(--space-3)] py-[var(--space-2)] bg-background text-foreground border border-border rounded-[var(--radius)] font-[inherit] text-[length:var(--text-sm)] leading-normal resize-y transition-[border-color,box-shadow] duration-[var(--duration-fast)] placeholder:text-foreground-subtle hover:not-disabled:not-focus:border-border-strong focus:outline-none focus:border-foreground focus:shadow-[0_0_0_1px_var(--foreground)] disabled:opacity-[var(--opacity-disabled)] disabled:cursor-not-allowed disabled:bg-background-subtle read-only:bg-background-subtle aria-[invalid=true]:border-danger aria-[invalid=true]:focus:shadow-[0_0_0_1px_var(--danger)] [@media(hover:none)_and_(pointer:coarse)]:text-[length:var(--text-base)]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Textarea.displayName = "Textarea";

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

@@ -0,0 +1,111 @@
+"use client";
+
+import * as React from "react";
+import { Toggle as BaseToggle } from "@base-ui/react/toggle";
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
+import { cva, type VariantProps } from "class-variance-authority";
+
+function cx(...args: (string | undefined | false)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-1.5 border border-transparent rounded-[var(--radius)] font-medium leading-none cursor-pointer text-foreground-muted bg-transparent transition-[background-color,color,border-color] duration-[var(--duration-fast)] select-none 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 data-[pressed]:bg-background-muted data-[pressed]:text-foreground motion-reduce:transition-none",
+  {
+    variants: {
+      variant: {
+        outline:
+          "border-border hover:not-disabled:not-data-[pressed]:bg-background-muted hover:not-disabled:not-data-[pressed]:text-foreground data-[pressed]:border-border-strong",
+        ghost:
+          "hover:not-disabled:not-data-[pressed]:bg-background-muted hover:not-disabled:not-data-[pressed]:text-foreground",
+      },
+      size: {
+        sm: "h-[var(--control-sm)] px-2.5 text-[length:var(--text-sm)] [@media(hover:none)_and_(pointer:coarse)]:h-9",
+        md: "h-[var(--control-md)] px-[var(--space-3)] text-[length:var(--text-sm)] [@media(hover:none)_and_(pointer:coarse)]:h-11",
+        lg: "h-[var(--control-lg)] px-[var(--space-4)] text-[length:var(--text-base)]",
+      },
+    },
+    defaultVariants: { variant: "ghost", size: "md" },
+  },
+);
+
+export type ToggleVariant = NonNullable<VariantProps<typeof toggleVariants>["variant"]>;
+export type ToggleSize = NonNullable<VariantProps<typeof toggleVariants>["size"]>;
+
+export type ToggleProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseToggle>,
+  "className"
+> & {
+  className?: string;
+  variant?: ToggleVariant;
+  size?: ToggleSize;
+};
+
+export const Toggle = React.forwardRef<HTMLButtonElement, ToggleProps>(
+  ({ className, variant = "ghost", size = "md", ...props }, ref) => (
+    <BaseToggle
+      ref={ref}
+      className={cx(toggleVariants({ variant, size }), className)}
+      {...props}
+    />
+  ),
+);
+Toggle.displayName = "Toggle";
+
+export type ToggleGroupProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseToggleGroup>,
+  "className"
+> & {
+  className?: string;
+  variant?: ToggleVariant;
+  size?: ToggleSize;
+};
+
+interface ToggleGroupContextValue {
+  variant: ToggleVariant;
+  size: ToggleSize;
+}
+
+const ToggleGroupContext = React.createContext<ToggleGroupContextValue>({
+  variant: "ghost",
+  size: "md",
+});
+
+export const useToggleGroupStyle = () => React.useContext(ToggleGroupContext);
+
+export const ToggleGroup = React.forwardRef<HTMLDivElement, ToggleGroupProps>(
+  ({ className, variant = "ghost", size = "md", ...props }, ref) => (
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      <BaseToggleGroup
+        ref={ref}
+        className={cx(
+          "inline-flex items-center gap-[var(--space-1)] data-[orientation=vertical]:flex-col",
+          className,
+        )}
+        {...props}
+      />
+    </ToggleGroupContext.Provider>
+  ),
+);
+ToggleGroup.displayName = "ToggleGroup";
+
+export type ToggleGroupItemProps = Omit<
+  React.ComponentPropsWithoutRef<typeof BaseToggle>,
+  "className"
+> & {
+  className?: string;
+};
+
+export const ToggleGroupItem = React.forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
+  ({ className, ...props }, ref) => {
+    const { variant, size } = useToggleGroupStyle();
+    return (
+      <BaseToggle
+        ref={ref}
+        className={cx(toggleVariants({ variant, size }), className)}
+        {...props}
+      />
+    );
+  },
+);
+ToggleGroupItem.displayName = "ToggleGroupItem";

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

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+
+type WithStringClassName<T> = Omit<T, "className"> & { className?: string };
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+export const TooltipProvider = BaseTooltip.Provider;
+export const Tooltip = BaseTooltip.Root;
+export const TooltipTrigger = BaseTooltip.Trigger;
+
+export interface TooltipContentProps
+  extends WithStringClassName<
+    React.ComponentPropsWithoutRef<typeof BaseTooltip.Popup>
+  > {
+  side?: "top" | "right" | "bottom" | "left";
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+  showArrow?: boolean;
+  container?: React.ComponentPropsWithoutRef<
+    typeof BaseTooltip.Portal
+  >["container"];
+}
+
+export const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentProps>(
+  function TooltipContent(
+    { className, children, side, align, sideOffset = 6, showArrow, container, ...props },
+    ref,
+  ) {
+    return (
+      <BaseTooltip.Portal container={container}>
+        <BaseTooltip.Positioner
+          className="z-[var(--z-tooltip,var(--z-popover))] outline-none"
+          side={side}
+          align={align}
+          sideOffset={sideOffset}
+        >
+          <BaseTooltip.Popup
+            ref={ref}
+            className={cx(
+              "px-2.5 py-1.5 bg-foreground text-background rounded-[calc(var(--radius)-2px)] text-[length:var(--text-xs)] leading-snug max-w-xs shadow-[0_4px_12px_rgba(0,0,0,0.12)] origin-[var(--transform-origin)] outline-none transition-[opacity,transform] duration-[120ms] ease-out motion-reduce:transition-none data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95 motion-reduce:data-[starting-style]:scale-100 motion-reduce:data-[ending-style]:scale-100",
+              className,
+            )}
+            {...props}
+          >
+            {showArrow && <BaseTooltip.Arrow className="text-foreground [&_svg]:block" />}
+            {children}
+          </BaseTooltip.Popup>
+        </BaseTooltip.Positioner>
+      </BaseTooltip.Portal>
+    );
+  },
+);