react-native-global-styler/src/styles/types/base/LayoutStyles.ts

Lightweight and developer-friendly React Native styling toolkit with prebuilt styled components and a powerful useGlobalStyler hook for shorthand props like m_10, radius_12, resize_cover, and more.

import Nums from "./Nums";
import Sides from "./Sides";

const LMatcher = {
    'relative': {key: 'position', value: 'relative'},
    'absolute': {key: 'position', value: 'absolute'},
}

export const LayoutMatcher = {
    ...LMatcher,
}

type SidedPadding<S extends string, N extends number> = `m${S}_${N}`;
type SidedMargin<S extends string, N extends number> = `p${S}_${N}`;

type LayoutStyles = {
    [N in Nums as `top_${N}`]?: boolean
} & {
    [N in Nums as `bottom_${N}`]?: boolean
} & {
    [N in Nums as `left_${N}`]?: boolean
} & {
    [N in Nums as `right_${N}`]?: boolean
} & {
    [N in Nums as `width_${N}`]?: boolean
} & {
    [N in Nums as `height_${N}`]?: boolean
} & {
    [N in Nums as `opacity_${N}`]?: boolean
} & {
    [N in Nums as `zIndex_${N}`]?: boolean
} & {
    [N in Nums as `m_${N}`]?: boolean
} & {
    [N in Nums as `p_${N}`]?: boolean
} & {
    [N in Nums as `gap_${N}`]?: boolean
} & {
    [SP in SidedPadding<Sides,Nums>]?: boolean
} & {
    [SM in SidedMargin<Sides,Nums>]?: boolean
} & {
    absolute: boolean,
    relative: boolean,
}

export default LayoutStyles;