basefn 1.6.1 → 1.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basefn",
-  "version": "1.6.1",
+  "version": "1.8.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/brnrdog/basefn.git"

package/src/Basefn.res

@@ -71,6 +71,9 @@ type gridJustifyContent = Basefn__Grid.justifyContent
 type gridAlignContent = Basefn__Grid.alignContent
 type gridItemColumnSpan = Basefn__Grid.Item.columnSpan
 type gridItemRowSpan = Basefn__Grid.Item.rowSpan
+type breakpoint = Basefn__Responsive.breakpoint
+type currentBreakpoint = Basefn__Responsive.currentBreakpoint
+type responsiveValue<'a> = Basefn__Responsive.responsiveValue<'a>
 
 // Form Components
 module Button = {
@@ -224,3 +227,8 @@ module AlertDialog = {
 module ContextMenu = {
   include Basefn__ContextMenu
 }
+
+// Responsive Utilities
+module Responsive = {
+  include Basefn__Responsive
+}

package/src/Basefn.res.mjs

@@ -37,6 +37,7 @@ import * as Basefn__AppLayout from "./components/Basefn__AppLayout.res.mjs";
 import * as Basefn__HoverCard from "./components/Basefn__HoverCard.res.mjs";
 import * as Basefn__Separator from "./components/Basefn__Separator.res.mjs";
 import * as Basefn__Breadcrumb from "./components/Basefn__Breadcrumb.res.mjs";
+import * as Basefn__Responsive from "./Basefn__Responsive.res.mjs";
 import * as Basefn__ScrollArea from "./components/Basefn__ScrollArea.res.mjs";
 import * as Basefn__Typography from "./components/Basefn__Typography.res.mjs";
 import * as Basefn__AlertDialog from "./components/Basefn__AlertDialog.res.mjs";
@@ -139,6 +140,8 @@ let AlertDialog = Basefn__AlertDialog;
 
 let ContextMenu = Basefn__ContextMenu;
 
+let Responsive = Basefn__Responsive;
+
 export {
   Button,
   Input,
@@ -185,5 +188,6 @@ export {
   HoverCard,
   AlertDialog,
   ContextMenu,
+  Responsive,
 }
 /*  Not a pure module */

package/src/Basefn__Responsive.res

@@ -0,0 +1,291 @@
+%%raw(`import './components/Basefn__Responsive.css'`)
+open Xote
+
+// ============================================================================
+// Breakpoints
+// ============================================================================
+
+type breakpoint = Xs | Sm | Md | Lg | Xl | Xxl
+
+let breakpointToPixels = (bp: breakpoint): int => {
+  switch bp {
+  | Xs => 480
+  | Sm => 640
+  | Md => 768
+  | Lg => 1024
+  | Xl => 1280
+  | Xxl => 1536
+  }
+}
+
+let breakpointToString = (bp: breakpoint): string => {
+  switch bp {
+  | Xs => "xs"
+  | Sm => "sm"
+  | Md => "md"
+  | Lg => "lg"
+  | Xl => "xl"
+  | Xxl => "xxl"
+  }
+}
+
+// ============================================================================
+// Media query strings
+// ============================================================================
+
+let minWidth = (bp: breakpoint): string => {
+  let px = breakpointToPixels(bp)
+  `(min-width: ${Int.toString(px)}px)`
+}
+
+let maxWidth = (bp: breakpoint): string => {
+  let px = breakpointToPixels(bp) - 1
+  `(max-width: ${Int.toString(px)}px)`
+}
+
+let between = (lower: breakpoint, upper: breakpoint): string => {
+  let minPx = breakpointToPixels(lower)
+  let maxPx = breakpointToPixels(upper) - 1
+  `(min-width: ${Int.toString(minPx)}px) and (max-width: ${Int.toString(maxPx)}px)`
+}
+
+// Predefined media query strings
+module Query = {
+  let xsUp = minWidth(Xs)
+  let smUp = minWidth(Sm)
+  let mdUp = minWidth(Md)
+  let lgUp = minWidth(Lg)
+  let xlUp = minWidth(Xl)
+  let xxlUp = minWidth(Xxl)
+
+  let xsDown = maxWidth(Xs)
+  let smDown = maxWidth(Sm)
+  let mdDown = maxWidth(Md)
+  let lgDown = maxWidth(Lg)
+  let xlDown = maxWidth(Xl)
+  let xxlDown = maxWidth(Xxl)
+
+  let xsOnly = maxWidth(Sm)
+  let smOnly = between(Sm, Md)
+  let mdOnly = between(Md, Lg)
+  let lgOnly = between(Lg, Xl)
+  let xlOnly = between(Xl, Xxl)
+  let xxlOnly = minWidth(Xxl)
+
+  let portrait = "(orientation: portrait)"
+  let landscape = "(orientation: landscape)"
+  let prefersReducedMotion = "(prefers-reduced-motion: reduce)"
+  let prefersDark = "(prefers-color-scheme: dark)"
+  let prefersLight = "(prefers-color-scheme: light)"
+  let highContrast = "(prefers-contrast: more)"
+  let touchDevice = "(hover: none) and (pointer: coarse)"
+  let finePointer = "(hover: hover) and (pointer: fine)"
+  let retina = "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"
+}
+
+// ============================================================================
+// matchMedia binding
+// ============================================================================
+
+type mediaQueryList
+
+@val external matchMedia: string => mediaQueryList = "window.matchMedia"
+@get external matches: mediaQueryList => bool = "matches"
+@send external addListener: (mediaQueryList, mediaQueryList => unit) => unit = "addEventListener"
+@send external removeListener: (mediaQueryList, mediaQueryList => unit) => unit = "removeEventListener"
+
+let addChangeListener: (mediaQueryList, mediaQueryList => unit) => unit = %raw(`
+  function(mql, cb) { mql.addEventListener("change", cb) }
+`)
+
+let removeChangeListener: (mediaQueryList, mediaQueryList => unit) => unit = %raw(`
+  function(mql, cb) { mql.removeEventListener("change", cb) }
+`)
+
+// ============================================================================
+// Media query matching utilities
+// ============================================================================
+
+let matchesQuery = (query: string): bool => {
+  matches(matchMedia(query))
+}
+
+let matchesBreakpointUp = (bp: breakpoint): bool => matchesQuery(minWidth(bp))
+let matchesBreakpointDown = (bp: breakpoint): bool => matchesQuery(maxWidth(bp))
+
+// ============================================================================
+// Signal-based media query tracking
+// ============================================================================
+
+let makeMediaSignal = (query: string): Signal.t<bool> => {
+  let mql = matchMedia(query)
+  let signal = Signal.make(matches(mql))
+  let handler = (evt: mediaQueryList) => {
+    Signal.set(signal, matches(evt))
+  }
+  addChangeListener(mql, handler)
+  signal
+}
+
+let makeBreakpointSignal = (bp: breakpoint): Signal.t<bool> => {
+  makeMediaSignal(minWidth(bp))
+}
+
+// ============================================================================
+// Predefined screen size signals (memoized singletons)
+// ============================================================================
+
+// Helper: create a memoized signal that initializes on first access
+let _memo = (make: unit => Signal.t<bool>): (unit => Signal.t<bool>) => {
+  let cached: ref<option<Signal.t<bool>>> = ref(None)
+  () => {
+    switch cached.contents {
+    | Some(s) => s
+    | None => {
+        let s = make()
+        cached := Some(s)
+        s
+      }
+    }
+  }
+}
+
+// Exact breakpoint range signals
+let isXsScreen = _memo(() => makeMediaSignal(Query.xsDown))
+let isSmScreen = _memo(() => makeMediaSignal(Query.smOnly))
+let isMdScreen = _memo(() => makeMediaSignal(Query.mdOnly))
+let isLgScreen = _memo(() => makeMediaSignal(Query.lgOnly))
+let isXlScreen = _memo(() => makeMediaSignal(Query.xlOnly))
+let isXxlScreen = _memo(() => makeMediaSignal(Query.xxlOnly))
+
+// "And up" signals
+let isSmallAndUp = _memo(() => makeMediaSignal(Query.smUp))
+let isMediumAndUp = _memo(() => makeMediaSignal(Query.mdUp))
+let isLargeAndUp = _memo(() => makeMediaSignal(Query.lgUp))
+let isExtraLargeAndUp = _memo(() => makeMediaSignal(Query.xlUp))
+
+// Semantic device signals
+let isMobile = _memo(() => makeMediaSignal(Query.smDown))
+let isTablet = _memo(() => makeMediaSignal(Query.mdOnly))
+let isDesktop = _memo(() => makeMediaSignal(Query.lgUp))
+
+// Preference / capability signals
+let isPortrait = _memo(() => makeMediaSignal(Query.portrait))
+let isLandscape = _memo(() => makeMediaSignal(Query.landscape))
+let prefersReducedMotion = _memo(() => makeMediaSignal(Query.prefersReducedMotion))
+let prefersDarkMode = _memo(() => makeMediaSignal(Query.prefersDark))
+let isTouchDevice = _memo(() => makeMediaSignal(Query.touchDevice))
+let isRetina = _memo(() => makeMediaSignal(Query.retina))
+
+// ============================================================================
+// Current breakpoint tracking
+// ============================================================================
+
+type currentBreakpoint = ExtraSmall | Small | Medium | Large | ExtraLarge | ExtraExtraLarge
+
+let currentBreakpointToString = (bp: currentBreakpoint): string => {
+  switch bp {
+  | ExtraSmall => "xs"
+  | Small => "sm"
+  | Medium => "md"
+  | Large => "lg"
+  | ExtraLarge => "xl"
+  | ExtraExtraLarge => "xxl"
+  }
+}
+
+let getCurrentBreakpoint = (): currentBreakpoint => {
+  if matchesQuery(Query.xxlUp) {
+    ExtraExtraLarge
+  } else if matchesQuery(Query.xlUp) {
+    ExtraLarge
+  } else if matchesQuery(Query.lgUp) {
+    Large
+  } else if matchesQuery(Query.mdUp) {
+    Medium
+  } else if matchesQuery(Query.smUp) {
+    Small
+  } else {
+    ExtraSmall
+  }
+}
+
+let makeCurrentBreakpointSignal = (): Signal.t<currentBreakpoint> => {
+  let signal = Signal.make(getCurrentBreakpoint())
+
+  let breakpoints = [Sm, Md, Lg, Xl, Xxl]
+  breakpoints->Array.forEach(bp => {
+    let mql = matchMedia(minWidth(bp))
+    let _handler = (_evt: mediaQueryList) => {
+      Signal.set(signal, getCurrentBreakpoint())
+    }
+    addChangeListener(mql, _handler)
+  })
+
+  signal
+}
+
+let currentBreakpoint: ref<option<Signal.t<currentBreakpoint>>> = ref(None)
+
+let getCurrentBreakpointSignal = (): Signal.t<currentBreakpoint> => {
+  switch currentBreakpoint.contents {
+  | Some(s) => s
+  | None => {
+      let s = makeCurrentBreakpointSignal()
+      currentBreakpoint := Some(s)
+      s
+    }
+  }
+}
+
+// ============================================================================
+// Responsive value helpers
+// ============================================================================
+
+type responsiveValue<'a> = {
+  xs?: 'a,
+  sm?: 'a,
+  md?: 'a,
+  lg?: 'a,
+  xl?: 'a,
+  xxl?: 'a,
+}
+
+let resolveResponsiveValue = (value: responsiveValue<'a>, fallback: 'a): 'a => {
+  let bp = getCurrentBreakpoint()
+  // Build ordered list from current breakpoint down, cascade to find first defined value
+  let ordered = switch bp {
+  | ExtraExtraLarge => [value.xxl, value.xl, value.lg, value.md, value.sm, value.xs]
+  | ExtraLarge => [value.xl, value.lg, value.md, value.sm, value.xs]
+  | Large => [value.lg, value.md, value.sm, value.xs]
+  | Medium => [value.md, value.sm, value.xs]
+  | Small => [value.sm, value.xs]
+  | ExtraSmall => [value.xs]
+  }
+  let rec find = (items: array<option<'a>>, idx: int): 'a => {
+    if idx >= Array.length(items) {
+      fallback
+    } else {
+      switch items->Array.getUnsafe(idx) {
+      | Some(v) => v
+      | None => find(items, idx + 1)
+      }
+    }
+  }
+  find(ordered, 0)
+}
+
+// ============================================================================
+// Visibility helpers (CSS class-based)
+// ============================================================================
+
+module Visibility = {
+  let hiddenBelow = (bp: breakpoint): string =>
+    `basefn-hidden-below-${breakpointToString(bp)}`
+
+  let hiddenAbove = (bp: breakpoint): string =>
+    `basefn-hidden-above-${breakpointToString(bp)}`
+
+  let visibleOnly = (bp: breakpoint): string =>
+    `basefn-visible-${breakpointToString(bp)}-only`
+}

package/src/Basefn__Responsive.res.mjs

@@ -0,0 +1,407 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as Xote from "xote/src/Xote.res.mjs";
+import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
+
+import './components/Basefn__Responsive.css'
+;
+
+function breakpointToPixels(bp) {
+  switch (bp) {
+    case "Xs" :
+      return 480;
+    case "Sm" :
+      return 640;
+    case "Md" :
+      return 768;
+    case "Lg" :
+      return 1024;
+    case "Xl" :
+      return 1280;
+    case "Xxl" :
+      return 1536;
+  }
+}
+
+function breakpointToString(bp) {
+  switch (bp) {
+    case "Xs" :
+      return "xs";
+    case "Sm" :
+      return "sm";
+    case "Md" :
+      return "md";
+    case "Lg" :
+      return "lg";
+    case "Xl" :
+      return "xl";
+    case "Xxl" :
+      return "xxl";
+  }
+}
+
+function minWidth(bp) {
+  let px = breakpointToPixels(bp);
+  return `(min-width: ` + px.toString() + `px)`;
+}
+
+function maxWidth(bp) {
+  let px = breakpointToPixels(bp) - 1 | 0;
+  return `(max-width: ` + px.toString() + `px)`;
+}
+
+function between(lower, upper) {
+  let minPx = breakpointToPixels(lower);
+  let maxPx = breakpointToPixels(upper) - 1 | 0;
+  return `(min-width: ` + minPx.toString() + `px) and (max-width: ` + maxPx.toString() + `px)`;
+}
+
+let xsUp = minWidth("Xs");
+
+let smUp = minWidth("Sm");
+
+let mdUp = minWidth("Md");
+
+let lgUp = minWidth("Lg");
+
+let xlUp = minWidth("Xl");
+
+let xxlUp = minWidth("Xxl");
+
+let xsDown = maxWidth("Xs");
+
+let smDown = maxWidth("Sm");
+
+let mdDown = maxWidth("Md");
+
+let lgDown = maxWidth("Lg");
+
+let xlDown = maxWidth("Xl");
+
+let xxlDown = maxWidth("Xxl");
+
+let xsOnly = maxWidth("Sm");
+
+let smOnly = between("Sm", "Md");
+
+let mdOnly = between("Md", "Lg");
+
+let lgOnly = between("Lg", "Xl");
+
+let xlOnly = between("Xl", "Xxl");
+
+let xxlOnly = minWidth("Xxl");
+
+let portrait = "(orientation: portrait)";
+
+let landscape = "(orientation: landscape)";
+
+let prefersReducedMotion = "(prefers-reduced-motion: reduce)";
+
+let prefersDark = "(prefers-color-scheme: dark)";
+
+let touchDevice = "(hover: none) and (pointer: coarse)";
+
+let retina = "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
+
+let Query = {
+  xsUp: xsUp,
+  smUp: smUp,
+  mdUp: mdUp,
+  lgUp: lgUp,
+  xlUp: xlUp,
+  xxlUp: xxlUp,
+  xsDown: xsDown,
+  smDown: smDown,
+  mdDown: mdDown,
+  lgDown: lgDown,
+  xlDown: xlDown,
+  xxlDown: xxlDown,
+  xsOnly: xsOnly,
+  smOnly: smOnly,
+  mdOnly: mdOnly,
+  lgOnly: lgOnly,
+  xlOnly: xlOnly,
+  xxlOnly: xxlOnly,
+  portrait: portrait,
+  landscape: landscape,
+  prefersReducedMotion: prefersReducedMotion,
+  prefersDark: prefersDark,
+  prefersLight: "(prefers-color-scheme: light)",
+  highContrast: "(prefers-contrast: more)",
+  touchDevice: touchDevice,
+  finePointer: "(hover: hover) and (pointer: fine)",
+  retina: retina
+};
+
+let addChangeListener = (function(mql, cb) { mql.addEventListener("change", cb) });
+
+let removeChangeListener = (function(mql, cb) { mql.removeEventListener("change", cb) });
+
+function matchesQuery(query) {
+  return window.matchMedia(query).matches;
+}
+
+function matchesBreakpointUp(bp) {
+  let query = minWidth(bp);
+  return window.matchMedia(query).matches;
+}
+
+function matchesBreakpointDown(bp) {
+  let query = maxWidth(bp);
+  return window.matchMedia(query).matches;
+}
+
+function makeMediaSignal(query) {
+  let mql = window.matchMedia(query);
+  let signal = Xote.Signal.make(mql.matches, undefined, undefined);
+  let handler = evt => Xote.Signal.set(signal, evt.matches);
+  addChangeListener(mql, handler);
+  return signal;
+}
+
+function makeBreakpointSignal(bp) {
+  return makeMediaSignal(minWidth(bp));
+}
+
+function _memo(make) {
+  let cached = {
+    contents: undefined
+  };
+  return () => {
+    let s = cached.contents;
+    if (s !== undefined) {
+      return s;
+    }
+    let s$1 = make();
+    cached.contents = s$1;
+    return s$1;
+  };
+}
+
+let isXsScreen = _memo(() => makeMediaSignal(xsDown));
+
+let isSmScreen = _memo(() => makeMediaSignal(smOnly));
+
+let isMdScreen = _memo(() => makeMediaSignal(mdOnly));
+
+let isLgScreen = _memo(() => makeMediaSignal(lgOnly));
+
+let isXlScreen = _memo(() => makeMediaSignal(xlOnly));
+
+let isXxlScreen = _memo(() => makeMediaSignal(xxlOnly));
+
+let isSmallAndUp = _memo(() => makeMediaSignal(smUp));
+
+let isMediumAndUp = _memo(() => makeMediaSignal(mdUp));
+
+let isLargeAndUp = _memo(() => makeMediaSignal(lgUp));
+
+let isExtraLargeAndUp = _memo(() => makeMediaSignal(xlUp));
+
+let isMobile = _memo(() => makeMediaSignal(smDown));
+
+let isTablet = _memo(() => makeMediaSignal(mdOnly));
+
+let isDesktop = _memo(() => makeMediaSignal(lgUp));
+
+let isPortrait = _memo(() => makeMediaSignal(portrait));
+
+let isLandscape = _memo(() => makeMediaSignal(landscape));
+
+let prefersReducedMotion$1 = _memo(() => makeMediaSignal(prefersReducedMotion));
+
+let prefersDarkMode = _memo(() => makeMediaSignal(prefersDark));
+
+let isTouchDevice = _memo(() => makeMediaSignal(touchDevice));
+
+let isRetina = _memo(() => makeMediaSignal(retina));
+
+function currentBreakpointToString(bp) {
+  switch (bp) {
+    case "ExtraSmall" :
+      return "xs";
+    case "Small" :
+      return "sm";
+    case "Medium" :
+      return "md";
+    case "Large" :
+      return "lg";
+    case "ExtraLarge" :
+      return "xl";
+    case "ExtraExtraLarge" :
+      return "xxl";
+  }
+}
+
+function getCurrentBreakpoint() {
+  if (window.matchMedia(xxlUp).matches) {
+    return "ExtraExtraLarge";
+  } else if (window.matchMedia(xlUp).matches) {
+    return "ExtraLarge";
+  } else if (window.matchMedia(lgUp).matches) {
+    return "Large";
+  } else if (window.matchMedia(mdUp).matches) {
+    return "Medium";
+  } else if (window.matchMedia(smUp).matches) {
+    return "Small";
+  } else {
+    return "ExtraSmall";
+  }
+}
+
+function makeCurrentBreakpointSignal() {
+  let signal = Xote.Signal.make(getCurrentBreakpoint(), undefined, undefined);
+  let breakpoints = [
+    "Sm",
+    "Md",
+    "Lg",
+    "Xl",
+    "Xxl"
+  ];
+  breakpoints.forEach(bp => {
+    let mql = window.matchMedia(minWidth(bp));
+    let _handler = _evt => Xote.Signal.set(signal, getCurrentBreakpoint());
+    addChangeListener(mql, _handler);
+  });
+  return signal;
+}
+
+let currentBreakpoint = {
+  contents: undefined
+};
+
+function getCurrentBreakpointSignal() {
+  let s = currentBreakpoint.contents;
+  if (s !== undefined) {
+    return s;
+  }
+  let s$1 = makeCurrentBreakpointSignal();
+  currentBreakpoint.contents = s$1;
+  return s$1;
+}
+
+function resolveResponsiveValue(value, fallback) {
+  let bp = getCurrentBreakpoint();
+  let ordered;
+  switch (bp) {
+    case "ExtraSmall" :
+      ordered = [value.xs];
+      break;
+    case "Small" :
+      ordered = [
+        value.sm,
+        value.xs
+      ];
+      break;
+    case "Medium" :
+      ordered = [
+        value.md,
+        value.sm,
+        value.xs
+      ];
+      break;
+    case "Large" :
+      ordered = [
+        value.lg,
+        value.md,
+        value.sm,
+        value.xs
+      ];
+      break;
+    case "ExtraLarge" :
+      ordered = [
+        value.xl,
+        value.lg,
+        value.md,
+        value.sm,
+        value.xs
+      ];
+      break;
+    case "ExtraExtraLarge" :
+      ordered = [
+        value.xxl,
+        value.xl,
+        value.lg,
+        value.md,
+        value.sm,
+        value.xs
+      ];
+      break;
+  }
+  let _idx = 0;
+  while (true) {
+    let idx = _idx;
+    if (idx >= ordered.length) {
+      return fallback;
+    }
+    let v = ordered[idx];
+    if (v !== undefined) {
+      return Primitive_option.valFromOption(v);
+    }
+    _idx = idx + 1 | 0;
+    continue;
+  };
+}
+
+function hiddenBelow(bp) {
+  return `basefn-hidden-below-` + breakpointToString(bp);
+}
+
+function hiddenAbove(bp) {
+  return `basefn-hidden-above-` + breakpointToString(bp);
+}
+
+function visibleOnly(bp) {
+  return `basefn-visible-` + breakpointToString(bp) + `-only`;
+}
+
+let Visibility = {
+  hiddenBelow: hiddenBelow,
+  hiddenAbove: hiddenAbove,
+  visibleOnly: visibleOnly
+};
+
+export {
+  breakpointToPixels,
+  breakpointToString,
+  minWidth,
+  maxWidth,
+  between,
+  Query,
+  addChangeListener,
+  removeChangeListener,
+  matchesQuery,
+  matchesBreakpointUp,
+  matchesBreakpointDown,
+  makeMediaSignal,
+  makeBreakpointSignal,
+  _memo,
+  isXsScreen,
+  isSmScreen,
+  isMdScreen,
+  isLgScreen,
+  isXlScreen,
+  isXxlScreen,
+  isSmallAndUp,
+  isMediumAndUp,
+  isLargeAndUp,
+  isExtraLargeAndUp,
+  isMobile,
+  isTablet,
+  isDesktop,
+  isPortrait,
+  isLandscape,
+  prefersReducedMotion$1 as prefersReducedMotion,
+  prefersDarkMode,
+  isTouchDevice,
+  isRetina,
+  currentBreakpointToString,
+  getCurrentBreakpoint,
+  makeCurrentBreakpointSignal,
+  currentBreakpoint,
+  getCurrentBreakpointSignal,
+  resolveResponsiveValue,
+  Visibility,
+}
+/*  Not a pure module */

package/src/components/Basefn__Dropdown.css

@@ -3,6 +3,12 @@
   display: inline-block;
 }
 
+.basefn-dropdown__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1009;
+}
+
 .basefn-dropdown__menu {
   position: absolute;
   top: calc(100% + 4px);

package/src/components/Basefn__Dropdown.res

@@ -44,9 +44,14 @@ let make = (
     baseClass ++ alignClass
   }
 
+  let handleBackdropClick = _ => {
+    Signal.set(isOpen, false)
+  }
+
   let menuContent = Computed.make(() => {
     if Signal.get(isOpen) {
       [
+        <div class="basefn-dropdown__backdrop" onClick={handleBackdropClick} />,
         <div class={getMenuClass()}>
           {items
           ->Array.mapWithIndex((item, index) => {

package/src/components/Basefn__Dropdown.res.mjs

@@ -17,9 +17,15 @@ function Basefn__Dropdown(props) {
     let alignClass = align === "right" ? " basefn-dropdown__menu--right" : "";
     return "basefn-dropdown__menu" + alignClass;
   };
+  let handleBackdropClick = param => Xote.Signal.set(isOpen, false);
   let menuContent = Xote.Computed.make(() => {
     if (Xote.Signal.get(isOpen)) {
-      return [Xote__JSX.Elements.jsx("div", {
+      return [
+        Xote__JSX.Elements.jsx("div", {
+          class: "basefn-dropdown__backdrop",
+          onClick: handleBackdropClick
+        }),
+        Xote__JSX.Elements.jsx("div", {
           class: getMenuClass(),
           children: Xote.Component.fragment(items.map((item, index) => {
             if (typeof item !== "object") {
@@ -50,7 +56,8 @@ function Basefn__Dropdown(props) {
               children: Xote.Component.text(match.label)
             }, index.toString(), undefined);
           }))
-        })];
+        })
+      ];
     } else {
       return [];
     }

package/src/components/Basefn__Responsive.css

@@ -0,0 +1,118 @@
+/* ============================================================================
+   Responsive Visibility Utilities
+   ============================================================================ */
+
+/* Hidden below breakpoint (hidden on screens smaller than) */
+@media (max-width: 479px) {
+  .basefn-hidden-below-xs { display: none !important; }
+}
+@media (max-width: 639px) {
+  .basefn-hidden-below-sm { display: none !important; }
+}
+@media (max-width: 767px) {
+  .basefn-hidden-below-md { display: none !important; }
+}
+@media (max-width: 1023px) {
+  .basefn-hidden-below-lg { display: none !important; }
+}
+@media (max-width: 1279px) {
+  .basefn-hidden-below-xl { display: none !important; }
+}
+@media (max-width: 1535px) {
+  .basefn-hidden-below-xxl { display: none !important; }
+}
+
+/* Hidden above breakpoint (hidden on screens larger than) */
+@media (min-width: 480px) {
+  .basefn-hidden-above-xs { display: none !important; }
+}
+@media (min-width: 640px) {
+  .basefn-hidden-above-sm { display: none !important; }
+}
+@media (min-width: 768px) {
+  .basefn-hidden-above-md { display: none !important; }
+}
+@media (min-width: 1024px) {
+  .basefn-hidden-above-lg { display: none !important; }
+}
+@media (min-width: 1280px) {
+  .basefn-hidden-above-xl { display: none !important; }
+}
+@media (min-width: 1536px) {
+  .basefn-hidden-above-xxl { display: none !important; }
+}
+
+/* Visible only at specific breakpoint */
+.basefn-visible-xs-only {
+  display: none !important;
+}
+@media (max-width: 479px) {
+  .basefn-visible-xs-only { display: revert !important; }
+}
+
+.basefn-visible-sm-only {
+  display: none !important;
+}
+@media (min-width: 640px) and (max-width: 767px) {
+  .basefn-visible-sm-only { display: revert !important; }
+}
+
+.basefn-visible-md-only {
+  display: none !important;
+}
+@media (min-width: 768px) and (max-width: 1023px) {
+  .basefn-visible-md-only { display: revert !important; }
+}
+
+.basefn-visible-lg-only {
+  display: none !important;
+}
+@media (min-width: 1024px) and (max-width: 1279px) {
+  .basefn-visible-lg-only { display: revert !important; }
+}
+
+.basefn-visible-xl-only {
+  display: none !important;
+}
+@media (min-width: 1280px) and (max-width: 1535px) {
+  .basefn-visible-xl-only { display: revert !important; }
+}
+
+.basefn-visible-xxl-only {
+  display: none !important;
+}
+@media (min-width: 1536px) {
+  .basefn-visible-xxl-only { display: revert !important; }
+}
+
+/* Orientation-based visibility */
+.basefn-hidden-portrait {
+  display: revert !important;
+}
+@media (orientation: portrait) {
+  .basefn-hidden-portrait { display: none !important; }
+}
+
+.basefn-hidden-landscape {
+  display: revert !important;
+}
+@media (orientation: landscape) {
+  .basefn-hidden-landscape { display: none !important; }
+}
+
+/* Device-based visibility */
+@media (hover: none) and (pointer: coarse) {
+  .basefn-hidden-touch { display: none !important; }
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .basefn-hidden-desktop { display: none !important; }
+}
+
+/* Print visibility */
+@media print {
+  .basefn-hidden-print { display: none !important; }
+}
+@media not print {
+  .basefn-visible-print-only { display: none !important; }
+}