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

package/src/components/select.tsx

@@ -1,174 +0,0 @@
-import { Select as Kobalte } from "@kobalte/core/select"
-import { createMemo, onCleanup, splitProps, type ComponentProps, type JSX } from "solid-js"
-import { pipe, groupBy, entries, map } from "remeda"
-import { Button, ButtonProps } from "./button"
-import { Icon } from "./icon"
-
-export type SelectProps<T> = Omit<ComponentProps<typeof Kobalte<T>>, "value" | "onSelect" | "children"> & {
-  placeholder?: string
-  options: T[]
-  current?: T
-  value?: (x: T) => string
-  label?: (x: T) => string
-  groupBy?: (x: T) => string
-  valueClass?: ComponentProps<"div">["class"]
-  onSelect?: (value: T | undefined) => void
-  onHighlight?: (value: T | undefined) => (() => void) | void
-  class?: ComponentProps<"div">["class"]
-  classList?: ComponentProps<"div">["classList"]
-  children?: (item: T | undefined) => JSX.Element
-  triggerStyle?: JSX.CSSProperties
-  triggerVariant?: "settings"
-  triggerProps?: Record<string, string | number | boolean | undefined>
-}
-
-export function Select<T>(props: SelectProps<T> & Omit<ButtonProps, "children">) {
-  const [local, others] = splitProps(props, [
-    "class",
-    "classList",
-    "placeholder",
-    "options",
-    "current",
-    "value",
-    "label",
-    "groupBy",
-    "valueClass",
-    "onSelect",
-    "onHighlight",
-    "onOpenChange",
-    "children",
-    "triggerStyle",
-    "triggerVariant",
-    "triggerProps",
-  ])
-
-  const state = {
-    key: undefined as string | undefined,
-    cleanup: undefined as (() => void) | void,
-  }
-
-  const stop = () => {
-    state.cleanup?.()
-    state.cleanup = undefined
-    state.key = undefined
-  }
-
-  const keyFor = (item: T) => (local.value ? local.value(item) : (item as string))
-
-  const move = (item: T | undefined) => {
-    if (!local.onHighlight) return
-    if (!item) {
-      stop()
-      return
-    }
-
-    const key = keyFor(item)
-    if (state.key === key) return
-    state.cleanup?.()
-    state.cleanup = local.onHighlight(item)
-    state.key = key
-  }
-
-  onCleanup(stop)
-
-  const grouped = createMemo(() => {
-    const result = pipe(
-      local.options,
-      groupBy((x) => (local.groupBy ? local.groupBy(x) : "")),
-      // mapValues((x) => x.sort((a, b) => a.title.localeCompare(b.title))),
-      entries(),
-      map(([k, v]) => ({ category: k, options: v })),
-    )
-    return result
-  })
-
-  return (
-    // @ts-ignore
-    <Kobalte<T, { category: string; options: T[] }>
-      {...others}
-      data-component="select"
-      data-trigger-style={local.triggerVariant}
-      placement={local.triggerVariant === "settings" ? "bottom-end" : "bottom-start"}
-      gutter={4}
-      value={local.current}
-      options={grouped()}
-      optionValue={(x) => (local.value ? local.value(x) : (x as string))}
-      optionTextValue={(x) => (local.label ? local.label(x) : (x as string))}
-      optionGroupChildren="options"
-      placeholder={local.placeholder}
-      sectionComponent={(local) => (
-        <Kobalte.Section data-slot="select-section">{local.section.rawValue.category}</Kobalte.Section>
-      )}
-      itemComponent={(itemProps) => (
-        <Kobalte.Item
-          {...itemProps}
-          data-slot="select-select-item"
-          classList={{
-            ...local.classList,
-            [local.class ?? ""]: !!local.class,
-          }}
-          onPointerEnter={() => move(itemProps.item.rawValue)}
-          onPointerMove={() => move(itemProps.item.rawValue)}
-          onFocus={() => move(itemProps.item.rawValue)}
-        >
-          <Kobalte.ItemLabel data-slot="select-select-item-label">
-            {local.children
-              ? local.children(itemProps.item.rawValue)
-              : local.label
-                ? local.label(itemProps.item.rawValue)
-                : (itemProps.item.rawValue as string)}
-          </Kobalte.ItemLabel>
-          <Kobalte.ItemIndicator data-slot="select-select-item-indicator">
-            <Icon name="check-small" size="small" />
-          </Kobalte.ItemIndicator>
-        </Kobalte.Item>
-      )}
-      onChange={(v) => {
-        local.onSelect?.(v ?? undefined)
-        stop()
-      }}
-      onOpenChange={(open) => {
-        local.onOpenChange?.(open)
-        if (!open) stop()
-      }}
-    >
-      <Kobalte.Trigger
-        {...local.triggerProps}
-        disabled={props.disabled}
-        data-slot="select-select-trigger"
-        as={Button}
-        size={props.size}
-        variant={props.variant}
-        style={local.triggerStyle}
-        classList={{
-          ...local.classList,
-          [local.class ?? ""]: !!local.class,
-        }}
-      >
-        <Kobalte.Value<T> data-slot="select-select-trigger-value" class={local.valueClass}>
-          {(state) => {
-            const selected = state.selectedOption() ?? local.current
-            if (!selected) return local.placeholder || ""
-            if (local.label) return local.label(selected)
-            return selected as string
-          }}
-        </Kobalte.Value>
-        <Kobalte.Icon data-slot="select-select-trigger-icon">
-          <Icon name={local.triggerVariant === "settings" ? "selector" : "chevron-down"} size="small" />
-        </Kobalte.Icon>
-      </Kobalte.Trigger>
-      <Kobalte.Portal>
-        <Kobalte.Content
-          classList={{
-            ...local.classList,
-            [local.class ?? ""]: !!local.class,
-          }}
-          data-component="select-content"
-          data-trigger-style={local.triggerVariant}
-        >
-          <Kobalte.Listbox data-slot="select-select-content-list" />
-        </Kobalte.Content>
-      </Kobalte.Portal>
-    </Kobalte>
-  )
-}

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>
-  )
-}