shapes-ui 0.4.2 → 0.6.0

package/src/components/docs/markdown/components.tsx

@@ -1,8 +1,10 @@
 import React from "react";
 import type { ComponentProps } from "react";
 
+import { slugifyHeading } from "@/lib/docs-headings";
 import { cn } from "@/lib/utils";
 
+import { CopyButton } from "./copy-button";
 import { InstallationBlock } from "./installation-block";
 
 // Lightweight helpers used by the markdown components.
@@ -11,28 +13,6 @@ function getIconForLanguageExtension(_ext: string) {
   return null;
 }
 
-function CopyButton({ value }: { value: string }) {
-  const handleCopy = async () => {
-    if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) return;
-    try {
-      await navigator.clipboard.writeText(value);
-    } catch {
-      /* no-op */
-    }
-  };
-
-  return (
-    <button
-      onClick={handleCopy}
-      type="button"
-      aria-label="Copy"
-      className="ml-2 inline-flex items-center rounded-md bg-muted/30 px-2 py-1 text-sm"
-    >
-      Copy
-    </button>
-  );
-}
-
 function CodeBlockCommand({
   __npm__,
   __yarn__,
@@ -68,6 +48,113 @@ function CodeBlockCommand({
   );
 }
 
+function UsageCodeBlock({ value, lang = "tsx" }: { value: string; lang?: "tsx" | "typescript" }) {
+  const [highlighted, setHighlighted] = React.useState<string | null>(null);
+
+  React.useEffect(() => {
+    let isActive = true;
+
+    async function highlight() {
+      try {
+        const { codeToHtml } = await import("shiki");
+        const html = await codeToHtml(value, {
+          lang,
+          themes: {
+            light: "github-light",
+            dark: "github-dark",
+          },
+          defaultColor: false,
+          transformers: [
+            {
+              name: "line-numbers",
+              pre(node: any) {
+                node.properties["data-line-numbers"] = "";
+              },
+              line(node: any, line: number) {
+                node.properties.className = ["line"];
+                node.children.unshift({
+                  type: "element",
+                  tagName: "span",
+                  properties: {
+                    className: ["line-number"],
+                  },
+                  children: [{ type: "text", value: String(line) }],
+                });
+              },
+            },
+          ],
+        });
+
+        if (isActive) {
+          setHighlighted(html);
+        }
+      } catch {
+        if (isActive) {
+          setHighlighted(null);
+        }
+      }
+    }
+
+    highlight();
+
+    return () => {
+      isActive = false;
+    };
+  }, [value, lang]);
+
+  const lines = value.trim().split("\n");
+
+  return (
+    <div className="not-prose overflow-hidden  border ">
+      <div className="relative">
+        <CopyButton
+          value={value}
+          ariaLabel="Copy code"
+          className="absolute top-2 right-2 z-10 ml-0"
+        />
+
+        <div className="no-scrollbar max-h-112 min-w-0 overflow-auto px-4 py-3.5 font-mono text-xs">
+          {highlighted ? (
+            <div className="shiki-wrapper" dangerouslySetInnerHTML={{ __html: highlighted }} />
+          ) : (
+            <pre className="min-w-0 overflow-x-auto">
+              {lines.map((line, index) => (
+                <div key={`${index}-${line}`} className="grid grid-cols-[1.75rem_1fr] gap-4">
+                  <span className="text-right text-muted-foreground/50 select-none">
+                    {index + 1}
+                  </span>
+                  <code className="text-code-foreground block font-mono whitespace-pre">
+                    {line || " "}
+                  </code>
+                </div>
+              ))}
+            </pre>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function UsageSection({
+  from,
+  imports,
+  anatomy,
+}: {
+  from: string;
+  imports: string[];
+  anatomy: string;
+}) {
+  const importCode = `import {\n${imports.map((item) => `  ${item},`).join("\n")}\n} from "${from}"`;
+
+  return (
+    <div className="my-6 space-y-5">
+      <UsageCodeBlock value={importCode} lang="typescript" />
+      <UsageCodeBlock value={anatomy} lang="tsx" />
+    </div>
+  );
+}
+
 type TextProps = ComponentProps<"p">;
 type LinkProps = ComponentProps<"a">;
 type ListProps = ComponentProps<"ul">;
@@ -88,9 +175,34 @@ type TableRowProps = ComponentProps<"tr">;
 type TableHeaderProps = ComponentProps<"th">;
 type TableCellProps = ComponentProps<"td">;
 
+function getNodeText(node: React.ReactNode): string {
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
+  }
+
+  if (Array.isArray(node)) {
+    return node.map(getNodeText).join("");
+  }
+
+  if (React.isValidElement(node)) {
+    return getNodeText(node.props.children);
+  }
+
+  return "";
+}
+
+function getHeadingId(id: string | undefined, children: React.ReactNode) {
+  if (id) {
+    return id;
+  }
+
+  return slugifyHeading(getNodeText(children));
+}
+
 const H1 = ({ className, ...props }: ComponentProps<"h1">) => (
   <h1
-    className={cn("mt-2 scroll-m-28 font-heading text-3xl font-bold tracking-tight", className)}
+    id={getHeadingId(props.id, props.children)}
+    className={cn("mt-2 scroll-m-28 font-heading text-2xl font-bold tracking-tight", className)}
     {...props}
   />
 );
@@ -98,12 +210,7 @@ const H1 = ({ className, ...props }: ComponentProps<"h1">) => (
 const H2 = ({ className, ...props }: ComponentProps<"h2">) => {
   return (
     <h2
-      id={props.children
-        ?.toString()
-        .replace(/ /g, "-")
-        .replace(/'/g, "")
-        .replace(/\?/g, "")
-        .toLowerCase()}
+      id={getHeadingId(props.id, props.children)}
       className={cn(
         "[&+]*:[code]:text-xl mt-10 scroll-m-28 font-heading text-xl font-medium tracking-tight first:mt-0 lg:mt-12 [&+.steps]:!mt-0 [&+.steps>h3]:!mt-4 [&+h3]:!mt-6 [&+p]:!mt-4",
         className,
@@ -115,6 +222,7 @@ const H2 = ({ className, ...props }: ComponentProps<"h2">) => {
 
 const H3 = ({ className, ...props }: ComponentProps<"h3">) => (
   <h3
+    id={getHeadingId(props.id, props.children)}
     className={cn(
       "mt-12 scroll-m-28 font-heading text-lg font-medium tracking-tight [&+p]:!mt-4 *:[code]:text-xl",
       className,
@@ -125,6 +233,7 @@ const H3 = ({ className, ...props }: ComponentProps<"h3">) => (
 
 const H4 = ({ className, ...props }: ComponentProps<"h4">) => (
   <h4
+    id={getHeadingId(props.id, props.children)}
     className={cn("mt-8 scroll-m-28 font-heading text-base font-medium tracking-tight", className)}
     {...props}
   />
@@ -132,6 +241,7 @@ const H4 = ({ className, ...props }: ComponentProps<"h4">) => (
 
 const H5 = ({ className, ...props }: ComponentProps<"h5">) => (
   <h5
+    id={getHeadingId(props.id, props.children)}
     className={cn("mt-8 scroll-m-28 text-base font-medium tracking-tight", className)}
     {...props}
   />
@@ -139,6 +249,7 @@ const H5 = ({ className, ...props }: ComponentProps<"h5">) => (
 
 const H6 = ({ className, ...props }: ComponentProps<"h6">) => (
   <h6
+    id={getHeadingId(props.id, props.children)}
     className={cn("mt-8 scroll-m-28 text-base font-medium tracking-tight", className)}
     {...props}
   />
@@ -297,7 +408,9 @@ const Code = ({
 };
 
 export const mdxComponents = {
+  CopyButton,
   InstallationBlock,
+  UsageSection,
   h1: H1,
   h2: H2,
   h3: H3,

package/src/components/docs/markdown/copy-button.tsx

@@ -0,0 +1,41 @@
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { useState } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export function CopyButton({
+  value,
+  className,
+  ariaLabel = "Copy",
+}: {
+  value: string;
+  className?: string;
+  children?: React.ReactNode;
+  ariaLabel?: string;
+}) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy!", err);
+    }
+  };
+
+  return (
+    <Button
+      variant={"ghost"}
+      size={"icon-xs"}
+      onClick={handleCopy}
+      type="button"
+      aria-label={ariaLabel}
+      className={cn(className)}
+    >
+      {copied ? <CheckIcon className="text-success" /> : <CopyIcon />}
+    </Button>
+  );
+}

package/src/components/docs/markdown/installation-block.tsx

@@ -1,11 +1,13 @@
 "use client";
 
 import { Tabs } from "@base-ui/react/tabs";
-import { TerminalIcon, CheckIcon, CopyIcon } from "lucide-react";
+import { TerminalIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
+import { CopyButton } from "./copy-button";
+
 interface InstallationBlockProps {
   name: string;
 }
@@ -18,7 +20,6 @@ const PACKAGE_MANAGERS = [
 ];
 
 export function InstallationBlock({ name }: InstallationBlockProps) {
-  const [copied, setCopied] = React.useState(false);
   const [activeTab, setActiveTab] = React.useState("npx");
   const [highlighted, setHighlighted] = React.useState<string | null>(null);
 
@@ -75,18 +76,8 @@ export function InstallationBlock({ name }: InstallationBlockProps) {
     };
   }, [currentCommand]);
 
-  const copyToClipboard = async () => {
-    try {
-      await navigator.clipboard.writeText(currentCommand);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2000);
-    } catch (err) {
-      console.error("Failed to copy!", err);
-    }
-  };
-
   return (
-    <div className="not-prose my-6 w-full overflow-hidden rounded-xl border bg-background">
+    <div className="not-prose my-6 w-full overflow-hidden border bg-background">
       <Tabs.Root value={activeTab} onValueChange={setActiveTab}>
         <div className="flex h-10 items-center justify-between border-b px-3">
           <div className="flex items-center gap-3">
@@ -109,17 +100,7 @@ export function InstallationBlock({ name }: InstallationBlockProps) {
               ))}
             </Tabs.List>
           </div>
-          <button
-            onClick={copyToClipboard}
-            className="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground"
-            aria-label="Copy command"
-          >
-            {copied ? (
-              <CheckIcon className="h-3.5 w-3.5 text-success" />
-            ) : (
-              <CopyIcon className="h-3.5 w-3.5" />
-            )}
-          </button>
+          <CopyButton value={currentCommand} ariaLabel="Copy command" />
         </div>
 
         {PACKAGE_MANAGERS.map((pm) => (

package/src/components/docs/markdown/render-preview.tsx

@@ -104,7 +104,7 @@ export function RenderPreview({ name }: { name: string }) {
   const ExampleComponent = example.code;
 
   return (
-    <Tabs.Root className={"my-2 flex flex-col gap-2"}>
+    <Tabs.Root className={"my-2 flex max-w-sm flex-col gap-2 md:max-w-full"}>
       <Tabs.List className={"flex gap-2"}>
         <Tabs.Tab
           value="preview"

package/src/components/ui/badge.tsx

@@ -2,7 +2,7 @@ import { cva, VariantProps } from "class-variance-authority";
 import { ComponentProps } from "react";
 
 const badgeVariants = cva(
-  "group/badge inline-flex h-5 min-h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-lg border border-transparent px-2.5 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=end]:pr-1.5 has-data-[icon=start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  "group/badge inline-flex h-5 min-h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2.5 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=end]:pr-1.5 has-data-[icon=start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
   {
     variants: {
       variant: {

package/src/components/ui/button-group.tsx

@@ -43,7 +43,7 @@ function ButtonGroupText({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="button-group-text"
       className={cn(
-        "flex items-center gap-2 rounded-lg border bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-2 rounded-lg bg-muted px-2.5 text-sm font-medium [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}

package/src/components/ui/checkbox.tsx

@@ -10,7 +10,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer inline-flex size-4 max-w-4 shrink-0 items-center justify-center rounded border border-input bg-background transition-colors group-data-invalid/field:border-destructive focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none group-data-invalid/field:focus-visible:border-destructive group-data-invalid/field:focus-visible:ring-destructive/20 disabled:cursor-not-allowed disabled:opacity-50 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:group-data-invalid/field:border-destructive/50 dark:group-data-invalid/field:focus-visible:ring-destructive/40",
+        "peer inline-flex size-4 max-w-4 min-w-4 shrink-0 items-center justify-center rounded border border-input bg-background transition-colors group-data-invalid/field:border-destructive focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none group-data-invalid/field:focus-visible:border-destructive group-data-invalid/field:focus-visible:ring-destructive/20 disabled:cursor-not-allowed disabled:opacity-50 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:group-data-invalid/field:border-destructive/50 dark:group-data-invalid/field:focus-visible:ring-destructive/40",
         className,
       )}
       {...props}

package/src/components/ui/drawer.tsx

@@ -89,7 +89,7 @@ function DrawerPopup({
           data-slot="drawer-popup"
           data-position={position}
           className={cn(
-            "pointer-events-auto grid w-full gap-4 overflow-y-auto overscroll-contain bg-background p-6 text-sm text-foreground shadow-lg ring-1 ring-foreground/10 duration-150 outline-none data-closed:animate-out data-closed:fade-out-0 data-open:animate-in data-open:fade-in-0 data-swiping:transition-none data-swiping:select-none data-[position=bottom]:max-h-dvh data-[position=bottom]:w-dvw data-[position=bottom]:translate-y-[calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y))] data-[position=bottom]:slide-in-from-bottom-10 data-[position=left]:h-dvh data-[position=left]:w-[min(24rem,calc(100vw-1rem))] data-[position=left]:translate-x-(--drawer-swipe-movement-x)  data-[position=left]:slide-in-from-left-10 data-[position=right]:h-dvh data-[position=right]:w-[min(24rem,calc(100vw-1rem))] data-[position=right]:translate-x-(--drawer-swipe-movement-x)  data-[position=right]:slide-in-from-right-10 data-[position=top]:max-h-dvh data-[position=top]:w-dvw data-[position=top]:translate-y-[calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y))]  data-[position=top]:slide-in-from-top-10",
+            "pointer-events-auto grid w-full gap-4 overflow-y-auto overscroll-contain bg-background p-6 text-sm text-foreground shadow-lg ring-1 ring-foreground/10 duration-150 outline-none data-closed:animate-out data-closed:fade-out-0 data-open:animate-in data-open:fade-in-0 data-swiping:transition-none data-swiping:select-none data-[position=bottom]:max-h-dvh data-[position=bottom]:w-dvw data-[position=bottom]:translate-y-[calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y))] data-[position=bottom]:slide-in-from-bottom-10 data-[position=bottom]:[data-ending-style]:slide--from-bottom-10 data-[position=left]:h-dvh data-[position=left]:w-[min(24rem,calc(100vw-1rem))] data-[position=left]:translate-x-(--drawer-swipe-movement-x)  data-[position=left]:slide-in-from-left-10 data-[position=right]:h-dvh data-[position=right]:w-[min(24rem,calc(100vw-1rem))] data-[position=right]:translate-x-(--drawer-swipe-movement-x)  data-[position=right]:slide-in-from-right-10 data-[position=top]:max-h-dvh data-[position=top]:w-dvw data-[position=top]:translate-y-[calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y))]  data-[position=top]:slide-in-from-top-10 ",
 
             className,
           )}

package/src/components/ui/field.tsx

@@ -1,36 +1,18 @@
 "use client";
 
 import { Field as FieldPrimitive } from "@base-ui/react/field";
-import { cva, VariantProps } from "class-variance-authority";
 import { useMemo } from "react";
 
 import { cn } from "@/lib/utils";
 
-const fieldVariants = cva("group/field flex gap-2 data-[invalid=true]:text-destructive", {
-  variants: {
-    orientation: {
-      vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
-      horizontal:
-        "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-      responsive:
-        "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-    },
-  },
-  defaultVariants: {
-    orientation: "vertical",
-  },
-});
-
-function Field({
-  className,
-  orientation = "vertical",
-  ...props
-}: FieldPrimitive.Root.Props & VariantProps<typeof fieldVariants>) {
+function Field({ className, ...props }: FieldPrimitive.Root.Props) {
   return (
     <FieldPrimitive.Root
       data-slot="field-root"
-      data-orientation={orientation}
-      className={cn(fieldVariants({ orientation }), className)}
+      className={cn(
+        "group/field flex flex-col gap-2 *:w-full data-invalid:text-destructive [&>.sr-only]:w-auto",
+        className,
+      )}
       {...props}
     />
   );
@@ -41,8 +23,7 @@ function FieldLabel({ className, ...props }: FieldPrimitive.Label.Props) {
     <FieldPrimitive.Label
       data-slot="field-label"
       className={cn(
-        "group/field-label peer/field-label flex w-fit gap-2 text-sm leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
-        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        "group/field-label peer/field-label flex w-fit gap-1 text-sm leading-snug group-data-disabled/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
         className,
       )}
       {...props}
@@ -72,7 +53,7 @@ function FieldDescription({ className, ...props }: FieldPrimitive.Description.Pr
     <FieldPrimitive.Description
       data-slot="field-description"
       className={cn(
-        "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "text-left text-xs leading-normal font-normal text-muted-foreground [[data-variant=legend]+&]:-mt-1.5",
         "last:mt-0 nth-last-2:-mt-1",
         "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
         className,
@@ -116,7 +97,7 @@ function FieldError({
     <FieldPrimitive.Error
       role="alert"
       data-slot="field-error"
-      className={cn("text-sm font-normal text-destructive", className)}
+      className={cn("text-xs font-normal text-destructive", className)}
       {...props}
     >
       {content}
@@ -128,7 +109,7 @@ function FieldItem({ className, ...props }: FieldPrimitive.Item.Props) {
   return (
     <FieldPrimitive.Item
       data-slot="field-item"
-      className={cn("flex items-center gap-2", className)}
+      className={cn("flex flex-col gap-1", className)}
       {...props}
     />
   );

package/src/components/ui/form.tsx

@@ -5,7 +5,7 @@ import { Form as FormPrimitive } from "@base-ui/react/form";
 import { cn } from "@/lib/utils";
 
 function Form({ className, ...props }: FormPrimitive.Props) {
-  return <FormPrimitive className={cn("", className)} {...props} />;
+  return <FormPrimitive data-slot="form-root" className={cn(className)} {...props} />;
 }
 
 export { Form };

package/src/components/ui/meter.tsx

@@ -4,46 +4,32 @@ import { Meter as MeterPrimitive } from "@base-ui/react/meter";
 
 import { cn } from "@/lib/utils";
 
-function Meter({
-  label,
-  showLabel,
-  showValue,
-  className,
-  ...props
-}: MeterPrimitive.Root.Props & {
-  showValue?: boolean;
-  showLabel?: boolean;
-  label?: string;
-}) {
-  return (
-    <MeterPrimitive.Root className={cn("flex flex-col gap-1", className)} {...props}>
-      <div className="flex items-center justify-between">
-        {showLabel && label && <MeterLabel>{label}</MeterLabel>}
-        {showValue && <MeterValue />}
-      </div>
-      <MeterTrack>
-        <MeterIndicator />
-      </MeterTrack>
-    </MeterPrimitive.Root>
-  );
+function Meter({ className, ...props }: MeterPrimitive.Root.Props) {
+  return <MeterPrimitive.Root className={cn("grid grid-cols-2 gap-1", className)} {...props} />;
 }
 
 function MeterLabel({ className, ...props }: MeterPrimitive.Label.Props) {
   return (
-    <MeterPrimitive.Label className={cn("text-xs font-bold text-primary", className)} {...props} />
+    <MeterPrimitive.Label
+      className={cn("col-span-1 text-xs font-bold text-primary", className)}
+      {...props}
+    />
   );
 }
 
 function MeterValue({ className, ...props }: MeterPrimitive.Value.Props) {
   return (
-    <MeterPrimitive.Value className={cn("text-right text-xs text-primary", className)} {...props} />
+    <MeterPrimitive.Value
+      className={cn("col-span-1 text-right text-xs text-primary", className)}
+      {...props}
+    />
   );
 }
 
 function MeterTrack({ className, ...props }: MeterPrimitive.Track.Props) {
   return (
     <MeterPrimitive.Track
-      className={cn("h-2 w-full overflow-hidden rounded-full bg-primary/20", className)}
+      className={cn("col-span-2 h-2 w-full overflow-hidden rounded-full bg-primary/20", className)}
       {...props}
     />
   );
@@ -52,7 +38,7 @@ function MeterTrack({ className, ...props }: MeterPrimitive.Track.Props) {
 function MeterIndicator({ className, ...props }: MeterPrimitive.Indicator.Props) {
   return (
     <MeterPrimitive.Indicator
-      className={cn("block rounded-full rounded-r-xl bg-primary", className)}
+      className={cn("block rounded-full bg-primary", className)}
       {...props}
     />
   );

package/src/components/ui/number-field.tsx

@@ -35,7 +35,7 @@ function NumberFieldGroup({ className, ...props }: NumberFieldPrimitive.Group.Pr
     <NumberFieldPrimitive.Group
       data-slot="number-field-group"
       className={cn(
-        "relative inline-flex h-9 w-full items-stretch overflow-hidden rounded-lg border border-input focus-within:border-border focus-within:ring-1 focus-within:ring-ring has-[>[data-slot=number-field-decrement]]:*:data-[slot=number-field-input]:rounded-none has-[>[data-slot=number-field-decrement]]:*:data-[slot=number-field-input]:border-0 has-[>[data-slot=number-field-decrement]]:*:data-[slot=number-field-input]:outline-none has-[>[data-slot=number-field-decrement]]:*:data-[slot=number-field-input]:focus:ring-0 has-[>[data-slot=number-field-decrement]]:*:data-[slot=number-field-input]:focus:outline-none",
+        "relative inline-flex h-9 w-full items-stretch overflow-hidden rounded-lg border border-input focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-[>[data-slot=number-field-decrement]]:*:data-[slot=number-field-input]:rounded-none has-[>[data-slot=number-field-decrement]]:*:data-[slot=number-field-input]:border-0 has-[>[data-slot=number-field-decrement]]:*:data-[slot=number-field-input]:outline-none has-[>[data-slot=number-field-decrement]]:*:data-[slot=number-field-input]:focus:ring-0 has-[>[data-slot=number-field-decrement]]:*:data-[slot=number-field-input]:focus:outline-none",
         "has-[>[data-slot=number-field-decrement][data-align=end]]:*:data-[slot=number-field-decrement]:border-l has-[>[data-slot=number-field-decrement][data-align=start]]:*:data-[slot=number-field-decrement]:border-r has-[>[data-slot=number-field-increment][data-align=end]]:*:data-[slot=number-field-increment]:border-l ",
         className,
       )}

package/src/components/ui/radio.tsx

@@ -6,31 +6,44 @@ import { CircleIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
-function Radio({ children, className, ...props }: RadioPrimitive.Root.Props) {
+function Radio({ className, ...props }: RadioPrimitive.Root.Props) {
   return (
-    <label
-      className={cn("group flex items-center gap-2 text-sm text-foreground", className)}
-      htmlFor={props.id}
+    <RadioPrimitive.Root
+      data-slot="radio"
+      className={cn(
+        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input text-primary outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-checked:ring data-checked:ring-primary/40 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      {...props}
     >
-      <RadioPrimitive.Root
-        className={
-          "flex size-4 items-center justify-center border border-input bg-transparent outline outline-input transition duration-50 ease-in group-hover:bg-accent/80"
-        }
-        {...props}
+      <RadioPrimitive.Indicator
+        data-slot="radio-indicator"
+        className="flex size-4 items-center justify-center text-primary group-aria-invalid/radio-group-item:text-destructive"
       >
-        <RadioPrimitive.Indicator
-          className={"flex items-center justify-center data-checked:bg-primary"}
-        >
-          <CircleIcon className="size-2 bg-primary" />
-        </RadioPrimitive.Indicator>
-      </RadioPrimitive.Root>
-      {children}
-    </label>
+        <CircleIcon className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current" />
+      </RadioPrimitive.Indicator>
+    </RadioPrimitive.Root>
   );
 }
 
-function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
-  return <RadioGroupPrimitive className={cn("flex flex-col gap-1", className)} {...props} />;
+function RadioGroup({
+  className,
+  orientation = "vertical",
+  ...props
+}: RadioGroupPrimitive.Props & {
+  orientation?: "horizontal" | "vertical";
+}) {
+  return (
+    <RadioGroupPrimitive
+      data-slot="radio-group"
+      data-orientation={orientation}
+      className={cn(
+        "flex h-fit gap-4 data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col",
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 export { Radio, RadioGroup };

package/src/components/ui/scroll-area.tsx

@@ -1,17 +1,26 @@
 "use client";
 
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
+import type { ReactNode, Ref } from "react";
 
 import { cn } from "@/lib/utils";
 
 function ScrollArea({
   className,
   children,
+  viewportRef,
   ...props
-}: ScrollAreaPrimitive.Root.Props & { children?: React.ReactNode }) {
+}: ScrollAreaPrimitive.Root.Props & {
+  children?: ReactNode;
+  viewportRef?: Ref<HTMLDivElement>;
+}) {
   return (
     <ScrollAreaPrimitive.Root className={cn("relative", className)} {...props}>
-      <ScrollAreaPrimitive.Viewport className="h-full w-full">
+      <ScrollAreaPrimitive.Viewport
+        ref={viewportRef}
+        data-scroll-area-viewport
+        className="h-full w-full"
+      >
         <ScrollAreaPrimitive.Content>{children}</ScrollAreaPrimitive.Content>
       </ScrollAreaPrimitive.Viewport>
       <ScrollAreaScrollbar>