@adea-ai/ui 0.22.2 → 0.23.0

package/src/components/ui/tabs.tsx

@@ -1,23 +1,23 @@
-'use client'
-
-import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'
+import { Tabs as TabsPrimitive } from '@kobalte/core/tabs'
 import { cva, type VariantProps } from 'class-variance-authority'
+import { splitProps, type ComponentProps } from 'solid-js'
 
 import { cn } from '#lib/utils'
 
-function Tabs({ className, orientation = 'horizontal', ...props }: TabsPrimitive.Root.Props) {
+function Tabs(props: ComponentProps<typeof TabsPrimitive>) {
+  const [local, rest] = splitProps(props, ['class', 'orientation'])
   return (
-    <TabsPrimitive.Root
+    <TabsPrimitive
       data-slot="tabs"
-      data-orientation={orientation}
-      className={cn('group/tabs flex gap-2 data-horizontal:flex-col', className)}
-      {...props}
+      orientation={local.orientation}
+      class={cn('group/tabs flex gap-2 data-[orientation=horizontal]:flex-col', local.class)}
+      {...rest}
     />
   )
 }
 
 const tabsListVariants = cva(
-  'group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-8 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none',
+  'group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none',
   {
     variants: {
       variant: {
@@ -31,43 +31,44 @@ const tabsListVariants = cva(
   }
 )
 
-function TabsList({
-  className,
-  variant = 'default',
-  ...props
-}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+function TabsList(
+  props: ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>
+) {
+  const [local, rest] = splitProps(props, ['class', 'variant'])
   return (
     <TabsPrimitive.List
       data-slot="tabs-list"
-      data-variant={variant}
-      className={cn(tabsListVariants({ variant }), className)}
-      {...props}
+      data-variant={local.variant ?? 'default'}
+      class={cn(tabsListVariants({ variant: local.variant }), local.class)}
+      {...rest}
     />
   )
 }
 
-function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+function TabsTrigger(props: ComponentProps<typeof TabsPrimitive.Trigger>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
-    <TabsPrimitive.Tab
+    <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
-      className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent',
-        'data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground',
-        'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100',
-        className
+      class={cn(
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-selected:shadow-sm group-data-[variant=line]/tabs-list:data-selected:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-selected:bg-transparent dark:group-data-[variant=line]/tabs-list:data-selected:border-transparent dark:group-data-[variant=line]/tabs-list:data-selected:bg-transparent',
+        'data-selected:bg-background data-selected:text-foreground dark:data-selected:border-input dark:data-selected:bg-input/30 dark:data-selected:text-foreground',
+        'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-selected:after:opacity-100',
+        local.class
       )}
-      {...props}
+      {...rest}
     />
   )
 }
 
-function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+function TabsContent(props: ComponentProps<typeof TabsPrimitive.Content>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
-    <TabsPrimitive.Panel
+    <TabsPrimitive.Content
       data-slot="tabs-content"
-      className={cn('flex-1 text-sm outline-none', className)}
-      {...props}
+      class={cn('flex-1 text-sm outline-none', local.class)}
+      {...rest}
     />
   )
 }

package/src/components/ui/toggle-group.tsx

@@ -1,87 +1,98 @@
-'use client'
-
-import * as React from 'react'
-import { Toggle as TogglePrimitive } from '@base-ui/react/toggle'
-import { ToggleGroup as ToggleGroupPrimitive } from '@base-ui/react/toggle-group'
+import { ToggleGroup as ToggleGroupPrimitive } from '@kobalte/core/toggle-group'
 import { type VariantProps } from 'class-variance-authority'
+import { createContext, splitProps, useContext, type ComponentProps } from 'solid-js'
 
 import { cn } from '#lib/utils'
 import { toggleVariants } from '#components/ui/toggle'
 
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants> & {
-    spacing?: number
-    orientation?: 'horizontal' | 'vertical'
-  }
->({
+type ToggleGroupContextValue = VariantProps<typeof toggleVariants> & {
+  spacing: number
+}
+
+const ToggleGroupContext = createContext<ToggleGroupContextValue>({
   size: 'default',
   variant: 'default',
   spacing: 2,
-  orientation: 'horizontal',
 })
 
-function ToggleGroup({
-  className,
-  variant,
-  size,
-  spacing = 2,
-  orientation = 'horizontal',
-  children,
-  ...props
-}: ToggleGroupPrimitive.Props &
+type ToggleGroupProps = Omit<
+  ComponentProps<typeof ToggleGroupPrimitive>,
+  'multiple' | 'onChange' | 'value'
+> &
   VariantProps<typeof toggleVariants> & {
     spacing?: number
-    orientation?: 'horizontal' | 'vertical'
-  }) {
+    value?: string[]
+    onChange?: (value: string[]) => void
+  }
+
+function ToggleGroup(props: ToggleGroupProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'variant',
+    'size',
+    'spacing',
+    'orientation',
+    'children',
+    'value',
+    'onChange',
+  ])
+
   return (
     <ToggleGroupPrimitive
       data-slot="toggle-group"
-      data-variant={variant}
-      data-size={size}
-      data-spacing={spacing}
-      data-orientation={orientation}
-      style={{ '--gap': spacing } as React.CSSProperties}
-      className={cn(
-        'group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch',
-        className
+      data-variant={local.variant ?? 'default'}
+      data-size={local.size ?? 'default'}
+      data-spacing={local.spacing ?? 2}
+      data-orientation={local.orientation ?? 'horizontal'}
+      multiple
+      value={local.value}
+      onChange={local.onChange}
+      style={{ '--gap': local.spacing ?? 2 }}
+      class={cn(
+        'group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch',
+        local.class
       )}
-      {...props}
+      {...rest}
     >
-      <ToggleGroupContext.Provider value={{ variant, size, spacing, orientation }}>
-        {children}
+      <ToggleGroupContext.Provider
+        value={{
+          variant: local.variant,
+          size: local.size,
+          spacing: local.spacing ?? 2,
+        }}
+      >
+        {local.children}
       </ToggleGroupContext.Provider>
     </ToggleGroupPrimitive>
   )
 }
 
-function ToggleGroupItem({
-  className,
-  children,
-  variant = 'default',
-  size = 'default',
-  ...props
-}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
-  const context = React.useContext(ToggleGroupContext)
+type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>
+
+function ToggleGroupItem(props: ToggleGroupItemProps) {
+  const [local, rest] = splitProps(props, ['class', 'children', 'variant', 'size'])
+  const context = useContext(ToggleGroupContext)
 
   return (
-    <TogglePrimitive
+    <ToggleGroupPrimitive.Item
       data-slot="toggle-group-item"
-      data-variant={context.variant || variant}
-      data-size={context.size || size}
+      data-variant={context.variant ?? local.variant}
+      data-size={context.size ?? local.size}
       data-spacing={context.spacing}
-      className={cn(
-        'shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
+      class={cn(
+        'shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-1.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-1.5 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:last:rounded-b-lg group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-[orientation=horizontal]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-[orientation=vertical]/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t',
         toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
+          variant: context.variant ?? local.variant,
+          size: context.size ?? local.size,
         }),
-        className
+        local.class
       )}
-      {...props}
+      {...rest}
     >
-      {children}
-    </TogglePrimitive>
+      {local.children}
+    </ToggleGroupPrimitive.Item>
   )
 }
 
-export { ToggleGroup, ToggleGroupItem }
+export { ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps }

package/src/components/ui/toggle.tsx

@@ -1,12 +1,11 @@
-'use client'
-
-import { Toggle as TogglePrimitive } from '@base-ui/react/toggle'
+import { ToggleButton as TogglePrimitive } from '@kobalte/core/toggle-button'
 import { cva, type VariantProps } from 'class-variance-authority'
+import { splitProps, type ComponentProps } from 'solid-js'
 
 import { cn } from '#lib/utils'
 
 const toggleVariants = cva(
-  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -27,17 +26,15 @@ const toggleVariants = cva(
   }
 )
 
-function Toggle({
-  className,
-  variant = 'default',
-  size = 'default',
-  ...props
-}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
+type ToggleProps = ComponentProps<typeof TogglePrimitive> & VariantProps<typeof toggleVariants>
+
+function Toggle(props: ToggleProps) {
+  const [local, rest] = splitProps(props, ['class', 'variant', 'size'])
   return (
     <TogglePrimitive
       data-slot="toggle"
-      className={cn(toggleVariants({ variant, size, className }))}
-      {...props}
+      class={cn(toggleVariants({ variant: local.variant, size: local.size }), local.class)}
+      {...rest}
     />
   )
 }

package/src/components/ui/tooltip.tsx

@@ -1,54 +1,59 @@
-'use client'
-
-import * as React from 'react'
-import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'
+import { Tooltip as TooltipPrimitive } from '@kobalte/core/tooltip'
+import {
+  createContext,
+  splitProps,
+  useContext,
+  type ComponentProps,
+  type ParentProps,
+} from 'solid-js'
 
 import { cn } from '#lib/utils'
 
 const TOOLTIP_DELAY = 200
 
-function TooltipProvider({ delay = TOOLTIP_DELAY, ...props }: TooltipPrimitive.Provider.Props) {
-  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />
+const TooltipDelayContext = createContext<number>(TOOLTIP_DELAY)
+
+function TooltipProvider(props: ParentProps<{ delay?: number }>) {
+  return (
+    <TooltipDelayContext.Provider value={props.delay ?? TOOLTIP_DELAY}>
+      {props.children}
+    </TooltipDelayContext.Provider>
+  )
 }
 
-function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
-  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+function Tooltip(props: ComponentProps<typeof TooltipPrimitive>) {
+  const delay = useContext(TooltipDelayContext)
+  return <TooltipPrimitive openDelay={delay} data-slot="tooltip" {...props} />
 }
 
-function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+function TooltipTrigger(props: ComponentProps<typeof TooltipPrimitive.Trigger>) {
   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
 }
 
-function TooltipContent({
-  className,
-  side = 'top',
-  sideOffset = 4,
-  align,
-  alignOffset,
-  children,
-  ...props
-}: TooltipPrimitive.Popup.Props &
-  Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
+type TooltipContentProps = ComponentProps<typeof TooltipPrimitive.Content> & {
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  sideOffset?: number
+  align?: 'start' | 'center' | 'end'
+}
+
+function TooltipContent(props: TooltipContentProps) {
+  const [local, rest] = splitProps(props, ['class', 'side', 'sideOffset', 'align', 'children'])
+  const placement = () => `${local.side ?? 'top'}${local.align ? `-${local.align}` : ''}`
+
   return (
     <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Positioner
-        className="isolate z-[160] outline-none"
-        align={align}
-        alignOffset={alignOffset}
-        side={side}
-        sideOffset={sideOffset}
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        placement={placement()}
+        gutter={local.sideOffset ?? 4}
+        class={cn(
+          'z-[160] max-w-72 rounded-md bg-popover px-2.5 py-1.5 text-sm leading-5 text-popover-foreground shadow-md ring-1 ring-foreground/10 data-closed:animate-out data-closed:fade-out-0 data-expanded:animate-in data-expanded:fade-in-0',
+          local.class
+        )}
+        {...rest}
       >
-        <TooltipPrimitive.Popup
-          data-slot="tooltip-content"
-          className={cn(
-            'max-w-72 rounded-md bg-popover px-2.5 py-1.5 text-sm leading-5 text-popover-foreground shadow-md ring-1 ring-foreground/10',
-            className
-          )}
-          {...props}
-        >
-          {children}
-        </TooltipPrimitive.Popup>
-      </TooltipPrimitive.Positioner>
+        {local.children}
+      </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )
 }