@brandlab-digital/site-next 3.7.0 → 3.9.0

package/dist/ui-kit/skin-index.d.ts

@@ -0,0 +1,3 @@
+export { cx, skinned, slot, type SkinEntry, type SkinEntryOf, type SkinnedProps, type SlotClasses } from './skin.js';
+export type { BrandlabSkin } from './brandlab-skin.js';
+//# sourceMappingURL=skin-index.d.ts.map

package/dist/ui-kit/skin-index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin-index.d.ts","sourceRoot":"","sources":["../../src/ui-kit/skin-index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AACpH,YAAY,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/ui-kit/skin-index.js

@@ -0,0 +1,2 @@
+export { cx, skinned, slot } from './skin.js';
+//# sourceMappingURL=skin-index.js.map

package/dist/ui-kit/skin-index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin-index.js","sourceRoot":"","sources":["../../src/ui-kit/skin-index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAyE,MAAM,WAAW,CAAA","sourcesContent":["export { cx, skinned, slot, type SkinEntry, type SkinEntryOf, type SkinnedProps, type SlotClasses } from './skin.js'\nexport type { BrandlabSkin } from './brandlab-skin.js'\n"]}

package/dist/ui-kit/skin.d.ts

@@ -0,0 +1,48 @@
+/**
+ * The skin model of the Brandlab ui-kit. A site gives every shared component its own look through one skin entry per
+ * component: a variant from the component's closed list, typed layout options and one class string per named slot.
+ * Colours, fonts and shapes come from the site's `--bl-*` tokens and these classes; behaviour, semantics, accessible
+ * names and analytics hooks never appear here, so a skin can't change them.
+ */
+import { type ComponentType } from 'react';
+/** One class string per named slot. Tailwind v4 utilities, CSS Module class names or nothing (plain CSS on hooks). */
+export type SlotClasses<Slot extends string> = Readonly<Partial<Record<Slot, string>>>;
+/** A component's skin: its variant, its layout options and its slot classes. Every field is optional. */
+export interface SkinEntry<Slot extends string, Variant extends string = never, Layout extends object = Record<never, never>> {
+    readonly variant?: Variant;
+    readonly layout?: Readonly<Layout>;
+    readonly classes?: SlotClasses<Slot>;
+}
+type SkinKeys = 'variant' | 'layout' | 'classes';
+/** The part of a component's props a skin entry supplies. */
+export type SkinEntryOf<P> = Pick<P, Extract<keyof P, SkinKeys>>;
+/** What a page passes to a skinned component: its data, and at most a `layout` adjustment within the contract. */
+export type SkinnedProps<P> = Omit<P, 'variant' | 'classes'>;
+/**
+ * Bind a component to the site's skin entry, so pages pass data only. Returns a plain function component (no
+ * context, no client code), so it works in server components and client components alike. The skin's layout merges
+ * under the page's `layout`; the variant and classes come from the skin only.
+ *
+ * ```tsx
+ * // src/site/ui.tsx
+ * export const ReviewsBand = skinned(UI.ReviewsBand, skin.reviewsBand)
+ * ```
+ */
+export declare function skinned<P extends {
+    variant?: unknown;
+    layout?: object;
+    classes?: object;
+}>(Component: ComponentType<P>, entry: SkinEntryOf<P>): ComponentType<SkinnedProps<P>>;
+/** Join class strings, dropping empty parts. Returns `undefined` when nothing is left, so no empty `class` renders. */
+export declare function cx(...parts: readonly (string | false | null | undefined)[]): string | undefined;
+/**
+ * The stable hook for one named part: `data-slot` plus the skin's class for it. Spread it onto the element:
+ * `<div {...slot(classes, 'inner')}>`. Slot names, nesting and element types are public API (a minor release to
+ * change); a skin's class never replaces the hook.
+ */
+export declare function slot<Slot extends string>(classes: SlotClasses<Slot> | undefined, name: Slot, extra?: string): {
+    'data-slot': Slot;
+    className: string | undefined;
+};
+export {};
+//# sourceMappingURL=skin.d.ts.map

package/dist/ui-kit/skin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin.d.ts","sourceRoot":"","sources":["../../src/ui-kit/skin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAiB,KAAK,aAAa,EAAkB,MAAM,OAAO,CAAA;AAEzE,sHAAsH;AACtH,MAAM,MAAM,WAAW,CAAC,IAAI,SAAS,MAAM,IAAI,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,CAAA;AAEtF,yGAAyG;AACzG,MAAM,WAAW,SAAS,CACxB,IAAI,SAAS,MAAM,EACnB,OAAO,SAAS,MAAM,GAAG,KAAK,EAC9B,MAAM,SAAS,MAAM,GAAG,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC;IAE5C,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IAClC,QAAQ,CAAC,OAAO,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,CAAA;CACrC;AAED,KAAK,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;AAEhD,6DAA6D;AAC7D,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAA;AAEhE,kHAAkH;AAClH,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC,CAAA;AAE5D;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,CAAC,SAAS;IAAE,OAAO,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAAE,EACxF,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,EAC3B,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,GACpB,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAehC;AAED,uHAAuH;AACvH,wBAAgB,EAAE,CAAC,GAAG,KAAK,EAAE,SAAS,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,MAAM,GAAG,SAAS,CAG/F;AAED;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,IAAI,SAAS,MAAM,EACtC,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,GAAG,SAAS,EACtC,IAAI,EAAE,IAAI,EACV,KAAK,CAAC,EAAE,MAAM,GACb;IAAE,WAAW,EAAE,IAAI,CAAC;IAAC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;CAAE,CAEtD"}

package/dist/ui-kit/skin.js

@@ -0,0 +1,47 @@
+/**
+ * The skin model of the Brandlab ui-kit. A site gives every shared component its own look through one skin entry per
+ * component: a variant from the component's closed list, typed layout options and one class string per named slot.
+ * Colours, fonts and shapes come from the site's `--bl-*` tokens and these classes; behaviour, semantics, accessible
+ * names and analytics hooks never appear here, so a skin can't change them.
+ */
+import { createElement } from 'react';
+/**
+ * Bind a component to the site's skin entry, so pages pass data only. Returns a plain function component (no
+ * context, no client code), so it works in server components and client components alike. The skin's layout merges
+ * under the page's `layout`; the variant and classes come from the skin only.
+ *
+ * ```tsx
+ * // src/site/ui.tsx
+ * export const ReviewsBand = skinned(UI.ReviewsBand, skin.reviewsBand)
+ * ```
+ */
+export function skinned(Component, entry) {
+    const skin = entry;
+    function Skinned(props) {
+        const pageLayout = props.layout;
+        const layout = skin.layout || pageLayout ? { ...(skin.layout ?? {}), ...(pageLayout ?? {}) } : undefined;
+        const merged = {
+            ...props,
+            ...(skin.variant !== undefined ? { variant: skin.variant } : {}),
+            ...(layout ? { layout } : {}),
+            ...(skin.classes ? { classes: skin.classes } : {}),
+        };
+        return createElement(Component, merged);
+    }
+    Skinned.displayName = `Skinned(${Component.displayName ?? Component.name ?? 'Component'})`;
+    return Skinned;
+}
+/** Join class strings, dropping empty parts. Returns `undefined` when nothing is left, so no empty `class` renders. */
+export function cx(...parts) {
+    const joined = parts.filter(Boolean).join(' ');
+    return joined === '' ? undefined : joined;
+}
+/**
+ * The stable hook for one named part: `data-slot` plus the skin's class for it. Spread it onto the element:
+ * `<div {...slot(classes, 'inner')}>`. Slot names, nesting and element types are public API (a minor release to
+ * change); a skin's class never replaces the hook.
+ */
+export function slot(classes, name, extra) {
+    return { 'data-slot': name, className: cx(classes?.[name], extra) };
+}
+//# sourceMappingURL=skin.js.map

package/dist/ui-kit/skin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin.js","sourceRoot":"","sources":["../../src/ui-kit/skin.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,aAAa,EAAsC,MAAM,OAAO,CAAA;AAwBzE;;;;;;;;;GASG;AACH,MAAM,UAAU,OAAO,CACrB,SAA2B,EAC3B,KAAqB;IAErB,MAAM,IAAI,GAAG,KAAiE,CAAA;IAC9E,SAAS,OAAO,CAAC,KAAsB;QACrC,MAAM,UAAU,GAAI,KAA6B,CAAC,MAAM,CAAA;QACxD,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,IAAI,UAAU,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC,EAAE,GAAG,CAAC,UAAU,IAAI,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAA;QACxG,MAAM,MAAM,GAAG;YACb,GAAG,KAAK;YACR,GAAG,CAAC,IAAI,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAChE,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;YAC7B,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;SACnC,CAAA;QACjB,OAAO,aAAa,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;IACzC,CAAC;IACD,OAAO,CAAC,WAAW,GAAG,WAAW,SAAS,CAAC,WAAW,IAAI,SAAS,CAAC,IAAI,IAAI,WAAW,GAAG,CAAA;IAC1F,OAAO,OAAO,CAAA;AAChB,CAAC;AAED,uHAAuH;AACvH,MAAM,UAAU,EAAE,CAAC,GAAG,KAAqD;IACzE,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC9C,OAAO,MAAM,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAA;AAC3C,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,IAAI,CAClB,OAAsC,EACtC,IAAU,EACV,KAAc;IAEd,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,OAAO,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,EAAE,CAAA;AACrE,CAAC","sourcesContent":["/**\n * The skin model of the Brandlab ui-kit. A site gives every shared component its own look through one skin entry per\n * component: a variant from the component's closed list, typed layout options and one class string per named slot.\n * Colours, fonts and shapes come from the site's `--bl-*` tokens and these classes; behaviour, semantics, accessible\n * names and analytics hooks never appear here, so a skin can't change them.\n */\nimport { createElement, type ComponentType, type ReactNode } from 'react'\n\n/** One class string per named slot. Tailwind v4 utilities, CSS Module class names or nothing (plain CSS on hooks). */\nexport type SlotClasses<Slot extends string> = Readonly<Partial<Record<Slot, string>>>\n\n/** A component's skin: its variant, its layout options and its slot classes. Every field is optional. */\nexport interface SkinEntry<\n  Slot extends string,\n  Variant extends string = never,\n  Layout extends object = Record<never, never>,\n> {\n  readonly variant?: Variant\n  readonly layout?: Readonly<Layout>\n  readonly classes?: SlotClasses<Slot>\n}\n\ntype SkinKeys = 'variant' | 'layout' | 'classes'\n\n/** The part of a component's props a skin entry supplies. */\nexport type SkinEntryOf<P> = Pick<P, Extract<keyof P, SkinKeys>>\n\n/** What a page passes to a skinned component: its data, and at most a `layout` adjustment within the contract. */\nexport type SkinnedProps<P> = Omit<P, 'variant' | 'classes'>\n\n/**\n * Bind a component to the site's skin entry, so pages pass data only. Returns a plain function component (no\n * context, no client code), so it works in server components and client components alike. The skin's layout merges\n * under the page's `layout`; the variant and classes come from the skin only.\n *\n * ```tsx\n * // src/site/ui.tsx\n * export const ReviewsBand = skinned(UI.ReviewsBand, skin.reviewsBand)\n * ```\n */\nexport function skinned<P extends { variant?: unknown; layout?: object; classes?: object }>(\n  Component: ComponentType<P>,\n  entry: SkinEntryOf<P>,\n): ComponentType<SkinnedProps<P>> {\n  const skin = entry as { variant?: unknown; layout?: object; classes?: object }\n  function Skinned(props: SkinnedProps<P>): ReactNode {\n    const pageLayout = (props as { layout?: object }).layout\n    const layout = skin.layout || pageLayout ? { ...(skin.layout ?? {}), ...(pageLayout ?? {}) } : undefined\n    const merged = {\n      ...props,\n      ...(skin.variant !== undefined ? { variant: skin.variant } : {}),\n      ...(layout ? { layout } : {}),\n      ...(skin.classes ? { classes: skin.classes } : {}),\n    } as unknown as P\n    return createElement(Component, merged)\n  }\n  Skinned.displayName = `Skinned(${Component.displayName ?? Component.name ?? 'Component'})`\n  return Skinned\n}\n\n/** Join class strings, dropping empty parts. Returns `undefined` when nothing is left, so no empty `class` renders. */\nexport function cx(...parts: readonly (string | false | null | undefined)[]): string | undefined {\n  const joined = parts.filter(Boolean).join(' ')\n  return joined === '' ? undefined : joined\n}\n\n/**\n * The stable hook for one named part: `data-slot` plus the skin's class for it. Spread it onto the element:\n * `<div {...slot(classes, 'inner')}>`. Slot names, nesting and element types are public API (a minor release to\n * change); a skin's class never replaces the hook.\n */\nexport function slot<Slot extends string>(\n  classes: SlotClasses<Slot> | undefined,\n  name: Slot,\n  extra?: string,\n): { 'data-slot': Slot; className: string | undefined } {\n  return { 'data-slot': name, className: cx(classes?.[name], extra) }\n}\n"]}