@colixsystems/widget-sdk 0.233.0 → 0.235.0

package/dist/navigation.js

@@ -78,7 +78,7 @@ export function menuItemCap(menuType) {
 // `backgroundColor`, `textColor`, `tabActiveBackgroundColor`,
 // `tabActiveTextColor`, `borderColor`, `borderWidth`, `activeStyle`,
 // `tabLayout`, (sc-11678) `shape`, `radius`, `sideMargin`, `bottomSpacing`
-// and (sc-11692) `glass`.
+// (sc-11692) `glass` and (sc-11703) `padding`.
 export function resolveFooterTokens(theme) {
   const config = isPlainObject(theme) ? theme : {};
   const footer = isPlainObject(config.footer) ? config.footer : {};
@@ -97,6 +97,7 @@ export function resolveFooterTokens(theme) {
   const divider = borderWidth > 0;
   const floats = footer.shape !== "docked";
   const radius = footerSizeOr(footer, "radius");
+  const padding = footerSizeOr(footer, "padding");
   const backgroundColor = hexOr(footer.backgroundColor, DEFAULT_FOOTER_SURFACE);
   // sc-11692: frosted unless switched off; only a floating bar has a page
   // behind it to frost.
@@ -132,11 +133,12 @@ export function resolveFooterTokens(theme) {
     // sc-11678: unset floats, so every app gets the rounded, inset bar.
     shape: floats ? "floating" : "docked",
     radius,
-    // A filled tab follows a floating bar's curve one row inset (8px) in,
-    // never sharper than the docked 6px chip. An accent tab paints no surface,
+    // A filled tab follows a floating bar's curve one padding in, never
+    // sharper than the docked 6px chip. An accent tab paints no surface,
     // and a curved top edge would bend its marker into an arc.
     itemRadius:
-      floats && !accent ? Math.max(DOCKED_TAB_RADIUS, radius - 8) : DOCKED_TAB_RADIUS,
+      floats && !accent ? Math.max(DOCKED_TAB_RADIUS, radius - padding) : DOCKED_TAB_RADIUS,
+    padding,
     sideMargin: footerSizeOr(footer, "sideMargin"),
     bottomSpacing: footerSizeOr(footer, "bottomSpacing"),
   };
@@ -148,6 +150,8 @@ export const FOOTER_SIZES = Object.freeze({
   radius: Object.freeze({ max: 40, fallback: 28 }),
   sideMargin: Object.freeze({ max: 48, fallback: 12 }),
   bottomSpacing: Object.freeze({ max: 32, fallback: 8 }),
+  // sc-11703: the space around the tabs; 4 makes a 48pt bar (40pt tabs).
+  padding: Object.freeze({ max: 12, fallback: 4 }),
 });
 const DOCKED_TAB_RADIUS = 6;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.233.0",
+  "version": "0.235.0",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "homepage": "https://github.com/Colix-AB/AppStudio",
   "type": "module",

package/src/contract.js

@@ -3123,7 +3123,7 @@ const PRIMITIVES = [
   {
     name: "DateTimePicker",
     description:
-      'Cross-platform date / time / datetime picker. `<DateTimePicker value={iso} onChange={iso => …} mode="date" | "time" | "datetime" />`. The value prop and the onChange callback both speak ISO 8601 strings (the datastore wire format) — authors never round-trip through `new Date()`. Web renders the browser\'s native `<input type="date|time|datetime-local">` directly (react-native-web has no mapping for the RN datetimepicker library); native uses @react-native-community/datetimepicker. The field themes itself from the workspace theme — text uses `colors.onSurface`, the border `colors.border`, and on web `color-scheme` follows the theme so the browser\'s built-in date UI stays legible on a dark surface; never style it with raw CSS or `document`.',
+      'Cross-platform date / time / datetime field. `<DateTimePicker value={iso} onChange={iso => …} mode="date" | "time" | "datetime" accessibilityLabel="Due" />`. The value prop and the onChange callback both speak ISO 8601 strings (the datastore wire format): `YYYY-MM-DD` for date, `HH:mm` for time, a full UTC instant for datetime — authors never round-trip through `new Date()`. Clearing emits "". The field shows the value in the app user\'s language beside a calendar (or clock) icon, with a clear button once it holds a value. Web opens a themed calendar sheet in `<Overlay>`: a month grid (keyboard: arrows, Home/End, PageUp/PageDown), a month and year jump, hour and minute columns for time, and a Today / Now button. Native opens the operating system\'s own picker (@react-native-community/datetimepicker). `minimumDate` / `maximumDate` (ISO, `HH:mm` in time mode) bound what can be picked; `disabled` locks the field. Optional copy: `placeholder`, `clearLabel` (default "Clear"), `doneLabel` (default "Done", closes the web time sheet), `closeAccessibilityLabel`; `testID` names the field. Colours come from the workspace theme — the field from the text-field tokens, the sheet from the popover scope, the chosen day from `colors.primary`; never style it with raw CSS or `document`.',
     rnComponent: "@react-native-community/datetimepicker",
     docsUrl: "https://github.com/react-native-datetimepicker/datetimepicker",
   },
@@ -6042,7 +6042,14 @@ const CONTRACT = deepFreeze({
   //    `FOOTER_HOME_LINE_CLEARANCE_PX`. No widget-facing surface changes.
   // 1.188.0: additive (sc-11692) — `resolveFooterTokens` gains `glass` (a
   //    floating bar is frosted unless `footer.glass` is false) and `glassTint`.
-  version: "1.188.0",
+  // 1.189.0: additive (sc-11703) — `resolveFooterTokens` gains `padding`,
+  //    the space around a bottom bar's tabs (0–12, default 4); `FOOTER_SIZES`
+  //    gains its bound.
+  // 1.190.0: additive (sc-11777) — `<DateTimePicker>` on web opens a themed
+  //    calendar sheet instead of the browser's date popup; both hosts show
+  //    the value in the app's language with a clear button. New optional
+  //    props: placeholder, clearLabel, doneLabel, closeAccessibilityLabel, testID.
+  version: "1.190.0",
   sharedTranslationKeys: SHARED_TRANSLATION_KEYS,
   hooks: HOOKS,
   primitives: PRIMITIVES,