@opencode-ai/ui 0.0.0-dev-202609050337 → 0.0.0-dev-19145

package/src/components/switch.css

@@ -1,136 +0,0 @@
-[data-component="switch"] {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  cursor: default;
-
-  [data-slot="switch-input"] {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-
-  [data-slot="switch-control"] {
-    display: inline-flex;
-    align-items: center;
-    width: 28px;
-    height: 16px;
-    flex-shrink: 0;
-    border-radius: 3px;
-    border: 1px solid var(--border-weak-base);
-    background: var(--surface-base);
-    transition:
-      background-color 150ms,
-      border-color 150ms;
-  }
-
-  [data-slot="switch-thumb"] {
-    width: 14px;
-    height: 14px;
-    box-sizing: content-box;
-
-    border-radius: 2px;
-    border: 1px solid var(--border-base);
-    background: var(--icon-invert-base);
-
-    /* shadows/shadow-xs */
-    box-shadow:
-      0 1px 2px -1px rgba(19, 16, 16, 0.04),
-      0 1px 2px 0 rgba(19, 16, 16, 0.06),
-      0 1px 3px 0 rgba(19, 16, 16, 0.08);
-
-    transform: translateX(-1px);
-    transition:
-      transform 150ms,
-      background-color 150ms;
-  }
-
-  [data-slot="switch-label"] {
-    user-select: none;
-    color: var(--text-base);
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
-    font-style: normal;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-large);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  [data-slot="switch-description"] {
-    color: var(--text-base);
-    font-family: var(--font-family-sans);
-    font-size: 12px;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  [data-slot="switch-error"] {
-    color: var(--text-error);
-    font-family: var(--font-family-sans);
-    font-size: 12px;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-normal);
-    letter-spacing: var(--letter-spacing-normal);
-  }
-
-  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
-    border-color: var(--border-hover);
-    background-color: var(--surface-hover);
-  }
-
-  &:not([data-readonly]) [data-slot="switch-input"]:focus-visible ~ [data-slot="switch-control"] {
-    border-color: var(--border-focus);
-    box-shadow: var(--shadow-xs-border-focus);
-  }
-
-  &[data-checked] [data-slot="switch-control"] {
-    box-sizing: border-box;
-    border-color: var(--icon-strong-base);
-    background-color: var(--icon-strong-base);
-  }
-
-  &[data-checked] [data-slot="switch-thumb"] {
-    border: none;
-    transform: translateX(12px);
-    background-color: var(--icon-invert-base);
-  }
-
-  &:dir(rtl)[data-checked] [data-slot="switch-thumb"] {
-    transform: translateX(-12px);
-  }
-
-  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
-    border-color: var(--border-hover);
-    background-color: var(--surface-hover);
-  }
-
-  &[data-disabled] {
-    cursor: not-allowed;
-  }
-
-  &[data-disabled] [data-slot="switch-control"] {
-    border-color: var(--border-disabled);
-    background-color: var(--surface-disabled);
-  }
-
-  &[data-disabled] [data-slot="switch-thumb"] {
-    background-color: var(--icon-disabled);
-  }
-
-  &[data-invalid] [data-slot="switch-control"] {
-    border-color: var(--border-error);
-  }
-
-  &[data-readonly] {
-    cursor: default;
-    pointer-events: none;
-  }
-}

package/src/components/switch.tsx

@@ -1,29 +0,0 @@
-import { Switch as Kobalte } from "@kobalte/core/switch"
-import { Show, splitProps } from "solid-js"
-import type { ComponentProps, ParentProps } from "solid-js"
-
-export interface SwitchProps extends ParentProps<ComponentProps<typeof Kobalte>> {
-  hideLabel?: boolean
-  description?: string
-}
-
-export function Switch(props: SwitchProps) {
-  const [local, others] = splitProps(props, ["children", "class", "hideLabel", "description"])
-  return (
-    <Kobalte {...others} class={local.class} data-component="switch">
-      <Kobalte.Input data-slot="switch-input" />
-      <Show when={local.children}>
-        <Kobalte.Label data-slot="switch-label" classList={{ "sr-only": local.hideLabel }}>
-          {local.children}
-        </Kobalte.Label>
-      </Show>
-      <Show when={local.description}>
-        <Kobalte.Description data-slot="switch-description">{local.description}</Kobalte.Description>
-      </Show>
-      <Kobalte.ErrorMessage data-slot="switch-error" />
-      <Kobalte.Control data-slot="switch-control">
-        <Kobalte.Thumb data-slot="switch-thumb" />
-      </Kobalte.Control>
-    </Kobalte>
-  )
-}

package/src/components/tabs.tsx

@@ -1,126 +0,0 @@
-import { Tabs as Kobalte } from "@kobalte/core/tabs"
-import { Show, splitProps, 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"
-  orientation?: "horizontal" | "vertical"
-}
-export interface TabsListProps extends ComponentProps<typeof Kobalte.List> {}
-export interface TabsTriggerProps extends ComponentProps<typeof Kobalte.Trigger> {
-  classes?: {
-    button?: string
-  }
-  hideCloseButton?: boolean
-  closeButton?: JSX.Element
-  onMiddleClick?: () => void
-}
-export interface TabsContentProps extends ComponentProps<typeof Kobalte.Content> {}
-
-function TabsRoot(props: TabsProps) {
-  const [split, rest] = splitProps(props, ["class", "classList", "variant", "orientation"])
-  return (
-    <Kobalte
-      {...rest}
-      orientation={split.orientation}
-      data-component="tabs"
-      data-variant={split.variant || "normal"}
-      data-orientation={split.orientation || "horizontal"}
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    />
-  )
-}
-
-function TabsList(props: TabsListProps) {
-  const [split, rest] = splitProps(props, ["class", "classList"])
-  return (
-    <Kobalte.List
-      {...rest}
-      data-slot="tabs-list"
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    />
-  )
-}
-
-function TabsTrigger(props: ParentProps<TabsTriggerProps>) {
-  const [split, rest] = splitProps(props, [
-    "class",
-    "classList",
-    "classes",
-    "children",
-    "closeButton",
-    "hideCloseButton",
-    "onMiddleClick",
-  ])
-  return (
-    <div
-      data-slot="tabs-trigger-wrapper"
-      data-value={props.value}
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-      onMouseDown={(e) => {
-        if (e.button === 1 && split.onMiddleClick) {
-          e.preventDefault()
-        }
-      }}
-      onAuxClick={(e) => {
-        if (e.button === 1 && split.onMiddleClick) {
-          e.preventDefault()
-          split.onMiddleClick()
-        }
-      }}
-    >
-      <Kobalte.Trigger
-        {...rest}
-        dir={rest.dir ?? "auto"}
-        data-slot="tabs-trigger"
-        data-value={props.value}
-        classList={{ [split.classes?.button ?? ""]: split.classes?.button }}
-      >
-        {split.children}
-      </Kobalte.Trigger>
-      <Show when={split.closeButton}>
-        {(closeButton) => (
-          <div data-slot="tabs-trigger-close-button" data-hidden={split.hideCloseButton}>
-            {closeButton()}
-          </div>
-        )}
-      </Show>
-    </div>
-  )
-}
-
-function TabsContent(props: ParentProps<TabsContentProps>) {
-  const [split, rest] = splitProps(props, ["class", "classList", "children"])
-  return (
-    <Kobalte.Content
-      {...rest}
-      data-slot="tabs-content"
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    >
-      {split.children}
-    </Kobalte.Content>
-  )
-}
-
-const TabsSectionTitle: Component<ParentProps> = (props) => {
-  return <div data-slot="tabs-section-title">{props.children}</div>
-}
-
-export const Tabs = Object.assign(TabsRoot, {
-  List: TabsList,
-  Trigger: TabsTrigger,
-  Content: TabsContent,
-  SectionTitle: TabsSectionTitle,
-})

package/src/components/tag.css

@@ -1,37 +0,0 @@
-[data-component="tag"] {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  user-select: none;
-
-  border-radius: var(--radius-xs);
-  border: 0.5px solid var(--border-weak-base);
-  background: var(--surface-raised-base);
-  color: var(--text-base);
-
-  &[data-size="normal"] {
-    height: 18px;
-    padding: 0 6px;
-
-    /* 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="large"] {
-    height: 22px;
-    padding: 0 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);
-  }
-}

package/src/components/tag.tsx

@@ -1,22 +0,0 @@
-import { type ComponentProps, splitProps } from "solid-js"
-
-export interface TagProps extends ComponentProps<"span"> {
-  size?: "normal" | "large"
-}
-
-export function Tag(props: TagProps) {
-  const [split, rest] = splitProps(props, ["size", "class", "classList", "children"])
-  return (
-    <span
-      {...rest}
-      data-component="tag"
-      data-size={split.size || "normal"}
-      classList={{
-        ...split.classList,
-        [split.class ?? ""]: !!split.class,
-      }}
-    >
-      {split.children}
-    </span>
-  )
-}

package/src/components/toast.css

@@ -1,236 +0,0 @@
-[data-component="toast-region"] {
-  position: fixed;
-  bottom: 48px;
-  inset-inline-end: 32px;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  max-width: min(400px, calc(100vw - 64px));
-  max-height: calc(100dvh - 96px);
-  width: 100%;
-  overflow: hidden;
-  pointer-events: none;
-
-  [data-slot="toast-list"] {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    list-style: none;
-    margin: 0;
-    padding: 0;
-    max-height: 100%;
-    overflow-y: auto;
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-}
-
-[data-component="toast"] {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  gap: 20px;
-  padding: 16px 20px;
-  max-height: min(420px, calc(100dvh - 96px));
-  overflow: hidden;
-  pointer-events: auto;
-  transition: all 150ms ease-out;
-
-  border-radius: var(--radius-lg);
-  border: 1px solid var(--border-weak-base);
-  background: var(--surface-float-base);
-  color: var(--text-invert-base);
-  box-shadow: var(--shadow-md);
-
-  [data-slot="toast-inner"] {
-    display: flex;
-    align-items: flex-start;
-    gap: 10px;
-  }
-
-  &[data-opened] {
-    animation: toastPopIn 150ms ease-out;
-  }
-
-  &[data-closed] {
-    animation: toastPopOut 100ms ease-in forwards;
-  }
-
-  &[data-swipe="move"] {
-    transform: translateX(var(--kb-toast-swipe-move-x));
-  }
-
-  &[data-swipe="cancel"] {
-    transform: translateX(0);
-    transition: transform 200ms ease-out;
-  }
-
-  &[data-swipe="end"] {
-    animation: toastSwipeOut 100ms ease-out forwards;
-  }
-
-  /* &[data-variant="success"] { */
-  /*   border-color: var(--color-semantic-positive); */
-  /* } */
-  /**/
-  /* &[data-variant="error"] { */
-  /*   border-color: var(--color-semantic-danger); */
-  /* } */
-  /**/
-  /* &[data-variant="loading"] { */
-  /*   border-color: var(--color-semantic-info); */
-  /* } */
-
-  [data-slot="toast-icon"] {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    [data-component="icon"] {
-      color: var(--text-invert-stronger);
-      /* color: var(--icon-invert-base); */
-    }
-  }
-
-  [data-slot="toast-content"] {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-    min-height: 0;
-    min-width: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-    scrollbar-width: none;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-  }
-
-  [data-slot="toast-title"] {
-    color: var(--text-invert-strong);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    /* 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);
-
-    margin: 0;
-  }
-
-  [data-slot="toast-description"] {
-    color: var(--text-invert-base);
-    text-wrap-style: pretty;
-    overflow-wrap: anywhere;
-    word-break: break-word;
-
-    /* text-14-regular */
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-base);
-    font-style: normal;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-x-large); /* 171.429% */
-    letter-spacing: var(--letter-spacing-normal);
-
-    margin: 0;
-  }
-
-  [data-slot="toast-actions"] {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
-    margin-top: 8px;
-  }
-
-  [data-slot="toast-action"] {
-    background: none;
-    border: none;
-    padding: 0;
-    cursor: pointer;
-    min-width: 0;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    color: var(--text-invert-weak);
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-base);
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large);
-    letter-spacing: var(--letter-spacing-normal);
-
-    &:hover {
-      text-decoration: underline;
-    }
-
-    &:first-child {
-      color: var(--text-invert-strong);
-    }
-  }
-
-  [data-slot="toast-close-button"] {
-    flex-shrink: 0;
-  }
-
-  [data-slot="toast-progress-track"] {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-    background-color: var(--surface-base);
-    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
-    overflow: hidden;
-  }
-
-  [data-slot="toast-progress-fill"] {
-    height: 100%;
-    width: var(--kb-toast-progress-fill-width);
-    background-color: var(--color-primary);
-    transition: width 250ms linear;
-  }
-}
-
-@keyframes toastPopIn {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes toastPopOut {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-}
-
-@keyframes toastSwipeOut {
-  from {
-    transform: translateX(var(--kb-toast-swipe-end-x));
-  }
-  to {
-    transform: translateX(100%);
-  }
-}