ncore-ui-kit/src/components/dateSelector/stylesheet.ts

import {
    StyleSheet,
    type TextStyle,
    type ViewStyle
} from "react-native";
import type {
    DateSelectorDynamicStyle
} from "./type";
import type {
    Mutable
} from "../../types";

const stylesheet = StyleSheet.create({
    container: {
        flex: 1
    },
    contentContainer: {
        justifyContent: "space-between",
        flexDirection: "row",
        alignItems: "center",
        flexShrink: 1,
        flex: 1
    },
    columnContainer: {
        justifyContent: "center",
        flexDirection: "column",
        alignItems: "center",
        flexShrink: 1,
        flex: 1
    },
    day: {
        justifyContent: "center",
        alignItems: "center",
        position: "relative",
        flexShrink: 1,
        width: "100%",
        flex: 1
    },
    todayIndicator: {
        position: "absolute",
        zIndex: 999
    },
    nextPrevToolContainer: {
        justifyContent: "space-between",
        flexDirection: "row",
        alignItems: "center",
        flex: 1
    }
});

export const useStyles = ({
    radiuses,
    borders,
    spaces,
    colors
}: DateSelectorDynamicStyle) => {
    const styles = {
        dayOfWeek: {
            marginBottom: spaces.spacingMd
        } as Mutable<TextStyle>,
        day: {
            borderBottomRightRadius: radiuses.full,
            borderBottomLeftRadius: radiuses.full,
            borderTopRightRadius: radiuses.full,
            borderTopLeftRadius: radiuses.full,
            borderColor: "transparent",
            borderWidth: borders.line,
            padding: spaces.spacingSm
        } as Mutable<ViewStyle>,
        todayIndicator: {
            borderColor: colors.content.border.default,
            borderBottomRightRadius: radiuses.full,
            borderBottomLeftRadius: radiuses.full,
            borderTopRightRadius: radiuses.full,
            borderTopLeftRadius: radiuses.full,
            borderWidth: borders.line,
            bottom: spaces.spacingXs,
            right: spaces.spacingXs,
            left: spaces.spacingXs,
            top: spaces.spacingXs
        } as Mutable<ViewStyle>,
        nextPrevToolContainer: {
            marginBottom: spaces.spacingMd
        } as Mutable<ViewStyle>,
        nextPrevToolChevronButton: {
            padding: spaces.spacingSm
        } as Mutable<ViewStyle>
    };

    return styles;
};
export default stylesheet;