@nkootstra/block-kit 0.1.0 → 0.1.1

package/dist/{index-BV_5_J_Q.d.ts → index-FPjJcmn3.d.ts}

@@ -582,6 +582,8 @@ interface PayloadContext {
 type SubmitResult = ViewResponseAction | undefined | void;
 interface BlockKitContextValue {
   surface: Surface;
+  /** The provider's `theme`. Popovers, tooltips and dialogs render outside its wrapper, so they set it themselves. */
+  theme?: "light" | "dark";
   onAction?: (action: BlockAction, context: ActionContext) => void;
   /** Same actions as `onAction`, wrapped in the full Slack `block_actions` payload (team/user/container/...). */
   onPayload?: (payload: ReturnType<typeof buildBlockActionsPayload>, context: PayloadContext) => void;
@@ -906,4 +908,4 @@ declare const VALIDATION_MESSAGES: {
 declare function validateView(blocks: readonly Json[] | readonly unknown[], state: StateValues): Record<string, string>;
 //#endregion
 export { BlockSuggestionPayload as $, BlockAction as A, StackedView as B, SlackAttachment as C, BlockProps as Ct, elementComponents as D, SlackReaction as E, EmojiOptions as F, SurfaceScopeProps as G, SubmitResult as H, MessageApi as I, ViewsApi as J, SurfaceScopeValue as K, MessageUpdate as L, BlockKitProvider as M, BlockKitProviderProps as N, Element as O, ElementState as P, BlockActionsPayload as Q, PayloadContext as R, MessageProps as S, Blocks as St, SlackMessageLike as T, Json as Tt, Surface as U, StateValues as V, SurfaceScope as W, useContainer as X, useBlockKit as Y, useLiveView as Z, HomeTabView as _, buildBlockSuggestionPayload as _t, Tooltip as a, MessageBlockActionsPayload as at, Message as b, blockComponents as bt, TextObject as c, PayloadIdentity as ct, ViewProps as d, SuggestionOption as dt, BuildBlockActionsPayloadOptions as et, Modal as f, ViewBlockActionsPayload as ft, HomeTabProps as g, buildBlockActionsPayload as gt, HomeTab as h, ViewResponseAction as ht, UserMentionProps as i, Container as it, BlockKitContextValue as j, ActionContext as k, AnyView as l, PayloadTeam as lt, ModalView as m, ViewLike as mt, validateView as n, BuildViewClosedPayloadOptions as nt, TooltipProps as o, MessageContainer as ot, ModalProps as p, ViewContainer as pt, UserProfile as q, UserMention as r, BuildViewSubmissionPayloadOptions as rt, Text as s, OptionsResponse as st, VALIDATION_MESSAGES as t, BuildBlockSuggestionPayloadOptions as tt, View as u, PayloadUser as ut, Mrkdwn as v, buildViewClosedPayload as vt, SlackAttachmentField as w, ElementProps as wt, MessageApp as x, Block as xt, MrkdwnProps as y, buildViewSubmissionPayload as yt, Resolvers as z };
-//# sourceMappingURL=index-BV_5_J_Q.d.ts.map
+//# sourceMappingURL=index-FPjJcmn3.d.ts.map

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 
-import { $ as BlockSuggestionPayload, A as BlockAction, B as StackedView, C as SlackAttachment, Ct as BlockProps, D as elementComponents, E as SlackReaction, F as EmojiOptions, G as SurfaceScopeProps, H as SubmitResult, I as MessageApi, J as ViewsApi, K as SurfaceScopeValue, L as MessageUpdate, M as BlockKitProvider, N as BlockKitProviderProps, O as Element, P as ElementState, Q as BlockActionsPayload, R as PayloadContext, S as MessageProps, St as Blocks, T as SlackMessageLike, Tt as Json, U as Surface, V as StateValues, W as SurfaceScope, X as useContainer, Y as useBlockKit, Z as useLiveView, _ as HomeTabView, _t as buildBlockSuggestionPayload, a as Tooltip, at as MessageBlockActionsPayload, b as Message, bt as blockComponents, c as TextObject, ct as PayloadIdentity, d as ViewProps, dt as SuggestionOption, et as BuildBlockActionsPayloadOptions, f as Modal, ft as ViewBlockActionsPayload, g as HomeTabProps, gt as buildBlockActionsPayload, h as HomeTab, ht as ViewResponseAction, i as UserMentionProps, it as Container, j as BlockKitContextValue, k as ActionContext, l as AnyView, lt as PayloadTeam, m as ModalView, mt as ViewLike, n as validateView, nt as BuildViewClosedPayloadOptions, o as TooltipProps, ot as MessageContainer, p as ModalProps, pt as ViewContainer, q as UserProfile, r as UserMention, rt as BuildViewSubmissionPayloadOptions, s as Text, st as OptionsResponse, t as VALIDATION_MESSAGES, tt as BuildBlockSuggestionPayloadOptions, u as View, ut as PayloadUser, v as Mrkdwn, vt as buildViewClosedPayload, w as SlackAttachmentField, wt as ElementProps, x as MessageApp, xt as Block, y as MrkdwnProps, yt as buildViewSubmissionPayload, z as Resolvers } from "./index-BV_5_J_Q.js";
+import { $ as BlockSuggestionPayload, A as BlockAction, B as StackedView, C as SlackAttachment, Ct as BlockProps, D as elementComponents, E as SlackReaction, F as EmojiOptions, G as SurfaceScopeProps, H as SubmitResult, I as MessageApi, J as ViewsApi, K as SurfaceScopeValue, L as MessageUpdate, M as BlockKitProvider, N as BlockKitProviderProps, O as Element, P as ElementState, Q as BlockActionsPayload, R as PayloadContext, S as MessageProps, St as Blocks, T as SlackMessageLike, Tt as Json, U as Surface, V as StateValues, W as SurfaceScope, X as useContainer, Y as useBlockKit, Z as useLiveView, _ as HomeTabView, _t as buildBlockSuggestionPayload, a as Tooltip, at as MessageBlockActionsPayload, b as Message, bt as blockComponents, c as TextObject, ct as PayloadIdentity, d as ViewProps, dt as SuggestionOption, et as BuildBlockActionsPayloadOptions, f as Modal, ft as ViewBlockActionsPayload, g as HomeTabProps, gt as buildBlockActionsPayload, h as HomeTab, ht as ViewResponseAction, i as UserMentionProps, it as Container, j as BlockKitContextValue, k as ActionContext, l as AnyView, lt as PayloadTeam, m as ModalView, mt as ViewLike, n as validateView, nt as BuildViewClosedPayloadOptions, o as TooltipProps, ot as MessageContainer, p as ModalProps, pt as ViewContainer, q as UserProfile, r as UserMention, rt as BuildViewSubmissionPayloadOptions, s as Text, st as OptionsResponse, t as VALIDATION_MESSAGES, tt as BuildBlockSuggestionPayloadOptions, u as View, ut as PayloadUser, v as Mrkdwn, vt as buildViewClosedPayload, w as SlackAttachmentField, wt as ElementProps, x as MessageApp, xt as Block, y as MrkdwnProps, yt as buildViewSubmissionPayload, z as Resolvers } from "./index-FPjJcmn3.js";
 export { type ActionContext, type AnyView, Block, type BlockAction, type BlockActionsPayload, type BlockKitContextValue, BlockKitProvider, type BlockKitProviderProps, type BlockProps, type BlockSuggestionPayload, Blocks, type BuildBlockActionsPayloadOptions, type BuildBlockSuggestionPayloadOptions, type BuildViewClosedPayloadOptions, type BuildViewSubmissionPayloadOptions, type Container, Element, type ElementProps, type ElementState, type EmojiOptions, HomeTab, type HomeTabProps, type HomeTabView, type Json, Message, type MessageApi, type MessageApp, type MessageBlockActionsPayload, type MessageContainer, type MessageProps, type MessageUpdate, Modal, type ModalProps, type ModalView, Mrkdwn, type MrkdwnProps, type OptionsResponse, type PayloadContext, type PayloadIdentity, type PayloadTeam, type PayloadUser, type Resolvers, type SlackAttachment, type SlackAttachmentField, type SlackMessageLike, type SlackReaction, type StackedView, type StateValues, type SubmitResult, type SuggestionOption, type Surface, SurfaceScope, type SurfaceScopeProps, type SurfaceScopeValue, Text, type TextObject, Tooltip, type TooltipProps, UserMention, type UserMentionProps, type UserProfile, VALIDATION_MESSAGES, View, type ViewBlockActionsPayload, type ViewContainer, type ViewLike, type ViewProps, type ViewResponseAction, type ViewsApi, blockComponents, buildBlockActionsPayload, buildBlockSuggestionPayload, buildViewClosedPayload, buildViewSubmissionPayload, elementComponents, useBlockKit, useContainer, useLiveView, validateView };

package/dist/index.js

@@ -1035,6 +1035,7 @@ function BlockKitProvider(props) {
 	const stackedView = useContext(StackEntryContext);
 	const value = useMemo(() => ({
 		surface,
+		theme,
 		onAction,
 		onPayload,
 		onSubmit,
@@ -1054,6 +1055,7 @@ function BlockKitProvider(props) {
 		respond
 	}), [
 		surface,
+		theme,
 		onAction,
 		onPayload,
 		onSubmit,
@@ -1235,6 +1237,7 @@ const SHOW_DELAY_MS = 300;
 * Slack. Portalled to `<body>` so scroll containers and `overflow: hidden` can't clip it.
 */
 function Tooltip({ label, children, placement = "top" }) {
+	const { theme } = useBlockKit();
 	const id = useId();
 	const [open, setOpen] = useState(false);
 	const [position, setPosition] = useState(null);
@@ -1298,6 +1301,7 @@ function Tooltip({ label, children, placement = "top" }) {
 		ref: tipRef,
 		id,
 		role: "tooltip",
+		"data-theme": theme,
 		className: `sbk-tooltip sbk-tooltip--${position?.side ?? placement}`,
 		style: position ? {
 			top: position.top,
@@ -5613,7 +5617,7 @@ function localTime(timeZone) {
 * `resolvers.userProfile` and falling back to the display name alone.
 */
 function UserMention({ id, name }) {
-	const { resolvers } = useBlockKit();
+	const { resolvers, theme } = useBlockKit();
 	const [open, setOpen] = useState(false);
 	const [position, setPosition] = useState(null);
 	const anchorRef = useRef(null);
@@ -5681,6 +5685,7 @@ function UserMention({ id, name }) {
 		role: "dialog",
 		"aria-label": profile.name,
 		className: "sbk-root sbk-profile-card",
+		"data-theme": theme,
 		style: position ? {
 			top: position.top,
 			left: position.left
@@ -5865,10 +5870,12 @@ function Text({ text, emojiSize = 22 }) {
 //#region src/confirm/ConfirmDialog.tsx
 /** Slack's confirmation dialog: blocks the triggering action until the user picks confirm/deny. */
 function ConfirmDialog({ confirm, onConfirm, onDeny }) {
+	const { theme } = useBlockKit();
 	const confirmStyle = confirm.style ?? "primary";
 	const node = /* @__PURE__ */ jsx("div", {
 		className: "sbk-confirm__overlay",
 		role: "presentation",
+		"data-theme": theme,
 		onClick: onDeny,
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "sbk-confirm",
@@ -6236,6 +6243,7 @@ const DEFAULT_GAP = 4;
 * from.
 */
 function Popover({ anchorRef, onDismiss, gap = DEFAULT_GAP, children }) {
+	const { theme } = useBlockKit();
 	const layerRef = useRef(null);
 	const [position, setPosition] = useState(null);
 	const dismiss = useRef(onDismiss);
@@ -6286,6 +6294,7 @@ function Popover({ anchorRef, onDismiss, gap = DEFAULT_GAP, children }) {
 	return createPortal(/* @__PURE__ */ jsx("div", {
 		ref: layerRef,
 		className: "sbk-root sbk-popover",
+		"data-theme": theme,
 		style: position ?? {
 			top: 0,
 			left: 0,
@@ -7733,24 +7742,20 @@ function Alert({ block }) {
 }
 //#endregion
 //#region src/blocks/Callout.tsx
-/**
-* Measured from Builder references (`callout` background_color: "green" → #f4ffdb, "blue" →
-* #e3f8ff). The remaining keys aren't covered by a fixture; they're extrapolated to the same
-* pastel-tint style and may not match Slack's exact values.
-*/
-const BACKGROUND_COLORS = {
-	green: "#f4ffdb",
-	blue: "#e3f8ff",
-	red: "#ffeceb",
-	yellow: "#fff8db",
-	purple: "#f3ecff",
-	gray: "#f4f4f4",
-	grey: "#f4f4f4"
-};
+/** Callout colours; each has a token per theme (Callout.css, and Message.css for dark). */
+const BACKGROUND_COLORS = /* @__PURE__ */ new Set([
+	"green",
+	"blue",
+	"red",
+	"yellow",
+	"purple",
+	"gray"
+]);
 function Callout({ block }) {
 	const json = block;
 	const color = typeof json.background_color === "string" ? json.background_color : void 0;
-	const background = (color && BACKGROUND_COLORS[color]) ?? BACKGROUND_COLORS.gray;
+	const key = color === "grey" ? "gray" : color;
+	const background = `var(--sbk-callout-${key && BACKGROUND_COLORS.has(key) ? key : "gray"}-bg)`;
 	const children = json.child_blocks ?? [];
 	return /* @__PURE__ */ jsx("div", {
 		className: "sbk-callout",
@@ -8666,26 +8671,12 @@ const CHART_COLORS = [
 	"#c474d3",
 	"#0e9dd3"
 ];
-/** Area-fill tints for the first two palette colours (measured); others get an approximation. */
-const AREA_FILLS = {
-	"#e96825": "rgb(255,237,229)",
-	"#20a271": "rgb(227,255,243)"
-};
-function hexToRgb(hex) {
-	const n = Number.parseInt(hex.slice(1), 16);
-	return [
-		n >> 16 & 255,
-		n >> 8 & 255,
-		n & 255
-	];
-}
-/** Fill colour for a series' area, tinted ~88% toward white when not one of the measured pairs. */
-function areaFillFor(color) {
-	const known = AREA_FILLS[color.toLowerCase()];
-	if (known) return known;
-	const [r, g, b] = hexToRgb(color);
-	const mix = (c) => Math.round(c + (255 - c) * .88);
-	return `rgb(${mix(r)},${mix(g)},${mix(b)})`;
+/**
+* Fill of a series' area, as a token per theme (DataVisualization.css, and Message.css for dark):
+* a light tint of the series colour, or a dark one.
+*/
+function areaFillForIndex(i) {
+	return `var(--sbk-chart-area-${i % CHART_COLORS.length + 1})`;
 }
 function colorForIndex(i) {
 	return CHART_COLORS[i % CHART_COLORS.length] ?? "#e96825";
@@ -8898,7 +8889,7 @@ function CartesianChart({ type, series, categories }) {
 					const color = colorForIndex(si);
 					return /* @__PURE__ */ jsxs("g", { children: [type === "area" ? /* @__PURE__ */ jsx("path", {
 						d: `${smoothLinePath(points)}L${points[points.length - 1]?.x ?? 0} ${zeroY}L${points[0]?.x ?? 0} ${zeroY}Z`,
-						fill: areaFillFor(color),
+						style: { fill: areaFillForIndex(si) },
 						fillOpacity: .7
 					}) : null, /* @__PURE__ */ jsx("path", {
 						d: smoothLinePath(points),