@alfakit/react 0.0.0-stage → 0.1.0

package/src/layouts/app-layout.tsx

@@ -0,0 +1,128 @@
+import {
+  hasMobilePreset,
+  hasTopbar,
+  sidebarDefaultOpen,
+  sidebarWidthStyle,
+  type BreadcrumbSchema,
+  type Width,
+} from '@alfakit/core'
+import { createElement, type CSSProperties, type ReactNode } from 'react'
+import { AppSidebar } from '../components/panel/app-sidebar'
+import { BottomNav } from '../components/panel/bottom-nav'
+import { TopbarLocaleSwitcher } from '../components/panel/locale-switcher'
+import { Slot } from '../components/panel/slot'
+import { Topbar } from '../components/panel/topbar'
+import { SidebarInset, SidebarProvider, SidebarTrigger } from '../components/ui/sidebar'
+import { useAlfakitProps, useRegistry } from '../context'
+import { cn } from '../lib/utils'
+import { TopNavLayout } from './top-nav-layout'
+
+export const MAX_WIDTHS: Record<string, string> = {
+  '3xs': 'max-w-3xs',
+  '2xs': 'max-w-2xs',
+  xs: 'max-w-xs',
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  '2xl': 'max-w-2xl',
+  '3xl': 'max-w-3xl',
+  '4xl': 'max-w-4xl',
+  '5xl': 'max-w-5xl',
+  '6xl': 'max-w-6xl',
+  '7xl': 'max-w-7xl',
+  none: 'max-w-none',
+  min: 'max-w-min',
+  max: 'max-w-max',
+  fit: 'max-w-fit',
+  prose: 'max-w-prose',
+  container: 'container',
+  'screen-sm': 'max-w-(--breakpoint-sm)',
+  'screen-md': 'max-w-(--breakpoint-md)',
+  'screen-lg': 'max-w-(--breakpoint-lg)',
+  'screen-xl': 'max-w-(--breakpoint-xl)',
+  'screen-2xl': 'max-w-(--breakpoint-2xl)',
+  full: 'max-w-full',
+  screen: 'max-w-screen',
+}
+
+export interface AppLayoutProps {
+  children: ReactNode
+  breadcrumbs?: BreadcrumbSchema[]
+  maxContentWidth?: Width | string
+}
+
+/** Sidebar + topbar shell used by every authenticated page. */
+/**
+ * Stands in for the top bar on phones when the panel has `topbar(false)`: the sidebar
+ * toggle has to stay reachable.
+ */
+export function MobileTopbar() {
+  return (
+    <header
+      data-slot="topbar"
+      data-variant="mobile"
+      className="bg-background/80 sticky top-0 z-20 flex h-12 shrink-0 items-center gap-2 border-b px-4 backdrop-blur md:hidden"
+    >
+      <SidebarTrigger className="-ms-1" />
+      <div className="ms-auto flex items-center gap-1">
+        <TopbarLocaleSwitcher />
+      </div>
+    </header>
+  )
+}
+
+export function AppLayout({ children, breadcrumbs, maxContentWidth }: AppLayoutProps) {
+  const props = useAlfakitProps()
+  const registry = useRegistry()
+  const layout = props.alfakit.theme?.design?.layout ?? 'sidebar'
+  // Replace the sidebar or top bar everywhere with createAlfakit({ components: { 'panel:sidebar': … } }).
+  const Sidebar = registry.resolve('panel:sidebar') ?? AppSidebar
+  const Bar = registry.resolve('panel:topbar') ?? Topbar
+  // The mobile preset's bottom bar (`Panel::mobile()`), hidden from `md` up.
+  const Bottom = registry.resolve('panel:bottom-nav') ?? BottomNav
+  const width = maxContentWidth ?? props.alfakit.maxContentWidth ?? '7xl'
+
+  if (layout === 'topbar') {
+    return (
+      <TopNavLayout breadcrumbs={breadcrumbs} maxContentWidth={maxContentWidth}>
+        {children}
+      </TopNavLayout>
+    )
+  }
+
+  return (
+    // The rail layout starts as icons only until the user expands it.
+    <SidebarProvider
+      defaultOpen={sidebarDefaultOpen(props.alfakitSidebarOpen, layout)}
+      style={sidebarWidthStyle(props.alfakit) as CSSProperties | undefined}
+    >
+      <Slot name="body.start" />
+      <Slot name="layout.start" />
+      {createElement(Sidebar)}
+      <SidebarInset>
+        <Slot name="topbar.before" />
+        {/* `topbar(false)`: no top bar, except a slim one with the sidebar toggle on phones. */}
+        {hasTopbar(props.alfakit) ? createElement(Bar, { breadcrumbs }) : <MobileTopbar />}
+        <Slot name="topbar.after" />
+        <Slot name="content.before" />
+        <div
+          data-slot="content"
+          className={cn(
+            'mx-auto flex w-full min-w-0 flex-1 flex-col gap-6 p-4 md:p-6',
+            MAX_WIDTHS[width] ?? 'max-w-7xl',
+          )}
+        >
+          <Slot name="content.start" />
+          {children}
+          <Slot name="content.end" />
+        </div>
+        <Slot name="content.after" />
+        <Slot name="footer" />
+      </SidebarInset>
+      {hasMobilePreset(props.alfakit) && createElement(Bottom)}
+      <Slot name="layout.end" />
+      <Slot name="body.end" />
+    </SidebarProvider>
+  )
+}

package/src/layouts/auth-layout.tsx

@@ -0,0 +1,66 @@
+import type { ReactNode } from 'react'
+import { Brand } from '../components/panel/app-sidebar'
+import { LocaleSwitcher } from '../components/panel/locale-switcher'
+import { Slot } from '../components/panel/slot'
+import { ThemeToggle } from '../components/panel/theme-toggle'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../components/ui/card'
+import { usePanel } from '../context'
+import { cn } from '../lib/utils'
+import { MAX_WIDTHS } from './app-layout'
+
+export interface AuthLayoutProps {
+  children: ReactNode
+  heading?: string
+  subheading?: string
+}
+
+/** Centered card used by login, registration, password reset and simple profile pages. */
+export function AuthLayout({ children, heading, subheading }: AuthLayoutProps) {
+  // `simplePageMaxContentWidth()` on the panel; `md` by default.
+  const width = usePanel()?.simplePageMaxContentWidth ?? 'md'
+
+  return (
+    <div className="bg-muted/40 flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+      <Slot name="simple.layout.start" />
+      <div className="absolute end-4 top-4 flex items-center gap-1">
+        <LocaleSwitcher />
+        <ThemeToggle />
+      </div>
+      <div className={cn('flex w-full flex-col gap-6', MAX_WIDTHS[width] ?? 'max-w-md')}>
+        <div className="flex justify-center">
+          <Brand />
+        </div>
+        <Slot name="auth.before" />
+        <Card>
+          <Slot name="simple.page.start" />
+          {(heading || subheading) && (
+            <CardHeader className="text-center">
+              {heading && (
+                <CardTitle role="heading" aria-level={1} className="text-xl">
+                  {heading}
+                </CardTitle>
+              )}
+              {subheading && <CardDescription>{subheading}</CardDescription>}
+            </CardHeader>
+          )}
+          <CardContent>
+            {/* The server sends each form's slots on its own page only (Slot::pageTypes()). */}
+            <Slot name="auth.login.form.before" />
+            <Slot name="auth.register.form.before" />
+            <Slot name="auth.password-reset.request.form.before" />
+            <Slot name="auth.password-reset.reset.form.before" />
+            {children}
+            <Slot name="auth.login.form.after" />
+            <Slot name="auth.register.form.after" />
+            <Slot name="auth.password-reset.request.form.after" />
+            <Slot name="auth.password-reset.reset.form.after" />
+          </CardContent>
+          <Slot name="simple.page.end" />
+        </Card>
+        <Slot name="auth.after" />
+        <Slot name="footer" />
+      </div>
+      <Slot name="simple.layout.end" />
+    </div>
+  )
+}

package/src/layouts/blank-layout.tsx

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react'
+
+export function BlankLayout({ children }: { children: ReactNode }) {
+  return <div className="min-h-svh">{children}</div>
+}

package/src/layouts/fullscreen-layout.tsx

@@ -0,0 +1,86 @@
+import type { PageSchema } from '@alfakit/core'
+import { Link } from '@inertiajs/react'
+import { LogOutIcon } from 'lucide-react'
+import type { ReactNode } from 'react'
+import { NotificationsMenu } from '../components/notifications/notifications-menu'
+import { Brand } from '../components/panel/app-sidebar'
+import { DebugPanelSlot } from '../components/panel/debug-panel-slot'
+import { TopbarLocaleSwitcher } from '../components/panel/locale-switcher'
+import { Slot } from '../components/panel/slot'
+import { ThemeToggle } from '../components/panel/theme-toggle'
+import { UserMenu } from '../components/panel/user-menu'
+import { Button } from '../components/ui/button'
+import { Separator } from '../components/ui/separator'
+import { useT } from '../context'
+import { Icon } from '../lib/icons'
+
+export interface FullscreenLayoutProps {
+  children: ReactNode
+  page?: PageSchema
+}
+
+/**
+ * `$layout = 'fullscreen'`: the whole viewport for an app screen (point of sale, kiosk,
+ * board). No sidebar or topbar; an optional slim header keeps the brand, the page title,
+ * notifications, the user menu and a way back to the panel. Toasts, modals and the debug
+ * panel work as on every other page. Replace it with `components: { 'layout:fullscreen': … }`.
+ */
+export function FullscreenLayout({ children, page }: FullscreenLayoutProps) {
+  const t = useT()
+  const header = page?.fullscreen?.header !== false
+  const exitUrl = page?.fullscreen?.exitUrl
+
+  return (
+    <div data-layout="fullscreen" className="bg-background flex h-svh min-h-0 flex-col">
+      <Slot name="body.start" />
+      <Slot name="layout.start" />
+      {header ? (
+        <header
+          data-slot="topbar"
+          data-variant="fullscreen"
+          className="bg-background flex h-12 shrink-0 items-center gap-3 border-b px-3 md:px-4"
+        >
+          <Slot name="topbar.logo.before" />
+          <Brand className="hidden shrink-0 sm:flex" />
+          <Slot name="topbar.logo.after" />
+          <Separator orientation="vertical" className="hidden h-4 sm:block" />
+          <h1 className="min-w-0 truncate text-sm font-semibold">{page?.heading ?? page?.title}</h1>
+          <Slot name="topbar.start" />
+          <div className="ms-auto flex shrink-0 items-center gap-1">
+            <Slot name="topbar.end" />
+            <NotificationsMenu />
+            <TopbarLocaleSwitcher />
+            <ThemeToggle />
+            <DebugPanelSlot />
+            <UserMenu variant="topbar" />
+            {exitUrl && (
+              <Button variant="ghost" size="sm" asChild>
+                <Link href={exitUrl} data-slot="fullscreen-exit">
+                  <Icon
+                    name="alfakit::panels.widgets.account.logout-button"
+                    fallback={LogOutIcon}
+                    className="rtl:rotate-180"
+                    aria-hidden="true"
+                  />
+                  <span className="hidden sm:inline">{t('exit_fullscreen', {}, 'Exit')}</span>
+                  <span className="sr-only sm:hidden">{t('exit_fullscreen', {}, 'Exit')}</span>
+                </Link>
+              </Button>
+            )}
+          </div>
+        </header>
+      ) : (
+        <div className="fixed end-3 bottom-3 z-40">
+          <DebugPanelSlot />
+        </div>
+      )}
+      <main data-slot="content" className="flex min-h-0 w-full min-w-0 flex-1 flex-col">
+        <Slot name="content.start" />
+        {children}
+        <Slot name="content.end" />
+      </main>
+      <Slot name="layout.end" />
+      <Slot name="body.end" />
+    </div>
+  )
+}

package/src/layouts/top-nav-layout.tsx

@@ -0,0 +1,293 @@
+import {
+  PREFETCH_CACHE_FOR,
+  hasMobilePreset,
+  type BreadcrumbSchema,
+  type NavigationGroupSchema,
+  type NavigationItemSchema,
+  type Width,
+} from '@alfakit/core'
+import { Link } from '@inertiajs/react'
+import { ChevronDownIcon, MenuIcon } from 'lucide-react'
+import { createElement, useState, type ReactNode } from 'react'
+import { NotificationsMenu } from '../components/notifications/notifications-menu'
+import { Brand } from '../components/panel/app-sidebar'
+import { BottomNav } from '../components/panel/bottom-nav'
+import { DebugPanelSlot } from '../components/panel/debug-panel-slot'
+import { GlobalSearch } from '../components/panel/global-search'
+import { TopbarLocaleSwitcher } from '../components/panel/locale-switcher'
+import { NavLabel } from '../components/panel/nav-label'
+import { Slot } from '../components/panel/slot'
+import { TenantMenu } from '../components/panel/tenant-menu'
+import { ThemeToggle } from '../components/panel/theme-toggle'
+import { Breadcrumbs } from '../components/panel/topbar'
+import { UserMenu } from '../components/panel/user-menu'
+import { Button } from '../components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '../components/ui/dropdown-menu'
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '../components/ui/sheet'
+import { useDirection, usePanel, useRegistry, useT } from '../context'
+import { extraProps } from '../lib/attributes'
+import { Icon } from '../lib/icons'
+import { NewTabHint } from '../lib/new-tab-hint'
+import { cn } from '../lib/utils'
+import { MAX_WIDTHS } from './app-layout'
+
+export interface TopNavLayoutProps {
+  children: ReactNode
+  breadcrumbs?: BreadcrumbSchema[]
+  maxContentWidth?: Width | string
+}
+
+const isActive = (item: NavigationItemSchema): boolean =>
+  Boolean(item.active || item.children?.some(isActive))
+
+function TopNavLink({ item }: { item: NavigationItemSchema }) {
+  const className =
+    'text-muted-foreground hover:text-foreground hover:bg-accent data-[active=true]:bg-accent data-[active=true]:text-foreground inline-flex h-9 shrink-0 items-center gap-2 rounded-md px-3 text-sm font-medium transition-colors [&_svg]:size-4'
+
+  if (item.children && item.children.length > 0) {
+    return (
+      <TopNavMenu
+        label={<NavLabel item={item} />}
+        icon={item.icon}
+        items={item.children}
+        active={isActive(item)}
+        attributes={item.extraAttributes}
+      />
+    )
+  }
+
+  return item.openInNewTab ? (
+    <a
+      // `NavigationItem::extraAttributes()`; `class` is merged with the link's own.
+      {...extraProps(item.extraAttributes, className)}
+      href={item.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      data-slot="topnav-link"
+    >
+      {item.icon && <Icon name={item.icon} />}
+      <NavLabel item={item} />
+      <NewTabHint />
+    </a>
+  ) : (
+    <Link
+      {...extraProps(item.extraAttributes, className)}
+      href={item.url ?? '#'}
+      prefetch
+      cacheFor={PREFETCH_CACHE_FOR}
+      data-slot="topnav-link"
+      data-active={item.active ? 'true' : undefined}
+    >
+      {item.icon && <Icon name={item.icon} />}
+      <NavLabel item={item} />
+    </Link>
+  )
+}
+
+function TopNavMenu({
+  label,
+  icon,
+  items,
+  active,
+  attributes,
+}: {
+  label: ReactNode
+  icon?: string
+  items: NavigationItemSchema[]
+  active: boolean
+  attributes?: NavigationItemSchema['extraAttributes']
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        {...extraProps(
+          attributes,
+          'text-muted-foreground hover:text-foreground hover:bg-accent data-[active=true]:bg-accent data-[active=true]:text-foreground data-[state=open]:text-foreground inline-flex h-9 shrink-0 items-center gap-1.5 rounded-md px-3 text-sm font-medium transition-colors outline-none [&_svg]:size-4',
+        )}
+        data-slot="topnav-link"
+        data-active={active ? 'true' : undefined}
+      >
+        {icon && <Icon name={icon} />}
+        {label}
+        <ChevronDownIcon className="opacity-60" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="min-w-48">
+        {items.map((item) => (
+          <DropdownMenuItem key={item.label} asChild>
+            <Link
+              {...extraProps(item.extraAttributes, cn('w-full', item.active && 'font-medium'))}
+              href={item.url ?? '#'}
+            >
+              {item.icon && <Icon name={item.icon} />}
+              <NavLabel item={item} />
+            </Link>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}
+
+function TopNavGroup({ group }: { group: NavigationGroupSchema }) {
+  // `NavigationGroup::extraTopbarAttributes()` wrap the group; `class` is merged.
+  if (group.extraTopbarAttributes) {
+    return (
+      <div
+        data-slot="topnav-group"
+        {...extraProps(group.extraTopbarAttributes, 'flex shrink-0 items-center gap-1')}
+      >
+        <TopNavGroup group={{ ...group, extraTopbarAttributes: undefined }} />
+      </div>
+    )
+  }
+
+  if (!group.label) {
+    return (
+      <>
+        {group.items.map((item) => (
+          <TopNavLink key={item.label} item={item} />
+        ))}
+      </>
+    )
+  }
+
+  return (
+    <TopNavMenu
+      label={group.label}
+      icon={group.icon}
+      items={group.items}
+      active={group.items.some(isActive)}
+    />
+  )
+}
+
+/** Vertical navigation for the mobile drawer. */
+function MobileNav({ onNavigate }: { onNavigate: () => void }) {
+  const panel = usePanel()
+
+  return (
+    <nav className="flex flex-col gap-4 overflow-y-auto p-4 text-sm">
+      {panel.navigation.map((group, index) => (
+        <div key={group.label ?? index} className="flex flex-col gap-1">
+          {group.label && (
+            <p className="text-muted-foreground px-2 text-xs font-medium">{group.label}</p>
+          )}
+          {group.items
+            .flatMap((item) => [item, ...(item.children ?? [])])
+            .map((item) => (
+              <Link
+                key={item.label}
+                href={item.url ?? '#'}
+                onClick={onNavigate}
+                data-active={item.active ? 'true' : undefined}
+                className="hover:bg-accent data-[active=true]:bg-accent flex items-center gap-2 rounded-md px-2 py-2 font-medium [&_svg]:size-4"
+              >
+                {item.icon && <Icon name={item.icon} />}
+                <NavLabel item={item} />
+              </Link>
+            ))}
+        </div>
+      ))}
+    </nav>
+  )
+}
+
+/**
+ * Navigation across the top instead of a sidebar (`layout: 'topbar'`). Ungrouped items are
+ * links; labelled groups and items with children open as dropdowns.
+ */
+export function TopNavLayout({ children, breadcrumbs, maxContentWidth }: TopNavLayoutProps) {
+  const panel = usePanel()
+  const t = useT()
+  const direction = useDirection()
+  const registry = useRegistry()
+  const [open, setOpen] = useState(false)
+  const width = MAX_WIDTHS[maxContentWidth ?? panel.maxContentWidth ?? '7xl'] ?? 'max-w-7xl'
+  const Bottom = registry.resolve('panel:bottom-nav') ?? BottomNav
+
+  return (
+    <div data-slot="topnav-layout" className="bg-background flex min-h-svh flex-col">
+      <Slot name="body.start" />
+      <Slot name="layout.start" />
+      <Slot name="topbar.before" />
+      <header
+        data-slot="topbar"
+        className="bg-background/90 supports-[backdrop-filter]:bg-background/70 sticky top-0 z-30 border-b backdrop-blur"
+      >
+        <div className={cn('mx-auto flex h-14 w-full items-center gap-3 px-4 md:px-6', width)}>
+          <Sheet open={open} onOpenChange={setOpen}>
+            <SheetTrigger asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="md:hidden"
+                aria-label={t('toggle_sidebar', {}, 'Toggle sidebar')}
+              >
+                <Icon name="alfakit::panels.topbar.open-sidebar-button" fallback={MenuIcon} />
+              </Button>
+            </SheetTrigger>
+            <SheetContent side={direction === 'rtl' ? 'right' : 'left'} className="w-72 p-0">
+              <SheetHeader className="border-b">
+                <SheetTitle asChild>
+                  <div>
+                    <Brand />
+                  </div>
+                </SheetTitle>
+              </SheetHeader>
+              <MobileNav onNavigate={() => setOpen(false)} />
+            </SheetContent>
+          </Sheet>
+          <Slot name="topbar.logo.before" />
+          <Brand className="me-2 shrink-0" />
+          <Slot name="topbar.logo.after" />
+          {panel.tenancy?.current && <Slot name="tenant-menu.before" />}
+          <TenantMenu variant="topbar" />
+          {panel.tenancy?.current && <Slot name="tenant-menu.after" />}
+          <nav
+            data-slot="topnav"
+            aria-label={t('navigation', {}, 'Navigation')}
+            className="hidden min-w-0 flex-1 items-center gap-1 self-stretch overflow-x-auto md:flex"
+          >
+            {panel.navigation.map((group, index) => (
+              <TopNavGroup key={group.label ?? `group-${index}`} group={group} />
+            ))}
+          </nav>
+          <Slot name="topbar.start" />
+          <div className="ms-auto flex shrink-0 items-center gap-1">
+            <Slot name="topbar.end" />
+            <GlobalSearch />
+            <NotificationsMenu />
+            <TopbarLocaleSwitcher />
+            <ThemeToggle />
+            <DebugPanelSlot />
+            <UserMenu variant="topbar" />
+          </div>
+        </div>
+      </header>
+      <Slot name="topbar.after" />
+      <Slot name="content.before" />
+      <main
+        data-slot="content"
+        className={cn('mx-auto flex w-full min-w-0 flex-1 flex-col gap-6 p-4 md:p-6', width)}
+      >
+        {panel.breadcrumbs && breadcrumbs && breadcrumbs.length > 0 && (
+          <Breadcrumbs items={breadcrumbs} />
+        )}
+        <Slot name="content.start" />
+        {children}
+        <Slot name="content.end" />
+      </main>
+      <Slot name="content.after" />
+      <Slot name="footer" />
+      {hasMobilePreset(panel) && createElement(Bottom)}
+      <Slot name="layout.end" />
+      <Slot name="body.end" />
+    </div>
+  )
+}

package/src/lib/attributes.ts

@@ -0,0 +1,79 @@
+import type { CSSProperties } from 'react'
+import { cn } from './utils'
+
+/** HTML attribute names that React spells differently (e.g. `tabindex` → `tabIndex`). */
+const REACT_PROP_NAMES: Record<string, string> = {
+  tabindex: 'tabIndex',
+  readonly: 'readOnly',
+  maxlength: 'maxLength',
+  minlength: 'minLength',
+  autocomplete: 'autoComplete',
+  autofocus: 'autoFocus',
+  autocapitalize: 'autoCapitalize',
+  autocorrect: 'autoCorrect',
+  spellcheck: 'spellCheck',
+  inputmode: 'inputMode',
+  enterkeyhint: 'enterKeyHint',
+  contenteditable: 'contentEditable',
+  crossorigin: 'crossOrigin',
+  colspan: 'colSpan',
+  rowspan: 'rowSpan',
+}
+
+/**
+ * Turn attributes from PHP (`extraAttributes(['class' => '…', 'style' => '…'])`) into React
+ * props: `class` is merged with the component's own classes instead of replacing them,
+ * a `style` string becomes a style object, `for` becomes `htmlFor` and other HTML names
+ * React spells differently (`tabindex`, `readonly`, …) are renamed.
+ */
+export function extraProps(
+  attributes: Record<string, unknown> | null | undefined,
+  className?: string,
+): Record<string, unknown> {
+  const {
+    class: classAttribute,
+    className: classNameAttribute,
+    style,
+    for: htmlFor,
+    ...rest
+  } = attributes ?? {}
+
+  const renamed: Record<string, unknown> = {}
+
+  for (const [name, value] of Object.entries(rest)) {
+    renamed[REACT_PROP_NAMES[name] ?? name] = value
+  }
+
+  const props: Record<string, unknown> = {
+    ...renamed,
+    className: cn(className, classAttribute as string, classNameAttribute as string) || undefined,
+  }
+
+  if (htmlFor !== undefined) props.htmlFor = htmlFor
+  if (style !== undefined) props.style = typeof style === 'string' ? parseStyle(style) : style
+
+  return props
+}
+
+export function parseStyle(style: string): CSSProperties {
+  const result: Record<string, string> = {}
+
+  for (const declaration of style.split(';')) {
+    const index = declaration.indexOf(':')
+
+    if (index === -1) continue
+
+    const property = declaration.slice(0, index).trim()
+    const value = declaration.slice(index + 1).trim()
+
+    if (!property || !value) continue
+
+    const key = property.startsWith('--')
+      ? property
+      : property.replace(/-([a-z])/g, (_, letter: string) => letter.toUpperCase())
+
+    result[key] = value
+  }
+
+  return result as CSSProperties
+}