@neurocode-ai/ui 1.18.8

package/src/v2/components/text-input-v2.css

@@ -0,0 +1,179 @@
+[data-component="text-input-v2"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  padding: 0 8px 0 0;
+  gap: 8px;
+  width: 280px;
+  height: 28px;
+  border: 0;
+  border-radius: 6px;
+  outline: 1px solid transparent;
+  outline-offset: 0;
+  background:
+    linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
+  box-shadow: var(--v2-elevation-button-neutral);
+  flex: none;
+  align-self: stretch;
+  transition:
+    background 85ms ease-out,
+    outline-color 85ms ease-out,
+    box-shadow 85ms ease-out;
+}
+
+[data-component="text-input-v2"][data-appearance="large"] {
+  height: 32px;
+}
+
+[data-component="text-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
+  background:
+    linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
+    linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
+}
+
+[data-component="text-input-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {
+  outline-color: var(--v2-border-border-focus);
+  box-shadow: none;
+}
+
+[data-component="text-input-v2"]:where([data-invalid]):not([data-disabled]) {
+  outline-color: var(--v2-state-fg-danger);
+  box-shadow: none;
+}
+
+[data-component="text-input-v2"]:where([data-disabled]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-value"] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+  padding: 0;
+  gap: 6px;
+  min-width: 0;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  padding-left: 8px;
+  color: var(--v2-icon-icon-muted);
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] :is(svg, [data-slot="icon-svg"]) {
+  display: block;
+  flex: none;
+}
+
+[data-component="text-input-v2"][data-leading-icon] [data-slot="text-input-v2-input"] {
+  padding-left: 0;
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-input"] {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  padding: 0 0 0 8px;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  outline: none;
+  font-style: normal;
+  font-weight: 440;
+  font-size: 13px;
+  line-height: 1;
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-base);
+  font-variation-settings: "slnt" 0;
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-input"]::placeholder {
+  color: var(--v2-text-text-faint);
+  user-select: none;
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-input"][type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+  display: none;
+}
+
+[data-component="text-input-v2"][data-numeric] [data-slot="text-input-v2-input"] {
+  font-variant-numeric: tabular-nums;
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"] {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  align-self: center;
+  flex: none;
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+  gap: 3px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--v2-icon-icon-muted);
+  cursor: pointer;
+  outline: none;
+}
+
+[data-component="text-input-v2"]
+  [data-slot="text-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-component="text-input-v2"]
+  [data-slot="text-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:focus {
+  outline: none;
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"]:focus-visible {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: 1px;
+}
+
+[data-component="text-input-v2"]:where([data-disabled]) [data-slot="text-input-v2-icon-button"] {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"] [data-slot="icon-svg"] {
+  display: block;
+  flex: none;
+  color: currentColor;
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"][data-variant="clear"] {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border-radius: 6px;
+  margin-right: -8px;
+}
+
+[data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"] {
+  color: var(--v2-state-fg-danger);
+  caret-color: var(--v2-state-fg-danger);
+}
+
+[data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"]::placeholder {
+  color: var(--v2-state-fg-danger);
+  opacity: 1;
+}

package/src/v2/components/text-input-v2.tsx

@@ -0,0 +1,93 @@
+import { type ComponentProps, type JSX, Show, splitProps } from "solid-js"
+import { Icon } from "./icon"
+import "./text-input-v2.css"
+
+export interface TextInputV2Props extends Omit<ComponentProps<"input">, "type"> {
+  /** Icon or adornment shown before the field value. */
+  leadingIcon?: JSX.Element
+  /** Show the trailing copy action. */
+  showCopyButton?: boolean
+  /** Show the trailing clear action. */
+  showClearButton?: boolean
+  /** Accessible label for the copy button. */
+  copyLabel?: string
+  /** Accessible label for the clear button. */
+  clearLabel?: string
+  onCopyClick?: (event: MouseEvent) => void
+  onClearClick?: (event: MouseEvent) => void
+  /** Apply tabular numerals to the field value. */
+  numeric?: boolean
+  /** Error styling for the field and value text. */
+  invalid?: boolean
+  /** `base` is 28px tall; `large` is 32px tall. */
+  appearance?: "base" | "large"
+  type?: ComponentProps<"input">["type"]
+}
+
+export function TextInputV2(props: TextInputV2Props) {
+  const [local, inputProps] = splitProps(props, [
+    "class",
+    "classList",
+    "leadingIcon",
+    "showCopyButton",
+    "showClearButton",
+    "copyLabel",
+    "clearLabel",
+    "onCopyClick",
+    "onClearClick",
+    "numeric",
+    "invalid",
+    "appearance",
+    "disabled",
+  ])
+
+  return (
+    <div
+      data-component="text-input-v2"
+      data-disabled={local.disabled ? "" : undefined}
+      data-invalid={local.invalid ? "" : undefined}
+      data-numeric={local.numeric ? "" : undefined}
+      data-appearance={local.appearance ?? "base"}
+      data-leading-icon={local.leadingIcon ? "" : undefined}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <div data-slot="text-input-v2-value">
+        <Show when={local.leadingIcon}>
+          <span data-slot="text-input-v2-leading-icon">{local.leadingIcon}</span>
+        </Show>
+        <input
+          {...inputProps}
+          type={inputProps.type ?? "text"}
+          disabled={local.disabled}
+          aria-invalid={local.invalid ? true : undefined}
+          data-slot="text-input-v2-input"
+        />
+      </div>
+      <Show when={local.showClearButton || local.showCopyButton}>
+        <button
+          type="button"
+          data-slot="text-input-v2-icon-button"
+          data-variant={local.showClearButton ? "clear" : "copy"}
+          aria-label={local.showClearButton ? (local.clearLabel ?? "Clear") : (local.copyLabel ?? "Copy")}
+          disabled={local.disabled}
+          onMouseDown={(event) => {
+            if (!local.showClearButton) return
+            event.preventDefault()
+          }}
+          onClick={(event) => {
+            if (local.showClearButton) {
+              local.onClearClick?.(event)
+              return
+            }
+            local.onCopyClick?.(event)
+          }}
+        >
+          <Icon name={local.showClearButton ? "xmark-small" : "copy"} />
+        </button>
+      </Show>
+    </div>
+  )
+}

package/src/v2/components/text-shimmer-v2.css

@@ -0,0 +1,125 @@
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: geometricPrecision;
+}
+
+[data-component="text-shimmer-v2"] {
+  --_step: 45ms;
+  --_duration: 1200ms;
+  --_swap: 220ms;
+  --_index: 0;
+  --_angle: 90deg;
+  --_spread: 5.2ch;
+  --_size: 360%;
+  --_base-color: var(--v2-text-text-muted);
+  --_peak-color: var(--v2-text-text-base);
+  --_sweep: linear-gradient(
+    var(--_angle),
+    transparent calc(50% - var(--_spread)),
+    var(--_peak-color) 50%,
+    transparent calc(50% + var(--_spread))
+  );
+  --_base: linear-gradient(var(--_base-color), var(--_base-color));
+
+  display: inline-flex;
+  align-items: baseline;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  user-select: none;
+}
+
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-char"] {
+  display: inline-grid;
+  white-space: pre;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+}
+
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"],
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
+  grid-area: 1 / 1;
+  white-space: pre;
+  transition: opacity var(--_swap) ease-out;
+  font: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+}
+
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"] {
+  color: inherit;
+  opacity: 1;
+}
+
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
+  color: var(--_base-color);
+  opacity: 0;
+}
+
+[data-component="text-shimmer-v2"][data-active="true"] [data-slot="text-shimmer-v2-shimmer"] {
+  opacity: 1;
+}
+
+[data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"][data-run="true"] {
+  animation-name: text-shimmer-v2-sweep;
+  animation-duration: var(--_duration);
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  animation-fill-mode: both;
+  animation-delay: calc(var(--_step) * var(--_index) * -1);
+  will-change: background-position;
+}
+
+@keyframes text-shimmer-v2-sweep {
+  0% {
+    background-position:
+      100% 0,
+      0 0;
+  }
+  100% {
+    background-position:
+      0% 0,
+      0 0;
+  }
+}
+
+@supports ((-webkit-background-clip: text) or (background-clip: text)) {
+  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
+    color: transparent;
+    -webkit-text-fill-color: transparent;
+    background-image: var(--_sweep), var(--_base);
+    background-size:
+      var(--_size) 100%,
+      100% 100%;
+    background-position:
+      100% 0,
+      0 0;
+    background-repeat: no-repeat;
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+
+  [data-component="text-shimmer-v2"][data-active="true"] [data-slot="text-shimmer-v2-base"] {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"],
+  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
+    transition-duration: 0ms;
+  }
+
+  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-shimmer"] {
+    animation: none !important;
+    color: inherit;
+    -webkit-text-fill-color: currentColor;
+    background-image: none;
+  }
+
+  [data-component="text-shimmer-v2"] [data-slot="text-shimmer-v2-base"] {
+    opacity: 1 !important;
+  }
+}

package/src/v2/components/text-shimmer-v2.tsx

@@ -0,0 +1,63 @@
+import { createEffect, createMemo, createSignal, onCleanup, type ValidComponent } from "solid-js"
+import { Dynamic } from "solid-js/web"
+import "./text-shimmer-v2.css"
+
+export const TextShimmerV2 = <T extends ValidComponent = "span">(props: {
+  text: string
+  class?: string
+  as?: T
+  active?: boolean
+  offset?: number
+}) => {
+  const text = createMemo(() => props.text ?? "")
+  const active = createMemo(() => props.active ?? true)
+  const offset = createMemo(() => props.offset ?? 0)
+  const [run, setRun] = createSignal(active())
+  const swap = 220
+  let timer: ReturnType<typeof setTimeout> | undefined
+
+  createEffect(() => {
+    if (timer) {
+      clearTimeout(timer)
+      timer = undefined
+    }
+
+    if (active()) {
+      setRun(true)
+      return
+    }
+
+    timer = setTimeout(() => {
+      timer = undefined
+      setRun(false)
+    }, swap)
+  })
+
+  onCleanup(() => {
+    if (!timer) return
+    clearTimeout(timer)
+  })
+
+  return (
+    <Dynamic
+      component={props.as ?? "span"}
+      data-component="text-shimmer-v2"
+      data-active={active() ? "true" : "false"}
+      class={props.class}
+      aria-label={text()}
+      style={{
+        "--_swap": `${swap}ms`,
+        "--_index": `${offset()}`,
+      }}
+    >
+      <span data-slot="text-shimmer-v2-char">
+        <span data-slot="text-shimmer-v2-base" aria-hidden="true">
+          {text()}
+        </span>
+        <span data-slot="text-shimmer-v2-shimmer" data-run={run() ? "true" : "false"} aria-hidden="true">
+          {text()}
+        </span>
+      </span>
+    </Dynamic>
+  )
+}

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

@@ -0,0 +1,78 @@
+[data-component="textarea-v2"] {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 0 2px 2px 0;
+  width: 280px;
+  min-height: 80px;
+  border: 0;
+  border-radius: 6px;
+  outline: 1px solid transparent;
+  outline-offset: 0;
+  background:
+    linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
+  box-shadow: var(--v2-elevation-button-neutral);
+  flex: none;
+  align-self: stretch;
+  transition:
+    background 85ms ease-out,
+    outline-color 85ms ease-out,
+    box-shadow 85ms ease-out;
+}
+
+[data-component="textarea-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
+  background:
+    linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
+    linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
+}
+
+[data-component="textarea-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {
+  outline-color: var(--v2-border-border-focus);
+  box-shadow: none;
+}
+
+[data-component="textarea-v2"]:where([data-invalid]):not([data-disabled]) {
+  outline-color: var(--v2-state-fg-danger);
+  box-shadow: none;
+}
+
+[data-component="textarea-v2"]:where([data-disabled]) {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-component="textarea-v2"] [data-slot="textarea-v2-textarea"] {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: 80px;
+  height: 100%;
+  padding: 8px;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  outline: none;
+  resize: vertical;
+  font-style: normal;
+  font-weight: 440;
+  font-size: 13px;
+  line-height: 1.35;
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-base);
+  font-variation-settings: "slnt" 0;
+}
+
+[data-component="textarea-v2"] [data-slot="textarea-v2-textarea"]::placeholder {
+  color: var(--v2-text-text-faint);
+}
+
+[data-component="textarea-v2"][data-invalid]:not([data-disabled]) [data-slot="textarea-v2-textarea"] {
+  color: var(--v2-state-fg-danger);
+  caret-color: var(--v2-state-fg-danger);
+}
+
+[data-component="textarea-v2"][data-invalid]:not([data-disabled]) [data-slot="textarea-v2-textarea"]::placeholder {
+  color: var(--v2-state-fg-danger);
+  opacity: 1;
+}

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

@@ -0,0 +1,31 @@
+import { type ComponentProps, splitProps } from "solid-js"
+import "./textarea-v2.css"
+
+export interface TextareaV2Props extends ComponentProps<"textarea"> {
+  /** Error styling for the field and value text. */
+  invalid?: boolean
+}
+
+export function TextareaV2(props: TextareaV2Props) {
+  const [local, textareaProps] = splitProps(props, ["class", "classList", "invalid", "disabled", "rows"])
+
+  return (
+    <div
+      data-component="textarea-v2"
+      data-disabled={local.disabled ? "" : undefined}
+      data-invalid={local.invalid ? "" : undefined}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+      }}
+    >
+      <textarea
+        {...textareaProps}
+        rows={local.rows ?? 3}
+        disabled={local.disabled}
+        aria-invalid={local.invalid ? true : undefined}
+        data-slot="textarea-v2-textarea"
+      />
+    </div>
+  )
+}