pi-kiosk-shared 2.2.35 → 2.2.37

package/dist/ui/Typography/Typography.d.ts

@@ -0,0 +1,70 @@
+import { type ElementType, type HTMLAttributes, type ReactNode } from 'react';
+import { type VariantProps } from '../tvShim.js';
+/**
+ * Shared Typography atom (CMP-0022).
+ * Size/weight from brand-bridge type scale; line-height = unitless Size/line multipliers.
+ * Display XL is forbidden — no `displayXl` variant.
+ */
+declare const typography: import("tailwind-variants").TVReturnType<{
+    variant: {
+        display: string;
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        bodyLg: string;
+        body: string;
+        bodySm: string;
+        caption: string;
+        label: string;
+        button: string;
+        overline: string;
+        mono: string;
+    };
+}, undefined, "font-[family-name:var(--font-family-primary)] m-0", TVConfig<V, EV>, {
+    variant: {
+        display: string;
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        bodyLg: string;
+        body: string;
+        bodySm: string;
+        caption: string;
+        label: string;
+        button: string;
+        overline: string;
+        mono: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        display: string;
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        bodyLg: string;
+        body: string;
+        bodySm: string;
+        caption: string;
+        label: string;
+        button: string;
+        overline: string;
+        mono: string;
+    };
+}, undefined, "font-[family-name:var(--font-family-primary)] m-0", TVConfig<V, EV>, unknown, unknown, undefined>>;
+type TypographyVariants = VariantProps<typeof typography>;
+export type TypographyVariant = NonNullable<TypographyVariants['variant']>;
+export type TypographyProps = Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    readonly variant?: TypographyVariant;
+    readonly as?: ElementType;
+    readonly children?: ReactNode;
+};
+export declare const Typography: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "children"> & {
+    readonly variant?: TypographyVariant;
+    readonly as?: ElementType;
+    readonly children?: ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=Typography.d.ts.map

package/dist/ui/Typography/Typography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.d.ts","sourceRoot":"","sources":["../../../src/ui/Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAErD;;;;GAIG;AAEH,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iHAgCd,CAAC;AAEH,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AAE1D,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC,CAAC;AAkB3E,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC,GAAG;IAC5E,QAAQ,CAAC,OAAO,CAAC,EAAE,iBAAiB,CAAC;IACrC,QAAQ,CAAC,EAAE,CAAC,EAAE,WAAW,CAAC;IAC1B,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,UAAU;uBALF,iBAAiB;kBACtB,WAAW;wBACL,SAAS;+CAgB9B,CAAC"}

package/dist/ui/Typography/Typography.js

@@ -0,0 +1,58 @@
+import { createElement, forwardRef, } from 'react';
+import { tv } from '../tvShim.js';
+/**
+ * Shared Typography atom (CMP-0022).
+ * Size/weight from brand-bridge type scale; line-height = unitless Size/line multipliers.
+ * Display XL is forbidden — no `displayXl` variant.
+ */
+const typography = tv({
+    base: 'font-[family-name:var(--font-family-primary)] m-0',
+    variants: {
+        variant: {
+            display: 'text-[length:var(--font-size-display)] leading-[1.2] font-[number:var(--font-weight-bold)]',
+            h1: 'text-[length:var(--font-size-h1)] leading-[1.25] font-[number:var(--font-weight-bold)]',
+            h2: 'text-[length:var(--font-size-h2)] leading-[1.2857] font-[number:var(--font-weight-bold)]',
+            h3: 'text-[length:var(--font-size-h3)] leading-[1.3333] font-[number:var(--font-weight-bold)]',
+            h4: 'text-[length:var(--font-size-h4)] leading-[1.4] font-[number:var(--font-weight-semibold)]',
+            bodyLg: 'text-[length:var(--font-size-body-lg)] leading-[1.5556] font-[number:var(--font-weight-regular)]',
+            body: 'text-[length:var(--font-size-body)] leading-[1.5] font-[number:var(--font-weight-regular)]',
+            bodySm: 'text-[length:var(--font-size-body-sm)] leading-[1.4286] font-[number:var(--font-weight-regular)]',
+            caption: 'text-[length:var(--font-size-caption)] leading-[1.3333] font-[number:var(--font-weight-regular)]',
+            label: 'text-[length:var(--font-size-label)] leading-[1.4286] font-[number:var(--font-weight-semibold)]',
+            button: 'text-[length:var(--font-size-button)] leading-[1.4286] font-[number:var(--font-weight-semibold)]',
+            overline: 'text-[length:var(--font-size-overline)] leading-[1.3333] font-[number:var(--font-weight-semibold)] uppercase tracking-[0.06em]',
+            mono: [
+                'text-[length:var(--font-size-mono)] leading-[1.5385] font-[number:var(--font-weight-regular)]',
+                'font-[family-name:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace]',
+            ].join(' '),
+        },
+    },
+    defaultVariants: {
+        variant: 'body',
+    },
+});
+const DEFAULT_ELEMENT = {
+    display: 'p',
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    h4: 'h4',
+    bodyLg: 'p',
+    body: 'p',
+    bodySm: 'p',
+    caption: 'span',
+    label: 'span',
+    button: 'span',
+    overline: 'span',
+    mono: 'code',
+};
+export const Typography = forwardRef(({ variant = 'body', as, className, children, ...rest }, ref) => {
+    const Component = as ?? DEFAULT_ELEMENT[variant];
+    return createElement(Component, {
+        ref,
+        className: typography({ variant, className }),
+        ...rest,
+    }, children);
+});
+Typography.displayName = 'Typography';
+//# sourceMappingURL=Typography.js.map

package/dist/ui/Typography/Typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../src/ui/Typography/Typography.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EACb,UAAU,GAIX,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,EAAE,EAAqB,MAAM,cAAc,CAAC;AAErD;;;;GAIG;AAEH,MAAM,UAAU,GAAG,EAAE,CAAC;IACpB,IAAI,EAAE,mDAAmD;IACzD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EACL,4FAA4F;YAC9F,EAAE,EAAE,wFAAwF;YAC5F,EAAE,EAAE,0FAA0F;YAC9F,EAAE,EAAE,0FAA0F;YAC9F,EAAE,EAAE,2FAA2F;YAC/F,MAAM,EACJ,kGAAkG;YACpG,IAAI,EAAE,4FAA4F;YAClG,MAAM,EACJ,kGAAkG;YACpG,OAAO,EACL,kGAAkG;YACpG,KAAK,EACH,iGAAiG;YACnG,MAAM,EACJ,kGAAkG;YACpG,QAAQ,EACN,gIAAgI;YAClI,IAAI,EAAE;gBACJ,+FAA+F;gBAC/F,gFAAgF;aACjF,CAAC,IAAI,CAAC,GAAG,CAAC;SACZ;KACF;IACD,eAAe,EAAE;QACf,OAAO,EAAE,MAAM;KAChB;CACF,CAAC,CAAC;AAMH,MAAM,eAAe,GAA2C;IAC9D,OAAO,EAAE,GAAG;IACZ,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;IACT,MAAM,EAAE,GAAG;IACX,OAAO,EAAE,MAAM;IACf,KAAK,EAAE,MAAM;IACb,MAAM,EAAE,MAAM;IACd,QAAQ,EAAE,MAAM;IAChB,IAAI,EAAE,MAAM;CACb,CAAC;AAQF,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAClC,CAAC,EAAE,OAAO,GAAG,MAAM,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IAC9D,MAAM,SAAS,GAAG,EAAE,IAAI,eAAe,CAAC,OAAO,CAAC,CAAC;IACjD,OAAO,aAAa,CAClB,SAAS,EACT;QACE,GAAG;QACH,SAAS,EAAE,UAAU,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;QAC7C,GAAG,IAAI;KACR,EACD,QAAQ,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pi-kiosk-shared",
-  "version": "2.2.35",
+  "version": "2.2.37",
   "type": "module",
   "private": false,
   "description": "Shared types, API contracts, and error classes for Pi Kiosk system",

package/src/tokens/brand-bridge.css

@@ -8,6 +8,12 @@
  * @source https://www.canva.com/colors/color-palettes/up-above/
  */
 :root {
+  /* Typography families — shared SSOT (admin also mirrors in design-tokens.css) */
+  --font-family-primary: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
+
   /* ── Canva Up Above (provisional — pending PO hex confirmation) ── */
   --brand-canva-sailor-blue: #00203f;
   --brand-canva-mint: #adefd1;