@newtonedev/components 0.1.20 → 0.1.22

package/dist/composites/layout/ContentCard/ContentCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ContentCard.d.ts","sourceRoot":"","sources":["../../../../src/composites/layout/ContentCard/ContentCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAK5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAoB,EACpB,IAAI,EACJ,OAAO,EACP,OAAY,EACZ,GAAO,EACP,QAAgB,EAChB,KAAK,GACN,EAAE,gBAAgB,qBA0BlB"}
+{"version":3,"file":"ContentCard.d.ts","sourceRoot":"","sources":["../../../../src/composites/layout/ContentCard/ContentCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAK5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAoB,EACpB,IAAI,EACJ,OAAO,EACP,OAAY,EACZ,GAAO,EACP,QAAgB,EAChB,KAAK,GACN,EAAE,gBAAgB,qBAuBlB"}

package/dist/composites/layout/Sidebar/Sidebar.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { SidebarProps } from './Sidebar.types';
-export declare function Sidebar({ children, header, footer, width, bordered, }: SidebarProps): React.JSX.Element;
+export declare function Sidebar({ children, footer, }: SidebarProps): React.JSX.Element;
 //# sourceMappingURL=Sidebar.d.ts.map

package/dist/composites/layout/Sidebar/Sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../../src/composites/layout/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAIpD,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,MAAM,EACN,MAAM,EACN,KAAW,EACX,QAAe,GAChB,EAAE,YAAY,qBAed"}
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../../src/composites/layout/Sidebar/Sidebar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAmBpD,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,MAAM,GACP,EAAE,YAAY,qBAOd"}

package/dist/composites/layout/Sidebar/Sidebar.styles.d.ts

@@ -1,32 +1,17 @@
-import type { ResolvedTokens, ThemeName, AppearanceName } from 'newtone-api';
 interface SidebarStyleInput {
-    readonly tokens: ResolvedTokens;
     readonly width: number;
-    readonly bordered: boolean;
-    readonly theme?: ThemeName;
-    readonly appearance?: AppearanceName;
 }
-export declare function getSidebarStyles({ tokens, width, bordered, theme, appearance }: SidebarStyleInput): {
+export declare function getSidebarStyles({ width }: SidebarStyleInput): {
     container: {
         width: number;
         flexShrink: number;
         flexDirection: "column";
-        backgroundColor: string;
-        borderRightWidth: number;
-        borderRightColor: string;
-    };
-    header: {
-        flexShrink: number;
-        borderBottomWidth: number;
-        borderBottomColor: string;
     };
     body: {
         flex: number;
     };
     footer: {
         flexShrink: number;
-        borderTopWidth: number;
-        borderTopColor: string;
     };
 };
 export {};

package/dist/composites/layout/Sidebar/Sidebar.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.styles.d.ts","sourceRoot":"","sources":["../../../../src/composites/layout/Sidebar/Sidebar.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAoB,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE/F,UAAU,iBAAiB;IACzB,QAAQ,CAAC,MAAM,EAAE,cAAc,CAAC;IAChC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,UAAU,CAAC,EAAE,cAAc,CAAC;CACtC;AAED,wBAAgB,gBAAgB,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAiB,EAAE,UAAmB,EAAE,EAAE,iBAAiB;;;;;;;;;;;;;;;;;;;;;;EA2BtH"}
+{"version":3,"file":"Sidebar.styles.d.ts","sourceRoot":"","sources":["../../../../src/composites/layout/Sidebar/Sidebar.styles.ts"],"names":[],"mappings":"AAEA,UAAU,iBAAiB;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,EAAE,iBAAiB;;;;;;;;;;;;EAc5D"}

package/dist/composites/layout/Sidebar/Sidebar.types.d.ts

@@ -2,13 +2,7 @@ import type { ReactNode } from 'react';
 export interface SidebarProps {
     /** Scrollable body content (navigation items, etc.) */
     readonly children?: ReactNode;
-    /** Sticky header slot (logo, brand) */
-    readonly header?: ReactNode;
     /** Sticky footer slot (user menu, settings) */
     readonly footer?: ReactNode;
-    /** Fixed width in pixels. @default 260 */
-    readonly width?: number;
-    /** Show right border. @default true */
-    readonly bordered?: boolean;
 }
 //# sourceMappingURL=Sidebar.types.d.ts.map

package/dist/composites/layout/Sidebar/Sidebar.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.types.d.ts","sourceRoot":"","sources":["../../../../src/composites/layout/Sidebar/Sidebar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,YAAY;IAC3B,uDAAuD;IACvD,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,uCAAuC;IACvC,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC5B,+CAA+C;IAC/C,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC5B,0CAA0C;IAC1C,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,uCAAuC;IACvC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B"}
+{"version":3,"file":"Sidebar.types.d.ts","sourceRoot":"","sources":["../../../../src/composites/layout/Sidebar/Sidebar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,YAAY;IAC3B,uDAAuD;IACvD,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,+CAA+C;IAC/C,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;CAC7B"}

package/dist/index.cjs

@@ -748,25 +748,47 @@ var Text3 = Object.assign(TextBase, {
   Underline: TextUnderline,
   Highlight: TextHighlight
 });
-var styles = reactNative.StyleSheet.create({
+var baseStyles = reactNative.StyleSheet.create({
   root: {
     flex: 1,
+    flexDirection: "row",
+    ...reactNative.Platform.OS === "web" ? { height: "100vh", overflow: "hidden" } : {}
+  },
+  navigation: {
+    width: 256,
+    flexShrink: 0,
     flexDirection: "column",
-    ...reactNative.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,
+    ...reactNative.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,
@@ -783,6 +805,37 @@ function Page({
       activeScheme: scheme
     };
   }, [scheme, themeCtx]);
+  const resolvedConfig = schemeThemeCtx?.config ?? themeCtx.config;
+  const { mode, gamut } = themeCtx;
+  const { dividerBg, sunkenBg, groundedBg } = React19.useMemo(() => {
+    const groundedTokens = newtoneApi.computeTokens(
+      resolvedConfig.colorSystem,
+      mode,
+      gamut,
+      "grounded",
+      resolvedConfig.spacing,
+      resolvedConfig.radius,
+      resolvedConfig.typography,
+      resolvedConfig.icons,
+      resolvedConfig.themeMappings
+    );
+    const sunkenTokens = newtoneApi.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__default.default.createElement(
     reactNative.View,
@@ -791,17 +844,17 @@ function Page({
       testID,
       nativeID,
       accessibilityRole: "none",
-      style: [styles.root, ...userStyles]
+      style: [baseStyles.root, { backgroundColor: dividerBg, gap: 1 }, ...userStyles]
     },
-    navbar,
-    sidebar ? /* @__PURE__ */ React19__default.default.createElement(reactNative.View, { style: styles.body }, sidebar, /* @__PURE__ */ React19__default.default.createElement(reactNative.View, { style: styles.content }, children)) : children
+    navHeader || navContent || navFooter ? /* @__PURE__ */ React19__default.default.createElement(reactNative.View, { style: [baseStyles.navigation, { backgroundColor: dividerBg, gap: 1 }] }, navHeader ? /* @__PURE__ */ React19__default.default.createElement(reactNative.View, { style: [baseStyles.navHeader, { backgroundColor: sunkenBg }] }, navHeader) : null, /* @__PURE__ */ React19__default.default.createElement(reactNative.View, { style: { flex: 1, backgroundColor: sunkenBg, overflow: "hidden" } }, navContent), navFooter ? /* @__PURE__ */ React19__default.default.createElement(reactNative.View, { style: [baseStyles.navFooter, { backgroundColor: sunkenBg }] }, navFooter) : null) : null,
+    /* @__PURE__ */ React19__default.default.createElement(reactNative.View, { style: [baseStyles.content, { backgroundColor: dividerBg, gap: 1 }] }, header ? /* @__PURE__ */ React19__default.default.createElement(reactNative.View, { style: [baseStyles.header, { backgroundColor: groundedBg }] }, header) : null, /* @__PURE__ */ React19__default.default.createElement(reactNative.View, { style: { flex: 1, backgroundColor: groundedBg, overflow: "hidden" } }, children), footer ? /* @__PURE__ */ React19__default.default.createElement(reactNative.View, { style: [baseStyles.footer, { backgroundColor: groundedBg }] }, footer) : null)
   );
   if (schemeThemeCtx) {
     return /* @__PURE__ */ React19__default.default.createElement(newtoneApi._ThemeContext.Provider, { value: schemeThemeCtx }, content);
   }
   return content;
 }
-var styles2 = reactNative.StyleSheet.create({
+var styles = reactNative.StyleSheet.create({
   root: {
     flex: 1
   },
@@ -823,8 +876,8 @@ function Viewport({
       ref,
       testID,
       nativeID,
-      style: styles2.root,
-      contentContainerStyle: [styles2.content, ...userStyles]
+      style: styles.root,
+      contentContainerStyle: [styles.content, ...userStyles]
     },
     children
   );
@@ -1782,9 +1835,6 @@ function ContentCard({
     {
       elevation: variant === "elevated" ? 2 : void 0,
       appearance: variant === "elevated" ? "tinted" : void 0,
-      href,
-      onPress,
-      disabled,
       padding,
       gap,
       style: [
@@ -3055,49 +3105,27 @@ function AppShell({ sidebar, children }) {
   );
   return /* @__PURE__ */ React19__default.default.createElement(reactNative.View, { style: styles3.container }, sidebar, /* @__PURE__ */ React19__default.default.createElement(reactNative.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 reactNative.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 = reactNative.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 = newtoneApi.useTokens();
-  const frameCtx = newtoneApi.useFrameContext();
-  const styles3 = React19__default.default.useMemo(
-    () => getSidebarStyles({ tokens, width, bordered, theme: frameCtx?.theme, appearance: frameCtx?.appearance }),
-    [tokens, width, bordered, frameCtx?.theme, frameCtx?.appearance]
-  );
-  return /* @__PURE__ */ React19__default.default.createElement(reactNative.View, { style: styles3.container }, header && /* @__PURE__ */ React19__default.default.createElement(reactNative.View, { style: styles3.header }, header), /* @__PURE__ */ React19__default.default.createElement(reactNative.ScrollView, { style: styles3.body }, children), footer && /* @__PURE__ */ React19__default.default.createElement(reactNative.View, { style: styles3.footer }, footer));
+  return /* @__PURE__ */ React19__default.default.createElement(reactNative.View, { style: styles2.container }, /* @__PURE__ */ React19__default.default.createElement(reactNative.ScrollView, { style: styles2.body, contentContainerStyle: styles2.bodyContent }, children), footer && /* @__PURE__ */ React19__default.default.createElement(reactNative.View, { style: styles2.footer }, footer));
 }
 function getNavbarStyles({ tokens, height, bordered, theme = "primary", appearance = "main" }) {
   const at = tokens.colors[theme][appearance];