@neurocode-ai/ui 1.18.8

package/src/v2/components/switch-v2.css

@@ -0,0 +1,154 @@
+[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"] {
+    box-sizing: border-box;
+    display: inline-flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: 2px;
+    width: 24px;
+    height: 16px;
+    flex-shrink: 0;
+    border-radius: 4px;
+    border: none;
+    background:
+      linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-20) 100%),
+      var(--v2-background-bg-layer-03);
+    box-shadow: var(--v2-elevation-switch-off);
+    transition:
+      background 90ms ease-out,
+      opacity 90ms ease-out,
+      outline-color 90ms ease-out;
+  }
+
+  [data-slot="switch-thumb"] {
+    box-sizing: border-box;
+    width: 12px;
+    height: 12px;
+    transform: translateX(0);
+    border-radius: 2px;
+    border: 0.5px solid var(--v2-overlay-gradient-depth-overlay-depth-top);
+    background:
+      linear-gradient(
+        180deg,
+        var(--v2-overlay-gradient-depth-overlay-depth-top) 0%,
+        var(--v2-overlay-gradient-depth-overlay-depth-bot) 100%
+      ),
+      var(--v2-grey-200);
+    box-shadow: var(--v2-elevation-elements);
+    transition:
+      transform 90ms ease-out,
+      width 90ms ease-out,
+      border-radius 90ms,
+      background 90ms;
+  }
+
+  [data-slot="switch-label"] {
+    display: inline-flex;
+    align-items: center;
+    height: 16px;
+    user-select: none;
+    color: var(--v2-text-text-faint);
+    font-size: 11px;
+    font-style: normal;
+    font-weight: 440;
+    line-height: 16px;
+    letter-spacing: 0.05px;
+    font-variation-settings: "slnt" 0;
+  }
+
+  [data-slot="switch-error"] {
+    color: var(--v2-state-fg-danger);
+    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"]:empty {
+    display: none;
+  }
+
+  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
+    background:
+      linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
+      linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-20) 100%),
+      var(--v2-background-bg-layer-03);
+  }
+
+  &:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
+    width: 13px;
+    border-radius: 3px;
+  }
+
+  &:not([data-readonly]) [data-slot="switch-input"]:focus-visible ~ [data-slot="switch-control"] {
+    outline: 2px solid var(--v2-border-border-focus);
+    outline-offset: 1px;
+  }
+
+  &[data-checked] [data-slot="switch-control"] {
+    background:
+      linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-10) 100%), var(--v2-background-bg-accent);
+    box-shadow: var(--v2-elevation-switch-on);
+  }
+
+  &[data-checked] [data-slot="switch-thumb"] {
+    transform: translateX(8px);
+    border-radius: 2px;
+    background:
+      linear-gradient(
+        180deg,
+        var(--v2-overlay-gradient-depth-overlay-depth-top) 0%,
+        var(--v2-overlay-gradient-depth-overlay-depth-bot) 100%
+      ),
+      var(--v2-grey-300);
+  }
+
+  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-control"] {
+    background:
+      linear-gradient(
+        0deg,
+        var(--v2-overlay-simple-overlay-contrast-hover),
+        var(--v2-overlay-simple-overlay-contrast-hover)
+      ),
+      linear-gradient(180deg, var(--v2-alpha-light-0) 0%, var(--v2-alpha-light-10) 100%), var(--v2-background-bg-accent);
+  }
+
+  &[data-checked]:hover:not([data-disabled], [data-readonly]) [data-slot="switch-thumb"] {
+    transform: translateX(7px);
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  &[data-disabled] [data-slot="switch-control"] {
+    opacity: 0.5;
+  }
+
+  &[data-invalid] [data-slot="switch-control"] {
+    border-color: var(--v2-state-border-danger);
+  }
+
+  &[data-readonly] {
+    cursor: default;
+    pointer-events: none;
+  }
+}

package/src/v2/components/switch-v2.tsx

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

package/src/v2/components/tab-state-indicator.tsx

@@ -0,0 +1,37 @@
+import { splitProps, type ComponentProps } from "solid-js"
+
+export function TabStateIndicator(props: ComponentProps<"svg">) {
+  const [local, rest] = splitProps(props, ["class", "classList", "width", "height"])
+  return (
+    <svg
+      {...rest}
+      class={local.class}
+      classList={local.classList}
+      width={local.width ?? 16}
+      height={local.height ?? 16}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden={rest["aria-hidden"] ?? "true"}
+    >
+      <g opacity="0.25" fill="#808080">
+        <rect x="13.5" y="2.5" width="2" height="2" transform="rotate(90 13.5 2.5)" />
+        <path d="M10.5 2.5L10.5 4.5L8.5 4.5L8.5 2.5L10.5 2.5Z" />
+        <path d="M4.5 2.5L4.5 4.5L2.5 4.5L2.5 2.5L4.5 2.5Z" />
+        <path d="M13.5 5.5L13.5 7.5L11.5 7.5L11.5 5.5L13.5 5.5Z" />
+        <path d="M4.5 5.5L4.5 7.5L2.5 7.5L2.5 5.5L4.5 5.5Z" />
+        <path d="M13.5 8.5L13.5 10.5L11.5 10.5L11.5 8.5L13.5 8.5Z" />
+        <path d="M4.5 8.5L4.5 10.5L2.5 10.5L2.5 8.5L4.5 8.5Z" />
+        <path d="M13.5 11.5L13.5 13.5L11.5 13.5L11.5 11.5L13.5 11.5Z" />
+        <path d="M7.5 11.5L7.5 13.5L5.5 13.5L5.5 11.5L7.5 11.5Z" />
+        <path d="M4.5 11.5L4.5 13.5L2.5 13.5L2.5 11.5L4.5 11.5Z" />
+        <path d="M7.5 2.5L7.5 4.5L5.5 4.5L5.5 2.5L7.5 2.5Z" />
+        <path d="M10.5 5.5L10.5 7.5L8.5 7.5L8.5 5.5L10.5 5.5Z" />
+        <path d="M7.5 5.5L7.5 7.5L5.5 7.5L5.5 5.5L7.5 5.5Z" />
+        <path d="M10.5 8.5L10.5 10.5L8.5 10.5L8.5 8.5L10.5 8.5Z" />
+        <path d="M7.5 8.5L7.5 10.5L5.5 10.5L5.5 8.5L7.5 8.5Z" />
+        <path d="M10.5 11.5L10.5 13.5L8.5 13.5L8.5 11.5L10.5 11.5Z" />
+      </g>
+    </svg>
+  )
+}

package/src/v2/components/tabs-v2.css

@@ -0,0 +1,226 @@
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
+}
+
+[data-component="tabs-v2"] {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow: clip;
+}
+
+[data-component="tabs-v2"][data-orientation="horizontal"] {
+  flex-direction: column;
+}
+
+[data-component="tabs-v2"][data-orientation="vertical"] {
+  flex-direction: row;
+}
+
+[data-component="tabs-v2"] [data-slot="tabs-v2-content"] {
+  flex: 1;
+  overflow: auto;
+}
+
+[data-component="tabs-v2"] [data-slot="tabs-v2-list"] {
+  display: flex;
+}
+
+[data-component="tabs-v2"][data-orientation="horizontal"] [data-slot="tabs-v2-list"] {
+  width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+[data-component="tabs-v2"][data-orientation="horizontal"] [data-slot="tabs-v2-list"]::-webkit-scrollbar {
+  display: none;
+}
+
+[data-component="tabs-v2"] [data-slot="tabs-v2-trigger-wrapper"] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  white-space: nowrap;
+  user-select: none;
+}
+
+[data-component="tabs-v2"] [data-slot="tabs-v2-trigger"] {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  outline: none;
+  user-select: none;
+
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 100%;
+  letter-spacing: -0.04px;
+}
+
+[data-component="tabs-v2"] [data-slot="tabs-v2-trigger"]:is(:focus, :focus-visible) {
+  outline: none;
+  box-shadow: none;
+}
+
+[data-component="tabs-v2"] [data-slot="tabs-v2-close-button"] {
+  width: 20px;
+  height: 20px;
+  margin-left: -5px;
+  flex: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--v2-text-text-faint);
+}
+
+[data-component="tabs-v2"] [data-slot="tabs-v2-close-button"]:hover {
+  color: var(--v2-text-text-muted);
+}
+
+[data-component="tabs-v2"] [data-component="icon-button"] {
+  margin: 0;
+}
+
+[data-component="tabs-v2"] [data-slot="tabs-v2-trigger-wrapper"]:disabled {
+  pointer-events: none;
+  color: var(--v2-text-text-faint);
+}
+
+[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"] [data-slot="tabs-v2-list"],
+[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"] [data-slot="tabs-v2-list"] {
+  gap: 6px;
+  padding-inline: 8px;
+  height: 32px;
+  align-items: center;
+  position: relative;
+}
+
+[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"] [data-slot="tabs-v2-list"]::before,
+[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"] [data-slot="tabs-v2-list"]::before {
+  height: 1px;
+  content: "";
+  width: calc(100% + 16px);
+  background-color: var(--v2-border-border-base);
+  position: absolute;
+  bottom: 0px;
+  left: -8px;
+}
+
+[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"] [data-slot="tabs-v2-list"] {
+  padding-bottom: 8px;
+  align-items: start;
+}
+
+[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"] [data-slot="tabs-v2-trigger-wrapper"] {
+  height: 100%;
+  gap: 4px;
+  color: var(--v2-text-text-muted);
+  border-bottom: 1px solid transparent;
+}
+
+[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"] [data-slot="tabs-v2-trigger"] {
+  height: 100%;
+  padding: 6px;
+}
+
+[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"]
+  [data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not([data-selected]) {
+  color: var(--v2-text-text-base);
+}
+
+[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"]
+  [data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
+  border-bottom-color: var(--v2-text-text-faint);
+  color: var(--v2-text-text-base);
+}
+
+[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"]
+  [data-slot="tabs-v2-trigger-wrapper"]:not(:has([data-selected])) {
+  color: var(--v2-text-text-muted);
+}
+
+[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"] [data-slot="tabs-v2-trigger-wrapper"] {
+  height: 24px;
+  border-radius: 4px;
+  border: 0.5px solid transparent;
+  box-sizing: border-box;
+  color: var(--v2-text-text-muted);
+}
+
+[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"] [data-slot="tabs-v2-trigger"] {
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  padding: 0 6px;
+  border: 0.5px solid transparent;
+}
+
+[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"]
+  [data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not(:has([data-selected])) {
+  background-color: var(--v2-background-bg-layer-03);
+  color: var(--v2-text-text-base);
+  border: 0.5px solid var(--v2-border-border-muted);
+}
+
+[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"]
+  [data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
+  background-color: var(--v2-background-bg-layer-03);
+  color: var(--v2-text-text-base);
+  border: 0.5px solid var(--v2-border-border-muted);
+}
+
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-list"] {
+  flex-direction: column;
+  width: 240px;
+  min-width: 200px;
+  height: 100%;
+  padding: 12px;
+  gap: 4px;
+  overflow-y: auto;
+  border-right: 1px solid var(--v2-border-border-base);
+}
+
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-section-title"] {
+  width: 100%;
+  padding-left: 4px;
+  color: var(--v2-text-text-muted);
+  font-size: 12px;
+  font-weight: 500;
+  user-select: none;
+}
+
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-trigger-wrapper"] {
+  width: 100%;
+  height: 28px;
+  border-radius: 4px;
+  border: 0.5px solid transparent;
+  box-sizing: border-box;
+  color: var(--v2-text-text-muted);
+}
+
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-trigger"] {
+  width: 100%;
+  height: 100%;
+  justify-content: flex-start;
+  gap: 6px;
+  padding: 0 6px;
+}
+
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
+  [data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not(:has([data-selected])) {
+  background-color: var(--v2-background-bg-layer-03);
+  color: var(--v2-text-text-base);
+}
+
+[data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"]
+  [data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
+  background-color: var(--v2-background-bg-layer-03);
+  color: var(--v2-text-text-base);
+  border: 0.5px solid var(--v2-border-border-muted);
+}

package/src/v2/components/tabs-v2.tsx

@@ -0,0 +1,147 @@
+import { Tabs as Kobalte } from "@kobalte/core/tabs"
+import { Show, splitProps, 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> {}
+
+function TabsV2Root(props: TabsV2Props) {
+  const [split, rest] = splitProps(props, ["class", "classList", "variant", "orientation"])
+  return (
+    <Kobalte
+      {...rest}
+      orientation={split.orientation}
+      data-component="tabs-v2"
+      data-variant={split.variant || "normal"}
+      data-orientation={split.orientation || "horizontal"}
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    />
+  )
+}
+
+function TabsV2List(props: TabsV2ListProps) {
+  const [split, rest] = splitProps(props, ["class", "classList"])
+  return (
+    <Kobalte.List
+      {...rest}
+      data-slot="tabs-v2-list"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    />
+  )
+}
+
+function TabsV2Trigger(props: ParentProps<TabsV2TriggerProps>) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children", "onMiddleClick", "subtext"])
+  return (
+    <div
+      data-slot="tabs-v2-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} data-slot="tabs-v2-trigger" data-value={props.value}>
+        <span class="inline-flex items-center gap-2" data-slot="tabs-v2-trigger-content">
+          {split.children}
+          <Show when={split.subtext}>
+            {(subtext) => (
+              <span data-slot="tabs-v2-subtext" class="ml-2 text-xs text-text-weak">
+                {subtext()}
+              </span>
+            )}
+          </Show>
+        </span>
+      </Kobalte.Trigger>
+    </div>
+  )
+}
+
+function TabsV2CloseButton(props: TabsV2CloseButtonProps) {
+  const [split, rest] = splitProps(props, ["class", "classList", "onClick"])
+  return (
+    <div
+      role="button"
+      tabindex={0}
+      aria-label="Close tab"
+      data-slot="tabs-v2-close-button"
+      {...rest}
+      classList={{
+        [split.class ?? ""]: !!split.class,
+        ...split.classList,
+      }}
+      onClick={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        if (typeof split.onClick === "function") {
+          split.onClick(e)
+        }
+      }}
+      onMouseDown={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+      }}
+    >
+      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <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>
+    </div>
+  )
+}
+
+function TabsV2Content(props: ParentProps<TabsV2ContentProps>) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <Kobalte.Content
+      {...rest}
+      data-slot="tabs-v2-content"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+    >
+      {split.children}
+    </Kobalte.Content>
+  )
+}
+
+const TabsV2SectionTitle: Component<ParentProps> = (props) => {
+  return <div data-slot="tabs-v2-section-title">{props.children}</div>
+}
+
+export const TabsV2 = Object.assign(TabsV2Root, {
+  List: TabsV2List,
+  Trigger: TabsV2Trigger,
+  CloseButton: TabsV2CloseButton,
+  Content: TabsV2Content,
+  SectionTitle: TabsV2SectionTitle,
+})