tekivex-ui 2.0.2 → 2.2.0

package/dist/src/components/TkxTypography.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TkxTypography.d.ts","sourceRoot":"","sources":["../../../src/components/TkxTypography.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/index.d.ts

@@ -38,4 +38,24 @@ export * from './TkxNumberInput';
 export * from './TkxOTP';
 export * from './TkxCommand';
 export * from './TkxCarousel';
+export * from './TkxBreadcrumb';
+export * from './TkxPopover';
+export * from './TkxAutocomplete';
+export * from './TkxTreeView';
+export * from './TkxToolbar';
+export * from './TkxTransferList';
+export * from './TkxSpeedDial';
+export * from './TkxAppBar';
+export * from './TkxBottomNav';
+export * from './TkxSnackbar';
+export * from './TkxDataGrid';
+export * from './TkxMasonry';
+export * from './TkxRichTextDisplay';
+export * from './TkxForm';
+export * from './TkxLayout';
+export * from './TkxConfigProvider';
+export * from './TkxTypography';
+export * from './TkxSpin';
+export * from './TkxEmpty';
+export * from './TkxStatistic';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC"}

package/dist/src/i18n/I18nProvider.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from 'react';
+import { type LocaleCode, type LocaleStrings, type Direction } from './index';
+export interface I18nProviderProps {
+    locale?: LocaleCode;
+    direction?: Direction;
+    strings?: Partial<LocaleStrings>;
+    children: ReactNode;
+}
+export declare function I18nProvider({ locale, direction, strings: overrides, children, }: I18nProviderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=I18nProvider.d.ts.map

package/dist/src/i18n/I18nProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"I18nProvider.d.ts","sourceRoot":"","sources":["../../../src/i18n/I18nProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAqC,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAEjH,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACjC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,EAC3B,MAAgB,EAChB,SAAS,EACT,OAAO,EAAE,SAAS,EAClB,QAAQ,GACT,EAAE,iBAAiB,2CAoBnB"}

package/dist/src/i18n/index.d.ts

@@ -0,0 +1,50 @@
+export type Direction = 'ltr' | 'rtl';
+export interface LocaleStrings {
+    close: string;
+    cancel: string;
+    confirm: string;
+    save: string;
+    delete: string;
+    search: string;
+    loading: string;
+    noResults: string;
+    required: string;
+    previous: string;
+    next: string;
+    pageOf: (page: number, total: number) => string;
+    selectPlaceholder: string;
+    clearSelection: string;
+    selectDate: string;
+    today: string;
+    dropFiles: string;
+    browse: string;
+    noData: string;
+    sortAscending: string;
+    sortDescending: string;
+}
+export declare const enUS: LocaleStrings;
+export declare const esES: LocaleStrings;
+export declare const arSA: LocaleStrings;
+export declare const frFR: LocaleStrings;
+export declare const deDE: LocaleStrings;
+export declare const jaJP: LocaleStrings;
+export declare const LOCALES: {
+    readonly 'en-US': LocaleStrings;
+    readonly 'es-ES': LocaleStrings;
+    readonly 'ar-SA': LocaleStrings;
+    readonly 'fr-FR': LocaleStrings;
+    readonly 'de-DE': LocaleStrings;
+    readonly 'ja-JP': LocaleStrings;
+};
+export type LocaleCode = keyof typeof LOCALES;
+export declare function isRTL(locale: string): boolean;
+export interface I18nContextValue {
+    locale: LocaleCode;
+    direction: Direction;
+    strings: LocaleStrings;
+}
+export declare const I18nContext: import("react").Context<I18nContextValue>;
+export declare function useI18n(): I18nContextValue;
+export declare function useLocale(): LocaleStrings;
+export declare function useDirection(): Direction;
+//# sourceMappingURL=index.d.ts.map

package/dist/src/i18n/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/i18n/index.ts"],"names":[],"mappings":"AAIA,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK,CAAC;AAItC,MAAM,WAAW,aAAa;IAE5B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IAGjB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAGhD,iBAAiB,EAAE,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,CAAC;IAGvB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IAGd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IAGf,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,MAAM,CAAC;CACxB;AAID,eAAO,MAAM,IAAI,EAAE,aAsBlB,CAAC;AAIF,eAAO,MAAM,IAAI,EAAE,aAsBlB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,aAsBlB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,aAsBlB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,aAsBlB,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,aAsBlB,CAAC;AAIF,eAAO,MAAM,OAAO;;;;;;;CAOV,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,OAAO,CAAC;AAM9C,wBAAgB,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAE7C;AAID,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,UAAU,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,OAAO,EAAE,aAAa,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,2CAItB,CAAC;AAEH,wBAAgB,OAAO,IAAI,gBAAgB,CAE1C;AAED,wBAAgB,SAAS,IAAI,aAAa,CAEzC;AAED,wBAAgB,YAAY,IAAI,SAAS,CAExC"}

package/dist/src/themes/index.d.ts

@@ -23,4 +23,112 @@ export interface ThemeProviderProps {
 }
 export declare function ThemeProvider({ theme, children }: ThemeProviderProps): import("react").FunctionComponentElement<import("react").ProviderProps<ThemeTokens>>;
 export declare function useTheme(): ThemeTokens;
+export interface ColorPalette {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+}
+export declare function generatePalette(hex: string): ColorPalette;
+export declare const typography: {
+    readonly xs: {
+        readonly fontSize: "0.75rem";
+        readonly lineHeight: "1rem";
+    };
+    readonly sm: {
+        readonly fontSize: "0.875rem";
+        readonly lineHeight: "1.25rem";
+    };
+    readonly base: {
+        readonly fontSize: "1rem";
+        readonly lineHeight: "1.5rem";
+    };
+    readonly lg: {
+        readonly fontSize: "1.125rem";
+        readonly lineHeight: "1.75rem";
+    };
+    readonly xl: {
+        readonly fontSize: "1.25rem";
+        readonly lineHeight: "1.75rem";
+    };
+    readonly '2xl': {
+        readonly fontSize: "1.5rem";
+        readonly lineHeight: "2rem";
+    };
+    readonly '3xl': {
+        readonly fontSize: "1.875rem";
+        readonly lineHeight: "2.25rem";
+    };
+    readonly '4xl': {
+        readonly fontSize: "2.25rem";
+        readonly lineHeight: "2.5rem";
+    };
+    readonly '5xl': {
+        readonly fontSize: "3rem";
+        readonly lineHeight: "1.15";
+    };
+};
+export declare const spacing: {
+    readonly 0: "0px";
+    readonly 0.5: "2px";
+    readonly 1: "4px";
+    readonly 1.5: "6px";
+    readonly 2: "8px";
+    readonly 2.5: "10px";
+    readonly 3: "12px";
+    readonly 4: "16px";
+    readonly 5: "20px";
+    readonly 6: "24px";
+    readonly 8: "32px";
+    readonly 10: "40px";
+    readonly 12: "48px";
+    readonly 16: "64px";
+    readonly 20: "80px";
+    readonly 24: "96px";
+};
+export declare const breakpoints: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly '2xl': 1536;
+};
+export declare const shadows: {
+    readonly none: "none";
+    readonly xs: "0 1px 2px 0 rgba(0,0,0,0.05)";
+    readonly sm: "0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1)";
+    readonly md: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)";
+    readonly lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)";
+    readonly xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)";
+    readonly '2xl': "0 25px 50px -12px rgba(0,0,0,0.25)";
+    readonly inner: "inset 0 2px 4px 0 rgba(0,0,0,0.06)";
+};
+export declare const zIndex: {
+    readonly hide: -1;
+    readonly base: 0;
+    readonly dropdown: 1000;
+    readonly sticky: 1100;
+    readonly fixed: 1200;
+    readonly overlay: 1300;
+    readonly modal: 1400;
+    readonly popover: 1500;
+    readonly tooltip: 1600;
+    readonly toast: 1700;
+    readonly max: 9999;
+};
+export declare const radii: {
+    readonly none: "0";
+    readonly sm: "4px";
+    readonly md: "6px";
+    readonly lg: "8px";
+    readonly xl: "12px";
+    readonly '2xl': "16px";
+    readonly full: "9999px";
+};
 //# sourceMappingURL=index.d.ts.map

package/dist/src/themes/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwC,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAM5F,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AAID,eAAO,MAAM,WAAW,EAAE,WAazB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,WAazB,CAAC;AAMF,wBAAgB,WAAW,CAAC,IAAI,EAAE,WAAW,EAAE,SAAS,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,WAAW,CAuB5F;AAID,eAAO,MAAM,YAAY,sCAA0C,CAAC;AAEpE,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAAE,KAAmB,EAAE,QAAQ,EAAE,EAAE,kBAAkB,wFAelF;AAED,wBAAgB,QAAQ,IAAI,WAAW,CAEtC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/themes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwC,KAAK,SAAS,EAAiB,MAAM,OAAO,CAAC;AAM5F,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd;AAID,eAAO,MAAM,WAAW,EAAE,WAazB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,WAazB,CAAC;AAMF,wBAAgB,WAAW,CAAC,IAAI,EAAE,WAAW,EAAE,SAAS,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,GAAG,WAAW,CAuB5F;AAID,eAAO,MAAM,YAAY,sCAA0C,CAAC;AAEpE,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAAE,KAAmB,EAAE,QAAQ,EAAE,EAAE,kBAAkB,wFAelF;AAED,wBAAgB,QAAQ,IAAI,WAAW,CAEtC;AAoCD,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED,wBAAgB,eAAe,CAAC,GAAG,EAAE,MAAM,GAAG,YAAY,CAczD;AAID,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAUb,CAAC;AAIX,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;CAiBV,CAAC;AAIX,eAAO,MAAM,WAAW;;;;;;CAMd,CAAC;AAIX,eAAO,MAAM,OAAO;;;;;;;;;CASV,CAAC;AAIX,eAAO,MAAM,MAAM;;;;;;;;;;;;CAYT,CAAC;AAIX,eAAO,MAAM,KAAK;;;;;;;;CAQR,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tekivex-ui",
-  "version": "2.0.2",
+  "version": "2.2.0",
   "description": "Quantum-Class Component Framework — WCAG 2.1 AAA, WAI-ARIA 1.2, Zero-Trust Security",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -18,7 +18,7 @@
       "require": "./dist/themes.cjs"
     }
   },
-  "sideEffects": ["*.css"],
+  "sideEffects": ["*.css", "./src/styles/global.css"],
   "files": ["dist", "src"],
   "scripts": {
     "build": "vite build && tsc --emitDeclarationOnly",

package/src/components/TkxAppBar.tsx

@@ -0,0 +1,260 @@
+import {
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  useId,
+  type ReactNode,
+  type CSSProperties,
+} from 'react';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { useReducedMotion, useEscapeKey } from '../hooks';
+import { tkx } from '../engine/tkx';
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+export interface TkxAppBarProps {
+  title?: ReactNode;
+  logo?: ReactNode;
+  actions?: ReactNode;
+  navigation?: ReactNode;
+  position?: 'fixed' | 'sticky' | 'static';
+  variant?: 'default' | 'transparent' | 'elevated';
+  color?: 'primary' | 'surface';
+}
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const MOBILE_BREAKPOINT = 768;
+const BAR_HEIGHT = 56;
+
+// ── Hamburger icon ──────────────────────────────────────────────────────────
+
+function HamburgerIcon({ open }: { open: boolean }) {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      aria-hidden="true"
+    >
+      {open ? (
+        <>
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </>
+      ) : (
+        <>
+          <line x1="3" y1="6" x2="21" y2="6" />
+          <line x1="3" y1="12" x2="21" y2="12" />
+          <line x1="3" y1="18" x2="21" y2="18" />
+        </>
+      )}
+    </svg>
+  );
+}
+
+// ── Breakpoint hook ─────────────────────────────────────────────────────────
+
+function useIsMobile(): boolean {
+  const [isMobile, setIsMobile] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return window.innerWidth < MOBILE_BREAKPOINT;
+  });
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const handler = () => setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    window.addEventListener('resize', handler);
+    return () => window.removeEventListener('resize', handler);
+  }, []);
+
+  return isMobile;
+}
+
+// ── Component ─────────────────────────────────────────────────────────────────
+
+export function TkxAppBar({
+  title,
+  logo,
+  actions,
+  navigation,
+  position = 'sticky',
+  variant = 'default',
+  color = 'surface',
+}: TkxAppBarProps) {
+  const theme = useTheme();
+  const reduced = useReducedMotion();
+  const isMobile = useIsMobile();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const navId = useId();
+
+  // Close mobile menu on escape
+  useEscapeKey(() => setMenuOpen(false), menuOpen);
+
+  // Close on resize to desktop
+  useEffect(() => {
+    if (!isMobile && menuOpen) setMenuOpen(false);
+  }, [isMobile, menuOpen]);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!menuOpen) return;
+    const handler = (e: PointerEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener('pointerdown', handler);
+    return () => document.removeEventListener('pointerdown', handler);
+  }, [menuOpen]);
+
+  const toggleMenu = useCallback(() => {
+    setMenuOpen((prev) => !prev);
+  }, []);
+
+  // ── Color resolution ────────────────────────────────────────────────────
+
+  const bgColor = color === 'primary' ? theme.primary : theme.surface;
+  const textColor = color === 'primary' ? theme.bg : theme.text;
+
+  // ── Variant styles ──────────────────────────────────────────────────────
+
+  const variantStyles: Record<string, CSSProperties> = {
+    default: {
+      backgroundColor: bgColor,
+      borderBottom: `1px solid ${theme.border}`,
+    },
+    transparent: {
+      backgroundColor: 'transparent',
+      borderBottom: 'none',
+    },
+    elevated: {
+      backgroundColor: bgColor,
+      boxShadow: `0 2px 8px ${theme.bg}66`,
+      borderBottom: 'none',
+    },
+  };
+
+  // ── Position styles ─────────────────────────────────────────────────────
+
+  const positionStyles: Record<string, CSSProperties> = {
+    fixed: { position: 'fixed', top: 0, left: 0, right: 0, zIndex: 1100 },
+    sticky: { position: 'sticky', top: 0, zIndex: 1100 },
+    static: { position: 'static' },
+  };
+
+  const safeTitle = typeof title === 'string' ? sanitizeString(title) : title;
+
+  // ── Transition ──────────────────────────────────────────────────────────
+
+  const slideTransition = reduced
+    ? 'none'
+    : 'max-height 300ms cubic-bezier(0.4,0,0.2,1), opacity 300ms ease';
+
+  return (
+    <header
+      role="banner"
+      className={tkx('font-sans w-full')}
+      style={{
+        ...positionStyles[position],
+        ...variantStyles[variant],
+        color: textColor,
+        height: BAR_HEIGHT,
+      }}
+    >
+      <div
+        ref={menuRef}
+        className={tkx('flex items-center h-full px-4')}
+        style={{ maxWidth: 1440, margin: '0 auto' }}
+      >
+        {/* Logo area */}
+        {logo && (
+          <div
+            className={tkx('flex items-center shrink-0 mr-3')}
+            aria-hidden="true"
+          >
+            {logo}
+          </div>
+        )}
+
+        {/* Title */}
+        {safeTitle && (
+          <div
+            className={tkx('text-base font-semibold shrink-0 mr-4 leading-snug')}
+            style={{ color: textColor }}
+          >
+            {safeTitle}
+          </div>
+        )}
+
+        {/* Desktop navigation */}
+        {!isMobile && navigation && (
+          <nav
+            id={navId}
+            aria-label="Main navigation"
+            className={tkx('flex items-center flex-1 gap-1')}
+          >
+            {navigation}
+          </nav>
+        )}
+
+        {/* Spacer for mobile */}
+        {isMobile && <div className={tkx('flex-1')} />}
+
+        {/* Desktop actions */}
+        {actions && (
+          <div className={tkx('flex items-center gap-2 ml-auto shrink-0')}>
+            {actions}
+          </div>
+        )}
+
+        {/* Mobile hamburger */}
+        {isMobile && navigation && (
+          <button
+            onClick={toggleMenu}
+            aria-expanded={menuOpen}
+            aria-controls={navId}
+            aria-label={menuOpen ? 'Close navigation menu' : 'Open navigation menu'}
+            className={tkx(
+              'bg-transparent border-none cursor-pointer p-2 ml-2 rounded flex items-center justify-center',
+              'focus-visible:focus-ring',
+            )}
+            style={{ color: textColor }}
+          >
+            <HamburgerIcon open={menuOpen} />
+          </button>
+        )}
+      </div>
+
+      {/* Mobile dropdown menu */}
+      {isMobile && navigation && (
+        <nav
+          id={navId}
+          aria-label="Main navigation"
+          style={{
+            maxHeight: menuOpen ? 400 : 0,
+            opacity: menuOpen ? 1 : 0,
+            overflow: 'hidden',
+            transition: slideTransition,
+            backgroundColor: theme.surface,
+            borderBottom: menuOpen ? `1px solid ${theme.border}` : 'none',
+          }}
+        >
+          <div
+            className={tkx('flex flex-col gap-1 px-4 py-3')}
+            role="menu"
+          >
+            {navigation}
+          </div>
+        </nav>
+      )}
+    </header>
+  );
+}