summaryrefslogtreecommitdiffhomepage
path: root/packages/ui
diff options
context:
space:
mode:
Diffstat (limited to 'packages/ui')
-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
-rw-r--r--packages/ui/src/demo.tsx24
-rw-r--r--packages/ui/src/hooks/use-filtered-list.tsx8
-rw-r--r--packages/ui/src/styles/base.css4
-rw-r--r--packages/ui/src/styles/theme.css9
16 files changed, 40 insertions, 142 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: "",
diff --git a/packages/ui/src/demo.tsx b/packages/ui/src/demo.tsx
index 6d60c25ae..96579c999 100644
--- a/packages/ui/src/demo.tsx
+++ b/packages/ui/src/demo.tsx
@@ -141,9 +141,7 @@ const Demo: Component = () => {
<Input
placeholder="Enter text..."
value={inputValue()}
- onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) =>
- setInputValue(e.currentTarget.value)
- }
+ onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) => setInputValue(e.currentTarget.value)}
/>
<Input placeholder="Disabled input" disabled />
<Input type="password" placeholder="Password input" />
@@ -160,15 +158,8 @@ const Demo: Component = () => {
checked={checked()}
onChange={setChecked}
/>
- <Checkbox
- label="With description"
- description="This is a helpful description for the checkbox"
- />
- <Checkbox
- label="Indeterminate state"
- description="Useful for nested checkbox lists"
- indeterminate
- />
+ <Checkbox label="With description" description="This is a helpful description for the checkbox" />
+ <Checkbox label="Indeterminate state" description="Useful for nested checkbox lists" indeterminate />
<Checkbox
label="I agree to the Terms and Conditions"
description="You must agree to continue"
@@ -199,9 +190,7 @@ const Demo: Component = () => {
<Button onClick={() => setDialogOpen(true)}>Open Dialog</Button>
<Dialog open={dialogOpen()} onOpenChange={setDialogOpen}>
<Dialog.Title>Example Dialog</Dialog.Title>
- <Dialog.Description>
- This is an example dialog with a title and description.
- </Dialog.Description>
+ <Dialog.Description>This is an example dialog with a title and description.</Dialog.Description>
<div
style={{
"margin-top": "16px",
@@ -267,10 +256,7 @@ const Demo: Component = () => {
</Accordion.Header>
<Accordion.Content>
<div style={{ padding: "16px" }}>
- <p>
- Kobalte is a UI toolkit for building accessible web apps and design systems with
- SolidJS.
- </p>
+ <p>Kobalte is a UI toolkit for building accessible web apps and design systems with SolidJS.</p>
</div>
</Accordion.Content>
</Accordion.Item>
diff --git a/packages/ui/src/hooks/use-filtered-list.tsx b/packages/ui/src/hooks/use-filtered-list.tsx
index ca9bc5388..e0cb6e7aa 100644
--- a/packages/ui/src/hooks/use-filtered-list.tsx
+++ b/packages/ui/src/hooks/use-filtered-list.tsx
@@ -11,10 +11,7 @@ export interface FilteredListProps<T> {
current?: T
groupBy?: (x: T) => string
sortBy?: (a: T, b: T) => number
- sortGroupsBy?: (
- a: { category: string; items: T[] },
- b: { category: string; items: T[] },
- ) => number
+ sortGroupsBy?: (a: { category: string; items: T[] }, b: { category: string; items: T[] }) => number
onSelect?: (value: T | undefined) => void
}
@@ -25,8 +22,7 @@ export function useFilteredList<T>(props: FilteredListProps<T>) {
() => store.filter,
async (filter) => {
const needle = filter?.toLowerCase()
- const all =
- (typeof props.items === "function" ? await props.items(needle) : props.items) || []
+ const all = (typeof props.items === "function" ? await props.items(needle) : props.items) || []
const result = pipe(
all,
(x) => {
diff --git a/packages/ui/src/styles/base.css b/packages/ui/src/styles/base.css
index 02b473238..b80398e1d 100644
--- a/packages/ui/src/styles/base.css
+++ b/packages/ui/src/styles/base.css
@@ -269,8 +269,8 @@ textarea,
crash when using `color-mix(…)` with `currentcolor`. (https://github.com/tailwindlabs/tailwindcss/issues/17194)
*/
-@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or
- (contain-intrinsic-size: 1px) /* Safari 17+ */ {
+@supports (not (-webkit-appearance: -apple-pay-button)) /* Not Safari */ or (contain-intrinsic-size: 1px)
+ /* Safari 17+ */ {
::placeholder {
color: color-mix(in oklab, currentcolor 50%, transparent);
}
diff --git a/packages/ui/src/styles/theme.css b/packages/ui/src/styles/theme.css
index 431d811da..2f05aad56 100644
--- a/packages/ui/src/styles/theme.css
+++ b/packages/ui/src/styles/theme.css
@@ -50,11 +50,9 @@
--radius-4xl: 2rem;
--shadow-xs:
- 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);
+ 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);
--shadow-md:
- 0 6px 8px -4px rgba(19, 16, 16, 0.12), 0 4px 3px -2px rgba(19, 16, 16, 0.12),
- 0 1px 2px -1px rgba(19, 16, 16, 0.12);
+ 0 6px 8px -4px rgba(19, 16, 16, 0.12), 0 4px 3px -2px rgba(19, 16, 16, 0.12), 0 1px 2px -1px rgba(19, 16, 16, 0.12);
--shadow-xs-border:
0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.2)), 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);
@@ -64,8 +62,7 @@
0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12);
--shadow-xs-border-focus:
0 0 0 1px var(--border-base, rgba(11, 6, 0, 0.2)), 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),
- 0 0 0 2px var(--background-weak, #f1f0f0),
+ 0 1px 2px 0 rgba(19, 16, 16, 0.08), 0 1px 3px 0 rgba(19, 16, 16, 0.12), 0 0 0 2px var(--background-weak, #f1f0f0),
0 0 0 3px var(--border-selected, rgba(0, 74, 255, 0.99));
--text-mix-blend-mode: multiply;
generated by cgit v1.2.3 (git 2.39.1) at 2026-06-29 09:11:52 +0000