@milktop/react-ui 0.0.0-stage → 0.1.1

package/dist/editor/image.js

@@ -0,0 +1,23 @@
+// TipTap's image node, keeping any data-* attributes (e.g. an id or signed
+// id your server resolves later) through parsing, editing and getHTML().
+// A method, not an arrow: TipTap's extend() needs `this.parent`.
+import Image from '@tiptap/extension-image';
+export const RichImage = Image.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            data: {
+                default: null,
+                parseHTML: (element) => {
+                    const out = {};
+                    for (const { name, value } of Array.from(element.attributes)) {
+                        if (name.startsWith('data-'))
+                            out[name] = value;
+                    }
+                    return Object.keys(out).length ? out : null;
+                },
+                renderHTML: (attributes) => attributes.data || {},
+            },
+        };
+    },
+});

package/dist/empty-state/EmptyState.d.ts

@@ -0,0 +1,22 @@
+/**
+ * What to show where a list or page has nothing yet.
+ *
+ *   <EmptyState icon="lucide:users" heading="No students yet" description="Add one to start booking lessons.">
+ *     <Button variant="primary">Add student</Button>
+ *   </EmptyState>
+ *
+ * - `icon`: an Iconify name; `heading`, `description`
+ * - the content: actions, e.g. a button to create the first item
+ */
+import type { ComponentProps, ReactNode } from 'react';
+import 'iconify-icon';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './empty-state.css';
+export type EmptyStateProps = Omit<ComponentProps<'div'>, 'title'> & {
+    icon?: string | null;
+    heading?: ReactNode;
+    description?: ReactNode;
+    classes?: Classes<'root' | 'iconWrap' | 'icon' | 'heading' | 'description' | 'actions'>;
+};
+export declare function EmptyState({ icon, heading, description, className, classes, children, ...rest }: EmptyStateProps): import("react").JSX.Element;

package/dist/empty-state/EmptyState.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import 'iconify-icon';
+import { cx, partsOf } from '../utils.js';
+import '../theme.css';
+import './empty-state.css';
+export function EmptyState({ icon = null, heading = null, description = null, className, classes, children, ...rest }) {
+    const part = partsOf('empty-state', classes);
+    return (_jsxs("div", { ...rest, ...part('root'), className: cx(className, classes?.root), children: [icon && _jsx("span", { ...part('icon-wrap'), children: _jsx("iconify-icon", { ...part('icon'), icon: icon, "aria-hidden": "true" }) }), heading && _jsx("h3", { ...part('heading'), children: heading }), description && _jsx("p", { ...part('description'), children: description }), children != null && _jsx("div", { ...part('actions'), children: children })] }));
+}

package/dist/empty-state/empty-state.css

@@ -0,0 +1,14 @@
+@layer ui {
+  [data-scope=empty-state][data-part=root] {
+    display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; box-sizing: border-box;
+    padding: 2.5rem 1.5rem; color: var(--ui-text); font-family: var(--ui-font); font-size: 14px;
+  }
+  [data-scope=empty-state][data-part=icon-wrap] {
+    display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1rem; border-radius: 9999px;
+    background: var(--ui-hover); color: var(--ui-muted);
+  }
+  [data-scope=empty-state][data-part=icon] { display: block; font-size: 24px; }
+  [data-scope=empty-state][data-part=heading] { margin: 0; font-size: 16px; font-weight: 600; }
+  [data-scope=empty-state][data-part=description] { margin: 0.25rem 0 0; max-width: 28rem; color: var(--ui-muted); }
+  [data-scope=empty-state][data-part=actions] { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.25rem; }
+}

package/dist/event-calendar/EventCalendar.d.ts

@@ -0,0 +1,213 @@
+/**
+ * A calendar of events by the hour: a day, a few days or a week across,
+ * hours down, and optionally a column per resource (a vet, a tutor, a room)
+ * within each day. Events sit by their times, side by side where they
+ * overlap; all-day and multi-day events sit in a strip along the top.
+ *
+ *   <EventCalendar events={lessons} onSelect={book} onEventClick={open} onEventChange={update} />
+ *   <EventCalendar view="day" resources={vets} slotMinutes={15} events={appointments} … />
+ *
+ * Times are local ISO strings ('2025-10-09T16:00'), as DatePicker's dates are;
+ * an all-day event has dates only ('2025-10-09', its `end` the last day).
+ *
+ * Events and resources
+ * - `events`: `{ id, title, start, end, allDay, resourceId, description,
+ *   color, editable, blocked, pending }`; `color` is 'accent' (default),
+ *   'success', 'warning', 'danger', 'neutral' or any CSS colour;
+ *   `editable: false` fixes one; `blocked` draws it hatched (time taken out,
+ *   not an appointment); `pending` faded and fixed (saving)
+ * - `resources`: `{ id, title, color, hours, offLabel }` (and anything for
+ *   `renderResource`): a column each, per day; events go in their
+ *   `resourceId`'s column. Change the list to add or remove one (a vet
+ *   present that day). `color` ('accent', 'success', 'warning', 'danger',
+ *   'neutral' or any CSS colour) tints its header, its hover, selections and
+ *   drops, and is its events' colour unless they set their own. `hours`:
+ *   when it's available on each day shown, as `[{ start: '08:00', end: '13:00' }]`
+ *   (a morning; two for a lunch break; `[]` for not at all): the rest is
+ *   shaded and refused, with `offLabel` as the reason
+ *
+ * What's shown
+ * - `view`, `defaultView`: 'day', 'week' (default), 'workweek', or a number
+ *   of days from `date`; `onViewChange`. `views`: the toolbar's choices
+ *   (['day', 'week']; [] for none). On a narrow screen it shows a day
+ * - `date`, `defaultDate`: a day in the range shown (today's by default);
+ *   `onDateChange`, from the toolbar (its title opens a calendar)
+ * - `weekStartsOn`: 1 (Monday, default) or 0; `startHour`, `endHour` (7, 21);
+ *   `slotMinutes`: what selecting, moving and resizing snap to (30);
+ *   `hourHeight`: a CSS length ('3rem')
+ * - `height`: a CSS length: the hours scroll inside it under the headers;
+ *   `scrollToTime`: where it opens scrolled to ('08:00', or 'now'), once
+ * - `rows`: extra rows above the all-day strip, a cell per day (or per
+ *   column with `perColumn`), e.g. the day's messages:
+ *   `[{ key, label, render: (date, resource) => …, onClick: (date, resource) => … }]`
+ * - `allDayMax`: all-day lanes shown before a "+2 more" (3)
+ *
+ * Changing things
+ * - `onSelect({ start, end, resourceId, allDay }, keys)`: an empty slot was
+ *   clicked or a time dragged out, or (`allDay`) days in the all-day strip,
+ *   e.g. to book it. `keys` says which of Shift, Alt, Ctrl and ⌘ were held
+ *   (say, Shift to block time instead of booking it)
+ * - `onEventClick(event)`: an event was clicked (not dragged), e.g. to open it
+ * - `onDayClick(date)`: a day's header was clicked (an ISO date), e.g. to show
+ *   that day; `onResourceClick(resource, date)`: a resource's header
+ * - `onRangeChange({ start, end, view })`: the days shown, as ISO dates (the
+ *   last one included), when it first shows and whenever they change: load
+ *   that range's events from your server
+ * - `onEventChange(event, { start, end, resourceId }, { kind })`: makes
+ *   events movable and resizable: drag one to another time, day or resource,
+ *   or its bottom edge to change its length; or focus it and use ↑↓ (a slot),
+ *   ←→ (a column), Shift+↑↓ (its length). The change spreads straight into
+ *   the event (`{ ...event, ...change }`); `kind` is 'move' or 'resize', and
+ *   comparing `resourceId` with the event's shows a change of resource.
+ *   Update your events in response (or don't, and it stays where it was)
+ * - `isAvailable({ start, end, resourceId, allDay, event })`: true, or false
+ *   or the reason it isn't ('Dr Patel is away'): unavailable time is shaded
+ *   (the reason on hover) and selecting, moving or resizing into it is
+ *   refused, calling `onUnavailable(reason, attempt)` (to show a toast).
+ *   `event` is the one being moved, so it doesn't clash with itself;
+ *   `shading` is true when it's only asking what to shade (so clashes with
+ *   other events, which show anyway, can be left to bookings and drops)
+ * - `pinned`: an event being placed (it can be from another week): while
+ *   set, a click on a time moves it there (through `onEventChange`, keeping
+ *   its length); Escape or the bar's Cancel call `onPinnedChange(null)`.
+ *   Clear it once you've moved it
+ *
+ * - `eventMenu(event)`, `slotMenu(slot)`: items for a menu on right-click
+ *   (or the Menu key, or Shift+F10, on a focused event): of an event, or of
+ *   an empty time or all-day day (`slot` is `{ start, end, resourceId, allDay }`).
+ *   Items are `{ label, icon, shortcut, danger, disabled, onSelect }`, or
+ *   `{ separator: true }`, or `{ group: 'Heading' }`; return nothing for no menu
+ *
+ * Drawing and words
+ * - `renderEvent(event, { start, end, resource, compact })`, `renderResource(resource)`,
+ *   `renderDayHeader(date)`: draw those yourself
+ * - `eventLabel(event)`: what screen readers call an event (its title, if text)
+ * - `translations`: its words (Today, All day, the views, the announcements…),
+ *   over the LocaleProvider's (English and French are built in);
+ *   `locale`: for the dates and times (the LocaleProvider's by default)
+ * - `actions`: in the toolbar; `toolbar`: false hides it
+ */
+import { type HTMLAttributes, type ReactNode } from 'react';
+import 'iconify-icon';
+import type { CalendarMessages } from '../format/messages.js';
+import { type Classes } from '../utils.js';
+import '../theme.css';
+import './event-calendar.css';
+type Id = string | number;
+export type CalendarEvent = {
+    id: Id;
+    title: ReactNode;
+    start: string;
+    end: string;
+    allDay?: boolean;
+    resourceId?: Id;
+    description?: ReactNode;
+    color?: 'accent' | 'success' | 'warning' | 'danger' | 'neutral' | (string & {});
+    editable?: boolean;
+    blocked?: boolean;
+    pending?: boolean;
+};
+export type CalendarResource = {
+    id: Id;
+    title: ReactNode;
+    color?: string;
+    hours?: {
+        start: string;
+        end: string;
+    }[] | null;
+    offLabel?: string;
+};
+export type CalendarView = 'day' | 'week' | 'workweek' | number;
+export type CalendarChange = {
+    start: string;
+    end: string;
+    resourceId?: Id;
+};
+export type CalendarSelection = {
+    start: string;
+    end: string;
+    resourceId?: Id;
+    allDay: boolean;
+};
+export type CalendarKeys = {
+    shiftKey: boolean;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+};
+export type CalendarQuery<E extends CalendarEvent = CalendarEvent> = CalendarSelection & {
+    event?: E;
+    shading?: boolean;
+};
+export type CalendarRow<R extends CalendarResource = CalendarResource> = {
+    key: string;
+    label: ReactNode;
+    render?: (date: Date, resource: R | null) => ReactNode;
+    onClick?: (date: Date, resource: R | null) => void;
+    perColumn?: boolean;
+};
+export type CalendarMenuItem = {
+    label?: ReactNode;
+    icon?: string;
+    shortcut?: string;
+    danger?: boolean;
+    disabled?: boolean;
+    separator?: boolean;
+    group?: ReactNode;
+    onSelect?: () => void;
+};
+export type CalendarTranslations = CalendarMessages;
+export type EventCalendarProps<E extends CalendarEvent = CalendarEvent, R extends CalendarResource = CalendarResource> = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onSelect'> & {
+    events?: E[];
+    resources?: R[] | null;
+    view?: CalendarView;
+    defaultView?: CalendarView;
+    onViewChange?: (view: CalendarView) => void;
+    views?: CalendarView[];
+    date?: string;
+    defaultDate?: string;
+    onDateChange?: (date: string) => void;
+    weekStartsOn?: 0 | 1;
+    startHour?: number;
+    endHour?: number;
+    slotMinutes?: number;
+    hourHeight?: string;
+    height?: string | null;
+    scrollToTime?: string | null;
+    rows?: CalendarRow<R>[];
+    allDayMax?: number;
+    onSelect?: (selection: CalendarSelection, keys: CalendarKeys) => void;
+    onEventClick?: (event: E) => void;
+    onDayClick?: (date: string) => void;
+    onResourceClick?: (resource: R, date: string) => void;
+    onRangeChange?: (range: {
+        start: string;
+        end: string;
+        view: CalendarView;
+    }) => void;
+    onEventChange?: (event: E, change: CalendarChange, how: {
+        kind: 'move' | 'resize';
+    }) => void;
+    isAvailable?: (query: CalendarQuery<E>) => boolean | string;
+    onUnavailable?: (reason: string, attempt: CalendarQuery<E>) => void;
+    pinned?: E | null;
+    eventMenu?: (event: E) => CalendarMenuItem[] | null | undefined;
+    slotMenu?: (slot: CalendarSelection) => CalendarMenuItem[] | null | undefined;
+    onPinnedChange?: (event: E | null) => void;
+    renderEvent?: (event: E, state: {
+        start: Date;
+        end: Date;
+        resource: R | null;
+        compact: boolean;
+    }) => ReactNode;
+    renderResource?: (resource: R) => ReactNode;
+    renderDayHeader?: (date: Date) => ReactNode;
+    eventLabel?: (event: E) => string;
+    translations?: Partial<CalendarTranslations>;
+    actions?: ReactNode;
+    toolbar?: boolean;
+    locale?: string;
+    classes?: Classes<'root' | 'toolbar' | 'nav' | 'title' | 'actions' | 'pinned' | 'grid' | 'corner' | 'dayHeader' | 'resourceHeader' | 'rowLabel' | 'rowCell' | 'allDayLabel' | 'allDay' | 'allDayEvent' | 'more' | 'gutter' | 'hour' | 'day' | 'unavailable' | 'event' | 'eventTitle' | 'headerButton' | 'hover' | 'eventTime' | 'resize' | 'ghost' | 'selection' | 'now' | 'status'>;
+};
+export declare function EventCalendar<E extends CalendarEvent = CalendarEvent, R extends CalendarResource = CalendarResource>({ events, resources, view: viewProp, defaultView, onViewChange, views, date: dateProp, defaultDate, onDateChange, weekStartsOn, startHour, endHour, slotMinutes, hourHeight, height, scrollToTime, rows, allDayMax, onSelect, onEventClick, onDayClick, onResourceClick, onRangeChange, onEventChange, isAvailable, onUnavailable, pinned, onPinnedChange, eventMenu, slotMenu, renderEvent, renderResource, renderDayHeader, eventLabel, translations, actions, toolbar, locale: localeProp, className, classes, style, ...rest }: EventCalendarProps<E, R>): import("react").JSX.Element;
+export {};