@swan-io/lake 1.0.0

package/src/components/StepDots.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type Props<T extends string> = {
+    steps: T[];
+    currentStep: T;
+};
+export declare const StepDots: <T extends string>({ steps, currentStep }: Props<T>) => JSX.Element;
+export {};

package/src/components/StepDots.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { StyleSheet, View } from "react-native";
+import { colors } from "../constants/design";
+import { Box } from "./Box";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    dot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: colors.gray[200],
+    },
+    dotActive: {
+        backgroundColor: colors.gray[500],
+    },
+});
+export const StepDots = ({ steps, currentStep }) => {
+    return (_jsx(Box, { direction: "row", alignItems: "center", justifyContent: "center", children: steps.map((step, index) => {
+            const isCurrent = step === currentStep;
+            const isLast = index === steps.length - 1;
+            return (_jsxs(Fragment, { children: [_jsx(View, { style: [styles.dot, isCurrent && styles.dotActive] }), !isLast && _jsx(Space, { width: 12 })] }, step));
+        }) }));
+};

package/src/components/Stepper.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type Props = {
+    steps: {
+        label: string;
+    }[];
+    activeStep: number;
+};
+export declare const Stepper: ({ steps, activeStep }: Props) => JSX.Element;
+export {};

package/src/components/Stepper.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { StyleSheet, View } from "react-native";
+import { colors, spacings } from "../constants/design";
+import { Box } from "./Box";
+import { Icon } from "./Icon";
+import { LakeHeading } from "./LakeHeading";
+import { LakeText } from "./LakeText";
+const styles = StyleSheet.create({
+    container: {
+        paddingBottom: spacings[24],
+    },
+    circle: {
+        width: spacings[32],
+        height: spacings[32],
+        borderColor: colors.gray[100],
+        borderWidth: 1,
+        borderRadius: 16,
+        color: colors.gray[400],
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    activeCircle: {
+        width: spacings[32],
+        height: spacings[32],
+        borderColor: colors.current[500],
+        backgroundColor: colors.current[500],
+        borderWidth: 1,
+        borderRadius: 16,
+        color: colors.current.contrast,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    counter: {
+        lineHeight: 0.8,
+    },
+    item: {
+        paddingHorizontal: spacings[12],
+    },
+    textContainer: {
+        position: "absolute",
+        top: "100%",
+        left: "50%",
+        transform: [{ translateX: "-50%" }, { translateY: 5 }],
+    },
+    text: {
+        whiteSpace: "nowrap",
+    },
+    separator: {
+        height: spacings[4],
+        borderRadius: 2,
+        backgroundColor: colors.gray[100],
+        flexGrow: 1,
+    },
+    doneSeparator: {
+        backgroundColor: colors.current[500],
+    },
+});
+export const Stepper = ({ steps, activeStep }) => {
+    return (_jsx(Box, { direction: "row", alignItems: "center", style: styles.container, children: steps.map((item, index) => {
+            const isActive = index === activeStep;
+            const isDone = index < activeStep;
+            const color = isActive || isDone ? colors.current.contrast : colors.gray[300];
+            const textColor = isActive || isDone ? colors.current[500] : colors.gray[300];
+            return (_jsxs(Fragment, { children: [index > 0 ? (_jsx(View, { style: [styles.separator, (isActive || isDone) && styles.doneSeparator] })) : null, _jsxs(View, { style: styles.item, children: [_jsx(View, { style: isActive || isDone ? styles.activeCircle : styles.circle, children: isDone ? (_jsx(Icon, { size: 20, name: "checkmark-filled", color: color })) : (_jsx(LakeHeading, { level: 3, variant: "h3", color: color, style: styles.counter, children: String(index + 1) })) }), _jsx(View, { style: styles.textContainer, children: _jsx(LakeText, { style: styles.text, color: textColor, variant: isDone || isActive ? "semibold" : "regular", children: item.label }) })] })] }, index));
+        }) }));
+};

package/src/components/SuccessIcon.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { StyleProp, ViewStyle } from "react-native";
+type Props = {
+    size: number;
+    style?: StyleProp<ViewStyle>;
+};
+export declare const SuccessIcon: ({ size, style }: Props) => JSX.Element;
+export {};

package/src/components/SuccessIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { colors } from "../constants/colors";
+import { Path, Svg } from "./Svg";
+export const SuccessIcon = ({ size, style }) => (_jsx(Svg, { viewBox: "0 0 24 24", style: [{ height: size, width: size }, style], children: _jsx(Path, { d: "M12 2a10 10 0 110 20 10 10 0 010-20zm3.22 6.97l-4.47 4.47-1.97-1.97a.75.75 0 00-1.06 1.06l2.5 2.5c.3.3.77.3 1.06 0l5-5a.75.75 0 10-1.06-1.06z", fill: colors.green[100] }) }));

package/src/components/Svg.d.ts

@@ -0,0 +1,145 @@
+import { ReactNode } from "react";
+import { ViewProps } from "react-native";
+type ChildrenProp = {
+    children?: ReactNode;
+};
+type FillRule = "evenodd" | "nonzero";
+type CommonProps = Pick<ViewProps, "accessibilityRole" | "focusable" | "nativeID" | "pointerEvents" | "style" | "testID"> & ChildrenProp;
+type SvgProps = CommonProps & {
+    height?: number;
+    title?: string;
+    viewBox?: string;
+    width?: number;
+};
+type CircleProps = CommonProps & {
+    fill?: string;
+    fillRule?: FillRule;
+    opacity?: number;
+    stroke?: string;
+    strokeWidth?: number;
+    cx?: number;
+    cy?: number;
+    r?: number;
+};
+type GProps = CommonProps & {
+    clipPath?: string;
+    fill?: string;
+    fillRule?: FillRule;
+    opacity?: number;
+    stroke?: string;
+    strokeWidth?: number;
+    transform?: string;
+    mask?: string;
+};
+type RadialGradientProps = CommonProps & {
+    id?: string;
+    cx?: string;
+    cy?: string;
+    fx?: string;
+    fy?: string;
+    r?: string;
+    gradientTransform?: string;
+};
+type ImageProps = CommonProps & {
+    x?: number;
+    y?: number;
+    width: number;
+    height: number;
+    xlinkHref: string;
+    preserveAspectRatio?: string;
+};
+type PathProps = CommonProps & {
+    d?: string;
+    fill?: string;
+    fillOpacity?: number;
+    fillRule?: "nonzero" | "evenodd";
+    opacity?: number;
+    stroke?: string;
+    strokeLinecap?: "round";
+    strokeLinejoin?: "round";
+    strokeWidth?: number;
+    transform?: string;
+    strokeDasharray?: string;
+    strokeDashoffset?: string;
+};
+type RectProps = CommonProps & {
+    x?: number;
+    y?: number;
+    fill?: string;
+    height?: number;
+    rx?: number;
+    width?: number;
+    strokeWidth?: number;
+    stroke?: string;
+    fillRule?: string;
+    strokeOpacity?: number;
+};
+type StopProps = CommonProps & {
+    offset?: string;
+    stopColor?: string;
+};
+type UseProps = CommonProps & {
+    xlinkHref?: string;
+};
+type AnimateProps = CommonProps & {
+    attributeName: string;
+    values: string;
+    dur: string;
+    begin: string;
+    repeatCount?: string;
+    fill?: string;
+};
+type LineProps = CommonProps & {
+    x1: string;
+    x2: string;
+    y1: string;
+    y2: string;
+    strokeLinecap?: "round";
+    strokeLinejoin?: "round";
+    strokeWidth?: number;
+    stroke?: string;
+};
+type TextProps = CommonProps & {
+    fontFamily?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    fill?: string;
+    transform?: string;
+};
+type TspanProps = CommonProps & {
+    x?: number;
+    y?: number;
+};
+export declare const Svg: ({ style, ...props }: SvgProps) => import("react").ReactElement<{
+    style: (import("react-native").StyleProp<import("react-native").ViewStyle> | {
+        display: "flex";
+        flexBasis: string;
+        flexGrow: number;
+        flexShrink: number;
+    })[];
+    testID?: string | undefined;
+    pointerEvents?: "auto" | "none" | "box-none" | "box-only" | undefined;
+    nativeID?: string | undefined;
+    accessibilityRole?: import("react-native").WebAccessibilityRole | undefined;
+    focusable?: boolean | undefined;
+    children?: ReactNode;
+    height?: number | undefined;
+    title?: string | undefined;
+    viewBox?: string | undefined;
+    width?: number | undefined;
+}, string | import("react").JSXElementConstructor<any>>;
+export declare const Circle: (props: CircleProps) => import("react").ReactElement<CircleProps, string | import("react").JSXElementConstructor<any>>;
+export declare const Defs: (props: ChildrenProp) => import("react").ReactElement<ChildrenProp, string | import("react").JSXElementConstructor<any>>;
+export declare const G: (props: GProps) => import("react").ReactElement<GProps, string | import("react").JSXElementConstructor<any>>;
+export declare const Use: (props: UseProps) => import("react").ReactElement<UseProps, string | import("react").JSXElementConstructor<any>>;
+export declare const Mask: (props: CommonProps) => import("react").ReactElement<CommonProps, string | import("react").JSXElementConstructor<any>>;
+export declare const Text: (props: TextProps) => import("react").ReactElement<TextProps, string | import("react").JSXElementConstructor<any>>;
+export declare const Tspan: (props: TspanProps) => import("react").ReactElement<TspanProps, string | import("react").JSXElementConstructor<any>>;
+export declare const Image: (props: ImageProps) => import("react").ReactElement<ImageProps, string | import("react").JSXElementConstructor<any>>;
+export declare const RadialGradient: (props: RadialGradientProps) => import("react").ReactElement<RadialGradientProps, string | import("react").JSXElementConstructor<any>>;
+export declare const Path: (props: PathProps) => import("react").ReactElement<PathProps, string | import("react").JSXElementConstructor<any>>;
+export declare const Line: (props: LineProps) => import("react").ReactElement<LineProps, string | import("react").JSXElementConstructor<any>>;
+export declare const Rect: (props: RectProps) => import("react").ReactElement<RectProps, string | import("react").JSXElementConstructor<any>>;
+export declare const Stop: (props: StopProps) => import("react").ReactElement<StopProps, string | import("react").JSXElementConstructor<any>>;
+export declare const Animate: (props: AnimateProps) => import("react").ReactElement<AnimateProps, string | import("react").JSXElementConstructor<any>>;
+export {};

package/src/components/Svg.js

@@ -0,0 +1,24 @@
+import { StyleSheet, unstable_createElement as createElement } from "react-native";
+const styles = StyleSheet.create({
+    svg: {
+        display: "flex",
+        flexBasis: "auto",
+        flexGrow: 0,
+        flexShrink: 0,
+    },
+});
+export const Svg = ({ style, ...props }) => createElement("svg", { ...props, style: [styles.svg, style] });
+export const Circle = (props) => createElement("circle", props);
+export const Defs = (props) => createElement("defs", props);
+export const G = (props) => createElement("g", props);
+export const Use = (props) => createElement("use", props);
+export const Mask = (props) => createElement("mask", props);
+export const Text = (props) => createElement("text", props);
+export const Tspan = (props) => createElement("tspan", props);
+export const Image = (props) => createElement("image", props);
+export const RadialGradient = (props) => createElement("radialGradient", props);
+export const Path = (props) => createElement("path", props);
+export const Line = (props) => createElement("line", props);
+export const Rect = (props) => createElement("rect", props);
+export const Stop = (props) => createElement("stop", props);
+export const Animate = (props) => createElement("animate", props);

package/src/components/SwanLogo.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { StyleProp, ViewStyle } from "react-native";
+type Props = {
+    color?: string;
+    style?: StyleProp<ViewStyle>;
+};
+export declare const SwanLogo: ({ color, style }: Props) => JSX.Element;
+export {};

package/src/components/SwanLogo.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyleSheet } from "react-native";
+import { colors } from "../constants/colors";
+import { Path, Svg } from "./Svg";
+const styles = StyleSheet.create({
+    base: {
+        height: 10,
+        width: 45,
+    },
+});
+export const SwanLogo = ({ color = colors.gray[100], style }) => (_jsxs(Svg, { viewBox: "0 0 45 10", style: [styles.base, style], children: [_jsx("title", { children: "Swan" }), _jsx(Path, { d: "M41.01 0c2.2 0 3.66 1.6 3.66 3.82v5.95H42.9V3.9c0-1.28-1-2.19-2.23-2.19a2.33 2.33 0 00-2.37 2.4v5.65h-1.83V.27h1.83v.92A3.4 3.4 0 0141 0zM30.77 9.73H29.2c-2.65 0-4.53-2.27-4.53-4.86A4.81 4.81 0 0129.44 0c2.92 0 4.93 1.74 4.93 4.45v5.32h-1.71V4.45c0-1.72-1.2-2.76-3.22-2.76a3.11 3.11 0 00-3.06 3.18c0 1.72 1.2 3.17 2.82 3.17h1.57v1.7zm-14.37-7l-2.25 7.04h-2.1L9.07.27h1.96l2.11 7.16L15.45.27h1.9l2.3 7.16L21.76.27h1.96l-3 9.5h-2.1zM4.14 10C1.94 10 .54 8.82.36 6.93L.33 6.7h1.79l.02.18c.15.98.84 1.48 2.07 1.48s1.93-.54 1.93-1.38c0-.82-.5-1.1-2.15-1.42l-.43-.09C1.54 5.05.64 4.41.64 2.76.64 1.1 2.1 0 4.18 0 6.06 0 7.5 1.12 7.65 2.83l.02.23H5.9l-.02-.19c-.12-.79-.72-1.25-1.79-1.25-1.03 0-1.68.47-1.68 1.14 0 .68.47.92 1.99 1.2l.6.12c2 .4 2.93 1.1 2.93 2.83C7.93 8.76 6.4 10 4.14 10z", fill: color })] }));

package/src/components/Switch.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { View } from "react-native";
+type Props = {
+    value: boolean;
+    onValueChange?: (value: boolean) => void;
+    disabled?: boolean;
+};
+export declare const Switch: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<View>>>;
+export {};

package/src/components/Switch.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, memo, useEffect } from "react";
+import { Animated, Pressable, StyleSheet, View } from "react-native";
+import { backgroundColor, colors, shadows } from "../constants/design";
+import { useAnimatedValue } from "../hooks/useAnimatedValue";
+import { Icon } from "./Icon";
+const WIDTH = 36;
+const BUTTON_SIZE = 16;
+const PADDING = 2;
+const styles = StyleSheet.create({
+    base: {
+        backgroundColor: colors.gray[300],
+        borderRadius: 10,
+        height: 20,
+        width: WIDTH,
+        boxSizing: "content-box",
+        transitionProperty: "background-color",
+        transitionDuration: "300ms",
+        boxShadow: "inset 0 0 0 1px rgba(0, 0, 0, 0.2)",
+    },
+    active: {
+        backgroundColor: colors.positive[500],
+    },
+    disabled: {
+        opacity: 0.5,
+    },
+    opaque: {
+        opacity: 1,
+    },
+    button: {
+        alignItems: "center",
+        backgroundColor: backgroundColor.accented,
+        borderRadius: 8,
+        boxShadow: shadows.tile,
+        height: 16,
+        justifyContent: "center",
+        left: 0,
+        position: "absolute",
+        top: PADDING,
+        width: BUTTON_SIZE,
+    },
+    icon: {
+        opacity: 0,
+        transitionProperty: "opacity",
+        transitionDuration: "300ms",
+    },
+    shadow: {
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        borderRadius: 10,
+        boxShadow: shadows.tile,
+        opacity: 0,
+        transitionProperty: "opacity",
+        transitionDuration: "300ms",
+    },
+});
+export const Switch = memo(forwardRef(({ value, disabled = false, onValueChange }, ref) => {
+    const animatedValue = value ? 1 : 0;
+    const animation = useAnimatedValue(animatedValue);
+    useEffect(() => {
+        Animated.spring(animation, {
+            bounciness: 6,
+            speed: 25,
+            toValue: animatedValue,
+            useNativeDriver: false,
+        }).start();
+    }, [animation, animatedValue]);
+    const translateX = animation.interpolate({
+        inputRange: [0, 1],
+        outputRange: [PADDING, WIDTH - BUTTON_SIZE - PADDING],
+    });
+    return (_jsx(Pressable, { ref: ref, accessibilityRole: "switch", disabled: disabled, onPress: () => onValueChange?.(!value), children: ({ hovered }) => (_jsxs(_Fragment, { children: [_jsx(View, { style: [styles.shadow, hovered && styles.opaque] }), _jsx(View, { style: [styles.base, value && styles.active, disabled && styles.disabled], children: _jsx(Animated.View, { style: [styles.button, { transform: [{ translateX }] }], children: _jsx(Icon, { color: colors.positive[400], name: "checkmark-filled", size: 10, style: [styles.icon, value && styles.opaque] }) }) })] })) }));
+}));

package/src/components/TabView.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { IconName } from "@swan-io/lake/src/components/Icon";
+type Tab = {
+    label: string;
+    url: string;
+    icon?: IconName;
+    withSeparator?: boolean;
+    count?: number;
+};
+type Props = {
+    tabs: Tab[];
+    otherLabel: string;
+    hideIfSingleItem?: boolean;
+};
+export declare const TabView: ({ tabs, otherLabel, hideIfSingleItem }: Props) => JSX.Element | null;
+export {};