@thomasfosterau/components 0.0.0-stage → 0.1.0

package/dist/ui/Tooltip.svelte.d.ts

@@ -0,0 +1,35 @@
+import { Tooltip } from 'bits-ui';
+import type { Snippet } from 'svelte';
+interface Props {
+    /** The tooltip's text. Ignored when `content` is given. */
+    text?: string | undefined;
+    /** Richer tooltip content, in place of `text`. */
+    content?: Snippet<[]> | undefined;
+    /**
+     * Preferred side of the trigger; flipped on collision.
+     * @defaultValue `'top'`
+     */
+    side?: 'top' | 'right' | 'bottom' | 'left' | undefined;
+    /**
+     * Distance in pixels from the trigger.
+     * @defaultValue `6`
+     */
+    sideOffset?: number | undefined;
+    /**
+     * Milliseconds of hover before it opens.
+     * @defaultValue `400`
+     */
+    openDelay?: number | undefined;
+    /** Whether the tooltip is open. Bindable. */
+    open?: boolean | undefined;
+    /** Extra classes on the content bubble. */
+    class?: string | undefined;
+    /** The trigger — the caller's own element, spreading `props` onto it. */
+    children: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+}
+/** Supplementary text on hover and on keyboard focus, on bits-ui’s `Tooltip`. */
+declare const Tooltip: import("svelte").Component<Props, {}, "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/ui/VisuallyHidden.svelte

@@ -0,0 +1,23 @@
+<!-- @component
+Content for assistive technology only: in the DOM and the accessibility tree, clipped out of the visual rendering.
+-->
+<!--
+  VisuallyHidden — content for assistive technology only: present in the
+  accessibility tree and in the DOM, clipped out of the visual rendering.
+
+  The canonical use is a name for something conveyed graphically — an icon-only
+  button, a star rating, a status dot — so that what a screen reader announces
+  matches what a sighted reader sees, rather than `aria-label` guessing at it.
+  Use it for content that must be READ. Content that must merely be reachable
+  (a skip link) wants `sr-only focus:not-sr-only` instead, which this component
+  supports because the caller's `class` is merged last by Svelte's class array.
+
+  The clipping itself is Tailwind's `sr-only` utility, which this package does
+  NOT ship — it comes from the consumer's Tailwind build, the same as every
+  other class here. See the README's `@source` note.
+-->
+<script lang="ts">let { children, class: className, ...rest } = $props();
+export {};
+</script>
+
+<span {...rest} class={['sr-only', className]}>{@render children()}</span>

package/dist/ui/VisuallyHidden.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLSpanElement> {
+    /** What assistive technology reads; any inline markup. */
+    children: Snippet<[]>;
+}
+/** Content for assistive technology only: in the DOM and the accessibility tree, clipped out of the visual rendering. */
+declare const VisuallyHidden: import("svelte").Component<Props, {}, "">;
+type VisuallyHidden = ReturnType<typeof VisuallyHidden>;
+export default VisuallyHidden;

package/dist/ui/colour-token.d.ts

@@ -0,0 +1,41 @@
+/**
+ * The colour-token indirection: how a component takes a colour it does not
+ * own.
+ *
+ * Some things are coloured by their subject rather than by a semantic tone —
+ * a political party, a taxon rank, a project label. The colour belongs to the
+ * consuming application, not to this library, and it is never an inline hex
+ * here: the app's theme declares one custom property per subject
+ * (`--party-alp`, `--rank-genus`, …) in **both** its light and dark themes,
+ * and hands a component the property's NAME.
+ *
+ * The helpers below turn that name into the single custom property the
+ * component's Tailwind classes read (`bg-(--badge-colour)`,
+ * `border-(--chip-colour)`), with the theme's `neutral` colour as the
+ * fallback for a token the theme has no entry for. The only inline style
+ * any component in this package emits is that one variable indirection —
+ * the colour value itself stays in the stylesheet.
+ *
+ * @module
+ */
+/** The custom property {@link Badge} binds a `colourToken` to. */
+export declare const BADGE_COLOUR_PROPERTY = "--badge-colour";
+/** The custom property {@link Chip} binds a `colourToken` to. */
+export declare const CHIP_COLOUR_PROPERTY = "--chip-colour";
+/**
+ * The inline `style` binding `property` to the theme token `token`, falling
+ * back to `--color-neutral` when the theme declares no such token.
+ *
+ * `token` is validated rather than trusted: a value that is not a custom
+ * property name is dropped entirely, so nothing a caller passes can break out
+ * of the `var()` it is interpolated into and inject further declarations.
+ *
+ * Returns `undefined` when there is no token, so a component can hand the
+ * result straight to `style` and emit no attribute at all.
+ *
+ * ```svelte
+ * <span style={colourTokenStyle(BADGE_COLOUR_PROPERTY, '--party-alp')}
+ *       class="bg-(--badge-colour)/15 border-(--badge-colour)">…</span>
+ * ```
+ */
+export declare function colourTokenStyle(property: string, token: string | undefined): string | undefined;

package/dist/ui/colour-token.js

@@ -0,0 +1,49 @@
+/**
+ * The colour-token indirection: how a component takes a colour it does not
+ * own.
+ *
+ * Some things are coloured by their subject rather than by a semantic tone —
+ * a political party, a taxon rank, a project label. The colour belongs to the
+ * consuming application, not to this library, and it is never an inline hex
+ * here: the app's theme declares one custom property per subject
+ * (`--party-alp`, `--rank-genus`, …) in **both** its light and dark themes,
+ * and hands a component the property's NAME.
+ *
+ * The helpers below turn that name into the single custom property the
+ * component's Tailwind classes read (`bg-(--badge-colour)`,
+ * `border-(--chip-colour)`), with the theme's `neutral` colour as the
+ * fallback for a token the theme has no entry for. The only inline style
+ * any component in this package emits is that one variable indirection —
+ * the colour value itself stays in the stylesheet.
+ *
+ * @module
+ */
+/** The custom property {@link Badge} binds a `colourToken` to. */
+export const BADGE_COLOUR_PROPERTY = '--badge-colour';
+/** The custom property {@link Chip} binds a `colourToken` to. */
+export const CHIP_COLOUR_PROPERTY = '--chip-colour';
+/** A valid CSS custom-property name: `--` then idents, and nothing else. */
+const CUSTOM_PROPERTY = /^--[a-z0-9_-]+$/i;
+/**
+ * The inline `style` binding `property` to the theme token `token`, falling
+ * back to `--color-neutral` when the theme declares no such token.
+ *
+ * `token` is validated rather than trusted: a value that is not a custom
+ * property name is dropped entirely, so nothing a caller passes can break out
+ * of the `var()` it is interpolated into and inject further declarations.
+ *
+ * Returns `undefined` when there is no token, so a component can hand the
+ * result straight to `style` and emit no attribute at all.
+ *
+ * ```svelte
+ * <span style={colourTokenStyle(BADGE_COLOUR_PROPERTY, '--party-alp')}
+ *       class="bg-(--badge-colour)/15 border-(--badge-colour)">…</span>
+ * ```
+ */
+export function colourTokenStyle(property, token) {
+    if (token === undefined)
+        return undefined;
+    const name = token.trim();
+    const safe = CUSTOM_PROPERTY.test(name) ? name : '--color-neutral';
+    return `${property}: var(${safe}, var(--color-neutral))`;
+}

package/dist/ui/index.d.ts

@@ -0,0 +1,44 @@
+/**
+ * ui — buttons, badges, surfaces and small interactive affordances.
+ *
+ * The family every other family builds on: `Alert` is what a form's errors
+ * surface in, `Card` is the surface a section is drawn on, `Button` is what
+ * a dialog's actions are. Import from the package barrel rather than from
+ * here — this file is the family's own index, and the public surface is
+ * `src/lib/index.ts`.
+ *
+ * One convention worth stating once: every optional prop in this family is
+ * declared `T | undefined`, not bare `T`. The workspace compiles with
+ * `exactOptionalPropertyTypes`, under which `prop?: T` rejects an explicitly
+ * passed `undefined` — so a caller forwarding its own optional prop
+ * (`<Button {tone}>` where `tone?: Tone`) would not compile. Widening the
+ * declaration is what makes these primitives composable by the other
+ * families.
+ *
+ * @module
+ */
+export { default as Alert } from './Alert.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as Button } from './Button.svelte';
+export { default as Card } from './Card.svelte';
+export { default as Chip } from './Chip.svelte';
+export { default as ConfirmButton } from './ConfirmButton.svelte';
+export { default as Disclosure } from './Disclosure.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as ExternalLink } from './ExternalLink.svelte';
+export { default as Heading } from './Heading.svelte';
+export { default as Link } from './Link.svelte';
+export { default as LinkButton } from './LinkButton.svelte';
+export { default as Menu } from './Menu.svelte';
+export { default as MenuItem } from './MenuItem.svelte';
+export { default as MenuSeparator } from './MenuSeparator.svelte';
+export { default as Popover } from './Popover.svelte';
+export { default as ShareButton } from './ShareButton.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export { default as VisuallyHidden } from './VisuallyHidden.svelte';
+export * from './colour-token.ts';
+export * from './menu-context.ts';
+export * from './slug.ts';
+export * from './tones.ts';

package/dist/ui/index.js

@@ -0,0 +1,44 @@
+/**
+ * ui — buttons, badges, surfaces and small interactive affordances.
+ *
+ * The family every other family builds on: `Alert` is what a form's errors
+ * surface in, `Card` is the surface a section is drawn on, `Button` is what
+ * a dialog's actions are. Import from the package barrel rather than from
+ * here — this file is the family's own index, and the public surface is
+ * `src/lib/index.ts`.
+ *
+ * One convention worth stating once: every optional prop in this family is
+ * declared `T | undefined`, not bare `T`. The workspace compiles with
+ * `exactOptionalPropertyTypes`, under which `prop?: T` rejects an explicitly
+ * passed `undefined` — so a caller forwarding its own optional prop
+ * (`<Button {tone}>` where `tone?: Tone`) would not compile. Widening the
+ * declaration is what makes these primitives composable by the other
+ * families.
+ *
+ * @module
+ */
+export { default as Alert } from './Alert.svelte';
+export { default as Badge } from './Badge.svelte';
+export { default as Button } from './Button.svelte';
+export { default as Card } from './Card.svelte';
+export { default as Chip } from './Chip.svelte';
+export { default as ConfirmButton } from './ConfirmButton.svelte';
+export { default as Disclosure } from './Disclosure.svelte';
+export { default as EmptyState } from './EmptyState.svelte';
+export { default as ExternalLink } from './ExternalLink.svelte';
+export { default as Heading } from './Heading.svelte';
+export { default as Link } from './Link.svelte';
+export { default as LinkButton } from './LinkButton.svelte';
+export { default as Menu } from './Menu.svelte';
+export { default as MenuItem } from './MenuItem.svelte';
+export { default as MenuSeparator } from './MenuSeparator.svelte';
+export { default as Popover } from './Popover.svelte';
+export { default as ShareButton } from './ShareButton.svelte';
+export { default as Skeleton } from './Skeleton.svelte';
+export { default as ThemeToggle } from './ThemeToggle.svelte';
+export { default as Tooltip } from './Tooltip.svelte';
+export { default as VisuallyHidden } from './VisuallyHidden.svelte';
+export * from "./colour-token.js";
+export * from "./menu-context.js";
+export * from "./slug.js";
+export * from "./tones.js";

package/dist/ui/menu-context.d.ts

@@ -0,0 +1,22 @@
+/**
+ * How a {@link MenuItem} learns which {@link Menu} it is inside.
+ *
+ * The two menu modes render entirely different markup — a bits-ui
+ * `DropdownMenu.Item` with roving focus and typeahead, or a plain anchor in a
+ * `<ul class="menu">` navigation list — but a call site writes the same
+ * `<MenuItem>` either way. The mode travels down as context rather than as a
+ * prop so a caller can never get the two out of step, and so `Menu` stays the
+ * single place the choice is made.
+ *
+ * A `MenuItem` mounted with no `Menu` above it (a list of links assembled by
+ * hand) falls back to `nav`, which is the mode that needs nothing from its
+ * parent.
+ *
+ * @module
+ */
+/** Which of the two things daisyUI calls a `menu` a `Menu` renders: a dropdown or a navigation list. */
+export type MenuMode = 'dropdown' | 'nav';
+/** Declare the mode every descendant `MenuItem` renders in. Called by `Menu`. */
+export declare function setMenuMode(mode: () => MenuMode): void;
+/** The enclosing `Menu`'s mode, or `nav` when there is no enclosing `Menu`. */
+export declare function getMenuMode(): () => MenuMode;

package/dist/ui/menu-context.js

@@ -0,0 +1,26 @@
+/**
+ * How a {@link MenuItem} learns which {@link Menu} it is inside.
+ *
+ * The two menu modes render entirely different markup — a bits-ui
+ * `DropdownMenu.Item` with roving focus and typeahead, or a plain anchor in a
+ * `<ul class="menu">` navigation list — but a call site writes the same
+ * `<MenuItem>` either way. The mode travels down as context rather than as a
+ * prop so a caller can never get the two out of step, and so `Menu` stays the
+ * single place the choice is made.
+ *
+ * A `MenuItem` mounted with no `Menu` above it (a list of links assembled by
+ * hand) falls back to `nav`, which is the mode that needs nothing from its
+ * parent.
+ *
+ * @module
+ */
+import { getContext, setContext } from 'svelte';
+const MENU_MODE_KEY = Symbol('@thomasfosterau/components:menu-mode');
+/** Declare the mode every descendant `MenuItem` renders in. Called by `Menu`. */
+export function setMenuMode(mode) {
+    setContext(MENU_MODE_KEY, mode);
+}
+/** The enclosing `Menu`'s mode, or `nav` when there is no enclosing `Menu`. */
+export function getMenuMode() {
+    return getContext(MENU_MODE_KEY) ?? (() => 'nav');
+}

package/dist/ui/slug.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Text → anchor id.
+ *
+ * Shared by {@link Heading} and anything else that has to address a section it
+ * only knows the words of. Deliberately tiny and deterministic: the same text
+ * must slug identically on the server and in the browser, or an in-page link
+ * rendered during SSR points at an id hydration then changes.
+ *
+ * @module
+ */
+/**
+ * Lower-case, strip anything that is not a word character, collapse runs of
+ * whitespace to single hyphens.
+ *
+ * ```ts
+ * slugify('Growing conditions & care') // 'growing-conditions-care'
+ * ```
+ */
+export declare function slugify(text: string): string;

package/dist/ui/slug.js

@@ -0,0 +1,25 @@
+/**
+ * Text → anchor id.
+ *
+ * Shared by {@link Heading} and anything else that has to address a section it
+ * only knows the words of. Deliberately tiny and deterministic: the same text
+ * must slug identically on the server and in the browser, or an in-page link
+ * rendered during SSR points at an id hydration then changes.
+ *
+ * @module
+ */
+/**
+ * Lower-case, strip anything that is not a word character, collapse runs of
+ * whitespace to single hyphens.
+ *
+ * ```ts
+ * slugify('Growing conditions & care') // 'growing-conditions-care'
+ * ```
+ */
+export function slugify(text) {
+    return text
+        .toLowerCase()
+        .replace(/[^\w\s-]/g, '')
+        .trim()
+        .replace(/\s+/g, '-');
+}

package/dist/ui/tones.d.ts

@@ -0,0 +1,68 @@
+/**
+ * The daisyUI semantic vocabulary and the literal class tables that map it
+ * onto each component.
+ *
+ * The tables exist because Tailwind only generates classes it can see
+ * verbatim in source: a template-string `btn-${tone}` produces nothing at
+ * build time. So every tone / variant / size class is spelled out once here
+ * as a `Record<K, string>` and looked up, never interpolated. Add a table
+ * here rather than a second copy in a component.
+ *
+ * @module
+ */
+/** daisyUI semantic colours. */
+export type Tone = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
+/** The status subset daisyUI's `alert` supports. */
+export type StatusTone = 'info' | 'success' | 'warning' | 'error';
+/** daisyUI size steps. */
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** The daisyUI `btn` styles. */
+export type ButtonVariant = 'solid' | 'outline' | 'soft' | 'dash' | 'ghost' | 'link';
+/** The daisyUI `badge` styles. */
+export type BadgeVariant = 'solid' | 'outline' | 'soft' | 'dash' | 'ghost';
+/** The daisyUI `alert` styles. */
+export type AlertVariant = 'solid' | 'soft' | 'outline' | 'dash';
+/** Literal daisyUI class per `Tone` for `Button`; a lookup table so Tailwind's scanner sees every class. */
+export declare const buttonTone: Record<Tone, string>;
+/** Literal daisyUI class per `ButtonVariant` for `Button`; a lookup table so Tailwind's scanner sees every class. */
+export declare const buttonVariant: Record<ButtonVariant, string>;
+/** Literal daisyUI class per `Size` for `Button`; a lookup table so Tailwind's scanner sees every class. */
+export declare const buttonSize: Record<Size, string>;
+/** Literal daisyUI class per `Tone` for `Badge`; a lookup table so Tailwind's scanner sees every class. */
+export declare const badgeTone: Record<Tone, string>;
+/** Literal daisyUI class per `BadgeVariant` for `Badge`; a lookup table so Tailwind's scanner sees every class. */
+export declare const badgeVariant: Record<BadgeVariant, string>;
+/** Literal daisyUI class per `Size` for `Badge`; a lookup table so Tailwind's scanner sees every class. */
+export declare const badgeSize: Record<Size, string>;
+/** Literal daisyUI class per `StatusTone` for `Alert`; a lookup table so Tailwind's scanner sees every class. */
+export declare const alertTone: Record<StatusTone, string>;
+/** Literal daisyUI class per `AlertVariant` for `Alert`; a lookup table so Tailwind's scanner sees every class. */
+export declare const alertVariant: Record<AlertVariant, string>;
+/** Literal daisyUI class per `Tone` for `ProgressBar`; a lookup table so Tailwind's scanner sees every class. */
+export declare const progressTone: Record<Tone, string>;
+/** Plain background classes, for a segment or swatch without a component prefix. */
+export declare const backgroundTone: Record<Tone, string>;
+/** Text colour classes, the foreground half of {@link backgroundTone}. */
+export declare const textTone: Record<Tone, string>;
+/** Heading levels, for any component that renders a caller-chosen heading. */
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+/** The three link weights: `primary` (coloured), `muted` and `plain` (dimmed text). */
+export type LinkVariant = 'primary' | 'muted' | 'plain';
+/** Literal daisyUI class per `LinkVariant` for `Link`; a lookup table so Tailwind's scanner sees every class. */
+export declare const linkVariant: Record<LinkVariant, string>;
+/** The daisyUI `card` border styles. */
+export type CardVariant = 'border' | 'dash' | 'plain';
+/** Literal daisyUI class per `CardVariant` for `Card`; a lookup table so Tailwind's scanner sees every class. */
+export declare const cardVariant: Record<CardVariant, string>;
+/** Literal daisyUI class per `Size` for `Card`; a lookup table so Tailwind's scanner sees every class. */
+export declare const cardSize: Record<Size, string>;
+/** The `Disclosure` expand marker: an arrow, a plus, or none. */
+export type DisclosureVariant = 'arrow' | 'plus' | 'plain';
+/** daisyUI `collapse` markers — the affordance on a native `<details>`. */
+export declare const collapseVariant: Record<DisclosureVariant, string>;
+/** The two chip steps. A chip is a dense inline unit, so it stops at `md`. */
+export type ChipSize = 'sm' | 'md';
+/** Literal gap and text-size classes per `ChipSize`; a lookup table so Tailwind's scanner sees every class. */
+export declare const chipSize: Record<ChipSize, string>;
+/** The swatch square beside a chip's label, sized to match {@link chipSize}. */
+export declare const chipSwatchSize: Record<ChipSize, string>;

package/dist/ui/tones.js

@@ -0,0 +1,150 @@
+/**
+ * The daisyUI semantic vocabulary and the literal class tables that map it
+ * onto each component.
+ *
+ * The tables exist because Tailwind only generates classes it can see
+ * verbatim in source: a template-string `btn-${tone}` produces nothing at
+ * build time. So every tone / variant / size class is spelled out once here
+ * as a `Record<K, string>` and looked up, never interpolated. Add a table
+ * here rather than a second copy in a component.
+ *
+ * @module
+ */
+/** Literal daisyUI class per `Tone` for `Button`; a lookup table so Tailwind's scanner sees every class. */
+export const buttonTone = {
+    neutral: 'btn-neutral',
+    primary: 'btn-primary',
+    secondary: 'btn-secondary',
+    accent: 'btn-accent',
+    info: 'btn-info',
+    success: 'btn-success',
+    warning: 'btn-warning',
+    error: 'btn-error',
+};
+/** Literal daisyUI class per `ButtonVariant` for `Button`; a lookup table so Tailwind's scanner sees every class. */
+export const buttonVariant = {
+    solid: '',
+    outline: 'btn-outline',
+    soft: 'btn-soft',
+    dash: 'btn-dash',
+    ghost: 'btn-ghost',
+    link: 'btn-link',
+};
+/** Literal daisyUI class per `Size` for `Button`; a lookup table so Tailwind's scanner sees every class. */
+export const buttonSize = {
+    xs: 'btn-xs',
+    sm: 'btn-sm',
+    md: 'btn-md',
+    lg: 'btn-lg',
+    xl: 'btn-xl',
+};
+/** Literal daisyUI class per `Tone` for `Badge`; a lookup table so Tailwind's scanner sees every class. */
+export const badgeTone = {
+    neutral: 'badge-neutral',
+    primary: 'badge-primary',
+    secondary: 'badge-secondary',
+    accent: 'badge-accent',
+    info: 'badge-info',
+    success: 'badge-success',
+    warning: 'badge-warning',
+    error: 'badge-error',
+};
+/** Literal daisyUI class per `BadgeVariant` for `Badge`; a lookup table so Tailwind's scanner sees every class. */
+export const badgeVariant = {
+    solid: '',
+    outline: 'badge-outline',
+    soft: 'badge-soft',
+    dash: 'badge-dash',
+    ghost: 'badge-ghost',
+};
+/** Literal daisyUI class per `Size` for `Badge`; a lookup table so Tailwind's scanner sees every class. */
+export const badgeSize = {
+    xs: 'badge-xs',
+    sm: 'badge-sm',
+    md: 'badge-md',
+    lg: 'badge-lg',
+    xl: 'badge-xl',
+};
+/** Literal daisyUI class per `StatusTone` for `Alert`; a lookup table so Tailwind's scanner sees every class. */
+export const alertTone = {
+    info: 'alert-info',
+    success: 'alert-success',
+    warning: 'alert-warning',
+    error: 'alert-error',
+};
+/** Literal daisyUI class per `AlertVariant` for `Alert`; a lookup table so Tailwind's scanner sees every class. */
+export const alertVariant = {
+    solid: '',
+    soft: 'alert-soft',
+    outline: 'alert-outline',
+    dash: 'alert-dash',
+};
+/** Literal daisyUI class per `Tone` for `ProgressBar`; a lookup table so Tailwind's scanner sees every class. */
+export const progressTone = {
+    neutral: 'progress-neutral',
+    primary: 'progress-primary',
+    secondary: 'progress-secondary',
+    accent: 'progress-accent',
+    info: 'progress-info',
+    success: 'progress-success',
+    warning: 'progress-warning',
+    error: 'progress-error',
+};
+/** Plain background classes, for a segment or swatch without a component prefix. */
+export const backgroundTone = {
+    neutral: 'bg-neutral',
+    primary: 'bg-primary',
+    secondary: 'bg-secondary',
+    accent: 'bg-accent',
+    info: 'bg-info',
+    success: 'bg-success',
+    warning: 'bg-warning',
+    error: 'bg-error',
+};
+/** Text colour classes, the foreground half of {@link backgroundTone}. */
+export const textTone = {
+    neutral: 'text-neutral',
+    primary: 'text-primary',
+    secondary: 'text-secondary',
+    accent: 'text-accent',
+    info: 'text-info',
+    success: 'text-success',
+    warning: 'text-warning',
+    error: 'text-error',
+};
+/** Literal daisyUI class per `LinkVariant` for `Link`; a lookup table so Tailwind's scanner sees every class. */
+export const linkVariant = {
+    primary: 'link link-primary link-hover',
+    muted: 'link link-hover',
+    plain: 'link link-hover text-base-content/70',
+};
+/** Literal daisyUI class per `CardVariant` for `Card`; a lookup table so Tailwind's scanner sees every class. */
+export const cardVariant = {
+    border: 'card-border',
+    dash: 'card-dash',
+    plain: '',
+};
+/** Literal daisyUI class per `Size` for `Card`; a lookup table so Tailwind's scanner sees every class. */
+export const cardSize = {
+    xs: 'card-xs',
+    sm: 'card-sm',
+    md: 'card-md',
+    lg: 'card-lg',
+    xl: 'card-xl',
+};
+/** daisyUI `collapse` markers — the affordance on a native `<details>`. */
+export const collapseVariant = {
+    arrow: 'collapse-arrow',
+    plus: 'collapse-plus',
+    plain: '',
+};
+/** Literal gap and text-size classes per `ChipSize`; a lookup table so Tailwind's scanner sees every class. */
+export const chipSize = {
+    sm: 'gap-1 text-xs',
+    md: 'gap-1.5 text-sm',
+};
+/** The swatch square beside a chip's label, sized to match {@link chipSize}. */
+export const chipSwatchSize = {
+    sm: 'size-2',
+    md: 'size-2.5',
+};