@newtonedev/components 0.1.20 → 0.1.22

package/dist/index.js

@@ -743,25 +743,47 @@ var Text3 = Object.assign(TextBase, {
   Underline: TextUnderline,
   Highlight: TextHighlight
 });
-var styles = StyleSheet.create({
+var baseStyles = StyleSheet.create({
   root: {
     flex: 1,
+    flexDirection: "row",
+    ...Platform.OS === "web" ? { height: "100vh", overflow: "hidden" } : {}
+  },
+  navigation: {
+    width: 256,
+    flexShrink: 0,
     flexDirection: "column",
-    ...Platform.OS === "web" ? { minHeight: "100vh" } : {}
+    overflow: "hidden"
   },
-  body: {
-    flex: 1,
-    flexDirection: "row"
+  navHeader: {
+    flexShrink: 0,
+    height: 64
   },
   content: {
-    flex: 1
+    flex: 1,
+    flexDirection: "column",
+    overflow: "hidden"
+  },
+  header: {
+    flexShrink: 0,
+    height: 64,
+    ...Platform.OS === "web" ? { position: "sticky", top: 0, zIndex: 10 } : {}
+  },
+  navFooter: {
+    flexShrink: 0
+  },
+  footer: {
+    flexShrink: 0
   }
 });
 function Page({
   children,
   scheme,
-  navbar,
-  sidebar,
+  header,
+  navHeader,
+  navFooter,
+  footer,
+  navContent,
   testID,
   nativeID,
   ref,
@@ -778,6 +800,37 @@ function Page({
       activeScheme: scheme
     };
   }, [scheme, themeCtx]);
+  const resolvedConfig = schemeThemeCtx?.config ?? themeCtx.config;
+  const { mode, gamut } = themeCtx;
+  const { dividerBg, sunkenBg, groundedBg } = useMemo(() => {
+    const groundedTokens = computeTokens(
+      resolvedConfig.colorSystem,
+      mode,
+      gamut,
+      "grounded",
+      resolvedConfig.spacing,
+      resolvedConfig.radius,
+      resolvedConfig.typography,
+      resolvedConfig.icons,
+      resolvedConfig.themeMappings
+    );
+    const sunkenTokens = computeTokens(
+      resolvedConfig.colorSystem,
+      mode,
+      gamut,
+      "sunken",
+      resolvedConfig.spacing,
+      resolvedConfig.radius,
+      resolvedConfig.typography,
+      resolvedConfig.icons,
+      resolvedConfig.themeMappings
+    );
+    return {
+      dividerBg: groundedTokens.colors.primary.main.divider,
+      sunkenBg: sunkenTokens.colors.primary.main.background,
+      groundedBg: groundedTokens.colors.primary.main.background
+    };
+  }, [resolvedConfig, mode, gamut]);
   const userStyles = Array.isArray(style) ? style : style ? [style] : [];
   const content = /* @__PURE__ */ React19.createElement(
     View,
@@ -786,17 +839,17 @@ function Page({
       testID,
       nativeID,
       accessibilityRole: "none",
-      style: [styles.root, ...userStyles]
+      style: [baseStyles.root, { backgroundColor: dividerBg, gap: 1 }, ...userStyles]
     },
-    navbar,
-    sidebar ? /* @__PURE__ */ React19.createElement(View, { style: styles.body }, sidebar, /* @__PURE__ */ React19.createElement(View, { style: styles.content }, children)) : children
+    navHeader || navContent || navFooter ? /* @__PURE__ */ React19.createElement(View, { style: [baseStyles.navigation, { backgroundColor: dividerBg, gap: 1 }] }, navHeader ? /* @__PURE__ */ React19.createElement(View, { style: [baseStyles.navHeader, { backgroundColor: sunkenBg }] }, navHeader) : null, /* @__PURE__ */ React19.createElement(View, { style: { flex: 1, backgroundColor: sunkenBg, overflow: "hidden" } }, navContent), navFooter ? /* @__PURE__ */ React19.createElement(View, { style: [baseStyles.navFooter, { backgroundColor: sunkenBg }] }, navFooter) : null) : null,
+    /* @__PURE__ */ React19.createElement(View, { style: [baseStyles.content, { backgroundColor: dividerBg, gap: 1 }] }, header ? /* @__PURE__ */ React19.createElement(View, { style: [baseStyles.header, { backgroundColor: groundedBg }] }, header) : null, /* @__PURE__ */ React19.createElement(View, { style: { flex: 1, backgroundColor: groundedBg, overflow: "hidden" } }, children), footer ? /* @__PURE__ */ React19.createElement(View, { style: [baseStyles.footer, { backgroundColor: groundedBg }] }, footer) : null)
   );
   if (schemeThemeCtx) {
     return /* @__PURE__ */ React19.createElement(_ThemeContext.Provider, { value: schemeThemeCtx }, content);
   }
   return content;
 }
-var styles2 = StyleSheet.create({
+var styles = StyleSheet.create({
   root: {
     flex: 1
   },
@@ -818,8 +871,8 @@ function Viewport({
       ref,
       testID,
       nativeID,
-      style: styles2.root,
-      contentContainerStyle: [styles2.content, ...userStyles]
+      style: styles.root,
+      contentContainerStyle: [styles.content, ...userStyles]
     },
     children
   );
@@ -1777,9 +1830,6 @@ function ContentCard({
     {
       elevation: variant === "elevated" ? 2 : void 0,
       appearance: variant === "elevated" ? "tinted" : void 0,
-      href,
-      onPress,
-      disabled,
       padding,
       gap,
       style: [
@@ -3050,49 +3100,27 @@ function AppShell({ sidebar, children }) {
   );
   return /* @__PURE__ */ React19.createElement(View, { style: styles3.container }, sidebar, /* @__PURE__ */ React19.createElement(View, { style: styles3.main }, children));
 }
-function getSidebarStyles({ tokens, width, bordered, theme = "primary", appearance = "main" }) {
-  const at = tokens.colors[theme][appearance];
-  const borderColor = at.fontSecondary;
-  return StyleSheet.create({
-    container: {
-      width,
-      flexShrink: 0,
-      flexDirection: "column",
-      backgroundColor: at.background,
-      borderRightWidth: bordered ? 1 : 0,
-      borderRightColor: borderColor
-    },
-    header: {
-      flexShrink: 0,
-      borderBottomWidth: 1,
-      borderBottomColor: borderColor
-    },
-    body: {
-      flex: 1
-    },
-    footer: {
-      flexShrink: 0,
-      borderTopWidth: 1,
-      borderTopColor: borderColor
-    }
-  });
-}
-
-// src/composites/layout/Sidebar/Sidebar.tsx
+var styles2 = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: "column"
+  },
+  body: {
+    flex: 1,
+    padding: 8
+  },
+  bodyContent: {
+    gap: 8
+  },
+  footer: {
+    flexShrink: 0
+  }
+});
 function Sidebar({
   children,
-  header,
-  footer,
-  width = 260,
-  bordered = true
+  footer
 }) {
-  const tokens = useTokens();
-  const frameCtx = useFrameContext();
-  const styles3 = React19.useMemo(
-    () => getSidebarStyles({ tokens, width, bordered, theme: frameCtx?.theme, appearance: frameCtx?.appearance }),
-    [tokens, width, bordered, frameCtx?.theme, frameCtx?.appearance]
-  );
-  return /* @__PURE__ */ React19.createElement(View, { style: styles3.container }, header && /* @__PURE__ */ React19.createElement(View, { style: styles3.header }, header), /* @__PURE__ */ React19.createElement(ScrollView, { style: styles3.body }, children), footer && /* @__PURE__ */ React19.createElement(View, { style: styles3.footer }, footer));
+  return /* @__PURE__ */ React19.createElement(View, { style: styles2.container }, /* @__PURE__ */ React19.createElement(ScrollView, { style: styles2.body, contentContainerStyle: styles2.bodyContent }, children), footer && /* @__PURE__ */ React19.createElement(View, { style: styles2.footer }, footer));
 }
 function getNavbarStyles({ tokens, height, bordered, theme = "primary", appearance = "main" }) {
   const at = tokens.colors[theme][appearance];