@sparklingopinions/sparkling-ui 0.4.2 → 0.6.0

package/dist/components/internal/menu.d.ts

@@ -0,0 +1,46 @@
+export interface DropdownMenuAction {
+    type: 'action';
+    label: string;
+    action?: string;
+    icon?: string;
+    variant?: 'danger';
+    shortcut?: string;
+    /** Asks first, with this wording; `confirmed: true` asks with the generic wording. */
+    confirm?: {
+        message: string;
+        title?: string;
+        acceptLabel?: string;
+    };
+    confirmed?: boolean;
+    [key: string]: unknown;
+}
+export type DropdownMenuEntry = DropdownMenuAction | {
+    type: 'separator';
+};
+/** The confirm step's wording, shared by DropdownMenu and ContextMenu. */
+export interface MenuConfirmLabels {
+    /** Passed back with every clicked item, e.g. the record the menu acts on. */
+    id?: string;
+    confirmTitle?: string;
+    confirmMessage?: string;
+    confirmLabel?: string;
+    deleteLabel?: string;
+    cancelLabel?: string;
+}
+export declare const menuConfirmDefaults: {
+    id: undefined;
+    confirmTitle: string;
+    confirmMessage: string;
+    confirmLabel: string;
+    deleteLabel: string;
+    cancelLabel: string;
+};
+export declare const menuContentClass = "z-[1100] rounded-xl border border-sui-line-subtle bg-sui-surface p-1 shadow-lg outline-hidden data-[state=open]:animate-sui-menu-in";
+export declare const menuItemClass = "relative rounded-lg text-sm text-sui-ink transition-colors duration-150 outline-hidden hover:bg-sui-sunken focus-visible:sui-ring-inset data-highlighted:bg-sui-sunken";
+export declare const menuSeparatorClass = "my-1 border-t border-sui-line-subtle";
+/** Runs an item: asks first when it says so, then emits it with the menu's `id`. */
+export declare function useMenuSelect(props: Required<Omit<MenuConfirmLabels, 'id'>> & {
+    id?: string;
+}, emit: (item: DropdownMenuAction & {
+    id?: string;
+}) => void): (item: DropdownMenuAction) => Promise<void>;

package/dist/components/internal/menu.js

@@ -0,0 +1,33 @@
+import { useConfirm as e } from "../../composables/useConfirm.js";
+//#region src/components/internal/menu.ts
+var t = {
+	id: void 0,
+	confirmTitle: "Are you sure?",
+	confirmMessage: "This can't be undone.",
+	confirmLabel: "Confirm",
+	deleteLabel: "Delete",
+	cancelLabel: "Cancel"
+}, n = "z-[1100] rounded-xl border border-sui-line-subtle bg-sui-surface p-1 shadow-lg outline-hidden data-[state=open]:animate-sui-menu-in", r = "relative rounded-lg text-sm text-sui-ink transition-colors duration-150 outline-hidden hover:bg-sui-sunken focus-visible:sui-ring-inset data-highlighted:bg-sui-sunken", i = "my-1 border-t border-sui-line-subtle";
+function a(t, n) {
+	let r = e();
+	return async function(e) {
+		if (e.confirm || e.confirmed) {
+			let n = e.variant === "danger" || e.action === "delete";
+			if (!await r({
+				title: e.confirm?.title ?? t.confirmTitle,
+				message: e.confirm?.message ?? t.confirmMessage,
+				cancelLabel: t.cancelLabel,
+				confirmLabel: e.confirm?.acceptLabel ?? (e.action === "delete" ? t.deleteLabel : t.confirmLabel),
+				confirmVariant: n ? "danger" : "primary"
+			})) return;
+		}
+		n({
+			id: t.id,
+			...e
+		});
+	};
+}
+//#endregion
+export { t as menuConfirmDefaults, n as menuContentClass, r as menuItemClass, i as menuSeparatorClass, a as useMenuSelect };
+
+//# sourceMappingURL=menu.js.map

package/dist/components/internal/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","names":["menuConfirmDefaults","menuContentClass","menuItemClass","menuSeparatorClass","useMenuSelect","confirm","useConfirm","item","destructive","props"],"sources":["../../../src/components/internal/menu.ts"],"sourcesContent":["import { useConfirm } from '../../composables/useConfirm'\n\nexport interface DropdownMenuAction {\n  type: 'action'\n  label: string\n  action?: string\n  icon?: string\n  variant?: 'danger'\n  shortcut?: string\n  /** Asks first, with this wording; `confirmed: true` asks with the generic wording. */\n  confirm?: { message: string; title?: string; acceptLabel?: string }\n  confirmed?: boolean\n  [key: string]: unknown\n}\n\nexport type DropdownMenuEntry = DropdownMenuAction | { type: 'separator' }\n\n/** The confirm step's wording, shared by DropdownMenu and ContextMenu. */\nexport interface MenuConfirmLabels {\n  /** Passed back with every clicked item, e.g. the record the menu acts on. */\n  id?: string\n  confirmTitle?: string\n  confirmMessage?: string\n  confirmLabel?: string\n  deleteLabel?: string\n  cancelLabel?: string\n}\n\nexport const menuConfirmDefaults = {\n  id: undefined,\n  confirmTitle: 'Are you sure?',\n  confirmMessage: \"This can't be undone.\",\n  confirmLabel: 'Confirm',\n  deleteLabel: 'Delete',\n  cancelLabel: 'Cancel'\n}\n\nexport const menuContentClass =\n  'z-[1100] rounded-xl border border-sui-line-subtle bg-sui-surface p-1 shadow-lg outline-hidden data-[state=open]:animate-sui-menu-in'\nexport const menuItemClass =\n  'relative rounded-lg text-sm text-sui-ink transition-colors duration-150 outline-hidden hover:bg-sui-sunken focus-visible:sui-ring-inset data-highlighted:bg-sui-sunken'\nexport const menuSeparatorClass = 'my-1 border-t border-sui-line-subtle'\n\n/** Runs an item: asks first when it says so, then emits it with the menu's `id`. */\nexport function useMenuSelect(\n  props: Required<Omit<MenuConfirmLabels, 'id'>> & { id?: string },\n  emit: (item: DropdownMenuAction & { id?: string }) => void\n) {\n  const confirm = useConfirm()\n\n  return async function select(item: DropdownMenuAction) {\n    if (item.confirm || item.confirmed) {\n      const destructive = item.variant === 'danger' || item.action === 'delete'\n      const confirmed = await confirm({\n        title: item.confirm?.title ?? props.confirmTitle,\n        message: item.confirm?.message ?? props.confirmMessage,\n        cancelLabel: props.cancelLabel,\n        confirmLabel: item.confirm?.acceptLabel ?? (item.action === 'delete' ? props.deleteLabel : props.confirmLabel),\n        confirmVariant: destructive ? 'danger' : 'primary'\n      })\n      if (!confirmed) return\n    }\n    emit({ id: props.id, ...item })\n  }\n}\n"],"mappings":";;AA4BA,IAAaA,IAAsB;CACjC,IAAI,KAAA;CACJ,cAAc;CACd,gBAAgB;CAChB,cAAc;CACd,aAAa;CACb,aAAa;AACf,GAEaC,IACX,uIACWC,IACX,0KACWC,IAAqB;AAGlC,SAAgBC,EACd,GACA,GACA;CACA,IAAMC,IAAUC,EAAW;CAE3B,OAAO,eAAsB,GAA0B;EACrD,IAAIC,EAAK,WAAWA,EAAK,WAAW;GAClC,IAAMC,IAAcD,EAAK,YAAY,YAAYA,EAAK,WAAW;GAQjE,IAAI,CAAC,MAPmBF,EAAQ;IAC9B,OAAOE,EAAK,SAAS,SAASE,EAAM;IACpC,SAASF,EAAK,SAAS,WAAWE,EAAM;IACxC,aAAaA,EAAM;IACnB,cAAcF,EAAK,SAAS,gBAAgBA,EAAK,WAAW,WAAWE,EAAM,cAAcA,EAAM;IACjG,gBAAgBD,IAAc,WAAW;GAC3C,CAAC,GACe;EAClB;EACA,EAAK;GAAE,IAAIC,EAAM;GAAI,GAAGF;EAAK,CAAC;CAChC;AACF"}

package/dist/composables/toast.d.ts

@@ -1,23 +1,38 @@
-export type ToastSeverity = 'info' | 'success' | 'error';
+export type ToastSeverity = 'info' | 'success' | 'warning' | 'error';
+/** A button on the toast: pressing it runs `onClick`, then closes the toast. */
+export interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+/** Why a toast left: one of its actions, its close button (or Escape), or its timer running out. */
+export type ToastDismissReason = 'action' | 'close' | 'timeout';
 export interface ToastOptions {
     /** A second line under the message. */
     detail?: string;
-    /** How long it stays, in ms; 0 keeps it until closed. */
+    /** How long it stays, in ms; 0 keeps it until closed. 3000 by default, 6000 with an action. */
     life?: number;
     closable?: boolean;
+    action?: ToastAction;
+    /** One or two; any more are ignored. */
+    actions?: ToastAction[];
+    onDismiss?: (reason: ToastDismissReason) => void;
 }
-export interface ToastItem extends ToastOptions {
+export interface ToastItem extends Omit<ToastOptions, 'action'> {
     id: number;
     severity: ToastSeverity;
     summary: string;
+    actions: ToastAction[];
     open: boolean;
 }
+/** A toast's actions, from `action` or `actions`, at most two. */
+export declare function toastActions(options: Pick<ToastOptions, 'action' | 'actions'>): ToastAction[];
 export declare const toasts: import("vue").ShallowReactive<ToastItem[]>;
-/** Removes a toast once its closing animation has had time to play. */
-export declare function removeToast(id: number): void;
+/** Closes a toast, then removes it once its closing animation has had time to play. */
+export declare function removeToast(id: number, reason?: ToastDismissReason): void;
 /** Shows a message in the app's <Toaster />: `toast.info('Saved')`. */
 export declare const toast: {
     info: (summary: string, options?: ToastOptions) => void;
     success: (summary: string, options?: ToastOptions) => void;
+    warning: (summary: string, options?: ToastOptions) => void;
     error: (summary: string, options?: ToastOptions) => void;
 };

package/dist/composables/toast.js

@@ -1,32 +1,40 @@
 import { shallowReactive as e } from "vue";
 //#region src/composables/toast.ts
-var t = e([]), n = 0;
-function r(e, r, i = {}) {
-	t.push({
-		life: 3e3,
-		...i,
-		id: n++,
+function t(e) {
+	return (e.actions ?? (e.action ? [e.action] : [])).slice(0, 2);
+}
+var n = e([]), r = 0;
+function i(e, i, a = {}) {
+	let { action: o, ...s } = a, c = t(a);
+	n.push({
+		...s,
+		life: a.life ?? (c.length ? 6e3 : 3e3),
+		actions: c,
+		id: r++,
 		severity: e,
-		summary: r,
+		summary: i,
 		open: !0
 	});
 }
-function i(e) {
-	let n = t.findIndex((t) => t.id === e);
-	n < 0 || (t[n] = {
-		...t[n],
+function a(e, t = "close") {
+	let r = n.findIndex((t) => t.id === e);
+	if (r < 0 || !n[r].open) return;
+	let i = n[r];
+	n[r] = {
+		...i,
 		open: !1
-	}, setTimeout(() => {
-		let n = t.findIndex((t) => t.id === e);
-		n >= 0 && t.splice(n, 1);
-	}, 500));
+	}, i.onDismiss?.(t), setTimeout(() => {
+		let t = n.findIndex((t) => t.id === e);
+		t >= 0 && n.splice(t, 1);
+	}, 500);
 }
-var a = {
-	info: (e, t) => r("info", e, t),
-	success: (e, t) => r("success", e, t),
-	error: (e, t) => r("error", e, t)
+var o = {
+	info: (e, t) => i("info", e, t),
+	success: (e, t) => i("success", e, t),
+	warning: (e, t) => i("warning", e, t),
+	error: (e, t) => i("error", e, t)
 };
 //#endregion
-export { i as removeToast, a as toast, t as toasts };
+export { a as removeToast, o as toast, t as toastActions, n as toasts };
 
 //# sourceMappingURL=toast.js.map

package/dist/composables/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","names":["toasts","shallowReactive","nextId","add","options","removeToast","index","item","id","at","toast","summary"],"sources":["../../src/composables/toast.ts"],"sourcesContent":["import { shallowReactive } from 'vue'\n\nexport type ToastSeverity = 'info' | 'success' | 'error'\n\nexport interface ToastOptions {\n  /** A second line under the message. */\n  detail?: string\n  /** How long it stays, in ms; 0 keeps it until closed. */\n  life?: number\n  closable?: boolean\n}\n\nexport interface ToastItem extends ToastOptions {\n  id: number\n  severity: ToastSeverity\n  summary: string\n  open: boolean\n}\n\n// The messages one <Toaster /> near the app root shows.\nexport const toasts = shallowReactive<ToastItem[]>([])\n\nlet nextId = 0\n\nfunction add(severity: ToastSeverity, summary: string, options: ToastOptions = {}) {\n  toasts.push({ life: 3000, ...options, id: nextId++, severity, summary, open: true })\n}\n\n/** Removes a toast once its closing animation has had time to play. */\nexport function removeToast(id: number) {\n  const index = toasts.findIndex((item) => item.id === id)\n  if (index < 0) return\n  toasts[index] = { ...toasts[index]!, open: false }\n  setTimeout(() => {\n    const at = toasts.findIndex((item) => item.id === id)\n    if (at >= 0) toasts.splice(at, 1)\n  }, 500)\n}\n\n/** Shows a message in the app's <Toaster />: `toast.info('Saved')`. */\nexport const toast = {\n  info: (summary: string, options?: ToastOptions) => add('info', summary, options),\n  success: (summary: string, options?: ToastOptions) => add('success', summary, options),\n  error: (summary: string, options?: ToastOptions) => add('error', summary, options)\n}\n"],"mappings":";;AAoBA,IAAaA,IAASC,EAA6B,CAAC,CAAC,GAEjDC,IAAS;AAEb,SAASC,EAAI,GAAyB,GAAiB,IAAwB,CAAC,GAAG;CACjF,EAAO,KAAK;EAAE,MAAM;EAAM,GAAGC;EAAS,IAAI;EAAU;EAAU;EAAS,MAAM;CAAK,CAAC;AACrF;AAGA,SAAgBC,EAAY,GAAY;CACtC,IAAMC,IAAQN,EAAO,WAAW,MAASO,EAAK,OAAOC,CAAE;CACvD,AAAIF,IAAQ,MACZ,EAAOA,KAAS;EAAE,GAAGN,EAAOM;EAAS,MAAM;CAAM,GACjD,iBAAiB;EACf,IAAMG,IAAKT,EAAO,WAAW,MAASO,EAAK,OAAOC,CAAE;EACpD,AAAIC,KAAM,KAAGT,EAAO,OAAOS,GAAI,CAAC;CAClC,GAAG,GAAG;AACR;AAGA,IAAaC,IAAQ;CACnB,OAAO,GAAiB,MAA2BP,EAAI,QAAQQ,GAASP,CAAO;CAC/E,UAAU,GAAiB,MAA2BD,EAAI,WAAWQ,GAASP,CAAO;CACrF,QAAQ,GAAiB,MAA2BD,EAAI,SAASQ,GAASP,CAAO;AACnF"}
+{"version":3,"file":"toast.js","names":["toastActions","options","toasts","shallowReactive","nextId","add","_","rest","actions","removeToast","index","item","id","reason","at","toast","summary"],"sources":["../../src/composables/toast.ts"],"sourcesContent":["import { shallowReactive } from 'vue'\n\nexport type ToastSeverity = 'info' | 'success' | 'warning' | 'error'\n\n/** A button on the toast: pressing it runs `onClick`, then closes the toast. */\nexport interface ToastAction {\n  label: string\n  onClick: () => void\n}\n\n/** Why a toast left: one of its actions, its close button (or Escape), or its timer running out. */\nexport type ToastDismissReason = 'action' | 'close' | 'timeout'\n\nexport interface ToastOptions {\n  /** A second line under the message. */\n  detail?: string\n  /** How long it stays, in ms; 0 keeps it until closed. 3000 by default, 6000 with an action. */\n  life?: number\n  closable?: boolean\n  action?: ToastAction\n  /** One or two; any more are ignored. */\n  actions?: ToastAction[]\n  onDismiss?: (reason: ToastDismissReason) => void\n}\n\nexport interface ToastItem extends Omit<ToastOptions, 'action'> {\n  id: number\n  severity: ToastSeverity\n  summary: string\n  actions: ToastAction[]\n  open: boolean\n}\n\n/** A toast's actions, from `action` or `actions`, at most two. */\nexport function toastActions(options: Pick<ToastOptions, 'action' | 'actions'>): ToastAction[] {\n  return (options.actions ?? (options.action ? [options.action] : [])).slice(0, 2)\n}\n\n// The messages one <Toaster /> near the app root shows.\nexport const toasts = shallowReactive<ToastItem[]>([])\n\nlet nextId = 0\n\nfunction add(severity: ToastSeverity, summary: string, options: ToastOptions = {}) {\n  const { action: _, ...rest } = options\n  const actions = toastActions(options)\n  toasts.push({\n    ...rest,\n    life: options.life ?? (actions.length ? 6000 : 3000),\n    actions,\n    id: nextId++,\n    severity,\n    summary,\n    open: true\n  })\n}\n\n/** Closes a toast, then removes it once its closing animation has had time to play. */\nexport function removeToast(id: number, reason: ToastDismissReason = 'close') {\n  const index = toasts.findIndex((item) => item.id === id)\n  if (index < 0 || !toasts[index]!.open) return\n  const item = toasts[index]!\n  toasts[index] = { ...item, open: false }\n  item.onDismiss?.(reason)\n  setTimeout(() => {\n    const at = toasts.findIndex((item) => item.id === id)\n    if (at >= 0) toasts.splice(at, 1)\n  }, 500)\n}\n\n/** Shows a message in the app's <Toaster />: `toast.info('Saved')`. */\nexport const toast = {\n  info: (summary: string, options?: ToastOptions) => add('info', summary, options),\n  success: (summary: string, options?: ToastOptions) => add('success', summary, options),\n  warning: (summary: string, options?: ToastOptions) => add('warning', summary, options),\n  error: (summary: string, options?: ToastOptions) => add('error', summary, options)\n}\n"],"mappings":";;AAkCA,SAAgBA,EAAa,GAAkE;CAC7F,QAAQC,EAAQ,YAAYA,EAAQ,SAAS,CAACA,EAAQ,MAAM,IAAI,CAAC,GAAA,CAAI,MAAM,GAAG,CAAC;AACjF;AAGA,IAAaC,IAASC,EAA6B,CAAC,CAAC,GAEjDC,IAAS;AAEb,SAASC,EAAI,GAAyB,GAAiB,IAAwB,CAAC,GAAG;CACjF,IAAM,EAAE,QAAQC,GAAG,GAAGC,MAASN,GACzBO,IAAUR,EAAaC,CAAO;CACpC,EAAO,KAAK;EACV,GAAGM;EACH,MAAMN,EAAQ,SAASO,EAAQ,SAAS,MAAO;EAC/C;EACA,IAAI;EACJ;EACA;EACA,MAAM;CACR,CAAC;AACH;AAGA,SAAgBC,EAAY,GAAY,IAA6B,SAAS;CAC5E,IAAMC,IAAQR,EAAO,WAAW,MAASS,EAAK,OAAOC,CAAE;CACvD,IAAIF,IAAQ,KAAK,CAACR,EAAOQ,EAAM,CAAE,MAAM;CACvC,IAAMC,IAAOT,EAAOQ;CAGpB,AAFA,EAAOA,KAAS;EAAE,GAAGC;EAAM,MAAM;CAAM,GACvCA,EAAK,YAAYE,CAAM,GACvB,iBAAiB;EACf,IAAMC,IAAKZ,EAAO,WAAW,MAASS,EAAK,OAAOC,CAAE;EACpD,AAAIE,KAAM,KAAGZ,EAAO,OAAOY,GAAI,CAAC;CAClC,GAAG,GAAG;AACR;AAGA,IAAaC,IAAQ;CACnB,OAAO,GAAiB,MAA2BV,EAAI,QAAQW,GAASf,CAAO;CAC/E,UAAU,GAAiB,MAA2BI,EAAI,WAAWW,GAASf,CAAO;CACrF,UAAU,GAAiB,MAA2BI,EAAI,WAAWW,GAASf,CAAO;CACrF,QAAQ,GAAiB,MAA2BI,EAAI,SAASW,GAASf,CAAO;AACnF"}

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/Board';
 export * from './components/Button';
 export * from './components/Calendar';
 export * from './components/Checkbox';
+export * from './components/ContextMenu';
 export * from './components/DataList';
 export * from './components/Dialog';
 export * from './components/DropdownMenu';
@@ -35,6 +36,6 @@ export * from './components/Tooltip';
 export * from './components/TypingIndicator';
 export { hueFor, type Hue } from './utils/hues';
 export { initColorMode, useColorMode, useForceLightMode, type ColorMode } from './composables/useColorMode';
-export { toast, type ToastOptions, type ToastSeverity } from './composables/toast';
+export { toast, type ToastAction, type ToastDismissReason, type ToastOptions, type ToastSeverity } from './composables/toast';
 export { useConfirm, type ConfirmOptions } from './composables/useConfirm';
 export * from './aliases';

package/dist/index.js

@@ -13,36 +13,37 @@ import f from "./components/Skeleton/Skeleton.js";
 import p from "./components/Board/Board.js";
 import m from "./components/Calendar/Calendar.js";
 import h from "./components/Checkbox/Checkbox.js";
-import g from "./components/DataList/DataList.js";
-import { saveHint as _ } from "./components/Dialog/focus.js";
-import v from "./components/Dialog/Dialog.js";
-import y from "./components/DropdownMenu/DropdownMenu.js";
-import b from "./components/EmptyState/EmptyState.js";
-import x from "./components/ErrorSummary/ErrorSummary.js";
-import S from "./components/Input/Input.js";
-import C from "./components/SegmentedControl/SegmentedControl.js";
-import { datePresets as w, describeFilter as T, filterOperators as E, sortDirections as D } from "./components/Filters/defaults.js";
-import O from "./components/Filters/FilterChip.js";
-import k from "./components/Filters/FilterMenu.js";
-import A from "./components/Filters/SortMenu.js";
-import j from "./components/FormField/FormField.js";
-import M from "./components/ImageUpload/ImageUpload.js";
-import N from "./components/Kbd/Kbd.js";
-import P from "./components/Pagination/Pagination.js";
-import F from "./components/Popover/Popover.js";
-import I from "./components/Spinner/Spinner.js";
-import L from "./components/Tag/Tag.js";
-import R from "./components/Select/Select.js";
-import z from "./components/Textarea/Textarea.js";
-import B from "./components/PropertyList/Editable.js";
-import V from "./components/PropertyList/PropertyList.js";
-import H from "./components/PropertyRow/Collapsible.js";
-import U from "./components/PropertyRow/PropertyRow.js";
-import W from "./components/Radio/Radio.js";
-import G from "./components/Table/Table.js";
-import { toast as K } from "./composables/toast.js";
-import q from "./components/Toast/Toaster.js";
-import J from "./components/TypingIndicator/TypingIndicator.js";
-import { initColorMode as Y, useColorMode as X, useForceLightMode as Z } from "./composables/useColorMode.js";
-import { Banner as Q, BulkActions as $, CalendarMonth as ee, Chip as te, ConfirmDialog as ne, Field as re, FilterFieldPicker as ie, FormErrors as ae, ImageInput as oe, InlineField as se, InlineForm as ce, LedgerMore as le, LedgerRow as ue, List as de, Modal as fe, OptionsMenu as pe, Pill as me, SortControl as he, TextInput as ge, TypingDots as _e } from "./aliases.js";
-export { a as ActionBar, o as Alert, c as AlertDialog, u as Avatar, d as Badge, Q as Banner, p as Board, $ as BulkActions, e as Button, m as Calendar, ee as CalendarMonth, h as Checkbox, te as Chip, H as Collapsible, ne as ConfirmDialog, g as DataList, v as Dialog, y as DropdownMenu, B as Editable, b as EmptyState, x as ErrorSummary, re as Field, O as FilterChip, ie as FilterFieldPicker, k as FilterMenu, ae as FormErrors, j as FormField, r as Icon, oe as ImageInput, M as ImageUpload, se as InlineField, ce as InlineForm, S as Input, N as Kbd, le as LedgerMore, ue as LedgerRow, de as List, fe as Modal, pe as OptionsMenu, P as Pagination, me as Pill, F as Popover, V as PropertyList, U as PropertyRow, W as Radio, C as SegmentedControl, R as Select, f as Skeleton, he as SortControl, A as SortMenu, I as Spinner, G as Table, L as Tag, ge as TextInput, z as Textarea, q as Toaster, i as Tooltip, _e as TypingDots, J as TypingIndicator, w as datePresets, T as describeFilter, E as filterOperators, l as hueFor, t as iconNames, Y as initColorMode, _ as saveHint, n as setIconResolver, D as sortDirections, K as toast, X as useColorMode, s as useConfirm, Z as useForceLightMode };
+import g from "./components/ContextMenu/ContextMenu.js";
+import _ from "./components/DataList/DataList.js";
+import { saveHint as v } from "./components/Dialog/focus.js";
+import y from "./components/Dialog/Dialog.js";
+import b from "./components/DropdownMenu/DropdownMenu.js";
+import x from "./components/EmptyState/EmptyState.js";
+import S from "./components/ErrorSummary/ErrorSummary.js";
+import C from "./components/Input/Input.js";
+import w from "./components/SegmentedControl/SegmentedControl.js";
+import { datePresets as T, describeFilter as E, filterOperators as D, sortDirections as O } from "./components/Filters/defaults.js";
+import k from "./components/Filters/FilterChip.js";
+import A from "./components/Filters/FilterMenu.js";
+import j from "./components/Filters/SortMenu.js";
+import M from "./components/FormField/FormField.js";
+import N from "./components/ImageUpload/ImageUpload.js";
+import P from "./components/Kbd/Kbd.js";
+import F from "./components/Pagination/Pagination.js";
+import I from "./components/Popover/Popover.js";
+import L from "./components/Spinner/Spinner.js";
+import R from "./components/Tag/Tag.js";
+import z from "./components/Select/Select.js";
+import B from "./components/Textarea/Textarea.js";
+import V from "./components/PropertyList/Editable.js";
+import H from "./components/PropertyList/PropertyList.js";
+import U from "./components/PropertyRow/Collapsible.js";
+import W from "./components/PropertyRow/PropertyRow.js";
+import G from "./components/Radio/Radio.js";
+import K from "./components/Table/Table.js";
+import { toast as q } from "./composables/toast.js";
+import J from "./components/Toast/Toaster.js";
+import Y from "./components/TypingIndicator/TypingIndicator.js";
+import { initColorMode as X, useColorMode as Z, useForceLightMode as Q } from "./composables/useColorMode.js";
+import { Banner as $, BulkActions as ee, CalendarMonth as te, Chip as ne, ConfirmDialog as re, Field as ie, FilterFieldPicker as ae, FormErrors as oe, ImageInput as se, InlineField as ce, InlineForm as le, LedgerMore as ue, LedgerRow as de, List as fe, Modal as pe, OptionsMenu as me, Pill as he, SortControl as ge, TextInput as _e, TypingDots as ve } from "./aliases.js";
+export { a as ActionBar, o as Alert, c as AlertDialog, u as Avatar, d as Badge, $ as Banner, p as Board, ee as BulkActions, e as Button, m as Calendar, te as CalendarMonth, h as Checkbox, ne as Chip, U as Collapsible, re as ConfirmDialog, g as ContextMenu, _ as DataList, y as Dialog, b as DropdownMenu, V as Editable, x as EmptyState, S as ErrorSummary, ie as Field, k as FilterChip, ae as FilterFieldPicker, A as FilterMenu, oe as FormErrors, M as FormField, r as Icon, se as ImageInput, N as ImageUpload, ce as InlineField, le as InlineForm, C as Input, P as Kbd, ue as LedgerMore, de as LedgerRow, fe as List, pe as Modal, me as OptionsMenu, F as Pagination, he as Pill, I as Popover, H as PropertyList, W as PropertyRow, G as Radio, w as SegmentedControl, z as Select, f as Skeleton, ge as SortControl, j as SortMenu, L as Spinner, K as Table, R as Tag, _e as TextInput, B as Textarea, J as Toaster, i as Tooltip, ve as TypingDots, Y as TypingIndicator, T as datePresets, E as describeFilter, D as filterOperators, l as hueFor, t as iconNames, X as initColorMode, v as saveHint, n as setIconResolver, O as sortDirections, q as toast, Z as useColorMode, s as useConfirm, Q as useForceLightMode };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sparklingopinions/sparkling-ui",
-  "version": "0.4.2",
+  "version": "0.6.0",
   "description": "A product-agnostic Vue 3 component library, themed by semantic tokens",
   "type": "module",
   "license": "MIT",

package/src/styles/tailwind.css

@@ -294,6 +294,10 @@
   --sui-button-padding-x: 0.875rem;
   --sui-button-text: 0.875rem;
   --sui-radius-button: 0.5rem;
+  /* A bottom sheet's top corners. */
+  --sui-radius-sheet: 1.25rem;
+  /* Table rows and headers at one height, e.g. 44px; unset (initial), each Table's size decides. */
+  --sui-table-row: initial;
   --sui-shadow-raised: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --sui-focus-width: 2px;
   --sui-focus-offset: 2px;
@@ -357,10 +361,14 @@
   --animate-sui-scrim-out: sui-scrim-out 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
   --animate-sui-dialog-in: sui-dialog-in 200ms ease-out;
   --animate-sui-dialog-out: sui-dialog-out 200ms ease-out forwards;
+  --animate-sui-sheet-in: sui-sheet-in 300ms cubic-bezier(0.32, 0.72, 0, 1);
+  --animate-sui-sheet-out: sui-sheet-out 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
   --animate-sui-toast-in: sui-toast-in 300ms cubic-bezier(0.4, 0, 0.2, 1);
   --animate-sui-toast-out:
     sui-toast-collapse 450ms cubic-bezier(0, 1, 0, 1) forwards,
     sui-toast-fade 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  /* Its duration is the toast's life, set inline. */
+  --animate-sui-toast-timer: sui-toast-timer linear forwards;
 
   @keyframes sui-spinner-rotate {
     to {
@@ -430,6 +438,18 @@
     }
   }
 
+  @keyframes sui-sheet-in {
+    from {
+      transform: translateY(100%);
+    }
+  }
+
+  @keyframes sui-sheet-out {
+    to {
+      transform: translateY(100%);
+    }
+  }
+
   @keyframes sui-toast-in {
     from {
       opacity: 0;
@@ -453,6 +473,15 @@
     }
   }
 
+  @keyframes sui-toast-timer {
+    from {
+      transform: scaleX(1);
+    }
+    to {
+      transform: scaleX(0);
+    }
+  }
+
   @keyframes sui-typing {
     0%,
     80%,