@opencode-ai/ui 0.0.0-dev-202609010135 → 0.0.0-dev-18786

package/dist/v2/components/tabs-v2.d.ts

@@ -1,34 +0,0 @@
-import { Tabs as Kobalte } from "@kobalte/core/tabs";
-import { type JSX } from "solid-js";
-import type { ComponentProps, ParentProps, Component } from "solid-js";
-import "./tabs-v2.css";
-export interface TabsV2Props extends ComponentProps<typeof Kobalte> {
-    variant?: "normal" | "pill" | "settings";
-    orientation?: "horizontal" | "vertical";
-}
-export interface TabsV2ListProps extends ComponentProps<typeof Kobalte.List> {
-}
-export interface TabsV2TriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
-    onMiddleClick?: () => void;
-    /** Optional subtext shown beside the primary content (muted style) */
-    subtext?: JSX.Element | string;
-}
-export interface TabsV2CloseButtonProps extends ComponentProps<"div"> {
-}
-export interface TabsV2ContentProps extends ComponentProps<typeof Kobalte.Content> {
-}
-declare function TabsV2Root(props: TabsV2Props): JSX.Element;
-declare function TabsV2List(props: TabsV2ListProps): JSX.Element;
-declare function TabsV2Trigger(props: ParentProps<TabsV2TriggerProps>): JSX.Element;
-declare function TabsV2CloseButton(props: TabsV2CloseButtonProps): JSX.Element;
-declare function TabsV2Content(props: ParentProps<TabsV2ContentProps>): JSX.Element;
-export declare const TabsV2: typeof TabsV2Root & {
-    List: typeof TabsV2List;
-    Trigger: typeof TabsV2Trigger;
-    CloseButton: typeof TabsV2CloseButton;
-    Content: typeof TabsV2Content;
-    SectionTitle: Component<{
-        children?: JSX.Element;
-    }>;
-};
-export {};

package/dist/v2/components/text-shimmer-v2.d.ts

@@ -1,9 +0,0 @@
-import { type ValidComponent } from "solid-js";
-import "./text-shimmer-v2.css";
-export declare const TextShimmerV2: <T extends ValidComponent = "span">(props: {
-    text: string;
-    class?: string;
-    as?: T;
-    active?: boolean;
-    offset?: number;
-}) => import("solid-js").JSX.Element;

package/dist/v2/components/textarea-v2.d.ts

@@ -1,7 +0,0 @@
-import { type ComponentProps } from "solid-js";
-import "./textarea-v2.css";
-export interface TextareaV2Props extends ComponentProps<"textarea"> {
-    /** Error styling for the field and value text. */
-    invalid?: boolean;
-}
-export declare function TextareaV2(props: TextareaV2Props): import("solid-js").JSX.Element;

package/dist/v2/components/toast-v2.d.ts

@@ -1,57 +0,0 @@
-import { type ToasterProps } from "solid-sonner";
-import type { ComponentProps, JSX } from "solid-js";
-import "./button-v2.css";
-import "./toast-v2.css";
-export interface ToastV2RegionProps extends ToasterProps {
-}
-declare function ToastV2Region(props: ToastV2RegionProps): JSX.Element;
-export interface ToastV2RootComponentProps {
-    toastId: number;
-    children?: JSX.Element;
-}
-declare function ToastV2Root(props: ToastV2RootComponentProps): JSX.Element;
-declare function ToastV2Icon(props: ComponentProps<"div">): JSX.Element;
-declare function ToastV2Content(props: ComponentProps<"div">): JSX.Element;
-declare function ToastV2Title(props: ComponentProps<"div">): JSX.Element;
-declare function ToastV2Description(props: ComponentProps<"div">): JSX.Element;
-declare function ToastV2Actions(props: ComponentProps<"div">): JSX.Element;
-declare function ToastV2CloseButton(props: ComponentProps<"button">): JSX.Element;
-export declare const ToastV2: typeof ToastV2Root & {
-    Region: typeof ToastV2Region;
-    Icon: typeof ToastV2Icon;
-    Content: typeof ToastV2Content;
-    Title: typeof ToastV2Title;
-    Description: typeof ToastV2Description;
-    Actions: typeof ToastV2Actions;
-    CloseButton: typeof ToastV2CloseButton;
-};
-export declare const toasterV2: {
-    show(render: (props: {
-        toastId: number;
-    }) => JSX.Element, options?: {
-        duration?: number;
-        persistent?: boolean;
-    }): number;
-    dismiss(toastId?: number): string | number | undefined;
-};
-export interface ToastV2Action {
-    label: string;
-    variant?: "primary" | "secondary";
-    onClick: "dismiss" | (() => void);
-}
-export interface ToastV2Options {
-    title?: string;
-    description?: string;
-    icon?: JSX.Element;
-    variant?: "default" | "success" | "error" | "loading";
-    duration?: number;
-    persistent?: boolean;
-    actions?: ToastV2Action[];
-}
-export declare function showToastV2(options: ToastV2Options | string): number;
-export interface ToastV2PromiseOptions<T, U = unknown> {
-    loading?: JSX.Element;
-    success?: (data: T) => JSX.Element;
-    error?: (error: U) => JSX.Element;
-}
-export {};

package/dist/v2/components/tooltip-v2.d.ts

@@ -1,13 +0,0 @@
-import { Tooltip as KobalteTooltip } from "@kobalte/core/tooltip";
-import { type JSX } from "solid-js";
-import type { ComponentProps } from "solid-js";
-import "./tooltip-v2.css";
-export interface TooltipV2Props extends ComponentProps<typeof KobalteTooltip> {
-    value: JSX.Element;
-    class?: string;
-    contentClass?: string;
-    contentStyle?: JSX.CSSProperties;
-    inactive?: boolean;
-    forceOpen?: boolean;
-}
-export declare function TooltipV2(props: TooltipV2Props): JSX.Element;

package/dist/v2/components/wordmark-v2.d.ts

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

package/src/components/avatar.css

@@ -1,49 +0,0 @@
-[data-component="avatar"] {
-  --avatar-bg: var(--color-surface-info-base);
-  --avatar-fg: var(--color-text-base);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  border-radius: var(--radius-sm);
-  border: 1px solid var(--color-border-weak-base);
-  font-family: var(--font-mono);
-  font-weight: 500;
-  text-transform: uppercase;
-  background-color: var(--avatar-bg);
-  color: var(--avatar-fg);
-}
-
-[data-component="avatar"][data-has-image] {
-  background-color: transparent;
-  border: none;
-}
-
-[data-component="avatar"][data-size="small"] {
-  width: 1.25rem;
-  height: 1.25rem;
-  font-size: 0.75rem;
-  line-height: 1;
-}
-
-[data-component="avatar"][data-size="normal"] {
-  width: 1.5rem;
-  height: 1.5rem;
-  font-size: 1.125rem;
-  line-height: 1.5rem;
-}
-
-[data-component="avatar"][data-size="large"] {
-  width: 2rem;
-  height: 2rem;
-  font-size: 1.25rem;
-  line-height: 2rem;
-}
-
-[data-component="avatar"] [data-slot="avatar-image"] {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-  border-radius: inherit;
-}

package/src/components/avatar.tsx

@@ -1,55 +0,0 @@
-import { type ComponentProps, splitProps, Show } from "solid-js"
-
-const segmenter =
-  typeof Intl !== "undefined" && "Segmenter" in Intl
-    ? new Intl.Segmenter(undefined, { granularity: "grapheme" })
-    : undefined
-
-function first(value: string) {
-  if (!value) return ""
-  if (!segmenter) return Array.from(value)[0] ?? ""
-  return segmenter.segment(value)[Symbol.iterator]().next().value?.segment ?? Array.from(value)[0] ?? ""
-}
-
-export interface AvatarProps extends ComponentProps<"div"> {
-  fallback: string
-  src?: string
-  background?: string
-  foreground?: string
-  size?: "small" | "normal" | "large"
-}
-
-export function Avatar(props: AvatarProps) {
-  const [split, rest] = splitProps(props, [
-    "fallback",
-    "src",
-    "background",
-    "foreground",
-    "size",
-    "class",
-    "classList",
-    "style",
-  ])
-  const src = split.src // did this so i can zero it out to test fallback
-  return (
-    <div
-      {...rest}
-      data-component="avatar"
-      data-size={split.size || "normal"}
-      data-has-image={src ? "" : undefined}
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-      style={{
-        ...(typeof split.style === "object" ? split.style : {}),
-        ...(!src && split.background ? { "--avatar-bg": split.background } : {}),
-        ...(!src && split.foreground ? { "--avatar-fg": split.foreground } : {}),
-      }}
-    >
-      <Show when={src} fallback={first(split.fallback)}>
-        {(src) => <img src={src()} draggable={false} data-slot="avatar-image" />}
-      </Show>
-    </div>
-  )
-}

package/src/components/button.css

@@ -1,194 +0,0 @@
-[data-component="button"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-style: solid;
-  border-width: 1px;
-  border-radius: var(--radius-md);
-  text-decoration: none;
-  user-select: none;
-  cursor: default;
-  outline: none;
-  white-space: nowrap;
-
-  &[data-variant="primary"] {
-    background-color: var(--button-primary-base);
-    border-color: var(--border-weak-base);
-    color: var(--icon-invert-base);
-
-    [data-slot="icon-svg"] {
-      color: var(--icon-invert-base);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--icon-strong-hover);
-    }
-    &:focus:not(:disabled) {
-      background-color: var(--icon-strong-focus);
-    }
-    &:active:not(:disabled) {
-      background-color: var(--icon-strong-active);
-    }
-    &:disabled {
-      background-color: var(--icon-strong-disabled);
-
-      [data-slot="icon-svg"] {
-        color: var(--icon-invert-base);
-      }
-    }
-  }
-
-  &[data-variant="ghost"] {
-    border-color: transparent;
-    background-color: transparent;
-    color: var(--text-strong);
-
-    [data-slot="icon-svg"] {
-      color: var(--icon-base);
-    }
-
-    &:hover:not(:disabled) {
-      background-color: var(--surface-base-hover);
-    }
-    &:focus-visible:not(:disabled) {
-      background-color: var(--surface-base-hover);
-    }
-    &:active:not(:disabled) {
-      background-color: var(--surface-base-active);
-    }
-    &:disabled {
-      color: var(--text-weak);
-      cursor: not-allowed;
-
-      [data-slot="icon-svg"] {
-        color: var(--icon-disabled);
-      }
-    }
-    &[data-selected="true"]:not(:disabled) {
-      background-color: var(--surface-base-hover);
-    }
-    &[data-active="true"] {
-      background-color: var(--surface-base-active);
-    }
-  }
-
-  &[data-variant="secondary"] {
-    border: transparent;
-    background-color: var(--button-secondary-base);
-    color: var(--text-strong);
-    box-shadow: var(--shadow-xs-border-base);
-
-    &:hover:not(:disabled) {
-      background-color: var(--button-secondary-hover);
-    }
-    &:focus:not(:disabled) {
-      background-color: var(--button-secondary-base);
-    }
-    &:focus-visible:not(:active) {
-      background-color: var(--button-secondary-base);
-      box-shadow: var(--shadow-xs-border-focus);
-    }
-    &:focus-visible:active {
-      box-shadow: none;
-    }
-    &:active:not(:disabled) {
-      background-color: var(--button-secondary-base);
-    }
-    &:disabled {
-      border-color: var(--border-disabled);
-      background-color: var(--surface-disabled);
-      color: var(--text-weak);
-      cursor: not-allowed;
-    }
-
-    [data-slot="icon-svg"] {
-      color: var(--icon-base);
-    }
-  }
-
-  &[data-size="small"] {
-    height: 24px;
-    padding: 0 8px;
-    &[data-icon] {
-      padding: 0 12px 0 4px;
-    }
-
-    font-size: var(--font-size-small);
-    line-height: var(--line-height-large);
-    gap: 8px;
-
-    /* text-12-medium */
-    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); /* 166.667% */
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  &[data-size="normal"] {
-    height: 28px;
-    line-height: 28px;
-    padding: 0 6px;
-    &[data-icon] {
-      padding: 0 12px 0 4px;
-    }
-
-    font-size: var(--font-size-small);
-    gap: 8px;
-
-    /* text-12-medium */
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
-    font-style: normal;
-    font-weight: var(--font-weight-medium);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  &[data-size="large"] {
-    height: 32px;
-    padding: 6px 12px;
-
-    &[data-icon] {
-      padding: 0 12px 0 8px;
-    }
-
-    gap: 8px;
-
-    /* text-14-medium */
-    font-family: var(--font-family-sans);
-    font-size: 14px;
-    font-style: normal;
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large); /* 142.857% */
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  &:focus {
-    outline: none;
-  }
-}
-
-[data-component="button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"] {
-  background-color: var(--surface-base-active);
-}
-
-[data-component="button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"] [data-slot="icon-svg"] {
-  color: var(--icon-strong-base);
-}
-
-[data-component="button"].titlebar-icon[data-variant="ghost"][aria-expanded="true"]:hover:not(:disabled) {
-  background-color: var(--surface-base-active);
-}
-
-[data-component="button"].titlebar-icon[data-variant="ghost"][aria-current="page"] {
-  background-color: var(--surface-base-active);
-}
-
-[data-component="button"].titlebar-icon[data-variant="ghost"][aria-current="page"] [data-slot="icon-svg"] {
-  color: var(--icon-strong-base);
-}
-
-[data-component="button"].titlebar-icon[data-variant="ghost"][aria-current="page"]:hover:not(:disabled) {
-  background-color: var(--surface-base-active);
-}

package/src/components/dialog.css

@@ -1,181 +0,0 @@
-/* [data-component="dialog-trigger"] { } */
-
-[data-component="dialog-overlay"] {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  background-color: hsl(from var(--background-base) h s l / 0.2);
-}
-
-[data-component="dialog"] {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-
-  [data-slot="dialog-container"] {
-    position: relative;
-    z-index: 50;
-    width: min(calc(100vw - 16px), 640px);
-    height: min(calc(100vh - 16px), 512px);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-items: start;
-    overflow: visible;
-
-    [data-slot="dialog-content"] {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      align-self: stretch;
-      width: 100%;
-      max-height: 100%;
-      min-height: 280px;
-      overflow: auto;
-      pointer-events: auto;
-
-      /* Hide scrollbar */
-      scrollbar-width: none;
-      -ms-overflow-style: none;
-      &::-webkit-scrollbar {
-        display: none;
-      }
-
-      /* padding: 8px; */
-      /* padding: 8px 8px 0 8px; */
-      border-radius: var(--radius-xl);
-      background: var(--surface-raised-stronger-non-alpha);
-      background-clip: padding-box;
-      box-shadow: var(--shadow-lg-border-base);
-
-      [data-slot="dialog-header"] {
-        display: flex;
-        padding: 16px 20px;
-        justify-content: space-between;
-        align-items: center;
-        flex-shrink: 0;
-        align-self: stretch;
-
-        [data-slot="dialog-title"] {
-          color: var(--text-strong);
-
-          /* text-16-medium */
-          font-family: var(--font-family-sans);
-          font-size: var(--font-size-large);
-          font-style: normal;
-          font-weight: var(--font-weight-medium);
-          line-height: var(--line-height-x-large); /* 150% */
-          letter-spacing: var(--letter-spacing-tight);
-        }
-        /* [data-slot="dialog-close-button"] {} */
-      }
-
-      [data-slot="dialog-description"] {
-        display: flex;
-        padding: 16px;
-        padding-left: 24px;
-        padding-top: 0;
-        margin-top: -8px;
-        justify-content: space-between;
-        align-items: center;
-        flex-shrink: 0;
-        align-self: stretch;
-
-        color: var(--text-base);
-
-        /* text-14-regular */
-        font-family: var(--font-family-sans);
-        font-size: 14px;
-        font-style: normal;
-        font-weight: var(--font-weight-regular);
-        line-height: var(--line-height-large); /* 142.857% */
-        letter-spacing: var(--letter-spacing-normal);
-      }
-
-      [data-slot="dialog-body"] {
-        width: 100%;
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        overflow: hidden;
-
-        &:focus-visible {
-          outline: none;
-        }
-      }
-      &:focus-visible {
-        outline: none;
-      }
-    }
-  }
-
-  &[data-fit] {
-    [data-slot="dialog-container"] {
-      height: auto;
-
-      [data-slot="dialog-content"] {
-        min-height: 0;
-      }
-    }
-  }
-
-  &[data-size="large"] [data-slot="dialog-container"] {
-    width: min(calc(100vw - 32px), 800px);
-    height: min(calc(100vh - 32px), 600px);
-  }
-
-  &[data-size="x-large"] [data-slot="dialog-container"] {
-    width: min(calc(100vw - 32px), 980px);
-    height: min(calc(100vh - 92px), 600px);
-  }
-}
-
-[data-component="dialog"][data-transition] [data-slot="dialog-content"] {
-  animation: contentHide 100ms ease-in forwards;
-
-  &[data-expanded] {
-    animation: contentShow 150ms ease-out;
-  }
-}
-
-@keyframes overlayShow {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes overlayHide {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@keyframes contentShow {
-  from {
-    opacity: 0;
-    transform: scale(0.98);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@keyframes contentHide {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.98);
-  }
-}

package/src/components/dialog.tsx

@@ -1,72 +0,0 @@
-import { Dialog as Kobalte } from "@kobalte/core/dialog"
-import { ComponentProps, JSXElement, Match, ParentProps, Show, Switch } from "solid-js"
-import { useI18n } from "../context/i18n"
-import { IconButton } from "./icon-button"
-
-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 function Dialog(props: DialogProps) {
-  const i18n = useI18n()
-  return (
-    <div
-      data-component="dialog"
-      data-fit={props.fit ? true : undefined}
-      data-size={props.size || "normal"}
-      data-transition={props.transition ? true : undefined}
-    >
-      <div data-slot="dialog-container">
-        <Kobalte.Content
-          data-slot="dialog-content"
-          data-no-header={!props.title && !props.action ? "" : undefined}
-          classList={{
-            ...props.classList,
-            [props.class ?? ""]: !!props.class,
-          }}
-          onOpenAutoFocus={(e) => {
-            const target = e.currentTarget as HTMLElement | null
-            const autofocusEl = target?.querySelector("[autofocus]") as HTMLElement | null
-            if (autofocusEl) {
-              e.preventDefault()
-              autofocusEl.focus()
-            }
-          }}
-        >
-          <Show when={props.title || props.action}>
-            <div data-slot="dialog-header">
-              <Show when={props.title}>
-                <Kobalte.Title data-slot="dialog-title">{props.title}</Kobalte.Title>
-              </Show>
-              <Switch>
-                <Match when={props.action}>{props.action}</Match>
-                <Match when={true}>
-                  <Kobalte.CloseButton
-                    data-slot="dialog-close-button"
-                    as={IconButton}
-                    icon="close"
-                    variant="ghost"
-                    aria-label={i18n.t("ui.common.close")}
-                  />
-                </Match>
-              </Switch>
-            </div>
-          </Show>
-          <Show when={props.description}>
-            <Kobalte.Description data-slot="dialog-description" style={{ "margin-left": "-4px" }}>
-              {props.description}
-            </Kobalte.Description>
-          </Show>
-          <div data-slot="dialog-body">{props.children}</div>
-        </Kobalte.Content>
-      </div>
-    </div>
-  )
-}