@vllnt/ui 0.2.1-canary.06f0e84 → 0.2.1-canary.0aaaad2

package/dist/components/chat-dock-section/chat-dock-section.js

@@ -45,7 +45,7 @@ const ChatDockSection = forwardRef(
           },
           message.id
         )) }),
-        /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-dashed border-border/80 bg-background/70 px-3 py-3 text-sm text-muted-foreground", children: composerPlaceholder })
+        /* @__PURE__ */ jsx("div", { className: "rounded-xl border border-dashed border-border/80 bg-background/70 p-3 text-sm text-muted-foreground", children: composerPlaceholder })
       ]
     }
   )

package/dist/components/checkbox/checkbox.js

@@ -8,7 +8,7 @@ const Checkbox = React.forwardRef(({ className, ...props }, reference) => /* @__
   CheckboxPrimitive.Root,
   {
     className: cn(
-      "peer h-4 w-4 shrink-0 rounded border border-input bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
+      "peer size-4 shrink-0 rounded border border-input bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary",
       className
     ),
     ref: reference,
@@ -17,7 +17,7 @@ const Checkbox = React.forwardRef(({ className, ...props }, reference) => /* @__
       CheckboxPrimitive.Indicator,
       {
         className: cn("flex items-center justify-center text-current"),
-        children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" })
+        children: /* @__PURE__ */ jsx(Check, { className: "size-4" })
       }
     )
   }

package/dist/components/checklist/checklist.js

@@ -21,7 +21,7 @@ function ChecklistItemRow({
         isChecked ? /* @__PURE__ */ jsx(
           "svg",
           {
-            className: "h-5 w-5 text-green-500 flex-shrink-0 mt-0.5",
+            className: "size-5 text-green-500 flex-shrink-0 mt-0.5",
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24",
@@ -38,7 +38,7 @@ function ChecklistItemRow({
         ) : /* @__PURE__ */ jsx(
           "svg",
           {
-            className: "h-5 w-5 text-muted-foreground flex-shrink-0 mt-0.5",
+            className: "size-5 text-muted-foreground flex-shrink-0 mt-0.5",
             fill: "none",
             stroke: "currentColor",
             viewBox: "0 0 24 24",
@@ -77,7 +77,7 @@ function ChecklistHeader({
       /* @__PURE__ */ jsx(
         "svg",
         {
-          className: "h-5 w-5 text-primary",
+          className: "size-5 text-primary",
           fill: "none",
           stroke: "currentColor",
           viewBox: "0 0 24 24",

package/dist/components/chronological-timeline/chronological-timeline.js

@@ -38,6 +38,7 @@ function ImageMedia({ media }) {
   ] });
 }
 function VideoMedia({ media }) {
+  const iframeTitle = media.title || "Embedded timeline video";
   return /* @__PURE__ */ jsxs("figure", { className: "overflow-hidden rounded-xl border bg-muted", children: [
     /* @__PURE__ */ jsx("div", { className: "aspect-video w-full", children: /* @__PURE__ */ jsx(
       "iframe",
@@ -46,7 +47,7 @@ function VideoMedia({ media }) {
         allowFullScreen: true,
         className: "h-full w-full",
         src: media.src,
-        title: media.title ?? "Embedded video"
+        title: iframeTitle
       }
     ) }),
     media.caption || media.credit ? /* @__PURE__ */ jsxs("figcaption", { className: "border-t bg-background px-3 py-2 text-xs text-muted-foreground", children: [
@@ -56,7 +57,7 @@ function VideoMedia({ media }) {
   ] });
 }
 function AudioMedia({ media }) {
-  return /* @__PURE__ */ jsxs("figure", { className: "overflow-hidden rounded-xl border bg-muted px-3 py-3", children: [
+  return /* @__PURE__ */ jsxs("figure", { className: "overflow-hidden rounded-xl border bg-muted p-3", children: [
     /* @__PURE__ */ jsx(
       "audio",
       {
@@ -94,8 +95,8 @@ function RailColumn({ featured }) {
           "span",
           {
             className: cn(
-              "relative z-10 mt-3 block h-3 w-3 rounded-full border-2 border-background bg-primary",
-              featured ? "h-4 w-4" : ""
+              "relative z-10 mt-3 block size-3 rounded-full border-2 border-background bg-primary",
+              featured ? "size-4" : ""
             )
           }
         )
@@ -308,7 +309,7 @@ const ChronologicalTimeline = forwardRef((props, ref) => {
       ...rest,
       children: [
         /* @__PURE__ */ jsx(ProgressStrip, { activeId, ids, label: progressLabel }),
-        title ? /* @__PURE__ */ jsx("header", { className: "px-6 py-6", children: /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold tracking-tight", id: titleId, children: title }) }) : null,
+        title ? /* @__PURE__ */ jsx("header", { className: "p-6", children: /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold tracking-tight", id: titleId, children: title }) }) : null,
         /* @__PURE__ */ jsx(EventList, { activeId, children })
       ]
     }

package/dist/components/civilization-card/civilization-card.js

@@ -71,7 +71,7 @@ function CivilizationHero({ color, image, imageAlt }) {
           className: "h-full w-full object-cover mix-blend-multiply",
           src: image
         }
-      ) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center text-muted-foreground/50", children: /* @__PURE__ */ jsx(Globe, { "aria-hidden": "true", className: "h-12 w-12" }) })
+      ) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center text-muted-foreground/50", children: /* @__PURE__ */ jsx(Globe, { "aria-hidden": "true", className: "size-12" }) })
     }
   );
 }

package/dist/components/code-block/code-block.js

@@ -107,11 +107,11 @@ function CodeBlock({
               /* @__PURE__ */ jsx(
                 Button,
                 {
-                  className: "h-8 w-8",
+                  className: "size-8",
                   onClick: handleCopy,
                   size: "icon",
                   variant: "ghost",
-                  children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+                  children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" })
                 }
               )
             ] })

package/dist/components/code-playground/code-playground.js

@@ -11,11 +11,12 @@ function CodeLine({ highlightLines, line, lineNumber }) {
     /* @__PURE__ */ jsx("span", { children: line })
   ] });
 }
+const EMPTY_HIGHLIGHT_LINES = [];
 function CodePlayground({
   children,
   description,
   filename,
-  highlightLines = [],
+  highlightLines = EMPTY_HIGHLIGHT_LINES,
   language = "typescript",
   showLineNumbers = false,
   title
@@ -33,7 +34,7 @@ function CodePlayground({
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-card overflow-hidden", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b bg-muted/30", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded bg-primary/10", children: /* @__PURE__ */ jsx(Code, { className: "h-4 w-4 text-primary" }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex size-8 items-center justify-center rounded bg-primary/10", children: /* @__PURE__ */ jsx(Code, { className: "size-4 text-primary" }) }),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx("h4", { className: "font-semibold text-sm", children: title }),
           description ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: description }) : null
@@ -41,17 +42,17 @@ function CodePlayground({
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         filename ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
-          /* @__PURE__ */ jsx(FileCode, { className: "h-3 w-3" }),
+          /* @__PURE__ */ jsx(FileCode, { className: "size-3" }),
           /* @__PURE__ */ jsx("span", { className: "font-mono", children: filename })
         ] }) : null,
         /* @__PURE__ */ jsx(
           Button,
           {
-            className: "h-8 w-8",
+            className: "size-8",
             onClick: handleCopy,
             size: "icon",
             variant: "ghost",
-            children: copied ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "h-3 w-3" })
+            children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3" })
           }
         )
       ] })
@@ -63,7 +64,7 @@ function CodePlayground({
         line,
         lineNumber: index + 1
       },
-      index
+      `${line}-${index + 1}`
     )) }) : /* @__PURE__ */ jsx("code", { children: code }) }) }),
     /* @__PURE__ */ jsx("div", { className: "px-4 py-2 border-t bg-muted/30", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-muted-foreground uppercase tracking-wider", children: language }) })
   ] });
@@ -74,7 +75,7 @@ function FileTree({
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "my-6 rounded-lg border bg-card overflow-hidden", children: [
     /* @__PURE__ */ jsx("div", { className: "px-4 py-2 border-b bg-muted/30", children: /* @__PURE__ */ jsxs("h4", { className: "font-semibold text-sm flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(FileCode, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx(FileCode, { className: "size-4" }),
       title
     ] }) }),
     /* @__PURE__ */ jsx("div", { className: "p-4 font-mono text-sm [&>ul]:m-0 [&>ul]:list-none [&_ul]:ml-4 [&_ul]:list-none [&_li]:text-muted-foreground", children })

package/dist/components/combobox/combobox.js

@@ -48,7 +48,7 @@ function ComboboxOptionItem({
           Check,
           {
             className: cn(
-              "mr-2 h-4 w-4",
+              "mr-2 size-4",
               selectedValue === option.value ? "opacity-100" : "opacity-0"
             )
           }
@@ -128,7 +128,7 @@ const Combobox = React.forwardRef(
           variant: "outline",
           children: [
             /* @__PURE__ */ jsx("span", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder }),
-            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 shrink-0 opacity-50" })
+            /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 size-4 shrink-0 opacity-50" })
           ]
         }
       ) }),

package/dist/components/command/command.js

@@ -26,7 +26,7 @@ const CommandDialog = ({ children, ...props }) => {
 const CommandInput = React.forwardRef(({ className, ...props }, reference) => (
   // eslint-disable-next-line react/no-unknown-property
   /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
-    /* @__PURE__ */ jsx(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
+    /* @__PURE__ */ jsx(Search, { className: "mr-2 size-4 shrink-0 opacity-50" }),
     /* @__PURE__ */ jsx(
       CommandPrimitive.Input,
       {

package/dist/components/comment-pin/comment-pin.js

@@ -21,7 +21,7 @@ const PinBody = (props) => {
       {
         "aria-hidden": "true",
         className: cn(
-          "flex h-7 w-7 items-center justify-center rounded-full border border-background text-[11px] font-semibold shadow-sm",
+          "flex size-7 items-center justify-center rounded-full border border-background text-[11px] font-semibold shadow-sm",
           STATE_FILL[props.state]
         ),
         "data-comment-pin-body": true,

package/dist/components/comparison/comparison.js

@@ -53,18 +53,18 @@ function Comparison({
             children: before.title
           }
         ),
-        /* @__PURE__ */ jsx("ul", { className: "p-4 space-y-2", children: before.items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("ul", { className: "p-4 space-y-2", children: before.items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
           /* @__PURE__ */ jsx(
             BeforeIcon,
             {
               className: cn(
-                "h-4 w-4 mt-0.5 flex-shrink-0",
+                "size-4 mt-0.5 flex-shrink-0",
                 beforeConfig.iconClass
               )
             }
           ),
           /* @__PURE__ */ jsx("span", { children: item })
-        ] }, index)) })
+        ] }, item)) })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border", afterConfig.className), children: [
         /* @__PURE__ */ jsx(
@@ -77,18 +77,18 @@ function Comparison({
             children: after.title
           }
         ),
-        /* @__PURE__ */ jsx("ul", { className: "p-4 space-y-2", children: after.items.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx("ul", { className: "p-4 space-y-2", children: after.items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2 text-sm", children: [
           /* @__PURE__ */ jsx(
             AfterIcon,
             {
               className: cn(
-                "h-4 w-4 mt-0.5 flex-shrink-0",
+                "size-4 mt-0.5 flex-shrink-0",
                 afterConfig.iconClass
               )
             }
           ),
           /* @__PURE__ */ jsx("span", { children: item })
-        ] }, index)) })
+        ] }, item)) })
       ] })
     ] })
   ] });
@@ -99,15 +99,15 @@ function BeforeAfter({ after, before, title }) {
     /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] gap-4 items-start", children: [
       /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-red-500/30 bg-red-500/5 overflow-hidden", children: [
         /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 bg-red-500/10 text-red-700 dark:text-red-300 font-medium text-sm flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(X, { className: "size-4" }),
           "Before"
         ] }),
         /* @__PURE__ */ jsx("div", { className: "p-4 text-sm [&>pre]:my-0", children: before })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center justify-center h-full", children: /* @__PURE__ */ jsx(ArrowRight, { className: "h-6 w-6 text-muted-foreground" }) }),
+      /* @__PURE__ */ jsx("div", { className: "hidden md:flex items-center justify-center h-full", children: /* @__PURE__ */ jsx(ArrowRight, { className: "size-6 text-muted-foreground" }) }),
       /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-green-500/30 bg-green-500/5 overflow-hidden", children: [
         /* @__PURE__ */ jsxs("div", { className: "px-4 py-2 bg-green-500/10 text-green-700 dark:text-green-300 font-medium text-sm flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx(Check, { className: "size-4" }),
           "After"
         ] }),
         /* @__PURE__ */ jsx("div", { className: "p-4 text-sm [&>pre]:my-0", children: after })

package/dist/components/completion-dialog/completion-dialog.js

@@ -39,7 +39,7 @@ function DialogContent({
             children: closeIcon ?? /* @__PURE__ */ jsx(
               "svg",
               {
-                className: "h-4 w-4",
+                className: "size-4",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",

package/dist/components/content-intro/content-intro.js

@@ -8,12 +8,13 @@ const DEFAULT_LABELS = {
   startLabel: "Start Tutorial",
   tableOfContentsLabel: "Table of Contents"
 };
+const EMPTY_CONTENT_INTRO_LABELS = {};
 function ContentIntroImpl({
   additionalContent,
   completedSections,
   estimatedTime,
   isLoading = false,
-  labels = {},
+  labels = EMPTY_CONTENT_INTRO_LABELS,
   onGoToSection,
   onStart,
   renderIntroContent,
@@ -60,7 +61,7 @@ function ContentIntroImpl({
                   "span",
                   {
                     className: cn(
-                      "flex-shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium tabular-nums transition-colors",
+                      "flex-shrink-0 size-6 rounded-full flex items-center justify-center text-xs font-medium tabular-nums transition-colors",
                       isLoading && "animate-pulse bg-muted",
                       !isLoading && isCompleted && "bg-foreground text-background",
                       !isLoading && !isCompleted && "bg-muted"
@@ -68,7 +69,7 @@ function ContentIntroImpl({
                     children: isCompleted ? /* @__PURE__ */ jsx(
                       "svg",
                       {
-                        className: "h-3 w-3",
+                        className: "size-3",
                         fill: "none",
                         stroke: "currentColor",
                         viewBox: "0 0 24 24",
@@ -97,12 +98,12 @@ function ContentIntroImpl({
                 )
               ]
             }
-          ) }, `${section.id}-${index}`);
+          ) }, section.id);
         }) })
       ] }),
       additionalContent
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "fixed bottom-0 left-0 right-0 z-50 border-t border-border bg-background/80 backdrop-blur-sm safe-bottom", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl px-4 py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+    /* @__PURE__ */ jsx("div", { className: "fixed bottom-0 left-0 right-0 z-50 border-t border-border bg-background/80 backdrop-blur-sm safe-bottom", children: /* @__PURE__ */ jsx("div", { className: "mx-auto max-w-3xl p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
       /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground hidden sm:block", children: hasProgress ? `${completedSections.size}/${sections.length} completed` : `${sections.length} sections \xB7 ${estimatedTime}` }),
       /* @__PURE__ */ jsxs(
         Button,
@@ -114,7 +115,7 @@ function ContentIntroImpl({
             /* @__PURE__ */ jsx(
               "svg",
               {
-                className: "h-5 w-5",
+                className: "size-5",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",

package/dist/components/context-menu/context-menu.js

@@ -22,7 +22,7 @@ const ContextMenuSubTrigger = forwardRef(({ children, className, inset, ...props
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto size-4" })
     ]
   }
 ));
@@ -75,7 +75,7 @@ const ContextMenuCheckboxItem = forwardRef(({ checked, children, className, ...p
     ref,
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-4" }) }) }),
       children
     ]
   }
@@ -91,7 +91,7 @@ const ContextMenuRadioItem = forwardRef(({ children, className, ...props }, ref)
     ref,
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Circle, { className: "size-2 fill-current" }) }) }),
       children
     ]
   }
@@ -113,7 +113,7 @@ ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 const ContextMenuSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Separator,
   {
-    className: cn("-mx-1 my-1 h-px bg-border", className),
+    className: cn("-m-1 h-px bg-border", className),
     ref,
     ...props
   }

package/dist/components/conversation-thread/conversation-thread.js

@@ -35,7 +35,7 @@ function MessageActions({ messageId }) {
           onRetry(messageId);
         },
         type: "button",
-        children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-3 w-3" })
+        children: /* @__PURE__ */ jsx(RefreshCw, { className: "size-3" })
       }
     ) : null,
     onFeedback ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -48,7 +48,7 @@ function MessageActions({ messageId }) {
             onFeedback(messageId, "positive");
           },
           type: "button",
-          children: /* @__PURE__ */ jsx(ThumbsUp, { className: "h-3 w-3" })
+          children: /* @__PURE__ */ jsx(ThumbsUp, { className: "size-3" })
         }
       ),
       /* @__PURE__ */ jsx(
@@ -60,7 +60,7 @@ function MessageActions({ messageId }) {
             onFeedback(messageId, "negative");
           },
           type: "button",
-          children: /* @__PURE__ */ jsx(ThumbsDown, { className: "h-3 w-3" })
+          children: /* @__PURE__ */ jsx(ThumbsDown, { className: "size-3" })
         }
       )
     ] }) : null
@@ -290,13 +290,13 @@ const ConversationScrollButton = forwardRef(({ className }, reference) => {
     {
       "aria-label": "Scroll to bottom",
       className: cn(
-        "absolute bottom-4 right-4 flex h-8 w-8 items-center justify-center rounded-full border bg-background shadow-md transition-colors hover:bg-muted",
+        "absolute bottom-4 right-4 flex size-8 items-center justify-center rounded-full border bg-background shadow-md transition-colors hover:bg-muted",
         className
       ),
       onClick: scrollToBottom,
       ref: reference,
       type: "button",
-      children: /* @__PURE__ */ jsx(ArrowDown, { className: "h-4 w-4" })
+      children: /* @__PURE__ */ jsx(ArrowDown, { className: "size-4" })
     }
   );
 });
@@ -319,18 +319,18 @@ const ConversationLoading = forwardRef(({ className }, reference) => {
         /* @__PURE__ */ jsx(
           "span",
           {
-            className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground",
+            className: "size-2 animate-bounce rounded-full bg-muted-foreground",
             style: { animationDelay: "-0.3s" }
           }
         ),
         /* @__PURE__ */ jsx(
           "span",
           {
-            className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground",
+            className: "size-2 animate-bounce rounded-full bg-muted-foreground",
             style: { animationDelay: "-0.15s" }
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "h-2 w-2 animate-bounce rounded-full bg-muted-foreground" })
+        /* @__PURE__ */ jsx("span", { className: "size-2 animate-bounce rounded-full bg-muted-foreground" })
       ]
     }
   );

package/dist/components/cookie-consent/cookie-consent.js

@@ -160,7 +160,7 @@ const CookieConsent = forwardRef(
               className: "absolute -right-2 -top-2 rounded-full border bg-background p-1 text-muted-foreground hover:text-foreground",
               onClick: handleClose,
               type: "button",
-              children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ jsx(X, { className: "size-3" })
             }
           ) : null
         ]

package/dist/components/copy-button/copy-button.js

@@ -59,7 +59,7 @@ function CopyIcon({
   size
 }) {
   const Icon = copied ? Check : Copy;
-  const sizeClass = size === "xs" ? "h-3 w-3" : "h-4 w-4";
+  const sizeClass = size === "xs" ? "size-3" : "size-4";
   return /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", className: cn(sizeClass, className) });
 }
 const ButtonTrigger = forwardRef(
@@ -101,7 +101,7 @@ const ButtonTrigger = forwardRef(
         {
           "aria-label": accessibleLabel,
           className: cn(
-            "h-6 w-6 align-middle text-muted-foreground hover:text-foreground",
+            "size-6 align-middle text-muted-foreground hover:text-foreground",
             className
           ),
           onClick: onClickHandler,
@@ -118,7 +118,7 @@ const ButtonTrigger = forwardRef(
       Button,
       {
         "aria-label": accessibleLabel,
-        className: cn("h-8 w-8", className),
+        className: cn("size-8", className),
         onClick: onClickHandler,
         ref,
         size: "icon",

package/dist/components/countdown-timer/countdown-timer.js

@@ -73,14 +73,15 @@ function formatSegments(milliseconds) {
     { label: "Seconds", value: String(seconds).padStart(2, "0") }
   ];
 }
+const DEADLINE_FORMATTER = new Intl.DateTimeFormat("en-US", {
+  day: "numeric",
+  hour: "numeric",
+  minute: "2-digit",
+  month: "short",
+  timeZoneName: "short"
+});
 function formatDeadline(date) {
-  return new Intl.DateTimeFormat("en-US", {
-    day: "numeric",
-    hour: "numeric",
-    minute: "2-digit",
-    month: "short",
-    timeZoneName: "short"
-  }).format(date);
+  return DEADLINE_FORMATTER.format(date);
 }
 function getProgress(deadline, now, startedAt) {
   if (!startedAt) {

package/dist/components/credit-badge/credit-badge.js

@@ -40,13 +40,7 @@ const CreditBadge = React.forwardRef(
         ref: reference,
         ...props,
         children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              "aria-hidden": "true",
-              className: "h-1.5 w-1.5 rounded-full bg-current"
-            }
-          ),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "size-1.5 rounded-full bg-current" }),
           /* @__PURE__ */ jsx("span", { children: amount ? `${amount} \u2022 ${label ?? getStatusLabel(status)}` : label ?? getStatusLabel(status) })
         ]
       }

package/dist/components/curriculum/curriculum.js

@@ -56,15 +56,15 @@ function statusLabel(status) {
 }
 function statusIcon(status) {
   if (status === "completed") {
-    return /* @__PURE__ */ jsx(CheckCircle2, { className: "h-4 w-4 flex-shrink-0 text-green-500" });
+    return /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4 flex-shrink-0 text-green-500" });
   }
   if (status === "in-progress") {
-    return /* @__PURE__ */ jsx(PlayCircle, { className: "h-4 w-4 flex-shrink-0 text-primary" });
+    return /* @__PURE__ */ jsx(PlayCircle, { className: "size-4 flex-shrink-0 text-primary" });
   }
   if (status === "locked") {
-    return /* @__PURE__ */ jsx(Lock, { className: "h-4 w-4 flex-shrink-0 text-muted-foreground" });
+    return /* @__PURE__ */ jsx(Lock, { className: "size-4 flex-shrink-0 text-muted-foreground" });
   }
-  return /* @__PURE__ */ jsx(BookOpen, { className: "h-4 w-4 flex-shrink-0 text-muted-foreground" });
+  return /* @__PURE__ */ jsx(BookOpen, { className: "size-4 flex-shrink-0 text-muted-foreground" });
 }
 const difficultyStyles = {
   advanced: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
@@ -105,7 +105,7 @@ function LessonMeta({
         "aria-label": prerequisitesLabel,
         className: "flex items-center gap-1 text-xs text-muted-foreground",
         title: prerequisitesLabel,
-        children: /* @__PURE__ */ jsx(Link2, { "aria-hidden": "true", className: "h-3 w-3" })
+        children: /* @__PURE__ */ jsx(Link2, { "aria-hidden": "true", className: "size-3" })
       }
     ) : null,
     difficulty ? /* @__PURE__ */ jsx(
@@ -119,7 +119,7 @@ function LessonMeta({
       }
     ) : null,
     duration ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
-      /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }),
+      /* @__PURE__ */ jsx(Clock, { className: "size-3" }),
       duration
     ] }) : null
   ] });
@@ -162,7 +162,7 @@ function ModuleTrigger({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex flex-shrink-0 items-center gap-3", children: [
           estimatedHours === void 0 ? null : /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
-            /* @__PURE__ */ jsx(Clock, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ jsx(Clock, { className: "size-3.5" }),
             estimatedHours,
             "h"
           ] }),
@@ -170,7 +170,7 @@ function ModuleTrigger({
             ChevronDown,
             {
               className: cn(
-                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                "size-4 text-muted-foreground transition-transform duration-200",
                 isExpanded && "rotate-180"
               )
             }
@@ -215,11 +215,11 @@ function CurriculumRoot({
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-6 py-4", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx(GraduationCap, { className: "h-5 w-5 text-primary" }),
+            /* @__PURE__ */ jsx(GraduationCap, { className: "size-5 text-primary" }),
             /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold", children: title })
           ] }),
           totalHours === void 0 ? null : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
-            /* @__PURE__ */ jsx(Clock, { className: "h-4 w-4" }),
+            /* @__PURE__ */ jsx(Clock, { className: "size-4" }),
             /* @__PURE__ */ jsxs("span", { children: [
               totalHours,
               "h total"

package/dist/components/data-list/data-list.js

@@ -18,7 +18,7 @@ const dataListVariants = cva(
   }
 );
 const dataListItemVariants = cva(
-  "grid gap-1 px-4 py-4 sm:grid-cols-[minmax(0,12rem)_1fr] sm:gap-4 sm:px-5",
+  "grid gap-1 p-4 sm:grid-cols-[minmax(0,12rem)_1fr] sm:gap-4 sm:px-5",
   {
     defaultVariants: {
       density: "default"