chore: format code

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>

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>

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">

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)",
         },

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>
   )
 }

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}

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"

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>

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}

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>
           }

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" />

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: "",

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>

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) => {

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);
   }

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;