mib

components/docs/collections/grid-list-demo.tsx

@@ -4,7 +4,12 @@ import { GridList } from "ui"
 
 export default function GridListDemo() {
   return (
-    <GridList items={items} aria-label="Select your favorite bands" className="min-w-64">
+    <GridList
+      selectionMode="single"
+      items={items}
+      aria-label="Select your favorite bands"
+      className="min-w-64"
+    >
       {(item) => <GridList.Item id={item.id}>{item.name}</GridList.Item>}
     </GridList>
   )

components/docs/collections/list-box-controlled-demo.tsx

@@ -6,15 +6,15 @@ import type { Selection } from "react-aria-components"
 import { Description, ListBox } from "ui"
 
 export default function ListBoxControlledDemo() {
-  const [selected, setSelected] = React.useState<Selection>(new Set(["2"]))
+  const [selected, setSelected] = React.useState<Selection>(new Set([1]))
   return (
     <>
       <ListBox
         selectedKeys={selected}
         onSelectionChange={setSelected}
         items={fruits}
-        selectionMode="single"
         aria-label="Fruits"
+        selectionMode="single"
       >
         {(fruit) => (
           <ListBox.Item id={fruit.id} textValue={fruit.name}>
@@ -23,7 +23,11 @@ export default function ListBoxControlledDemo() {
         )}
       </ListBox>
 
-      {selected && <Description className="mt-4 block">Selected: {selected}</Description>}
+      {selected && (
+        <Description className="mt-4 block [&>strong]:font-medium [&>strong]:text-fg">
+          Selected: <strong>{selected}</strong>
+        </Description>
+      )}
     </>
   )
 }

components/docs/collections/list-box-disabled-demo.tsx

@@ -2,7 +2,7 @@
 
 import { ListBox } from "ui"
 
-export default function ListBoxControlledDemo() {
+export default function ListBoxDisabledDemo() {
   return (
     <>
       <ListBox

components/docs/collections/list-box-item-details-demo.tsx

@@ -1,10 +1,19 @@
 "use client"
 
+import React from "react"
+
+import type { Selection } from "react-aria-components"
 import { ListBox } from "ui"
 
 export default function ListBoxItemDetailsDemo() {
+  const [selected, setSelected] = React.useState<Selection>(new Set([1]))
   return (
-    <ListBox defaultSelectedKeys={[2]} items={roles} aria-label="Bands">
+    <ListBox
+      selectedKeys={selected}
+      onSelectionChange={setSelected}
+      items={roles}
+      aria-label="Bands"
+    >
       {(item) => (
         <ListBox.Item id={item.id}>
           <ListBox.ItemDetails label={item.name} description={item.description} />

components/docs/collections/list-box-multiple-demo.tsx

@@ -5,8 +5,8 @@ import React from "react"
 import type { Selection } from "react-aria-components"
 import { Description, ListBox } from "ui"
 
-export default function ListBoxControlledDemo() {
-  const [selected, setSelected] = React.useState<Selection>(new Set(["2"]))
+export default function ListBoxMultipleDemo() {
+  const [selected, setSelected] = React.useState<Selection>(new Set([3]))
   return (
     <>
       <ListBox

components/docs/collections/list-box-section-demo.tsx

@@ -7,7 +7,8 @@ export default function ListBoxSectionDemo() {
     <ListBox items={bands} aria-label="Bands" selectionMode="multiple">
       {(item) => (
         <ListBox.Section items={item.albums} title={item.name} id={item.id}>
-          {(album) => <ListBox.Item key={album.id}>{album.name}</ListBox.Item>}
+          {/*@ts-expect-error: ts ^5.5.4*/}
+          {(album) => <ListBox.Item id={album.id}>{album.name}</ListBox.Item>}
         </ListBox.Section>
       )}
     </ListBox>

components/docs/generated/previews.ts

@@ -2,7 +2,7 @@
 // This file is autogenerated by scripts/create-pr-content.ts.
 // Do not edit this file directly.
 
-import React from 'react';
+import React from 'react'
 
 export const previews: Record<string, any> = {
   "date-and-time/date-field-demo": {

components/docs/pickers/combo-box-section-demo.tsx

@@ -6,7 +6,7 @@ export default function ComboBoxSectionDemo() {
   return (
     <ComboBox placeholder="Select a author" label="Authors">
       <ComboBox.Input />
-      <ComboBox.List items={movies}>
+      <ComboBox.List defaultSelectedKeys={[1]} items={movies}>
         {(movie) => (
           <ComboBox.Section title={movie.title} items={movie.genres}>
             {(genre) => <ComboBox.Option textValue={genre.name}>{genre.name}</ComboBox.Option>}

components/docs/pickers/select-section-demo.tsx

@@ -4,7 +4,7 @@ import { Select } from "ui"
 
 export default function SelectSectionDemo() {
   return (
-    <Select aria-label="Countries" placeholder="Select a country">
+    <Select defaultSelectedKey={1} aria-label="Countries" placeholder="Select a country">
       <Select.Trigger />
       <Select.List items={countries}>
         {(country) => (

components/ui/badge.tsx

@@ -6,7 +6,7 @@ import { tv, type VariantProps } from "tailwind-variants"
 
 const badgeIntents = {
   primary:
-    "ring-primary/30 bg-primary/10 dark:bg-primary/20 text-primary dark:text-primary-300 hover:bg-primary/15 dark:hover:bg-primary/10",
+    "ring-primary/30 bg-primary/10 dark:bg-primary/20 text-primary dark:text-primary hover:bg-primary/15 dark:hover:bg-primary/10",
   secondary: "bg-secondary/50 dark:bg-secondary/70 ring-secondary-fg/20 text-secondary-fg",
   success:
     "dark:ring-success/30 ring-success/40 bg-success/10 dark:bg-success/15 text-success hover:bg-success/15 dark:hover:bg-success/10",

components/ui/drawer.tsx

@@ -98,7 +98,7 @@ const DrawerContentPrimitive = ({ children, ...props }: DrawerOverlayPrimitivePr
       >
         <ModalPrimitive
           className={twJoin(
-            "max-h-full flex flex-col w-full rounded-t-2xl sm:rounded-lg overflow-hidden bg-overlay text-overlay-fg text-left align-middle shadow-lg",
+            "max-h-full flex flex-col w-full rounded-t-3xl sm:rounded-lg overflow-hidden bg-overlay text-overlay-fg text-left align-middle shadow-lg",
             "ring-1 ring-zinc-950/5 dark:ring-white/15"
           )}
           initial={{ y: h }}

components/ui/dropdown.tsx

@@ -19,7 +19,7 @@ import { cn, cr } from "./primitive"
 
 const dropdownItemStyles = tv({
   base: [
-    "group flex cursor-default select-none items-center gap-x-1.5 rounded-md py-2 pl-8 relative pr-1 text-base outline outline-0 forced-color-adjust-none lg:text-sm",
+    "group flex cursor-default select-none items-center gap-x-1.5 rounded-[calc(var(--radius)-1px)] py-2 pl-2.5 relative pr-1.5 text-base outline outline-0 forced-color-adjust-none lg:text-sm",
     "[&_[data-slot=avatar]]:-mr-0.5 [&_[data-slot=avatar]]:size-6 sm:[&_[data-slot=avatar]]:size-5",
     "[&>[data-slot=icon]]:size-4 [&>[data-slot=icon]]:shrink-0",
     "has-submenu:open:data-[danger=true]:bg-danger/20 has-submenu:open:data-[danger=true]:text-danger",
@@ -55,17 +55,18 @@ interface DropdownSectionProps<T> extends SectionProps<T> {
 
 const dropdownSectionStyles = tv({
   slots: {
-    base: "first:-mt-[5px] xss3 after:content-[''] after:block after:h-[5px]",
+    section:
+      "first:-mt-[5px] xss3 flex flex-col gap-y-0.5 after:content-[''] after:block after:h-[5px]",
     header:
-      "text-sm font-medium text-muted-fg bg-tertiary px-4 py-2 truncate min-w-[--trigger-width] sticky -top-[5px] backdrop-blur -mt-px -mx-1 z-10 supports-[-moz-appearance:none]:bg-tertiary border-y [&+*]:mt-1"
+      "text-sm font-medium text-muted-fg bg-tertiary px-4 py-2 truncate min-w-[--trigger-width] sticky -top-[5px] backdrop-blur -mt-px -mb-0.5 -mx-1 z-10 supports-[-moz-appearance:none]:bg-tertiary border-y [&+*]:mt-1"
   }
 })
 
-const { base, header } = dropdownSectionStyles()
+const { section, header } = dropdownSectionStyles()
 
 const DropdownSection = <T extends object>({ className, ...props }: DropdownSectionProps<T>) => {
   return (
-    <Section className={base(className)}>
+    <Section className={section({ className })}>
       {"title" in props && <Header className={header()}>{props.title}</Header>}
       <Collection items={props.items}>{props.children}</Collection>
     </Section>
@@ -85,15 +86,15 @@ const DropdownItem = ({ className, ...props }: ListBoxItemProps) => {
     >
       {cr(props.children, (children, { isSelected }) => (
         <>
+          <span className="flex flex-1 items-center gap-2 truncate font-normal group-selected:font-medium">
+            {children}
+          </span>
+
           {isSelected && (
-            <span className="absolute left-2 top-3 lg:top-2.5">
+            <span className="absolute right-2 top-3 lg:top-2.5">
               <IconCheck />
             </span>
           )}
-
-          <span className="flex flex-1 items-center gap-2 truncate font-normal group-selected:font-medium">
-            {children}
-          </span>
         </>
       ))}
     </ListBoxItemPrimitive>

components/ui/field.tsx

@@ -1,24 +1,16 @@
-"use client"
-
-import * as React from "react"
-
-import {
-  FieldError as FieldErrorPrimitive,
-  type FieldErrorProps,
-  Group,
-  type GroupProps,
-  Input as InputPrimitive,
-  type InputProps,
-  Label as LabelPrimitive,
-  type LabelProps,
-  Text,
-  type TextFieldProps as TextFieldPrimitiveProps,
-  type TextProps,
-  type ValidationResult
-} from "react-aria-components"
-import { tv } from "tailwind-variants"
-
-import { cr, ctr } from "./primitive"
+'use client';
+
+import * as React from 'react';
+
+
+
+import { FieldError as FieldErrorPrimitive, type FieldErrorProps, Group, type GroupProps, Input as InputPrimitive, type InputProps, Label as LabelPrimitive, type LabelProps, Text, type TextFieldProps as TextFieldPrimitiveProps, type TextProps, type ValidationResult } from 'react-aria-components';
+import { tv } from 'tailwind-variants';
+
+
+
+import { cr, ctr } from './primitive';
+
 
 // primitive styles
 

components/ui/grid-list.tsx

@@ -11,22 +11,14 @@ import { Button, GridList as GridListPrimitive, GridListItem } from "react-aria-
 import { tv } from "tailwind-variants"
 
 import { Checkbox } from "./checkbox"
-import { composeTailwindRenderProps, focusRing } from "./primitive"
+import { cr, ctr, focusRing } from "./primitive"
 
 interface GridListProps<T extends object> extends GridListPrimitiveProps<T> {}
 
-const GridList = <T extends object>({
-  selectionMode = "single",
-  children,
-  ...props
-}: GridListProps<T>) => (
+const GridList = <T extends object>({ children, className, ...props }: GridListProps<T>) => (
   <GridListPrimitive
-    selectionMode={selectionMode}
+    className={ctr(className, "relative overflow-auto rounded-lg border")}
     {...props}
-    className={composeTailwindRenderProps(
-      props.className,
-      "relative overflow-auto rounded-lg border"
-    )}
   >
     {children}
   </GridListPrimitive>
@@ -36,20 +28,29 @@ const itemStyles = tv({
   extend: focusRing,
   base: "relative -mb-px flex cursor-default select-none gap-3 border-y px-3 py-2 text-sm text-fg -outline-offset-2 first:rounded-t-md first:border-t-0 last:mb-0 last:rounded-b-md last:border-b-0",
   variants: {
+    isHovered: { true: "bg-secondary dark:bg-secondary/60" },
     isSelected: {
-      false: "hover:bg-secondary",
-      true: "z-20 border-y-primary/50 bg-primary/20"
+      true: "z-20 border-y-accent/50 bg-accent/10 hover:bg-accent/15 dark:bg-accent/20 dark:hover:bg-accent/25"
+    },
+    isFocusVisible: {
+      true: "z-20 border-y-accent bg-accent/5 selected:bg-accent/10 hover:bg-accent/15 dark:selected:bg-accent/20 dark:hover:bg-accent/25"
     },
     isDisabled: {
       true: "z-10 text-muted-fg forced-colors:text-[GrayText]"
     }
   }
 })
 
-const Item = ({ children, ...props }: GridListItemProps) => {
+const Item = ({ children, className, ...props }: GridListItemProps) => {
   const textValue = typeof children === "string" ? children : undefined
   return (
-    <GridListItem textValue={textValue} {...props} className={itemStyles}>
+    <GridListItem
+      textValue={textValue}
+      {...props}
+      className={cr(className, (className, renderProps) =>
+        itemStyles({ ...renderProps, className })
+      )}
+    >
       {({ selectionMode, selectionBehavior, allowsDragging }) => (
         <>
           {allowsDragging && (
@@ -58,7 +59,7 @@ const Item = ({ children, ...props }: GridListItemProps) => {
             </Button>
           )}
           {selectionMode === "multiple" && selectionBehavior === "toggle" && (
-            <Checkbox slot="selection" />
+            <Checkbox className="-mr-2" slot="selection" />
           )}
           {children}
         </>

components/ui/list-box.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 
-import { IconHamburger } from "justd-icons"
+import { IconCheck, IconHamburger } from "justd-icons"
 import {
   ListBox as ListBoxPrimitive,
   ListBoxItem as ListBoxItemPrimitive,
@@ -15,7 +15,7 @@ import { DropdownItemDetails, DropdownSection } from "./dropdown"
 import { cn, cr } from "./primitive"
 
 const listBoxStyles = tv({
-  base: "flex max-h-96 w-full min-w-72 flex-col overflow-y-auto rounded-xl border p-1 shadow-xl outline-none"
+  base: "flex max-h-96 w-full gap-y-1 min-w-72 flex-col overflow-y-auto rounded-xl border p-1 shadow-lg outline-none"
 })
 
 interface ListBoxProps<T> extends ListBoxPrimitiveProps<T> {
@@ -29,14 +29,17 @@ const ListBox = <T extends object>({ children, className, ...props }: ListBoxPro
 )
 
 const listBoxItemStyles = tv({
-  base: "my-0.5 cursor-pointer rounded-md p-2 text-base outline-none transition lg:text-sm",
+  base: "lbi cursor-pointer relative rounded-[calc(var(--radius)-1px)] p-2 text-base outline-none transition lg:text-sm",
   variants: {
-    isHovered: { true: "bg-secondary text-secondary-fg" },
+    isFocusVisible: { true: "bg-secondary text-secondary-fg" },
+    isHovered: { true: "bg-accent text-accent-fg" },
     isFocused: {
-      true: "[&_[data-slot=icon]]:text-primary-fg [&_[data-slot=label]]:text-primary-fg [&_.text-muted-fg]:text-primary-fg/80 bg-primary text-primary-fg"
+      true: "[&_[data-slot=icon]]:text-accent-fg [&_[data-slot=label]]:text-accent-fg [&_.text-muted-fg]:text-accent-fg/80 bg-accent text-accent-fg"
+    },
+    isSelected: {
+      true: "[&_[data-slot=icon]]:text-accent-fg [&_[data-slot=label]]:text-accent-fg [&_.text-muted-fg]:text-accent-fg/80 bg-accent text-accent-fg"
     },
     isDragging: { true: "cursor-grabbing bg-secondary text-secondary-fg" },
-    isSelected: { true: "bg-primary text-primary-fg" },
     isDisabled: {
       true: "opacity-70 cursor-default text-muted-fg"
     }
@@ -70,12 +73,18 @@ const ListBoxItem = <T extends object>({ children, className, ...props }: ListBo
                   "size-4 shrink-0 text-muted-fg transition",
                   values.isFocused && "text-fg",
                   values.isDragging && "text-fg",
-                  values.isSelected && "text-primary-fg/70"
+                  values.isSelected && "text-accent-fg/70"
                 )}
               />
             )}
             <div className="flex flex-col">
               {typeof children === "function" ? children(values) : children}
+
+              {values.isSelected && (
+                <span className="animate-in absolute right-2 top-3 lg:top-2.5">
+                  <IconCheck />
+                </span>
+              )}
             </div>
           </>
         </div>
@@ -95,7 +104,13 @@ const ListBoxPicker = <T extends object>({ className, ...props }: ListBoxPickerP
   )
 }
 
-ListBox.Section = DropdownSection
+const Section = ({ className, ...props }: React.ComponentProps<typeof DropdownSection>) => {
+  return (
+    <DropdownSection className={cn(className, "[&_.lbi:last-child]:-mb-1.5 gap-y-1")} {...props} />
+  )
+}
+
+ListBox.Section = Section
 ListBox.ItemDetails = DropdownItemDetails
 ListBox.Item = ListBoxItem
 ListBox.Picker = ListBoxPicker

components/ui/menu.tsx

@@ -154,16 +154,15 @@ const MenuSeparator = ({ className, ...props }: SeparatorProps) => (
 )
 
 const Checkbox = ({ className, children, ...props }: MenuItemProps) => (
-  <Item className={cn("pl-8 relative", className)} {...props}>
+  <Item className={cn("relative pr-8", className)} {...props}>
     {(values) => (
       <>
+        {typeof children === "function" ? children(values) : children}
         {values.isSelected && (
-          <span className="absolute left-2 flex size-4 shrink-0 items-center animate-in justify-center">
-            <IconCheck className="size-4" />
+          <span className="absolute right-2 flex size-4 shrink-0 items-center animate-in justify-center">
+            <IconCheck />
           </span>
         )}
-
-        {typeof children === "function" ? children(values) : children}
       </>
     )}
   </Item>