From 7582577a3feb646b5b42e4ae618cb42c9ff2aa4c Mon Sep 17 00:00:00 2001
From: Luke Bennett <hello@lukebennett.com.au>
Date: Sat, 26 Sep 2026 20:52:56 +1000
Subject: [PATCH] Export fixed breakpoints from @luke-ui/react/styles (#689)

---
 apps/docs/content/docs/docs/layout.mdx        |  5 +++
 apps/docs/src/examples/layout/breakpoints.tsx | 31 +++++++++++++++++++
 .../src/core/styles/package-exports.test.ts   | 11 +++++++
 .../src/core/styles/packed-consumer.test.ts   | 15 ++++++---
 packages/@luke-ui/react/src/exports/styles.ts |  1 +
 .../@luke-ui/react/src/theme/breakpoints.ts   |  8 +++--
 6 files changed, 65 insertions(+), 6 deletions(-)
 create mode 100644 apps/docs/src/examples/layout/breakpoints.tsx

diff --git a/apps/docs/content/docs/docs/layout.mdx b/apps/docs/content/docs/docs/layout.mdx
index 057f43ec..c732ee16 100644
--- a/apps/docs/content/docs/docs/layout.mdx
+++ b/apps/docs/content/docs/docs/layout.mdx
@@ -70,6 +70,11 @@ Every breakpoint is a minimum inline size, so there is no maximum size or range
 set at `bp640` also applies at `bp768` and above, unless a later breakpoint overrides it. Values
 cascade up from `initial`, so specify only the points where the layout changes.
 
+Import `breakpoints` from `@luke-ui/react/styles` when you author `@container` queries against the
+same thresholds Luke UI responsive props use.
+
+<ExampleBlock src="layout/breakpoints" title="Layout: Shared breakpoints" />
+
 <ExampleBlock src="box/responsive-layout" title="Layout: Responsive values" />
 
 Set a responsive value when the layout needs a deliberate change. Prefer intrinsic wrapping when the
diff --git a/apps/docs/src/examples/layout/breakpoints.tsx b/apps/docs/src/examples/layout/breakpoints.tsx
new file mode 100644
index 00000000..37e0e44d
--- /dev/null
+++ b/apps/docs/src/examples/layout/breakpoints.tsx
@@ -0,0 +1,31 @@
+import { breakpoints } from '@luke-ui/react/styles';
+import { vars } from '@luke-ui/react/theme';
+import { ExampleItem } from '#docs';
+
+export default () => {
+	return (
+		<>
+			<style
+				dangerouslySetInnerHTML={{
+					__html: `
+				.layout-breakpoints {
+					display: flex;
+					flex-direction: column;
+					gap: ${vars.space.sp12};
+				}
+
+				@container (inline-size >= ${breakpoints.bp768}px) {
+					.layout-breakpoints {
+						flex-direction: row;
+					}
+				}
+			`,
+				}}
+			/>
+			<div className="layout-breakpoints">
+				<ExampleItem style={{ flex: 1 }}>First</ExampleItem>
+				<ExampleItem style={{ flex: 1 }}>Second</ExampleItem>
+			</div>
+		</>
+	);
+};
diff --git a/packages/@luke-ui/react/src/core/styles/package-exports.test.ts b/packages/@luke-ui/react/src/core/styles/package-exports.test.ts
index dc197705..78dba674 100644
--- a/packages/@luke-ui/react/src/core/styles/package-exports.test.ts
+++ b/packages/@luke-ui/react/src/core/styles/package-exports.test.ts
@@ -137,6 +137,17 @@ test('does not expose the private combobox styling recipe from the primitive ent
 	expect('comboboxRecipe' in combobox).toBe(false);
 });
 
+test('exports fixed breakpoints from the styles entry', async () => {
+	const styles = await import('@luke-ui/react/styles');
+	expect(styles.breakpoints).toEqual({
+		bp640: 640,
+		bp768: 768,
+		bp1024: 1024,
+		bp1280: 1280,
+		bp1536: 1536,
+	});
+});
+
 /** JS package exports that publish TypeScript declarations beside the runtime file. */
 function publicTypeEntryDeclarations(exportsMap: Record<string, string>): Array<string> {
 	const entries: Array<string> = [];
diff --git a/packages/@luke-ui/react/src/core/styles/packed-consumer.test.ts b/packages/@luke-ui/react/src/core/styles/packed-consumer.test.ts
index e35a98be..fb8b5035 100644
--- a/packages/@luke-ui/react/src/core/styles/packed-consumer.test.ts
+++ b/packages/@luke-ui/react/src/core/styles/packed-consumer.test.ts
@@ -65,7 +65,7 @@ test(
 					"import { createElement } from 'react';",
 					"import { renderToStaticMarkup } from 'react-dom/server';",
 					"import { Blockquote } from '@luke-ui/react/blockquote';",
-					"import { createSprinkles } from '@luke-ui/react/styles';",
+					"import { breakpoints, createSprinkles } from '@luke-ui/react/styles';",
 					'',
 					'const layout = createSprinkles({ display: "flex", id: "sprinkles-root" });',
 					'if (!createSprinkles.properties.has("display")) {',
@@ -74,9 +74,12 @@ test(
 					'if (layout.id !== "sprinkles-root") {',
 					'  throw new Error("createSprinkles must pass through non-utility props");',
 					'}',
+					'if (breakpoints.bp768 !== 768) {',
+					'  throw new Error("breakpoints.bp768 must be 768");',
+					'}',
 					'',
 					"const markup = renderToStaticMarkup(createElement(Blockquote, null, 'Hello world'));",
-					'process.stdout.write(JSON.stringify({ markup, layoutId: layout.id, className: layout.className }));',
+					'process.stdout.write(JSON.stringify({ markup, layoutId: layout.id, className: layout.className, bp768: breakpoints.bp768 }));',
 				].join('\n'),
 			);
 
@@ -91,15 +94,19 @@ test(
 				!isRecord(parsed) ||
 				typeof parsed.markup !== 'string' ||
 				typeof parsed.layoutId !== 'string' ||
-				typeof parsed.className !== 'string'
+				typeof parsed.className !== 'string' ||
+				typeof parsed.bp768 !== 'number'
 			) {
-				throw new Error('Expected packed consumer output to include markup and sprinkles fields.');
+				throw new Error(
+					'Expected packed consumer output to include markup, sprinkles, and breakpoint fields.',
+				);
 			}
 
 			expect(parsed.markup).toContain('<blockquote');
 			expect(parsed.markup).toContain('Hello world');
 			expect(parsed.layoutId).toBe('sprinkles-root');
 			expect(parsed.className.length).toBeGreaterThan(0);
+			expect(parsed.bp768).toBe(768);
 		} finally {
 			await rm(tarballDir, { force: true, recursive: true });
 			await rm(consumerDir, { force: true, recursive: true });
diff --git a/packages/@luke-ui/react/src/exports/styles.ts b/packages/@luke-ui/react/src/exports/styles.ts
index dc7d1e81..a9344dfc 100644
--- a/packages/@luke-ui/react/src/exports/styles.ts
+++ b/packages/@luke-ui/react/src/exports/styles.ts
@@ -1,2 +1,3 @@
 export type { SprinklesProps } from '../core/styles/utilities.css.js';
 export { createSprinkles } from '../core/styles/utilities.css.js';
+export { breakpoints } from '../theme/breakpoints.js';
diff --git a/packages/@luke-ui/react/src/theme/breakpoints.ts b/packages/@luke-ui/react/src/theme/breakpoints.ts
index 748018ea..026c9409 100644
--- a/packages/@luke-ui/react/src/theme/breakpoints.ts
+++ b/packages/@luke-ui/react/src/theme/breakpoints.ts
@@ -1,6 +1,10 @@
 /**
- * Responsive breakpoint inline sizes in CSS pixels.
- * Kept in TypeScript because container query conditions cannot use custom properties.
+ * Fixed minimum container inline sizes in CSS pixels.
+ *
+ * Luke UI responsive props use these thresholds against the nearest size container. Import
+ * `breakpoints` from `@luke-ui/react/styles` when authoring your own `@container` queries so custom
+ * CSS tracks the same sizes. Values stay in TypeScript because container-query conditions cannot
+ * use custom properties, and they are not themeable.
  */
 export const breakpoints = {
 	bp640: 640,
-- 
2.51.2