@keepkit/ui 0.11.0 → 0.13.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 +70 -2
- package/dist/index.d.ts +122 -11
- package/dist/index.js +1783 -268
- package/dist/index.js.map +1 -1
- package/dist/styles/base.css +218 -0
- package/dist/styles/button.css +64 -0
- package/dist/styles/collection.css +147 -0
- package/dist/styles/sync.css +107 -0
- package/dist/tailwind.css +22 -0
- package/dist/tailwind.d.ts +33 -0
- package/dist/tailwind.js +31 -0
- package/dist/tailwind.js.map +1 -0
- package/dist/theme.css +4 -0
- package/package.json +28 -4
package/README.md
CHANGED
|
@@ -57,7 +57,41 @@ function SavedArticles() {
|
|
|
57
57
|
`keep.Collection`は検索、ソート、ページング、loading / empty / error、ARIA live通知を標準で提供します。検索は既定で300msデバウンスされます。`features={{ tagFilter: true, bulkActions: true }}`でタグフィルターと一括操作も有効にできます。個別の`KeepList`、`KeepSearchInput`、`KeepSortSelect`、`KeepPagination`、`KeepItemCheckbox`、`KeepTagEditor`などは高度なレイアウト用に利用できます。`KeepBulkActions`はrender propsで操作UIを差し替えられ、`isAllSelected` / `toggleSelectAll`で表示中アイテムを一括操作できます。`KeepNoteEditor`は既定300msのデバウンス保存に対応し、`debounceMs={0}`でフォーム送信のみへ戻せます。通知領域だけを明示的に置く場合は`KeepAnnouncer`(`KeepAnnouncements`のalias)を使えます。
|
|
58
58
|
`KeepItemCard`は`href`、`onOpen`、`linkTarget`、`linkComponent`に対応し、保存アイテムから詳細ページへ遷移できます。非公開・期限切れ等の`status`を持つアイテムは自動的にリンクを無効化します。`KeepBackup`はJSONのエクスポート、merge / replaceインポート、結果件数、容量エラー表示を提供します。
|
|
59
59
|
|
|
60
|
-
v0.
|
|
60
|
+
v0.13.0では`KeepCollection urlSync layout="list" | "grid" | "compact"`、`KeepBulkActions selectionScope="page" | "query" | "all"`、`KeepUndo`を利用できます。`createNextPagesRouterAdapter`はNext.js Pages Router用の注入adapterです。`locale`は英語、日本語、韓国語、中国語簡体字・繁体字、タイ語、フランス語、スペイン語、ポルトガル語、イタリア語、ドイツ語、ロシア語、フィリピン語、ベトナム語、インドネシア語、マレー語の16言語に対応し、`labels`で上書きできます。認証付き同期は`createAuthenticatedSyncKit`から利用できます。
|
|
61
|
+
Phase 4の状態UIとして`KeepItemStatusBadge`、`KeepStaleNotice`、`KeepPruneStaleButton`、`KeepSyncStatusBanner`、`KeepSyncRecoveryDialog`を利用できます。`import "@keepkit/ui/theme.css"`でテーマCSSを有効にできます。
|
|
62
|
+
|
|
63
|
+
### Tailwind/shadcnテーマ
|
|
64
|
+
|
|
65
|
+
```tsx
|
|
66
|
+
import "@keepkit/ui/tailwind.css";
|
|
67
|
+
import { KeepThemeProvider, KeepCollection } from "@keepkit/ui";
|
|
68
|
+
|
|
69
|
+
<KeepThemeProvider theme="compact" mode="system" density="comfortable" radius="medium">
|
|
70
|
+
<KeepCollection layout="grid" />
|
|
71
|
+
</KeepThemeProvider>;
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
`default`、`compact`、`minimal`、`rounded`、`high-contrast`、`dark`のプリセット、`.dark`/`prefers-color-scheme`、モバイル対応、`prefers-reduced-motion`を提供します。shadcn/uiの`--background`、`--foreground`、`--card`、`--muted`、`--border`、`--primary`、`--destructive`、`--ring`を継承し、KeepKit固有の値は`--keep-*`に分離されます。`KeepKitProvider theme="compact"`、`variables`、`highContrast`、`reducedMotion`も利用できます。`keepKitTheme`は`@keepkit/ui/tailwind`から、分割CSSは`@keepkit/ui/styles/base.css`、`button.css`、`collection.css`、`sync.css`から読み込めます。`KeepButton icons={{ save, saved, remove }}`と`iconOnly`でLucide等へ差し替えられます。
|
|
75
|
+
|
|
76
|
+
Viewer向け保存カードとカスタムテーマは次のように構成できます。`savedAt`、タイトル、タグ、詳細リンク、保存解除ボタン、期限切れ表示は`KeepItemCard`の標準markupに含まれます。
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
import "@keepkit/ui/theme.css";
|
|
80
|
+
import { KeepItemCard, KeepThemeProvider } from "@keepkit/ui";
|
|
81
|
+
|
|
82
|
+
<KeepThemeProvider
|
|
83
|
+
theme="rounded"
|
|
84
|
+
variables={{ "--keep-primary": "oklch(0.55 0.2 250)", "--keep-card-gap": "0.75rem" }}
|
|
85
|
+
>
|
|
86
|
+
<KeepItemCard
|
|
87
|
+
item={item}
|
|
88
|
+
href={`/guide/${item.id}`}
|
|
89
|
+
getImageProps={(entry) => ({ src: entry.meta.image, alt: entry.meta.title })}
|
|
90
|
+
/>
|
|
91
|
+
</KeepThemeProvider>;
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
状態は色だけに依存せず、ラベルと属性でも利用できます。`[data-state="saved"]`、`[data-state="unsaved"]`、`[data-loading="true"]`、`[data-state="error"]`、`[data-state="empty"]`、`[data-state="stale"]`、`[data-status="expired"]`、`[data-status="removed"]`、`[data-state="selected"]`をホストCSSやTailwindのdata variantから参照できます。既存テーマから移行する場合は、`@keepkit/ui/theme.css`を残したまま`--keepkit-*`参照を`--keep-*`へ置き換えてください。Pages Routerでは`createNextPagesRouterAdapter(router)`を`urlAdapter`へ注入します。
|
|
61
95
|
|
|
62
96
|
一覧のqueryは次の形式に統一されています。
|
|
63
97
|
|
|
@@ -109,7 +143,41 @@ function SavedArticles() {
|
|
|
109
143
|
`keep.Collection` includes search, sorting, pagination, loading/empty/error states, and polite live announcements. Search is debounced by 300ms by default. Enable `features={{ tagFilter: true, bulkActions: true }}` for tag filtering and bulk operations. Use the individual `KeepList`, `KeepSearchInput`, `KeepSortSelect`, `KeepPagination`, `KeepItemCheckbox`, and `KeepTagEditor` primitives when you need a custom layout. `KeepBulkActions` supports render props and exposes `isAllSelected` / `toggleSelectAll` for visible-item selection. `KeepNoteEditor` auto-saves dirty notes after 300ms by default; set `debounceMs={0}` to use form submission only. Mount `KeepAnnouncer` (`KeepAnnouncements` alias) when you need the live region explicitly.
|
|
110
144
|
`KeepItemCard` accepts `href`, `onOpen`, `linkTarget`, and `linkComponent` for detail-page navigation. Links are disabled for unavailable `status` values such as private or expired. `KeepBackup` provides JSON export, merge/replace import, result counts, and quota-error messaging.
|
|
111
145
|
|
|
112
|
-
In v0.
|
|
146
|
+
In v0.13.0, use `KeepCollection urlSync` with `layout="list" | "grid" | "compact"`, `KeepBulkActions selectionScope="page" | "query" | "all"`, and `KeepUndo`. `createNextPagesRouterAdapter` is the injected adapter for Next.js Pages Router. `locale` includes complete dictionaries for 16 built-in locales; `labels` overrides individual entries. Authenticated sync is available through `createAuthenticatedSyncKit`.
|
|
147
|
+
Phase 4 adds `KeepItemStatusBadge`, `KeepStaleNotice`, `KeepPruneStaleButton`, `KeepSyncStatusBanner`, and `KeepSyncRecoveryDialog` for unavailable items, sync failures, conflict resolution, and backup recovery. Import `@keepkit/ui/theme.css` or `@keepkit/ui/tailwind.css` for the opt-in theme layer.
|
|
148
|
+
|
|
149
|
+
### Tailwind and shadcn theme
|
|
150
|
+
|
|
151
|
+
```tsx
|
|
152
|
+
import "@keepkit/ui/tailwind.css";
|
|
153
|
+
import { KeepThemeProvider, KeepCollection } from "@keepkit/ui";
|
|
154
|
+
|
|
155
|
+
<KeepThemeProvider theme="compact" mode="system" density="comfortable" radius="medium">
|
|
156
|
+
<KeepCollection layout="grid" />
|
|
157
|
+
</KeepThemeProvider>;
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
Presets include `default`, `compact`, `minimal`, `rounded`, `high-contrast`, and `dark`. The scoped `--keep-*` tokens inherit shadcn/ui variables, and the provider supports `.dark`, system preference, `variables`, `highContrast`, and `reducedMotion`. Use `keepKitTheme` from `@keepkit/ui/tailwind`, feature CSS from `@keepkit/ui/styles/*`, and `icons={{ save, saved, remove }}` / `iconOnly` on `KeepButton` for Lucide or shadcn replacements. The existing Next.js Pages Router recipe remains unchanged: inject `createNextPagesRouterAdapter(router)` into `urlAdapter`.
|
|
161
|
+
|
|
162
|
+
For a Viewer card, the default `KeepItemCard` markup includes the title, tags, saved date, detail link, remove action, thumbnail, and expired-item notice. Override tokens without replacing the markup, or use render props for a complete replacement:
|
|
163
|
+
|
|
164
|
+
```tsx
|
|
165
|
+
import "@keepkit/ui/theme.css";
|
|
166
|
+
import { KeepItemCard, KeepThemeProvider } from "@keepkit/ui";
|
|
167
|
+
|
|
168
|
+
<KeepThemeProvider
|
|
169
|
+
theme="rounded"
|
|
170
|
+
variables={{ "--keep-primary": "oklch(0.55 0.2 250)", "--keep-card-gap": "0.75rem" }}
|
|
171
|
+
>
|
|
172
|
+
<KeepItemCard
|
|
173
|
+
item={item}
|
|
174
|
+
href={`/guide/${item.id}`}
|
|
175
|
+
getImageProps={(entry) => ({ src: entry.meta.image, alt: entry.meta.title })}
|
|
176
|
+
/>
|
|
177
|
+
</KeepThemeProvider>;
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
Use `[data-state="saved"]`, `[data-state="unsaved"]`, `[data-loading="true"]`, `[data-state="error"]`, `[data-state="empty"]`, `[data-state="stale"]`, `[data-status="expired"]`, `[data-status="removed"]`, and `[data-state="selected"]` from host CSS or Tailwind data variants. For migration, keep importing `@keepkit/ui/theme.css` while replacing direct `--keepkit-*` references with `--keep-*`. In the Pages Router, inject `createNextPagesRouterAdapter(router)` into `urlAdapter`.
|
|
113
181
|
|
|
114
182
|
Collection queries use one canonical shape: `targetType`, `tags`, `search`, `sort`, `pagination`, `filter`, and `savedBetween`. Saved item inputs contain only `id`, `meta`, `targetType`, `note`, and `tags`; KeepKit owns persistence timestamps.
|
|
115
183
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { HTMLAttributes, ReactNode,
|
|
3
|
-
import { ImportItemsResult, KeepListQuery, KeepItem, KeepUrlSyncOptions, KeepItemInput } from '@keepkit/core/core';
|
|
4
|
-
export { KeepItem, KeepItemInput, KeepListQuery, KeepScope, KeepSyncStatus, KeepUndoState, KeepUrlSyncOptions } from '@keepkit/core/core';
|
|
2
|
+
import { HTMLAttributes, ReactNode, ComponentType, ImgHTMLAttributes, MouseEvent, HTMLAttributeAnchorTarget, InputHTMLAttributes, FormHTMLAttributes, ButtonHTMLAttributes, SelectHTMLAttributes, CSSProperties } from 'react';
|
|
3
|
+
import { ImportItemsResult, KeepListQuery, KeepItem, KeepUrlSyncOptions, KeepItemStatus, KeepSyncConflict, KeepItemInput } from '@keepkit/core/core';
|
|
4
|
+
export { AuthenticatedSyncAuthContext, AuthenticatedSyncKit, AuthenticatedSyncKitOptions, AuthenticatedSyncRequestContext, AuthenticatedSyncTransport, KeepItem, KeepItemInput, KeepListQuery, KeepScope, KeepSyncConflict, KeepSyncResolution, KeepSyncState, KeepSyncStatus, KeepUndoState, KeepUrlSyncOptions, createAuthenticatedSyncKit } from '@keepkit/core/core';
|
|
5
5
|
import { KeepButtonProps as KeepButtonProps$1, UseKeepListResult, KeepErrorBoundaryProps, CreateKeepKitOptions as CreateKeepKitOptions$1, KeepProviderProps, useKeepContext, useKeepItem, useKeepList, KeepShortcutOptions } from '@keepkit/core/react';
|
|
6
6
|
export { KeepButtonState, KeepContextValue, KeepErrorBoundary, KeepErrorBoundaryProps, KeepProvider, KeepProviderProps, KeepShortcutOptions, useKeepContext, useKeepItem, useKeepList, useKeepShortcut } from '@keepkit/core/react';
|
|
7
7
|
export { FallbackStorageAdapter, IndexedDBAdapter, IndexedDBSyncQueueAdapter, LocalStorageAdapter, LocalStorageSyncQueueAdapter, SyncStorageAdapter, createBrowserStorageAdapter, createStorageAdapter } from '@keepkit/core/storage';
|
|
@@ -23,6 +23,18 @@ type KeepButtonLabels = {
|
|
|
23
23
|
savedAriaLabel?: string;
|
|
24
24
|
unsavedAriaLabel?: string;
|
|
25
25
|
};
|
|
26
|
+
type KeepButtonIconProps = {
|
|
27
|
+
"aria-hidden"?: boolean;
|
|
28
|
+
className?: string;
|
|
29
|
+
};
|
|
30
|
+
type KeepButtonIcon = ReactNode | ComponentType<KeepButtonIconProps>;
|
|
31
|
+
type KeepButtonIcons = {
|
|
32
|
+
save?: KeepButtonIcon;
|
|
33
|
+
saved?: KeepButtonIcon;
|
|
34
|
+
remove?: KeepButtonIcon;
|
|
35
|
+
loading?: KeepButtonIcon;
|
|
36
|
+
error?: KeepButtonIcon;
|
|
37
|
+
};
|
|
26
38
|
|
|
27
39
|
type KeepBulkActionsState<TMeta = Record<string, unknown>> = {
|
|
28
40
|
items: KeepItem<TMeta>[];
|
|
@@ -63,9 +75,13 @@ declare function KeepBulkActions<TMeta = Record<string, unknown>>({ query, selec
|
|
|
63
75
|
|
|
64
76
|
type KeepButtonProps<TMeta = Record<string, unknown>> = KeepButtonProps$1<TMeta> & {
|
|
65
77
|
labels?: KeepButtonLabels;
|
|
78
|
+
icons?: KeepButtonIcons;
|
|
79
|
+
iconOnly?: boolean;
|
|
80
|
+
showLabel?: boolean;
|
|
81
|
+
iconClassName?: string;
|
|
66
82
|
};
|
|
67
83
|
/** A style-free save toggle with localized labels and the core button's ARIA/asChild behavior. */
|
|
68
|
-
declare function KeepButton<TMeta = Record<string, unknown>>({ labels, ...props }: KeepButtonProps<TMeta>): react.JSX.Element;
|
|
84
|
+
declare function KeepButton<TMeta = Record<string, unknown>>({ labels, icons, iconOnly, showLabel, iconClassName, ...props }: KeepButtonProps<TMeta>): react.JSX.Element;
|
|
69
85
|
|
|
70
86
|
type KeepItemCardState<TMeta = Record<string, unknown>> = {
|
|
71
87
|
item: KeepItem<TMeta>;
|
|
@@ -95,12 +111,14 @@ type KeepItemCardProps<TMeta = Record<string, unknown>> = Omit<HTMLAttributes<HT
|
|
|
95
111
|
renderImage?: (props: KeepImageProps, item: KeepItem<TMeta>) => ReactNode;
|
|
96
112
|
renderTags?: (tags: string[], item: KeepItem<TMeta>) => ReactNode;
|
|
97
113
|
showTags?: boolean;
|
|
114
|
+
showSavedAt?: boolean;
|
|
98
115
|
imageAlt?: string;
|
|
99
116
|
render?: RenderProp<KeepItemCardState<TMeta>>;
|
|
100
117
|
children?: ReactNode | RenderProp<KeepItemCardState<TMeta>>;
|
|
101
118
|
removeLabel?: string;
|
|
102
119
|
onRemoveError?: (error: unknown) => void;
|
|
103
120
|
onRemoved?: (item: KeepItem<TMeta>) => void;
|
|
121
|
+
onRetry?: (item: KeepItem<TMeta>) => void | Promise<void>;
|
|
104
122
|
showSaveButton?: boolean;
|
|
105
123
|
saveButtonLabels?: KeepButtonLabels;
|
|
106
124
|
asChild?: boolean;
|
|
@@ -112,7 +130,7 @@ type KeepItemCardProps<TMeta = Record<string, unknown>> = Omit<HTMLAttributes<HT
|
|
|
112
130
|
linkRel?: string;
|
|
113
131
|
};
|
|
114
132
|
/** A low-dependency item presentation primitive. The default markup can be replaced with render props. */
|
|
115
|
-
declare function KeepItemCard<TMeta = Record<string, unknown>>({ item, title, getTitle, getImageProps, imageComponent: ImageComponent, renderImage, renderTags, showTags, imageAlt, render, children, removeLabel, onRemoveError, onRemoved, showSaveButton, saveButtonLabels, asChild, href: hrefOption, onOpen, linkTarget, linkComponent: LinkComponent, linkTargetAttribute, linkRel, className, ...rootProps }: KeepItemCardProps<TMeta>): react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
|
|
133
|
+
declare function KeepItemCard<TMeta = Record<string, unknown>>({ item, title, getTitle, getImageProps, imageComponent: ImageComponent, renderImage, renderTags, showTags, showSavedAt, imageAlt, render, children, removeLabel, onRemoveError, onRemoved, onRetry, showSaveButton, saveButtonLabels, asChild, href: hrefOption, onOpen, linkTarget, linkComponent: LinkComponent, linkTargetAttribute, linkRel, className, ...rootProps }: KeepItemCardProps<TMeta>): react.ReactElement<unknown, string | react.JSXElementConstructor<any>>;
|
|
116
134
|
|
|
117
135
|
type KeepListState<TMeta = Record<string, unknown>> = UseKeepListResult<TMeta>;
|
|
118
136
|
type KeepListProps<TMeta = Record<string, unknown>> = Omit<HTMLAttributes<HTMLElement>, "children"> & {
|
|
@@ -192,6 +210,13 @@ type KeepItemCheckboxProps<TMeta = Record<string, unknown>> = Omit<InputHTMLAttr
|
|
|
192
210
|
/** A reusable accessible selection checkbox for a saved item. */
|
|
193
211
|
declare function KeepItemCheckbox<TMeta = Record<string, unknown>>({ item, checked, label, onCheckedChange, "aria-label": ariaLabel, ...props }: KeepItemCheckboxProps<TMeta>): react.JSX.Element;
|
|
194
212
|
|
|
213
|
+
type KeepItemStatusBadgeProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
|
|
214
|
+
status?: KeepItemStatus;
|
|
215
|
+
label?: ReactNode;
|
|
216
|
+
};
|
|
217
|
+
/** Displays the normalized availability state of a saved item. */
|
|
218
|
+
declare function KeepItemStatusBadge({ status, label, className, ...props }: KeepItemStatusBadgeProps): react.JSX.Element;
|
|
219
|
+
|
|
195
220
|
type KeepLayoutProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
|
|
196
221
|
layout?: KeepLayoutPreset;
|
|
197
222
|
children?: ReactNode;
|
|
@@ -224,6 +249,46 @@ type KeepNoteEditorProps<TMeta = Record<string, unknown>> = Omit<FormHTMLAttribu
|
|
|
224
249
|
/** A controlled-by-default note editor that persists through useKeepItem. */
|
|
225
250
|
declare function KeepNoteEditor<TMeta = Record<string, unknown>>({ item, label, saveLabel, placeholder, debounceMs, onSaved, onSaveError, render, children, asChild, className, ...formProps }: KeepNoteEditorProps<TMeta>): react.JSX.Element;
|
|
226
251
|
|
|
252
|
+
type KeepStaleNoticeProps<TMeta = Record<string, unknown>> = Omit<HTMLAttributes<HTMLElement>, "children"> & {
|
|
253
|
+
item: KeepItem<TMeta>;
|
|
254
|
+
onRetry?: (item: KeepItem<TMeta>) => void | Promise<void>;
|
|
255
|
+
onRemoved?: (item: KeepItem<TMeta>) => void;
|
|
256
|
+
retryLabel?: ReactNode;
|
|
257
|
+
removeLabel?: ReactNode;
|
|
258
|
+
children?: ReactNode;
|
|
259
|
+
};
|
|
260
|
+
/** Provides retry and remove actions for an item whose source is no longer available. */
|
|
261
|
+
declare function KeepStaleNotice<TMeta = Record<string, unknown>>({ item, onRetry, onRemoved, retryLabel, removeLabel, children, className, ...props }: KeepStaleNoticeProps<TMeta>): react.JSX.Element;
|
|
262
|
+
type KeepPruneStaleButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
|
|
263
|
+
statuses?: KeepItemStatus[];
|
|
264
|
+
label?: ReactNode;
|
|
265
|
+
onPruned?: (ids: string[]) => void;
|
|
266
|
+
children?: ReactNode;
|
|
267
|
+
};
|
|
268
|
+
/** Removes all unavailable items through the provider's undo-capable batch action. */
|
|
269
|
+
declare function KeepPruneStaleButton<TMeta = Record<string, unknown>>({ statuses, label, onPruned, children, disabled, ...props }: KeepPruneStaleButtonProps): react.JSX.Element;
|
|
270
|
+
|
|
271
|
+
type KeepSyncRecoveryDialogProps<TMeta = Record<string, unknown>> = Omit<HTMLAttributes<HTMLElement>, "children" | "title"> & {
|
|
272
|
+
open?: boolean;
|
|
273
|
+
onOpenChange?: (open: boolean) => void;
|
|
274
|
+
conflicts?: KeepSyncConflict<TMeta>[];
|
|
275
|
+
onManualMerge?: (conflict: KeepSyncConflict<TMeta>) => KeepItem<TMeta> | Promise<KeepItem<TMeta>>;
|
|
276
|
+
backup?: ReactNode;
|
|
277
|
+
showBackupControls?: boolean;
|
|
278
|
+
title?: ReactNode;
|
|
279
|
+
children?: ReactNode;
|
|
280
|
+
};
|
|
281
|
+
/** Resolves queued sync conflicts and guides users to restore a backup after data corruption. */
|
|
282
|
+
declare function KeepSyncRecoveryDialog<TMeta = Record<string, unknown>>({ open, onOpenChange, conflicts, onManualMerge, backup, showBackupControls, title, children, className, ...props }: KeepSyncRecoveryDialogProps<TMeta>): react.JSX.Element | null;
|
|
283
|
+
|
|
284
|
+
type KeepSyncStatusBannerProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
|
|
285
|
+
onRetry?: () => void | Promise<void>;
|
|
286
|
+
onResolveConflicts?: () => void;
|
|
287
|
+
children?: ReactNode;
|
|
288
|
+
};
|
|
289
|
+
/** Announces synchronization failures and exposes retry or conflict-recovery entry points. */
|
|
290
|
+
declare function KeepSyncStatusBanner({ onRetry, onResolveConflicts, children, className, ...props }: KeepSyncStatusBannerProps): react.JSX.Element | null;
|
|
291
|
+
|
|
227
292
|
type KeepTagEditorState = {
|
|
228
293
|
tags: string[];
|
|
229
294
|
setTags: (tags: string[]) => void;
|
|
@@ -336,8 +401,45 @@ declare function KeepAnnouncements<TMeta = Record<string, unknown>>({ messages,
|
|
|
336
401
|
/** Singular alias for applications that mount one announcer explicitly. */
|
|
337
402
|
declare const KeepAnnouncer: typeof KeepAnnouncements;
|
|
338
403
|
|
|
339
|
-
type
|
|
404
|
+
type KeepThemeName = "default" | "compact" | "minimal" | "rounded" | "high-contrast" | "dark";
|
|
405
|
+
type KeepThemeMode = "light" | "dark" | "system";
|
|
406
|
+
type KeepThemeDensity = "compact" | "comfortable" | "spacious";
|
|
407
|
+
type KeepThemeRadius = "none" | "small" | "medium" | "large" | "full";
|
|
408
|
+
type KeepThemeVariables = Record<`--keep-${string}`, string | number>;
|
|
409
|
+
type KeepThemeProviderProps = {
|
|
410
|
+
children?: ReactNode;
|
|
411
|
+
className?: string;
|
|
412
|
+
id?: string;
|
|
413
|
+
title?: string;
|
|
414
|
+
role?: string;
|
|
415
|
+
tabIndex?: number;
|
|
416
|
+
"aria-label"?: string;
|
|
417
|
+
"aria-labelledby"?: string;
|
|
418
|
+
"aria-describedby"?: string;
|
|
419
|
+
"data-testid"?: string;
|
|
420
|
+
[key: `data-${string}`]: string | undefined;
|
|
421
|
+
theme?: KeepThemeName;
|
|
422
|
+
mode?: KeepThemeMode;
|
|
423
|
+
density?: KeepThemeDensity;
|
|
424
|
+
radius?: KeepThemeRadius;
|
|
425
|
+
accentColor?: "blue" | "green" | "violet" | "orange" | "rose" | (string & {});
|
|
426
|
+
highContrast?: boolean;
|
|
427
|
+
reducedMotion?: boolean;
|
|
428
|
+
variables?: KeepThemeVariables;
|
|
429
|
+
style?: CSSProperties & KeepThemeVariables;
|
|
430
|
+
asChild?: boolean;
|
|
431
|
+
};
|
|
432
|
+
/** Scopes KeepKit tokens and opt-in component styles to one subtree. */
|
|
433
|
+
declare function KeepThemeProvider({ children, theme, mode, density, radius, accentColor, highContrast, reducedMotion, variables, style, className, asChild, ...props }: KeepThemeProviderProps): react.JSX.Element;
|
|
434
|
+
|
|
435
|
+
type KeepUiLabelKey = "save" | "saved" | "remove" | "loading" | "saving" | "syncing" | "error" | "allTags" | "tags" | "filterTags" | "note" | "saveNote" | "noItems" | "loadingItems" | "errorItems" | "search" | "sort" | "newest" | "oldest" | "savedNewest" | "savedOldest" | "updatedNewest" | "updatedOldest" | "previousPage" | "nextPage" | "pagination" | "page" | "selectItems" | "selectedCount" | "deleteSelected" | "tagsToApply" | "applyTags" | "savedMessage" | "removedMessage" | "undo" | "undoAvailable" | "selectionScope" | "currentPage" | "searchResults" | "allItems" | "statusAvailable" | "noteSavedMessage" | "exportData" | "importData" | "importMode" | "merge" | "replace" | "importedCount" | "failedCount" | "storageQuotaError" | "statusExpired" | "statusRemoved" | "statusDeleted" | "statusPrivate" | "statusUnknown" | "retry" | "removeFromList" | "pruneStale" | "retrySync" | "resolveSync" | "keepLocal" | "useServer" | "manualMerge" | "close" | "backupRecovery" | "backupRecoveryDescription" | "syncPending" | "syncSynced" | "syncConflict";
|
|
340
436
|
type KeepUiLabels = Partial<Record<KeepUiLabelKey, string>>;
|
|
437
|
+
type KeepUiLocaleLabels = Record<KeepUiLabelKey, string>;
|
|
438
|
+
|
|
439
|
+
declare const KEEP_BUILT_IN_LOCALES: readonly ["en", "ja", "ko", "zh-Hans", "zh-Hant", "th", "fr", "es", "pt-BR", "it", "de", "ru", "fil", "vi", "id", "ms"];
|
|
440
|
+
type KeepUiLocale = (typeof KEEP_BUILT_IN_LOCALES)[number];
|
|
441
|
+
declare function getKeepLocaleLabels(locale?: string): KeepUiLocaleLabels;
|
|
442
|
+
|
|
341
443
|
type KeepUiLabelContext = {
|
|
342
444
|
locale?: string;
|
|
343
445
|
labels: Readonly<Record<KeepUiLabelKey, string>>;
|
|
@@ -352,18 +454,27 @@ type KeepUiProviderProps = {
|
|
|
352
454
|
labelResolver?: KeepUiLabelContext["labelResolver"];
|
|
353
455
|
children?: ReactNode;
|
|
354
456
|
};
|
|
355
|
-
/** Provides one locale-aware label source to every UI primitive. */
|
|
457
|
+
/** Provides one complete locale-aware label source to every UI primitive. */
|
|
356
458
|
declare function KeepUiProvider({ labels, locale, labelResolver, children }: KeepUiProviderProps): react.JSX.Element;
|
|
357
459
|
declare function useKeepUiLabels(): KeepUiLabelContext;
|
|
358
|
-
declare function getKeepLocaleLabels(locale?: string): KeepUiLabels;
|
|
359
460
|
|
|
360
|
-
type KeepKitProviderProps<TMeta = Record<string, unknown>> = Omit<KeepProviderProps<TMeta>, "children"> & Omit<KeepUiProviderProps, "children"> & {
|
|
461
|
+
type KeepKitProviderProps<TMeta = Record<string, unknown>> = Omit<KeepProviderProps<TMeta>, "children"> & Omit<KeepUiProviderProps, "children"> & Omit<KeepThemeProviderProps, "children"> & {
|
|
361
462
|
children?: ReactNode;
|
|
362
463
|
};
|
|
363
464
|
/** Combines the core store, UI labels, and the global live announcer. */
|
|
364
|
-
declare function KeepKitProvider<TMeta = Record<string, unknown>>({ labels, locale, labelResolver, children, ...providerProps }: KeepKitProviderProps<TMeta>): react.JSX.Element;
|
|
465
|
+
declare function KeepKitProvider<TMeta = Record<string, unknown>>({ labels, locale, labelResolver, theme, mode, density, radius, accentColor, highContrast, reducedMotion, variables, className: themeClassName, style: themeStyle, asChild: themeAsChild, children, ...providerProps }: KeepKitProviderProps<TMeta>): react.JSX.Element;
|
|
365
466
|
|
|
366
467
|
type CreateKeepKitOptions<TMeta = Record<string, unknown>> = CreateKeepKitOptions$1<TMeta> & Omit<KeepUiProviderProps, "children"> & {
|
|
468
|
+
theme?: KeepThemeName;
|
|
469
|
+
mode?: KeepThemeMode;
|
|
470
|
+
density?: KeepThemeDensity;
|
|
471
|
+
radius?: KeepThemeRadius;
|
|
472
|
+
accentColor?: KeepThemeProviderProps["accentColor"];
|
|
473
|
+
highContrast?: boolean;
|
|
474
|
+
reducedMotion?: boolean;
|
|
475
|
+
variables?: KeepThemeVariables;
|
|
476
|
+
themeClassName?: string;
|
|
477
|
+
themeStyle?: KeepThemeProviderProps["style"];
|
|
367
478
|
getTitle?: (item: KeepItem<TMeta>) => ReactNode;
|
|
368
479
|
getImageProps?: (item: KeepItem<TMeta>, title: ReactNode) => KeepImageProps | undefined;
|
|
369
480
|
};
|
|
@@ -380,4 +491,4 @@ type KeepKit<TMeta = Record<string, unknown>> = {
|
|
|
380
491
|
/** Create one typed application API for the core and standard UI layer. */
|
|
381
492
|
declare function createKeepKit<TMeta = Record<string, unknown>>(options?: CreateKeepKitOptions<TMeta>): KeepKit<TMeta>;
|
|
382
493
|
|
|
383
|
-
export { type CreateKeepKitOptions, KeepAnnouncements, type KeepAnnouncementsProps, KeepAnnouncer, KeepBackup, type KeepBackupProps, KeepBulkActions, type KeepBulkActionsProps, type KeepBulkActionsState, KeepButton, type KeepButtonLabels, type KeepButtonProps, KeepCollection, type KeepCollectionFeature, type KeepCollectionProps, KeepEmptyState, type KeepEmptyStateProps, type KeepImageProps, KeepItemCard, type KeepItemCardLinkProps, type KeepItemCardProps, type KeepItemCardState, KeepItemCheckbox, type KeepItemCheckboxProps, type KeepKit, KeepKitProvider, type KeepKitProviderProps, KeepLayout, type KeepLayoutPreset, type KeepLayoutProps, KeepList, type KeepListProps, type KeepListState, KeepNoteEditor, type KeepNoteEditorProps, type KeepNoteEditorState, type KeepPagesRouterLike, KeepPagination, type KeepPaginationProps, type KeepPaginationState, KeepSearchInput, type KeepSearchInputProps, type KeepSelectionScope, KeepSortSelect, type KeepSortSelectProps, type KeepSortValue, KeepStatus, type KeepStatusLabels, type KeepStatusProps, type KeepStatusState, type KeepStatusValue, KeepTagEditor, type KeepTagEditorProps, type KeepTagEditorState, KeepTagFilter, type KeepTagFilterProps, type KeepTagFilterState, type KeepUiLabelContext, type KeepUiLabelKey, type KeepUiLabels, KeepUiProvider, type KeepUiProviderProps, KeepUndo, type KeepUndoProps, type KeepUrlAdapter, type RenderProp, createKeepKit, createNextPagesRouterAdapter, getKeepLocaleLabels, isAllSelected, toggleSelectAll, useKeepUiLabels, useKeepUrlSync };
|
|
494
|
+
export { type CreateKeepKitOptions, KeepAnnouncements, type KeepAnnouncementsProps, KeepAnnouncer, KeepBackup, type KeepBackupProps, KeepBulkActions, type KeepBulkActionsProps, type KeepBulkActionsState, KeepButton, type KeepButtonIcon, type KeepButtonIconProps, type KeepButtonIcons, type KeepButtonLabels, type KeepButtonProps, KeepCollection, type KeepCollectionFeature, type KeepCollectionProps, KeepEmptyState, type KeepEmptyStateProps, type KeepImageProps, KeepItemCard, type KeepItemCardLinkProps, type KeepItemCardProps, type KeepItemCardState, KeepItemCheckbox, type KeepItemCheckboxProps, KeepItemStatusBadge, type KeepItemStatusBadgeProps, type KeepKit, KeepKitProvider, type KeepKitProviderProps, KeepLayout, type KeepLayoutPreset, type KeepLayoutProps, KeepList, type KeepListProps, type KeepListState, KeepNoteEditor, type KeepNoteEditorProps, type KeepNoteEditorState, type KeepPagesRouterLike, KeepPagination, type KeepPaginationProps, type KeepPaginationState, KeepPruneStaleButton, type KeepPruneStaleButtonProps, KeepSearchInput, type KeepSearchInputProps, type KeepSelectionScope, KeepSortSelect, type KeepSortSelectProps, type KeepSortValue, KeepStaleNotice, type KeepStaleNoticeProps, KeepStatus, type KeepStatusLabels, type KeepStatusProps, type KeepStatusState, type KeepStatusValue, KeepSyncRecoveryDialog, type KeepSyncRecoveryDialogProps, KeepSyncStatusBanner, type KeepSyncStatusBannerProps, KeepTagEditor, type KeepTagEditorProps, type KeepTagEditorState, KeepTagFilter, type KeepTagFilterProps, type KeepTagFilterState, type KeepThemeDensity, type KeepThemeMode, type KeepThemeName, KeepThemeProvider, type KeepThemeProviderProps, type KeepThemeRadius, type KeepThemeVariables, type KeepUiLabelContext, type KeepUiLabelKey, type KeepUiLabels, type KeepUiLocale, type KeepUiLocaleLabels, KeepUiProvider, type KeepUiProviderProps, KeepUndo, type KeepUndoProps, type KeepUrlAdapter, type RenderProp, createKeepKit, createNextPagesRouterAdapter, getKeepLocaleLabels, isAllSelected, toggleSelectAll, useKeepUiLabels, useKeepUrlSync };
|