@webority/mobile-ui 0.0.0-stage → 0.0.33

package/lib/commonjs/utils/color.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tintOf = exports.blendOf = exports.ACCENT_PRESSED_TINT = void 0;
+/**
+ * The tint a pressed control paints over a fill in one of the theme's accent
+ * colours (primary, success, warning, error). The theme's own
+ * `surface.pressed` is meant for its surfaces: a dark wash in the light
+ * theme and a WHITE wash in the dark theme, which on a coloured fill reads
+ * as the control flashing white. A coloured fill darkens on press in either
+ * theme, so this is fixed rather than themed.
+ */
+const ACCENT_PRESSED_TINT = exports.ACCENT_PRESSED_TINT = 'rgba(0, 0, 0, 0.12)';
+
+/**
+ * `#RRGGBB` → `#RRGGBBAA`: a tone colour at the given opacity, for a tinted
+ * fill behind text drawn in the full tone. Non-hex colours (named, `rgb()`,
+ * short or 8-digit hex) can't be suffixed; those return `fallback`, which a
+ * caller sets to the nearest flat theme surface.
+ */
+const tintOf = (color, opacity, fallback) => {
+  const hex = /^#([0-9a-f]{6})$/i.exec(color);
+  if (!hex) {
+    return fallback;
+  }
+  const alpha = Math.round(opacity * 255).toString(16).padStart(2, '0');
+  return `#${hex[1]}${alpha}`;
+};
+exports.tintOf = tintOf;
+const channelsOf = color => {
+  const hex = /^#([0-9a-f]{6})$/i.exec(color);
+  if (!hex) {
+    return null;
+  }
+  const n = Number.parseInt(hex[1], 16);
+  return [n >> 16 & 255, n >> 8 & 255, n & 255];
+};
+
+/**
+ * The OPAQUE colour of `color` at `opacity` laid over `over`: what `tintOf`
+ * would look like on that surface, as a flat `#RRGGBB`. For a tint that sits
+ * on something it must hide (a badge over a photo), where a translucent tint
+ * would let the photo through. Either colour not a 6-digit hex returns
+ * `fallback`.
+ */
+const blendOf = (color, opacity, over, fallback) => {
+  const top = channelsOf(color);
+  const base = channelsOf(over);
+  if (!top || !base) {
+    return fallback;
+  }
+  const mix = top.map((c, i) => Math.round(c * opacity + base[i] * (1 - opacity)));
+  return `#${mix.map(c => c.toString(16).padStart(2, '0')).join('')}`.toUpperCase();
+};
+exports.blendOf = blendOf;
+//# sourceMappingURL=color.js.map

package/lib/commonjs/utils/corners.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.smoothCorners = void 0;
+/**
+ * The smooth "squircle" corner, the app-side counterpart of the website's CSS
+ * `corner-shape: squircle`. Spread it next to any `borderRadius`.
+ *
+ * iOS draws Apple's continuous curve through React Native's own
+ * `borderCurve: 'continuous'`; no dependency. Android has no equivalent and
+ * ignores the key, so it keeps the circular corner (a deliberate decision,
+ * 16-Sep-2026: drawing the shape there means an SVG path behind every field,
+ * card and button, with path-stroked borders, and was not worth it at the
+ * library's 10 to 16 px radii). The three curves, CSS squircle, Apple's and
+ * Figma's, look alike but are not identical.
+ */
+const smoothCorners = exports.smoothCorners = {
+  borderCurve: 'continuous'
+};
+//# sourceMappingURL=corners.js.map

package/lib/commonjs/utils/dimensions.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Breakpoints", {
+  enumerable: true,
+  get: function () {
+    return _responsive.Breakpoints;
+  }
+});
+Object.defineProperty(exports, "ScreenDimensions", {
+  enumerable: true,
+  get: function () {
+    return _responsive.ScreenDimensions;
+  }
+});
+Object.defineProperty(exports, "isScreenSize", {
+  enumerable: true,
+  get: function () {
+    return _responsive.isScreenSize;
+  }
+});
+Object.defineProperty(exports, "isTablet", {
+  enumerable: true,
+  get: function () {
+    return _responsive.isTablet;
+  }
+});
+Object.defineProperty(exports, "useScreenDimensions", {
+  enumerable: true,
+  get: function () {
+    return _responsive.useScreenDimensions;
+  }
+});
+var _responsive = require("./responsive.js");
+//# sourceMappingURL=dimensions.js.map

package/lib/commonjs/utils/feedback.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isFeedbackEnabled = exports.hapticForIntent = exports.feedback = exports.configureFeedback = void 0;
+var _hapticUtils = require("./hapticUtils.js");
+/**
+ * What the interaction MEANT, not which vibration to play.
+ *
+ * Call sites that pick a `HapticType` directly end up disagreeing with each
+ * other — one screen fires `impactMedium` on delete, the next fires
+ * `notificationWarning`, and the app stops speaking one language. Naming the
+ * intent moves that decision here, once.
+ */
+
+const INTENT_HAPTIC = {
+  tap: 'impactLight',
+  select: 'selection',
+  longPress: 'impactMedium',
+  created: 'impactMedium',
+  deleted: 'notificationWarning',
+  restored: 'notificationSuccess',
+  toggledOn: 'impactMedium',
+  toggledOff: 'impactLight',
+  succeeded: 'notificationSuccess',
+  warned: 'notificationWarning',
+  failed: 'notificationError'
+};
+let hapticsEnabled = true;
+
+/**
+ * Gate every intent from one place, so an app's "haptics" setting needs no
+ * per-component plumbing.
+ */
+const configureFeedback = prefs => {
+  hapticsEnabled = prefs.haptics;
+};
+exports.configureFeedback = configureFeedback;
+const isFeedbackEnabled = () => hapticsEnabled;
+exports.isFeedbackEnabled = isFeedbackEnabled;
+const fire = intent => {
+  if (!hapticsEnabled) {
+    return;
+  }
+  (0, _hapticUtils.triggerHaptic)(INTENT_HAPTIC[intent]);
+};
+
+/** Resolve an intent to its haptic type without firing it. */
+const hapticForIntent = intent => INTENT_HAPTIC[intent];
+exports.hapticForIntent = hapticForIntent;
+const feedback = exports.feedback = {
+  /** A plain press: button, row, chip. */
+  tap: () => fire('tap'),
+  /** Moving between options — segmented control, picker wheel, tab. */
+  select: () => fire('select'),
+  /** A long-press threshold being crossed. */
+  longPress: () => fire('longPress'),
+  /** Something now exists that did not before. */
+  created: () => fire('created'),
+  /** Something was destroyed or removed. */
+  deleted: () => fire('deleted'),
+  /** An undo landed. */
+  restored: () => fire('restored'),
+  /** A binary control turned on / off — switch, checkbox, favourite. */
+  toggled: on => fire(on ? 'toggledOn' : 'toggledOff'),
+  /** A flow finished successfully. */
+  succeeded: () => fire('succeeded'),
+  /** A recoverable problem the user should notice. */
+  warned: () => fire('warned'),
+  /** A failure. */
+  failed: () => fire('failed'),
+  /** Escape hatch for an intent held in a variable. */
+  fire
+};
+//# sourceMappingURL=feedback.js.map

package/lib/commonjs/utils/hapticUtils.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.triggerHaptic = exports.setHapticImplementation = exports.resolveHaptic = void 0;
+var Haptics = _interopRequireWildcard(require("expo-haptics"));
+var _reactNative = require("react-native");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+let hapticImpl = null;
+
+/**
+ * Only what a test or the showcase injected. The default is expo-haptics, which
+ * this module imports directly: `expo` is a required peer, so the 48 components
+ * that fire haptics get them without any app wiring anything.
+ *
+ * The Vibration fallback below is now only the FAILURE path — a device whose
+ * haptic engine is disabled rejects, and Android still gets something.
+ */
+
+const fallback = type => {
+  if (_reactNative.Platform.OS === 'android') {
+    const map = {
+      selection: 5,
+      impactLight: 10,
+      impactMedium: 20,
+      impactHeavy: 30,
+      notificationSuccess: 15,
+      notificationWarning: 25,
+      notificationError: 40
+    };
+    try {
+      // Vibration.vibrate throws a SecurityException when the app has not
+      // declared android.permission.VIBRATE. Haptics are a non-essential
+      // enhancement, so a missing permission degrades to a no-op.
+      _reactNative.Vibration.vibrate(map[type] ?? 10);
+    } catch {
+      /* ignore: no VIBRATE permission or vibrator unavailable */
+    }
+  }
+};
+
+/**
+ * expo-haptics, which splits what this module treats as one vocabulary across
+ * three functions. The promises are deliberately swallowed: the seam is
+ * synchronous, a device with the engine disabled rejects, and an unhandled
+ * rejection from a button press must never become a crash.
+ */
+const EXPO_HANDLERS = {
+  selection: () => Haptics.selectionAsync(),
+  impactLight: () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light),
+  impactMedium: () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium),
+  impactHeavy: () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy),
+  notificationSuccess: () => Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success),
+  notificationWarning: () => Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning),
+  notificationError: () => Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error)
+};
+const triggerHaptic = (type = 'selection') => {
+  if (hapticImpl) {
+    try {
+      hapticImpl(type);
+      return;
+    } catch {
+      /* ignore */
+    }
+  }
+  const handler = EXPO_HANDLERS[type];
+  if (handler) {
+    handler().catch(() => fallback(type));
+    return;
+  }
+  fallback(type);
+};
+
+/**
+ * Replace the haptic backend. Intended for TESTS and for the showcase; an app
+ * gets expo-haptics without wiring anything. Pass `null` to restore it.
+ */
+exports.triggerHaptic = triggerHaptic;
+const setHapticImplementation = impl => {
+  hapticImpl = impl;
+};
+
+/**
+ * Resolves a component's `haptic` prop to the type that should fire, or null
+ * when haptics are off. `false` disables; a `HapticType` overrides; `undefined`
+ * falls back to the component's sensible default. Pair with `triggerHaptic`:
+ *   const h = resolveHaptic(haptic, 'selection');
+ *   if (h) triggerHaptic(h);
+ */
+exports.setHapticImplementation = setHapticImplementation;
+const resolveHaptic = (haptic, fallbackType) => haptic === false ? null : haptic ?? fallbackType;
+exports.resolveHaptic = resolveHaptic;
+//# sourceMappingURL=hapticUtils.js.map

package/lib/commonjs/utils/hashString.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hashString = void 0;
+/**
+ * Two 32-bit FNV-style passes plus the length, as hex. Not cryptographic: it
+ * turns a URL into a short key that is safe as a storage key or a file name.
+ */
+const hashString = input => {
+  let h1 = 0x811c9dc5;
+  let h2 = 0x1000193;
+  for (let i = 0; i < input.length; i += 1) {
+    const code = input.charCodeAt(i);
+    h1 = Math.imul(h1 ^ code, 16777619) >>> 0;
+    h2 = (Math.imul(h2 + code, 2654435761) ^ h2 >>> 7) >>> 0;
+  }
+  return `${h1.toString(16)}${h2.toString(16)}${input.length.toString(16)}`;
+};
+exports.hashString = hashString;
+//# sourceMappingURL=hashString.js.map

package/lib/commonjs/utils/index.js

@@ -0,0 +1,178 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Breakpoints", {
+  enumerable: true,
+  get: function () {
+    return _responsive.Breakpoints;
+  }
+});
+Object.defineProperty(exports, "Margin", {
+  enumerable: true,
+  get: function () {
+    return _spacing.Margin;
+  }
+});
+Object.defineProperty(exports, "Padding", {
+  enumerable: true,
+  get: function () {
+    return _spacing.Padding;
+  }
+});
+Object.defineProperty(exports, "Responsive", {
+  enumerable: true,
+  get: function () {
+    return _responsive.Responsive;
+  }
+});
+Object.defineProperty(exports, "SQUIRCLE_MIN_RADIUS", {
+  enumerable: true,
+  get: function () {
+    return _squircle.SQUIRCLE_MIN_RADIUS;
+  }
+});
+Object.defineProperty(exports, "SQUIRCLE_SMOOTHING", {
+  enumerable: true,
+  get: function () {
+    return _squircle.SQUIRCLE_SMOOTHING;
+  }
+});
+Object.defineProperty(exports, "ScreenDimensions", {
+  enumerable: true,
+  get: function () {
+    return _responsive.ScreenDimensions;
+  }
+});
+Object.defineProperty(exports, "Spacing", {
+  enumerable: true,
+  get: function () {
+    return _spacing.Spacing;
+  }
+});
+Object.defineProperty(exports, "blendOf", {
+  enumerable: true,
+  get: function () {
+    return _color.blendOf;
+  }
+});
+Object.defineProperty(exports, "configureFeedback", {
+  enumerable: true,
+  get: function () {
+    return _feedback.configureFeedback;
+  }
+});
+Object.defineProperty(exports, "feedback", {
+  enumerable: true,
+  get: function () {
+    return _feedback.feedback;
+  }
+});
+Object.defineProperty(exports, "hapticForIntent", {
+  enumerable: true,
+  get: function () {
+    return _feedback.hapticForIntent;
+  }
+});
+Object.defineProperty(exports, "isFeedbackEnabled", {
+  enumerable: true,
+  get: function () {
+    return _feedback.isFeedbackEnabled;
+  }
+});
+Object.defineProperty(exports, "isScreenSize", {
+  enumerable: true,
+  get: function () {
+    return _responsive.isScreenSize;
+  }
+});
+Object.defineProperty(exports, "isTablet", {
+  enumerable: true,
+  get: function () {
+    return _responsive.isTablet;
+  }
+});
+Object.defineProperty(exports, "mergeRefs", {
+  enumerable: true,
+  get: function () {
+    return _mergeRefs.mergeRefs;
+  }
+});
+Object.defineProperty(exports, "resolveHaptic", {
+  enumerable: true,
+  get: function () {
+    return _hapticUtils.resolveHaptic;
+  }
+});
+Object.defineProperty(exports, "setHapticImplementation", {
+  enumerable: true,
+  get: function () {
+    return _hapticUtils.setHapticImplementation;
+  }
+});
+Object.defineProperty(exports, "shadowStyle", {
+  enumerable: true,
+  get: function () {
+    return _shadows.shadowStyle;
+  }
+});
+Object.defineProperty(exports, "smoothCorners", {
+  enumerable: true,
+  get: function () {
+    return _corners.smoothCorners;
+  }
+});
+Object.defineProperty(exports, "squircleApplies", {
+  enumerable: true,
+  get: function () {
+    return _squircle.squircleApplies;
+  }
+});
+Object.defineProperty(exports, "squircleHostRadius", {
+  enumerable: true,
+  get: function () {
+    return _squircle.squircleHostRadius;
+  }
+});
+Object.defineProperty(exports, "squirclePath", {
+  enumerable: true,
+  get: function () {
+    return _squircle.squirclePath;
+  }
+});
+Object.defineProperty(exports, "tintOf", {
+  enumerable: true,
+  get: function () {
+    return _color.tintOf;
+  }
+});
+Object.defineProperty(exports, "triggerHaptic", {
+  enumerable: true,
+  get: function () {
+    return _hapticUtils.triggerHaptic;
+  }
+});
+Object.defineProperty(exports, "useScreenDimensions", {
+  enumerable: true,
+  get: function () {
+    return _responsive.useScreenDimensions;
+  }
+});
+Object.defineProperty(exports, "warnUnknownProps", {
+  enumerable: true,
+  get: function () {
+    return _warnUnknownProps.warnUnknownProps;
+  }
+});
+var _color = require("./color.js");
+var _corners = require("./corners.js");
+var _feedback = require("./feedback.js");
+var _hapticUtils = require("./hapticUtils.js");
+var _mergeRefs = require("./mergeRefs.js");
+var _responsive = require("./responsive.js");
+var _shadows = require("./shadows.js");
+var _spacing = require("./spacing.js");
+var _squircle = require("./squircle.js");
+var _warnUnknownProps = require("./warnUnknownProps.js");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/utils/mergeRefs.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mergeRefs = void 0;
+/**
+ * Fold several refs into one callback ref, so a component can hold its own
+ * ref to a host (to call `focus()` on it) while still forwarding the ref its
+ * consumer passed. Callback refs are called, object refs are assigned; a
+ * `null` or `undefined` entry is skipped. Memoise the result: React treats
+ * a new callback ref as a change and re-attaches on every render.
+ */
+const mergeRefs = (...refs) => node => {
+  for (const ref of refs) {
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref != null) {
+      ref.current = node;
+    }
+  }
+};
+exports.mergeRefs = mergeRefs;
+//# sourceMappingURL=mergeRefs.js.map

package/lib/commonjs/utils/responsive.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useScreenDimensions = exports.isTablet = exports.isScreenSize = exports.ScreenDimensions = exports.Responsive = exports.Breakpoints = void 0;
+var _reactNative = require("react-native");
+const BASE_WIDTH = 390;
+const BASE_HEIGHT = 844;
+const Breakpoints = exports.Breakpoints = {
+  xs: 0,
+  sm: 360,
+  md: 414,
+  lg: 768,
+  xl: 1024
+};
+/**
+ * The window size is read on every call, never captured at module load. A
+ * module-level snapshot pins the whole responsive layer to the orientation the
+ * app launched in: a tablet opened in portrait keeps answering portrait after
+ * a rotation, and a foldable keeps the folded width after it opens.
+ * `Dimensions.get` is a synchronous read of a value the platform already
+ * holds, so there is no cost worth caching and no listener to leak.
+ *
+ * These are for code that runs outside a component. Inside one, use
+ * `useScreenDimensions`, which also RE-RENDERS on the change.
+ */
+const window = () => _reactNative.Dimensions.get('window');
+const ScreenDimensions = exports.ScreenDimensions = {
+  get width() {
+    return window().width;
+  },
+  get height() {
+    return window().height;
+  },
+  get pixelRatio() {
+    return _reactNative.PixelRatio.get();
+  },
+  get fontScale() {
+    return _reactNative.PixelRatio.getFontScale();
+  }
+};
+const scalesFor = (width, height) => {
+  const widthScale = width / BASE_WIDTH;
+  const heightScale = height / BASE_HEIGHT;
+  return {
+    widthScale,
+    heightScale,
+    minScale: Math.min(widthScale, heightScale)
+  };
+};
+const scaleFont = (size, minScale) => {
+  const scaled = size * minScale;
+  if (_reactNative.Platform.OS === 'ios') {
+    return Math.round(_reactNative.PixelRatio.roundToNearestPixel(scaled));
+  }
+  return Math.round(_reactNative.PixelRatio.roundToNearestPixel(scaled)) - 1;
+};
+const responsiveFor = (width, height) => {
+  const {
+    widthScale,
+    heightScale,
+    minScale
+  } = scalesFor(width, height);
+  return {
+    width: size => Math.round(size * widthScale),
+    height: size => Math.round(size * heightScale),
+    size: size => Math.round(size * minScale),
+    font: size => scaleFont(size, minScale)
+  };
+};
+const isScreenSize = size => window().width >= Breakpoints[size];
+exports.isScreenSize = isScreenSize;
+const isTablet = () => window().width >= Breakpoints.lg;
+exports.isTablet = isTablet;
+const Responsive = exports.Responsive = {
+  width: size => responsiveFor(window().width, window().height).width(size),
+  height: size => responsiveFor(window().width, window().height).height(size),
+  size: size => responsiveFor(window().width, window().height).size(size),
+  font: size => responsiveFor(window().width, window().height).font(size)
+};
+/**
+ * The reactive form. `useWindowDimensions` re-renders the component whenever
+ * the window changes, so a layout branching on `isTablet` follows a rotation,
+ * an unfold or a split-screen resize instead of staying where it started.
+ */
+const useScreenDimensions = () => {
+  const {
+    width,
+    height,
+    fontScale
+  } = (0, _reactNative.useWindowDimensions)();
+  return {
+    width,
+    height,
+    pixelRatio: _reactNative.PixelRatio.get(),
+    fontScale,
+    isTablet: width >= Breakpoints.lg,
+    isScreenSize: size => width >= Breakpoints[size],
+    responsive: responsiveFor(width, height)
+  };
+};
+exports.useScreenDimensions = useScreenDimensions;
+//# sourceMappingURL=responsive.js.map

package/lib/commonjs/utils/shadows.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toBoxShadow = exports.supportsBoxShadow = exports.shadowStyle = void 0;
+var _reactNative = require("react-native");
+const shadowStyle = (shadows, level) => {
+  const def = shadows[level];
+  return def;
+};
+
+/**
+ * Whether this platform draws a `boxShadow`. Android paints an outset box
+ * shadow only from API 28; below that the style is ignored, so a caller
+ * keeps the token's `elevation` there instead.
+ */
+exports.shadowStyle = shadowStyle;
+const supportsBoxShadow = () => _reactNative.Platform.OS !== 'android' || typeof _reactNative.Platform.Version === 'number' && _reactNative.Platform.Version >= 28;
+exports.supportsBoxShadow = supportsBoxShadow;
+const hexToRgb = hex => {
+  const body = hex.replace('#', '');
+  const full = body.length === 3 ? body.split('').map(c => c + c).join('') : body;
+  if (!/^[0-9a-fA-F]{6}$/.test(full)) {
+    return null;
+  }
+  return [Number.parseInt(full.slice(0, 2), 16), Number.parseInt(full.slice(2, 4), 16), Number.parseInt(full.slice(4, 6), 16)];
+};
+
+/**
+ * A shadow token as a CSS `boxShadow` string, or `undefined` when the token
+ * draws nothing or its colour is not a hex value this can fold the opacity
+ * into.
+ *
+ * The legacy `shadow*` props are cast from the view's own layer, so on iOS
+ * `overflow: 'hidden'` clips them away entirely, and Android ignores all of
+ * them except `elevation`. A `boxShadow` survives the clip on iOS and draws
+ * the same blurred shadow on Android, so one token looks alike on both.
+ * `shadowRadius` is Core Animation's blur, about half of a CSS blur radius.
+ */
+const toBoxShadow = def => {
+  const {
+    shadowColor,
+    shadowOffset,
+    shadowOpacity,
+    shadowRadius
+  } = def;
+  if (typeof shadowColor !== 'string' || !shadowOpacity) {
+    return undefined;
+  }
+  const rgb = hexToRgb(shadowColor);
+  if (!rgb) {
+    return undefined;
+  }
+  const x = shadowOffset?.width ?? 0;
+  const y = shadowOffset?.height ?? 0;
+  const blur = (shadowRadius ?? 0) * 2;
+  return `${x}px ${y}px ${blur}px 0px rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${shadowOpacity})`;
+};
+exports.toBoxShadow = toBoxShadow;
+//# sourceMappingURL=shadows.js.map