@opencode-ai/ui 0.0.0-dev-202608201855 → 0.0.0-dev-17751

package/src/navigation/tabs/tabs.tsx

@@ -0,0 +1,194 @@
+import { Content, List, Root, Trigger } from "@kobalte/core/tabs"
+import { createContext, Show, splitProps, useContext, type JSX } from "solid-js"
+import type { Component, ComponentProps, ParentProps } from "solid-js"
+import { useI18n } from "../../context/i18n"
+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 List> {}
+export interface TabsTriggerProps extends ComponentProps<typeof Trigger> {
+  classes?: { button?: string }
+  closeButton?: JSX.Element
+  hideCloseButton?: boolean
+  onMiddleClick?: () => void
+  subtext?: JSX.Element | string
+}
+export interface TabsCloseButtonProps extends ComponentProps<"button"> {}
+export interface TabsContentProps extends ComponentProps<typeof Content> {}
+
+const TabsContext = createContext<{ current: () => boolean }>({ current: () => false })
+
+function TabsRoot(props: TabsProps) {
+  const [local, rest] = splitProps(props, ["class", "classList", "variant", "orientation", "children"])
+  const variant = () => local.variant ?? "panel"
+  const current = () => variant() === "line" || variant() === "pill" || variant() === "settings"
+  const dataVariant = () => {
+    if (variant() === "panel" || variant() === "line") return "normal"
+    if (variant() === "underline") return "alt"
+    if (variant() === "surface") return "pill"
+    return variant()
+  }
+  return (
+    <TabsContext.Provider value={{ current }}>
+      <Root
+        {...rest}
+        orientation={local.orientation}
+        data-component={current() ? "tabs-v2" : "tabs"}
+        data-variant={dataVariant()}
+        data-orientation={local.orientation || "horizontal"}
+        classList={{
+          ...local.classList,
+          [local.class ?? ""]: !!local.class,
+        }}
+      >
+        {local.children}
+      </Root>
+    </TabsContext.Provider>
+  )
+}
+
+function TabsList(props: TabsListProps) {
+  const ctx = useContext(TabsContext)
+  const [local, rest] = splitProps(props, ["class", "classList"])
+  return (
+    <List
+      {...rest}
+      data-slot={ctx.current() ? "tabs-v2-list" : "tabs-list"}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    />
+  )
+}
+
+function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
+  const ctx = useContext(TabsContext)
+  const [local, rest] = splitProps(props, [
+    "class",
+    "classList",
+    "classes",
+    "children",
+    "closeButton",
+    "hideCloseButton",
+    "onMiddleClick",
+    "subtext",
+    "dir",
+  ])
+  const wrapperSlot = () => (ctx.current() ? "tabs-v2-trigger-wrapper" : "tabs-trigger-wrapper")
+  const triggerSlot = () => (ctx.current() ? "tabs-v2-trigger" : "tabs-trigger")
+  const closeSlot = () => (ctx.current() ? "tabs-v2-trigger-close-button" : "tabs-trigger-close-button")
+  return (
+    <div
+      data-slot={wrapperSlot()}
+      data-value={props.value}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+      onMouseDown={(event) => {
+        if (event.button !== 1 || !local.onMiddleClick) return
+        event.preventDefault()
+      }}
+      onAuxClick={(event) => {
+        if (event.button !== 1 || !local.onMiddleClick) return
+        event.preventDefault()
+        local.onMiddleClick()
+      }}
+    >
+      <Trigger
+        {...rest}
+        dir={local.dir ?? "auto"}
+        data-slot={triggerSlot()}
+        data-value={props.value}
+        classList={{ [local.classes?.button ?? ""]: !!local.classes?.button }}
+      >
+        <Show when={ctx.current()} fallback={local.children}>
+          <span class="inline-flex items-center gap-2" data-slot="tabs-v2-trigger-content">
+            {local.children}
+            <Show when={local.subtext}>
+              {(subtext) => (
+                <span data-slot="tabs-v2-subtext" class="ms-2 text-xs text-text-weak">
+                  {subtext()}
+                </span>
+              )}
+            </Show>
+          </span>
+        </Show>
+      </Trigger>
+      <Show when={local.closeButton}>
+        {(closeButton) => (
+          <div data-slot={closeSlot()} data-hidden={local.hideCloseButton ? "" : undefined}>
+            {closeButton()}
+          </div>
+        )}
+      </Show>
+    </div>
+  )
+}
+
+function TabsCloseButton(props: TabsCloseButtonProps) {
+  const i18n = useI18n()
+  const [local, rest] = splitProps(props, ["class", "classList", "onClick", "onPointerDown", "aria-label"])
+  return (
+    <button
+      type="button"
+      {...rest}
+      aria-label={local["aria-label"] ?? i18n.t("ui.tabs.close")}
+      data-slot="tabs-close-button"
+      classList={{
+        [local.class ?? ""]: !!local.class,
+        ...local.classList,
+      }}
+      onPointerDown={(event) => {
+        event.stopPropagation()
+        if (typeof local.onPointerDown === "function") local.onPointerDown(event)
+      }}
+      onClick={(event) => {
+        event.preventDefault()
+        event.stopPropagation()
+        if (typeof local.onClick === "function") local.onClick(event)
+      }}
+    >
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <path d="M10.8889 3.11108L3.11108 10.8889" stroke="currentColor" stroke-linejoin="round" />
+        <path d="M3.11108 3.11108L10.8889 10.8889" stroke="currentColor" stroke-linejoin="round" />
+      </svg>
+    </button>
+  )
+}
+
+function TabsContent(props: ParentProps<TabsContentProps>) {
+  const ctx = useContext(TabsContext)
+  const [local, rest] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Content
+      {...rest}
+      data-slot={ctx.current() ? "tabs-v2-content" : "tabs-content"}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      {local.children}
+    </Content>
+  )
+}
+
+const TabsSectionTitle: Component<ParentProps> = (props) => {
+  const ctx = useContext(TabsContext)
+  return <div data-slot={ctx.current() ? "tabs-v2-section-title" : "tabs-section-title"}>{props.children}</div>
+}
+
+export const Tabs = Object.assign(TabsRoot, {
+  List: TabsList,
+  Trigger: TabsTrigger,
+  CloseButton: TabsCloseButton,
+  Content: TabsContent,
+  SectionTitle: TabsSectionTitle,
+})

package/src/{v2/components/dialog-v2.css → overlays/dialog/dialog.css}

@@ -93,6 +93,9 @@
         [data-slot="dialog-description"] {
           flex: none;
           flex-grow: 0;
+          min-width: 0;
+          max-width: 100%;
+          overflow-wrap: anywhere;
           user-select: none;
           font-weight: 440;
           font-size: 13px;

package/src/{v2/components/dialog-v2.tsx → overlays/dialog/dialog.tsx}

@@ -1,7 +1,7 @@
-import { Dialog as Kobalte } from "@kobalte/core/dialog"
+import { CloseButton, Content, Description, Title } from "@kobalte/core/dialog"
 import { type ComponentProps, type JSXElement, type ParentProps, Show, children, splitProps } from "solid-js"
 import { useI18n } from "../../context/i18n"
-import "./dialog-v2.css"
+import "./dialog.css"
 
 export interface DialogProps extends ParentProps {
   size?: "normal" | "large" | "x-large"
@@ -36,7 +36,7 @@ export function DialogBody(props: ParentProps & { class?: ComponentProps<"div">[
 }
 
 export function DialogTitle(props: ParentProps) {
-  return <Kobalte.Title data-slot="dialog-header-title">{props.children}</Kobalte.Title>
+  return <Title data-slot="dialog-header-title">{props.children}</Title>
 }
 
 export function DialogTitleGroup(props: DialogTitleGroupProps) {
@@ -45,8 +45,8 @@ export function DialogTitleGroup(props: DialogTitleGroupProps) {
 
   return (
     <div data-slot="dialog-title-group">
-      <Show when={title()}>{(t) => <Kobalte.Title data-slot="dialog-title">{t()}</Kobalte.Title>}</Show>
-      <Kobalte.Description data-slot="dialog-description">{description()}</Kobalte.Description>
+      <Show when={title()}>{(t) => <Title data-slot="dialog-title">{t()}</Title>}</Show>
+      <Description data-slot="dialog-description">{description()}</Description>
     </div>
   )
 }
@@ -59,8 +59,8 @@ export function DialogHeader(props: DialogHeaderProps) {
   return (
     <div data-slot="dialog-header" data-hide-close={hideClose() ? "" : undefined}>
       {local.children}
-      {!hideClose() && (
-        <Kobalte.CloseButton data-slot="dialog-close-button" aria-label={local.closeLabel ?? i18n.t("ui.common.close")}>
+      <Show when={!hideClose()}>
+        <CloseButton data-slot="dialog-close-button" aria-label={local.closeLabel ?? i18n.t("ui.common.close")}>
           <svg
             width="16"
             height="16"
@@ -75,8 +75,8 @@ export function DialogHeader(props: DialogHeaderProps) {
               stroke-linejoin="round"
             />
           </svg>
-        </Kobalte.CloseButton>
-      )}
+        </CloseButton>
+      </Show>
     </div>
   )
 }
@@ -92,7 +92,7 @@ export function Dialog(props: DialogProps) {
       data-size={local.size || "normal"}
     >
       <div data-slot="dialog-container" class={local.containerClass}>
-        <Kobalte.Content
+        <Content
           data-slot="dialog-content"
           classList={{
             ...local.classList,
@@ -108,10 +108,8 @@ export function Dialog(props: DialogProps) {
           }}
         >
           {local.children}
-        </Kobalte.Content>
+        </Content>
       </div>
     </div>
   )
 }
-
-export const DialogV2 = Dialog

package/src/{v2/components/tooltip-v2.css → overlays/tooltip/tooltip.css}

@@ -39,6 +39,32 @@
   }
 }
 
+[data-component="tooltip-v2"][data-appearance="standard"] {
+  display: block;
+  max-width: 320px;
+  padding: 2px 8px;
+  border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07));
+  border-radius: var(--radius-sm);
+  background: var(--surface-float-base);
+  color: var(--text-invert-strong);
+  box-shadow: var(--shadow-md);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-small);
+  font-style: normal;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large);
+  letter-spacing: var(--letter-spacing-normal);
+  font-variant-numeric: normal;
+  font-variation-settings: normal;
+  user-select: text;
+  animation: none;
+
+  &[data-closed]:not([data-force-open="true"]) {
+    opacity: 0;
+    animation: none;
+  }
+}
+
 @keyframes tooltipV2In {
   from {
     opacity: 0;

package/src/{v2/components/tooltip-v2.tsx → overlays/tooltip/tooltip.tsx}

@@ -1,11 +1,12 @@
-import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip"
+import { Content, Portal, Root, Trigger } from "@kobalte/core/tooltip"
 import { createEffect, Match, onCleanup, splitProps, Switch, type JSX } from "solid-js"
 import type { ComponentProps } from "solid-js"
 import { createStore } from "solid-js/store"
-import "./tooltip-v2.css"
+import "./tooltip.css"
 
-export interface TooltipV2Props extends ComponentProps<typeof KobalteTooltip> {
+export interface TooltipProps extends ComponentProps<typeof Root> {
   value: JSX.Element
+  appearance?: "standard" | "compact"
   class?: string
   contentClass?: string
   contentStyle?: JSX.CSSProperties
@@ -13,7 +14,7 @@ export interface TooltipV2Props extends ComponentProps<typeof KobalteTooltip> {
   forceOpen?: boolean
 }
 
-export function TooltipV2(props: TooltipV2Props) {
+export function Tooltip(props: TooltipProps) {
   let ref: HTMLDivElement | undefined
   const [state, setState] = createStore({
     open: false,
@@ -22,6 +23,7 @@ export function TooltipV2(props: TooltipV2Props) {
   })
   const [local, others] = splitProps(props, [
     "children",
+    "appearance",
     "class",
     "contentClass",
     "contentStyle",
@@ -32,6 +34,7 @@ export function TooltipV2(props: TooltipV2Props) {
   ])
 
   const close = () => setState("open", false)
+  const controlled = () => local.forceOpen !== undefined
 
   const inside = () => {
     const active = document.activeElement
@@ -86,16 +89,16 @@ export function TooltipV2(props: TooltipV2Props) {
     <Switch>
       <Match when={local.inactive}>{local.children}</Match>
       <Match when={true}>
-        <KobalteTooltip
+        <Root
           gutter={4}
           openDelay={400}
           skipDelayDuration={300}
           {...others}
           closeDelay={0}
           ignoreSafeArea={local.ignoreSafeArea ?? true}
-          open={local.forceOpen || state.open}
+          open={controlled() ? local.forceOpen : state.open}
           onOpenChange={(open) => {
-            if (local.forceOpen) return
+            if (controlled()) return
             if (state.block && open) return
             if (justClickedTrigger) {
               justClickedTrigger = false
@@ -104,7 +107,7 @@ export function TooltipV2(props: TooltipV2Props) {
             setState("open", open)
           }}
         >
-          <KobalteTooltip.Trigger
+          <Trigger
             ref={ref}
             as="div"
             data-component="tooltip-v2-trigger"
@@ -118,14 +121,15 @@ export function TooltipV2(props: TooltipV2Props) {
             onFocusOut={() => requestAnimationFrame(() => drop())}
           >
             {local.children}
-          </KobalteTooltip.Trigger>
-          <KobalteTooltip.Portal>
-            <KobalteTooltip.Content
+          </Trigger>
+          <Portal>
+            <Content
               ref={(el) => {
                 const theme = ref?.closest("[data-theme]")?.getAttribute("data-theme")
                 if (theme) el.setAttribute("data-theme", theme)
               }}
               data-component="tooltip-v2"
+              data-appearance={local.appearance ?? "compact"}
               data-placement={props.placement}
               data-force-open={local.forceOpen}
               class={local.contentClass}
@@ -138,9 +142,9 @@ export function TooltipV2(props: TooltipV2Props) {
               }}
             >
               {local.value}
-            </KobalteTooltip.Content>
-          </KobalteTooltip.Portal>
-        </KobalteTooltip>
+            </Content>
+          </Portal>
+        </Root>
       </Match>
     </Switch>
   )

package/src/styles/index.css

@@ -6,47 +6,31 @@
 @import "./base.css" layer(base);
 @import "katex/dist/katex.min.css" layer(base);
 
-@import "../components/accordion.css" layer(components);
+@import "../data-display/accordion/accordion.css" layer(components);
 @import "../components/animated-number.css" layer(components);
 @import "../components/app-icon.css" layer(components);
-@import "../components/avatar.css" layer(components);
-@import "../components/button.css" layer(components);
 @import "../components/card.css" layer(components);
-@import "../components/checkbox.css" layer(components);
+@import "../forms/checkbox/checkbox.css" layer(components);
 @import "../components/collapsible.css" layer(components);
-@import "../components/diff-changes.css" layer(components);
 @import "../components/context-menu.css" layer(components);
-@import "../components/dropdown-menu.css" layer(components);
-@import "../components/dialog.css" layer(components);
 @import "../components/file-icon.css" layer(components);
 @import "../components/hover-card.css" layer(components);
 @import "../components/provider-icon.css" layer(components);
 @import "../components/dock-surface.css" layer(components);
-@import "../components/icon.css" layer(components);
-@import "../components/icon-button.css" layer(components);
 @import "../components/image-preview.css" layer(components);
-@import "../components/keybind.css" layer(components);
+@import "../forms/inline-input/inline-input.css" layer(components);
 @import "../components/text-field.css" layer(components);
-@import "../components/inline-input.css" layer(components);
 @import "../components/list.css" layer(components);
 @import "../components/logo.css" layer(components);
 @import "../components/popover.css" layer(components);
 @import "../components/progress.css" layer(components);
-@import "../components/progress-circle.css" layer(components);
-@import "../components/radio-group.css" layer(components);
 @import "../components/resize-handle.css" layer(components);
-@import "../components/select.css" layer(components);
 @import "../components/spinner.css" layer(components);
-@import "../components/switch.css" layer(components);
 @import "../components/scroll-view.css" layer(components);
 @import "../components/sticky-accordion-header.css" layer(components);
-@import "../components/tabs.css" layer(components);
-@import "../components/tag.css" layer(components);
+@import "../navigation/tabs/tabs.css" layer(components);
 @import "../components/text-reveal.css" layer(components);
 @import "../components/text-strikethrough.css" layer(components);
-@import "../components/text-shimmer.css" layer(components);
-@import "../components/toast.css" layer(components);
-@import "../components/tooltip.css" layer(components);
 @import "../components/typewriter.css" layer(components);
 
 @import "./utilities.css" layer(utilities);

package/src/styles/tailwind/index.css

@@ -1,7 +1,21 @@
 @layer theme, base, components, utilities;
 
 @import "tailwindcss/theme.css" layer(theme);
-@import "tailwindcss/utilities.css" layer(utilities) source("../../../../");
+@import "tailwindcss/utilities.css" layer(utilities) source(none);
+@source "../../../../app/src";
+@source "../../../../app/index.html";
+@source not "../../../../app/src/i18n";
+@source not "../../../../app/src/**/*.test.{ts,tsx}";
+@source "../../../../desktop/src/renderer";
+@source not "../../../../desktop/src/renderer/**/*.test.{ts,tsx}";
+@source "../../../../enterprise/src";
+@source "../../../../session-ui/src";
+@source not "../../../../session-ui/src/**/*.test.{ts,tsx}";
+@source "../../../../storybook";
+@source "../../../src";
+@source not "../../../src/assets";
+@source not "../../../src/i18n";
+@source not "../../../src/**/*.test.{ts,tsx}";
 @import "./utilities.css";
 
 @import "../index.css";

package/src/{v2/styles → styles/tokens}/theme.css

@@ -1,16 +1,4 @@
 @layer theme {
-  html[data-theme="oc-2"] body:not([data-new-layout]) {
-    --text-diff-add-base: light-dark(#167517, #c4ffc0);
-    --text-diff-delete-base: light-dark(#fa3012, #ec2f14);
-    --syntax-comment: light-dark(#7a7a7a, #8f8f8f);
-    --syntax-keyword: light-dark(#a753ae, #edb2f1);
-    --syntax-string: #00ceb9;
-    --syntax-primitive: light-dark(#034cff, #8cb0ff);
-    --syntax-property: light-dark(#a753ae, #fab283);
-    --syntax-type: light-dark(#8a6f00, #fcd53a);
-    --syntax-critical: light-dark(#ff8c00, #fab283);
-  }
-
   :root {
     color-scheme: light;
 

package/src/theme/context.tsx

@@ -84,8 +84,9 @@ const names: Record<string, string> = {
 }
 const oc2Theme = oc2ThemeJson as DesktopTheme
 
-function normalize(id: string | null | undefined) {
-  return id === "oc-1" ? "oc-2" : id
+function resolveStoredTheme(id: string | null | undefined, registered?: Record<string, DesktopTheme>) {
+  if (id === "oc-2" || (id && (knownThemes().has(id) || registered?.[id]))) return id
+  return "oc-2"
 }
 
 function read(key: string) {
@@ -177,7 +178,12 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     defaultTheme?: string
     onThemeApplied?: (theme: DesktopTheme, mode: "light" | "dark", scheme: ColorScheme) => void
   }) => {
-    const themeId = normalize(read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme) ?? "oc-2"
+    const rawTheme = read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme
+    const themeId = resolveStoredTheme(rawTheme)
+    if (rawTheme && rawTheme !== themeId) {
+      write(STORAGE_KEYS.THEME_ID, themeId)
+      clear()
+    }
     const colorScheme = (read(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null) ?? "system"
     const mode = colorScheme === "system" ? getSystemMode() : colorScheme
     const [store, setStore] = createStore({
@@ -194,7 +200,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     const loads = new Map<string, Promise<DesktopTheme | undefined>>()
 
     const load = (id: string) => {
-      const next = normalize(id)
+      const next = id
       if (!next) return Promise.resolve(undefined)
       const hit = store.themes[next]
       if (hit) return Promise.resolve(hit)
@@ -233,9 +239,11 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
 
     const onStorage = (e: StorageEvent) => {
       if (e.key === STORAGE_KEYS.THEME_ID && e.newValue) {
-        const next = normalize(e.newValue)
-        if (!next) return
-        if (next !== "oc-2" && !knownThemes().has(next) && !store.themes[next]) return
+        const next = resolveStoredTheme(e.newValue, store.themes)
+        if (next !== e.newValue) {
+          write(STORAGE_KEYS.THEME_ID, next)
+          clear()
+        }
         setStore("themeId", next)
         if (next === "oc-2") {
           clear()
@@ -262,8 +270,8 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       }
       makeEventListener(mediaQuery, "change", onMedia)
 
-      const rawTheme = read(STORAGE_KEYS.THEME_ID)
-      const savedTheme = normalize(rawTheme ?? props.defaultTheme) ?? "oc-2"
+      const rawTheme = read(STORAGE_KEYS.THEME_ID) ?? props.defaultTheme
+      const savedTheme = resolveStoredTheme(rawTheme, store.themes)
       const savedScheme = (read(STORAGE_KEYS.COLOR_SCHEME) as ColorScheme | null) ?? "system"
       if (rawTheme && rawTheme !== savedTheme) {
         write(STORAGE_KEYS.THEME_ID, savedTheme)
@@ -285,7 +293,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     })
 
     const setTheme = (id: string) => {
-      const next = normalize(id)
+      const next = id
       if (!next) {
         console.warn(`Theme "${id}" not found`)
         return
@@ -325,7 +333,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       setColorScheme,
       registerTheme: (theme: DesktopTheme) => setStore("themes", theme.id, theme),
       previewTheme: (id: string) => {
-        const next = normalize(id)
+        const next = id
         if (!next) return
         if (next !== "oc-2" && !knownThemes().has(next) && !store.themes[next]) return
         setStore("previewThemeId", next)

package/src/theme/themes/oc-2.json

@@ -25,7 +25,7 @@
       "border-weak-base": "#DBDBDB",
       "border-weaker-base": "#E8E8E8",
       "icon-base": "#8F8F8F",
-      "icon-weak-base": "#C7C7C7",
+      "icon-weak-base": "C7C7C7",
       "surface-raised-base": "#F3F3F3",
       "surface-raised-base-hover": "#EDEDED",
       "surface-base": "#F8F8F8",

package/src/{components → typography/text-shimmer}/text-shimmer.css

@@ -5,7 +5,8 @@
   --text-shimmer-index: 0;
   --text-shimmer-angle: 90deg;
   --text-shimmer-spread: 5.2ch;
-  --text-shimmer-size: 360%;
+  --text-shimmer-gutter: calc(var(--text-shimmer-spread) + 1ch);
+  --text-shimmer-size: calc(200% + var(--text-shimmer-gutter) + var(--text-shimmer-gutter));
   --text-shimmer-base-color: var(--text-weak);
   --text-shimmer-peak-color: var(--text-strong);
   --text-shimmer-sweep: linear-gradient(

package/src/{components → typography/text-shimmer}/text-shimmer.tsx

@@ -1,5 +1,6 @@
 import { createEffect, createMemo, createSignal, onCleanup, type ValidComponent } from "solid-js"
 import { Dynamic } from "solid-js/web"
+import "./text-shimmer.css"
 
 export const TextShimmer = <T extends ValidComponent = "span">(props: {
   text: string

package/src/{v2/components/wordmark-v2.tsx → typography/wordmark/wordmark.tsx}

@@ -1,6 +1,6 @@
 import { createUniqueId, type ComponentProps } from "solid-js"
 
-export function WordmarkV2(props: Pick<ComponentProps<"svg">, "class">) {
+export function Wordmark(props: Pick<ComponentProps<"svg">, "class">) {
   const mask = createUniqueId()
   const maskGradient = createUniqueId()
 

package/dist/components/avatar.d.ts

@@ -1,9 +0,0 @@
-import { type ComponentProps } from "solid-js";
-export interface AvatarProps extends ComponentProps<"div"> {
-    fallback: string;
-    src?: string;
-    background?: string;
-    foreground?: string;
-    size?: "small" | "normal" | "large";
-}
-export declare function Avatar(props: AvatarProps): import("solid-js").JSX.Element;

package/dist/components/button.d.ts

@@ -1,9 +0,0 @@
-import { Button as Kobalte } from "@kobalte/core/button";
-import { type ComponentProps } from "solid-js";
-import { IconProps } from "./icon";
-export interface ButtonProps extends ComponentProps<typeof Kobalte>, Pick<ComponentProps<"button">, "class" | "classList" | "children"> {
-    size?: "small" | "normal" | "large";
-    variant?: "primary" | "secondary" | "ghost";
-    icon?: IconProps["name"];
-}
-export declare function Button(props: ButtonProps): import("solid-js").JSX.Element;

package/dist/components/dialog.d.ts

@@ -1,12 +0,0 @@
-import { ComponentProps, JSXElement, ParentProps } from "solid-js";
-export interface DialogProps extends ParentProps {
-    title?: JSXElement;
-    description?: JSXElement;
-    action?: JSXElement;
-    size?: "normal" | "large" | "x-large";
-    class?: ComponentProps<"div">["class"];
-    classList?: ComponentProps<"div">["classList"];
-    fit?: boolean;
-    transition?: boolean;
-}
-export declare function Dialog(props: DialogProps): import("solid-js").JSX.Element;