@neuralumina/lumina-ui 0.1.1

package/lumina-ui/widgets/navigation.js

@@ -0,0 +1,313 @@
+import {
+  cleanStyle,
+  luminaTheme,
+  normalizeWidgetArgs,
+  omitProps,
+  px,
+} from "./utils.js";
+
+export function Scaffold(props = {}) {
+  const children = [
+    props.appBar || null,
+    {
+      tag: "main",
+      props: {
+        style: cleanStyle({
+          flex: 1,
+          minWidth: 0,
+          minHeight: 0,
+          color: luminaTheme.colors.text,
+          ...props.bodyStyle,
+        }),
+      },
+      children: props.body ? [props.body] : [],
+    },
+    props.bottomNavigationBar || null,
+    props.drawer || null,
+  ];
+
+  return {
+    tag: "div",
+    props: {
+      ...omitProps(props, [
+        "appBar",
+        "body",
+        "bottomNavigationBar",
+        "drawer",
+        "bodyStyle",
+      ]),
+      style: cleanStyle({
+        display: "flex",
+        flexDirection: "column",
+        minHeight: px(props.minHeight, "100%"),
+        backgroundColor: props.backgroundColor || "transparent",
+        color: luminaTheme.colors.text,
+        ...props.style,
+      }),
+    },
+    children,
+    key: props.key,
+  };
+}
+
+export function AppBar(propsOrChildren = {}, maybeChildren = undefined) {
+  const [props, children] = normalizeWidgetArgs(propsOrChildren, maybeChildren);
+
+  return {
+    tag: "header",
+    props: {
+      ...omitProps(props, ["title", "leading", "actions", "height"]),
+      style: cleanStyle({
+        minHeight: px(props.height ?? 56),
+        display: "flex",
+        alignItems: "center",
+        gap: "12px",
+        padding: "0 16px",
+        borderBottom: `1px solid ${luminaTheme.colors.border}`,
+        backgroundColor: luminaTheme.colors.surface,
+        color: luminaTheme.colors.text,
+        boxShadow: luminaTheme.shadow.xs,
+        ...props.style,
+      }),
+    },
+    children: children.length
+      ? children
+      : [
+          props.leading || null,
+          {
+            tag: "div",
+            props: {
+              style: {
+                flex: 1,
+                minWidth: 0,
+                fontSize: "18px",
+                fontWeight: 800,
+              },
+            },
+            children: [props.title || ""],
+          },
+          ...(props.actions || []),
+        ],
+    key: props.key,
+  };
+}
+
+export function TabBar({
+  tabs = [],
+  value,
+  onChange,
+  color = luminaTheme.colors.primary,
+  style = {},
+  ...props
+}) {
+  return {
+    tag: "div",
+    props: {
+      ...props,
+      role: "tablist",
+      style: cleanStyle({
+        display: "flex",
+        gap: "4px",
+        borderBottom: `1px solid ${luminaTheme.colors.border}`,
+        ...style,
+      }),
+    },
+    children: tabs.map((tab, index) => {
+      const selected = value === tab.value || value === index;
+      return {
+        tag: "button",
+        props: {
+          key: tab.value ?? index,
+          role: "tab",
+          "aria-selected": selected,
+          type: "button",
+          onClick: () => {
+            if (onChange) onChange(tab.value ?? index);
+          },
+          style: cleanStyle({
+            appearance: "none",
+            border: "1px solid transparent",
+            borderBottom: `2px solid ${selected ? color : "transparent"}`,
+            borderRadius: "8px 8px 0 0",
+            backgroundColor: selected ? luminaTheme.colors.primarySoft : "transparent",
+            color: selected ? color : luminaTheme.colors.muted,
+            padding: "10px 12px",
+            font: "inherit",
+            fontWeight: selected ? 800 : 600,
+            cursor: "pointer",
+            transition: `background-color ${luminaTheme.transition}, color ${luminaTheme.transition}, border-color ${luminaTheme.transition}`,
+          }),
+        },
+        children: [tab.label],
+        key: tab.value ?? index,
+      };
+    }),
+    key: props.key,
+  };
+}
+
+export function TabBarView({ tabs = [], value, style = {}, ...props }) {
+  const active =
+    tabs.find((tab, index) => tab.value === value || index === value) ||
+    tabs[0];
+
+  return {
+    tag: "div",
+    props: {
+      ...props,
+      style: cleanStyle({
+        minWidth: 0,
+        minHeight: 0,
+        ...style,
+      }),
+    },
+    children: active ? [active.child] : [],
+    key: props.key,
+  };
+}
+
+export function BottomNavigationBar({
+  items = [],
+  value,
+  onChange,
+  color = luminaTheme.colors.primary,
+  style = {},
+  ...props
+}) {
+  return {
+    tag: "nav",
+    props: {
+      ...props,
+      "aria-label": props["aria-label"] || "Bottom navigation",
+      style: cleanStyle({
+        display: "grid",
+        gridTemplateColumns: `repeat(${Math.max(items.length, 1)}, 1fr)`,
+        borderTop: `1px solid ${luminaTheme.colors.border}`,
+        backgroundColor: luminaTheme.colors.surface,
+        boxShadow: "0 -1px 2px rgba(15, 23, 42, 0.04)",
+        ...style,
+      }),
+    },
+    children: items.map((item, index) => {
+      const selected = value === item.value || value === index;
+      return {
+        tag: "button",
+        props: {
+          key: item.value ?? index,
+          type: "button",
+          "aria-current": selected ? "page" : undefined,
+          onClick: () => {
+            if (onChange) onChange(item.value ?? index);
+          },
+          style: cleanStyle({
+            border: "none",
+            borderRadius: luminaTheme.radius.md,
+            backgroundColor: selected ? luminaTheme.colors.primarySoft : "transparent",
+            color: selected ? color : luminaTheme.colors.muted,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: "4px",
+            padding: "10px 8px",
+            font: "inherit",
+            fontSize: "12px",
+            fontWeight: selected ? 800 : 600,
+            cursor: "pointer",
+            transition: `background-color ${luminaTheme.transition}, color ${luminaTheme.transition}`,
+          }),
+        },
+        children: [item.icon || null, item.label],
+        key: item.value ?? index,
+      };
+    }),
+    key: props.key,
+  };
+}
+
+export function Drawer(propsOrChildren = {}, maybeChildren = undefined) {
+  const [props, children] = normalizeWidgetArgs(propsOrChildren, maybeChildren);
+  if (props.open === false) return null;
+
+  return {
+    tag: "aside",
+    props: {
+      ...omitProps(props, ["open", "width"]),
+      style: cleanStyle({
+        position: "fixed",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        zIndex: props.zIndex ?? 1000,
+        width: px(props.width ?? 300),
+        maxWidth: "86vw",
+        backgroundColor: luminaTheme.colors.surface,
+        borderRight: `1px solid ${luminaTheme.colors.border}`,
+        boxShadow: luminaTheme.shadow.lg,
+        transform: props.open === false ? "translateX(-100%)" : "translateX(0)",
+        transition: "transform 180ms ease",
+        ...props.style,
+      }),
+    },
+    children,
+    key: props.key,
+  };
+}
+
+export function NavigationRail({
+  items = [],
+  value,
+  onChange,
+  color = luminaTheme.colors.primary,
+  style = {},
+  ...props
+}) {
+  return {
+    tag: "nav",
+    props: {
+      ...props,
+      "aria-label": props["aria-label"] || "Navigation rail",
+      style: cleanStyle({
+        display: "flex",
+        flexDirection: "column",
+        gap: "6px",
+        width: px(props.width ?? 88),
+        padding: "8px",
+        borderRight: `1px solid ${luminaTheme.colors.border}`,
+        backgroundColor: luminaTheme.colors.surface,
+        ...style,
+      }),
+    },
+    children: items.map((item, index) => {
+      const selected = value === item.value || value === index;
+      return {
+        tag: "button",
+        props: {
+          key: item.value ?? index,
+          type: "button",
+          onClick: () => {
+            if (onChange) onChange(item.value ?? index);
+          },
+          style: cleanStyle({
+            border: "none",
+            borderRadius: luminaTheme.radius.md,
+            backgroundColor: selected ? luminaTheme.colors.primarySoft : "transparent",
+            color: selected ? color : luminaTheme.colors.muted,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: "4px",
+            padding: "10px 6px",
+            font: "inherit",
+            fontSize: "12px",
+            fontWeight: selected ? 800 : 600,
+            cursor: "pointer",
+            transition: `background-color ${luminaTheme.transition}, color ${luminaTheme.transition}`,
+          }),
+        },
+        children: [item.icon || null, item.label],
+        key: item.value ?? index,
+      };
+    }),
+    key: props.key,
+  };
+}

package/lumina-ui/widgets/scrolling.js

@@ -0,0 +1,330 @@
+import {
+  cleanStyle,
+  edgeInsets,
+  luminaTheme,
+  normalizeWidgetArgs,
+  omitProps,
+  px,
+} from "./utils.js";
+
+function dataKey(item) {
+  if (!item || typeof item !== "object") return null;
+  return item.id ?? item.key ?? null;
+}
+
+function withAutoKey(child, key) {
+  if (key == null) return child;
+  if (Array.isArray(child)) {
+    return child.map((entry, index) =>
+      withAutoKey(entry, `${key}:${index}`),
+    );
+  }
+  if (!child || typeof child !== "object" || !child.tag) return child;
+  if (child.key != null || child.props?.key != null) return child;
+  return { ...child, key };
+}
+
+export function SingleChildScrollView(
+  propsOrChildren = {},
+  maybeChildren = undefined,
+) {
+  const [props, children] = normalizeWidgetArgs(propsOrChildren, maybeChildren);
+  const direction = props.scrollDirection || props.direction || "vertical";
+  const isHorizontal = direction === "horizontal";
+
+  return {
+    tag: "div",
+    props: {
+      ...omitProps(props, ["scrollDirection", "direction", "padding"]),
+      style: cleanStyle({
+        overflowX: isHorizontal ? "auto" : "hidden",
+        overflowY: isHorizontal ? "hidden" : "auto",
+        WebkitOverflowScrolling: "touch",
+        maxWidth: "100%",
+        maxHeight: props.maxHeight ? px(props.maxHeight) : undefined,
+        padding: edgeInsets(props.padding),
+        scrollbarWidth: "thin",
+        scrollbarColor: `${luminaTheme.colors.borderStrong} transparent`,
+        ...props.style,
+      }),
+    },
+    children,
+    key: props.key,
+  };
+}
+
+export function ListView(propsOrChildren = {}, maybeChildren = undefined) {
+  const [props, givenChildren] = normalizeWidgetArgs(
+    propsOrChildren,
+    maybeChildren,
+  );
+  const {
+    items = [],
+    itemBuilder,
+    separatorBuilder,
+    direction = "vertical",
+    gap = 0,
+    padding,
+    empty,
+    style = {},
+  } = props;
+  const isHorizontal = direction === "horizontal";
+  const children = givenChildren.length
+    ? givenChildren
+    : items.length
+      ? items.flatMap((item, index) => {
+          const key = dataKey(item);
+          const child = withAutoKey(
+            itemBuilder ? itemBuilder(item, index) : item,
+            key,
+          );
+          if (!separatorBuilder || index === items.length - 1) return [child];
+          return [
+            child,
+            withAutoKey(separatorBuilder(item, index), key == null ? null : `${key}:separator`),
+          ];
+        })
+      : empty
+        ? [empty]
+        : [];
+
+  return {
+    tag: "div",
+    props: {
+      ...omitProps(props, [
+        "items",
+        "itemBuilder",
+        "separatorBuilder",
+        "direction",
+        "gap",
+        "padding",
+        "empty",
+      ]),
+      style: cleanStyle({
+        display: "flex",
+        flexDirection: isHorizontal ? "row" : "column",
+        gap: px(gap),
+        overflowX: isHorizontal ? "auto" : "hidden",
+        overflowY: isHorizontal ? "hidden" : "auto",
+        WebkitOverflowScrolling: "touch",
+        padding: edgeInsets(padding),
+        scrollbarWidth: "thin",
+        scrollbarColor: `${luminaTheme.colors.borderStrong} transparent`,
+        ...style,
+      }),
+    },
+    children,
+    key: props.key,
+  };
+}
+
+export function GridView(propsOrChildren = {}, maybeChildren = undefined) {
+  const [props, givenChildren] = normalizeWidgetArgs(
+    propsOrChildren,
+    maybeChildren,
+  );
+  const {
+    items = [],
+    itemBuilder,
+    columns,
+    minColumnWidth = 140,
+    gap = 12,
+    padding,
+    empty,
+    style = {},
+  } = props;
+  const children = givenChildren.length
+    ? givenChildren
+    : items.length
+      ? items.map((item, index) =>
+          withAutoKey(itemBuilder ? itemBuilder(item, index) : item, dataKey(item)),
+        )
+      : empty
+        ? [empty]
+        : [];
+
+  return {
+    tag: "div",
+    props: {
+      ...omitProps(props, [
+        "items",
+        "itemBuilder",
+        "columns",
+        "minColumnWidth",
+        "gap",
+        "padding",
+        "empty",
+      ]),
+      style: cleanStyle({
+        display: "grid",
+        gridTemplateColumns: columns
+          ? `repeat(${columns}, minmax(0, 1fr))`
+          : `repeat(auto-fit, minmax(${px(minColumnWidth)}, 1fr))`,
+        gap: px(gap),
+        overflow: "auto",
+        WebkitOverflowScrolling: "touch",
+        padding: edgeInsets(padding),
+        scrollbarWidth: "thin",
+        scrollbarColor: `${luminaTheme.colors.borderStrong} transparent`,
+        ...style,
+      }),
+    },
+    children,
+    key: props.key,
+  };
+}
+
+export function CustomScrollView(
+  propsOrChildren = {},
+  maybeChildren = undefined,
+) {
+  const [props, children] = normalizeWidgetArgs(propsOrChildren, maybeChildren);
+
+  return {
+    tag: "div",
+    props: {
+      ...omitProps(props, ["slivers", "direction", "padding"]),
+      style: cleanStyle({
+        display: "flex",
+        flexDirection: props.direction === "horizontal" ? "row" : "column",
+        overflow: "auto",
+        WebkitOverflowScrolling: "touch",
+        scrollBehavior: props.smooth ? "smooth" : undefined,
+        padding: edgeInsets(props.padding),
+        scrollbarWidth: "thin",
+        scrollbarColor: `${luminaTheme.colors.borderStrong} transparent`,
+        ...props.style,
+      }),
+    },
+    children: children.length ? children : props.slivers || [],
+    key: props.key,
+  };
+}
+
+export function NestedScrollView(props = {}) {
+  return {
+    tag: "div",
+    props: {
+      ...omitProps(props, ["header", "body"]),
+      style: cleanStyle({
+        display: "flex",
+        flexDirection: "column",
+        overflow: "auto",
+        WebkitOverflowScrolling: "touch",
+        scrollbarWidth: "thin",
+        scrollbarColor: `${luminaTheme.colors.borderStrong} transparent`,
+        ...props.style,
+      }),
+    },
+    children: [props.header || null, props.body || null],
+    key: props.key,
+  };
+}
+
+export function PageView(propsOrChildren = {}, maybeChildren = undefined) {
+  const [props, givenChildren] = normalizeWidgetArgs(
+    propsOrChildren,
+    maybeChildren,
+  );
+  const children = givenChildren.length ? givenChildren : props.pages || [];
+  const isVertical = props.direction === "vertical";
+
+  return {
+    tag: "div",
+    props: {
+      ...omitProps(props, ["pages", "direction", "gap"]),
+      style: cleanStyle({
+        display: "flex",
+        flexDirection: isVertical ? "column" : "row",
+        overflow: "auto",
+        scrollSnapType: isVertical ? "y mandatory" : "x mandatory",
+        WebkitOverflowScrolling: "touch",
+        gap: px(props.gap ?? 0),
+        scrollbarWidth: "thin",
+        scrollbarColor: `${luminaTheme.colors.borderStrong} transparent`,
+        ...props.style,
+      }),
+    },
+    children: children.map((child, index) => ({
+      tag: "div",
+      props: {
+        key: child?.key ?? index,
+        style: {
+          flex: "0 0 100%",
+          scrollSnapAlign: "start",
+        },
+      },
+      children: [child],
+      key: child?.key ?? index,
+    })),
+    key: props.key,
+  };
+}
+
+export function SliverAppBar(propsOrChildren = {}, maybeChildren = undefined) {
+  const [props, children] = normalizeWidgetArgs(propsOrChildren, maybeChildren);
+
+  return {
+    tag: "header",
+    props: {
+      ...omitProps(props, ["title", "expandedHeight", "floating", "pinned"]),
+      style: cleanStyle({
+        position: props.pinned || props.floating ? "sticky" : undefined,
+        top: props.pinned || props.floating ? 0 : undefined,
+        zIndex: props.pinned || props.floating ? 10 : undefined,
+        minHeight: px(props.expandedHeight ?? 56),
+        display: "flex",
+        alignItems: "center",
+        padding: "0 16px",
+        backgroundColor: luminaTheme.colors.surface,
+        borderBottom: `1px solid ${luminaTheme.colors.border}`,
+        boxShadow: luminaTheme.shadow.xs,
+        ...props.style,
+      }),
+    },
+    children: children.length ? children : [props.title || ""],
+    key: props.key,
+  };
+}
+
+export function SliverList(propsOrChildren = {}, maybeChildren = undefined) {
+  return ListView(propsOrChildren, maybeChildren);
+}
+
+export function SliverGrid(propsOrChildren = {}, maybeChildren = undefined) {
+  return GridView(propsOrChildren, maybeChildren);
+}
+
+export function SliverPadding(propsOrChildren = {}, maybeChildren = undefined) {
+  const [props, children] = normalizeWidgetArgs(propsOrChildren, maybeChildren);
+
+  return {
+    tag: "div",
+    props: {
+      ...omitProps(props, ["padding"]),
+      style: cleanStyle({
+        padding: edgeInsets(props.padding ?? 0),
+        ...props.style,
+      }),
+    },
+    children,
+    key: props.key,
+  };
+}
+
+export function SliverToBoxAdapter(
+  propsOrChildren = {},
+  maybeChildren = undefined,
+) {
+  const [props, children] = normalizeWidgetArgs(propsOrChildren, maybeChildren);
+
+  return {
+    tag: "div",
+    props: {
+      ...omitProps(props),
+      style: cleanStyle(props.style),
+    },
+    children,
+    key: props.key,
+  };
+}