@cronocode/react-box 0.4.0 → 0.4.1

package/types.d.ts

@@ -1,3 +1,215 @@
 export declare type Hovered<T> = {
-    [K in keyof T as K extends string ? `${K}h` : never]: T[K];
+    [K in keyof T as K extends string ? `${K}H` : never]: T[K];
 };
+export declare type Focused<T> = {
+    [K in keyof T as K extends string ? `${K}F` : never]: T[K];
+};
+export declare type Activated<T> = {
+    [K in keyof T as K extends string ? `${K}A` : never]: T[K];
+};
+export declare const styleVariables: {
+    display: readonly ["none", "block", "inline-block", "flex", "inline-flex", "grid"];
+    boxSizing: readonly ["border-box", "content-box"];
+    position: readonly ["static", "relative", "absolute", "fixed", "sticky"];
+    sizeSpecialValues: readonly ["fit", "fit-screen", "auto", "fit-content", "max-content", "min-content"];
+    borderAndOutlineStyles: readonly ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"];
+    overflows: readonly ["auto", "hidden", "scroll", "visible"];
+    textDecoration: readonly ["none", "underline"];
+    textTransform: readonly ["none", "capitalize", "lowercase", "uppercase"];
+    textAlign: readonly ["left", "right", "center", "justify"];
+    opacity: readonly [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
+    cursors: readonly ["auto", "default", "none", "context-menu", "help", "pointer", "progress", "wait", "cell", "crosshair", "text", "vertical-text", "alias", "copy", "move", "no-drop", "not-allowed", "e-resize", "n-resize", "ne-resize", "nw-resize", "s-resize", "se-resize", "sw-resize", "w-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "col-resize", "row-resize", "all-scroll", "zoom-in", "zoom-out", "grab", "grabbing"];
+    sizes: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 62, 64, 66, 68, 70, 72, 74, 76, 78, 80, 82, 84, 86, 88, 90, 92, 94, 96, 98, 100];
+    sizeMultiplier: number;
+    baseColors: readonly ["none", "transparent", "black", "white", "primary", "primaryLight", "primaryDark", "secondary", "secondaryLight", "secondaryDark", "tertiary", "tertiaryLight", "tertiaryDark", "blue", "blueLight", "blueDark", "red", "redLight", "redDark", "purple", "purpleLight", "purpleDark", "yellow", "yellowLight", "yellowDark", "pink", "pinkLight", "pinkDark", "green", "greenLight", "greenDark", "orange", "orangeLight", "orangeDark", "navy", "navyLight", "navyDark", "teal", "tealLight", "tealDark", "violet", "violetLight", "violetDark", "gray", "grayLight", "grayDark", "brown", "brownLight", "brownDark", "orange", "orangeLight", "orangeDark"];
+    borderSizes: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    fontColors: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    bgColors: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    borderColors: readonly [1, 2, 3, 4, 5];
+    outlineColors: readonly [1, 2, 3, 4, 5];
+    backgrounds: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    shadows: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    fontSizes: readonly [6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 54, 58, 64, 70, 78, 86, 96];
+    fontWeight: readonly [100, 200, 300, 400, 500, 600, 700, 800, 900];
+    zIndexSizes: readonly [1, 2, 3, 4, 5, 10, 11, 12, 13, 14, 15, 100, 101, 102, 103, 104, 105, 1000, 1001, 1002, 1003, 1004, 1005];
+    justifyContent: readonly ["start", "end", "flex-start", "flex-end", "center", "left", "right", "space-between", "space-around", "space-evenly", "stretch"];
+    alignItems: readonly ["stretch", "flex-start", "flex-end", "center", "baseline", "start", "end", "self-start", "self-end"];
+    alignContent: readonly ["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly", "stretch", "start", "end", "baseline"];
+    flexDirection: readonly ["row", "row-reverse", "column", "column-reverse"];
+    gap: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    order: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
+    flexWrap: readonly ["nowrap", "wrap", "wrap-reverse"];
+    flexGrow: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    flexShrink: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+    flexSelf: readonly ["auto", "flex-start", "flex-end", "center", "baseline", "stretch"];
+    outlineOffset: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+};
+declare type GapType = typeof styleVariables.gap[number];
+declare type BoxSizeValue = typeof styleVariables.sizeSpecialValues[number];
+declare type BorderSizeType = typeof styleVariables.borderSizes[number];
+declare type SizeType = typeof styleVariables.sizes[number];
+declare type ColorType = typeof styleVariables.baseColors[number];
+declare type BaseFontColorType = typeof styleVariables.fontColors[number];
+declare type BaseBgColorType = typeof styleVariables.bgColors[number];
+declare type BaseBorderColorType = typeof styleVariables.borderColors[number];
+declare type BaseOutlineColorType = typeof styleVariables.outlineColors[number];
+declare type BackgroundType = typeof styleVariables.backgrounds[number];
+declare type ShadowType = typeof styleVariables.shadows[number];
+declare type CursorType = typeof styleVariables.cursors[number];
+declare type OverflowType = typeof styleVariables.overflows[number];
+declare type FontSizeType = typeof styleVariables.fontSizes[number];
+declare type FontWeightType = typeof styleVariables.fontWeight[number];
+declare type ZIndexSizeType = typeof styleVariables.zIndexSizes[number];
+declare type OpacitySizeType = typeof styleVariables.opacity[number];
+declare type TextDecorationType = typeof styleVariables.textDecoration[number];
+declare type TextTransformType = typeof styleVariables.textTransform[number];
+declare type TextAlignType = typeof styleVariables.textAlign[number];
+declare type BorderAndOutlineStyleType = typeof styleVariables.borderAndOutlineStyles[number];
+interface BoxPseudoClasses {
+    hover?: boolean;
+    focus?: boolean;
+}
+interface BoxDisplay {
+    display?: typeof styleVariables.display[number];
+    inline?: boolean;
+}
+interface BoxSizing {
+    boxSizing?: typeof styleVariables.boxSizing[number];
+}
+interface BoxPosition {
+    position?: typeof styleVariables.position[number];
+    inset?: SizeType;
+    top?: SizeType;
+    right?: SizeType;
+    bottom?: SizeType;
+    left?: SizeType;
+}
+interface BoxSize {
+    width?: BoxSizeValue;
+    height?: BoxSizeValue;
+    minWidth?: BoxSizeValue;
+    minHeight?: BoxSizeValue;
+    maxWidth?: BoxSizeValue;
+    maxHeight?: BoxSizeValue;
+}
+interface BoxMargin {
+    margin?: SizeType | 'auto';
+    m?: SizeType | 'auto';
+    marginHorizontal?: SizeType | 'auto';
+    mx?: SizeType | 'auto';
+    marginVertical?: SizeType | 'auto';
+    my?: SizeType | 'auto';
+    marginTop?: SizeType | 'auto';
+    mt?: SizeType | 'auto';
+    marginRight?: SizeType | 'auto';
+    mr?: SizeType | 'auto';
+    marginBottom?: SizeType | 'auto';
+    mb?: SizeType | 'auto';
+    marginLeft?: SizeType | 'auto';
+    ml?: SizeType | 'auto';
+}
+interface BoxPadding {
+    padding?: SizeType;
+    p?: SizeType;
+    paddingHorizontal?: SizeType;
+    px?: SizeType;
+    paddingVertical?: SizeType;
+    py?: SizeType;
+    paddingTop?: SizeType;
+    pt?: SizeType;
+    paddingRight?: SizeType;
+    pr?: SizeType;
+    paddingBottom?: SizeType;
+    pb?: SizeType;
+    paddingLeft?: SizeType;
+    pl?: SizeType;
+}
+interface BoxOutline {
+    outline?: BorderSizeType;
+    outlineStyle?: BorderAndOutlineStyleType;
+    outlineOffset?: typeof styleVariables.outlineOffset[number];
+}
+interface BoxBorder {
+    border?: BorderSizeType;
+    b?: BorderSizeType;
+    borderHorizontal?: BorderSizeType;
+    bx?: BorderSizeType;
+    borderVertical?: BorderSizeType;
+    by?: BorderSizeType;
+    borderTop?: BorderSizeType;
+    bt?: BorderSizeType;
+    borderRight?: BorderSizeType;
+    br?: BorderSizeType;
+    borderBottom?: BorderSizeType;
+    bb?: BorderSizeType;
+    borderLeft?: BorderSizeType;
+    bl?: BorderSizeType;
+    borderStyle?: BorderAndOutlineStyleType;
+    borderRadius?: SizeType;
+    borderRadiusTop?: SizeType;
+    borderRadiusRight?: SizeType;
+    borderRadiusBottom?: SizeType;
+    borderRadiusLeft?: SizeType;
+    borderRadiusTopLeft?: SizeType;
+    borderRadiusTopRight?: SizeType;
+    borderRadiusBottomLeft?: SizeType;
+    borderRadiusBottomRight?: SizeType;
+}
+interface BoxShadow {
+    shadow?: ShadowType;
+}
+interface BoxBackground {
+    background?: BackgroundType;
+    bg?: BackgroundType;
+}
+interface BoxColors {
+    color?: ColorType | BaseFontColorType;
+    backgroundColor?: ColorType | BaseBgColorType;
+    bgColor?: ColorType | BaseBgColorType;
+    borderColor?: ColorType | BaseBorderColorType;
+    outlineColor?: ColorType | BaseOutlineColorType;
+}
+interface BoxCursor {
+    cursor?: CursorType;
+}
+interface BoxZIndex {
+    zIndex?: ZIndexSizeType;
+}
+interface BoxOverflow {
+    overflow?: OverflowType;
+    overflowX?: OverflowType;
+    overflowY?: OverflowType;
+}
+interface BoxOpacity {
+    opacity?: OpacitySizeType;
+}
+interface BoxFont {
+    fontSize?: FontSizeType;
+    lineHeight?: FontSizeType;
+    fontWeight?: FontWeightType;
+    letterSpacing?: SizeType;
+}
+interface BoxText {
+    textDecoration?: TextDecorationType;
+    textTransform?: TextTransformType;
+    textAlign?: TextAlignType;
+}
+interface BoxFlex {
+    flexWrap?: typeof styleVariables.flexWrap[number];
+    justifyContent?: typeof styleVariables.justifyContent[number];
+    alignItems?: typeof styleVariables.alignItems[number];
+    alignContent?: typeof styleVariables.alignContent[number];
+    flex1?: boolean;
+    flexDirection?: typeof styleVariables.flexDirection[number];
+    gap?: GapType;
+    rowGap?: GapType;
+    columnGap?: GapType;
+    order?: typeof styleVariables.order[number];
+    flexGrow?: typeof styleVariables.flexGrow[number];
+    flexShrink?: typeof styleVariables.flexShrink[number];
+    alignSelf?: typeof styleVariables.flexSelf[number];
+    justifySelf?: typeof styleVariables.flexSelf[number];
+}
+declare type BoxNormalStyles = BoxPseudoClasses & BoxDisplay & BoxSizing & BoxPosition & BoxSize & BoxMargin & BoxPadding & BoxBorder & BoxShadow & BoxBackground & BoxColors & BoxCursor & BoxZIndex & BoxOverflow & BoxOpacity & BoxFont & BoxText & BoxFlex & BoxOutline;
+export declare type BoxStyles = BoxNormalStyles & Hovered<BoxNormalStyles> & Focused<BoxNormalStyles> & Activated<BoxNormalStyles>;
+export {};

package/css.variables.d.ts

@@ -1,26 +0,0 @@
-declare const variables: {
-    sizes: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 62, 64, 66, 68, 70, 72, 74, 76, 78, 80, 82, 84, 86, 88, 90, 92, 94, 96, 98, 100];
-    sizeMultiplier: number;
-    colors: readonly ["none", "transparent", "black", "white", "primary", "primaryLight", "primaryDark", "secondary", "secondaryLight", "secondaryDark", "tertiary", "tertiaryLight", "tertiaryDark", "blue", "blueLight", "blueDark", "red", "redLight", "redDark", "purple", "purpleLight", "purpleDark", "yellow", "yellowLight", "yellowDark", "pink", "pinkLight", "pinkDark", "green", "greenLight", "greenDark", "orange", "orangeLight", "orangeDark", "navy", "navyLight", "navyDark", "teal", "tealLight", "tealDark", "violet", "violetLight", "violetDark", "gray", "grayLight", "grayDark", "brown", "brownLight", "brownDark", "orange", "orangeLight", "orangeDark"];
-    fontColors: readonly ["color1", "color2", "color3", "color4", "color5", "color6", "color7", "color8", "color9", "color10"];
-    bgColors: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-    borderColors: readonly [1, 2, 3, 4, 5];
-    outlineColors: readonly [1, 2, 3, 4, 5];
-    backgrounds: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-    shadows: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
-    cursors: readonly ["auto", "default", "none", "context-menu", "help", "pointer", "progress", "wait", "cell", "crosshair", "text", "vertical-text", "alias", "copy", "move", "no-drop", "not-allowed", "e-resize", "n-resize", "ne-resize", "nw-resize", "s-resize", "se-resize", "sw-resize", "w-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "col-resize", "row-resize", "all-scroll", "zoom-in", "zoom-out", "grab", "grabbing"];
-    fontSizes: readonly [6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 54, 58, 64, 70, 78, 86, 96];
-    borderAndOutlineStyles: readonly ["solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset", "none", "hidden"];
-};
-export declare type SizeType = typeof variables.sizes[number];
-export declare type ColorType = typeof variables.colors[number];
-export declare type BaseFontColorType = typeof variables.fontColors[number];
-export declare type BaseBgColorType = typeof variables.bgColors[number];
-export declare type BaseBorderColorType = typeof variables.borderColors[number];
-export declare type BaseOutlineColorType = typeof variables.outlineColors[number];
-export declare type BackgroundType = typeof variables.backgrounds[number];
-export declare type ShadowType = typeof variables.shadows[number];
-export declare type CursorType = typeof variables.cursors[number];
-export declare type FontSizeType = typeof variables.fontSizes[number];
-export declare type BorderAndOutlineStyleType = typeof variables.borderAndOutlineStyles[number];
-export default variables;