@heyramzi/ui 6.1.0 → 8.0.0

package/src/shadcn/field/simple-field.test.ts

@@ -0,0 +1,47 @@
+import { createRawSnippet, flushSync, mount, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import SimpleField from "./simple-field.svelte";
+
+const input = createRawSnippet(() => ({ render: () => `<input id="email" />` }));
+
+function render(props: { error?: string; description?: string }) {
+  const target = document.createElement("div");
+  document.body.appendChild(target);
+  const app = mount(SimpleField, { target, props: { label: "Email", for: "email", children: input, ...props } });
+  flushSync();
+  return {
+    target,
+    done: () => {
+      void unmount(app);
+      target.remove();
+    },
+  };
+}
+
+describe("SimpleField", () => {
+  it("links the error to its input and marks it invalid", () => {
+    const { target, done } = render({ error: "Enter a valid email" });
+    const control = target.querySelector("input")!;
+    const message = target.querySelector("[data-slot=field-error]")!;
+    expect(message.textContent).toContain("Enter a valid email");
+    expect(message.getAttribute("role")).toBe("alert");
+    expect(control.getAttribute("aria-describedby")).toBe(message.id);
+    expect(control.getAttribute("aria-invalid")).toBe("true");
+    done();
+  });
+
+  it("links the description when there is no error", () => {
+    const { target, done } = render({ description: "We never share it" });
+    const control = target.querySelector("input")!;
+    const message = target.querySelector("[data-slot=field-description]")!;
+    expect(control.getAttribute("aria-describedby")).toBe(message.id);
+    expect(control.hasAttribute("aria-invalid")).toBe(false);
+    done();
+  });
+
+  it("leaves the input alone when there is nothing to say", () => {
+    const { target, done } = render({});
+    expect(target.querySelector("input")!.hasAttribute("aria-describedby")).toBe(false);
+    done();
+  });
+});

package/src/shadcn/hooks/highlighter.ts

@@ -0,0 +1,132 @@
+import {
+  createHighlighterCore,
+  type GrammarState,
+  type HighlighterCore,
+  type ThemedToken,
+} from "shiki/core";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+
+// Add the languages you need. Each one loads the first time it is used.
+const languages = {
+  bash: () => import("shiki/langs/shellscript.mjs"),
+  css: () => import("shiki/langs/css.mjs"),
+  diff: () => import("shiki/langs/diff.mjs"),
+  html: () => import("shiki/langs/html.mjs"),
+  javascript: () => import("shiki/langs/javascript.mjs"),
+  json: () => import("shiki/langs/json.mjs"),
+  jsx: () => import("shiki/langs/jsx.mjs"),
+  markdown: () => import("shiki/langs/markdown.mjs"),
+  python: () => import("shiki/langs/python.mjs"),
+  sql: () => import("shiki/langs/sql.mjs"),
+  svelte: () => import("shiki/langs/svelte.mjs"),
+  tsx: () => import("shiki/langs/tsx.mjs"),
+  typescript: () => import("shiki/langs/typescript.mjs"),
+  yaml: () => import("shiki/langs/yaml.mjs"),
+};
+
+const aliases: Record<string, keyof typeof languages> = {
+  js: "javascript",
+  md: "markdown",
+  py: "python",
+  sh: "bash",
+  shell: "bash",
+  shellscript: "bash",
+  ts: "typescript",
+  yml: "yaml",
+  zsh: "bash",
+};
+
+let highlighter: Promise<HighlighterCore> | undefined;
+
+function getHighlighter() {
+  highlighter ??= createHighlighterCore({
+    themes: [import("shiki/themes/github-light.mjs"), import("shiki/themes/github-dark.mjs")],
+    langs: [],
+    engine: createJavaScriptRegexEngine({ forgiving: true }),
+  });
+
+  return highlighter;
+}
+
+function getLanguage(language: string) {
+  const name = language.toLowerCase();
+
+  if (name === "ansi") {
+    return name;
+  }
+
+  if (name in languages) {
+    return name as keyof typeof languages;
+  }
+
+  return aliases[name] ?? null;
+}
+
+// One highlighted token. Render it as a `<span>` with this style and class.
+export type HighlightedToken = {
+  content: string;
+  style?: string;
+  class?: string;
+};
+
+// A line of plain text, or the highlighted tokens of a line.
+export type HighlightedLine = string | HighlightedToken[];
+
+function toHighlightedLine(tokens: ThemedToken[]): HighlightedToken[] {
+  return tokens.map((token) => ({
+    content: token.content,
+    style: Object.entries(token.htmlStyle ?? {})
+      .map(([property, value]) => `${property}:${value}`)
+      .join(";"),
+    class: "text-(--shiki-light) dark:text-(--shiki-dark)",
+  }));
+}
+
+export type Highlighter = NonNullable<Awaited<ReturnType<typeof loadHighlighter>>>;
+
+// Loads a language and returns a highlighter for it, or null for a language
+// that is not listed.
+export async function loadHighlighter(language: string) {
+  const lang = getLanguage(language);
+
+  if (!lang) {
+    return null;
+  }
+
+  const shiki = await getHighlighter();
+
+  if (lang !== "ansi" && !shiki.getLoadedLanguages().includes(lang)) {
+    await shiki.loadLanguage(languages[lang]);
+  }
+
+  return {
+    // Returns the tokens of each line, and the grammar state after the last
+    // line. Pass that state back to continue where the code left off.
+    highlight(code: string, state?: GrammarState) {
+      const tokenize = (text: string) =>
+        shiki.codeToTokens(text, {
+          lang,
+          themes: { light: "github-light", dark: "github-dark" },
+          defaultColor: false,
+          grammarState: state,
+        }).tokens;
+
+      // ANSI has no grammar state, so each line is tokenized on its own and
+      // gets the same colors whether it arrives in one piece or streams.
+      const tokens =
+        lang === "ansi" ? code.split("\n").flatMap((line) => tokenize(line)) : tokenize(code);
+
+      return {
+        lines: tokens.map((line) => toHighlightedLine(line)),
+        state: shiki.getLastGrammarState(tokens),
+      };
+    },
+  };
+}
+
+// Returns the tokens of each line, or null for a language that is not listed.
+export async function highlightCode(code: string, language: string) {
+  const highlighter = await loadHighlighter(language);
+
+  return highlighter ? highlighter.highlight(code).lines : null;
+}

package/src/shadcn/hooks/use-highlighted-code.svelte.ts

@@ -0,0 +1,98 @@
+import {
+  loadHighlighter,
+  type Highlighter,
+  type HighlightedLine,
+} from "./highlighter.js";
+import type { GrammarState } from "shiki/core";
+
+/**
+ * Highlights `code` in `language`. `current` holds one entry per line: a plain
+ * string until the highlighter loads, then the line's tokens. Pass each one to
+ * the `code` prop of a `CodeBlock.Line`.
+ *
+ * ```svelte
+ * <script lang="ts">
+ * 	const lines = useHighlightedCode(() => code, () => "json");
+ * </script>
+ *
+ * {#each lines.current as line, index (index)}
+ * 	<CodeBlock.Line code={line} />
+ * {/each}
+ * ```
+ */
+export function useHighlightedCode(value: () => string, language: () => string) {
+  let loaded = $state.raw<{
+    language: string;
+    highlighter: Highlighter | null;
+  } | null>(null);
+
+  $effect(() => {
+    const lang = language();
+    let cancelled = false;
+
+    loadHighlighter(lang)
+      .then((next) => {
+        if (!cancelled) {
+          loaded = { language: lang, highlighter: next };
+        }
+      })
+      .catch(() => {});
+
+    return () => {
+      cancelled = true;
+    };
+  });
+
+  // The complete lines, highlighted. While the code streams, only the new
+  // lines are tokenized, starting from the grammar state of the last one.
+  let done: {
+    highlighter: Highlighter | null;
+    text: string;
+    lines: HighlightedLine[];
+    state?: GrammarState;
+  } = { highlighter: null, text: "", lines: [] };
+
+  const lines = $derived.by((): HighlightedLine[] => {
+    const raw = value();
+    // A trailing newline would render as an extra empty line.
+    const code = raw.endsWith("\n") ? raw.slice(0, -1) : raw;
+    const lang = language();
+    const highlighter = loaded?.language === lang ? loaded.highlighter : null;
+
+    if (!highlighter) {
+      return code.split("\n");
+    }
+
+    let next = done;
+
+    if (next.highlighter !== highlighter || !code.startsWith(next.text)) {
+      next = { highlighter, text: "", lines: [] };
+    }
+
+    const end = code.lastIndexOf("\n") + 1;
+
+    if (end > next.text.length) {
+      const result = highlighter.highlight(code.slice(next.text.length, end - 1), next.state);
+
+      next = {
+        highlighter,
+        text: code.slice(0, end),
+        lines: [...next.lines, ...result.lines],
+        state: result.state,
+      };
+    }
+
+    done = next;
+
+    // The last line is still being written, so it is tokenized every time.
+    const tail = code.slice(end);
+
+    return [...next.lines, highlighter.highlight(tail, next.state).lines[0]];
+  });
+
+  return {
+    get current() {
+      return lines;
+    },
+  };
+}

package/src/shadcn/kbd/index.ts

@@ -0,0 +1,10 @@
+import Root from "./kbd.svelte";
+import Group from "./kbd-group.svelte";
+
+export {
+  Root,
+  Group,
+  //
+  Root as Kbd,
+  Group as KbdGroup,
+};

package/src/shadcn/kbd/kbd-group.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<kbd
+	bind:this={ref}
+	data-slot="kbd-group"
+	class={cn("inline-flex items-center gap-1", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</kbd>

package/src/shadcn/kbd/kbd.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "@heyramzi/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<kbd
+	bind:this={ref}
+	data-slot="kbd"
+	class={cn(
+		"bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium tabular-nums select-none [&_svg:not([class*='size-'])]:size-3",
+		className,
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</kbd>

package/src/shadcn/message-scroller/index.ts

@@ -0,0 +1,28 @@
+import Button from "./message-scroller-button.svelte";
+import Content from "./message-scroller-content.svelte";
+import Item from "./message-scroller-item.svelte";
+import Provider from "./message-scroller-provider.svelte";
+import Viewport from "./message-scroller-viewport.svelte";
+import Root from "./message-scroller.svelte";
+
+export {
+  useMessageScroller,
+  useMessageScrollerScrollable,
+  useMessageScrollerVisibility,
+} from "@shadcn-svelte/primitives/message-scroller";
+
+export {
+  Provider,
+  Root,
+  Viewport,
+  Content,
+  Item,
+  Button,
+  //
+  Provider as MessageScrollerProvider,
+  Root as MessageScroller,
+  Viewport as MessageScrollerViewport,
+  Content as MessageScrollerContent,
+  Item as MessageScrollerItem,
+  Button as MessageScrollerButton,
+};

package/src/shadcn/message-scroller/message-scroller-button.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+	import { ArrowDown } from "phosphor-svelte";
+	import { Button } from "../button/index.js";
+	import type { ButtonSize, ButtonVariant } from "../button/index.js";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		direction = "end",
+		class: className,
+		children,
+		child: childProp,
+		variant = "outline",
+		size = "sm",
+		...restProps
+	}: MessageScrollerPrimitive.ButtonProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
+</script>
+
+<MessageScrollerPrimitive.Button
+	bind:ref
+	data-slot="message-scroller-button"
+	data-direction={direction}
+	data-variant={variant}
+	data-size={size}
+	{direction}
+	class={cn(
+		"absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet child(state)}
+		{#if childProp}
+			{@render childProp(state)}
+		{:else}
+			<Button {variant} {size} icon={!children} {...state.props}>
+				{#if children}
+					{@render children()}
+				{:else}
+					<ArrowDown />
+					<span class="sr-only">
+						{direction === "end" ? "Scroll to end" : "Scroll to start"}
+					</span>
+				{/if}
+			</Button>
+		{/if}
+	{/snippet}
+</MessageScrollerPrimitive.Button>

package/src/shadcn/message-scroller/message-scroller-content.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: MessageScrollerPrimitive.ContentProps = $props();
+</script>
+
+<MessageScrollerPrimitive.Content
+	bind:ref
+	data-slot="message-scroller-content"
+	class={cn("gap-8 flex h-max min-h-full flex-col", className)}
+	{...restProps}
+/>

package/src/shadcn/message-scroller/message-scroller-item.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		scrollAnchor = false,
+		...restProps
+	}: MessageScrollerPrimitive.ItemProps = $props();
+</script>
+
+<MessageScrollerPrimitive.Item
+	bind:ref
+	data-slot="message-scroller-item"
+	{scrollAnchor}
+	class={cn(
+		"min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]",
+		className
+	)}
+	{...restProps}
+/>

package/src/shadcn/message-scroller/message-scroller-provider.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+
+	let { ...restProps }: MessageScrollerPrimitive.ProviderProps = $props();
+</script>
+
+<MessageScrollerPrimitive.Provider {...restProps} />

package/src/shadcn/message-scroller/message-scroller-viewport.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		...restProps
+	}: MessageScrollerPrimitive.ViewportProps = $props();
+</script>
+
+<MessageScrollerPrimitive.Viewport
+	bind:ref
+	data-slot="message-scroller-viewport"
+	class={cn(
+		"size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent data-pending-scroll:invisible",
+		className
+	)}
+	{...restProps}
+/>

package/src/shadcn/message-scroller/message-scroller.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { MessageScroller as MessageScrollerPrimitive } from "@shadcn-svelte/primitives/message-scroller";
+	import { cn } from "@heyramzi/utils";
+
+	let {
+		class: className,
+		ref = $bindable(null),
+		...restProps
+	}: MessageScrollerPrimitive.RootProps = $props();
+</script>
+
+<MessageScrollerPrimitive.Root
+	bind:ref
+	data-slot="message-scroller"
+	class={cn(
+		"group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden",
+		className
+	)}
+	{...restProps}
+/>

package/src/shadcn/radio-group/radio-group-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { RadioGroup as RadioGroupPrimitive } from "bits-ui";
-	import CircleIcon from "@lucide/svelte/icons/circle";
+	import { Circle } from "phosphor-svelte";
 	import { cn, type WithoutChildrenOrChild } from "@heyramzi/utils";
 
 	let {
@@ -22,7 +22,8 @@
 	{#snippet children({ checked })}
 		<div data-slot="radio-group-indicator" class="relative flex items-center justify-center">
 			{#if checked}
-				<CircleIcon
+				<Circle
+					weight="fill"
 					class="fill-primary absolute start-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2"
 				/>
 			{/if}

package/src/shadcn/sheet/sheet-content.svelte

@@ -4,6 +4,7 @@
 </script>
 
 <script lang="ts">
+	import "./sheet.css";
 	import { Dialog as SheetPrimitive } from "bits-ui";
 	import type { Snippet } from "svelte";
 	import SheetPortal from "./sheet-portal.svelte";

package/src/shadcn/sheet/sheet.css

@@ -0,0 +1,48 @@
+/* The sheet slide: transitions.dev panel reveal, owned by the sheet. */
+
+:root {
+  --sheet-open-dur: 300ms;
+  --sheet-close-dur: 250ms;
+  --sheet-translate: 100%;
+  --sheet-ease: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.t-sheet {
+  opacity: 0;
+  pointer-events: none;
+  transition:
+    transform var(--sheet-close-dur) var(--sheet-ease),
+    opacity var(--sheet-close-dur) var(--sheet-ease);
+  will-change: transform, opacity;
+}
+
+.t-sheet[data-side="right"] {
+  transform: translateX(var(--sheet-translate));
+}
+
+.t-sheet[data-side="left"] {
+  transform: translateX(calc(-1 * var(--sheet-translate)));
+}
+
+.t-sheet[data-side="top"] {
+  transform: translateY(calc(-1 * var(--sheet-translate)));
+}
+
+.t-sheet[data-side="bottom"] {
+  transform: translateY(var(--sheet-translate));
+}
+
+.t-sheet[data-state="open"] {
+  transform: translate(0, 0);
+  opacity: 1;
+  pointer-events: auto;
+  transition:
+    transform var(--sheet-open-dur) var(--sheet-ease),
+    opacity var(--sheet-open-dur) var(--sheet-ease);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .t-sheet {
+    transition: none !important;
+  }
+}

package/src/shadcn/sonner/sonner.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
-	import CircleCheckIcon from "@lucide/svelte/icons/circle-check";
-	import InfoIcon from "@lucide/svelte/icons/info";
-	import Loader2Icon from "@lucide/svelte/icons/loader-2";
-	import OctagonXIcon from "@lucide/svelte/icons/octagon-x";
-	import TriangleAlertIcon from "@lucide/svelte/icons/triangle-alert";
+	import { CheckCircle, Info, Warning, XCircle } from "phosphor-svelte";
 
+	import { Spinner } from "../spinner/index.js";
 	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
 	import { mode } from "mode-watcher";
 
@@ -17,18 +14,18 @@
 	style="--normal-bg: var(--color-popover); --normal-text: var(--color-popover-foreground); --normal-border: var(--color-border);"
 	{...restProps}
 	>{#snippet loadingIcon()}
-		<Loader2Icon class="size-4 animate-spin" />
+		<Spinner />
 	{/snippet}
 	{#snippet successIcon()}
-		<CircleCheckIcon class="size-4" />
+		<CheckCircle class="size-4" />
 	{/snippet}
 	{#snippet errorIcon()}
-		<OctagonXIcon class="size-4" />
+		<XCircle class="size-4" />
 	{/snippet}
 	{#snippet infoIcon()}
-		<InfoIcon class="size-4" />
+		<Info class="size-4" />
 	{/snippet}
 	{#snippet warningIcon()}
-		<TriangleAlertIcon class="size-4" />
+		<Warning class="size-4" />
 	{/snippet}
 </Sonner>

package/src/shadcn/tabs/tabs-list.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
 	import { Tabs as TabsPrimitive } from "bits-ui";
 	import { cn } from "@heyramzi/utils";
+	import { slidingPill } from "../../lib/sliding-pill.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		size = "default",
+		children,
 		...restProps
 	}: TabsPrimitive.ListProps & {
 		/** Same steps as Button: sm 28, default 32, lg 36. */
@@ -18,8 +20,17 @@
 	data-slot="tabs-list"
 	data-size={size}
 	class={cn(
-		"bg-muted text-muted-foreground group/tabs-list inline-flex data-[size=sm]:h-7 data-[size=default]:h-8 data-[size=lg]:h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+		"bg-muted text-muted-foreground group/tabs-list relative inline-flex data-[size=sm]:h-7 data-[size=default]:h-8 data-[size=lg]:h-9 w-fit items-center justify-center rounded-lg p-[3px]",
 		className,
 	)}
 	{...restProps}
-/>
+>
+	<!-- Zero width until the attachment measures, so a server-rendered list
+	     shows the trigger's own active background and never an empty pill. -->
+	<span
+		aria-hidden="true"
+		class="bg-background dark:border-input dark:bg-input/30 pointer-events-none absolute inset-y-[3px] left-0 z-0 w-0 rounded-md border border-transparent opacity-0 shadow-sm transition-[transform,width,opacity] duration-[var(--duration-fast,250ms)] ease-[var(--ease-smooth-out,cubic-bezier(0.22,1,0.36,1))] will-change-[transform,width] motion-reduce:transition-opacity"
+		{@attach slidingPill}
+	></span>
+	{@render children?.()}
+</TabsPrimitive.List>

package/src/shadcn/tabs/tabs-trigger.svelte

@@ -13,7 +13,7 @@
 	bind:ref
 	data-slot="tabs-trigger"
 	class={cn(
-		"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground relative inline-flex h-full flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 text-sm group-data-[size=sm]/tabs-list:text-[0.8rem] font-medium whitespace-nowrap after:absolute after:top-1/2 after:left-0 after:h-[max(100%,2rem)] after:w-full after:-translate-y-1/2 any-pointer-coarse:after:h-[max(100%,2.75rem)] transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+		"data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground group-data-[pill=on]/tabs-list:data-[state=active]:border-transparent group-data-[pill=on]/tabs-list:data-[state=active]:bg-transparent group-data-[pill=on]/tabs-list:data-[state=active]:shadow-none dark:group-data-[pill=on]/tabs-list:data-[state=active]:bg-transparent relative z-[1] inline-flex h-full flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 text-sm group-data-[size=sm]/tabs-list:text-[0.8rem] font-medium whitespace-nowrap after:absolute after:top-1/2 after:left-0 after:h-[max(100%,2rem)] after:w-full after:-translate-y-1/2 any-pointer-coarse:after:h-[max(100%,2.75rem)] transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		className,
 	)}
 	{...restProps}