@colixsystems/widget-sdk 0.162.0 → 0.164.0

package/dist/tabs-view.js

@@ -0,0 +1,169 @@
+// The ONE implementation behind the `<Tabs>` SDK primitive. The platform
+// bindings (`tabs.js` / `tabs.native.js`) differ only in where the primitives
+// come from, so the hosts cannot drift.
+//
+// The page Tabs container, the built-in widgets and custom widgets each drew
+// their own tab strip, so an app's tabs looked different on every screen and
+// between web and native. This strip reads the theme's `tabs` scope.
+
+import React from "react";
+import { useHostTheme } from "./hooks.js";
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import { Icon } from "./icon.js";
+import { resolveTabsTokens } from "./tabs-tokens.js";
+
+const SEGMENT_INSET = 4;
+
+function stripStyles(t, theme) {
+  const spacing = theme.spacing || DEFAULT_THEME_TOKENS.spacing;
+  const elevation = theme.elevation || DEFAULT_THEME_TOKENS.elevation;
+  if (t.style === "pill") {
+    // An idle chip is outlined: a muted fill vanishes on a white card.
+    return {
+      bar: null,
+      content: { gap: spacing.sm },
+      item: (active) => ({
+        borderRadius: t.radius,
+        borderWidth: 1,
+        borderColor: active ? t.activeColor : t.rule,
+        backgroundColor: active ? t.activeColor : "transparent",
+      }),
+    };
+  }
+  if (t.style === "underline") {
+    // The rule sits on the content, so the scroller cannot clip the accent.
+    return {
+      bar: null,
+      content: { gap: spacing.lg, borderBottomWidth: 1, borderColor: t.rule },
+      item: (active) => ({
+        paddingHorizontal: 4,
+        borderBottomWidth: 2,
+        borderColor: active ? t.activeColor : "transparent",
+      }),
+    };
+  }
+  // A concentric outer radius keeps the inset chip's corners parallel. The
+  // bar hugs its segments, and the active one is outlined as well as lifted
+  // because a shadow alone disappears on a dark theme.
+  return {
+    bar: {
+      backgroundColor: t.barBackground,
+      borderRadius: t.radius + 2,
+      alignSelf: "flex-start",
+      maxWidth: "100%",
+    },
+    content: { padding: SEGMENT_INSET, gap: SEGMENT_INSET },
+    item: (active) => ({
+      borderRadius: t.radius,
+      borderWidth: 1,
+      borderColor: active ? t.rule : "transparent",
+      ...(active
+        ? { backgroundColor: t.activeSurface, ...(elevation.sm || {}) }
+        : null),
+    }),
+  };
+}
+
+/**
+ * Bind the shared tab strip to one platform's primitives.
+ *
+ * @param {{View: any, Text: any, Pressable: any, ScrollView: any}} rn
+ */
+export function makeTabs(rn) {
+  const { Text, Pressable, ScrollView } = rn;
+
+  function Tabs({
+    items = [],
+    value,
+    onChange,
+    variant,
+    defaultVariant,
+    activeColor,
+    activeTextColor,
+    textColor,
+    radius,
+    theme: explicitTheme,
+    accessibilityLabel,
+    style,
+    testID,
+  }) {
+    const hostTheme = useHostTheme();
+    // Layout containers render outside a widget context, so they pass theirs.
+    const theme = explicitTheme || hostTheme || DEFAULT_THEME_TOKENS;
+    const t = resolveTabsTokens(theme, {
+      defaultStyle: defaultVariant,
+      style: variant,
+      activeColor,
+      activeTextColor,
+      textColor,
+      radius,
+    });
+    const typography = theme.typography || DEFAULT_THEME_TOKENS.typography;
+    const strip = stripStyles(t, theme);
+
+    return React.createElement(
+      ScrollView,
+      {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        // A strip never grows into, or shrinks away from, the panel below.
+        style: [{ flexGrow: 0, flexShrink: 0 }, strip.bar, style],
+        contentContainerStyle: [{ flexDirection: "row" }, strip.content],
+        accessibilityRole: "tablist",
+        accessibilityLabel,
+        testID,
+      },
+      ...items.map((item) => {
+        const active = item.key === value;
+        const ink = active ? t.activeTextColor : t.textColor;
+        return React.createElement(
+          Pressable,
+          {
+            key: item.key,
+            onPress: () => {
+              if (!active && typeof onChange === "function") onChange(item.key);
+            },
+            disabled: item.disabled,
+            // accessibilityRole + aria-*: the pair that announces on both hosts.
+            accessibilityRole: "tab",
+            "aria-selected": active,
+            "aria-disabled": !!item.disabled,
+            testID: item.testID,
+            style: [
+              {
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: 6,
+                minHeight: 44,
+                paddingHorizontal: 12,
+                paddingVertical: 8,
+              },
+              strip.item(active),
+              item.disabled ? { opacity: 0.5 } : null,
+            ],
+          },
+          item.icon
+            ? React.createElement(Icon, { name: item.icon, size: 16, color: ink })
+            : null,
+          React.createElement(
+            Text,
+            {
+              numberOfLines: 1,
+              style: {
+                fontFamily: typography.fontFamily,
+                fontSize: typography.sizes.sm,
+                fontWeight: active ? "600" : "500",
+                color: ink,
+              },
+            },
+            item.label,
+          ),
+        );
+      }),
+    );
+  }
+
+  Tabs.displayName = "Tabs";
+  return Tabs;
+}

package/dist/tabs.js

@@ -0,0 +1,7 @@
+// `<Tabs>` (web). Binds ./tabs-view.js to react-native-web; see
+// ./primitives.js for why not the bare specifier.
+
+import * as ReactNative from "react-native-web";
+import { makeTabs } from "./tabs-view.js";
+
+export const Tabs = makeTabs(ReactNative);

package/dist/tabs.native.js

@@ -0,0 +1,7 @@
+// `<Tabs>` (native). Binds ./tabs-view.js to React Native's own primitives;
+// only the import differs from ./tabs.js.
+
+import { View, Text, Pressable, ScrollView } from "react-native";
+import { makeTabs } from "./tabs-view.js";
+
+export const Tabs = makeTabs({ View, Text, Pressable, ScrollView });

package/dist/text-field-tokens.js

@@ -0,0 +1,54 @@
+// The values `<TextField>` paints with, resolved from the theme's `muted`
+// component scope — the text-entry surface the built-in forms already theme.
+// Platform-free, so both hosts draw one field from the same numbers.
+
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+
+// A field below 44px misses the touch-target floor on both platforms.
+export const TEXT_FIELD_MIN_HEIGHT = 44;
+
+// Per-field overrides, named as the `muted` scope's tokens are.
+export const TEXT_FIELD_TOKEN_NAMES = Object.freeze([
+  "background",
+  "textColor",
+  "borderColor",
+  "radius",
+  "height",
+]);
+
+function pick(overrides, scope, name) {
+  const own = overrides && overrides[name];
+  if (own !== undefined && own !== null && own !== "") return own;
+  const themed = scope && scope[name];
+  if (themed !== undefined && themed !== null && themed !== "") return themed;
+  return undefined;
+}
+
+/**
+ * Resolve one text field: explicit override, then the theme's `muted` scope,
+ * then the theme tokens. Unthemed, it is the field the built-in forms drew.
+ *
+ * @param {object} theme — the resolved workspace theme (`useTheme()` shape).
+ * @param {object} [overrides] — per-field values keyed by TEXT_FIELD_TOKEN_NAMES.
+ */
+export function resolveTextFieldTokens(theme, overrides) {
+  const base = theme && typeof theme === "object" ? theme : DEFAULT_THEME_TOKENS;
+  const colors = base.colors || DEFAULT_THEME_TOKENS.colors;
+  const radii = base.radii || DEFAULT_THEME_TOKENS.radii;
+  const spacing = base.spacing || DEFAULT_THEME_TOKENS.spacing;
+  const typography = base.typography || DEFAULT_THEME_TOKENS.typography;
+  const scope = base.components && base.components.muted;
+  return {
+    background: pick(overrides, scope, "background") ?? colors.surfaceMuted,
+    textColor: pick(overrides, scope, "textColor") ?? colors.onSurface,
+    borderColor: pick(overrides, scope, "borderColor") ?? colors.border,
+    radius: pick(overrides, scope, "radius") ?? radii.sm,
+    height: pick(overrides, scope, "height") ?? TEXT_FIELD_MIN_HEIGHT,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    fontFamily: typography.fontFamily,
+    fontSize: typography.sizes.md,
+    placeholderColor: colors.onSurfaceMuted,
+    focusColor: colors.primary,
+  };
+}

package/dist/text-field-view.js

@@ -0,0 +1,79 @@
+// The ONE text-entry field, behind the `<TextField>` SDK primitive and the
+// built-in form fields. The bindings differ only in where `TextInput` comes
+// from, so the hosts cannot drift.
+
+import React from "react";
+import { useHostTheme } from "./hooks.js";
+import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
+import {
+  resolveTextFieldTokens,
+  TEXT_FIELD_TOKEN_NAMES,
+} from "./text-field-tokens.js";
+
+// A paragraph field grows to a ceiling, then scrolls inside itself.
+const MULTILINE = { minHeight: 88, maxHeight: 220, textAlignVertical: "top" };
+
+/**
+ * Bind the shared field to one platform's primitives.
+ *
+ * @param {{TextInput: any}} rn
+ */
+export function makeTextField(rn) {
+  const { TextInput } = rn;
+
+  const TextField = React.forwardRef(function TextField(props, ref) {
+    const {
+      style,
+      multiline = false,
+      placeholderTextColor,
+      onFocus,
+      onBlur,
+      ...others
+    } = props;
+    const theme = useHostTheme() || DEFAULT_THEME_TOKENS;
+    // Native draws no focus ring, so the border itself shows focus.
+    const [focused, setFocused] = React.useState(false);
+    const overrides = {};
+    const rest = {};
+    for (const [key, value] of Object.entries(others)) {
+      if (TEXT_FIELD_TOKEN_NAMES.includes(key)) overrides[key] = value;
+      else rest[key] = value;
+    }
+    const t = resolveTextFieldTokens(theme, overrides);
+    return React.createElement(TextInput, {
+      ref,
+      multiline,
+      placeholderTextColor: placeholderTextColor || t.placeholderColor,
+      style: [
+        {
+          borderWidth: 1,
+          borderColor: t.borderColor,
+          borderRadius: t.radius,
+          paddingHorizontal: t.paddingHorizontal,
+          paddingVertical: t.paddingVertical,
+          minHeight: t.height,
+          backgroundColor: t.background,
+          color: t.textColor,
+          fontFamily: t.fontFamily,
+          fontSize: t.fontSize,
+        },
+        focused ? { borderColor: t.focusColor } : null,
+        style,
+        // After the caller's style: a paragraph field keeps its 88px floor.
+        multiline ? MULTILINE : null,
+      ],
+      onFocus: (e) => {
+        setFocused(true);
+        if (typeof onFocus === "function") onFocus(e);
+      },
+      onBlur: (e) => {
+        setFocused(false);
+        if (typeof onBlur === "function") onBlur(e);
+      },
+      ...rest,
+    });
+  });
+
+  TextField.displayName = "TextField";
+  return TextField;
+}

package/dist/text-field.js

@@ -0,0 +1,7 @@
+// `<TextField>` (web). Binds ./text-field-view.js to react-native-web; see
+// ./primitives.js for why not the bare specifier.
+
+import * as ReactNative from "react-native-web";
+import { makeTextField } from "./text-field-view.js";
+
+export const TextField = makeTextField(ReactNative);

package/dist/text-field.native.js

@@ -0,0 +1,7 @@
+// `<TextField>` (native). Binds ./text-field-view.js to React Native's own
+// `TextInput`; only the import differs from ./text-field.js.
+
+import { TextInput } from "react-native";
+import { makeTextField } from "./text-field-view.js";
+
+export const TextField = makeTextField({ TextInput });

package/dist/theme-components.cjs

@@ -65,6 +65,11 @@ function coerceToken(def, value) {
   if (def.type === "gradient") {
     return normaliseComponentGradient(value) || undefined;
   }
+  if (def.type === "enum") {
+    return Array.isArray(def.values) && def.values.includes(value)
+      ? value
+      : undefined;
+  }
   return undefined;
 }
 

package/dist/theme-components.js

@@ -57,6 +57,11 @@ function coerceToken(def, value) {
   if (def.type === "gradient") {
     return normaliseComponentGradient(value) || undefined;
   }
+  if (def.type === "enum") {
+    return Array.isArray(def.values) && def.values.includes(value)
+      ? value
+      : undefined;
+  }
   return undefined;
 }
 

package/package.json

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