@pyreon/unistyle 0.0.2

package/lib/index.d.ts

@@ -0,0 +1,499 @@
+import { config, context } from "@pyreon/ui-core";
+import { VNode } from "@pyreon/core";
+
+//#region src/context.d.ts
+type Theme$2 = {
+  rootSize: number;
+  breakpoints?: Record<string, number>;
+  __PYREON__?: never;
+} & Partial<Record<string, unknown>>;
+type TProvider = {
+  theme: Theme$2;
+  children?: VNode | null;
+};
+/**
+ * Unistyle Provider — wraps the core Provider and enriches the theme
+ * with pre-computed sorted breakpoints and media-query tagged-template
+ * helpers consumed by `makeItResponsive`.
+ */
+declare function Provider(props: TProvider): VNode | null;
+//#endregion
+//#region src/responsive/breakpoints.d.ts
+declare const breakpoints$1: {
+  readonly rootSize: 16;
+  readonly breakpoints: {
+    readonly xs: 0;
+    readonly sm: 576;
+    readonly md: 768;
+    readonly lg: 992;
+    readonly xl: 1200;
+    readonly xxl: 1440;
+  };
+};
+type Breakpoints = typeof breakpoints$1;
+//#endregion
+//#region src/responsive/createMediaQueries.d.ts
+type Css$2 = (strings: TemplateStringsArray, ...values: any[]) => any;
+type CreateMediaQueries = <B extends Record<string, number>, R extends number, C extends Css$2>(props: {
+  breakpoints: B;
+  rootSize: R;
+  css: C;
+}) => Record<keyof B, (...args: any[]) => string>;
+declare const createMediaQueries: CreateMediaQueries;
+//#endregion
+//#region src/responsive/sortBreakpoints.d.ts
+type SortBreakpoints = <T extends Record<string, number>>(breakpoints: T) => (keyof T)[];
+declare const sortBreakpoints: SortBreakpoints;
+//#endregion
+//#region src/responsive/makeItResponsive.d.ts
+type Css$1 = (strings: TemplateStringsArray, ...values: any[]) => any;
+type CustomTheme = Record<string, Record<string, unknown> | number | string | boolean>;
+type Theme$1 = Partial<{
+  rootSize: number;
+  breakpoints: Record<string, number>;
+  __PYREON__: Partial<{
+    media: ReturnType<typeof createMediaQueries>;
+    sortedBreakpoints: ReturnType<typeof sortBreakpoints>;
+  }>;
+}> & CustomTheme;
+type MakeItResponsiveStyles<T extends Partial<Record<string, any>> = any> = ({
+  theme,
+  css,
+  rootSize,
+  globalTheme
+}: {
+  theme: T;
+  css: Css$1;
+  rootSize?: number | undefined;
+  globalTheme?: Record<string, any> | undefined;
+}) => ReturnType<typeof css> | string | any;
+type MakeItResponsive = ({
+  theme,
+  key,
+  css,
+  styles,
+  normalize
+}: {
+  theme?: CustomTheme;
+  key?: string;
+  css: any;
+  styles: MakeItResponsiveStyles;
+  normalize?: boolean;
+}) => (props: {
+  theme?: Theme$1;
+  [prop: string]: any;
+}) => any;
+declare const makeItResponsive: MakeItResponsive;
+//#endregion
+//#region src/responsive/normalizeTheme.d.ts
+type NormalizeTheme = ({
+  theme,
+  breakpoints
+}: {
+  theme: Record<string, unknown>;
+  breakpoints: string[];
+}) => Record<string, unknown>;
+declare const normalizeTheme: NormalizeTheme;
+//#endregion
+//#region src/responsive/transformTheme.d.ts
+type TransformTheme = ({
+  theme,
+  breakpoints
+}: {
+  theme: Record<string, unknown>;
+  breakpoints: string[];
+}) => any;
+declare const transformTheme: TransformTheme;
+//#endregion
+//#region src/styles/alignContent.d.ts
+type AlignContentDirectionKeys = keyof typeof ALIGN_CONTENT_DIRECTION;
+type AlignContentAlignXKeys = keyof typeof ALIGN_CONTENT_MAP_X;
+type AlignContentAlignYKeys = keyof typeof ALIGN_CONTENT_MAP_Y;
+declare const ALIGN_CONTENT_MAP_X: {
+  readonly center: string;
+  readonly spaceBetween: string;
+  readonly spaceAround: string;
+  readonly block: string;
+  readonly left: "flex-start";
+  readonly right: "flex-end";
+};
+declare const ALIGN_CONTENT_MAP_Y: {
+  readonly center: string;
+  readonly spaceBetween: string;
+  readonly spaceAround: string;
+  readonly block: string;
+  readonly top: "flex-start";
+  readonly bottom: "flex-end";
+};
+declare const ALIGN_CONTENT_DIRECTION: {
+  readonly inline: "row";
+  readonly reverseInline: "row-reverse";
+  readonly rows: "column";
+  readonly reverseRows: "column-reverse";
+};
+type AlignContent = ({
+  direction,
+  alignX,
+  alignY
+}: {
+  direction: AlignContentDirectionKeys;
+  alignX: AlignContentAlignXKeys;
+  alignY: AlignContentAlignYKeys;
+}) => string | null;
+declare const alignContent: AlignContent;
+//#endregion
+//#region src/styles/extendCss.d.ts
+type ExtendCss = (styles: ((css: (strings: TemplateStringsArray, ...values: any[]) => string) => string) | string | null | undefined) => string;
+declare const extendCss: ExtendCss;
+//#endregion
+//#region src/styles/styles/types.d.ts
+type PropertyValue$1 = string | number | null | undefined;
+type Color$1 = string | null | undefined;
+interface ITheme {
+  fullScreen?: boolean;
+  hideEmpty?: boolean;
+  clearFix?: boolean;
+  extendCss?: string | ((css: (...args: any[]) => string) => string);
+  all?: string;
+  display?: string;
+  position?: string;
+  boxSizing?: string;
+  float?: string;
+  inset?: PropertyValue$1;
+  insetX?: PropertyValue$1;
+  insetY?: PropertyValue$1;
+  top?: PropertyValue$1;
+  left?: PropertyValue$1;
+  bottom?: PropertyValue$1;
+  right?: PropertyValue$1;
+  width?: PropertyValue$1;
+  minWidth?: PropertyValue$1;
+  maxWidth?: PropertyValue$1;
+  height?: PropertyValue$1;
+  minHeight?: PropertyValue$1;
+  maxHeight?: PropertyValue$1;
+  size?: PropertyValue$1;
+  minSize?: PropertyValue$1;
+  maxSize?: PropertyValue$1;
+  gap?: PropertyValue$1;
+  aspectRatio?: string;
+  contain?: string;
+  containerType?: string;
+  containerName?: string;
+  container?: string;
+  inlineSize?: PropertyValue$1;
+  blockSize?: PropertyValue$1;
+  minInlineSize?: PropertyValue$1;
+  minBlockSize?: PropertyValue$1;
+  maxInlineSize?: PropertyValue$1;
+  maxBlockSize?: PropertyValue$1;
+  margin?: PropertyValue$1;
+  marginX?: PropertyValue$1;
+  marginY?: PropertyValue$1;
+  marginTop?: PropertyValue$1;
+  marginLeft?: PropertyValue$1;
+  marginBottom?: PropertyValue$1;
+  marginRight?: PropertyValue$1;
+  padding?: PropertyValue$1;
+  paddingX?: PropertyValue$1;
+  paddingY?: PropertyValue$1;
+  paddingTop?: PropertyValue$1;
+  paddingLeft?: PropertyValue$1;
+  paddingBottom?: PropertyValue$1;
+  paddingRight?: PropertyValue$1;
+  marginInline?: PropertyValue$1;
+  marginInlineStart?: PropertyValue$1;
+  marginInlineEnd?: PropertyValue$1;
+  marginBlock?: PropertyValue$1;
+  marginBlockStart?: PropertyValue$1;
+  marginBlockEnd?: PropertyValue$1;
+  paddingInline?: PropertyValue$1;
+  paddingInlineStart?: PropertyValue$1;
+  paddingInlineEnd?: PropertyValue$1;
+  paddingBlock?: PropertyValue$1;
+  paddingBlockStart?: PropertyValue$1;
+  paddingBlockEnd?: PropertyValue$1;
+  insetInline?: PropertyValue$1;
+  insetInlineStart?: PropertyValue$1;
+  insetInlineEnd?: PropertyValue$1;
+  insetBlock?: PropertyValue$1;
+  insetBlockStart?: PropertyValue$1;
+  insetBlockEnd?: PropertyValue$1;
+  alignContent?: string;
+  alignItems?: string;
+  alignSelf?: string;
+  flex?: string | number;
+  flexBasis?: string | number;
+  flexDirection?: string;
+  flexFlow?: string;
+  flexGrow?: number;
+  flexShrink?: number;
+  flexWrap?: string;
+  justifyContent?: string;
+  justifyItems?: string;
+  justifySelf?: string;
+  placeItems?: string;
+  placeContent?: string;
+  placeSelf?: string;
+  rowGap?: PropertyValue$1;
+  columnGap?: PropertyValue$1;
+  grid?: string;
+  gridArea?: string;
+  gridAutoColumns?: PropertyValue$1;
+  gridAutoFlow?: string;
+  gridAutoRows?: PropertyValue$1;
+  gridColumn?: string;
+  gridColumnEnd?: string;
+  gridColumnGap?: PropertyValue$1;
+  gridColumnStart?: PropertyValue$1;
+  gridGap?: PropertyValue$1;
+  gridRow?: string;
+  gridRowStart?: string;
+  gridRowEnd?: string;
+  gridRowGap?: PropertyValue$1;
+  gridTemplate?: string;
+  gridTemplateAreas?: string;
+  gridTemplateColumns?: string;
+  gridTemplateRows?: string;
+  objectFit?: string;
+  objectPosition?: string;
+  order?: number;
+  opacity?: number | string;
+  resize?: string;
+  verticalAlign?: string;
+  lineHeight?: string | number;
+  font?: string;
+  fontFamily?: string;
+  fontSize?: PropertyValue$1;
+  fontSizeAdjust?: PropertyValue$1;
+  fontStretch?: PropertyValue$1;
+  fontStyle?: string;
+  fontVariant?: string;
+  fontWeight?: string | number;
+  fontKerning?: string;
+  fontFeatureSettings?: string;
+  fontVariationSettings?: string;
+  fontOpticalSizing?: string;
+  textAlign?: string;
+  textAlignLast?: string;
+  textTransform?: string;
+  textDecoration?: string;
+  textDecorationColor?: Color$1;
+  textDecorationLine?: string;
+  textDecorationStyle?: string;
+  textDecorationThickness?: string;
+  textUnderlineOffset?: string;
+  textEmphasis?: string;
+  textEmphasisColor?: Color$1;
+  textEmphasisStyle?: string;
+  letterSpacing?: string;
+  wordSpacing?: string;
+  textIndent?: string;
+  textJustify?: string;
+  textOverflow?: string;
+  textShadow?: string;
+  textWrap?: string;
+  textRendering?: string;
+  whiteSpace?: string;
+  wordBreak?: string;
+  wordWrap?: string;
+  writingMode?: string;
+  direction?: string;
+  hyphens?: string;
+  listStyle?: string;
+  listStyleImage?: string;
+  listStylePosition?: string;
+  listStyleType?: string;
+  color?: Color$1;
+  background?: string;
+  backgroundColor?: Color$1;
+  backgroundImage?: string;
+  backgroundAttachment?: string;
+  backgroundClip?: string;
+  backgroundOrigin?: string;
+  backgroundPosition?: string;
+  backgroundRepeat?: string;
+  backgroundSize?: string;
+  borderRadius?: PropertyValue$1;
+  borderRadiusTop?: PropertyValue$1;
+  borderRadiusBottom?: PropertyValue$1;
+  borderRadiusLeft?: PropertyValue$1;
+  borderRadiusRight?: PropertyValue$1;
+  borderRadiusTopLeft?: PropertyValue$1;
+  borderRadiusTopRight?: PropertyValue$1;
+  borderRadiusBottomLeft?: PropertyValue$1;
+  borderRadiusBottomRight?: PropertyValue$1;
+  border?: string;
+  borderTop?: string;
+  borderBottom?: string;
+  borderLeft?: string;
+  borderRight?: string;
+  borderWidth?: PropertyValue$1;
+  borderWidthX?: PropertyValue$1;
+  borderWidthY?: PropertyValue$1;
+  borderWidthTop?: PropertyValue$1;
+  borderWidthLeft?: PropertyValue$1;
+  borderWidthBottom?: PropertyValue$1;
+  borderWidthRight?: PropertyValue$1;
+  borderStyle?: string;
+  borderStyleX?: string;
+  borderStyleY?: string;
+  borderStyleTop?: string;
+  borderStyleLeft?: string;
+  borderStyleBottom?: string;
+  borderStyleRight?: string;
+  borderColor?: Color$1;
+  borderColorX?: Color$1;
+  borderColorY?: Color$1;
+  borderColorTop?: Color$1;
+  borderColorLeft?: Color$1;
+  borderColorBottom?: Color$1;
+  borderColorRight?: Color$1;
+  borderImage?: string;
+  borderImageOutset?: string;
+  borderImageRepeat?: string;
+  borderImageSlice?: string;
+  borderImageSource?: string;
+  borderImageWidth?: string;
+  borderSpacing?: string;
+  borderInline?: string;
+  borderBlock?: string;
+  borderInlineStart?: string;
+  borderInlineEnd?: string;
+  borderBlockStart?: string;
+  borderBlockEnd?: string;
+  backfaceVisibility?: string;
+  boxShadow?: string;
+  filter?: string;
+  backdropFilter?: string;
+  mixBlendMode?: string;
+  backgroundBlendMode?: string;
+  isolation?: string;
+  outline?: string;
+  outlineColor?: Color$1;
+  outlineOffset?: string;
+  outlineStyle?: string;
+  outlineWidth?: string;
+  keyframe?: string;
+  animation?: string;
+  animationName?: string;
+  animationDuration?: string;
+  animationTimingFunction?: string;
+  animationDelay?: string;
+  animationIterationCount?: string | number;
+  animationDirection?: string;
+  animationFillMode?: string;
+  animationPlayState?: string;
+  transition?: string;
+  transitionDelay?: string;
+  transitionDuration?: string;
+  transitionProperty?: string;
+  transitionTimingFunction?: string;
+  transform?: string;
+  transformOrigin?: string;
+  transformStyle?: string;
+  translate?: string;
+  rotate?: string;
+  scale?: string | number;
+  willChange?: string;
+  scrollBehavior?: string;
+  scrollSnapType?: string;
+  scrollSnapAlign?: string;
+  scrollSnapStop?: string;
+  scrollMargin?: string;
+  scrollPadding?: string;
+  overscrollBehavior?: string;
+  overscrollBehaviorX?: string;
+  overscrollBehaviorY?: string;
+  cursor?: string;
+  pointerEvents?: string;
+  userSelect?: string;
+  touchAction?: string;
+  scrollbarWidth?: string;
+  scrollbarColor?: string;
+  scrollbarGutter?: string;
+  caretColor?: Color$1;
+  accentColor?: Color$1;
+  colorScheme?: string;
+  captionSide?: string;
+  clear?: string;
+  clip?: string;
+  clipPath?: string;
+  content?: string;
+  contentVisibility?: string;
+  counterIncrement?: string;
+  counterReset?: string;
+  emptyCells?: string;
+  zIndex?: number | string;
+  overflow?: string;
+  overflowWrap?: string;
+  overflowX?: string;
+  overflowY?: string;
+  perspective?: string;
+  perspectiveOrigin?: string;
+  quotes?: string;
+  tabSize?: string | number;
+  tableLayout?: string;
+  visibility?: string;
+  appearance?: string;
+  imageRendering?: string;
+  maskImage?: string;
+  maskSize?: string;
+  maskPosition?: string;
+  maskRepeat?: string;
+  shapeOutside?: string;
+  shapeMargin?: string;
+  shapeImageThreshold?: string | number;
+  columnCount?: number | string;
+  columnWidth?: string;
+  columnRule?: string;
+  columns?: string;
+  breakBefore?: string;
+  breakAfter?: string;
+  breakInside?: string;
+  orphans?: number;
+  widows?: number;
+  printColorAdjust?: string;
+}
+type InnerTheme = { [K in keyof ITheme]?: ITheme[K] | null | undefined };
+type Theme = { [K in keyof InnerTheme]?: InnerTheme[K] | (() => ITheme[K]) };
+//#endregion
+//#region src/styles/styles/index.d.ts
+type Css = (strings: TemplateStringsArray, ...args: any[]) => string;
+type Styles = ({
+  theme,
+  css,
+  rootSize
+}: {
+  theme: InnerTheme;
+  css: Css;
+  rootSize?: number;
+}) => string;
+declare const styles$1: Styles;
+//#endregion
+//#region src/types.d.ts
+type Defaults = "initial" | "inherit";
+type Units = "px" | "rem" | "em" | "%" | "vh" | "vw" | "vmin" | "vmax" | "ex";
+type UnitValue = number | `${number}${Units}`;
+type PropertyValue = UnitValue | "auto" | Defaults | `calc(${string | number})`;
+type Color = `#${string | number}` | "currentColor" | "transparent" | `rgb(${number}, ${number}, ${number})` | `rgb(${number},${number},${number})` | `rgba(${number}, ${number}, ${number}, ${number})` | `rgba(${number},${number},${number},${number})` | `hsl(${number}, ${number}%, ${number}%)` | `hsl(${number},${number}%,${number}%)` | `hsla(${number}, ${number}%, ${number}%, ${number})` | `hsla(${number},${number}%,${number}%,${number})` | BrowserColors | Defaults;
+type BrowserColors = "black" | "silver" | "gray" | "white" | "maroon" | "red" | "purple" | "fuchsia" | "green" | "lime" | "olive" | "yellow" | "navy" | "blue" | "teal" | "aqua" | "orange" | "aliceblue" | "antiquewhite" | "aquamarine" | "azure" | "beige" | "bisque" | "blanchedalmond" | "blueviolet" | "brown" | "burlywood" | "cadetblue" | "chartreuse" | "chocolate" | "coral" | "cornflowerblue" | "cornsilk" | "crimson" | "cyan" | "darkblue" | "darkcyan" | "darkgoldenrod" | "darkgray" | "darkgreen" | "darkgrey" | "darkkhaki" | "darkmagenta" | "darkolivegreen" | "darkorange" | "darkorchid" | "darkred" | "darksalmon" | "darkseagreen" | "darkslateblue" | "darkslategray" | "darkslategrey" | "darkturquoise" | "darkviolet" | "deeppink" | "deepskyblue" | "dimgray" | "dimgrey" | "dodgerblue" | "firebrick" | "floralwhite" | "forestgreen" | "gainsboro" | "ghostwhite" | "gold" | "goldenrod" | "greenyellow" | "grey" | "honeydew" | "hotpink" | "indianred" | "indigo" | "ivory" | "khaki" | "lavender" | "lavenderblush" | "lawngreen" | "lemonchiffon" | "lightblue" | "lightcoral" | "lightcyan" | "lightgoldenrodyellow" | "lightgray" | "lightgreen" | "lightgrey" | "lightpink" | "lightsalmon" | "lightseagreen" | "lightskyblue" | "lightslategray" | "lightslategrey" | "lightsteelblue" | "lightyellow" | "limegreen" | "linen" | "magenta" | "mediumaquamarine" | "mediumblue" | "mediumorchid" | "mediumpurple" | "mediumseagreen" | "mediumslateblue" | "mediumspringgreen" | "mediumturquoise" | "mediumvioletred" | "midnightblue" | "mintcream" | "mistyrose" | "moccasin" | "navajowhite" | "oldlace" | "olivedrab" | "orangered" | "orchid" | "palegoldenrod" | "palegreen" | "paleturquoise" | "palevioletred" | "papayawhip" | "peachpuff" | "peru" | "pink" | "plum" | "powderblue" | "rosybrown" | "royalblue" | "saddlebrown" | "salmon" | "sandybrown" | "seagreen" | "seashell" | "sienna" | "skyblue" | "slateblue" | "slategray" | "slategrey" | "snow" | "springgreen" | "steelblue" | "tan" | "thistle" | "tomato" | "turquoise" | "violet" | "wheat" | "whitesmoke" | "yellowgreen" | "rebeccapurple";
+//#endregion
+//#region src/units/stripUnit.d.ts
+type Value$1<V> = V extends string ? number : V;
+type Unit<V> = V extends string ? string : undefined;
+type StripUnit = <V extends string | number, UR extends boolean = false>(value: V, unitReturn?: UR) => UR extends true ? [Value$1<V>, Unit<V>] : Value$1<V>;
+declare const stripUnit: StripUnit;
+//#endregion
+//#region src/units/value.d.ts
+type CssUnits$1 = "px" | "rem" | "%" | "em" | "ex" | "cm" | "mm" | "in" | "pt" | "pc" | "ch" | "vh" | "vw" | "vmin" | "vmax";
+type Value = (param: string | number | null | undefined, rootSize?: number, outputUnit?: CssUnits$1) => string | number | null;
+declare const value: Value;
+//#endregion
+//#region src/units/values.d.ts
+type CssUnits = "px" | "rem" | "%" | "em" | "ex" | "cm" | "mm" | "in" | "pt" | "pc" | "ch" | "vh" | "vw" | "vmin" | "vmax";
+type Values = (items: unknown[], rootSize?: number, outputUnit?: CssUnits) => string | number | null;
+declare const values: Values;
+//#endregion
+export { ALIGN_CONTENT_DIRECTION, ALIGN_CONTENT_MAP_X, ALIGN_CONTENT_MAP_Y, type AlignContent, type AlignContentAlignXKeys, type AlignContentAlignYKeys, type AlignContentDirectionKeys, type Breakpoints, type BrowserColors, type Color, type CreateMediaQueries, type Defaults, type ExtendCss, type MakeItResponsive, type MakeItResponsiveStyles, type NormalizeTheme, type PropertyValue, Provider, type SortBreakpoints, type StripUnit, type Styles, type Theme as StylesTheme, type TProvider, type TransformTheme, type UnitValue, type Value, type Values, alignContent, breakpoints$1 as breakpoints, context, createMediaQueries, extendCss, makeItResponsive, normalizeTheme, sortBreakpoints, stripUnit, styles$1 as styles, transformTheme, value, values };
+//# sourceMappingURL=index2.d.ts.map