summaryrefslogtreecommitdiffhomepage
path: root/packages/ui
diff options
context:
space:
mode:
Diffstat (limited to 'packages/ui')
-rw-r--r--packages/ui/src/components/button.css32
-rw-r--r--packages/ui/src/components/dialog.tsx7
-rw-r--r--packages/ui/src/components/icon.tsx1
-rw-r--r--packages/ui/src/components/input.css76
-rw-r--r--packages/ui/src/components/input.tsx42
-rw-r--r--packages/ui/src/components/select-dialog.tsx7
-rw-r--r--packages/ui/src/hooks/use-filtered-list.tsx7
7 files changed, 143 insertions, 29 deletions
diff --git a/packages/ui/src/components/button.css b/packages/ui/src/components/button.css
index f95317028..3a32672fe 100644
--- a/packages/ui/src/components/button.css
+++ b/packages/ui/src/components/button.css
@@ -11,27 +11,29 @@
outline: none;
&[data-variant="primary"] {
- border-color: var(--border-base);
- background-color: var(--surface-brand-base);
- color: var(--text-on-brand-strong);
+ background-color: var(--icon-strong-base);
+ border-color: var(--border-weak-base);
+ color: var(--icon-invert-base);
+
+ [data-slot="icon-svg"] {
+ color: var(--icon-invert-base);
+ }
&:hover:not(:disabled) {
- border-color: var(--border-hover);
- background-color: var(--surface-brand-hover);
+ background-color: var(--icon-strong-hover);
}
&:focus:not(:disabled) {
- border-color: var(--border-focus);
- background-color: var(--surface-brand-focus);
+ background-color: var(--icon-strong-focus);
}
&:active:not(:disabled) {
- border-color: var(--border-active);
- background-color: var(--surface-brand-active);
+ background-color: var(--icon-strong-active);
}
&:disabled {
- border-color: var(--border-disabled);
- background-color: var(--surface-disabled);
- color: var(--text-weak);
- cursor: not-allowed;
+ background-color: var(--icon-strong-disabled);
+
+ [data-slot="icon-svg"] {
+ color: var(--icon-invert-base);
+ }
}
}
@@ -120,13 +122,13 @@
&[data-size="large"] {
height: 32px;
- padding: 0 8px;
+ padding: 6px 12px;
&[data-icon] {
padding: 0 12px 0 8px;
}
- gap: 8px;
+ gap: 4px;
/* text-14-medium */
font-family: var(--font-family-sans);
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
index a16705a57..56053278d 100644
--- a/packages/ui/src/components/dialog.tsx
+++ b/packages/ui/src/components/dialog.tsx
@@ -5,7 +5,7 @@ import {
DialogCloseButtonProps,
DialogDescriptionProps,
} from "@kobalte/core/dialog"
-import { ComponentProps, type JSX, onCleanup, Show, splitProps } from "solid-js"
+import { ComponentProps, type JSX, onCleanup, onMount, Show, splitProps } from "solid-js"
import { IconButton } from "./icon-button"
export interface DialogProps extends DialogRootProps {
@@ -35,6 +35,11 @@ export function DialogRoot(props: DialogProps) {
})
}
+ onMount(() => {
+ // @ts-ignore
+ document?.activeElement?.blur?.()
+ })
+
return (
<Kobalte {...others}>
<Show when={props.trigger}>
diff --git a/packages/ui/src/components/icon.tsx b/packages/ui/src/components/icon.tsx
index 97f2e8eab..080a6274d 100644
--- a/packages/ui/src/components/icon.tsx
+++ b/packages/ui/src/components/icon.tsx
@@ -3,6 +3,7 @@ import { splitProps, type ComponentProps } from "solid-js"
const icons = {
"align-right": `<path d="M12.292 6.04167L16.2503 9.99998L12.292 13.9583M2.91699 9.99998H15.6253M17.0837 3.75V16.25" stroke="currentColor" stroke-linecap="square"/>`,
"arrow-up": `<path fill-rule="evenodd" clip-rule="evenodd" d="M9.99991 2.24121L16.0921 8.33343L15.2083 9.21731L10.6249 4.63397V17.5001H9.37492V4.63398L4.7916 9.21731L3.90771 8.33343L9.99991 2.24121Z" fill="currentColor"/>`,
+ "arrow-left": `<path d="M8.33464 4.58398L2.91797 10.0007L8.33464 15.4173M3.33464 10.0007H17.0846" stroke="currentColor" stroke-linecap="square"/>`,
"bubble-5": `<path d="M18.3327 9.99935C18.3327 5.57227 15.0919 2.91602 9.99935 2.91602C4.90676 2.91602 1.66602 5.57227 1.66602 9.99935C1.66602 11.1487 2.45505 13.1006 2.57637 13.3939C2.58707 13.4197 2.59766 13.4434 2.60729 13.4697C2.69121 13.6987 3.04209 14.9354 1.66602 16.7674C3.51787 17.6528 5.48453 16.1973 5.48453 16.1973C6.84518 16.9193 8.46417 17.0827 9.99935 17.0827C15.0919 17.0827 18.3327 14.4264 18.3327 9.99935Z" stroke="currentColor" stroke-linecap="square"/>`,
"bullet-list": `<path d="M9.58329 13.7497H17.0833M9.58329 6.24967H17.0833M6.24996 6.24967C6.24996 7.17015 5.50377 7.91634 4.58329 7.91634C3.66282 7.91634 2.91663 7.17015 2.91663 6.24967C2.91663 5.3292 3.66282 4.58301 4.58329 4.58301C5.50377 4.58301 6.24996 5.3292 6.24996 6.24967ZM6.24996 13.7497C6.24996 14.6701 5.50377 15.4163 4.58329 15.4163C3.66282 15.4163 2.91663 14.6701 2.91663 13.7497C2.91663 12.8292 3.66282 12.083 4.58329 12.083C5.50377 12.083 6.24996 12.8292 6.24996 13.7497Z" stroke="currentColor" stroke-linecap="square"/>`,
"check-small": `<path d="M6.5 11.4412L8.97059 13.5L13.5 6.5" stroke="currentColor" stroke-linecap="square"/>`,
diff --git a/packages/ui/src/components/input.css b/packages/ui/src/components/input.css
index c5f8cb8c5..276e8069b 100644
--- a/packages/ui/src/components/input.css
+++ b/packages/ui/src/components/input.css
@@ -1,6 +1,5 @@
[data-component="input"] {
width: 100%;
- /* [data-slot="input-label"] {} */
[data-slot="input-input"] {
width: 100%;
@@ -22,4 +21,79 @@
color: var(--text-weak);
}
}
+
+ &[data-variant="normal"] {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 8px;
+
+ [data-slot="input-label"] {
+ color: var(--text-weak);
+
+ /* 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: 18px; /* 150% */
+ letter-spacing: var(--letter-spacing-normal);
+ }
+
+ [data-slot="input-input"] {
+ color: var(--text-strong);
+
+ display: flex;
+ height: 32px;
+ padding: 2px 12px;
+ align-items: center;
+ gap: 8px;
+ align-self: stretch;
+
+ border-radius: var(--radius-md);
+ border: 1px solid var(--border-weak-base);
+ background: var(--input-base);
+
+ /* text-14-regular */
+ font-family: var(--font-family-sans);
+ font-size: 14px;
+ font-style: normal;
+ font-weight: var(--font-weight-regular);
+ line-height: var(--line-height-large); /* 142.857% */
+ letter-spacing: var(--letter-spacing-normal);
+
+ &:focus {
+ outline: none;
+
+ /* border/shadow-xs/select */
+ box-shadow:
+ 0 0 0 3px var(--border-weak-selected),
+ 0 0 0 1px var(--border-selected),
+ 0 1px 2px -1px rgba(19, 16, 16, 0.25),
+ 0 1px 2px 0 rgba(19, 16, 16, 0.08),
+ 0 1px 3px 0 rgba(19, 16, 16, 0.12);
+ }
+
+ &[data-invalid] {
+ background: var(--surface-critical-weak);
+ border: 1px solid var(--border-critical-selected);
+ }
+
+ &::placeholder {
+ color: var(--text-weak);
+ }
+ }
+
+ [data-slot="input-error"] {
+ color: var(--text-on-critical-base);
+
+ /* 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: 18px; /* 150% */
+ letter-spacing: var(--letter-spacing-normal);
+ }
+ }
}
diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx
index 82f704e8c..8e2a115c6 100644
--- a/packages/ui/src/components/input.tsx
+++ b/packages/ui/src/components/input.tsx
@@ -4,31 +4,61 @@ import type { ComponentProps } from "solid-js"
export interface InputProps
extends ComponentProps<typeof Kobalte.Input>,
- Partial<Pick<ComponentProps<typeof Kobalte>, "value" | "onChange" | "onKeyDown">> {
+ Partial<
+ Pick<
+ ComponentProps<typeof Kobalte>,
+ | "name"
+ | "defaultValue"
+ | "value"
+ | "onChange"
+ | "onKeyDown"
+ | "validationState"
+ | "required"
+ | "disabled"
+ | "readOnly"
+ >
+ > {
label?: string
hideLabel?: boolean
hidden?: boolean
description?: string
+ error?: string
+ variant?: "normal" | "ghost"
}
export function Input(props: InputProps) {
const [local, others] = splitProps(props, [
+ "name",
+ "defaultValue",
+ "value",
+ "onChange",
+ "onKeyDown",
+ "validationState",
+ "required",
+ "disabled",
+ "readOnly",
"class",
"label",
"hidden",
"hideLabel",
"description",
- "value",
- "onChange",
- "onKeyDown",
+ "error",
+ "variant",
])
return (
<Kobalte
data-component="input"
- style={{ height: local.hidden ? 0 : undefined }}
+ data-variant={local.variant || "normal"}
+ name={local.name}
+ defaultValue={local.defaultValue}
value={local.value}
onChange={local.onChange}
onKeyDown={local.onKeyDown}
+ required={local.required}
+ disabled={local.disabled}
+ readOnly={local.readOnly}
+ style={{ height: local.hidden ? 0 : undefined }}
+ validationState={local.validationState}
>
<Show when={local.label}>
<Kobalte.Label data-slot="input-label" classList={{ "sr-only": local.hideLabel }}>
@@ -39,7 +69,7 @@ export function Input(props: InputProps) {
<Show when={local.description}>
<Kobalte.Description data-slot="input-description">{local.description}</Kobalte.Description>
</Show>
- <Kobalte.ErrorMessage data-slot="input-error" />
+ <Kobalte.ErrorMessage data-slot="input-error">{local.error}</Kobalte.ErrorMessage>
</Kobalte>
)
}
diff --git a/packages/ui/src/components/select-dialog.tsx b/packages/ui/src/components/select-dialog.tsx
index 952ba881f..efa6c405b 100644
--- a/packages/ui/src/components/select-dialog.tsx
+++ b/packages/ui/src/components/select-dialog.tsx
@@ -1,9 +1,9 @@
import { createEffect, Show, type JSX, splitProps, createSignal } from "solid-js"
import { Dialog, DialogProps } from "./dialog"
import { Icon } from "./icon"
-import { Input } from "./input"
import { IconButton } from "./icon-button"
import { List, ListRef, ListProps } from "./list"
+import { Input } from "./input"
interface SelectDialogProps<T>
extends Omit<ListProps<T>, "filter">,
@@ -29,8 +29,8 @@ export function SelectDialog<T>(props: SelectDialogProps<T>) {
})
})
- const handleSelect = (item: T | undefined) => {
- others.onSelect?.(item)
+ const handleSelect = (item: T | undefined, index: number) => {
+ others.onSelect?.(item, index)
closeButton.click()
}
@@ -58,6 +58,7 @@ export function SelectDialog<T>(props: SelectDialogProps<T>) {
<Input
ref={inputRef}
autofocus
+ variant="ghost"
data-slot="select-dialog-input"
type="text"
value={filter()}
diff --git a/packages/ui/src/hooks/use-filtered-list.tsx b/packages/ui/src/hooks/use-filtered-list.tsx
index e0cb6e7aa..f9745918a 100644
--- a/packages/ui/src/hooks/use-filtered-list.tsx
+++ b/packages/ui/src/hooks/use-filtered-list.tsx
@@ -12,7 +12,7 @@ export interface FilteredListProps<T> {
groupBy?: (x: T) => string
sortBy?: (a: T, b: T) => number
sortGroupsBy?: (a: { category: string; items: T[] }, b: { category: string; items: T[] }) => number
- onSelect?: (value: T | undefined) => void
+ onSelect?: (value: T | undefined, index: number) => void
}
export function useFilteredList<T>(props: FilteredListProps<T>) {
@@ -63,8 +63,9 @@ export function useFilteredList<T>(props: FilteredListProps<T>) {
const onKeyDown = (event: KeyboardEvent) => {
if (event.key === "Enter") {
event.preventDefault()
- const selected = flat().find((x) => props.key(x) === list.active())
- if (selected) props.onSelect?.(selected)
+ const selectedIndex = flat().findIndex((x) => props.key(x) === list.active())
+ const selected = flat()[selectedIndex]
+ if (selected) props.onSelect?.(selected, selectedIndex)
} else {
list.onKeyDown(event)
}
generated by cgit v1.2.3 (git 2.39.1) at 2026-06-29 12:41:32 +0000