@thomasfosterau/components 0.1.0 → 0.2.0

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

@@ -0,0 +1,12 @@
+/**
+ * The one set of bits-ui menu parts, for `DropdownMenu` and `ContextMenu` to
+ * lend their children. Importing this module is what reaches bits-ui's menu
+ * runtime, so only those two components import it.
+ *
+ * Internal: not re-exported from the `ui` barrel.
+ *
+ * @module
+ */
+import type { MenuParts } from './menu-parts.ts';
+/** The parts for a menu of the given kind. */
+export declare function menuParts(kind: MenuParts['kind']): MenuParts;

package/dist/ui/menu-parts/parts.js

@@ -0,0 +1,27 @@
+/**
+ * The one set of bits-ui menu parts, for `DropdownMenu` and `ContextMenu` to
+ * lend their children. Importing this module is what reaches bits-ui's menu
+ * runtime, so only those two components import it.
+ *
+ * Internal: not re-exported from the `ui` barrel.
+ *
+ * @module
+ */
+import CheckboxItemPart from './CheckboxItemPart.svelte';
+import ItemPart from './ItemPart.svelte';
+import RadioGroupPart from './RadioGroupPart.svelte';
+import RadioItemPart from './RadioItemPart.svelte';
+import SeparatorPart from './SeparatorPart.svelte';
+import SubPart from './SubPart.svelte';
+/** The parts for a menu of the given kind. */
+export function menuParts(kind) {
+    return {
+        kind,
+        item: ItemPart,
+        separator: SeparatorPart,
+        checkboxItem: CheckboxItemPart,
+        radioGroup: RadioGroupPart,
+        radioItem: RadioItemPart,
+        sub: SubPart,
+    };
+}

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

@@ -40,6 +40,35 @@ export declare const alertTone: Record<StatusTone, string>;
 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}. */
@@ -66,3 +95,9 @@ export type ChipSize = 'sm' | 'md';
 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

@@ -90,6 +90,78 @@ export const progressTone = {
     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',
@@ -148,3 +220,21 @@ 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.1.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,36 +74,42 @@
       "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": "^3.8.1",
-    "@lucide/svelte": "^1.52.0",
-    "bits-ui": "^2.19.5"
+    "@lucide/svelte": "^1.69.0",
+    "bits-ui": "^2.20.2"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^10.6.1",
-    "@storybook/addon-svelte-csf": "^5.1.5",
-    "@storybook/sveltekit": "^10.6.1",
-    "@sveltejs/kit": "3.0.1",
-    "@sveltejs/package": "3.0.0",
+    "@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.2.0",
-    "@types/node": "^26.6.4",
-    "@vitest/browser-playwright": "5.0.3",
-    "daisyui": "^5.7.47",
-    "effect": "4.0.2",
-    "playwright": "1.64.0",
-    "storybook": "^10.6.1",
-    "svelte": "^5.57.2",
-    "svelte-check": "^4.7.6",
+    "@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": "^0.2.0",
+    "@thomasfosterau/effect-forms-svelte": "^0.3.1",
     "svelte": "^5.40.0"
   },
   "peerDependenciesMeta": {