summaryrefslogtreecommitdiffhomepage
path: root/packages/ui/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/ui/src/components')
-rw-r--r--packages/ui/src/components/checkbox.tsx13
-rw-r--r--packages/ui/src/components/dialog.tsx6
-rw-r--r--packages/ui/src/components/diff-changes.tsx6
-rw-r--r--packages/ui/src/components/diff.tsx22
-rw-r--r--packages/ui/src/components/icon-button.tsx6
-rw-r--r--packages/ui/src/components/input.tsx7
-rw-r--r--packages/ui/src/components/list.tsx8
-rw-r--r--packages/ui/src/components/message-part.tsx21
-rw-r--r--packages/ui/src/components/progress-circle.tsx16
-rw-r--r--packages/ui/src/components/select-dialog.tsx22
-rw-r--r--packages/ui/src/components/select.tsx4
-rw-r--r--packages/ui/src/components/typewriter.tsx6
12 files changed, 28 insertions, 109 deletions
diff --git a/packages/ui/src/components/checkbox.tsx b/packages/ui/src/components/checkbox.tsx
index ac9abfdab..2009a430b 100644
--- a/packages/ui/src/components/checkbox.tsx
+++ b/packages/ui/src/components/checkbox.tsx
@@ -9,14 +9,7 @@ export interface CheckboxProps extends ParentProps<ComponentProps<typeof Kobalte
}
export function Checkbox(props: CheckboxProps) {
- const [local, others] = splitProps(props, [
- "children",
- "class",
- "label",
- "hideLabel",
- "description",
- "icon",
- ])
+ const [local, others] = splitProps(props, ["children", "class", "label", "hideLabel", "description", "icon"])
const resolved = children(() => local.children)
return (
<Kobalte {...others} data-component="checkbox">
@@ -42,9 +35,7 @@ export function Checkbox(props: CheckboxProps) {
</Kobalte.Label>
</Show>
<Show when={local.description}>
- <Kobalte.Description data-slot="checkbox-description">
- {local.description}
- </Kobalte.Description>
+ <Kobalte.Description data-slot="checkbox-description">{local.description}</Kobalte.Description>
</Show>
<Kobalte.ErrorMessage data-slot="checkbox-error" />
</div>
diff --git a/packages/ui/src/components/dialog.tsx b/packages/ui/src/components/dialog.tsx
index fdbb9022d..ce7a4b3ac 100644
--- a/packages/ui/src/components/dialog.tsx
+++ b/packages/ui/src/components/dialog.tsx
@@ -38,11 +38,7 @@ export function DialogRoot(props: DialogProps) {
return (
<Kobalte {...others}>
<Show when={props.trigger}>
- <Kobalte.Trigger
- ref={trigger}
- data-component="dialog-trigger"
- onFocusIn={handleTriggerFocus}
- >
+ <Kobalte.Trigger ref={trigger} data-component="dialog-trigger" onFocusIn={handleTriggerFocus}>
{props.trigger}
</Kobalte.Trigger>
</Show>
diff --git a/packages/ui/src/components/diff-changes.tsx b/packages/ui/src/components/diff-changes.tsx
index 3095ddbdb..a8ab737f7 100644
--- a/packages/ui/src/components/diff-changes.tsx
+++ b/packages/ui/src/components/diff-changes.tsx
@@ -93,11 +93,7 @@ export function DiffChanges(props: {
return (
<Show when={variant() === "default" ? total() > 0 : true}>
- <div
- data-component="diff-changes"
- data-variant={variant()}
- classList={{ [props.class ?? ""]: true }}
- >
+ <div data-component="diff-changes" data-variant={variant()} classList={{ [props.class ?? ""]: true }}>
<Switch>
<Match when={variant() === "bars"}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 12" fill="none">
diff --git a/packages/ui/src/components/diff.tsx b/packages/ui/src/components/diff.tsx
index 21ff980c1..a53d5b3f3 100644
--- a/packages/ui/src/components/diff.tsx
+++ b/packages/ui/src/components/diff.tsx
@@ -23,13 +23,7 @@ export type DiffProps<T = {}> = FileDiffOptions<T> & {
export function Diff<T>(props: DiffProps<T>) {
let container!: HTMLDivElement
- const [local, others] = splitProps(props, [
- "before",
- "after",
- "class",
- "classList",
- "annotations",
- ])
+ const [local, others] = splitProps(props, ["before", "after", "class", "classList", "annotations"])
// const lineAnnotations: DiffLineAnnotation<ThreadMetadata>[] = [
// {
@@ -226,13 +220,7 @@ registerCustomTheme("OpenCode", () => {
},
},
{
- scope: [
- "constant",
- "entity.name.constant",
- "variable.other.constant",
- "variable.language",
- "entity",
- ],
+ scope: ["constant", "entity.name.constant", "variable.other.constant", "variable.language", "entity"],
settings: {
foreground: "var(--syntax-constant)",
},
@@ -320,11 +308,7 @@ registerCustomTheme("OpenCode", () => {
},
},
{
- scope: [
- "support.type.object.module",
- "variable.other.object",
- "support.type.property-name.css",
- ],
+ scope: ["support.type.object.module", "variable.other.object", "support.type.property-name.css"],
settings: {
foreground: "var(--syntax-object)",
},
diff --git a/packages/ui/src/components/icon-button.tsx b/packages/ui/src/components/icon-button.tsx
index fccdebd04..79a7cb9c9 100644
--- a/packages/ui/src/components/icon-button.tsx
+++ b/packages/ui/src/components/icon-button.tsx
@@ -22,11 +22,7 @@ export function IconButton(props: ComponentProps<"button"> & IconButtonProps) {
[split.class ?? ""]: !!split.class,
}}
>
- <Icon
- data-slot="icon"
- name={props.icon}
- size={split.iconSize ?? (split.size === "large" ? "normal" : "small")}
- />
+ <Icon data-slot="icon" name={props.icon} size={split.iconSize ?? (split.size === "large" ? "normal" : "small")} />
</Kobalte>
)
}
diff --git a/packages/ui/src/components/input.tsx b/packages/ui/src/components/input.tsx
index 7688d9fc5..9557e90f3 100644
--- a/packages/ui/src/components/input.tsx
+++ b/packages/ui/src/components/input.tsx
@@ -21,12 +21,7 @@ export function Input(props: InputProps) {
"onKeyDown",
])
return (
- <Kobalte
- data-component="input"
- value={local.value}
- onChange={local.onChange}
- onKeyDown={local.onKeyDown}
- >
+ <Kobalte data-component="input" value={local.value} onChange={local.onChange} onKeyDown={local.onKeyDown}>
<Show when={local.label}>
<Kobalte.Label data-slot="label" classList={{ "sr-only": local.hideLabel }}>
{local.label}
diff --git a/packages/ui/src/components/list.tsx b/packages/ui/src/components/list.tsx
index 766979ae6..aaba61fdf 100644
--- a/packages/ui/src/components/list.tsx
+++ b/packages/ui/src/components/list.tsx
@@ -62,13 +62,7 @@ export function List<T>(props: ListProps<T>) {
})
return (
- <VList
- data-component="list"
- ref={setVirtualizer}
- data={props.data}
- onKeyDown={handleKey}
- class={props.class}
- >
+ <VList data-component="list" ref={setVirtualizer} data={props.data} onKeyDown={handleKey} class={props.class}>
{(item) => (
<button
data-slot="item"
diff --git a/packages/ui/src/components/message-part.tsx b/packages/ui/src/components/message-part.tsx
index 38870b5a3..74d9a3113 100644
--- a/packages/ui/src/components/message-part.tsx
+++ b/packages/ui/src/components/message-part.tsx
@@ -53,16 +53,11 @@ export function Message(props: MessageProps) {
return (
<Switch>
<Match when={props.message.role === "user" && props.message}>
- {(userMessage) => (
- <UserMessageDisplay message={userMessage() as UserMessage} parts={props.parts} />
- )}
+ {(userMessage) => <UserMessageDisplay message={userMessage() as UserMessage} parts={props.parts} />}
</Match>
<Match when={props.message.role === "assistant" && props.message}>
{(assistantMessage) => (
- <AssistantMessageDisplay
- message={assistantMessage() as AssistantMessage}
- parts={props.parts}
- />
+ <AssistantMessageDisplay message={assistantMessage() as AssistantMessage} parts={props.parts} />
)}
</Match>
</Switch>
@@ -93,12 +88,7 @@ export function Part(props: MessagePartProps) {
const component = createMemo(() => PART_MAPPING[props.part.type])
return (
<Show when={component()}>
- <Dynamic
- component={component()}
- part={props.part}
- message={props.message}
- hideDetails={props.hideDetails}
- />
+ <Dynamic component={component()} part={props.part} message={props.message} hideDetails={props.hideDetails} />
</Show>
)
}
@@ -226,10 +216,7 @@ ToolRegistry.register({
name: "list",
render(props) {
return (
- <BasicTool
- icon="bullet-list"
- trigger={{ title: "List", subtitle: getDirectory(props.input.path || "/") }}
- >
+ <BasicTool icon="bullet-list" trigger={{ title: "List", subtitle: getDirectory(props.input.path || "/") }}>
<Show when={false && props.output}>
<div data-component="tool-output">{props.output}</div>
</Show>
diff --git a/packages/ui/src/components/progress-circle.tsx b/packages/ui/src/components/progress-circle.tsx
index a659c0f2e..f2e497fe5 100644
--- a/packages/ui/src/components/progress-circle.tsx
+++ b/packages/ui/src/components/progress-circle.tsx
@@ -7,13 +7,7 @@ export interface ProgressCircleProps extends Pick<ComponentProps<"svg">, "class"
}
export function ProgressCircle(props: ProgressCircleProps) {
- const [split, rest] = splitProps(props, [
- "percentage",
- "size",
- "strokeWidth",
- "class",
- "classList",
- ])
+ const [split, rest] = splitProps(props, ["percentage", "size", "strokeWidth", "class", "classList"])
const size = () => split.size || 16
const strokeWidth = () => split.strokeWidth || 3
@@ -42,13 +36,7 @@ export function ProgressCircle(props: ProgressCircleProps) {
[split.class ?? ""]: !!split.class,
}}
>
- <circle
- cx={center}
- cy={center}
- r={radius()}
- data-slot="background"
- stroke-width={strokeWidth()}
- />
+ <circle cx={center} cy={center} r={radius()} data-slot="background" stroke-width={strokeWidth()} />
<circle
cx={center}
cy={center}
diff --git a/packages/ui/src/components/select-dialog.tsx b/packages/ui/src/components/select-dialog.tsx
index 7018888f3..63fad13ec 100644
--- a/packages/ui/src/components/select-dialog.tsx
+++ b/packages/ui/src/components/select-dialog.tsx
@@ -21,16 +21,15 @@ export function SelectDialog<T>(props: SelectDialogProps<T>) {
mouseActive: false,
})
- const { filter, grouped, flat, reset, clear, active, setActive, onKeyDown, onInput } =
- useFilteredList<T>({
- items: others.items,
- key: others.key,
- filterKeys: others.filterKeys,
- current: others.current,
- groupBy: others.groupBy,
- sortBy: others.sortBy,
- sortGroupsBy: others.sortGroupsBy,
- })
+ const { filter, grouped, flat, reset, clear, active, setActive, onKeyDown, onInput } = useFilteredList<T>({
+ items: others.items,
+ key: others.key,
+ filterKeys: others.filterKeys,
+ current: others.current,
+ groupBy: others.groupBy,
+ sortBy: others.sortBy,
+ sortGroupsBy: others.sortGroupsBy,
+ })
createEffect(() => {
filter()
@@ -118,8 +117,7 @@ export function SelectDialog<T>(props: SelectDialogProps<T>) {
fallback={
<div data-slot="empty-state">
<div data-slot="message">
- {props.emptyMessage ?? "No search results"} for{" "}
- <span data-slot="filter">&quot;{filter()}&quot;</span>
+ {props.emptyMessage ?? "No search results"} for <span data-slot="filter">&quot;{filter()}&quot;</span>
</div>
</div>
}
diff --git a/packages/ui/src/components/select.tsx b/packages/ui/src/components/select.tsx
index 305e8a4f8..dea6743ee 100644
--- a/packages/ui/src/components/select.tsx
+++ b/packages/ui/src/components/select.tsx
@@ -49,9 +49,7 @@ export function Select<T>(props: SelectProps<T> & ButtonProps) {
{...itemProps}
>
<Kobalte.ItemLabel data-slot="select-item-label">
- {props.label
- ? props.label(itemProps.item.rawValue)
- : (itemProps.item.rawValue as string)}
+ {props.label ? props.label(itemProps.item.rawValue) : (itemProps.item.rawValue as string)}
</Kobalte.ItemLabel>
<Kobalte.ItemIndicator data-slot="select-item-indicator">
<Icon name="check-small" size="small" />
diff --git a/packages/ui/src/components/typewriter.tsx b/packages/ui/src/components/typewriter.tsx
index 9adb267ad..2f6ecb016 100644
--- a/packages/ui/src/components/typewriter.tsx
+++ b/packages/ui/src/components/typewriter.tsx
@@ -2,11 +2,7 @@ import { createEffect, Show, type ValidComponent } from "solid-js"
import { createStore } from "solid-js/store"
import { Dynamic } from "solid-js/web"
-export const Typewriter = <T extends ValidComponent = "p">(props: {
- text?: string
- class?: string
- as?: T
-}) => {
+export const Typewriter = <T extends ValidComponent = "p">(props: { text?: string; class?: string; as?: T }) => {
const [store, setStore] = createStore({
typing: false,
displayed: "",