fix: 🐛 preserve breakpoints.keys in the validated theme (#2272)

withBreakpointValidation replaced theme.breakpoints wholesale with an
object built only from the validator names (up, down, between, only),
so `keys` was dropped from the public API. The spread of `...theme` did
not help, since `breakpoints` is the only top-level key.

Consumers of the public entry point got `undefined` for
`theme.breakpoints.keys` while ThemeBreakpoints still typed it as
`readonly string[]`, so TypeScript accepted code that crashed at runtime.

Existing tests missed this because they cover create-theme (the raw
module) and with-validation (against a mock) separately, never the
composition that ships. Add a spec on the public entry point.

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>

Author: mg901

src/styled-breakpoints/index.spec.ts

@@ -0,0 +1,49 @@
+import { createStyledBreakpointsTheme } from '.';
+
+describe('public entry point', () => {
+  it('exposes the full breakpoints API', () => {
+    const theme = createStyledBreakpointsTheme();
+
+    expect(theme.breakpoints.keys).toEqual([
+      'xs',
+      'sm',
+      'md',
+      'lg',
+      'xl',
+      'xxl',
+    ]);
+    expect(theme.breakpoints.up).toBeTypeOf('function');
+    expect(theme.breakpoints.down).toBeTypeOf('function');
+    expect(theme.breakpoints.between).toBeTypeOf('function');
+    expect(theme.breakpoints.only).toBeTypeOf('function');
+  });
+
+  it('keeps keys of a custom config', () => {
+    const theme = createStyledBreakpointsTheme({
+      breakpoints: {
+        values: {
+          mobile: '0px',
+          tablet: '768px',
+          desktop: '1200px',
+        },
+      },
+    });
+
+    expect(theme.breakpoints.keys).toEqual(['mobile', 'tablet', 'desktop']);
+  });
+
+  it('builds media queries', () => {
+    const theme = createStyledBreakpointsTheme();
+
+    expect(theme.breakpoints.up('md')).toBe('@media (width >= 768px)');
+  });
+
+  it('still validates through the wrapper', () => {
+    const theme = createStyledBreakpointsTheme();
+
+    expect(() =>
+      // @ts-expect-error
+      theme.breakpoints.up('nope')
+    ).toThrow(/does not exist/);
+  });
+});

src/styled-breakpoints/validation/breakpoints-validation.ts

@@ -175,6 +175,9 @@ export const withBreakpointValidation = <T extends Values>(
 
   return {
     ...theme,
-    breakpoints: Object.fromEntries(entries),
+    breakpoints: {
+      ...theme.breakpoints,
+      ...Object.fromEntries(entries),
+    },
   };
 };