@neurocode-ai/ui 1.18.8

package/src/components/select.tsx

@@ -0,0 +1,174 @@
+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/spinner.css

@@ -0,0 +1,6 @@
+[data-component="spinner"] {
+  color: inherit;
+  flex-shrink: 0;
+  width: 18px;
+  aspect-ratio: 1;
+}

package/src/components/spinner.tsx

@@ -0,0 +1,52 @@
+import { ComponentProps, For } from "solid-js"
+
+const outerIndices = new Set([1, 2, 4, 7, 8, 11, 13, 14])
+const cornerIndices = new Set([0, 3, 12, 15])
+const squares = Array.from({ length: 16 }, (_, i) => ({
+  id: i,
+  x: (i % 4) * 4,
+  y: Math.floor(i / 4) * 4,
+  delay: Math.random() * 1.5,
+  duration: 1 + Math.random() * 1,
+  outer: outerIndices.has(i),
+  corner: cornerIndices.has(i),
+}))
+
+export function Spinner(props: {
+  class?: string
+  classList?: ComponentProps<"div">["classList"]
+  style?: ComponentProps<"div">["style"]
+}) {
+  return (
+    <svg
+      {...props}
+      viewBox="0 0 15 15"
+      data-component="spinner"
+      classList={{
+        ...props.classList,
+        [props.class ?? ""]: !!props.class,
+      }}
+      fill="currentColor"
+    >
+      <For each={squares}>
+        {(square) => (
+          <rect
+            x={square.x}
+            y={square.y}
+            width="3"
+            height="3"
+            rx="1"
+            style={{
+              opacity: square.corner ? 0 : undefined,
+              animation: square.corner
+                ? undefined
+                : `${square.outer ? "pulse-opacity-dim" : "pulse-opacity"} ${square.duration}s ease-in-out infinite`,
+              "animation-fill-mode": square.corner ? undefined : "both",
+              "animation-delay": square.corner ? undefined : `${square.delay}s`,
+            }}
+          />
+        )}
+      </For>
+    </svg>
+  )
+}

package/src/components/sticky-accordion-header.css

@@ -0,0 +1,6 @@
+[data-component="sticky-accordion-header"] {
+  position: sticky;
+  top: calc(var(--sticky-accordion-top, 0px) + var(--sticky-accordion-offset, 0px));
+  z-index: 10;
+  background-color: var(--background-stronger);
+}

package/src/components/sticky-accordion-header.tsx

@@ -0,0 +1,18 @@
+import { Accordion } from "./accordion"
+import { ParentProps } from "solid-js"
+
+export function StickyAccordionHeader(
+  props: ParentProps<{ class?: string; classList?: Record<string, boolean | undefined> }>,
+) {
+  return (
+    <Accordion.Header
+      data-component="sticky-accordion-header"
+      classList={{
+        ...props.classList,
+        [props.class ?? ""]: !!props.class,
+      }}
+    >
+      {props.children}
+    </Accordion.Header>
+  )
+}

package/src/components/switch.css

@@ -0,0 +1,132 @@
+[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);
+  }
+
+  &[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

@@ -0,0 +1,29 @@
+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>
+  )
+}