@k2b/ui 0.24.0 → 0.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -2
- package/dist/browser/actions/Dropdown.js +67 -52
- package/dist/browser/actions/Dropdown.js.map +1 -1
- package/dist/browser/actions/GestureMenu.js +5 -5
- package/dist/browser/actions/GestureMenu.js.map +1 -1
- package/dist/browser/actions/SpotlightSearch.js +13 -6
- package/dist/browser/actions/SpotlightSearch.js.map +1 -1
- package/dist/browser/actions/Toolbar.js +75 -1
- package/dist/browser/actions/Toolbar.js.map +1 -1
- package/dist/browser/content/Calendar.js +1539 -911
- package/dist/browser/content/Calendar.js.map +1 -1
- package/dist/browser/content/CalendarDayView.js +5 -4
- package/dist/browser/content/CalendarDayView.js.map +1 -1
- package/dist/browser/content/CalendarWeekView.js +5 -4
- package/dist/browser/content/CalendarWeekView.js.map +1 -1
- package/dist/browser/content/Kbd.js +51 -0
- package/dist/browser/content/Kbd.js.map +1 -0
- package/dist/browser/content/LabelChip.js +38 -0
- package/dist/browser/content/LabelChip.js.map +1 -0
- package/dist/browser/content/MarkdownView.js +2 -1
- package/dist/browser/content/MarkdownView.js.map +1 -1
- package/dist/browser/content/Steps.js +34 -0
- package/dist/browser/content/Steps.js.map +1 -0
- package/dist/browser/content/Timeline.js +3 -3
- package/dist/browser/content/Timeline.js.map +1 -1
- package/dist/browser/content/VirtualFeed.js +33 -1
- package/dist/browser/content/VirtualFeed.js.map +1 -1
- package/dist/browser/content/calendar-dialogs.js +32 -60
- package/dist/browser/content/calendar-dialogs.js.map +1 -1
- package/dist/browser/content/calendar-month-scroll.js +80 -0
- package/dist/browser/content/calendar-month-scroll.js.map +1 -0
- package/dist/browser/content/calendar-time-view.js +0 -1
- package/dist/browser/content/calendar-time-view.js.map +1 -1
- package/dist/browser/content/index.js +4 -1
- package/dist/browser/content/index.js.map +1 -1
- package/dist/browser/content/markdown-info-blocks.js +33 -5
- package/dist/browser/content/markdown-info-blocks.js.map +1 -1
- package/dist/browser/feedback/prompts.js +17 -3
- package/dist/browser/feedback/prompts.js.map +1 -1
- package/dist/browser/index.js +1 -0
- package/dist/browser/index.js.map +1 -1
- package/dist/browser/inputs/Combobox.js +22 -3
- package/dist/browser/inputs/Combobox.js.map +1 -1
- package/dist/browser/inputs/QrScanner.js +2 -1
- package/dist/browser/inputs/QrScanner.js.map +1 -1
- package/dist/browser/intl/index.js +1 -0
- package/dist/browser/intl/index.js.map +1 -1
- package/dist/browser/intl/shortcut-messages.js +77 -0
- package/dist/browser/intl/shortcut-messages.js.map +1 -0
- package/dist/browser/intl/shortcut.js +123 -0
- package/dist/browser/intl/shortcut.js.map +1 -0
- package/dist/browser/layout/AppWorkspace.js +355 -338
- package/dist/browser/layout/AppWorkspace.js.map +1 -1
- package/dist/browser/layout/TableOfContents.js +115 -0
- package/dist/browser/layout/TableOfContents.js.map +1 -0
- package/dist/browser/layout/app-workspace-controller.js +7 -50
- package/dist/browser/layout/app-workspace-controller.js.map +1 -1
- package/dist/browser/layout/index.js +1 -0
- package/dist/browser/layout/index.js.map +1 -1
- package/dist/browser/layout/scroll-fade.js +14 -9
- package/dist/browser/layout/scroll-fade.js.map +1 -1
- package/dist/browser/layout/sidebar-scroll-memory.js +38 -0
- package/dist/browser/layout/sidebar-scroll-memory.js.map +1 -0
- package/dist/browser/layout/table-of-contents-messages.js +19 -0
- package/dist/browser/layout/table-of-contents-messages.js.map +1 -0
- package/dist/browser/motion.js +7 -0
- package/dist/browser/motion.js.map +1 -0
- package/dist/browser/surfaces/LinkCard.js +40 -24
- package/dist/browser/surfaces/LinkCard.js.map +1 -1
- package/dist/ssr/actions/Dropdown.js +11 -5
- package/dist/ssr/actions/Dropdown.js.map +1 -1
- package/dist/ssr/actions/GestureMenu.js +5 -5
- package/dist/ssr/actions/GestureMenu.js.map +1 -1
- package/dist/ssr/actions/SpotlightSearch.js +9 -3
- package/dist/ssr/actions/SpotlightSearch.js.map +1 -1
- package/dist/ssr/actions/Toolbar.js +67 -1
- package/dist/ssr/actions/Toolbar.js.map +1 -1
- package/dist/ssr/content/Calendar.js +864 -312
- package/dist/ssr/content/Calendar.js.map +1 -1
- package/dist/ssr/content/CalendarDayView.js +5 -4
- package/dist/ssr/content/CalendarDayView.js.map +1 -1
- package/dist/ssr/content/CalendarWeekView.js +5 -4
- package/dist/ssr/content/CalendarWeekView.js.map +1 -1
- package/dist/ssr/content/Kbd.js +38 -0
- package/dist/ssr/content/Kbd.js.map +1 -0
- package/dist/ssr/content/LabelChip.js +21 -0
- package/dist/ssr/content/LabelChip.js.map +1 -0
- package/dist/ssr/content/MarkdownView.js +2 -1
- package/dist/ssr/content/MarkdownView.js.map +1 -1
- package/dist/ssr/content/Steps.js +14 -0
- package/dist/ssr/content/Steps.js.map +1 -0
- package/dist/ssr/content/Timeline.js +3 -3
- package/dist/ssr/content/Timeline.js.map +1 -1
- package/dist/ssr/content/VirtualFeed.js +33 -1
- package/dist/ssr/content/VirtualFeed.js.map +1 -1
- package/dist/ssr/content/calendar-dialogs.js +12 -32
- package/dist/ssr/content/calendar-dialogs.js.map +1 -1
- package/dist/ssr/content/calendar-month-scroll.js +80 -0
- package/dist/ssr/content/calendar-month-scroll.js.map +1 -0
- package/dist/ssr/content/calendar-time-view.js +0 -1
- package/dist/ssr/content/calendar-time-view.js.map +1 -1
- package/dist/ssr/content/index.js +4 -1
- package/dist/ssr/content/index.js.map +1 -1
- package/dist/ssr/content/markdown-info-blocks.js +33 -5
- package/dist/ssr/content/markdown-info-blocks.js.map +1 -1
- package/dist/ssr/feedback/prompts.js +17 -3
- package/dist/ssr/feedback/prompts.js.map +1 -1
- package/dist/ssr/index.js +1 -0
- package/dist/ssr/index.js.map +1 -1
- package/dist/ssr/inputs/Combobox.js +18 -3
- package/dist/ssr/inputs/Combobox.js.map +1 -1
- package/dist/ssr/inputs/QrScanner.js +2 -1
- package/dist/ssr/inputs/QrScanner.js.map +1 -1
- package/dist/ssr/intl/index.js +1 -0
- package/dist/ssr/intl/index.js.map +1 -1
- package/dist/ssr/intl/shortcut-messages.js +77 -0
- package/dist/ssr/intl/shortcut-messages.js.map +1 -0
- package/dist/ssr/intl/shortcut.js +123 -0
- package/dist/ssr/intl/shortcut.js.map +1 -0
- package/dist/ssr/layout/AppWorkspace.js +77 -72
- package/dist/ssr/layout/AppWorkspace.js.map +1 -1
- package/dist/ssr/layout/TableOfContents.js +79 -0
- package/dist/ssr/layout/TableOfContents.js.map +1 -0
- package/dist/ssr/layout/app-workspace-controller.js +7 -50
- package/dist/ssr/layout/app-workspace-controller.js.map +1 -1
- package/dist/ssr/layout/index.js +1 -0
- package/dist/ssr/layout/index.js.map +1 -1
- package/dist/ssr/layout/scroll-fade.js +14 -9
- package/dist/ssr/layout/scroll-fade.js.map +1 -1
- package/dist/ssr/layout/sidebar-scroll-memory.js +38 -0
- package/dist/ssr/layout/sidebar-scroll-memory.js.map +1 -0
- package/dist/ssr/layout/table-of-contents-messages.js +19 -0
- package/dist/ssr/layout/table-of-contents-messages.js.map +1 -0
- package/dist/ssr/motion.js +7 -0
- package/dist/ssr/motion.js.map +1 -0
- package/dist/ssr/surfaces/LinkCard.js +26 -10
- package/dist/ssr/surfaces/LinkCard.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/types/actions/Dropdown.d.ts +12 -0
- package/dist/types/actions/SpotlightSearch.d.ts +2 -0
- package/dist/types/content/Calendar.d.ts +16 -6
- package/dist/types/content/Kbd.d.ts +16 -0
- package/dist/types/content/LabelChip.d.ts +12 -0
- package/dist/types/content/MarkdownView.d.ts +2 -1
- package/dist/types/content/Steps.d.ts +12 -0
- package/dist/types/content/VirtualFeed.d.ts +8 -0
- package/dist/types/content/calendar-dialogs.d.ts +0 -2
- package/dist/types/content/calendar-month-scroll.d.ts +25 -0
- package/dist/types/content/calendar-time-view.d.ts +0 -1
- package/dist/types/content/index.d.ts +7 -1
- package/dist/types/content/markdown-info-blocks.d.ts +21 -4
- package/dist/types/feedback/prompts.d.ts +8 -2
- package/dist/types/index.d.ts +1 -0
- package/dist/types/inputs/Combobox.d.ts +1 -0
- package/dist/types/intl/index.d.ts +2 -0
- package/dist/types/intl/shortcut-messages.d.ts +35 -0
- package/dist/types/intl/shortcut.d.ts +29 -0
- package/dist/types/layout/AppWorkspace.d.ts +3 -1
- package/dist/types/layout/TableOfContents.d.ts +24 -0
- package/dist/types/layout/index.d.ts +2 -0
- package/dist/types/layout/scroll-fade.d.ts +2 -0
- package/dist/types/layout/sidebar-scroll-memory.d.ts +6 -0
- package/dist/types/layout/table-of-contents-messages.d.ts +4 -0
- package/dist/types/motion.d.ts +6 -0
- package/dist/types/surfaces/LinkCard.d.ts +3 -0
- package/package.json +3 -3
|
@@ -8,11 +8,21 @@ export type DropdownActionBase = {
|
|
|
8
8
|
icon?: string;
|
|
9
9
|
image?: string;
|
|
10
10
|
label: string;
|
|
11
|
+
/**
|
|
12
|
+
* Accessible name when it must say more than the visible label, such as the current value and what the next
|
|
13
|
+
* activation does. It must contain the visible label.
|
|
14
|
+
*/
|
|
15
|
+
ariaLabel?: string;
|
|
11
16
|
description?: string;
|
|
12
17
|
variant?: "danger";
|
|
13
18
|
};
|
|
14
19
|
export type DropdownAction = (DropdownActionBase & {
|
|
15
20
|
action: () => void;
|
|
21
|
+
/**
|
|
22
|
+
* Set `false` for an action that changes a value in place, such as cycling a setting: the menu stays open and
|
|
23
|
+
* the focus stays on the row. Defaults to `true`.
|
|
24
|
+
*/
|
|
25
|
+
closeOnSelect?: boolean;
|
|
16
26
|
href?: never;
|
|
17
27
|
external?: never;
|
|
18
28
|
}) | (DropdownActionBase & {
|
|
@@ -80,6 +90,8 @@ export type DropdownTriggerProps = Omit<ButtonProps, "aria-controls" | "aria-exp
|
|
|
80
90
|
};
|
|
81
91
|
export type DropdownItemProps = {
|
|
82
92
|
children: JSX.Element;
|
|
93
|
+
closeOnSelect?: boolean;
|
|
94
|
+
ariaLabel?: string;
|
|
83
95
|
icon?: string;
|
|
84
96
|
image?: string;
|
|
85
97
|
description?: string;
|
|
@@ -10,6 +10,8 @@ export type SpotlightButtonProps = {
|
|
|
10
10
|
label?: string;
|
|
11
11
|
title?: string;
|
|
12
12
|
icon?: string;
|
|
13
|
+
/** Shortcut such as "mod+k"; takes precedence over shortcutLabel. */
|
|
14
|
+
shortcut?: string;
|
|
13
15
|
shortcutLabel?: string | false;
|
|
14
16
|
ariaLabel?: string;
|
|
15
17
|
disabled?: boolean;
|
|
@@ -155,17 +155,27 @@ export type CalendarProps<V extends string = never> = {
|
|
|
155
155
|
* `startHour`, `endHour`, and the visible hours do not apply then.
|
|
156
156
|
*/
|
|
157
157
|
dayHours?: readonly [start: number, end: number];
|
|
158
|
-
/**
|
|
158
|
+
/** Loaded days of the continuous month view and the day/week views with `dayHours`, with an exclusive end. */
|
|
159
159
|
range?: CalendarRange;
|
|
160
|
-
/**
|
|
160
|
+
/**
|
|
161
|
+
* Called once when the reader nears the first loaded day, again once `range.from` moved.
|
|
162
|
+
* May return a promise that settles once the range has grown; when it settles without moving that end, the
|
|
163
|
+
* continuous month treats the end as reached, and Next/Previous past it go through the host's navigation.
|
|
164
|
+
*/
|
|
161
165
|
onLoadEarlier?: () => unknown;
|
|
162
|
-
/**
|
|
166
|
+
/**
|
|
167
|
+
* Called once when the reader nears the last loaded day, again once `range.to` moved.
|
|
168
|
+
* May return a promise that settles once the range has grown; when it settles without moving that end, the
|
|
169
|
+
* continuous month treats the end as reached, and Next/Previous past it go through the host's navigation.
|
|
170
|
+
*/
|
|
163
171
|
onLoadLater?: () => unknown;
|
|
164
172
|
/**
|
|
165
|
-
*
|
|
166
|
-
*
|
|
173
|
+
* Scrolling views: the first and last visible day, and the focus date, after positioning and when they change.
|
|
174
|
+
* Day/week views use their first day as focus. Continuous month uses the first selected day inside its focus month,
|
|
175
|
+
* else the host's `date` when in that month, else today when in that month, else its first. Month rows count as
|
|
176
|
+
* visible when more than half is on screen.
|
|
167
177
|
*/
|
|
168
|
-
onVisibleDateChange?: (date: Date, last: Date) => void;
|
|
178
|
+
onVisibleDateChange?: (date: Date, last: Date, focus: Date) => void;
|
|
169
179
|
visibleStartHour?: number;
|
|
170
180
|
visibleEndHour?: number;
|
|
171
181
|
allDayMaxHeightRem?: number;
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { type JSX } from "solid-js";
|
|
2
|
+
import { type KeyboardPlatform } from "../intl/shortcut";
|
|
3
|
+
export type KbdProps = {
|
|
4
|
+
/** Shortcut such as "mod+k", "shift+/", "enter". */
|
|
5
|
+
keys: string;
|
|
6
|
+
/** Set on the server when the host knows the reader's platform. */
|
|
7
|
+
platform?: KeyboardPlatform;
|
|
8
|
+
class?: string;
|
|
9
|
+
};
|
|
10
|
+
/**
|
|
11
|
+
* Accessible key caps using the inherited locale and the reader's platform.
|
|
12
|
+
* A host rendering caps on the server passes `platform` to avoid a switch after hydration.
|
|
13
|
+
* @example <Kbd keys="mod+k" platform="apple" />
|
|
14
|
+
*/
|
|
15
|
+
export declare function Kbd(props: KbdProps): JSX.Element;
|
|
16
|
+
export default Kbd;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type JSX } from "solid-js";
|
|
2
|
+
export type LabelChipProps = {
|
|
3
|
+
icon?: string;
|
|
4
|
+
children: JSX.Element;
|
|
5
|
+
class?: string;
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* Names a UI control inside running text. The icon is a full class string.
|
|
9
|
+
* @example <LabelChip icon="ti ti-share">Share</LabelChip>
|
|
10
|
+
*/
|
|
11
|
+
export declare function LabelChip(props: LabelChipProps): JSX.Element;
|
|
12
|
+
export default LabelChip;
|
|
@@ -43,7 +43,8 @@ export declare const createSafeMarked: (locale?: string) => Marked;
|
|
|
43
43
|
*
|
|
44
44
|
* Renders untrusted Markdown safely by default. Raw HTML and unsafe link
|
|
45
45
|
* protocols are escaped. Info blocks (`:::note`, `:::info`, `:::success`,
|
|
46
|
-
* `:::warning`, `:::danger`) render
|
|
46
|
+
* `:::warning`, `:::danger`) render on a tinted surface without a border.
|
|
47
|
+
* The icon and title use the tone colour; body text stays neutral. Rendered
|
|
47
48
|
* HTML requires the deliberately named `trustedHtml` boundary; the caller owns
|
|
48
49
|
* sanitization in that mode.
|
|
49
50
|
*
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { JSX } from "solid-js";
|
|
2
|
+
export type StepsProps = {
|
|
3
|
+
children: JSX.Element;
|
|
4
|
+
start?: number;
|
|
5
|
+
class?: string;
|
|
6
|
+
};
|
|
7
|
+
/**
|
|
8
|
+
* An ordered instruction list with accent numbers. Trusted HTML can use the same class.
|
|
9
|
+
* @example <Steps start={2}><li>Select Share.</li><li>Copy the link.</li></Steps>
|
|
10
|
+
*/
|
|
11
|
+
export declare function Steps(props: StepsProps): JSX.Element;
|
|
12
|
+
export default Steps;
|
|
@@ -66,6 +66,14 @@ export type VirtualFeedProps<T> = {
|
|
|
66
66
|
announce?: (added: readonly T[]) => string | undefined;
|
|
67
67
|
/** Called when the reader reaches or leaves the end. */
|
|
68
68
|
onEndChange?: (atEnd: boolean) => void;
|
|
69
|
+
/**
|
|
70
|
+
* Called when the items in view change: the first and last item whose whole height is in view. An item taller
|
|
71
|
+
* than the view counts while it covers the view. `null` while no item is in view.
|
|
72
|
+
*/
|
|
73
|
+
onVisibleChange?: (visible: {
|
|
74
|
+
first: T;
|
|
75
|
+
last: T;
|
|
76
|
+
} | null) => void;
|
|
69
77
|
/** Receives the controller once the feed is mounted. */
|
|
70
78
|
controller?: (controller: VirtualFeedController) => void;
|
|
71
79
|
/** Shown while `items` is empty. */
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import type { CalendarCommand } from "./Calendar";
|
|
2
2
|
import type { CalendarMessages } from "./calendar-messages";
|
|
3
|
-
/** The keys of a shortcut as the reader presses them, such as ["⇧", "N"] or ["Shift", "N"]. */
|
|
4
|
-
export declare const shortcutKeys: (shortcut: string) => string[];
|
|
5
3
|
/**
|
|
6
4
|
* The calendar's shortcuts: the same list the host registers for its dispatcher and its help. `alternatives` names
|
|
7
5
|
* other keys the calendar itself handles for a command, such as the arrow keys that page like J and K.
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import type { TodayDirection } from "./calendar-time-view";
|
|
2
|
+
export declare const MONTH_ROWS_IN_VIEW = 5;
|
|
3
|
+
export declare const MONTH_ROW_BLOCK = 8;
|
|
4
|
+
/** Whole weeks covering the loaded days, with an exclusive end and the date context's first weekday. */
|
|
5
|
+
export declare const monthWeekKeys: (first: string, to: string, firstDayOfWeek: 0 | 1) => string[];
|
|
6
|
+
/** The row at the center of the area below the weekday header, clamped to the loaded weeks. */
|
|
7
|
+
export declare const monthFocusRow: (top: number, viewHeight: number, rowHeight: number, total: number) => number;
|
|
8
|
+
/** The middle day of a week names its month: Thursday for Monday weeks, Wednesday for Sunday weeks. */
|
|
9
|
+
export declare const monthOfWeek: (week: string) => string;
|
|
10
|
+
/** The loaded row containing a day, including the first of a month; absent outside the loaded weeks. */
|
|
11
|
+
export declare const monthRowOf: (weeks: readonly string[], key: string) => number | undefined;
|
|
12
|
+
/** The half-open interval of rows whose visible height exceeds half a row. */
|
|
13
|
+
export declare const monthVisibleRows: (top: number, viewHeight: number, rowHeight: number, total: number) => {
|
|
14
|
+
first: number;
|
|
15
|
+
end: number;
|
|
16
|
+
};
|
|
17
|
+
/** One block above and below the visible rows' blocks; the window changes only at their block boundaries. */
|
|
18
|
+
export declare const monthRenderWindow: (top: number, viewHeight: number, rowHeight: number, total: number) => {
|
|
19
|
+
first: number;
|
|
20
|
+
end: number;
|
|
21
|
+
};
|
|
22
|
+
/** The least movement that shows a row whole, or nothing when it is already fully in view. */
|
|
23
|
+
export declare const monthRevealTop: (row: number, top: number, viewHeight: number, rowHeight: number) => number | undefined;
|
|
24
|
+
/** Today points up or down until more than half its row is visible. */
|
|
25
|
+
export declare const monthTodayDirection: (row: number, top: number, viewHeight: number, rowHeight: number) => TodayDirection;
|
|
@@ -67,7 +67,6 @@ export type BodyHit = {
|
|
|
67
67
|
minute: number;
|
|
68
68
|
};
|
|
69
69
|
export declare const eventAccent: (event: Pick<CalendarEvent, "color" | "colorHex">) => string;
|
|
70
|
-
export declare const reducedMotion: () => boolean;
|
|
71
70
|
/** Swallows the click a browser sends right after a gesture ends, never the next one. */
|
|
72
71
|
export declare const swallowNextClick: () => void;
|
|
73
72
|
export declare const createTimeView: (props: TimeViewProps) => {
|
|
@@ -26,6 +26,10 @@ export { FileBrowserPanel, type FileBrowserPanelProps, type FileSource, openFile
|
|
|
26
26
|
export { FileGrid, type FileGridProps } from "./FileGrid";
|
|
27
27
|
export { default as FileTree, type FileTreeActions, type FileTreeEntry, type FileTreeProps } from "./FileTree";
|
|
28
28
|
export { canPreviewFile, default as FileView, type FileViewContent, type FileViewFile, type FileViewPreviewKind, type FileViewProps, type FileViewRenderer, type FileViewRendererProps, formatFileViewSize, getFileViewPreviewKind, } from "./FileView";
|
|
29
|
+
export type { KbdProps } from "./Kbd";
|
|
30
|
+
export { Kbd } from "./Kbd";
|
|
31
|
+
export type { LabelChipProps } from "./LabelChip";
|
|
32
|
+
export { LabelChip } from "./LabelChip";
|
|
29
33
|
export type { LightboxAction, LightboxImage } from "./Lightbox";
|
|
30
34
|
export { default as Lightbox } from "./Lightbox";
|
|
31
35
|
export type { LogTableEntry } from "./LogEntriesTable";
|
|
@@ -33,13 +37,15 @@ export { default as LogEntriesTable } from "./LogEntriesTable";
|
|
|
33
37
|
export { default as MarkdownView, type MarkdownRenderOptions, type MarkdownViewProps, renderSafeMarkdown } from "./MarkdownView";
|
|
34
38
|
export type { MessageGroupEntry, MessageRowAction, MessageRowAttachment, MessageRowAuthor, MessageRowFile, MessageRowMedia, MessageRowProgress, MessageRowProps, MessageRowQuote, MessageRowReaction, MessageRowStatus, MessageRowThread, MessageSystemRowProps, } from "./MessageRow";
|
|
35
39
|
export { MessageRow, MessageSystemRow, startsMessageGroup } from "./MessageRow";
|
|
36
|
-
export { type MarkdownInfoBlock, type MarkdownInfoBlockRenderInput, type MarkdownInfoBlockType, markdownInfoBlocks, renderMarkdownInfoBlock, scanMarkdownInfoBlock, } from "./markdown-info-blocks";
|
|
40
|
+
export { MARKDOWN_CALLOUT_CLASSES, MARKDOWN_CALLOUT_ICON_ATTRIBUTES, type MarkdownInfoBlock, type MarkdownInfoBlockRenderInput, type MarkdownInfoBlockType, markdownInfoBlocks, renderMarkdownInfoBlock, scanMarkdownInfoBlock, } from "./markdown-info-blocks";
|
|
37
41
|
export { type MarkdownLinkInput, type MarkdownReference, type MarkdownReferenceKind, type MarkdownReferenceType, markdownLinkReference, markdownReferenceIcon, markdownReferenceType, markdownReferenceTypeLabel, markStandaloneLinks, renderMarkdownLink, } from "./markdown-links";
|
|
38
42
|
export { Pagination, type PaginationProps } from "./Pagination";
|
|
39
43
|
export type { PdfPreviewProps, PdfPreviewRequest } from "./PdfPreview";
|
|
40
44
|
export { default as PdfPreview } from "./PdfPreview";
|
|
41
45
|
export type { RangeOption, RangePickerProps } from "./RangePicker";
|
|
42
46
|
export { default as RangePicker } from "./RangePicker";
|
|
47
|
+
export type { StepsProps } from "./Steps";
|
|
48
|
+
export { Steps } from "./Steps";
|
|
43
49
|
export type { StructuredDataPreviewMode, StructuredDataPreviewProps, StructuredDataValue } from "./StructuredDataPreview";
|
|
44
50
|
export { default as StructuredDataPreview, isStructuredDataValue } from "./StructuredDataPreview";
|
|
45
51
|
export type { TimelineColor, TimelineController, TimelineItem, TimelineProps } from "./Timeline";
|
|
@@ -21,6 +21,23 @@ declare const TONES: {
|
|
|
21
21
|
readonly warning: "warning";
|
|
22
22
|
readonly danger: "danger";
|
|
23
23
|
};
|
|
24
|
+
export declare const MARKDOWN_CALLOUT_CLASSES: {
|
|
25
|
+
readonly root: "k2b-callout";
|
|
26
|
+
readonly icon: "k2b-callout__icon";
|
|
27
|
+
};
|
|
28
|
+
/** Fixed attributes for decorative callout icons, including hosts with their own sanitizer. */
|
|
29
|
+
export declare const MARKDOWN_CALLOUT_ICON_ATTRIBUTES: {
|
|
30
|
+
readonly class: "k2b-callout__icon";
|
|
31
|
+
readonly "aria-hidden": "true";
|
|
32
|
+
readonly width: "20";
|
|
33
|
+
readonly height: "20";
|
|
34
|
+
readonly viewBox: "0 0 24 24";
|
|
35
|
+
readonly fill: "none";
|
|
36
|
+
readonly stroke: "currentColor";
|
|
37
|
+
readonly "stroke-width": "2";
|
|
38
|
+
readonly "stroke-linecap": "round";
|
|
39
|
+
readonly "stroke-linejoin": "round";
|
|
40
|
+
};
|
|
24
41
|
export type MarkdownInfoBlockType = keyof typeof TONES;
|
|
25
42
|
export type MarkdownInfoBlock = {
|
|
26
43
|
type: MarkdownInfoBlockType;
|
|
@@ -48,10 +65,10 @@ export type MarkdownInfoBlockRenderInput = {
|
|
|
48
65
|
*/
|
|
49
66
|
export declare const scanMarkdownInfoBlock: (source: string) => MarkdownInfoBlock | null;
|
|
50
67
|
/**
|
|
51
|
-
* Renders
|
|
52
|
-
*
|
|
53
|
-
* and names the block; without one,
|
|
54
|
-
*
|
|
68
|
+
* Renders a callout on a tinted surface without a border. The decorative icon
|
|
69
|
+
* and title use the tone colour; body text stays neutral. A title is the
|
|
70
|
+
* visible heading and names the block; without one, screen readers hear the
|
|
71
|
+
* localized type name.
|
|
55
72
|
*/
|
|
56
73
|
export declare const renderMarkdownInfoBlock: (input: MarkdownInfoBlockRenderInput) => string;
|
|
57
74
|
/**
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type JSX } from "solid-js";
|
|
2
|
-
import { type OpenDialogOptions } from "./dialog-core";
|
|
2
|
+
import { type DialogRender, type OpenDialogOptions } from "./dialog-core";
|
|
3
3
|
export interface DialogOptions {
|
|
4
4
|
signal?: AbortSignal;
|
|
5
5
|
title?: string;
|
|
@@ -165,7 +165,13 @@ export declare const prompts: {
|
|
|
165
165
|
prompt: typeof promptText;
|
|
166
166
|
promptNumber: typeof promptNumber;
|
|
167
167
|
form: <T extends Record<string, FieldSchema>>(config: PromptFormOptions<T>) => Promise<InferFormValues<T> | null>;
|
|
168
|
-
|
|
168
|
+
/**
|
|
169
|
+
* Open custom content with a typed close callback and the dialog render context.
|
|
170
|
+
* Register a dismiss handler to guard Escape, backdrop clicks and the supplied header's close button,
|
|
171
|
+
* for example while saving. Explicit close(result) bypasses the guard. Without a handler, dismissal
|
|
172
|
+
* keeps its existing behavior, including a header close button independent of cancelBehavior.
|
|
173
|
+
*/
|
|
174
|
+
dialog: <T extends unknown = unknown>(component: DialogRender<T>, options?: DialogOptions) => Promise<T | undefined>;
|
|
169
175
|
search: typeof openSearchPrompt;
|
|
170
176
|
error: (content: string | HTMLElement, options?: DialogOptions) => Promise<unknown>;
|
|
171
177
|
};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ export * from "./inputs";
|
|
|
6
6
|
export { suppressTextSelection } from "./internal/text-selection";
|
|
7
7
|
export * from "./intl";
|
|
8
8
|
export * from "./layout";
|
|
9
|
+
export { prefersReducedMotion } from "./motion";
|
|
9
10
|
export type { AccentColor, IntentTone } from "./semantics";
|
|
10
11
|
export * from "./surfaces";
|
|
11
12
|
export * from "./widgets";
|
|
@@ -2,3 +2,5 @@ export type { FormatBytesProps, FormatCurrencyProps, FormatDateProps, FormatDate
|
|
|
2
2
|
export { Format } from "./Format";
|
|
3
3
|
export type { LocaleProviderProps } from "./locale";
|
|
4
4
|
export { LocaleProvider, useLocale } from "./locale";
|
|
5
|
+
export type { FormattedShortcut, KeyboardPlatform, ShortcutFormatOptions, ShortcutKey } from "./shortcut";
|
|
6
|
+
export { formatShortcut, keyboardPlatform } from "./shortcut";
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/** Imperative UI inherits the document locale when no locale is supplied. */
|
|
2
|
+
export declare const resolveShortcutMessages: (locale?: string) => {
|
|
3
|
+
ctrlLabel: string;
|
|
4
|
+
altLabel: string;
|
|
5
|
+
shiftLabel: string;
|
|
6
|
+
metaLabel: string;
|
|
7
|
+
control: string;
|
|
8
|
+
appleControl: string;
|
|
9
|
+
option: string;
|
|
10
|
+
shift: string;
|
|
11
|
+
command: string;
|
|
12
|
+
alt: string;
|
|
13
|
+
meta: string;
|
|
14
|
+
arrowup: string;
|
|
15
|
+
arrowdown: string;
|
|
16
|
+
arrowleft: string;
|
|
17
|
+
arrowright: string;
|
|
18
|
+
enter: string;
|
|
19
|
+
escape: string;
|
|
20
|
+
tab: string;
|
|
21
|
+
space: string;
|
|
22
|
+
backspace: string;
|
|
23
|
+
delete: string;
|
|
24
|
+
home: string;
|
|
25
|
+
end: string;
|
|
26
|
+
pageup: string;
|
|
27
|
+
pagedown: string;
|
|
28
|
+
spaceLabel: string;
|
|
29
|
+
deleteLabel: string;
|
|
30
|
+
homeLabel: string;
|
|
31
|
+
endLabel: string;
|
|
32
|
+
pageupLabel: string;
|
|
33
|
+
pagedownLabel: string;
|
|
34
|
+
};
|
|
35
|
+
export declare const checkShortcutMessages: () => import("@k2b/stdlib").CatalogIssue[];
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
export type KeyboardPlatform = "apple" | "other";
|
|
2
|
+
/**
|
|
3
|
+
* Apple keyboards name the platform modifier Command. `source` is a User-Agent or `navigator.platform` string.
|
|
4
|
+
* Without `source`, reads the runtime's navigator; server callers pass the request's User-Agent.
|
|
5
|
+
* @example keyboardPlatform("MacIntel") // "apple"
|
|
6
|
+
*/
|
|
7
|
+
export declare const keyboardPlatform: (source?: string) => KeyboardPlatform;
|
|
8
|
+
export type ShortcutKey = {
|
|
9
|
+
/** What the cap shows: "⌘", "Strg", "K", "↵". */
|
|
10
|
+
label: string;
|
|
11
|
+
/** What a screen reader says: "Command", "Steuerung", "K", "Enter". */
|
|
12
|
+
name: string;
|
|
13
|
+
};
|
|
14
|
+
export type FormattedShortcut = {
|
|
15
|
+
keys: ShortcutKey[];
|
|
16
|
+
/** "⌘K" on Apple, "Ctrl+K" / "Strg+K" elsewhere. */
|
|
17
|
+
label: string;
|
|
18
|
+
/** "Command K", "Steuerung K". */
|
|
19
|
+
name: string;
|
|
20
|
+
};
|
|
21
|
+
export type ShortcutFormatOptions = {
|
|
22
|
+
platform?: KeyboardPlatform;
|
|
23
|
+
locale?: string;
|
|
24
|
+
};
|
|
25
|
+
/**
|
|
26
|
+
* Formats one plus-separated shortcut in canonical modifier order.
|
|
27
|
+
* @example formatShortcut("mod+alt+n", { platform: "apple" }).label // "⌥⌘N"
|
|
28
|
+
*/
|
|
29
|
+
export declare const formatShortcut: (shortcut: string, options?: ShortcutFormatOptions) => FormattedShortcut;
|
|
@@ -8,7 +8,8 @@ export type AppWorkspaceProps = {
|
|
|
8
8
|
class?: string;
|
|
9
9
|
/** A host with its own phone chrome can use the full canvas below 48rem (768 px). */
|
|
10
10
|
mobileSurface?: "contained" | "flush";
|
|
11
|
-
/**
|
|
11
|
+
/** Removes the workspace's own border, radius, and shadow for an overview that is the page itself.
|
|
12
|
+
* A host may frame the outermost workspace as its app card, as Cloud does from 1536 px on signed-in pages. */
|
|
12
13
|
flat?: boolean;
|
|
13
14
|
resizable?: boolean;
|
|
14
15
|
/**
|
|
@@ -234,6 +235,7 @@ export type AppWorkspaceSidebarItemIconProps = {
|
|
|
234
235
|
};
|
|
235
236
|
export type AppWorkspaceSidebarItemLabelProps = {
|
|
236
237
|
children: JSX.Element;
|
|
238
|
+
/** False keeps one line with an ellipsis; rows wrap long labels onto a second line by default. */
|
|
237
239
|
marquee?: boolean;
|
|
238
240
|
};
|
|
239
241
|
export type AppWorkspaceSidebarItemMetaProps = {
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { type JSX } from "solid-js";
|
|
2
|
+
import type { MaybeAccessor } from "../inputs/field-contract";
|
|
3
|
+
export type TableOfContentsItem = {
|
|
4
|
+
id: string;
|
|
5
|
+
label: string;
|
|
6
|
+
};
|
|
7
|
+
export type TableOfContentsProps = {
|
|
8
|
+
items: readonly TableOfContentsItem[];
|
|
9
|
+
/** Visible heading and navigation name. Defaults to the localized "On this page". */
|
|
10
|
+
title?: string;
|
|
11
|
+
/** Element whose scrolling decides the active section. Defaults to the window. */
|
|
12
|
+
scrollRoot?: MaybeAccessor<HTMLElement | undefined>;
|
|
13
|
+
/** Stay in view inside the caller's layout. */
|
|
14
|
+
sticky?: boolean;
|
|
15
|
+
/** Called when another section becomes active. */
|
|
16
|
+
onActiveChange?: (id: string | undefined) => void;
|
|
17
|
+
class?: string;
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* Native section links with a scroll spy on the window or a content container.
|
|
21
|
+
* @example <TableOfContents items={[{ id: "sharing", label: "Sharing" }]} sticky />
|
|
22
|
+
*/
|
|
23
|
+
export declare function TableOfContents(props: TableOfContentsProps): JSX.Element;
|
|
24
|
+
export default TableOfContents;
|
|
@@ -43,3 +43,5 @@ export { default as SettingsModal } from "./SettingsModal";
|
|
|
43
43
|
export { APP_WORKSPACE_SWITCHER_SEARCH_FROM, type AppWorkspaceSidebarSwitcherProps, type AppWorkspaceSwitcherAction, type AppWorkspaceSwitcherOption, } from "./SidebarSwitcher";
|
|
44
44
|
export type { TabBarItem, TabBarProps } from "./TabBar";
|
|
45
45
|
export { default as TabBar } from "./TabBar";
|
|
46
|
+
export type { TableOfContentsItem, TableOfContentsProps } from "./TableOfContents";
|
|
47
|
+
export { TableOfContents } from "./TableOfContents";
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
/** Self-contained because the sidebar inline script embeds its source. */
|
|
2
|
+
export declare function scrollFadeEdges(body: HTMLElement): "top" | "bottom" | "both" | undefined;
|
|
1
3
|
export declare function createScrollFade(element: () => HTMLElement | undefined, enabled: () => boolean): void;
|
|
2
4
|
/** Enrich only explicitly marked UI scrollports, including SSR and later navigation. */
|
|
3
5
|
export declare function installScrollFades(root: Document | HTMLElement): () => void;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Runs at parse time and on client mount. Keep this function self-contained:
|
|
3
|
+
* the inline script embeds its source with String(rememberSidebarScroll).
|
|
4
|
+
* Memory uses the body's scroll-preserve key, or the page path, and position.
|
|
5
|
+
*/
|
|
6
|
+
export declare function rememberSidebarScroll(body: HTMLElement | null, fadeEdges: (body: HTMLElement) => string | undefined): () => void;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* True when the person asked for less motion: through the operating system's
|
|
3
|
+
* setting or through `data-k2b-motion="reduced"` on `<html>`. Both are read at
|
|
4
|
+
* call time, so a change applies to the next call; on the server it is false.
|
|
5
|
+
*/
|
|
6
|
+
export declare const prefersReducedMotion: () => boolean;
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
+
import { type LinkNavigateEvent } from "@k2b/ssr/nav";
|
|
1
2
|
import { type JSX } from "solid-js";
|
|
2
3
|
export type LinkCardColor = "blue" | "emerald" | "violet" | "orange" | "red" | "amber" | "zinc" | "cyan" | "rose";
|
|
3
4
|
export type LinkCardProps = {
|
|
4
5
|
href: string;
|
|
6
|
+
navigation?: "document" | "enhanced";
|
|
7
|
+
onNavigate?: (event: LinkNavigateEvent) => void | Promise<void>;
|
|
5
8
|
title: string;
|
|
6
9
|
description: string;
|
|
7
10
|
icon: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@k2b/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.26.0",
|
|
4
4
|
"description": "Production-ready components for SolidJS applications.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -51,13 +51,13 @@
|
|
|
51
51
|
"qr-scanner": "1.4.2"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
|
-
"@k2b/ssr": "^0.12.0 || ^0.13.0 || ^0.14.0 || ^0.15.0",
|
|
54
|
+
"@k2b/ssr": "^0.12.0 || ^0.13.0 || ^0.14.0 || ^0.15.0 || ^0.16.0",
|
|
55
55
|
"solid-js": "^1.9.10"
|
|
56
56
|
},
|
|
57
57
|
"devDependencies": {
|
|
58
58
|
"@babel/core": "8.0.6",
|
|
59
59
|
"@babel/preset-typescript": "8.0.1",
|
|
60
|
-
"@k2b/ssr": "0.
|
|
60
|
+
"@k2b/ssr": "0.16.0",
|
|
61
61
|
"@types/babel__core": "7.20.5",
|
|
62
62
|
"@types/bun": "1.4.2",
|
|
63
63
|
"axe-core": "4.11.0",
|