@dashnex/ui 0.5.2

package/README.md

@@ -0,0 +1,522 @@
+# @dashnex/ui
+
+React UI component library for the Dashnex framework. Provides accessible Tailwind-based components (Headless UI), theme (light/dark/system), Heroicons re-export, and layout primitives for admin and app UIs.
+
+## Installation
+
+<details>
+<summary>pnpm</summary>
+
+```bash
+pnpm add @dashnex/ui
+```
+
+</details>
+
+<details>
+<summary>npm</summary>
+
+```bash
+npm install @dashnex/ui
+```
+
+</details>
+
+<details>
+<summary>yarn</summary>
+
+```bash
+yarn add @dashnex/ui
+```
+
+</details>
+
+**Usage in code**
+
+- **Client (pages, client components):** `import { Button, ThemeProvider } from '@dashnex/ui/client'`
+- **Server or tailwind-only:** `import { Button } from '@dashnex/ui'` or `import { Button } from '@dashnex/ui/tailwind'`
+
+## Exported client functions, types, services
+
+- **useTheme()** — hook; returns `{ theme, isDark, setTheme, toggleTheme, mounted }`. Use only inside `ThemeProvider`.
+
+## Exported UI components
+
+**Layout:** `AuthLayout`, `StackedLayout`, `SidebarLayout`, `Sidebar`, `SidebarHeader`, `SidebarBody`, `SidebarFooter`, `SidebarSection`, `SidebarDivider`, `SidebarSpacer`, `SidebarHeading`, `SidebarItem`, `SidebarLabel`, `Navbar`, `NavbarDivider`, `NavbarSection`, `NavbarSpacer`, `NavbarItem`, `NavbarLabel`, `StackedLayout`, `SidebarLayout`.
+
+**Forms / controls:** `Input`, `InputGroup`, `Select`, `Textarea`, `Checkbox`, `CheckboxGroup`, `CheckboxField`, `Radio`, `RadioGroup`, `RadioField`, `Switch`, `SwitchGroup`, `SwitchField`, `Fieldset`, `Legend`, `FieldGroup`, `Field`, `Label`, `Description`, `ErrorMessage`, `Combobox`, `ComboboxOption`, `ComboboxLabel`, `ComboboxDescription`, `Listbox`, `ListboxOption`, `ListboxLabel`, `ListboxDescription`.
+
+**Overlays / feedback:** `Dialog`, `DialogTitle`, `DialogDescription`, `DialogBody`, `DialogActions`, `Alert`, `AlertTitle`, `AlertDescription`, `AlertBody`, `AlertActions`, `Dropdown`, `DropdownButton`, `DropdownMenu`, `DropdownItem`, `DropdownHeader`, `DropdownSection`, `DropdownHeading`, `DropdownDivider`, `DropdownLabel`, `DropdownDescription`, `DropdownShortcut`.
+
+**Display:** `Button`, `TouchTarget`, `Link`, `Badge`, `BadgeButton`, `Avatar`, `AvatarButton`, `Text`, `TextLink`, `Strong`, `Code`, `Heading`, `Subheading`, `Divider`, `DescriptionList`, `DescriptionTerm`, `DescriptionDetails`, `Table`, `TableHead`, `TableBody`, `TableRow`, `TableHeader`, `TableCell`, `Pagination`, `PaginationPrevious`, `PaginationNext`, `PaginationList`, `PaginationPage`, `PaginationGap`.
+
+**Theme:** `ThemeProvider`, `ThemeSwitcher`.
+
+**Other:** `Loading`.
+
+<details>
+<summary>Link</summary>
+
+```tsx
+import { Link } from '@dashnex/ui/client'
+
+<Link href="/page">Go to page</Link>
+```
+
+</details>
+
+<details>
+<summary>Button — solid, outline, plain, link</summary>
+
+```tsx
+import { Button } from '@dashnex/ui/client'
+
+// Solid (default). Optional: color (e.g. 'blue', 'red', 'zinc')
+<Button color="blue">Save</Button>
+
+// Outline
+<Button outline>Cancel</Button>
+
+// Plain (minimal)
+<Button plain>Skip</Button>
+
+// As link (pass href)
+<Button href="/dashboard">Dashboard</Button>
+```
+
+</details>
+
+<details>
+<summary>Input and InputGroup</summary>
+
+```tsx
+import { Input, InputGroup } from '@dashnex/ui/client'
+
+<Input type="email" placeholder="Email" />
+
+// With leading icon (use data-slot="icon" on the icon element)
+<InputGroup>
+  <span data-slot="icon">…</span>
+  <Input type="search" placeholder="Search" />
+</InputGroup>
+```
+
+</details>
+
+<details>
+<summary>Dialog</summary>
+
+```tsx
+import { Dialog, DialogTitle, DialogDescription, DialogBody, DialogActions } from '@dashnex/ui/client'
+
+<Dialog open={open} onClose={() => setOpen(false)} size="lg">
+  <DialogTitle>Title</DialogTitle>
+  <DialogDescription>Description text.</DialogDescription>
+  <DialogBody>Content here.</DialogBody>
+  <DialogActions>
+    <Button plain onClick={() => setOpen(false)}>Cancel</Button>
+    <Button color="blue">Confirm</Button>
+  </DialogActions>
+</Dialog>
+```
+
+`size` is optional: `'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'` (default `'lg'`).
+
+</details>
+
+<details>
+<summary>Alert (modal dialog style)</summary>
+
+```tsx
+import { Alert, AlertTitle, AlertDescription, AlertBody, AlertActions } from '@dashnex/ui/client'
+
+<Alert open={open} onClose={() => setOpen(false)} size="md">
+  <AlertTitle>Alert</AlertTitle>
+  <AlertDescription>Message.</AlertDescription>
+  <AlertBody>Extra content.</AlertBody>
+  <AlertActions>
+    <Button color="blue" onClick={() => setOpen(false)}>OK</Button>
+  </AlertActions>
+</Alert>
+```
+
+`size` optional, same as Dialog.
+
+</details>
+
+<details>
+<summary>Select</summary>
+
+```tsx
+import { Select } from '@dashnex/ui/client'
+
+<Select value={value} onChange={(e) => setValue(e.target.value)}>
+  <option value="a">Option A</option>
+  <option value="b">Option B</option>
+</Select>
+```
+
+Optional: `multiple` for multi-select.
+
+</details>
+
+<details>
+<summary>Table (optional striped, dense, grid, clickable row)</summary>
+
+```tsx
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@dashnex/ui/client'
+
+<Table striped dense grid>
+  <TableHead>
+    <TableRow>
+      <TableHeader>Name</TableHeader>
+      <TableHeader>Status</TableHeader>
+    </TableRow>
+  </TableHead>
+  <TableBody>
+    <TableRow href="/item/1" title="View">
+      <TableCell>Item 1</TableCell>
+      <TableCell>Active</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+Optional props on `Table`: `bleed`, `dense`, `grid`, `striped`. Optional on `TableRow`: `href`, `target`, `title` for clickable rows.
+
+</details>
+
+<details>
+<summary>Badge and BadgeButton</summary>
+
+```tsx
+import { Badge, BadgeButton } from '@dashnex/ui/client'
+
+<Badge color="green">Active</Badge>
+
+<BadgeButton color="zinc" onClick={handleClick}>Tag</BadgeButton>
+<BadgeButton href="/tags/1" color="blue">Tag link</BadgeButton>
+```
+
+`color` optional (e.g. `'red'`, `'green'`, `'zinc'`), default `'zinc'`.
+
+</details>
+
+<details>
+<summary>Avatar and AvatarButton</summary>
+
+```tsx
+import { Avatar, AvatarButton } from '@dashnex/ui/client'
+
+<Avatar src="/photo.jpg" alt="User" />
+<Avatar initials="JD" alt="John Doe" />
+<Avatar square initials="AB" />
+
+<AvatarButton src="/photo.jpg" onClick={handleClick} />
+<AvatarButton href="/profile" initials="JD" />
+```
+
+Optional: `src`, `square`, `initials`, `alt`. As link use `href`.
+
+</details>
+
+<details>
+<summary>Dropdown</summary>
+
+```tsx
+import { Dropdown, DropdownButton, DropdownMenu, DropdownItem } from '@dashnex/ui/client'
+
+<Dropdown>
+  <DropdownButton>Actions</DropdownButton>
+  <DropdownMenu anchor="bottom">
+    <DropdownItem onClick={handleEdit}>Edit</DropdownItem>
+    <DropdownItem href="/view">View</DropdownItem>
+  </DropdownMenu>
+</Dropdown>
+```
+
+`DropdownMenu` optional `anchor`: `'bottom'` (default) or other Headless anchor values. `DropdownItem` can be button (onClick) or link (href).
+
+</details>
+
+<details>
+<summary>Combobox (searchable select)</summary>
+
+```tsx
+import { Combobox, ComboboxOption, ComboboxLabel } from '@dashnex/ui/client'
+
+const options = [{ id: '1', name: 'Alpha' }, { id: '2', name: 'Beta' }]
+
+<Combobox
+  value={selected}
+  onChange={setSelected}
+  options={options}
+  displayValue={(v) => v?.name}
+  filter={(opt, q) => opt.name.toLowerCase().includes(q.toLowerCase())}
+  placeholder="Search…"
+  aria-label="Choose option"
+>
+  {(option) => (
+    <ComboboxOption key={option.id} value={option}>
+      <ComboboxLabel>{option.name}</ComboboxLabel>
+    </ComboboxOption>
+  )}
+</Combobox>
+```
+
+`filter` is optional; default is case-insensitive match on `displayValue(option)`. `anchor` optional `'top' | 'bottom'`.
+
+</details>
+
+<details>
+<summary>Listbox (single select)</summary>
+
+```tsx
+import { Listbox, ListboxOption, ListboxLabel } from '@dashnex/ui/client'
+
+const options = [{ id: '1', name: 'One' }, { id: '2', name: 'Two' }]
+
+<Listbox value={selected} onChange={setSelected} placeholder="Select" aria-label="Choose">
+  <ListboxOption value={options[0]}>
+    <ListboxLabel>{options[0].name}</ListboxLabel>
+  </ListboxOption>
+  <ListboxOption value={options[1]}>
+    <ListboxLabel>{options[1].name}</ListboxLabel>
+  </ListboxOption>
+</Listbox>
+```
+
+</details>
+
+<details>
+<summary>Navbar and NavbarItem</summary>
+
+```tsx
+import { Navbar, NavbarItem, NavbarSpacer } from '@dashnex/ui/client'
+
+<Navbar>
+  <NavbarItem href="/" current>Home</NavbarItem>
+  <NavbarItem href="/settings">Settings</NavbarItem>
+  <NavbarSpacer />
+  <NavbarItem onClick={logout}>Log out</NavbarItem>
+</Navbar>
+```
+
+`current` optional; shows current-indicator. Use `href` for link or `onClick` for button.
+
+</details>
+
+<details>
+<summary>Pagination</summary>
+
+```tsx
+import { Pagination, PaginationPrevious, PaginationNext, PaginationList, PaginationPage, PaginationGap } from '@dashnex/ui/client'
+
+<Pagination aria-label="Page navigation">
+  <PaginationPrevious href={prevUrl} />
+  <PaginationList>
+    <PaginationPage href="/?p=1" current>1</PaginationPage>
+    <PaginationGap />
+    <PaginationPage href="/?p=5">5</PaginationPage>
+  </PaginationList>
+  <PaginationNext href={nextUrl} />
+</Pagination>
+```
+
+Use `href={null}` for disabled Previous/Next.
+
+</details>
+
+<details>
+<summary>Heading, Subheading, Text</summary>
+
+```tsx
+import { Heading, Subheading, Text, TextLink, Strong, Code } from '@dashnex/ui/client'
+
+<Heading level={1}>Page title</Heading>
+<Subheading level={2}>Section</Subheading>
+
+<Text>Body text.</Text>
+<TextLink href="/more">Link</TextLink>
+<Strong>Bold</Strong>
+<Code>code</Code>
+```
+
+`level` optional: 1–6 (Heading default 1, Subheading default 2).
+
+</details>
+
+<details>
+<summary>AuthLayout</summary>
+
+```tsx
+import { AuthLayout } from '@dashnex/ui/client'
+
+<AuthLayout>
+  <form>…</form>
+</AuthLayout>
+```
+
+</details>
+
+<details>
+<summary>StackedLayout and SidebarLayout</summary>
+
+```tsx
+import { StackedLayout, SidebarLayout, Navbar, Sidebar } from '@dashnex/ui/client'
+
+// Stacked: navbar on top, sidebar in drawer on mobile
+<StackedLayout
+  navbar={<Navbar>…</Navbar>}
+  sidebar={<Sidebar>…</Sidebar>}
+>
+  Page content
+</StackedLayout>
+
+// SidebarLayout: fixed sidebar on desktop, drawer on mobile
+<SidebarLayout navbar={…} sidebar={…}>
+  Page content
+</SidebarLayout>
+```
+
+</details>
+
+<details>
+<summary>Sidebar and SidebarItem</summary>
+
+```tsx
+import { Sidebar, SidebarHeader, SidebarBody, SidebarFooter, SidebarSection, SidebarItem, SidebarLabel } from '@dashnex/ui/client'
+
+<Sidebar>
+  <SidebarHeader>…</SidebarHeader>
+  <SidebarBody>
+    <SidebarSection>
+      <SidebarItem href="/" current><SidebarLabel>Home</SidebarLabel></SidebarItem>
+    </SidebarSection>
+  </SidebarBody>
+  <SidebarFooter>…</SidebarFooter>
+</Sidebar>
+```
+
+</details>
+
+<details>
+<summary>Divider, Fieldset, DescriptionList</summary>
+
+```tsx
+import { Divider, Fieldset, Legend, FieldGroup, Field, Label, Description, ErrorMessage } from '@dashnex/ui/client'
+import { DescriptionList, DescriptionTerm, DescriptionDetails } from '@dashnex/ui/client'
+
+<Divider soft />
+
+<Fieldset disabled={false}>
+  <Legend>Form section</Legend>
+  <FieldGroup>
+    <Field>
+      <Label>Name</Label>
+      <Input />
+      <Description>Helper text.</Description>
+      <ErrorMessage>Error text.</ErrorMessage>
+    </Field>
+  </FieldGroup>
+</Fieldset>
+
+<DescriptionList>
+  <DescriptionTerm>Label</DescriptionTerm>
+  <DescriptionDetails>Value</DescriptionDetails>
+</DescriptionList>
+```
+
+`Divider` optional `soft` (lighter border).
+
+</details>
+
+<details>
+<summary>Checkbox, Radio, Switch</summary>
+
+```tsx
+import { Checkbox, CheckboxField, CheckboxGroup, Label, Description } from '@dashnex/ui/client'
+import { Radio, RadioGroup, RadioField } from '@dashnex/ui/client'
+import { Switch, SwitchGroup, SwitchField } from '@dashnex/ui/client'
+
+<CheckboxGroup>
+  <CheckboxField>
+    <Checkbox color="dark/zinc" checked={v} onChange={setV} />
+    <Label>Option</Label>
+    <Description>Optional description.</Description>
+  </CheckboxField>
+</CheckboxGroup>
+
+<RadioGroup value={v} onChange={setV} name="choice">
+  <RadioField>
+    <Radio value="a" color="dark/zinc" />
+    <Label>A</Label>
+  </RadioField>
+</RadioGroup>
+
+<SwitchField>
+  <Switch color="dark/zinc" checked={on} onChange={setOn} />
+  <Label>Toggle</Label>
+</SwitchField>
+```
+
+`color` optional on Checkbox, Radio, Switch (e.g. `'dark/zinc'`, `'blue'`).
+
+</details>
+
+<details>
+<summary>Textarea</summary>
+
+```tsx
+import { Textarea } from '@dashnex/ui/client'
+
+<Textarea placeholder="Message" resizable />
+```
+
+`resizable` optional (default `true`).
+
+</details>
+
+<details>
+<summary>ThemeProvider and ThemeSwitcher</summary>
+
+```tsx
+import { ThemeProvider, ThemeSwitcher, useTheme } from '@dashnex/ui/client'
+
+<ThemeProvider>
+  <ThemeSwitcher />
+  <App />
+</ThemeProvider>
+
+// Anywhere under ThemeProvider
+const { theme, setTheme, toggleTheme, isDark, mounted } = useTheme()
+```
+
+</details>
+
+<details>
+<summary>Loading</summary>
+
+```tsx
+import { Loading } from '@dashnex/ui/client'
+
+<Loading />
+<Loading>Loading message…</Loading>
+```
+
+`children` optional; shows under the spinner.
+
+</details>
+
+## Exported server exports
+
+Same UI components and default export as client. Import from `@dashnex/ui` (or `@dashnex/ui/tailwind` for components only). No server-only functions or singletons.
+
+## External libraries used
+
+| Package | Purpose |
+|--------|----------|
+| `@headlessui/react` | Accessible unstyled primitives (Dialog, Menu, Listbox, Combobox, etc.) |
+| `@heroicons/react` | Icons (re-exported from `@dashnex/ui/client` as 20/solid) |
+| `clsx` | Conditional class names |
+| `framer-motion` | Layout and transition animations (e.g. NavbarItem, SidebarItem) |

package/dashnex.json

@@ -0,0 +1 @@
+{}

package/dist/client.d.ts

@@ -0,0 +1,10 @@
+export * from './components/tailwind/index.js';
+export * from './components/theme/index.js';
+export { Loading } from './components/Loading.js';
+export * from '@heroicons/react/20/solid';
+declare const _default: {
+    name: string;
+    version: string;
+    description: string;
+};
+export default _default;

package/dist/client.js

@@ -0,0 +1,12 @@
+import packageJson from '../package.json' with { type: "json" };
+import dashnexConfig from '../dashnex.json' with { type: "json" };
+export * from './components/tailwind/index.js';
+export * from './components/theme/index.js';
+export { Loading } from './components/Loading.js';
+export * from '@heroicons/react/20/solid';
+export default {
+    name: packageJson.name,
+    version: packageJson.version,
+    description: packageJson.description,
+    ...dashnexConfig,
+};

package/dist/components/Loading.d.ts

@@ -0,0 +1,3 @@
+export declare function Loading({ children }: {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/Loading.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Loading({ children }) {
+    return (_jsx("div", { className: "flex h-screen w-screen items-center justify-center", children: _jsxs("div", { className: "flex flex-col items-center gap-4", children: [_jsx("div", { className: "h-10 w-10 animate-spin rounded-full border-4 border-gray-300 border-t-blue-600 dark:border-gray-600 dark:border-t-blue-400" }), children] }) }));
+}

package/dist/components/tailwind/alert.d.ts

@@ -0,0 +1,28 @@
+import { DialogProps, DialogTitleProps, DescriptionProps } from '@headlessui/react';
+import type React from 'react';
+import { Text } from './text.js';
+declare const sizes: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+};
+export declare function Alert({ size, className, children, ...props }: {
+    size?: keyof typeof sizes;
+    className?: string;
+    children: React.ReactNode;
+} & Omit<DialogProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
+export declare function AlertTitle({ className, ...props }: {
+    className?: string;
+} & Omit<DialogTitleProps, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
+export declare function AlertDescription({ className, ...props }: {
+    className?: string;
+} & Omit<DescriptionProps<typeof Text>, 'as' | 'className'>): import("react/jsx-runtime").JSX.Element;
+export declare function AlertBody({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export declare function AlertActions({ className, ...props }: React.ComponentPropsWithoutRef<'div'>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/tailwind/alert.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog, DialogBackdrop, DialogPanel, DialogTitle, Description } from '@headlessui/react';
+import clsx from 'clsx';
+import { Text } from './text.js';
+const sizes = {
+    xs: 'sm:max-w-xs',
+    sm: 'sm:max-w-sm',
+    md: 'sm:max-w-md',
+    lg: 'sm:max-w-lg',
+    xl: 'sm:max-w-xl',
+    '2xl': 'sm:max-w-2xl',
+    '3xl': 'sm:max-w-3xl',
+    '4xl': 'sm:max-w-4xl',
+    '5xl': 'sm:max-w-5xl',
+};
+export function Alert({ size = 'md', className, children, ...props }) {
+    return (_jsxs(Dialog, { ...props, children: [_jsx(DialogBackdrop, { transition: true, className: "fixed inset-0 flex w-screen justify-center overflow-y-auto bg-zinc-950/15 px-2 py-2 transition duration-100 focus:outline-0 data-closed:opacity-0 data-enter:ease-out data-leave:ease-in sm:px-6 sm:py-8 lg:px-8 lg:py-16 dark:bg-zinc-950/50" }), _jsx("div", { className: "fixed inset-0 w-screen overflow-y-auto pt-6 sm:pt-0", children: _jsx("div", { className: "grid min-h-full grid-rows-[1fr_auto_1fr] justify-items-center p-8 sm:grid-rows-[1fr_auto_3fr] sm:p-4", children: _jsx(DialogPanel, { transition: true, className: clsx(className, sizes[size], 'row-start-2 w-full rounded-2xl bg-white p-8 shadow-lg ring-1 ring-zinc-950/10 sm:rounded-2xl sm:p-6 dark:bg-zinc-900 dark:ring-white/10 forced-colors:outline', 'transition duration-100 will-change-transform data-closed:opacity-0 data-enter:ease-out data-closed:data-enter:scale-95 data-leave:ease-in'), children: children }) }) })] }));
+}
+export function AlertTitle({ className, ...props }) {
+    return (_jsx(DialogTitle, { ...props, className: clsx(className, 'text-center text-base/6 font-semibold text-balance text-zinc-950 sm:text-left sm:text-sm/6 sm:text-wrap dark:text-white') }));
+}
+export function AlertDescription({ className, ...props }) {
+    return (_jsx(Description, { as: Text, ...props, className: clsx(className, 'mt-2 text-center text-pretty sm:text-left') }));
+}
+export function AlertBody({ className, ...props }) {
+    return _jsx("div", { ...props, className: clsx(className, 'mt-4') });
+}
+export function AlertActions({ className, ...props }) {
+    return (_jsx("div", { ...props, className: clsx(className, 'mt-6 flex flex-col-reverse items-center justify-end gap-3 *:w-full sm:mt-4 sm:flex-row sm:*:w-auto') }));
+}

package/dist/components/tailwind/auth-layout.d.ts

@@ -0,0 +1,4 @@
+import type React from 'react';
+export declare function AuthLayout({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/tailwind/auth-layout.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function AuthLayout({ children }) {
+    return (_jsx("main", { className: "flex min-h-dvh flex-col p-2", children: _jsx("div", { className: "flex grow items-center justify-center p-6 lg:rounded-lg lg:bg-white lg:p-10 lg:shadow-xs lg:ring-1 lg:ring-zinc-950/5 dark:lg:bg-zinc-900 dark:lg:ring-white/10", children: children }) }));
+}

package/dist/components/tailwind/avatar.d.ts

@@ -0,0 +1,14 @@
+import * as Headless from '@headlessui/react';
+import React from 'react';
+type AvatarProps = {
+    src?: string | null;
+    square?: boolean;
+    initials?: string;
+    alt?: string;
+    className?: string;
+};
+export declare function Avatar({ src, square, initials, alt, className, ...props }: AvatarProps & React.ComponentPropsWithoutRef<'span'>): import("react/jsx-runtime").JSX.Element;
+export declare const AvatarButton: React.ForwardRefExoticComponent<(AvatarProps & (Omit<Headless.ButtonProps<"button">, "className" | "as"> | Omit<Omit<{
+    href: string;
+} & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>, "ref">, "className">)) & React.RefAttributes<HTMLElement>>;
+export {};

package/dist/components/tailwind/avatar.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as Headless from '@headlessui/react';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import Image from 'next/image.js';
+import { TouchTarget } from './button.js';
+import { Link } from './link.js';
+export function Avatar({ src = null, square = false, initials, alt = '', className, ...props }) {
+    return (_jsxs("span", { "data-slot": "avatar", ...props, className: clsx(className, 
+        // Basic layout
+        'inline-grid shrink-0 align-middle [--avatar-radius:20%] *:col-start-1 *:row-start-1', 'outline -outline-offset-1 outline-black/10 dark:outline-white/10', 'overflow-hidden', 
+        // Border radius
+        square ? 'rounded-(--avatar-radius) *:rounded-(--avatar-radius)' : 'rounded-full *:rounded-full'), children: [initials && (_jsxs("svg", { className: "size-full fill-current p-[5%] text-[48px] font-medium uppercase select-none", viewBox: "0 0 100 100", "aria-hidden": alt ? undefined : 'true', children: [alt && _jsx("title", { children: alt }), _jsx("text", { x: "50%", y: "50%", alignmentBaseline: "middle", dominantBaseline: "middle", textAnchor: "middle", dy: ".125em", children: initials })] })), src && _jsx(Image, { className: "size-full", src: src, alt: alt, width: 100, height: 100 })] }));
+}
+export const AvatarButton = forwardRef(function AvatarButton({ src, square = false, initials, alt, className, ...props }, ref) {
+    const classes = clsx(className, square ? 'rounded-[20%]' : 'rounded-full', 'relative inline-grid focus:not-data-focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500');
+    return 'href' in props ? (_jsx(Link, { ...props, className: classes, ref: ref, children: _jsx(TouchTarget, { children: _jsx(Avatar, { src: src, square: square, initials: initials, alt: alt }) }) })) : (_jsx(Headless.Button, { ...props, className: classes, ref: ref, children: _jsx(TouchTarget, { children: _jsx(Avatar, { src: src, square: square, initials: initials, alt: alt }) }) }));
+});