@a4ui/core 0.37.1 → 0.38.0

package/dist/ui/PromptComposer.d.ts

@@ -10,6 +10,11 @@ export interface PromptComposerProps {
     /** Attachment labels/filenames shown as removable chips above the input. */
     attachments?: string[];
     onRemoveAttachment?: (index: number) => void;
+    /**
+     * Rich attachment slot rendered above the input (alongside the chips above).
+     * Pass `Attachment`s, ideally wrapped in an `AttachmentGroup`.
+     */
+    attachmentItems?: JSX.Element;
     /** When set, shows a paperclip button that calls this on click. */
     onAttach?: () => void;
     class?: string;

package/dist/ui/Prose.d.ts

@@ -0,0 +1,21 @@
+import { JSX, ParentProps } from 'solid-js';
+export type ProseSize = 'sm' | 'base' | 'lg';
+interface ProseProps extends ParentProps {
+    /** Body text scale. @default 'base' */
+    size?: ProseSize;
+    /** Element to render. @default 'div' */
+    as?: 'div' | 'article' | 'section';
+    class?: string;
+}
+export type { ProseProps };
+/**
+ * Typography wrapper that styles raw HTML or rendered markdown children
+ * (headings, paragraphs, `.lead`, links, quotes, lists, code, tables) with
+ * token colors. No CSS file and no typography plugin.
+ *
+ * @example
+ * ```tsx
+ * <Prose size="lg"><div innerHTML={renderedMarkdown} /></Prose>
+ * ```
+ */
+export declare function Prose(props: ProseProps): JSX.Element;

package/dist/ui/Questionnaire.d.ts

@@ -0,0 +1,71 @@
+import { JSX } from 'solid-js';
+/** A selectable choice of a `single` / `multiple` {@link QuestionnaireQuestion}. */
+export interface QuestionnaireOption {
+    value: string;
+    label: string;
+    description?: string;
+}
+/** One step of a {@link Questionnaire}. */
+export interface QuestionnaireQuestion {
+    /** Key of the answer in the submitted object. Must be unique. */
+    id: string;
+    title: string;
+    description?: string;
+    /** `single` = pick one, `multiple` = pick any, `text` = free text. */
+    type: 'single' | 'multiple' | 'text';
+    /** Choices; required for `single` and `multiple`. */
+    options?: QuestionnaireOption[];
+    /** Required questions block "Next" until answered and cannot be skipped. */
+    required?: boolean;
+    /** Placeholder of the `text` field. */
+    placeholder?: string;
+}
+/** Answers keyed by question id. Unanswered / skipped questions have no key. */
+export type QuestionnaireAnswers = Record<string, string | string[]>;
+/** Overridable UI strings (i18n). `stepOf` accepts `{current}` and `{total}`. */
+export interface QuestionnaireLabels {
+    next: string;
+    previous: string;
+    skip: string;
+    submit: string;
+    required: string;
+    stepOf: string;
+    thanks: string;
+    thanksDescription: string;
+}
+export interface QuestionnaireProps {
+    questions: QuestionnaireQuestion[];
+    /** Called once with the answers when the last step is submitted. */
+    onSubmit: (answers: QuestionnaireAnswers) => void;
+    /** Called with the full answers object after every change. */
+    onChange?: (answers: QuestionnaireAnswers) => void;
+    /** Answers to start from (read once on mount). */
+    initialAnswers?: QuestionnaireAnswers;
+    labels?: Partial<QuestionnaireLabels>;
+    /** Replaces the default "Thanks" panel shown after submit. */
+    summary?: (answers: QuestionnaireAnswers) => JSX.Element;
+    class?: string;
+}
+/**
+ * Multi-step questionnaire / survey, driven by a `questions` array: one question
+ * per step with a progress indicator, required validation (inline error linked
+ * via `aria-describedby`), Previous / Skip / Next / Submit, and a final panel.
+ *
+ * Keyboard: digits `1`-`9` pick the matching option on choice steps, `Enter`
+ * advances (in the free-text field use `Ctrl`/`Cmd` + `Enter`, since `Enter`
+ * inserts a newline there). Focus moves to the step heading on every step change.
+ * Step transitions are CSS animations, neutralised under `prefers-reduced-motion`.
+ *
+ * @example
+ * ```tsx
+ * <Questionnaire
+ *   questions={[
+ *     { id: 'role', title: 'Your role?', type: 'single', required: true,
+ *       options: [{ value: 'dev', label: 'Developer' }, { value: 'pm', label: 'Manager' }] },
+ *     { id: 'notes', title: 'Anything else?', type: 'text' },
+ *   ]}
+ *   onSubmit={(answers) => save(answers)}
+ * />
+ * ```
+ */
+export declare function Questionnaire(props: QuestionnaireProps): JSX.Element;

package/dist/ui/ScrollArea.d.ts

@@ -0,0 +1,30 @@
+import { JSX, ParentProps } from 'solid-js';
+export type ScrollAreaOrientation = 'vertical' | 'horizontal' | 'both';
+interface ScrollAreaProps extends ParentProps {
+    /** Which axis scrolls. @default 'vertical' */
+    orientation?: ScrollAreaOrientation;
+    /**
+     * Accessible name. When set, the area is exposed as a labelled `region`.
+     * Recommended whenever the content is more than decoration.
+     */
+    label?: string;
+    /** Receives the scrolling element (to read or set `scrollTop`, observe, …). */
+    ref?: (el: HTMLDivElement) => void;
+    class?: string;
+    style?: JSX.CSSProperties;
+}
+export type { ScrollAreaProps };
+/**
+ * Scrollable container with thin scrollbars tinted from the theme tokens. Give it
+ * a bounded size (`class="h-64"`, `max-h-…`, or a flex parent) — it scrolls
+ * whatever overflows. It is keyboard-focusable so the content can be scrolled
+ * with the arrow keys.
+ *
+ * @example
+ * ```tsx
+ * <ScrollArea class="h-64 rounded-xl border border-border" label="Release notes">
+ *   <div class="p-4">…long content…</div>
+ * </ScrollArea>
+ * ```
+ */
+export declare function ScrollArea(props: ScrollAreaProps): JSX.Element;

package/dist/ui/Sidebar.d.ts

@@ -0,0 +1,229 @@
+import { Accessor, JSX, ParentProps } from 'solid-js';
+export type SidebarSide = 'left' | 'right';
+export type SidebarVariant = 'sidebar' | 'floating' | 'inset';
+export type SidebarCollapsible = 'offcanvas' | 'icon' | 'none';
+interface SidebarContextValue {
+    /** Desktop expanded state. */
+    open: Accessor<boolean>;
+    setOpen: (open: boolean) => void;
+    /** Flip the active state: the drawer on mobile, the desktop panel otherwise. */
+    toggle: () => void;
+    /** True below the `md` breakpoint, where the sidebar renders inside a Drawer. */
+    isMobile: Accessor<boolean>;
+    openMobile: Accessor<boolean>;
+    setOpenMobile: (open: boolean) => void;
+    /** @internal id of the sidebar panel, for `aria-controls`. */
+    panelId: string;
+    /** @internal registered by `Sidebar` so `SidebarInset` / `SidebarRail` can adapt. */
+    config: Accessor<{
+        side: SidebarSide;
+        variant: SidebarVariant;
+        collapsible: SidebarCollapsible;
+    }>;
+    setConfig: (c: {
+        side: SidebarSide;
+        variant: SidebarVariant;
+        collapsible: SidebarCollapsible;
+    }) => void;
+}
+/** State of the nearest {@link SidebarProvider}. Throws outside one. */
+export declare function useSidebar(): Omit<SidebarContextValue, 'panelId' | 'config' | 'setConfig'>;
+interface SidebarProviderProps extends ParentProps {
+    /** Controlled desktop open state. */
+    open?: boolean;
+    /** Called with the next desktop open state (controlled or not). */
+    onOpenChange?: (open: boolean) => void;
+    /** Initial state when uncontrolled. @default true */
+    defaultOpen?: boolean;
+    /** Key toggled with Ctrl/Cmd; `false` disables the shortcut. @default 'b' */
+    shortcut?: string | false;
+    class?: string;
+}
+/**
+ * Owns the sidebar state and wraps `Sidebar` + `SidebarInset` in a flex row.
+ * Give it a bounded height (the sidebar fills it). Ctrl/Cmd+B toggles the sidebar.
+ *
+ * @example
+ * ```tsx
+ * <SidebarProvider class="h-screen">
+ *   <Sidebar collapsible="icon">…</Sidebar>
+ *   <SidebarInset>…</SidebarInset>
+ * </SidebarProvider>
+ * ```
+ */
+export declare function SidebarProvider(props: SidebarProviderProps): JSX.Element;
+interface SidebarProps extends ParentProps {
+    /** Which edge it sits on. @default 'left' */
+    side?: SidebarSide;
+    /** `sidebar` is flush, `floating` is a detached rounded panel, `inset` has no surface of its own (pair with `SidebarInset`). @default 'sidebar' */
+    variant?: SidebarVariant;
+    /** `offcanvas` slides away, `icon` shrinks to an icon rail, `none` never collapses. @default 'offcanvas' */
+    collapsible?: SidebarCollapsible;
+    /** Accessible name (and the drawer title on mobile). @default 'Navigation' */
+    label?: string;
+    class?: string;
+}
+/**
+ * The sidebar panel. Collapses per `collapsible`; below `md` it opens as a
+ * `Drawer` on the same `side` (toggled by `SidebarTrigger` / Ctrl+B).
+ *
+ * @example
+ * ```tsx
+ * <Sidebar collapsible="icon" variant="floating">
+ *   <SidebarHeader>…</SidebarHeader>
+ *   <SidebarContent>…</SidebarContent>
+ * </Sidebar>
+ * ```
+ */
+export declare function Sidebar(props: SidebarProps): JSX.Element;
+interface SidebarTriggerProps {
+    /** Accessible name. @default 'Toggle sidebar' */
+    label?: string;
+    class?: string;
+    /** Replaces the default panel icon. */
+    children?: JSX.Element;
+}
+/**
+ * Button that toggles the sidebar (the drawer on mobile). Exposes
+ * `aria-expanded` and `aria-controls` for the panel.
+ */
+export declare function SidebarTrigger(props: SidebarTriggerProps): JSX.Element;
+/**
+ * Thin hit area on the sidebar's inner edge that toggles it. Pointer-only
+ * affordance (`tabindex=-1`); keyboard users have `SidebarTrigger` and Ctrl+B.
+ * Place it as the last child of `Sidebar`.
+ */
+export declare function SidebarRail(props: {
+    class?: string;
+}): JSX.Element;
+/**
+ * Main content wrapper. With `variant="inset"` it becomes a rounded glass panel
+ * beside the sidebar; otherwise it is a plain scrolling region.
+ *
+ * @example
+ * ```tsx
+ * <SidebarInset><main>…</main></SidebarInset>
+ * ```
+ */
+export declare function SidebarInset(props: ParentProps<{
+    class?: string;
+}>): JSX.Element;
+/** Top slot (brand, switcher, search). */
+export declare function SidebarHeader(props: ParentProps<{
+    class?: string;
+}>): JSX.Element;
+/** Bottom slot (account, settings). */
+export declare function SidebarFooter(props: ParentProps<{
+    class?: string;
+}>): JSX.Element;
+/** Scrolling middle region, built on `ScrollArea`. */
+export declare function SidebarContent(props: ParentProps<{
+    class?: string;
+}>): JSX.Element;
+/** A labelled section of the sidebar. */
+export declare function SidebarGroup(props: ParentProps<{
+    class?: string;
+}>): JSX.Element;
+/** Small uppercase heading of a group; hidden when the rail is icon-collapsed. */
+export declare function SidebarGroupLabel(props: ParentProps<{
+    class?: string;
+}>): JSX.Element;
+interface SidebarGroupActionProps extends ParentProps {
+    /** Required accessible name (the action is usually just an icon). */
+    label: string;
+    onClick?: (e: MouseEvent) => void;
+    class?: string;
+}
+/** Icon button aligned to the right of the group label. */
+export declare function SidebarGroupAction(props: SidebarGroupActionProps): JSX.Element;
+/** Wrapper for a group's items. */
+export declare function SidebarGroupContent(props: ParentProps<{
+    class?: string;
+}>): JSX.Element;
+/** `<ul>` of menu items. */
+export declare function SidebarMenu(props: ParentProps<{
+    class?: string;
+}>): JSX.Element;
+/** `<li>` of a menu; anchors `SidebarMenuAction` and `SidebarMenuBadge`. */
+export declare function SidebarMenuItem(props: ParentProps<{
+    class?: string;
+}>): JSX.Element;
+type MenuButtonSize = 'sm' | 'default' | 'lg';
+interface SidebarMenuButtonProps extends ParentProps {
+    /** Marks the current page: sets `aria-current="page"` and the highlight. */
+    active?: boolean;
+    /** Renders a link. Otherwise a `<button>` (use `onClick`). */
+    href?: string;
+    onClick?: (e: MouseEvent) => void;
+    /** Shown as a tooltip (beside the icon) only while the rail is icon-collapsed. */
+    tooltip?: JSX.Element;
+    size?: MenuButtonSize;
+    class?: string;
+}
+/**
+ * Main navigation row. Pass `href` for a link or `onClick` for an action;
+ * `active` sets `aria-current="page"`. Put the label in a `<span>` after the icon
+ * so it can collapse; with `collapsible="icon"` the `tooltip` appears on
+ * hover/focus and the span stays as the accessible name.
+ *
+ * @example
+ * ```tsx
+ * <SidebarMenuButton href="#/inbox" active tooltip="Inbox"><Inbox /><span>Inbox</span></SidebarMenuButton>
+ * ```
+ */
+export declare function SidebarMenuButton(props: SidebarMenuButtonProps): JSX.Element;
+/** Icon button to the right of a `SidebarMenuButton` (add, more…). Needs a `label`. */
+export declare function SidebarMenuAction(props: ParentProps<{
+    label: string;
+    onClick?: (e: MouseEvent) => void;
+    showOnHover?: boolean;
+    class?: string;
+}>): JSX.Element;
+/** Count / status pill at the right edge of a menu item. */
+export declare function SidebarMenuBadge(props: ParentProps<{
+    class?: string;
+}>): JSX.Element;
+interface SidebarMenuSubProps extends ParentProps {
+    /** Text of the row that expands the submenu. */
+    label: string;
+    /** Icon shown before the label. */
+    icon?: JSX.Element;
+    /** Controlled expanded state. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Initial state when uncontrolled. @default false */
+    defaultOpen?: boolean;
+    class?: string;
+}
+/**
+ * Collapsible nested menu: a toggle row (`aria-expanded` / `aria-controls`) and an
+ * indented list of `SidebarMenuSubItem`. Use inside a `SidebarMenuItem`. In the icon
+ * rail the toggle expands the sidebar first, then the submenu.
+ *
+ * @example
+ * ```tsx
+ * <SidebarMenuItem>
+ *   <SidebarMenuSub label="Projects" icon={<Folder />}>
+ *     <SidebarMenuSubItem><SidebarMenuSubButton href="#/a">Orbit</SidebarMenuSubButton></SidebarMenuSubItem>
+ *   </SidebarMenuSub>
+ * </SidebarMenuItem>
+ * ```
+ */
+export declare function SidebarMenuSub(props: SidebarMenuSubProps): JSX.Element;
+/** `<li>` of a submenu. */
+export declare function SidebarMenuSubItem(props: ParentProps<{
+    class?: string;
+}>): JSX.Element;
+/** Link (`href`) or button row inside a submenu; `active` sets `aria-current="page"`. */
+export declare function SidebarMenuSubButton(props: ParentProps<{
+    active?: boolean;
+    href?: string;
+    onClick?: (e: MouseEvent) => void;
+    class?: string;
+}>): JSX.Element;
+/** Loading placeholder shaped like a menu row. Decorative (`aria-hidden`). */
+export declare function SidebarMenuSkeleton(props: {
+    showIcon?: boolean;
+    class?: string;
+}): JSX.Element;
+export type { SidebarProps, SidebarProviderProps, SidebarTriggerProps, SidebarGroupActionProps, SidebarMenuButtonProps, SidebarMenuSubProps, };

package/dist/ui/SiteFooter.d.ts

@@ -0,0 +1,39 @@
+import { JSX } from 'solid-js';
+import { SectionLink } from './internal/sectionKit';
+import { SocialNetwork } from './internal/socialIcons';
+export type { SocialNetwork };
+/** A titled group of links in a {@link SiteFooter}. */
+export interface FooterColumn {
+    title: string;
+    links: SectionLink[];
+}
+/** A social profile link in a {@link SiteFooter}. */
+export interface SocialLink {
+    network: SocialNetwork;
+    href: string;
+}
+export interface SiteFooterProps {
+    brand: string;
+    /** One line under the brand. */
+    tagline?: string;
+    columns?: FooterColumn[];
+    social?: SocialLink[];
+    /** Copyright line. Defaults to `© <current year> <brand>`. */
+    copyright?: string;
+    class?: string;
+}
+/**
+ * Site footer: brand and tagline, columns of links, social network icons and a
+ * copyright line on a glass band. Columns wrap to two per row on phones.
+ *
+ * @example
+ * ```tsx
+ * <SiteFooter
+ *   brand="Northwind"
+ *   tagline="Websites for small businesses."
+ *   columns={[{ title: 'Company', links: [{ label: 'About', href: '/about' }] }]}
+ *   social={[{ network: 'instagram', href: 'https://instagram.com/northwind' }]}
+ * />
+ * ```
+ */
+export declare function SiteFooter(props: SiteFooterProps): JSX.Element;

package/dist/ui/SiteNav.d.ts

@@ -0,0 +1,35 @@
+import { JSX } from 'solid-js';
+import { SectionLink } from './internal/sectionKit';
+export interface SiteNavProps {
+    /** Brand name shown at the left; also the home link's text. */
+    brand: string;
+    /** Logo image URL shown before the brand name. */
+    logo?: string;
+    /** Where the brand links to. Defaults to `'/'`. */
+    brandHref?: string;
+    /** Navigation links, in order. */
+    links: SectionLink[];
+    /** Call-to-action button at the right (and at the bottom of the mobile menu). */
+    cta?: SectionLink;
+    /** Stick to the top of the viewport while scrolling. Defaults to `true`. */
+    sticky?: boolean;
+    /** Accessible label of the mobile menu button. Defaults to `'Menu'`. */
+    menuLabel?: string;
+    class?: string;
+}
+/**
+ * Top navigation bar for a marketing site: brand (with optional logo), links and
+ * a call-to-action on a frosted glass bar. Below the `md` breakpoint the links
+ * collapse into a menu button that opens a panel under the bar; it closes on
+ * Escape, on outside click and when a link is followed.
+ *
+ * @example
+ * ```tsx
+ * <SiteNav
+ *   brand="Northwind"
+ *   links={[{ label: 'Features', href: '#features' }, { label: 'Pricing', href: '#pricing' }]}
+ *   cta={{ label: 'Get started', href: '/signup' }}
+ * />
+ * ```
+ */
+export declare function SiteNav(props: SiteNavProps): JSX.Element;

package/dist/ui/TeamGrid.d.ts

@@ -0,0 +1,33 @@
+import { JSX } from 'solid-js';
+/** One person rendered by {@link TeamGrid}. */
+export interface TeamMember {
+    name: string;
+    role: string;
+    /** Photo URL. Falls back to the name's initials. */
+    photo?: string;
+    /** One or two sentences about the person. */
+    bio?: string;
+}
+export interface TeamGridProps {
+    title?: string;
+    subtitle?: string;
+    members: TeamMember[];
+    /** Columns on wide screens. Defaults to `3`. */
+    columns?: 2 | 3 | 4;
+    /** Anchor id for in-page navigation. */
+    id?: string;
+    class?: string;
+}
+/**
+ * Team section: a responsive grid of glass cards with each person's photo (or
+ * initials), name, role and an optional short bio.
+ *
+ * @example
+ * ```tsx
+ * <TeamGrid
+ *   title="Our team"
+ *   members={[{ name: 'Ana Ruiz', role: 'Founder', bio: 'Ten years building for small shops.' }]}
+ * />
+ * ```
+ */
+export declare function TeamGrid(props: TeamGridProps): JSX.Element;

package/dist/ui/Testimonials.d.ts

@@ -0,0 +1,37 @@
+import { JSX } from 'solid-js';
+/** One quote rendered by {@link Testimonials}. */
+export interface TestimonialItem {
+    quote: string;
+    /** Who said it. */
+    name: string;
+    /** Job title and/or company, e.g. `"CTO, Northwind"`. */
+    role?: string;
+    /** Avatar image URL. Falls back to the name's initials. */
+    avatar?: string;
+}
+/** Arrangement of {@link Testimonials}. */
+export type TestimonialsLayout = 'grid' | 'marquee';
+export interface TestimonialsProps {
+    title?: string;
+    subtitle?: string;
+    items: TestimonialItem[];
+    /** `'grid'` (default) or a horizontally scrolling `'marquee'` (still under reduced motion). */
+    layout?: TestimonialsLayout;
+    /** Anchor id for in-page navigation. */
+    id?: string;
+    class?: string;
+}
+/**
+ * Social-proof section of customer quotes, each with the person's name, role
+ * and avatar (initials when no image). Lay them out as a responsive grid of
+ * glass cards, or as a marquee that scrolls sideways and pauses on hover.
+ *
+ * @example
+ * ```tsx
+ * <Testimonials
+ *   title="Loved by small teams"
+ *   items={[{ quote: 'We launched in two days.', name: 'Ana Ruiz', role: 'Founder, Brisa' }]}
+ * />
+ * ```
+ */
+export declare function Testimonials(props: TestimonialsProps): JSX.Element;

package/dist/ui/internal/sectionKit.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'solid-js';
+/** A plain link used by the page-section blocks: visible text plus a URL. */
+export interface SectionLink {
+    /** Visible text. */
+    label: string;
+    /** Destination URL, in-page anchor (`#features`) or `mailto:`/`tel:` link. */
+    href: string;
+}
+interface SectionHeadingProps {
+    eyebrow?: string;
+    title?: string;
+    subtitle?: string;
+    /** Heading level of `title`. Defaults to `2`. */
+    level?: 1 | 2;
+    align?: 'center' | 'left';
+    class?: string;
+}
+/** Eyebrow + title + subtitle stack. Renders nothing when all three are empty. */
+export declare function SectionHeading(props: SectionHeadingProps): JSX.Element;
+/** Up-to-two-letter initials for avatar fallbacks. */
+export declare function initials(name: string): string;
+export {};

package/dist/ui/internal/socialIcons.d.ts

@@ -0,0 +1,9 @@
+import { JSX } from 'solid-js';
+/** Social networks {@link SiteFooter} can link to. */
+export type SocialNetwork = 'x' | 'instagram' | 'facebook' | 'linkedin' | 'github' | 'youtube' | 'tiktok';
+/** Human-readable network names, used as accessible link labels. */
+export declare const SOCIAL_LABEL: Record<SocialNetwork, string>;
+export declare function SocialIcon(props: {
+    network: SocialNetwork;
+    class?: string;
+}): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.37.1",
+  "version": "0.38.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",
@@ -30,6 +30,7 @@
   "files": [
     "dist",
     "preset.js",
+    "preset.d.ts",
     "src/index.ts",
     "src/ui",
     "src/lib",
@@ -63,6 +64,7 @@
       "default": "./dist/charts.js"
     },
     "./preset": {
+      "types": "./preset.d.ts",
       "import": "./preset.js",
       "default": "./preset.js"
     },
@@ -78,7 +80,7 @@
   "engines": {
     "node": ">=20"
   },
-  "packageManager": "npm@10.9.3",
+  "packageManager": "npm@10.9.9",
   "publishConfig": {
     "access": "public"
   },
@@ -116,39 +118,49 @@
     ]
   },
   "peerDependencies": {
-    "solid-js": "^1.9.13"
+    "solid-js": "^1.9.16",
+    "tailwindcss": "^3.4.0"
   },
   "dependencies": {
-    "@kobalte/core": "^0.13.12",
-    "@tanstack/solid-virtual": "^3.13.33",
+    "@kobalte/core": "^0.13.14",
+    "@tanstack/solid-virtual": "^3.13.51",
     "clsx": "^2.1.1",
-    "lucide-solid": "^1.23.0",
-    "motion": "^12.42.2",
-    "tailwind-merge": "^3.6.0"
+    "lucide-solid": "^1.65.0",
+    "motion": "^14.9.0",
+    "tailwind-merge": "^3.7.0"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.12.1",
-    "@eslint/js": "^9.39.5",
-    "@playwright/test": "^1.61.1",
+    "@axe-core/playwright": "^4.14.0",
+    "@eslint/js": "^10.0.1",
+    "@playwright/test": "^1.64.1",
     "@solidjs/testing-library": "^0.8.10",
-    "@testing-library/jest-dom": "^6.9.1",
-    "axe-core": "^4.12.1",
-    "eslint": "^9.39.5",
+    "@testing-library/jest-dom": "^7.0.1",
+    "axe-core": "^4.14.0",
+    "eslint": "^10.14.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-solid": "^0.14.5",
+    "eslint-plugin-solid": "^0.18.1",
+    "globals": "^17.13.0",
     "husky": "^9.1.7",
-    "jsdom": "^29.1.1",
-    "lint-staged": "^16.4.0",
-    "marked": "^18.0.6",
-    "playwright-core": "^1.61.1",
-    "prettier": "^3.9.5",
+    "jsdom": "^30.1.3",
+    "lint-staged": "^17.6.0",
+    "marked": "^18.1.2",
+    "playwright-core": "^1.64.1",
+    "prettier": "^3.9.10",
     "solid-element": "^1.9.2",
     "tailwindcss": "^3.4.19",
-    "typescript": "^5.6.0",
-    "typescript-eslint": "^8.64.0",
-    "vite": "^6.0.0",
-    "vite-plugin-dts": "^4.3.0",
-    "vite-plugin-solid": "^2.11.12",
-    "vitest": "^4.1.10"
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.72.1",
+    "vite": "^8.3.5",
+    "vite-plugin-dts": "^5.1.2",
+    "vite-plugin-solid": "^2.11.15",
+    "vitest": "^5.0.5"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
+  },
+  "overrides": {
+    "minimatch": "^11.0.3"
   }
 }