@webority/mobile-ui 0.0.38 → 0.1.0

package/lib/commonjs/utils/shadows.js

@@ -1,61 +1 @@
-"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
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.toBoxShadow=exports.supportsBoxShadow=exports.shadowStyle=void 0;var _reactNative=require("react-native");const shadowStyle=(o,t)=>o[t];exports.shadowStyle=shadowStyle;const supportsBoxShadow=()=>"android"!==_reactNative.Platform.OS||"number"==typeof _reactNative.Platform.Version&&_reactNative.Platform.Version>=28;exports.supportsBoxShadow=supportsBoxShadow;const hexToRgb=o=>{const t=o.replace("#",""),e=3===t.length?t.split("").map(o=>o+o).join(""):t;return/^[0-9a-fA-F]{6}$/.test(e)?[Number.parseInt(e.slice(0,2),16),Number.parseInt(e.slice(2,4),16),Number.parseInt(e.slice(4,6),16)]:null},toBoxShadow=o=>{const{shadowColor:t,shadowOffset:e,shadowOpacity:r,shadowRadius:s}=o;if("string"!=typeof t||!r)return;const a=hexToRgb(t);if(!a)return;return`${e?.width??0}px ${e?.height??0}px ${2*(s??0)}px 0px rgba(${a[0]}, ${a[1]}, ${a[2]}, ${r})`};exports.toBoxShadow=toBoxShadow;

package/lib/commonjs/utils/spacing.js

@@ -1,86 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Spacing = exports.Padding = exports.Margin = void 0;
-var _index = require("../theme/index.js");
-const Spacing = exports.Spacing = {
-  get none() {
-    return (0, _index.getTheme)().spacing.none;
-  },
-  get xxs() {
-    return (0, _index.getTheme)().spacing.xxs;
-  },
-  get xs() {
-    return (0, _index.getTheme)().spacing.xs;
-  },
-  get sm() {
-    return (0, _index.getTheme)().spacing.sm;
-  },
-  get md() {
-    return (0, _index.getTheme)().spacing.md;
-  },
-  get lg() {
-    return (0, _index.getTheme)().spacing.lg;
-  },
-  get xl() {
-    return (0, _index.getTheme)().spacing.xl;
-  },
-  get '2xl'() {
-    return (0, _index.getTheme)().spacing['2xl'];
-  },
-  get '3xl'() {
-    return (0, _index.getTheme)().spacing['3xl'];
-  },
-  get '4xl'() {
-    return (0, _index.getTheme)().spacing['4xl'];
-  }
-};
-const Padding = exports.Padding = {
-  all: token => ({
-    padding: (0, _index.getTheme)().spacing[token]
-  }),
-  horizontal: token => ({
-    paddingHorizontal: (0, _index.getTheme)().spacing[token]
-  }),
-  vertical: token => ({
-    paddingVertical: (0, _index.getTheme)().spacing[token]
-  }),
-  top: token => ({
-    paddingTop: (0, _index.getTheme)().spacing[token]
-  }),
-  bottom: token => ({
-    paddingBottom: (0, _index.getTheme)().spacing[token]
-  }),
-  left: token => ({
-    paddingLeft: (0, _index.getTheme)().spacing[token]
-  }),
-  right: token => ({
-    paddingRight: (0, _index.getTheme)().spacing[token]
-  })
-};
-const Margin = exports.Margin = {
-  all: token => ({
-    margin: (0, _index.getTheme)().spacing[token]
-  }),
-  horizontal: token => ({
-    marginHorizontal: (0, _index.getTheme)().spacing[token]
-  }),
-  vertical: token => ({
-    marginVertical: (0, _index.getTheme)().spacing[token]
-  }),
-  top: token => ({
-    marginTop: (0, _index.getTheme)().spacing[token]
-  }),
-  bottom: token => ({
-    marginBottom: (0, _index.getTheme)().spacing[token]
-  }),
-  left: token => ({
-    marginLeft: (0, _index.getTheme)().spacing[token]
-  }),
-  right: token => ({
-    marginRight: (0, _index.getTheme)().spacing[token]
-  })
-};
-//# sourceMappingURL=spacing.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Spacing=exports.Padding=exports.Margin=void 0;var _index=require("../theme/index.js");const Spacing=exports.Spacing={get none(){return(0,_index.getTheme)().spacing.none},get xxs(){return(0,_index.getTheme)().spacing.xxs},get xs(){return(0,_index.getTheme)().spacing.xs},get sm(){return(0,_index.getTheme)().spacing.sm},get md(){return(0,_index.getTheme)().spacing.md},get lg(){return(0,_index.getTheme)().spacing.lg},get xl(){return(0,_index.getTheme)().spacing.xl},get"2xl"(){return(0,_index.getTheme)().spacing["2xl"]},get"3xl"(){return(0,_index.getTheme)().spacing["3xl"]},get"4xl"(){return(0,_index.getTheme)().spacing["4xl"]}},Padding=exports.Padding={all:e=>({padding:(0,_index.getTheme)().spacing[e]}),horizontal:e=>({paddingHorizontal:(0,_index.getTheme)().spacing[e]}),vertical:e=>({paddingVertical:(0,_index.getTheme)().spacing[e]}),top:e=>({paddingTop:(0,_index.getTheme)().spacing[e]}),bottom:e=>({paddingBottom:(0,_index.getTheme)().spacing[e]}),left:e=>({paddingLeft:(0,_index.getTheme)().spacing[e]}),right:e=>({paddingRight:(0,_index.getTheme)().spacing[e]})},Margin=exports.Margin={all:e=>({margin:(0,_index.getTheme)().spacing[e]}),horizontal:e=>({marginHorizontal:(0,_index.getTheme)().spacing[e]}),vertical:e=>({marginVertical:(0,_index.getTheme)().spacing[e]}),top:e=>({marginTop:(0,_index.getTheme)().spacing[e]}),bottom:e=>({marginBottom:(0,_index.getTheme)().spacing[e]}),left:e=>({marginLeft:(0,_index.getTheme)().spacing[e]}),right:e=>({marginRight:(0,_index.getTheme)().spacing[e]})};

package/lib/commonjs/utils/squircle.js

@@ -1,158 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.squircleHostRadius = exports.squircleApplies = exports.SQUIRCLE_SMOOTHING = exports.SQUIRCLE_MIN_RADIUS = void 0;
-exports.squirclePath = squirclePath;
-/**
- * Smooth ("squircle") corners as an SVG path.
- *
- * iOS draws Apple's continuous curve natively (`borderCurve: 'continuous'`,
- * see `./corners`). Android has no such style, so the components draw the
- * shape themselves with react-native-svg and this path.
- *
- * Ported from figma-squircle 1.1.0 by Tien Pham (MIT licence, copyright
- * 2021, https://github.com/phamfoo/figma-squircle), which follows Figma's
- * "Desperately seeking squircles" article and MartinRGB's approximation.
- * Only the uniform-radius branch is kept: the components draw the shape
- * only when all four corners agree and leave the platform's own corner in
- * place otherwise. The curve is Figma's, not Apple's; the two are close
- * but not identical.
- */
-
-/** Figma's "iOS" corner-smoothing preset. */
-const SQUIRCLE_SMOOTHING = exports.SQUIRCLE_SMOOTHING = 0.6;
-/**
- * Below this radius the curve is not worth an overlay: the squircle bulges
- * past the circle by about a sixth of the radius at the diagonal (1 dp at
- * 6 dp, computed from the path), which is under a device pixel on most
- * screens. Checkbox corners and small chips stay native.
- */
-const SQUIRCLE_MIN_RADIUS = exports.SQUIRCLE_MIN_RADIUS = 6;
-
-/**
- * Whether a squircle is worth drawing for this box: a radius under
- * `SQUIRCLE_MIN_RADIUS` changes nothing a user can see, and once the radius
- * reaches half the shorter side (a pill) there is no straight run left for
- * the curve to blend into.
- */
-const squircleApplies = (width, height, radius) => radius >= SQUIRCLE_MIN_RADIUS && width > 0 && height > 0 && 2 * radius < Math.min(width, height);
-
-/**
- * The native corner radius an OPAQUE host keeps under the overlay.
- *
- * Figma's squircle sits inside the circle of the same radius: it keeps the
- * circle's arc at the diagonal and cuts deeper along the tangents. A host
- * that must keep an opaque native background (an elevated surface, whose
- * Android shadow is cast from its own outline) would therefore show its
- * circular corner peeking out around the shape. Doubling the native radius
- * pushes that circle inside the squircle everywhere (checked numerically at
- * 1.8x and above); the shadow follows the deeper corner with no visible
- * change. Capped at half the shorter side, as a pill would be.
- */
-exports.squircleApplies = squircleApplies;
-const squircleHostRadius = (width, height, radius) => Math.min(2 * radius, Math.min(width, height) / 2);
-exports.squircleHostRadius = squircleHostRadius;
-const toRadians = degrees => degrees * Math.PI / 180;
-const num = value => {
-  const fixed = value.toFixed(4);
-  // Keep "-0.0000" from leaking into the path.
-  return fixed === '-0.0000' ? '0.0000' : fixed;
-};
-
-/** Figure 11.1 / 12.2 of Figma's article: the eight control points of one corner. */
-const cornerParams = (cornerRadius, smoothing, budget) => {
-  // p = (1 + smoothing) * q, and q = R because the corner angle is 90 degrees.
-  let p = (1 + smoothing) * cornerRadius;
-  // Figma's behaviour: when the smoothing does not fit, cap it so p stays
-  // inside the budget (half the shorter side).
-  const maxSmoothing = budget / cornerRadius - 1;
-  const cornerSmoothing = Math.min(smoothing, maxSmoothing);
-  p = Math.min(p, budget);
-
-  // A plain rounded rectangle has a 90 degree arc; smoothing shortens it.
-  const arcMeasure = 90 * (1 - cornerSmoothing);
-  const arcSectionLength = Math.sin(toRadians(arcMeasure / 2)) * cornerRadius * Math.SQRT2;
-
-  // The distance between control points P3 and P4 in the article.
-  const angleAlpha = (90 - arcMeasure) / 2;
-  const p3ToP4Distance = cornerRadius * Math.tan(toRadians(angleAlpha / 2));
-  const angleBeta = 45 * cornerSmoothing;
-  const c = p3ToP4Distance * Math.cos(toRadians(angleBeta));
-  const d = c * Math.tan(toRadians(angleBeta));
-  const b = (p - arcSectionLength - c - d) / 3;
-  const a = 2 * b;
-  return {
-    a,
-    b,
-    c,
-    d,
-    p,
-    arcSectionLength,
-    cornerRadius
-  };
-};
-const topRight = ({
-  cornerRadius: r,
-  a,
-  b,
-  c,
-  d,
-  arcSectionLength: s
-}) => `c ${num(a)} 0 ${num(a + b)} 0 ${num(a + b + c)} ${num(d)} ` + `a ${num(r)} ${num(r)} 0 0 1 ${num(s)} ${num(s)} ` + `c ${num(d)} ${num(c)} ${num(d)} ${num(b + c)} ${num(d)} ${num(a + b + c)}`;
-const bottomRight = ({
-  cornerRadius: r,
-  a,
-  b,
-  c,
-  d,
-  arcSectionLength: s
-}) => `c 0 ${num(a)} 0 ${num(a + b)} ${num(-d)} ${num(a + b + c)} ` + `a ${num(r)} ${num(r)} 0 0 1 ${num(-s)} ${num(s)} ` + `c ${num(-c)} ${num(d)} ${num(-(b + c))} ${num(d)} ${num(-(a + b + c))} ${num(d)}`;
-const bottomLeft = ({
-  cornerRadius: r,
-  a,
-  b,
-  c,
-  d,
-  arcSectionLength: s
-}) => `c ${num(-a)} 0 ${num(-(a + b))} 0 ${num(-(a + b + c))} ${num(-d)} ` + `a ${num(r)} ${num(r)} 0 0 1 ${num(-s)} ${num(-s)} ` + `c ${num(-d)} ${num(-c)} ${num(-d)} ${num(-(b + c))} ${num(-d)} ${num(-(a + b + c))}`;
-const topLeft = ({
-  cornerRadius: r,
-  a,
-  b,
-  c,
-  d,
-  arcSectionLength: s
-}) => `c 0 ${num(-a)} 0 ${num(-(a + b))} ${num(d)} ${num(-(a + b + c))} ` + `a ${num(r)} ${num(r)} 0 0 1 ${num(s)} ${num(-s)} ` + `c ${num(c)} ${num(-d)} ${num(b + c)} ${num(-d)} ${num(a + b + c)} ${num(-d)}`;
-
-/**
- * The closed path of a smooth-cornered rectangle whose bounds are
- * `(inset, inset)` to `(width - inset, height - inset)`, drawn clockwise
- * from the top edge. Every corner shares one radius; the radius and the
- * smoothing are capped so the curve fits the box (Figma's own behaviour).
- */
-function squirclePath({
-  width,
-  height,
-  radius,
-  smoothing = SQUIRCLE_SMOOTHING,
-  inset = 0
-}) {
-  const w = Math.max(0, width - 2 * inset);
-  const h = Math.max(0, height - 2 * inset);
-  const x0 = inset;
-  const y0 = inset;
-  const r = Math.max(0, radius - inset);
-  const budget = Math.min(w, h) / 2;
-  const cornerRadius = Math.min(r, budget);
-  if (cornerRadius <= 0) {
-    return `M ${num(x0)} ${num(y0)} L ${num(x0 + w)} ${num(y0)} L ${num(x0 + w)} ${num(y0 + h)} L ${num(x0)} ${num(y0 + h)} Z`;
-  }
-  const corner = cornerParams(cornerRadius, Math.min(1, Math.max(0, smoothing)), budget);
-  const {
-    p
-  } = corner;
-  return `M ${num(x0 + w - p)} ${num(y0)} ` + `${topRight(corner)} ` + `L ${num(x0 + w)} ${num(y0 + h - p)} ` + `${bottomRight(corner)} ` + `L ${num(x0 + p)} ${num(y0 + h)} ` + `${bottomLeft(corner)} ` + `L ${num(x0)} ${num(y0 + p)} ` + `${topLeft(corner)} Z`;
-}
-//# sourceMappingURL=squircle.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.squircleHostRadius=exports.squircleApplies=exports.SQUIRCLE_SMOOTHING=exports.SQUIRCLE_MIN_RADIUS=void 0,exports.squirclePath=squirclePath;const SQUIRCLE_SMOOTHING=exports.SQUIRCLE_SMOOTHING=.6,SQUIRCLE_MIN_RADIUS=exports.SQUIRCLE_MIN_RADIUS=6,squircleApplies=(n,u,t)=>t>=SQUIRCLE_MIN_RADIUS&&n>0&&u>0&&2*t<Math.min(n,u);exports.squircleApplies=squircleApplies;const squircleHostRadius=(n,u,t)=>Math.min(2*t,Math.min(n,u)/2);exports.squircleHostRadius=squircleHostRadius;const toRadians=n=>n*Math.PI/180,num=n=>{const u=n.toFixed(4);return"-0.0000"===u?"0.0000":u},cornerParams=(n,u,t)=>{let m=(1+u)*n;const $=t/n-1,a=Math.min(u,$);m=Math.min(m,t);const e=90*(1-a),s=Math.sin(toRadians(e/2))*n*Math.SQRT2,o=(90-e)/2,i=45*a,r=n*Math.tan(toRadians(o/2))*Math.cos(toRadians(i)),c=r*Math.tan(toRadians(i)),h=(m-s-r-c)/3;return{a:2*h,b:h,c:r,d:c,p:m,arcSectionLength:s,cornerRadius:n}},topRight=({cornerRadius:n,a:u,b:t,c:m,d:$,arcSectionLength:a})=>`c ${num(u)} 0 ${num(u+t)} 0 ${num(u+t+m)} ${num($)} a ${num(n)} ${num(n)} 0 0 1 ${num(a)} ${num(a)} c ${num($)} ${num(m)} ${num($)} ${num(t+m)} ${num($)} ${num(u+t+m)}`,bottomRight=({cornerRadius:n,a:u,b:t,c:m,d:$,arcSectionLength:a})=>`c 0 ${num(u)} 0 ${num(u+t)} ${num(-$)} ${num(u+t+m)} a ${num(n)} ${num(n)} 0 0 1 ${num(-a)} ${num(a)} c ${num(-m)} ${num($)} ${num(-(t+m))} ${num($)} ${num(-(u+t+m))} ${num($)}`,bottomLeft=({cornerRadius:n,a:u,b:t,c:m,d:$,arcSectionLength:a})=>`c ${num(-u)} 0 ${num(-(u+t))} 0 ${num(-(u+t+m))} ${num(-$)} a ${num(n)} ${num(n)} 0 0 1 ${num(-a)} ${num(-a)} c ${num(-$)} ${num(-m)} ${num(-$)} ${num(-(t+m))} ${num(-$)} ${num(-(u+t+m))}`,topLeft=({cornerRadius:n,a:u,b:t,c:m,d:$,arcSectionLength:a})=>`c 0 ${num(-u)} 0 ${num(-(u+t))} ${num($)} ${num(-(u+t+m))} a ${num(n)} ${num(n)} 0 0 1 ${num(a)} ${num(-a)} c ${num(m)} ${num(-$)} ${num(t+m)} ${num(-$)} ${num(u+t+m)} ${num(-$)}`;function squirclePath({width:n,height:u,radius:t,smoothing:m=SQUIRCLE_SMOOTHING,inset:$=0}){const a=Math.max(0,n-2*$),e=Math.max(0,u-2*$),s=$,o=$,i=Math.max(0,t-$),r=Math.min(a,e)/2,c=Math.min(i,r);if(c<=0)return`M ${num(s)} ${num(o)} L ${num(s+a)} ${num(o)} L ${num(s+a)} ${num(o+e)} L ${num(s)} ${num(o+e)} Z`;const h=cornerParams(c,Math.min(1,Math.max(0,m)),r),{p:R}=h;return`M ${num(s+a-R)} ${num(o)} ${topRight(h)} L ${num(s+a)} ${num(o+e-R)} ${bottomRight(h)} L ${num(s+R)} ${num(o+e)} ${bottomLeft(h)} L ${num(s)} ${num(o+R)} ${topLeft(h)} Z`}

package/lib/commonjs/utils/warnUnknownProps.js

@@ -1,46 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.warnUnknownProps = void 0;
-var _mobileCore = require("@webority/mobile-core");
-/**
- * Dev-time warning for props a component does not accept.
- *
- * This exists for a class of bug that nothing in a JS consumer's toolchain
- * objects to. A component destructures the props it knows and ignores the rest,
- * so a renamed or mistyped prop is simply dropped — silently, at every call
- * site. The web library hit this three times in one day: `body` instead of
- * `message` left nine destructive confirm dialogs with no explanatory text, and
- * `name` instead of `icon` emptied an entire actions column across 23 call
- * sites. Neither failed a build, a lint or a test.
- *
- * Our components are TypeScript, so a TS consumer is already protected at
- * compile time. Several apps in the fleet are plain JS, and they get nothing —
- * which is who this is for. The check therefore has to be a runtime one, and it
- * has to run where the mistake is made: the consumer's dev server.
- *
- * DEV ONLY — the `__DEV__` guard means it costs a release build nothing.
- */
-const warnUnknownProps = (componentName, rest) => {
-  if (!__DEV__ || !rest) {
-    return;
-  }
-  const unknown = Object.keys(rest).filter(key => !isAllowed(key));
-  if (unknown.length === 0) {
-    return;
-  }
-  _mobileCore.Logger.warn(`[${componentName}] received prop(s) it does not accept: ${unknown.join(', ')}. ` + "They were ignored — check for a rename or a typo against the component's props.");
-};
-
-/**
- * Keys that legitimately arrive through `...rest` and must never warn. The list
- * is deliberately generous: a false positive fires on correct code, and a
- * warning people learn to ignore is worse than no warning at all.
- */
-exports.warnUnknownProps = warnUnknownProps;
-const ALLOWED_EXACT = new Set(['children', 'key', 'ref', 'style', 'testID', 'collapsable', 'nativeID', 'pointerEvents', 'removeClippedSubviews', 'renderToHardwareTextureAndroid', 'shouldRasterizeIOS', 'needsOffscreenAlphaCompositing', 'hitSlop', 'onLayout', 'importantForAccessibility', 'role']);
-const ALLOWED_PREFIXES = ['accessibility', 'aria-', 'on', 'data-'];
-const isAllowed = key => ALLOWED_EXACT.has(key) || ALLOWED_PREFIXES.some(p => key.startsWith(p));
-//# sourceMappingURL=warnUnknownProps.js.map
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.warnUnknownProps=void 0;var _mobileCore=require("@webority/mobile-core");const warnUnknownProps=(e,o)=>{if(!__DEV__||!o)return;const r=Object.keys(o).filter(e=>!isAllowed(e));0!==r.length&&_mobileCore.Logger.warn(`[${e}] received prop(s) it does not accept: ${r.join(", ")}. They were ignored — check for a rename or a typo against the component's props.`)};exports.warnUnknownProps=warnUnknownProps;const ALLOWED_EXACT=new Set(["children","key","ref","style","testID","collapsable","nativeID","pointerEvents","removeClippedSubviews","renderToHardwareTextureAndroid","shouldRasterizeIOS","needsOffscreenAlphaCompositing","hitSlop","onLayout","importantForAccessibility","role"]),ALLOWED_PREFIXES=["accessibility","aria-","on","data-"],isAllowed=e=>ALLOWED_EXACT.has(e)||ALLOWED_PREFIXES.some(o=>e.startsWith(o));