@adea-ai/ui 0.22.2 → 0.23.0

package/src/components/ui/field.tsx

@@ -1,52 +1,49 @@
-'use client'
-
-import { useMemo } from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
+import { createMemo, Show, splitProps, type ComponentProps, type JSX } from 'solid-js'
 
 import { cn } from '#lib/utils'
 import { Label } from '#components/ui/label'
 import { Separator } from '#components/ui/separator'
 
-function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
+function FieldSet(props: ComponentProps<'fieldset'>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
     <fieldset
       data-slot="field-set"
-      className={cn(
+      class={cn(
         'flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
-        className
+        local.class
       )}
-      {...props}
+      {...rest}
     />
   )
 }
 
-function FieldLegend({
-  className,
-  variant = 'legend',
-  ...props
-}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
+function FieldLegend(props: ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
+  const [local, rest] = splitProps(props, ['class', 'variant'])
   return (
     <legend
       data-slot="field-legend"
-      data-variant={variant}
-      className={cn(
+      data-variant={local.variant ?? 'legend'}
+      class={cn(
         'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',
-        className
+        local.class
       )}
-      {...props}
+      {...rest}
     />
   )
 }
 
-function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
+function FieldGroup(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
     <div
       data-slot="field-group"
-      className={cn(
+      class={cn(
         'group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',
-        className
+        local.class
       )}
-      {...props}
+      {...rest}
     />
   )
 }
@@ -66,147 +63,146 @@ const fieldVariants = cva('group/field flex w-full gap-2 data-[invalid=true]:tex
   },
 })
 
-function Field({
-  className,
-  orientation = 'vertical',
-  ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
+function Field(props: ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {
+  const [local, rest] = splitProps(props, ['class', 'orientation'])
   return (
     <div
       role="group"
       data-slot="field"
-      data-orientation={orientation}
-      className={cn(fieldVariants({ orientation }), className)}
-      {...props}
+      data-orientation={local.orientation ?? 'vertical'}
+      class={cn(fieldVariants({ orientation: local.orientation }), local.class)}
+      {...rest}
     />
   )
 }
 
-function FieldContent({ className, ...props }: React.ComponentProps<'div'>) {
+function FieldContent(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
     <div
       data-slot="field-content"
-      className={cn('group/field-content flex flex-1 flex-col gap-0.5 leading-snug', className)}
-      {...props}
+      class={cn('group/field-content flex flex-1 flex-col gap-0.5 leading-snug', local.class)}
+      {...rest}
     />
   )
 }
 
-function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {
+function FieldLabel(props: ComponentProps<typeof Label>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
     <Label
       data-slot="field-label"
-      className={cn(
+      class={cn(
         'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10',
         'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',
-        className
+        local.class
       )}
-      {...props}
+      {...rest}
     />
   )
 }
 
-function FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {
+function FieldTitle(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
     <div
       data-slot="field-label"
-      className={cn(
+      class={cn(
         'flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50',
-        className
+        local.class
       )}
-      {...props}
+      {...rest}
     />
   )
 }
 
-function FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {
+function FieldDescription(props: ComponentProps<'p'>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
     <p
       data-slot="field-description"
-      className={cn(
+      class={cn(
         'text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5',
         'last:mt-0 nth-last-2:-mt-1',
         '[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',
-        className
+        local.class
       )}
-      {...props}
+      {...rest}
     />
   )
 }
 
-function FieldSeparator({
-  children,
-  className,
-  ...props
-}: React.ComponentProps<'div'> & {
-  children?: React.ReactNode
-}) {
+function FieldSeparator(
+  props: ComponentProps<'div'> & {
+    children?: JSX.Element
+  }
+) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
   return (
     <div
       data-slot="field-separator"
-      data-content={!!children}
-      className={cn(
+      data-content={!!local.children}
+      class={cn(
         'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',
-        className
+        local.class
       )}
-      {...props}
+      {...rest}
     >
-      <Separator className="absolute inset-0 top-1/2" />
-      {children && (
+      <Separator class="absolute inset-0 top-1/2" />
+      <Show when={local.children}>
         <span
-          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          class="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
           data-slot="field-separator-content"
         >
-          {children}
+          {local.children}
         </span>
-      )}
+      </Show>
     </div>
   )
 }
 
-function FieldError({
-  className,
-  children,
-  errors,
-  ...props
-}: React.ComponentProps<'div'> & {
-  errors?: Array<{ message?: string } | undefined>
-}) {
-  const content = useMemo(() => {
-    if (children) {
-      return children
+function FieldError(
+  props: ComponentProps<'div'> & {
+    errors?: Array<{ message?: string } | undefined>
+  }
+) {
+  const [local, rest] = splitProps(props, ['class', 'children', 'errors'])
+
+  const content = createMemo(() => {
+    if (local.children) {
+      return local.children
     }
 
+    const errors = local.errors
     if (!errors?.length) {
       return null
     }
 
     const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()]
 
-    if (uniqueErrors?.length == 1) {
-      return uniqueErrors[0]?.message
+    if (uniqueErrors.length === 1) {
+      const message = uniqueErrors[0]?.message
+      return message ? <span>{message}</span> : null
     }
 
     return (
-      <ul className="ml-4 flex list-disc flex-col gap-1">
-        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
+      <ul class="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map((error) => error?.message && <li>{error.message}</li>)}
       </ul>
     )
-  }, [children, errors])
-
-  if (!content) {
-    return null
-  }
+  })
 
   return (
-    <div
-      role="alert"
-      data-slot="field-error"
-      className={cn('text-sm font-normal text-destructive', className)}
-      {...props}
-    >
-      {content}
-    </div>
+    <Show when={content()}>
+      <div
+        role="alert"
+        data-slot="field-error"
+        class={cn('text-sm font-normal text-destructive', local.class)}
+        {...rest}
+      >
+        {content()}
+      </div>
+    </Show>
   )
 }
 

package/src/components/ui/input.tsx

@@ -1,18 +1,18 @@
-import * as React from 'react'
-import { Input as InputPrimitive } from '@base-ui/react/input'
+import { splitProps, type ComponentProps } from 'solid-js'
 
 import { cn } from '#lib/utils'
 
-function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+function Input(props: ComponentProps<'input'>) {
+  const [local, rest] = splitProps(props, ['class', 'type'])
   return (
-    <InputPrimitive
-      type={type}
+    <input
+      type={local.type}
       data-slot="input"
-      className={cn(
+      class={cn(
         'h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
-        className
+        local.class
       )}
-      {...props}
+      {...rest}
     />
   )
 }

package/src/components/ui/label.tsx

@@ -1,18 +1,17 @@
-'use client'
-
-import * as React from 'react'
+import { splitProps, type ComponentProps } from 'solid-js'
 
 import { cn } from '#lib/utils'
 
-function Label({ className, ...props }: React.ComponentProps<'label'>) {
+function Label(props: ComponentProps<'label'>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
     <label
       data-slot="label"
-      className={cn(
+      class={cn(
         'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-        className
+        local.class
       )}
-      {...props}
+      {...rest}
     />
   )
 }

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

@@ -1,37 +1,40 @@
-'use client'
-
-import { Radio as RadioPrimitive } from '@base-ui/react/radio'
-import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'
+import { RadioGroup as RadioGroupPrimitive } from '@kobalte/core/radio-group'
+import { splitProps, type ComponentProps } from 'solid-js'
 
 import { cn } from '#lib/utils'
 
-function RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {
+function RadioGroup(props: ComponentProps<typeof RadioGroupPrimitive>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
     <RadioGroupPrimitive
       data-slot="radio-group"
-      className={cn('grid w-full gap-2', className)}
-      {...props}
+      class={cn('grid w-full gap-2', local.class)}
+      {...rest}
     />
   )
 }
 
-function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
+function RadioGroupItem(props: ComponentProps<typeof RadioGroupPrimitive.Item>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
-    <RadioPrimitive.Root
+    <RadioGroupPrimitive.Item
       data-slot="radio-group-item"
-      className={cn(
+      class={cn(
         'group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary',
-        className
+        local.class
       )}
-      {...props}
+      {...rest}
     >
-      <RadioPrimitive.Indicator
-        data-slot="radio-group-indicator"
-        className="flex size-4 items-center justify-center"
-      >
-        <span className="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
-      </RadioPrimitive.Indicator>
-    </RadioPrimitive.Root>
+      <RadioGroupPrimitive.ItemInput />
+      <RadioGroupPrimitive.ItemControl class="flex size-4 items-center justify-center rounded-full">
+        <RadioGroupPrimitive.ItemIndicator
+          data-slot="radio-group-indicator"
+          class="flex size-4 items-center justify-center"
+        >
+          <span class="absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground" />
+        </RadioGroupPrimitive.ItemIndicator>
+      </RadioGroupPrimitive.ItemControl>
+    </RadioGroupPrimitive.Item>
   )
 }
 

package/src/components/ui/separator.tsx

@@ -1,19 +1,26 @@
-'use client'
-
-import { Separator as SeparatorPrimitive } from '@base-ui/react/separator'
+import { Separator as SeparatorPrimitive } from '@kobalte/core/separator'
+import { splitProps, type ComponentProps } from 'solid-js'
 
 import { cn } from '#lib/utils'
 
-function Separator({ className, orientation = 'horizontal', ...props }: SeparatorPrimitive.Props) {
+type SeparatorProps = ComponentProps<typeof SeparatorPrimitive> & {
+  orientation?: 'horizontal' | 'vertical'
+}
+
+function Separator(props: SeparatorProps) {
+  const [local, rest] = splitProps(props, ['class', 'orientation'])
+  const orientation = () => local.orientation ?? 'horizontal'
+
   return (
     <SeparatorPrimitive
       data-slot="separator"
-      orientation={orientation}
-      className={cn(
-        'shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch',
-        className
+      orientation={orientation()}
+      class={cn(
+        'shrink-0 bg-border',
+        orientation() === 'vertical' ? 'w-px self-stretch' : 'h-px w-full',
+        local.class
       )}
-      {...props}
+      {...rest}
     />
   )
 }

package/src/components/ui/skeleton.tsx

@@ -1,11 +1,14 @@
+import { splitProps, type ComponentProps } from 'solid-js'
+
 import { cn } from '#lib/utils'
 
-function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+function Skeleton(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
     <div
       data-slot="skeleton"
-      className={cn('animate-pulse rounded-md bg-muted', className)}
-      {...props}
+      class={cn('animate-pulse rounded-md bg-muted', local.class)}
+      {...rest}
     />
   )
 }

package/src/components/ui/spinner.tsx

@@ -1,14 +1,18 @@
-import { LoaderCircle } from 'lucide-react'
-import type { ComponentProps } from 'react'
+import { LoaderCircle } from 'lucide-solid'
+import { splitProps, type ComponentProps } from 'solid-js'
+
 import { cn } from '#lib/utils'
 
-function Spinner({ className, ...props }: ComponentProps<typeof LoaderCircle>) {
+type SpinnerProps = ComponentProps<typeof LoaderCircle>
+
+function Spinner(props: SpinnerProps) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
     <LoaderCircle
       role="status"
       aria-label="Loading"
-      className={cn('animate-spin', className)}
-      {...props}
+      class={cn('animate-spin', local.class)}
+      {...rest}
     />
   )
 }

package/src/components/ui/switch.tsx

@@ -1,31 +1,58 @@
-'use client'
-
-import { Switch as SwitchPrimitive } from '@base-ui/react/switch'
+import { Switch as SwitchPrimitive } from '@kobalte/core/switch'
+import { splitProps, type ComponentProps } from 'solid-js'
 
 import { cn } from '#lib/utils'
 
-function Switch({
-  className,
-  size = 'default',
-  ...props
-}: SwitchPrimitive.Root.Props & {
+type SwitchProps = ComponentProps<typeof SwitchPrimitive> & {
+  class?: string
   size?: 'sm' | 'default'
-}) {
+}
+
+function Switch(props: SwitchProps) {
+  const [local, rest] = splitProps(props, ['class', 'size', 'aria-label', 'aria-describedby'])
   return (
-    <SwitchPrimitive.Root
+    <SwitchPrimitive
       data-slot="switch"
-      data-size={size}
-      className={cn(
-        'peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50',
-        className
-      )}
-      {...props}
+      data-size={local.size ?? 'default'}
+      class={cn('peer group/switch relative inline-flex shrink-0 items-center', local.class)}
+      {...rest}
     >
-      <SwitchPrimitive.Thumb
-        data-slot="switch-thumb"
-        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+      {/* The input is the real control: let it cover the visual track so
+          pointer and keyboard interaction (and automated checks) use it
+          directly, while the styled control stays the visible surface. */}
+      <SwitchPrimitive.Input
+        aria-label={local['aria-label']}
+        aria-describedby={local['aria-describedby']}
+        style={{
+          position: 'absolute',
+          inset: '0',
+          width: '100%',
+          height: '100%',
+          margin: '0',
+          padding: '0',
+          border: '0',
+          opacity: '0',
+          cursor: 'pointer',
+          // Undo the visually-hidden clipping so the input keeps a hit area
+          // over the visual track: the input is the control.
+          clip: 'auto',
+          'clip-path': 'none',
+          overflow: 'visible',
+          'white-space': 'normal',
+          'z-index': '2',
+        }}
       />
-    </SwitchPrimitive.Root>
+      <SwitchPrimitive.Control
+        class={cn(
+          'inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 group-data-[size=default]/switch:h-[18.4px] group-data-[size=default]/switch:w-[32px] group-data-[size=sm]/switch:h-[14px] group-data-[size=sm]/switch:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 group-data-checked/switch:bg-primary group-not-data-checked/switch:bg-input dark:group-not-data-checked/switch:bg-input/80 group-data-disabled/switch:cursor-not-allowed group-data-disabled/switch:opacity-50'
+        )}
+      >
+        <SwitchPrimitive.Thumb
+          data-slot="switch-thumb"
+          class="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-checked/switch:translate-x-[calc(100%-2px)] dark:group-data-checked/switch:bg-primary-foreground dark:group-not-data-checked/switch:bg-foreground"
+        />
+      </SwitchPrimitive.Control>
+    </SwitchPrimitive>
   )
 }