@swan-io/lake 2.7.31 → 2.7.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "2.7.31",
+  "version": "2.7.32",
   "engines": {
     "node": ">=18.0.0",
     "yarn": "^1.22.0"

package/src/components/Separator.d.ts

@@ -1,9 +1,13 @@
+import { ReactNode } from "react";
 import { StyleProp, ViewStyle } from "react-native";
 import { SpacingValue } from "./Space";
-type Props = {
+type LineProps = {
     horizontal?: boolean;
     space?: SpacingValue;
     style?: StyleProp<ViewStyle>;
 };
-export declare const Separator: ({ horizontal, space, style }: Props) => import("react/jsx-runtime").JSX.Element;
+type Props = LineProps & {
+    children?: ReactNode;
+};
+export declare const Separator: ({ horizontal, space, style, children }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/Separator.js

@@ -1,7 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { StyleSheet, View } from "react-native";
+import { commonStyles } from "../constants/commonStyles";
 import { colors } from "../constants/design";
-import { isNotNullish } from "../utils/nullish";
+import { isNotNullish, isNullishOrEmpty } from "../utils/nullish";
+import { LakeText } from "./LakeText";
+import { Space } from "./Space";
 const styles = StyleSheet.create({
     horizontal: {
         backgroundColor: colors.gray[100],
@@ -13,7 +16,23 @@ const styles = StyleSheet.create({
         height: 1,
         alignSelf: "stretch",
     },
+    horizontalContainer: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+    },
+    verticalContainer: {
+        display: "flex",
+        flexDirection: "row",
+        width: "100%",
+    },
 });
-export const Separator = ({ horizontal = false, space, style }) => (_jsx(View, { role: "none", style: horizontal
+const Line = ({ horizontal = false, style, space }) => (_jsx(View, { role: "none", style: horizontal
         ? [styles.horizontal, isNotNullish(space) && { marginHorizontal: space }, style]
         : [styles.vertical, isNotNullish(space) && { marginVertical: space }, style] }));
+export const Separator = ({ horizontal = false, space, style, children }) => {
+    if (isNullishOrEmpty(children)) {
+        return _jsx(Line, { horizontal: horizontal, space: space, style: style });
+    }
+    return (_jsxs(View, { style: horizontal ? styles.horizontalContainer : styles.verticalContainer, children: [_jsx(Line, { horizontal: horizontal, space: space, style: [style, commonStyles.fill] }), _jsx(Space, { width: 12 }), _jsx(LakeText, { align: "center", style: !horizontal && { lineHeight: 2 * (space ?? 0) }, children: children }), _jsx(Space, { width: 12 }), _jsx(Line, { horizontal: horizontal, space: space, style: [style, commonStyles.fill] })] }));
+};