sh-ui-cli 0.42.1 → 0.44.0

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

package/data/registry/react/peer-versions.json

@@ -3,6 +3,7 @@
   "versions": {
     "@base-ui/react": "^1.4.1",
     "@tanstack/react-form": "^1.29.1",
+    "class-variance-authority": "^0.7.1",
     "lucide-react": "^1.11.0",
     "react-hook-form": "^7.74.0",
     "shiki": "^4.0.2"