@thomasfosterau/components 0.0.0 → 0.2.0

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/toggle-classes.d.ts

@@ -0,0 +1,39 @@
+/**
+ * The pressed / unpressed look `ToggleButton` and `ToggleGroup` share, and the `ToggleGroup` item type.
+ *
+ * Pressed is never colour alone: the unpressed `variant` (ghost, outline…)
+ * is dropped for a filled tone plus daisyUI's `btn-active`, so the two
+ * states differ in fill and depth as well as hue.
+ *
+ * @module
+ */
+import type { Snippet } from 'svelte';
+import { type ButtonVariant, type Tone } from './tones.ts';
+/** The classes of a toggle in `pressed` state, besides `btn` and the size. */
+export declare function toggleClasses(pressed: boolean, tone: Tone, variant: ButtonVariant): string;
+/** One item of a `ToggleGroup`. */
+export interface ToggleGroupItem<Value extends string = string> {
+    readonly value: Value;
+    /** The item's accessible name, shown unless `iconOnly`. */
+    readonly label: string;
+    /** Leading icon. */
+    readonly icon?: Snippet<[]> | undefined;
+    /** Hide the label visually; it stays the accessible name. */
+    readonly iconOnly?: boolean | undefined;
+    readonly disabled?: boolean | undefined;
+}
+/**
+ * The two writers bits-ui's toggle-group `bind:value` needs, for single and
+ * multiple mode. In single mode `''` (the selected item pressed off) is
+ * refused when `required()`. Otherwise the value goes to `assign` and then
+ * to `notify()`. `ToggleGroup` and `ToolbarToggleGroup` share it, so
+ * `required` means the same in both.
+ */
+export declare function toggleSetters<V extends string>(options: {
+    readonly required: () => boolean;
+    readonly assign: (value: V | '' | V[]) => void;
+    readonly notify: () => ((value: never) => void) | undefined;
+}): {
+    readonly single: (next: string) => void;
+    readonly multiple: (next: string[]) => void;
+};

package/dist/ui/toggle-classes.js

@@ -0,0 +1,36 @@
+/**
+ * The pressed / unpressed look `ToggleButton` and `ToggleGroup` share, and the `ToggleGroup` item type.
+ *
+ * Pressed is never colour alone: the unpressed `variant` (ghost, outline…)
+ * is dropped for a filled tone plus daisyUI's `btn-active`, so the two
+ * states differ in fill and depth as well as hue.
+ *
+ * @module
+ */
+import { buttonTone, buttonVariant } from "./tones.js";
+/** The classes of a toggle in `pressed` state, besides `btn` and the size. */
+export function toggleClasses(pressed, tone, variant) {
+    return pressed ? `${buttonTone[tone]} btn-active` : buttonVariant[variant];
+}
+/**
+ * The two writers bits-ui's toggle-group `bind:value` needs, for single and
+ * multiple mode. In single mode `''` (the selected item pressed off) is
+ * refused when `required()`. Otherwise the value goes to `assign` and then
+ * to `notify()`. `ToggleGroup` and `ToolbarToggleGroup` share it, so
+ * `required` means the same in both.
+ */
+export function toggleSetters(options) {
+    // SAFETY: bits-ui only ever reports values of the group's own items, or ''.
+    const write = (next) => {
+        options.assign(next);
+        options.notify()?.(next);
+    };
+    return {
+        single: (next) => {
+            if (options.required() && next === '')
+                return;
+            write(next);
+        },
+        multiple: (next) => write(next),
+    };
+}

package/dist/ui/tones.d.ts

@@ -0,0 +1,103 @@
+/**
+ * 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>;
+/**
+ * Literal daisyUI class per `Tone` for `Steps`; a lookup table so Tailwind's scanner sees every class.
+ * Two adjacent toned steps colour the connector between them too.
+ */
+export declare const stepTone: Record<Tone, string>;
+/**
+ * Literal daisyUI class per `Tone` for `Slider`; a lookup table so Tailwind's scanner sees every class.
+ * Each sets `color` (the fill, read as `currentColor`) and `--range-thumb` (the thumb face).
+ */
+export declare const rangeTone: Record<Tone, string>;
+/** Where a `Divider`'s label sits along the rule. */
+export type DividerAlign = 'start' | 'center' | 'end';
+/** Literal daisyUI class per `Tone` for `Divider`; a lookup table so Tailwind's scanner sees every class. */
+export declare const dividerTone: Record<Tone, string>;
+/** Literal daisyUI class per `DividerAlign` for `Divider`; a lookup table so Tailwind's scanner sees every class. */
+export declare const dividerAlign: Record<DividerAlign, string>;
+/**
+ * Literal daisyUI class per rule direction for `Divider`. daisyUI names the
+ * LAYOUT, not the rule: `divider-horizontal` sits between side-by-side items
+ * and so draws a vertical rule. This table hides the inversion behind the
+ * direction the rule actually runs.
+ */
+export declare const dividerOrientation: Record<'horizontal' | 'vertical', string>;
+/** The daisyUI `loading` shapes `Spinner` draws. */
+export type SpinnerVariant = 'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity';
+/** Literal daisyUI class per `SpinnerVariant` for `Spinner`; a lookup table so Tailwind's scanner sees every class. */
+export declare const loadingVariant: Record<SpinnerVariant, string>;
+/** Literal daisyUI class per `Size` for `Spinner`; a lookup table so Tailwind's scanner sees every class. */
+export declare const loadingSize: Record<Size, 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>;
+/** Which side the items behind a `Stack`'s top item peek out from. */
+export type StackDirection = 'top' | 'bottom' | 'start' | 'end';
+/** Literal daisyUI class per `StackDirection` for `Stack`; a lookup table so Tailwind's scanner sees every class. */
+export declare const stackDirection: Record<StackDirection, string>;
+/** Literal daisyUI class per `Tone` for `ChatBubble`; a lookup table so Tailwind's scanner sees every class. */
+export declare const chatBubbleTone: Record<Tone, string>;

package/dist/ui/tones.js

@@ -0,0 +1,240 @@
+/**
+ * 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',
+};
+/**
+ * Literal daisyUI class per `Tone` for `Steps`; a lookup table so Tailwind's scanner sees every class.
+ * Two adjacent toned steps colour the connector between them too.
+ */
+export const stepTone = {
+    neutral: 'step-neutral',
+    primary: 'step-primary',
+    secondary: 'step-secondary',
+    accent: 'step-accent',
+    info: 'step-info',
+    success: 'step-success',
+    warning: 'step-warning',
+    error: 'step-error',
+};
+/**
+ * Literal daisyUI class per `Tone` for `Slider`; a lookup table so Tailwind's scanner sees every class.
+ * Each sets `color` (the fill, read as `currentColor`) and `--range-thumb` (the thumb face).
+ */
+export const rangeTone = {
+    neutral: 'range-neutral',
+    primary: 'range-primary',
+    secondary: 'range-secondary',
+    accent: 'range-accent',
+    info: 'range-info',
+    success: 'range-success',
+    warning: 'range-warning',
+    error: 'range-error',
+};
+/** Literal daisyUI class per `Tone` for `Divider`; a lookup table so Tailwind's scanner sees every class. */
+export const dividerTone = {
+    neutral: 'divider-neutral',
+    primary: 'divider-primary',
+    secondary: 'divider-secondary',
+    accent: 'divider-accent',
+    info: 'divider-info',
+    success: 'divider-success',
+    warning: 'divider-warning',
+    error: 'divider-error',
+};
+/** Literal daisyUI class per `DividerAlign` for `Divider`; a lookup table so Tailwind's scanner sees every class. */
+export const dividerAlign = {
+    start: 'divider-start',
+    center: '',
+    end: 'divider-end',
+};
+/**
+ * Literal daisyUI class per rule direction for `Divider`. daisyUI names the
+ * LAYOUT, not the rule: `divider-horizontal` sits between side-by-side items
+ * and so draws a vertical rule. This table hides the inversion behind the
+ * direction the rule actually runs.
+ */
+export const dividerOrientation = {
+    horizontal: 'divider-vertical',
+    vertical: 'divider-horizontal',
+};
+/** Literal daisyUI class per `SpinnerVariant` for `Spinner`; a lookup table so Tailwind's scanner sees every class. */
+export const loadingVariant = {
+    spinner: 'loading-spinner',
+    dots: 'loading-dots',
+    ring: 'loading-ring',
+    ball: 'loading-ball',
+    bars: 'loading-bars',
+    infinity: 'loading-infinity',
+};
+/** Literal daisyUI class per `Size` for `Spinner`; a lookup table so Tailwind's scanner sees every class. */
+export const loadingSize = {
+    xs: 'loading-xs',
+    sm: 'loading-sm',
+    md: 'loading-md',
+    lg: 'loading-lg',
+    xl: 'loading-xl',
+};
+/** 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',
+};
+/** Literal daisyUI class per `StackDirection` for `Stack`; a lookup table so Tailwind's scanner sees every class. */
+export const stackDirection = {
+    top: 'stack-top',
+    bottom: 'stack-bottom',
+    start: 'stack-start',
+    end: 'stack-end',
+};
+/** Literal daisyUI class per `Tone` for `ChatBubble`; a lookup table so Tailwind's scanner sees every class. */
+export const chatBubbleTone = {
+    neutral: 'chat-bubble-neutral',
+    primary: 'chat-bubble-primary',
+    secondary: 'chat-bubble-secondary',
+    accent: 'chat-bubble-accent',
+    info: 'chat-bubble-info',
+    success: 'chat-bubble-success',
+    warning: 'chat-bubble-warning',
+    error: 'chat-bubble-error',
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://www.schemastore.org/package",
   "name": "@thomasfosterau/components",
-  "version": "0.0.0",
+  "version": "0.2.0",
   "private": false,
   "description": "Accessible Svelte 5 UI primitives — Tailwind CSS 4 and daisyUI 5 for styling, bits-ui for interaction, every string a prop",
   "keywords": [
@@ -54,6 +54,16 @@
       "svelte": "./dist/tips/index.js",
       "default": "./dist/tips/index.js"
     },
+    "./dates": {
+      "types": "./dist/fields/dates.d.ts",
+      "svelte": "./dist/fields/dates.js",
+      "default": "./dist/fields/dates.js"
+    },
+    "./hotkeys": {
+      "types": "./dist/hotkeys/index.d.ts",
+      "svelte": "./dist/hotkeys/index.js",
+      "default": "./dist/hotkeys/index.js"
+    },
     "./seo": {
       "types": "./dist/seo/index.d.ts",
       "svelte": "./dist/seo/index.js",
@@ -64,37 +74,43 @@
       "svelte": "./dist/forms/entity-form.js",
       "default": "./dist/forms/entity-form.js"
     },
+    "./context-menu": {
+      "types": "./dist/ui/context-menu.d.ts",
+      "svelte": "./dist/ui/context-menu.js",
+      "default": "./dist/ui/context-menu.js"
+    },
     "./theme.css": "./dist/theme.css"
   },
   "dependencies": {
-    "@internationalized/date": "catalog:",
-    "@lucide/svelte": "catalog:",
-    "bits-ui": "catalog:"
+    "@internationalized/date": "^3.8.1",
+    "@lucide/svelte": "^1.69.0",
+    "bits-ui": "^2.20.2"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "catalog:",
-    "@storybook/addon-svelte-csf": "catalog:",
-    "@storybook/sveltekit": "catalog:",
-    "@sveltejs/kit": "catalog:",
-    "@sveltejs/package": "catalog:",
-    "@sveltejs/vite-plugin-svelte": "catalog:",
-    "@tailwindcss/vite": "catalog:",
-    "@testing-library/jest-dom": "catalog:",
-    "@thomasfosterau/effect-forms-svelte": "catalog:",
-    "@types/node": "catalog:",
-    "@vitest/browser-playwright": "catalog:",
-    "daisyui": "catalog:",
-    "effect": "catalog:",
-    "playwright": "catalog:",
-    "storybook": "catalog:",
-    "svelte": "catalog:",
-    "svelte-check": "catalog:",
-    "tailwindcss": "catalog:",
-    "vitest-browser-svelte": "catalog:"
+    "@storybook/addon-a11y": "^10.6.5",
+    "@storybook/addon-svelte-csf": "^5.1.6",
+    "@storybook/sveltekit": "^10.6.5",
+    "@sveltejs/kit": "3.1.1",
+    "@sveltejs/package": "3.0.2",
+    "@sveltejs/vite-plugin-svelte": "^7.3.1",
+    "@tailwindcss/vite": "^4.3.3",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@thomasfosterau/effect-forms-svelte": "^0.3.1",
+    "@types/node": "^26.6.6",
+    "@vitest/browser-playwright": "5.0.5",
+    "daisyui": "^5.7.50",
+    "effect": "4.1.2",
+    "playwright": "1.64.1",
+    "storybook": "^10.6.5",
+    "svelte": "^5.57.3",
+    "svelte-check": "^4.7.7",
+    "tailwindcss": "^4.3.3",
+    "vitest": "5.0.5",
+    "vitest-browser-svelte": "^3.1.0"
   },
   "peerDependencies": {
-    "@thomasfosterau/effect-forms-svelte": "catalog:",
-    "svelte": "catalog:peers"
+    "@thomasfosterau/effect-forms-svelte": "^0.3.1",
+    "svelte": "^5.40.0"
   },
   "peerDependenciesMeta": {
     "@thomasfosterau/effect-forms-svelte": {