raft-ui 0.0.4 → 0.0.5

package/README.md

@@ -6,7 +6,11 @@ React UI components for rui, styled with Tailwind CSS v4.
 
 ```tsx
 import { Button } from "raft-ui";
-import "raft-ui/styles.css";
+```
+
+```css
+@import "tailwindcss";
+@import "raft-ui/styles.css";
 ```
 
 ## Development

package/dist/index.d.mts

@@ -751,6 +751,74 @@ declare function DropdownMenuCheckboxItemIndicator({
 }: DropdownMenuCheckboxItemIndicatorProps): import("react").JSX.Element;
 //#endregion
 //#region src/components/tooltip/tooltip.d.ts
+declare const tooltip: import("tailwind-variants/lite").TVReturnType<{
+  theme: {
+    brutal: {
+      content: string[];
+      arrow: string[];
+    };
+    elegant: {
+      content: string[];
+      arrow: never[];
+    };
+  };
+  variant: {
+    default: {};
+    inverse: {
+      content: string[];
+    };
+  };
+}, {
+  trigger: string[];
+  positioner: string[];
+  content: string[];
+  arrow: string[];
+}, undefined, {
+  theme: {
+    brutal: {
+      content: string[];
+      arrow: string[];
+    };
+    elegant: {
+      content: string[];
+      arrow: never[];
+    };
+  };
+  variant: {
+    default: {};
+    inverse: {
+      content: string[];
+    };
+  };
+}, {
+  trigger: string[];
+  positioner: string[];
+  content: string[];
+  arrow: string[];
+}, import("tailwind-variants/lite").TVReturnType<{
+  theme: {
+    brutal: {
+      content: string[];
+      arrow: string[];
+    };
+    elegant: {
+      content: string[];
+      arrow: never[];
+    };
+  };
+  variant: {
+    default: {};
+    inverse: {
+      content: string[];
+    };
+  };
+}, {
+  trigger: string[];
+  positioner: string[];
+  content: string[];
+  arrow: string[];
+}, undefined, unknown, unknown, undefined>>;
+type TooltipStyleProps = VariantProps<typeof tooltip>;
 type TooltipProviderProps = Tooltip$1.Provider.Props;
 declare function TooltipProvider({
   delay,
@@ -767,7 +835,7 @@ type TooltipPortalProps = Tooltip$1.Portal.Props;
 declare function TooltipPortal(props: TooltipPortalProps): import("react").JSX.Element;
 type TooltipContentProps = StyledProps<Tooltip$1.Popup.Props> & Pick<Tooltip$1.Positioner.Props, "align" | "alignOffset" | "anchor" | "arrowPadding" | "collisionAvoidance" | "collisionBoundary" | "collisionPadding" | "disableAnchorTracking" | "positionMethod" | "side" | "sideOffset" | "sticky"> & {
   portalProps?: TooltipPortalProps;
-};
+} & Pick<TooltipStyleProps, "variant">;
 declare function TooltipContent({
   align,
   alignOffset,
@@ -782,6 +850,7 @@ declare function TooltipContent({
   sideOffset,
   sticky,
   portalProps,
+  variant,
   className,
   children,
   ...props
@@ -1871,6 +1940,7 @@ declare const heading: import("tailwind-variants/lite").TVReturnType<{
     primary: string[];
     information: string[];
     muted: string[];
+    placeholder: string[];
     accent: string[];
     success: string[];
     warning: string[];
@@ -1890,6 +1960,7 @@ declare const heading: import("tailwind-variants/lite").TVReturnType<{
     primary: string[];
     information: string[];
     muted: string[];
+    placeholder: string[];
     accent: string[];
     success: string[];
     warning: string[];
@@ -1909,6 +1980,7 @@ declare const heading: import("tailwind-variants/lite").TVReturnType<{
     primary: string[];
     information: string[];
     muted: string[];
+    placeholder: string[];
     accent: string[];
     success: string[];
     warning: string[];
@@ -1927,6 +1999,7 @@ declare const sans: import("tailwind-variants/lite").TVReturnType<{
     primary: string[];
     information: string[];
     muted: string[];
+    placeholder: string[];
     accent: string[];
     success: string[];
     warning: string[];
@@ -1944,6 +2017,7 @@ declare const sans: import("tailwind-variants/lite").TVReturnType<{
     primary: string[];
     information: string[];
     muted: string[];
+    placeholder: string[];
     accent: string[];
     success: string[];
     warning: string[];
@@ -1961,6 +2035,7 @@ declare const sans: import("tailwind-variants/lite").TVReturnType<{
     primary: string[];
     information: string[];
     muted: string[];
+    placeholder: string[];
     accent: string[];
     success: string[];
     warning: string[];
@@ -1979,6 +2054,7 @@ declare const mono: import("tailwind-variants/lite").TVReturnType<{
     primary: string[];
     information: string[];
     muted: string[];
+    placeholder: string[];
     accent: string[];
     success: string[];
     warning: string[];
@@ -1996,6 +2072,7 @@ declare const mono: import("tailwind-variants/lite").TVReturnType<{
     primary: string[];
     information: string[];
     muted: string[];
+    placeholder: string[];
     accent: string[];
     success: string[];
     warning: string[];
@@ -2013,6 +2090,7 @@ declare const mono: import("tailwind-variants/lite").TVReturnType<{
     primary: string[];
     information: string[];
     muted: string[];
+    placeholder: string[];
     accent: string[];
     success: string[];
     warning: string[];

package/dist/index.mjs

@@ -1621,7 +1621,7 @@ const dropdownMenu = tv({
 		submenuTrigger: ["flex w-full cursor-default select-none items-center gap-2 px-3 py-2 [@media(max-height:600px)]:py-1", "text-left text-sm outline-none transition-colors"],
 		label: [],
 		shortcut: ["ml-auto"],
-		itemCount: ["ml-auto tabular-nums"],
+		itemCount: ["ml-auto inline-flex min-w-5 justify-center gap-0 px-1 tabular-nums"],
 		separator: ["border-t-2"],
 		indicator: ["pointer-events-none ml-auto flex size-3 shrink-0 items-center justify-center"]
 	},
@@ -1648,7 +1648,7 @@ const dropdownMenu = tv({
 			],
 			label: ["border-b border-black px-3 py-2", "font-sans text-[10px] font-bold uppercase leading-none tracking-wide text-black/60"],
 			shortcut: ["font-sans text-sm font-semibold leading-6"],
-			itemCount: ["rounded border border-black bg-brutal-pink px-1.5 py-0.5", "font-sans text-[10px] leading-none font-bold text-white"],
+			itemCount: ["rounded border border-black bg-brutal-pink px-1 py-0.5", "font-sans text-[10px] leading-none font-bold text-white"],
 			separator: ["border-black"],
 			indicator: []
 		},
@@ -1883,8 +1883,8 @@ const tooltip = tv({
 		trigger: ["select-none"],
 		positioner: ["isolate z-50 outline-none"],
 		content: [
-			"relative inline-flex max-w-xs items-center gap-1.5 px-2.5 py-1.5",
-			"text-xs leading-4 whitespace-normal",
+			"relative inline-flex max-w-xs items-center gap-1.5 px-3 py-2",
+			"text-[13px] leading-[18px] whitespace-normal",
 			"origin-[var(--transform-origin)] outline-none",
 			"transition-[opacity,transform] duration-100",
 			"data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
@@ -1906,26 +1906,37 @@ const tooltip = tv({
 			"data-[side=inline-end]:left-[-8px] data-[side=inline-end]:rotate-90"
 		]
 	},
-	variants: { theme: {
-		brutal: {
-			content: [
-				"border-2 border-black bg-white",
-				"font-sans font-bold text-black",
-				"shadow-none",
-				"[&_[data-slot=kbd]]:text-black/60"
-			],
-			arrow: ["hidden"]
+	variants: {
+		theme: {
+			brutal: {
+				content: [
+					"border-2 border-black bg-white",
+					"font-sans font-bold text-black",
+					"shadow-none",
+					"[&_[data-slot=kbd]]:text-black/60"
+				],
+				arrow: ["hidden"]
+			},
+			elegant: {
+				content: [
+					"rounded-md bg-layer-popover",
+					"font-sans text-[13px] font-medium tracking-[-0.005em] text-foreground-strong",
+					"shadow-[0_0_0_1px_oklch(0.21_0.006_285_/_0.10),0_1px_1px_oklch(0.21_0.006_285_/_0.04),0_1px_4px_-3px_oklch(0.21_0.006_285_/_0.10)]",
+					"[&_[data-slot=kbd]]:bg-foreground-muted/10 [&_[data-slot=kbd]]:text-foreground-muted [&_[data-slot=kbd]]:ring-0"
+				],
+				arrow: []
+			}
 		},
-		elegant: {
-			content: [
-				"rounded-md bg-layer-popover",
-				"font-sans text-xs font-medium tracking-[-0.005em] text-foreground-strong",
-				"shadow-[0_0_0_1px_oklch(0.21_0.006_285_/_0.10),0_1px_1px_oklch(0.21_0.006_285_/_0.04),0_1px_4px_-3px_oklch(0.21_0.006_285_/_0.10)]",
-				"[&_[data-slot=kbd]]:bg-foreground-muted/10 [&_[data-slot=kbd]]:text-foreground-muted [&_[data-slot=kbd]]:ring-0"
-			],
-			arrow: []
+		variant: {
+			default: {},
+			inverse: { content: [
+				"bg-foreground-strong text-foreground-inverse",
+				"!shadow-[0_12px_24px_0_oklch(0.21_0.006_285_/_0.045),0_1px_2px_0_oklch(0.21_0.006_285_/_0.035)]",
+				"[&_[data-slot=kbd]]:bg-white/10 [&_[data-slot=kbd]]:text-foreground-inverse [&_[data-slot=kbd]]:ring-0"
+			] }
 		}
-	} }
+	},
+	defaultVariants: { variant: "default" }
 });
 function TooltipProvider({ delay = 0, ...props }) {
 	return /* @__PURE__ */ jsx(Tooltip$1.Provider, {
@@ -1950,16 +1961,20 @@ function TooltipPortal(props) {
 		...props
 	});
 }
-function TooltipArrow({ className, ...props }) {
-	const { arrow } = tooltip({ theme: useThemeFamily() });
+function TooltipArrow({ className, variant, ...props }) {
+	const { arrow } = tooltip({
+		theme: useThemeFamily(),
+		variant
+	});
 	return /* @__PURE__ */ jsx(Tooltip$1.Arrow, {
 		"data-slot": "tooltip-arrow",
 		className: arrow({ className }),
 		...props,
-		children: /* @__PURE__ */ jsx(TooltipArrowSvg, {})
+		children: /* @__PURE__ */ jsx(TooltipArrowSvg, { variant })
 	});
 }
-function TooltipArrowSvg(props) {
+function TooltipArrowSvg({ variant, ...props }) {
+	const isInverse = variant === "inverse";
 	return /* @__PURE__ */ jsxs("svg", {
 		width: "12",
 		height: "6",
@@ -1968,18 +1983,21 @@ function TooltipArrowSvg(props) {
 		...props,
 		children: [/* @__PURE__ */ jsx("path", {
 			d: "M1 0H11L6 5.25Z",
-			className: "fill-layer-popover"
+			className: isInverse ? "fill-foreground-strong" : "fill-layer-popover"
 		}), /* @__PURE__ */ jsx("path", {
 			d: "M1 0.5L6 5.25L11 0.5",
-			className: "stroke-[oklch(0.21_0.006_285_/_0.10)]",
+			className: isInverse ? "stroke-[oklch(0_0_0_/_0.18)]" : "stroke-[oklch(0.21_0.006_285_/_0.10)]",
 			strokeLinecap: "round",
 			strokeLinejoin: "round",
 			vectorEffect: "non-scaling-stroke"
 		})]
 	});
 }
-function TooltipContent({ align = "center", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = false, positionMethod = "fixed", side = "top", sideOffset = 6, sticky, portalProps, className, children, ...props }) {
-	const { positioner, content } = tooltip({ theme: useThemeFamily() });
+function TooltipContent({ align = "center", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking = false, positionMethod = "fixed", side = "top", sideOffset = 6, sticky, portalProps, variant, className, children, ...props }) {
+	const { positioner, content } = tooltip({
+		theme: useThemeFamily(),
+		variant
+	});
 	return /* @__PURE__ */ jsx(Tooltip$1.Portal, {
 		...portalProps,
 		children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
@@ -2000,7 +2018,7 @@ function TooltipContent({ align = "center", alignOffset = 0, anchor, arrowPaddin
 				"data-slot": "tooltip-content",
 				className: content({ className }),
 				...props,
-				children: [children, /* @__PURE__ */ jsx(TooltipArrow, {})]
+				children: [children, /* @__PURE__ */ jsx(TooltipArrow, { variant })]
 			})
 		})
 	});
@@ -3813,12 +3831,11 @@ function AvatarGroupCount({ size, className, ...props }) {
 const inlineCode = tv({
 	slots: { root: [] },
 	variants: { theme: {
-		brutal: { root: "border border-black bg-brutal-yellow/40 px-1 text-sm font-mono text-black [overflow-wrap:anywhere]" },
+		brutal: { root: ["border border-black bg-brutal-yellow/50 px-1.5", "font-mono text-sm font-medium text-black [overflow-wrap:anywhere]"] },
 		elegant: { root: [
-			"inline-flex items-center rounded px-2 py-0.5",
-			"font-mono text-xs font-medium",
-			"bg-layer-muted text-[oklch(0.38_0_0)] dark:text-[oklch(0.78_0_0)]",
-			"shadow-[0_0.5px_0.5px_-0.5px_oklch(0_0_0_/_0.08)]"
+			"inline-flex items-center rounded-md px-2.5 py-0.5",
+			"font-mono text-sm font-medium",
+			"bg-[oklch(0.955_0_0)] text-[oklch(0.44_0_0)] dark:bg-[oklch(0.24_0.006_286)] dark:text-[oklch(0.78_0_0)]"
 		] }
 	} }
 });
@@ -3837,6 +3854,7 @@ const textColorVariants = {
 	primary: ["text-primary-700"],
 	information: ["text-info-dark"],
 	muted: ["text-foreground-muted"],
+	placeholder: ["text-foreground-placeholder"],
 	accent: ["text-accent-700"],
 	success: ["text-success-base"],
 	warning: ["text-warning-base"],
@@ -4716,7 +4734,11 @@ const tabs = tv({
 	variants: {
 		theme: {
 			brutal: {
-				list: ["flex w-max max-w-full overflow-x-auto border-2 border-line-strong bg-layer-panel", "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"],
+				list: [
+					"flex w-max max-w-full overflow-x-auto border-2 border-line-strong bg-layer-panel",
+					"data-[sorting=true]:[overflow-x:hidden]",
+					"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+				],
 				background: "hidden",
 				tab: [
 					"bg-layer-panel px-4 py-1.5 text-xs font-semibold transition-colors",
@@ -4745,6 +4767,8 @@ const tabs = tv({
 				"group/tabs-list relative flex h-12 w-max max-w-full items-center gap-6 px-4",
 				"overflow-x-auto overflow-y-hidden overscroll-contain whitespace-nowrap",
 				"border-b border-line-muted",
+				"data-[sorting=true]:[overflow-x:hidden]",
+				"data-[sorting=true]:[&_[data-slot=tabs-indicator]]:opacity-0 data-[sorting=true]:[&_[data-slot=tabs-indicator]]:transition-none",
 				"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
 			],
 			background: ["pointer-events-none absolute inset-x-0 top-0 z-0 h-px bg-line-muted"],
@@ -4777,6 +4801,8 @@ const tabs = tv({
 				"group/tabs-list relative isolate flex h-auto w-max max-w-full items-center gap-1",
 				"overflow-x-auto overflow-y-visible overscroll-contain whitespace-nowrap",
 				"p-px",
+				"data-[sorting=true]:[overflow-x:hidden]",
+				"data-[sorting=true]:[&_[data-slot=tabs-indicator]]:opacity-0 data-[sorting=true]:[&_[data-slot=tabs-indicator]]:transition-none",
 				"[scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
 			],
 			background: ["pointer-events-none absolute inset-0 z-0 rounded-[7px] bg-layer-muted"],
@@ -4788,6 +4814,11 @@ const tabs = tv({
 				"data-[active]:text-[oklch(38%_.006_285)]",
 				"data-[active]:hover:text-[oklch(38%_.006_285)]",
 				"data-[active]:[&_[data-slot=tabs-label]]:text-[0.8125rem]",
+				"data-[reorderable=true]:data-[active]:bg-layer-panel",
+				"data-[reorderable=true]:data-[active]:shadow-[0_0_0_1px_oklch(0%_0_0/.1),0_1px_1px_-1px_oklch(0%_0_0/.04),0_1px_2px_oklch(0%_0_0/.03)]",
+				"group-has-[>[data-slot=tabs-background]]/tabs-list:data-[reorderable=true]:data-[active]:shadow-[0_0_0_1px_oklch(0%_0_0/.045),0_1px_1px_-1px_oklch(0%_0_0/.025),0_1px_2px_oklch(0%_0_0/.02)]",
+				"data-[dragging-active=true]:bg-layer-panel",
+				"data-[dragging-active=true]:shadow-[0_0_0_1px_oklch(0%_0_0/.1),0_1px_1px_-1px_oklch(0%_0_0/.04),0_1px_2px_oklch(0%_0_0/.03)]",
 				"[&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:[stroke-width:1.5]",
 				"[&_svg]:text-foreground-placeholder [&_svg]:transition-colors [&_svg]:duration-150 [&_svg]:ease-out",
 				"hover:[&_svg]:text-[oklch(42%_.006_285)]",
@@ -4809,7 +4840,6 @@ const tabs = tv({
 const TabsReorderContext = createContext({ enabled: false });
 const TabsValueContext = createContext(void 0);
 const TabsListVariantContext = createContext("default");
-const REORDER_ENABLED_CONTEXT = { enabled: true };
 function Tabs({ value, defaultValue, onValueChange, className, ...props }) {
 	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
 	const resolvedValue = value ?? uncontrolledValue;
@@ -4833,6 +4863,7 @@ function Tabs({ value, defaultValue, onValueChange, className, ...props }) {
 }
 function TabsList({ className, children, variant = "default", ...props }) {
 	const theme = useThemeFamily();
+	const reorder = use(TabsReorderContext);
 	const resolvedVariant = theme === "elegant" ? variant : "underline";
 	const { list } = tabs({
 		theme,
@@ -4845,20 +4876,33 @@ function TabsList({ className, children, variant = "default", ...props }) {
 			"data-variant": resolvedVariant,
 			className: list({ className }),
 			...props,
-			children: [children, theme === "elegant" ? /* @__PURE__ */ jsx(TabsIndicator, {}) : null]
+			children: [children, theme === "elegant" && !reorder.enabled ? /* @__PURE__ */ jsx(TabsIndicator, {}) : null]
 		})
 	});
 }
 function SortableTabsList({ value, onReorder, children, variant = "default", ...props }) {
+	const [activeId, setActiveId] = useState(void 0);
 	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }), useSensor(TouchSensor, { activationConstraint: {
 		delay: 350,
 		tolerance: 8
 	} }));
 	const tabIds = useMemo(() => value.map(String), [value]);
+	const reorderContext = useMemo(() => ({
+		enabled: true,
+		activeId
+	}), [activeId]);
 	return /* @__PURE__ */ jsx(DndContext, {
+		autoScroll: false,
 		sensors,
 		collisionDetection: closestCenter,
+		onDragStart: useCallback(({ active }) => {
+			setActiveId(String(active.id));
+		}, []),
+		onDragCancel: useCallback(() => {
+			setActiveId(void 0);
+		}, []),
 		onDragEnd: useCallback(({ active, over }) => {
+			setActiveId(void 0);
 			if (!over || active.id === over.id) return;
 			const oldIndex = tabIds.indexOf(String(active.id));
 			const newIndex = tabIds.indexOf(String(over.id));
@@ -4873,10 +4917,11 @@ function SortableTabsList({ value, onReorder, children, variant = "default", ...
 			items: tabIds,
 			strategy: horizontalListSortingStrategy,
 			children: /* @__PURE__ */ jsx(TabsReorderContext.Provider, {
-				value: REORDER_ENABLED_CONTEXT,
+				value: reorderContext,
 				children: /* @__PURE__ */ jsx(TabsList, {
 					variant,
 					...props,
+					"data-sorting": activeId ? "true" : void 0,
 					children
 				})
 			})
@@ -4891,10 +4936,12 @@ function TabsTab({ value, ...props }) {
 }
 function SortableTabsTab({ value, ...props }) {
 	const reorder = use(TabsReorderContext);
+	const activeValue = use(TabsValueContext);
 	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
 		id: value,
 		disabled: !reorder.enabled
 	});
+	const isDraggingActive = isDragging && activeValue === String(value);
 	if (!reorder.enabled) return /* @__PURE__ */ jsx(TabsTabButton, {
 		value,
 		...props
@@ -4910,10 +4957,11 @@ function SortableTabsTab({ value, ...props }) {
 	return /* @__PURE__ */ jsx(TabsTabButton, {
 		value,
 		sortableRef: setNodeRef,
+		...props,
+		"data-dragging-active": isDraggingActive ? "true" : void 0,
 		"data-dragging-source": isDragging ? "true" : void 0,
 		"data-reorderable": "true",
 		style,
-		...props,
 		...sortableAttributes,
 		...listeners
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "raft-ui",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "React UI components for Raft.",
   "license": "MIT",
   "repository": {
@@ -40,8 +40,6 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@fontsource-variable/geist-mono": "^5.2.8",
-    "@fontsource-variable/space-grotesk": "^5.2.10",
     "@tanstack/react-hotkeys": "^0.10.0",
     "cnfast": "^0.0.7",
     "lucide-react": "^1.21.0",

package/src/components/dropdown-menu/dropdown-menu.tsx

@@ -28,7 +28,7 @@ const dropdownMenu = tv({
     ],
     label: [],
     shortcut: ["ml-auto"],
-    itemCount: ["ml-auto tabular-nums"],
+    itemCount: ["ml-auto inline-flex min-w-5 justify-center gap-0 px-1 tabular-nums"],
     separator: ["border-t-2"],
     indicator: ["pointer-events-none ml-auto flex size-3 shrink-0 items-center justify-center"],
   },
@@ -63,7 +63,7 @@ const dropdownMenu = tv({
         ],
         shortcut: ["font-sans text-sm font-semibold leading-6"],
         itemCount: [
-          "rounded border border-black bg-brutal-pink px-1.5 py-0.5",
+          "rounded border border-black bg-brutal-pink px-1 py-0.5",
           "font-sans text-[10px] leading-none font-bold text-white",
         ],
         separator: ["border-black"],

package/src/components/inline-code/inline-code.tsx

@@ -9,14 +9,16 @@ const inlineCode = tv({
   variants: {
     theme: {
       brutal: {
-        root: "border border-black bg-brutal-yellow/40 px-1 text-sm font-mono text-black [overflow-wrap:anywhere]",
+        root: [
+          "border border-black bg-brutal-yellow/50 px-1.5",
+          "font-mono text-sm font-medium text-black [overflow-wrap:anywhere]",
+        ],
       },
       elegant: {
         root: [
-          "inline-flex items-center rounded px-2 py-0.5",
-          "font-mono text-xs font-medium",
-          "bg-layer-muted text-[oklch(0.38_0_0)] dark:text-[oklch(0.78_0_0)]",
-          "shadow-[0_0.5px_0.5px_-0.5px_oklch(0_0_0_/_0.08)]",
+          "inline-flex items-center rounded-md px-2.5 py-0.5",
+          "font-mono text-sm font-medium",
+          "bg-[oklch(0.955_0_0)] text-[oklch(0.44_0_0)] dark:bg-[oklch(0.24_0.006_286)] dark:text-[oklch(0.78_0_0)]",
         ],
       },
     },

package/src/components/tabs/tabs.tsx

@@ -16,6 +16,7 @@ import {
   useSensor,
   useSensors,
   type DragEndEvent,
+  type DragStartEvent,
 } from "@dnd-kit/core";
 import {
   arrayMove,
@@ -46,6 +47,7 @@ const tabs = tv({
       brutal: {
         list: [
           "flex w-max max-w-full overflow-x-auto border-2 border-line-strong bg-layer-panel",
+          "data-[sorting=true]:[overflow-x:hidden]",
           "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
         ],
         background: "hidden",
@@ -79,6 +81,8 @@ const tabs = tv({
           "group/tabs-list relative flex h-12 w-max max-w-full items-center gap-6 px-4",
           "overflow-x-auto overflow-y-hidden overscroll-contain whitespace-nowrap",
           "border-b border-line-muted",
+          "data-[sorting=true]:[overflow-x:hidden]",
+          "data-[sorting=true]:[&_[data-slot=tabs-indicator]]:opacity-0 data-[sorting=true]:[&_[data-slot=tabs-indicator]]:transition-none",
           "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
         ],
         background: ["pointer-events-none absolute inset-x-0 top-0 z-0 h-px bg-line-muted"],
@@ -112,6 +116,8 @@ const tabs = tv({
           "group/tabs-list relative isolate flex h-auto w-max max-w-full items-center gap-1",
           "overflow-x-auto overflow-y-visible overscroll-contain whitespace-nowrap",
           "p-px",
+          "data-[sorting=true]:[overflow-x:hidden]",
+          "data-[sorting=true]:[&_[data-slot=tabs-indicator]]:opacity-0 data-[sorting=true]:[&_[data-slot=tabs-indicator]]:transition-none",
           "[scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
         ],
         background: ["pointer-events-none absolute inset-0 z-0 rounded-[7px] bg-layer-muted"],
@@ -123,6 +129,11 @@ const tabs = tv({
           "data-[active]:text-[oklch(38%_.006_285)]",
           "data-[active]:hover:text-[oklch(38%_.006_285)]",
           "data-[active]:[&_[data-slot=tabs-label]]:text-[0.8125rem]",
+          "data-[reorderable=true]:data-[active]:bg-layer-panel",
+          "data-[reorderable=true]:data-[active]:shadow-[0_0_0_1px_oklch(0%_0_0/.1),0_1px_1px_-1px_oklch(0%_0_0/.04),0_1px_2px_oklch(0%_0_0/.03)]",
+          "group-has-[>[data-slot=tabs-background]]/tabs-list:data-[reorderable=true]:data-[active]:shadow-[0_0_0_1px_oklch(0%_0_0/.045),0_1px_1px_-1px_oklch(0%_0_0/.025),0_1px_2px_oklch(0%_0_0/.02)]",
+          "data-[dragging-active=true]:bg-layer-panel",
+          "data-[dragging-active=true]:shadow-[0_0_0_1px_oklch(0%_0_0/.1),0_1px_1px_-1px_oklch(0%_0_0/.04),0_1px_2px_oklch(0%_0_0/.03)]",
           "[&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:[stroke-width:1.5]",
           "[&_svg]:text-foreground-placeholder [&_svg]:transition-colors [&_svg]:duration-150 [&_svg]:ease-out",
           "hover:[&_svg]:text-[oklch(42%_.006_285)]",
@@ -145,6 +156,7 @@ const tabs = tv({
 
 type TabsReorderContextValue = {
   enabled: boolean;
+  activeId?: string | undefined;
 };
 
 const TabsReorderContext = createContext<TabsReorderContextValue>({ enabled: false });
@@ -152,7 +164,6 @@ const TabsValueContext = createContext<string | undefined>(undefined);
 type TabsListVariant = "default" | "underline";
 
 const TabsListVariantContext = createContext<TabsListVariant>("default");
-const REORDER_ENABLED_CONTEXT = { enabled: true } as const satisfies TabsReorderContextValue;
 
 export type TabsProps<T extends string = string> = StyledProps<
   Omit<BaseTabs.Root.Props, "defaultValue" | "onValueChange" | "value">
@@ -199,6 +210,7 @@ export type TabsListProps = StyledProps<BaseTabs.List.Props> & {
 
 export function TabsList({ className, children, variant = "default", ...props }: TabsListProps) {
   const theme = useThemeFamily();
+  const reorder = use(TabsReorderContext);
   const resolvedVariant = theme === "elegant" ? variant : "underline";
   const { list } = tabs({ theme, variant: resolvedVariant });
 
@@ -211,7 +223,7 @@ export function TabsList({ className, children, variant = "default", ...props }:
         {...props}
       >
         {children}
-        {theme === "elegant" ? <TabsIndicator /> : null}
+        {theme === "elegant" && !reorder.enabled ? <TabsIndicator /> : null}
       </BaseTabs.List>
     </TabsListVariantContext.Provider>
   );
@@ -229,13 +241,25 @@ export function SortableTabsList<T extends string = string>({
   variant = "default",
   ...props
 }: SortableTabsListProps<T>) {
+  const [activeId, setActiveId] = useState<string | undefined>(undefined);
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
     useSensor(TouchSensor, { activationConstraint: { delay: 350, tolerance: 8 } }),
   );
   const tabIds = useMemo(() => value.map(String), [value]);
+  const reorderContext = useMemo(
+    () => ({ enabled: true, activeId }) as const satisfies TabsReorderContextValue,
+    [activeId],
+  );
+  const handleDragStart = useCallback(({ active }: DragStartEvent) => {
+    setActiveId(String(active.id));
+  }, []);
+  const handleDragCancel = useCallback(() => {
+    setActiveId(undefined);
+  }, []);
   const handleDragEnd = useCallback(
     ({ active, over }: DragEndEvent) => {
+      setActiveId(undefined);
       if (!over || active.id === over.id) return;
       const oldIndex = tabIds.indexOf(String(active.id));
       const newIndex = tabIds.indexOf(String(over.id));
@@ -246,10 +270,17 @@ export function SortableTabsList<T extends string = string>({
   );
 
   return (
-    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+    <DndContext
+      autoScroll={false}
+      sensors={sensors}
+      collisionDetection={closestCenter}
+      onDragStart={handleDragStart}
+      onDragCancel={handleDragCancel}
+      onDragEnd={handleDragEnd}
+    >
       <SortableContext items={tabIds} strategy={horizontalListSortingStrategy}>
-        <TabsReorderContext.Provider value={REORDER_ENABLED_CONTEXT}>
-          <TabsList variant={variant} {...props}>
+        <TabsReorderContext.Provider value={reorderContext}>
+          <TabsList variant={variant} {...props} data-sorting={activeId ? "true" : undefined}>
             {children}
           </TabsList>
         </TabsReorderContext.Provider>
@@ -273,10 +304,12 @@ export function SortableTabsTab<T extends string = string>({
   ...props
 }: SortableTabsTabProps<T>) {
   const reorder = use(TabsReorderContext);
+  const activeValue = use(TabsValueContext);
   const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
     id: value,
     disabled: !reorder.enabled,
   });
+  const isDraggingActive = isDragging && activeValue === String(value);
 
   if (!reorder.enabled) {
     return <TabsTabButton value={value} {...props} />;
@@ -295,10 +328,11 @@ export function SortableTabsTab<T extends string = string>({
     <TabsTabButton
       value={value}
       sortableRef={setNodeRef}
+      {...props}
+      data-dragging-active={isDraggingActive ? "true" : undefined}
       data-dragging-source={isDragging ? "true" : undefined}
       data-reorderable="true"
       style={style}
-      {...props}
       {...sortableAttributes}
       {...listeners}
     />

package/src/components/text/text.tsx

@@ -7,6 +7,7 @@ const textColorVariants = {
   primary: ["text-primary-700"],
   information: ["text-info-dark"],
   muted: ["text-foreground-muted"],
+  placeholder: ["text-foreground-placeholder"],
   accent: ["text-accent-700"],
   success: ["text-success-base"],
   warning: ["text-warning-base"],

package/src/components/tooltip/tooltip.tsx

@@ -1,6 +1,6 @@
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import type { ComponentProps } from "react";
-import { tv } from "../../lib/tv.ts";
+import { tv, type VariantProps } from "../../lib/tv.ts";
 import type { StyledProps } from "../../lib/styled-props.ts";
 import { useThemeFamily } from "../../lib/theme/use-theme.ts";
 
@@ -9,8 +9,8 @@ const tooltip = tv({
     trigger: ["select-none"],
     positioner: ["isolate z-50 outline-none"],
     content: [
-      "relative inline-flex max-w-xs items-center gap-1.5 px-2.5 py-1.5",
-      "text-xs leading-4 whitespace-normal",
+      "relative inline-flex max-w-xs items-center gap-1.5 px-3 py-2",
+      "text-[13px] leading-[18px] whitespace-normal",
       "origin-[var(--transform-origin)] outline-none",
       "transition-[opacity,transform] duration-100",
       "data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
@@ -46,16 +46,31 @@ const tooltip = tv({
       elegant: {
         content: [
           "rounded-md bg-layer-popover",
-          "font-sans text-xs font-medium tracking-[-0.005em] text-foreground-strong",
+          "font-sans text-[13px] font-medium tracking-[-0.005em] text-foreground-strong",
           "shadow-[0_0_0_1px_oklch(0.21_0.006_285_/_0.10),0_1px_1px_oklch(0.21_0.006_285_/_0.04),0_1px_4px_-3px_oklch(0.21_0.006_285_/_0.10)]",
           "[&_[data-slot=kbd]]:bg-foreground-muted/10 [&_[data-slot=kbd]]:text-foreground-muted [&_[data-slot=kbd]]:ring-0",
         ],
         arrow: [],
       },
     },
+    variant: {
+      default: {},
+      inverse: {
+        content: [
+          "bg-foreground-strong text-foreground-inverse",
+          "!shadow-[0_12px_24px_0_oklch(0.21_0.006_285_/_0.045),0_1px_2px_0_oklch(0.21_0.006_285_/_0.035)]",
+          "[&_[data-slot=kbd]]:bg-white/10 [&_[data-slot=kbd]]:text-foreground-inverse [&_[data-slot=kbd]]:ring-0",
+        ],
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "default",
   },
 });
 
+type TooltipStyleProps = VariantProps<typeof tooltip>;
+
 export type TooltipProviderProps = BaseTooltip.Provider.Props;
 
 export function TooltipProvider({ delay = 0, ...props }: TooltipProviderProps) {
@@ -88,25 +103,35 @@ export function TooltipPortal(props: TooltipPortalProps) {
   return <BaseTooltip.Portal data-slot="tooltip-portal" {...props} />;
 }
 
-type TooltipArrowProps = StyledProps<BaseTooltip.Arrow.Props>;
+type TooltipArrowProps = StyledProps<BaseTooltip.Arrow.Props> & Pick<TooltipStyleProps, "variant">;
 
-function TooltipArrow({ className, ...props }: TooltipArrowProps) {
+function TooltipArrow({ className, variant, ...props }: TooltipArrowProps) {
   const theme = useThemeFamily();
-  const { arrow } = tooltip({ theme });
+  const { arrow } = tooltip({ theme, variant });
   return (
     <BaseTooltip.Arrow data-slot="tooltip-arrow" className={arrow({ className })} {...props}>
-      <TooltipArrowSvg />
+      <TooltipArrowSvg variant={variant} />
     </BaseTooltip.Arrow>
   );
 }
 
-function TooltipArrowSvg(props: ComponentProps<"svg">) {
+function TooltipArrowSvg({
+  variant,
+  ...props
+}: ComponentProps<"svg"> & Pick<TooltipStyleProps, "variant">) {
+  const isInverse = variant === "inverse";
+
   return (
     <svg width="12" height="6" viewBox="0 0 12 6" fill="none" {...props}>
-      <path d="M1 0H11L6 5.25Z" className="fill-layer-popover" />
+      <path
+        d="M1 0H11L6 5.25Z"
+        className={isInverse ? "fill-foreground-strong" : "fill-layer-popover"}
+      />
       <path
         d="M1 0.5L6 5.25L11 0.5"
-        className="stroke-[oklch(0.21_0.006_285_/_0.10)]"
+        className={
+          isInverse ? "stroke-[oklch(0_0_0_/_0.18)]" : "stroke-[oklch(0.21_0.006_285_/_0.10)]"
+        }
         strokeLinecap="round"
         strokeLinejoin="round"
         vectorEffect="non-scaling-stroke"
@@ -132,7 +157,7 @@ export type TooltipContentProps = StyledProps<BaseTooltip.Popup.Props> &
     | "sticky"
   > & {
     portalProps?: TooltipPortalProps;
-  };
+  } & Pick<TooltipStyleProps, "variant">;
 
 export function TooltipContent({
   align = "center",
@@ -148,12 +173,13 @@ export function TooltipContent({
   sideOffset = 6,
   sticky,
   portalProps,
+  variant,
   className,
   children,
   ...props
 }: TooltipContentProps) {
   const theme = useThemeFamily();
-  const { positioner, content } = tooltip({ theme });
+  const { positioner, content } = tooltip({ theme, variant });
 
   return (
     <BaseTooltip.Portal {...portalProps}>
@@ -178,7 +204,7 @@ export function TooltipContent({
           {...props}
         >
           {children}
-          <TooltipArrow />
+          <TooltipArrow variant={variant} />
         </BaseTooltip.Popup>
       </BaseTooltip.Positioner>
     </BaseTooltip.Portal>

package/src/legacy/ReorderablePanelTabs.tsx

@@ -131,7 +131,12 @@ export default function ReorderablePanelTabs<T extends string>({
 
   return (
     <div className="overflow-x-auto border-b-2 border-black bg-white scrollbar-none">
-      <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <DndContext
+        autoScroll={false}
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragEnd={handleDragEnd}
+      >
         <SortableContext items={tabIds} strategy={horizontalListSortingStrategy}>
           <div className="flex min-w-max">
             {tabs.map((tab) => (

package/src/styles.css

@@ -1,5 +1,4 @@
-@import "tailwindcss";
-@import "./fonts/brutal.css";
+@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300..700&family=Hanken+Grotesk:wght@300..700&display=swap");
 
 /* Pure token contract. No legacy action/surface/destructive/component aliases. */
 
@@ -303,9 +302,9 @@
   --theme-shadow-lg: 4px 4px 0px var(--color-black);
   --theme-shadow-xl: 6px 6px 0px var(--line-strong);
 
-  --heading-font: "Space Grotesk Variable", "Space Grotesk", system-ui, sans-serif;
-  --sans-font: "Space Grotesk Variable", "Space Grotesk", system-ui, sans-serif;
-  --mono-font: "Geist Mono Variable", "Geist Mono", ui-monospace, monospace;
+  --heading-font: "Hanken Grotesk", system-ui, sans-serif;
+  --sans-font: "Hanken Grotesk", system-ui, sans-serif;
+  --mono-font: "Geist Mono", ui-monospace, monospace;
 }
 
 [data-theme="elegant"] {
@@ -408,7 +407,7 @@
 
   --heading-font: "Inter", system-ui, sans-serif;
   --sans-font: "Geist", system-ui, sans-serif;
-  --mono-font: "Geist Mono Variable", "Geist Mono", ui-monospace, monospace;
+  --mono-font: "Geist Mono", ui-monospace, monospace;
 }
 
 @media (prefers-color-scheme: dark) {

package/src/fonts/brutal.css

@@ -1,2 +0,0 @@
-@import "@fontsource-variable/space-grotesk/wght.css";
-@import "@fontsource-variable/geist-mono/wght.css";