@opencode-ai/ui 0.0.0-dev-202608272250 → 0.0.0-dev-18455

package/dist/{v2/components → icons/icon}/icon.d.ts

@@ -1,4 +1,6 @@
 import { type ComponentProps } from "solid-js";
+import { additionalIcons } from "./additional-icons";
+import "./icon.css";
 declare const icons: {
     edit: {
         viewBox: string;
@@ -16,6 +18,10 @@ declare const icons: {
         viewBox: string;
         body: string;
     };
+    "branch-out": {
+        viewBox: string;
+        body: string;
+    };
     "grid-plus": {
         viewBox: string;
         body: string;
@@ -24,6 +30,10 @@ declare const icons: {
         viewBox: string;
         body: string;
     };
+    "circle-exclamation": {
+        viewBox: string;
+        body: string;
+    };
     "sidebar-right": {
         viewBox: string;
         body: string;
@@ -120,6 +130,14 @@ declare const icons: {
         viewBox: string;
         body: string;
     };
+    "window-analytics": {
+        viewBox: string;
+        body: string;
+    };
+    trash: {
+        viewBox: string;
+        body: string;
+    };
     "outline-sliders": {
         viewBox: string;
         body: string;
@@ -144,13 +162,18 @@ declare const icons: {
         viewBox: string;
         body: string;
     };
+    "fill-triangle-down": {
+        viewBox: string;
+        body: string;
+    };
     archive: {
         viewBox: string;
         body: string;
     };
 };
+type IconName = keyof typeof icons | keyof typeof additionalIcons;
 export interface IconProps extends ComponentProps<"svg"> {
-    name: keyof typeof icons | (string & {});
+    name: IconName | (string & {});
     size?: "small" | "normal" | "large";
 }
 export declare function Icon(props: IconProps): import("solid-js").JSX.Element;

package/dist/layout/divider/divider.d.ts

@@ -0,0 +1,5 @@
+import { type ComponentProps } from "solid-js";
+import "./divider.css";
+export interface DividerProps extends ComponentProps<"div"> {
+}
+export declare function Divider(props: DividerProps): import("solid-js").JSX.Element;

package/dist/navigation/menu/menu.d.ts

@@ -0,0 +1,59 @@
+import { DropdownMenu } from "@kobalte/core/dropdown-menu";
+import { ContextMenu } from "@kobalte/core/context-menu";
+import { type ComponentProps, type JSX, type ParentProps } from "solid-js";
+import "./menu.css";
+export type MenuAppearance = "standard" | "compact";
+export interface MenuItemProps extends ComponentProps<typeof DropdownMenu.Item> {
+    shortcut?: JSX.Element | string;
+    badge?: JSX.Element | string;
+}
+declare function MenuItem(props: ParentProps<MenuItemProps>): JSX.Element;
+export interface MenuCheckboxItemProps extends ComponentProps<typeof DropdownMenu.CheckboxItem> {
+    shortcut?: JSX.Element | string;
+    badge?: JSX.Element | string;
+}
+declare function MenuCheckboxItem(props: ParentProps<MenuCheckboxItemProps>): JSX.Element;
+export interface MenuRadioItemProps extends ComponentProps<typeof DropdownMenu.RadioItem> {
+    shortcut?: JSX.Element | string;
+    badge?: JSX.Element | string;
+}
+declare function MenuRadioItem(props: ParentProps<MenuRadioItemProps>): JSX.Element;
+export interface MenuSubTriggerProps extends ComponentProps<typeof DropdownMenu.SubTrigger> {
+    shortcut?: JSX.Element | string;
+    badge?: JSX.Element | string;
+}
+declare function MenuSubTrigger(props: ParentProps<MenuSubTriggerProps>): JSX.Element;
+declare function MenuSubContent(props: ComponentProps<typeof DropdownMenu.SubContent>): JSX.Element;
+declare function MenuGroupLabel(props: ComponentProps<typeof DropdownMenu.GroupLabel>): JSX.Element;
+declare function MenuSeparator(props: ComponentProps<typeof DropdownMenu.Separator>): JSX.Element;
+declare function MenuContent(props: ComponentProps<typeof DropdownMenu.Content>): JSX.Element;
+export interface MenuProps extends ComponentProps<typeof DropdownMenu> {
+    appearance?: MenuAppearance;
+}
+declare function MenuRoot(props: MenuProps): JSX.Element;
+export interface MenuContextProps extends ComponentProps<typeof ContextMenu> {
+    appearance?: MenuAppearance;
+}
+declare function MenuContextRoot(props: MenuContextProps): JSX.Element;
+declare function MenuContextContent(props: ComponentProps<typeof ContextMenu.Content>): JSX.Element;
+export declare const Menu: typeof MenuRoot & {
+    Trigger: typeof import("@kobalte/core/dropdown-menu").Trigger;
+    Portal: typeof import("@kobalte/core/context-menu").Portal;
+    Content: typeof MenuContent;
+    Item: typeof MenuItem;
+    CheckboxItem: typeof MenuCheckboxItem;
+    RadioGroup: typeof import("@kobalte/core/context-menu").RadioGroup;
+    RadioItem: typeof MenuRadioItem;
+    Group: typeof import("@kobalte/core/context-menu").Group;
+    GroupLabel: typeof MenuGroupLabel;
+    Separator: typeof MenuSeparator;
+    Sub: typeof import("@kobalte/core/context-menu").Sub;
+    SubTrigger: typeof MenuSubTrigger;
+    SubContent: typeof MenuSubContent;
+    Context: typeof MenuContextRoot & {
+        Trigger: typeof import("@kobalte/core/context-menu").Trigger;
+        Portal: typeof import("@kobalte/core/context-menu").Portal;
+        Content: typeof MenuContextContent;
+    };
+};
+export {};

package/dist/{v2/components/segmented-control-v2.d.ts → navigation/segmented-control/segmented-control.d.ts}

@@ -1,8 +1,8 @@
 import { type JSX, type ParentProps } from "solid-js";
 import type { ComponentProps } from "solid-js";
-import "./segmented-control-v2.css";
+import "./segmented-control.css";
 type OnChange = (value: string | null) => void;
-export type SegmentedControlV2Props = Omit<ComponentProps<"div">, "onChange"> & ParentProps<{
+export type SegmentedControlProps = Omit<ComponentProps<"div">, "onChange"> & ParentProps<{
     /** Selected value when controlled (including `null` when empty). Omit key for uncontrolled. */
     value?: string | null;
     /** Initial value when uncontrolled. */
@@ -12,10 +12,10 @@ export type SegmentedControlV2Props = Omit<ComponentProps<"div">, "onChange"> &
     allowDeselect?: boolean;
     disabled?: boolean;
 }>;
-export declare function SegmentedControlV2(props: SegmentedControlV2Props): JSX.Element;
-export type SegmentedControlItemV2Props = Omit<ComponentProps<"button">, "type" | "children"> & ParentProps<{
+export declare function SegmentedControl(props: SegmentedControlProps): JSX.Element;
+export type SegmentedControlItemProps = Omit<ComponentProps<"button">, "type" | "children"> & ParentProps<{
     value: string;
     children: JSX.Element;
 }>;
-export declare function SegmentedControlItemV2(props: SegmentedControlItemV2Props): JSX.Element;
+export declare function SegmentedControlItem(props: SegmentedControlItemProps): JSX.Element;
 export {};

package/dist/{components → navigation/tabs}/tabs.d.ts

@@ -1,29 +1,36 @@
-import { Tabs as Kobalte } from "@kobalte/core/tabs";
+import { Content, List, Root, Trigger } from "@kobalte/core/tabs";
 import { type JSX } from "solid-js";
-import type { ComponentProps, ParentProps, Component } from "solid-js";
-export interface TabsProps extends ComponentProps<typeof Kobalte> {
-    variant?: "normal" | "alt" | "pill" | "settings";
+import type { Component, ComponentProps, ParentProps } from "solid-js";
+import "./tabs-current.css";
+export type TabsVariant = "panel" | "underline" | "surface" | "line" | "pill" | "settings";
+export interface TabsProps extends ComponentProps<typeof Root> {
+    variant?: TabsVariant;
     orientation?: "horizontal" | "vertical";
 }
-export interface TabsListProps extends ComponentProps<typeof Kobalte.List> {
+export interface TabsListProps extends ComponentProps<typeof List> {
 }
-export interface TabsTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
+export interface TabsTriggerProps extends ComponentProps<typeof Trigger> {
     classes?: {
         button?: string;
     };
-    hideCloseButton?: boolean;
     closeButton?: JSX.Element;
+    hideCloseButton?: boolean;
     onMiddleClick?: () => void;
+    subtext?: JSX.Element | string;
+}
+export interface TabsCloseButtonProps extends ComponentProps<"button"> {
 }
-export interface TabsContentProps extends ComponentProps<typeof Kobalte.Content> {
+export interface TabsContentProps extends ComponentProps<typeof Content> {
 }
 declare function TabsRoot(props: TabsProps): JSX.Element;
 declare function TabsList(props: TabsListProps): JSX.Element;
 declare function TabsTrigger(props: ParentProps<TabsTriggerProps>): JSX.Element;
+declare function TabsCloseButton(props: TabsCloseButtonProps): JSX.Element;
 declare function TabsContent(props: ParentProps<TabsContentProps>): JSX.Element;
 export declare const Tabs: typeof TabsRoot & {
     List: typeof TabsList;
     Trigger: typeof TabsTrigger;
+    CloseButton: typeof TabsCloseButton;
     Content: typeof TabsContent;
     SectionTitle: Component<{
         children?: JSX.Element;

package/dist/{v2/components/dialog-v2.d.ts → overlays/dialog/dialog.d.ts}

@@ -1,5 +1,5 @@
 import { type ComponentProps, type JSXElement, type ParentProps } from "solid-js";
-import "./dialog-v2.css";
+import "./dialog.css";
 export interface DialogProps extends ParentProps {
     size?: "normal" | "large" | "x-large";
     variant?: "default" | "settings";
@@ -24,4 +24,3 @@ export declare function DialogTitle(props: ParentProps): import("solid-js").JSX.
 export declare function DialogTitleGroup(props: DialogTitleGroupProps): import("solid-js").JSX.Element;
 export declare function DialogHeader(props: DialogHeaderProps): import("solid-js").JSX.Element;
 export declare function Dialog(props: DialogProps): import("solid-js").JSX.Element;
-export declare const DialogV2: typeof Dialog;

package/dist/overlays/tooltip/tooltip.d.ts

@@ -0,0 +1,15 @@
+import { Root } from "@kobalte/core/tooltip";
+import { type JSX } from "solid-js";
+import type { ComponentProps } from "solid-js";
+import "./tooltip.css";
+export interface TooltipProps extends ComponentProps<typeof Root> {
+    value: JSX.Element;
+    appearance?: "standard" | "compact";
+    class?: string;
+    contentClass?: string;
+    contentStyle?: JSX.CSSProperties;
+    inactive?: boolean;
+    forceOpen?: boolean;
+    triggerTabIndex?: number;
+}
+export declare function Tooltip(props: TooltipProps): JSX.Element;

package/dist/{components → typography/text-shimmer}/text-shimmer.d.ts

@@ -1,4 +1,5 @@
 import { type ValidComponent } from "solid-js";
+import "./text-shimmer.css";
 export declare const TextShimmer: <T extends ValidComponent = "span">(props: {
     text: string;
     class?: string;

package/dist/typography/wordmark/wordmark.d.ts

@@ -0,0 +1,2 @@
+import { type ComponentProps } from "solid-js";
+export declare function Wordmark(props: Pick<ComponentProps<"svg">, "class">): import("solid-js").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/ui",
-  "version": "0.0.0-dev-202608272250",
+  "version": "0.0.0-dev-18455",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -34,6 +34,133 @@
   ],
   "exports": {
     "./package.json": "./package.json",
+    "./accordion": {
+      "types": "./dist/data-display/accordion/accordion.d.ts",
+      "import": "./src/data-display/accordion/accordion.tsx"
+    },
+    "./avatar": {
+      "types": "./dist/data-display/avatar/avatar.d.ts",
+      "import": "./src/data-display/avatar/avatar.tsx"
+    },
+    "./badge": {
+      "types": "./dist/data-display/badge/badge.d.ts",
+      "import": "./src/data-display/badge/badge.tsx"
+    },
+    "./button": {
+      "types": "./dist/actions/button/button.d.ts",
+      "import": "./src/actions/button/button.tsx"
+    },
+    "./button.css": "./src/actions/button/button.css",
+    "./checkbox": {
+      "types": "./dist/forms/checkbox/checkbox.d.ts",
+      "import": "./src/forms/checkbox/checkbox.tsx"
+    },
+    "./dialog": {
+      "types": "./dist/overlays/dialog/dialog.d.ts",
+      "import": "./src/overlays/dialog/dialog.tsx"
+    },
+    "./diff-changes": {
+      "types": "./dist/data-display/diff-changes/diff-changes.d.ts",
+      "import": "./src/data-display/diff-changes/diff-changes.tsx"
+    },
+    "./divider": {
+      "types": "./dist/layout/divider/divider.d.ts",
+      "import": "./src/layout/divider/divider.tsx"
+    },
+    "./field": {
+      "types": "./dist/forms/field/field.d.ts",
+      "import": "./src/forms/field/field.tsx"
+    },
+    "./file-tree.css": "./src/styles/file-tree.css",
+    "./icon": {
+      "types": "./dist/icons/icon/icon.d.ts",
+      "import": "./src/icons/icon/icon.tsx"
+    },
+    "./icon-button": {
+      "types": "./dist/actions/icon-button/icon-button.d.ts",
+      "import": "./src/actions/icon-button/icon-button.tsx"
+    },
+    "./inline-input": {
+      "types": "./dist/forms/inline-input/inline-input.d.ts",
+      "import": "./src/forms/inline-input/inline-input.tsx"
+    },
+    "./keybind": {
+      "types": "./dist/data-display/keybind/keybind.d.ts",
+      "import": "./src/data-display/keybind/keybind.tsx"
+    },
+    "./line-comment": {
+      "types": "./dist/data-display/line-comment/line-comment.d.ts",
+      "import": "./src/data-display/line-comment/line-comment.tsx"
+    },
+    "./loader": {
+      "types": "./dist/feedback/loader/loader.d.ts",
+      "import": "./src/feedback/loader/loader.tsx"
+    },
+    "./menu": {
+      "types": "./dist/navigation/menu/menu.d.ts",
+      "import": "./src/navigation/menu/menu.tsx"
+    },
+    "./progress-circle": {
+      "types": "./dist/feedback/progress-circle/progress-circle.d.ts",
+      "import": "./src/feedback/progress-circle/progress-circle.tsx"
+    },
+    "./project-avatar": {
+      "types": "./dist/data-display/project-avatar/project-avatar.d.ts",
+      "import": "./src/data-display/project-avatar/project-avatar.tsx"
+    },
+    "./radio": {
+      "types": "./dist/forms/radio/radio.d.ts",
+      "import": "./src/forms/radio/radio.tsx"
+    },
+    "./segmented-control": {
+      "types": "./dist/navigation/segmented-control/segmented-control.d.ts",
+      "import": "./src/navigation/segmented-control/segmented-control.tsx"
+    },
+    "./select": {
+      "types": "./dist/forms/select/select.d.ts",
+      "import": "./src/forms/select/select.tsx"
+    },
+    "./split-button": {
+      "types": "./dist/actions/split-button/split-button.d.ts",
+      "import": "./src/actions/split-button/split-button.tsx"
+    },
+    "./switch": {
+      "types": "./dist/forms/switch/switch.d.ts",
+      "import": "./src/forms/switch/switch.tsx"
+    },
+    "./tab-state-indicator": {
+      "types": "./dist/navigation/tab-state-indicator.d.ts",
+      "import": "./src/navigation/tab-state-indicator.tsx"
+    },
+    "./tabs": {
+      "types": "./dist/navigation/tabs/tabs.d.ts",
+      "import": "./src/navigation/tabs/tabs.tsx"
+    },
+    "./text-input": {
+      "types": "./dist/forms/text-input/text-input.d.ts",
+      "import": "./src/forms/text-input/text-input.tsx"
+    },
+    "./text-input.css": "./src/forms/text-input/text-input.css",
+    "./textarea": {
+      "types": "./dist/forms/textarea/textarea.d.ts",
+      "import": "./src/forms/textarea/textarea.tsx"
+    },
+    "./text-shimmer": {
+      "types": "./dist/typography/text-shimmer/text-shimmer.d.ts",
+      "import": "./src/typography/text-shimmer/text-shimmer.tsx"
+    },
+    "./toast": {
+      "types": "./dist/feedback/toast/toast.d.ts",
+      "import": "./src/feedback/toast/toast.tsx"
+    },
+    "./tooltip": {
+      "types": "./dist/overlays/tooltip/tooltip.d.ts",
+      "import": "./src/overlays/tooltip/tooltip.tsx"
+    },
+    "./wordmark": {
+      "types": "./dist/typography/wordmark/wordmark.d.ts",
+      "import": "./src/typography/wordmark/wordmark.tsx"
+    },
     "./*": {
       "types": "./dist/components/*.d.ts",
       "import": "./src/components/*.tsx"
@@ -63,6 +190,7 @@
       "import": "./src/storybook/fixtures.ts"
     },
     "./styles": "./src/styles/index.css",
+    "./styles/tokens": "./src/styles/tokens/index.css",
     "./styles/tailwind": "./src/styles/tailwind/index.css",
     "./theme": {
       "types": "./dist/theme/index.d.ts",
@@ -89,13 +217,7 @@
       "import": "./src/components/app-icons/types.ts"
     },
     "./fonts/*": "./src/assets/fonts/*",
-    "./audio/*": "./src/assets/audio/*",
-    "./v2/*.css": "./src/v2/components/*.css",
-    "./v2/*": {
-      "types": "./dist/v2/components/*.d.ts",
-      "import": "./src/v2/components/*.tsx"
-    },
-    "./v2/styles/*": "./src/v2/styles/*"
+    "./audio/*": "./src/assets/audio/*"
   },
   "scripts": {
     "build": "rm -rf dist && tsc -p tsconfig.build.json",
@@ -124,8 +246,6 @@
   "dependencies": {
     "@kobalte/core": "0.13.11",
     "@pierre/diffs": "1.2.10",
-    "@shikijs/transformers": "3.9.2",
-    "@solid-primitives/bounds": "0.1.3",
     "@solid-primitives/event-listener": "2.4.5",
     "@solid-primitives/media": "2.3.3",
     "@solid-primitives/resize-observer": "2.1.3",
@@ -133,14 +253,12 @@
     "diff": "8.0.2",
     "dompurify": "3.3.1",
     "fuzzysort": "3.1.0",
-    "katex": "0.16.27",
+    "katex": "0.16.47",
     "luxon": "3.6.1",
     "marked": "18.0.7",
     "marked-shiki": "1.2.1",
     "morphdom": "2.7.8",
     "motion": "12.34.5",
-    "motion-dom": "12.34.3",
-    "motion-utils": "12.29.2",
     "remeda": "2.26.0",
     "remend": "1.3.0",
     "shiki": "4.2.0",

package/src/{components → actions/button}/button.tsx

@@ -1,33 +1,32 @@
-import { Button as Kobalte } from "@kobalte/core/button"
+import { Root } from "@kobalte/core/button"
 import { type ComponentProps, Show, splitProps } from "solid-js"
-import { Icon, IconProps } from "./icon"
+import { Icon, type IconProps } from "@opencode-ai/ui/icon"
+import "./button.css"
 
 export interface ButtonProps
-  extends ComponentProps<typeof Kobalte>,
+  extends ComponentProps<typeof Root>,
     Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
   size?: "small" | "normal" | "large"
-  variant?: "primary" | "secondary" | "ghost"
+  variant?: "neutral" | "danger" | "warning" | "outline" | "contrast" | "ghost" | "ghost-muted" | "loading"
   icon?: IconProps["name"]
 }
 
 export function Button(props: ButtonProps) {
   const [split, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList"])
   return (
-    <Kobalte
+    <Root
       {...rest}
-      data-component="button"
+      data-component="button-v2"
       data-size={split.size || "normal"}
-      data-variant={split.variant || "secondary"}
+      data-variant={split.variant || "neutral"}
       data-icon={split.icon}
       classList={{
         ...split.classList,
         [split.class ?? ""]: !!split.class,
       }}
     >
-      <Show when={split.icon}>
-        <Icon name={split.icon!} size="small" />
-      </Show>
+      <Show when={split.icon}>{(icon) => <Icon name={icon()} />}</Show>
       {props.children}
-    </Kobalte>
+    </Root>
   )
 }

package/src/actions/icon-button/icon-button.tsx

@@ -0,0 +1,32 @@
+import { Root } from "@kobalte/core/button"
+import { type ComponentProps, splitProps } from "solid-js"
+import { JSX } from "solid-js"
+import "./icon-button.css"
+
+export interface IconButtonProps
+  extends ComponentProps<typeof Root>,
+    Pick<ComponentProps<"button">, "class" | "classList"> {
+  icon?: JSX.Element
+  size?: "small" | "normal" | "large"
+  variant?: "neutral" | "contrast" | "ghost" | "ghost-muted"
+  state?: "rest" | "hover" | "pressed"
+}
+
+export function IconButton(props: ComponentProps<"button"> & IconButtonProps) {
+  const [local, rest] = splitProps(props, ["variant", "size", "icon", "class", "classList", "state"])
+  return (
+    <Root
+      {...rest}
+      data-component="icon-button-v2"
+      data-size={local.size || "normal"}
+      data-variant={local.variant || "neutral"}
+      data-state={local.state}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      {local.icon}
+    </Root>
+  )
+}

package/src/{v2/components/split-button-v2.css → actions/split-button/split-button.css}

@@ -87,13 +87,8 @@
   flex-shrink: 0;
 }
 
-[data-component="menu-v2-content"].open-in-app-v2-menu [data-component="icon"] {
+[data-component="menu-v2-content"].open-in-app-v2-menu [data-slot="icon-svg"] {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
 }
-
-[data-component="menu-v2-content"].open-in-app-v2-menu [data-component="icon"] [data-slot="icon-svg"] {
-  width: 16px;
-  height: 16px;
-}

package/src/{v2/components/split-button-v2.tsx → actions/split-button/split-button.tsx}

@@ -1,7 +1,7 @@
 import { splitProps, type ComponentProps, type ParentProps } from "solid-js"
-import "./split-button-v2.css"
+import "./split-button.css"
 
-export function SplitButtonV2(props: ParentProps<ComponentProps<"div">>) {
+export function SplitButton(props: ParentProps<ComponentProps<"div">>) {
   const [split, rest] = splitProps(props, ["class", "classList", "children"])
   return (
     <div
@@ -17,7 +17,7 @@ export function SplitButtonV2(props: ParentProps<ComponentProps<"div">>) {
   )
 }
 
-export function SplitButtonV2Action(props: ComponentProps<"button">) {
+export function SplitButtonAction(props: ComponentProps<"button">) {
   const [split, rest] = splitProps(props, ["class", "classList"])
   return (
     <button
@@ -32,7 +32,7 @@ export function SplitButtonV2Action(props: ComponentProps<"button">) {
   )
 }
 
-export function SplitButtonV2MenuTrigger(props: ComponentProps<"button">) {
+export function SplitButtonMenuTrigger(props: ComponentProps<"button">) {
   const [split, rest] = splitProps(props, ["class", "classList"])
   return (
     <button

package/src/components/animated-number.css

@@ -17,7 +17,7 @@
   }
 
   [data-slot="animated-number-digit"] {
-    display: inline-block;
+    display: inline-grid;
     width: 1ch;
     height: 1em;
     line-height: 1em;
@@ -41,19 +41,12 @@
     mask-repeat: no-repeat;
   }
 
+  [data-slot="animated-number-static"],
   [data-slot="animated-number-strip"] {
-    display: inline-flex;
-    flex-direction: column;
-    transform: translateY(calc(var(--animated-number-offset, 10) * -1em));
-    transition-property: transform;
-    transition-duration: var(--animated-number-duration, 560ms);
-    transition-timing-function: var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
-  }
-
-  [data-slot="animated-number-strip"][data-animating="false"] {
-    transition-duration: 0ms;
+    grid-area: 1 / 1;
   }
 
+  [data-slot="animated-number-static"],
   [data-slot="animated-number-cell"] {
     display: inline-flex;
     align-items: center;
@@ -62,6 +55,24 @@
     height: 1em;
     line-height: 1em;
   }
+
+  [data-slot="animated-number-digit"][data-animating="true"] [data-slot="animated-number-static"] {
+    visibility: hidden;
+  }
+
+  [data-slot="animated-number-strip"] {
+    display: inline-flex;
+    flex-direction: column;
+    margin-top: calc(var(--animated-number-offset, 10) * -1em);
+    transition-property: margin-top;
+    transition-duration: var(--animated-number-duration, 560ms);
+    transition-timing-function: var(--tool-motion-ease, cubic-bezier(0.22, 1, 0.36, 1));
+  }
+
+  [data-slot="animated-number-digit"][data-animating="false"] [data-slot="animated-number-strip"] {
+    transition-duration: 0ms;
+    visibility: hidden;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -71,5 +82,12 @@
 
   [data-component="animated-number"] [data-slot="animated-number-strip"] {
     transition-duration: 0ms;
+    visibility: hidden;
+  }
+
+  [data-component="animated-number"]
+    [data-slot="animated-number-digit"][data-animating]
+    [data-slot="animated-number-static"] {
+    visibility: visible;
   }
 }

package/src/components/animated-number.tsx

@@ -43,10 +43,10 @@ function Digit(props: { value: number; direction: 1 | -1 }) {
   )
 
   return (
-    <span data-slot="animated-number-digit">
+    <span data-slot="animated-number-digit" data-animating={animating() ? "true" : "false"}>
+      <span data-slot="animated-number-static">{props.value}</span>
       <span
         data-slot="animated-number-strip"
-        data-animating={animating() ? "true" : "false"}
         onTransitionEnd={() => {
           setState("animating", false)
           setState("step", (value) => normalize(value) + 10)