feat: Add MediaQueryPresets

Author: techniq

.changeset/fancy-poets-lead.md

@@ -0,0 +1,5 @@
+---
+'@layerstack/svelte-state': patch
+---
+
+feat: Add `MediaQueryPresets`

packages/svelte-state/src/lib/index.ts

@@ -1,3 +1,4 @@
+export { MediaQueryPresets } from './mediaQueryPresets.svelte.js';
 export { SelectionState } from './selectionState.svelte.js';
 export { TimerState } from './timerState.svelte.js';
 export { UniqueState } from './uniqueState.svelte.js';

packages/svelte-state/src/lib/mediaQueryPresets.svelte.ts

@@ -0,0 +1,30 @@
+import { MediaQuery } from 'svelte/reactivity';
+
+export class MediaQueryPresets {
+  width(width: number) {
+    return new MediaQuery(`(min-width: ${width}px)`);
+  }
+
+  height(height: number) {
+    return new MediaQuery(`(min-height: ${height}px)`);
+  }
+
+  // Matches tailwind defaults (https://tailwindcss.com/docs/responsive-design)
+  smScreen = this.width(640);
+  mdScreen = this.width(768);
+  lgScreen = this.width(1024);
+  xlScreen = this.width(1280);
+  xxlScreen = this.width(1536);
+
+  screen = new MediaQuery('screen');
+  print = new MediaQuery('print');
+
+  dark = new MediaQuery('(prefers-color-scheme: dark)');
+  light = new MediaQuery('(prefers-color-scheme: light)');
+
+  motion = new MediaQuery('(prefers-reduced-motion: no-preference)');
+  motionReduce = new MediaQuery('(prefers-reduced-motion: reduce)');
+
+  landscape = new MediaQuery('(orientation: landscape)');
+  portrait = new MediaQuery('(orientation: portrait)');
+}

sites/docs/src/routes/_NavMenu.svelte

@@ -19,7 +19,7 @@
     'styles',
   ];
 
-  const state = ['SelectionState', 'TimerState', 'UniqueState'];
+  const state = ['MediaQueryPresets', 'SelectionState', 'TimerState', 'UniqueState'];
 
   const stores = [
     'changeStore',

sites/docs/src/routes/docs/svelte-state/MediaQueryPresets/+page.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+  import { MediaQuery } from 'svelte/reactivity';
+
+  import { Icon } from 'svelte-ux';
+  import { MediaQueryPresets } from '@layerstack/svelte-state';
+  import { mdiCheckCircle, mdiCloseCircle } from '@mdi/js';
+
+  import Code from '$docs/Code.svelte';
+  import Preview from '$docs/Preview.svelte';
+
+  const {
+    smScreen,
+    mdScreen,
+    lgScreen,
+    xlScreen,
+    xxlScreen,
+    screen,
+    print,
+    dark,
+    motion,
+    motionReduce,
+  } = new MediaQueryPresets();
+
+  let innerWidth = 0;
+</script>
+
+<h1>Usage</h1>
+
+<Code
+  source={`<script>
+  import { MediaQueryPresets } from '@layerstack/svelte-state';
+  const { mdScreen, print} = new MediaQueryPresets();
+</script>
+
+{#if mdScreen.current}
+  <div>Only visible on 768px+ screens</div>
+{/if}
+
+{#if print.current}
+  <div>Only visable when printing</div>
+{/if}`}
+  `}
+  language="svelte"
+/>
+
+<h1>Examples</h1>
+
+<Preview>
+  <div class="grid grid-cols-[auto_1fr] items-center gap-2">
+    {#if smScreen.current}
+      <Icon data={mdiCheckCircle} size="1rem" class="text-success" />
+    {:else}
+      <Icon data={mdiCloseCircle} size="1rem" class="text-danger" />
+    {/if}
+    smScreen (640px)
+
+    {#if mdScreen.current}
+      <Icon data={mdiCheckCircle} size="1rem" class="text-success" />
+    {:else}
+      <Icon data={mdiCloseCircle} size="1rem" class="text-danger" />
+    {/if}
+    mdScreen (768px)
+
+    {#if lgScreen.current}
+      <Icon data={mdiCheckCircle} size="1rem" class="text-success" />
+    {:else}
+      <Icon data={mdiCloseCircle} size="1rem" class="text-danger" />
+    {/if}
+    lgScreen (1024px)
+
+    {#if xlScreen.current}
+      <Icon data={mdiCheckCircle} size="1rem" class="text-success" />
+    {:else}
+      <Icon data={mdiCloseCircle} size="1rem" class="text-danger" />
+    {/if}
+    xlScreen (1280px)
+
+    {#if xxlScreen.current}
+      <Icon data={mdiCheckCircle} size="1rem" class="text-success" />
+    {:else}
+      <Icon data={mdiCloseCircle} size="1rem" class="text-danger" />
+    {/if}
+    xxlScreen (1536px)
+
+    {#if screen.current}
+      <Icon data={mdiCheckCircle} size="1rem" class="text-success" />
+    {:else}
+      <Icon data={mdiCloseCircle} size="1rem" class="text-danger" />
+    {/if}
+    screen
+
+    {#if print.current}
+      <Icon data={mdiCheckCircle} size="1rem" class="text-success" />
+    {:else}
+      <Icon data={mdiCloseCircle} size="1rem" class="text-danger" />
+    {/if}
+    print
+
+    {#if dark.current}
+      <Icon data={mdiCheckCircle} size="1rem" class="text-success" />
+    {:else}
+      <Icon data={mdiCloseCircle} size="1rem" class="text-danger" />
+    {/if}
+    dark
+
+    {#if motion.current}
+      <Icon data={mdiCheckCircle} size="1rem" class="text-success" />
+    {:else}
+      <Icon data={mdiCloseCircle} size="1rem" class="text-danger" />
+    {/if}
+    motion
+
+    {#if motionReduce.current}
+      <Icon data={mdiCheckCircle} size="1rem" class="text-success" />
+    {:else}
+      <Icon data={mdiCloseCircle} size="1rem" class="text-danger" />
+    {/if}
+    motionReduce
+  </div>
+
+  <div class="ml-6 mt-3 text-surface-content/50 text-xs">
+    current width: {innerWidth}px
+  </div>
+</Preview>
+
+<svelte:window bind:innerWidth />

sites/docs/src/routes/docs/svelte-state/MediaQueryPresets/+page.ts

@@ -0,0 +1,13 @@
+import source from '$svelte-state/mediaQueryPresets.svelte.ts?raw';
+import pageSource from './+page.svelte?raw';
+
+export async function load() {
+  return {
+    meta: {
+      source,
+      pageSource,
+      description:
+        'Presets to monitor media query matching, including screen width/height, orientation, print media, prefers dark/light scheme, and prefers reduced motion',
+    },
+  };
+}