@apia/theme 0.1.3 → 0.2.4

package/dist/index.d.ts

@@ -1,14 +1,8 @@
-import * as theme_ui_jsx_runtime from 'theme-ui/jsx-runtime';
+import { ResponsiveStyleValue, ThemeUICSSObject, Theme } from 'theme-ui';
+export { Alert, AlertProps, AspectImage, AspectImageProps, AspectRatio, AspectRatioProps, Avatar, AvatarProps, Badge, BadgeProps, BaseStyles, Box, BoxOwnProps, BoxProps, Button, ButtonProps, CSSObject, CSSProperties, CSSPseudoSelectorProps, Card, CardProps, Checkbox, CheckboxProps, Close, CloseIcon, CloseProps, ColorMode, ColorModesScale, Container, ContainerProps, Divider, DividerProps, Donut, DonutProps, Embed, EmbedProps, Field, FieldOwnProps, FieldProps, Flex, FlexOwnProps, FlexProps, Global, Grid, GridProps, Heading, HeadingProps, IconButton, IconButtonProps, Image, ImageProps, InitializeColorMode, Input, InputProps, Label, LabelProps, Link, LinkProps, MenuButton, MenuButtonProps, MenuIcon, Message, MessageProps, NavLink, NavLinkProps, Paragraph, ParagraphProps, Progress, ProgressProps, Radio, RadioProps, ResponsiveStyleValue, Select, SelectProps, Slider, SliderProps, Spinner, SpinnerProps, StylePropertyValue, Switch, SwitchProps, SxProp, TLengthStyledSystem, Text, TextProps, Textarea, TextareaProps, Theme, ThemeStyles, ThemeUICSSObject, ThemeUICSSProperties, ThemeUIContextValue, ThemeUIStyleObject, createElement, css, get, jsx, merge, useColorMode, useThemeUI } from 'theme-ui';
+export * from '@theme-ui/match-media';
 import * as react from 'react';
-import { ReactNode, FC } from 'react';
-import { Theme, ResponsiveStyleValue, ThemeUICSSObject } from 'theme-ui';
-
-interface TThemeProvider {
-    children: ReactNode;
-    customTheme?: Theme;
-}
-declare const ThemeProviderContext: react.Context<Theme>;
-declare const ThemeProvider: ({ children, customTheme }: TThemeProvider) => theme_ui_jsx_runtime.JSX.Element;
+import { FC, ReactNode } from 'react';
 
 /**
  * Esta función devuelve un array de valores para los distintos breakpoints.
@@ -63,6 +57,7 @@ interface TGetColorsAndStatesOptions {
         focus?: boolean;
         hover?: boolean;
         readonly?: boolean;
+        path?: boolean;
         selected?: boolean;
     };
 }
@@ -71,7 +66,7 @@ interface TGetColorsAndStatesOptions {
  * dentro del objeto colors de ThemeUI. Si se desea calcular los estados en
  * base a un color, se debe utilizar el método getColorsAndStatesByColor.
  */
-declare function getColorsAndStatesByPath(path: string, options?: TGetColorsAndStatesOptions): Record<string, ThemeUICSSObject>;
+declare function getColorsAndStatesByPath(incomingPath: string, options?: TGetColorsAndStatesOptions): Record<string, ThemeUICSSObject>;
 
 interface IColorDefinition {
     main: string;
@@ -94,9 +89,14 @@ interface TStates {
     selected?: boolean;
 }
 type TGetColorStateDefinition = Pick<ThemeUICSSObject, 'backgroundColor' | 'borderColor' | 'borderLeftColor' | 'borderRightColor' | 'borderBottomColor' | 'borderTopColor' | 'color'>;
-type TColorStateRetriever = (color: string, state: keyof TStates) => string;
-type TStateRetriever = (definition: Partial<TGetColorStateDefinition>, state: keyof TStates) => TGetColorStateDefinition;
-type TStatesRetriever = (definition: Partial<TGetColorStateDefinition>, states?: TStates) => ThemeUICSSObject;
+type TParsedPaletteColorStateRetriever = (color: string, state: keyof TStates) => string;
+type TColorStateRetriever = (color: string, state: keyof TStates, theme: Theme) => string;
+type TParsedPaletteStateRetriever = (definition: Partial<TGetColorStateDefinition>, state: keyof TStates) => TGetColorStateDefinition;
+type TStateRetriever = (definition: Partial<TGetColorStateDefinition>, state: keyof TStates, theme: Theme) => TGetColorStateDefinition;
+type TParsedPaletteStatesRetriever = (definition: Partial<TGetColorStateDefinition>, states?: TStates) => ThemeUICSSObject;
+type TStatesRetriever = (definition: Partial<TGetColorStateDefinition>, theme: Theme, states?: TStates) => ThemeUICSSObject;
+type TParsedPaletteStatesByDefinition = (definition: Partial<TGetColorStateDefinition>, options?: TGetColorsAndStatesOptions) => ThemeUICSSObject;
+type TApplyStates = (properties: Record<string, TColorDefinition | string | Record<string, unknown>>[], theme: Theme, states?: TStates) => void;
 interface TActionDefinition<OpacityColor = undefined | string | IActionOpacity> {
     active: OpacityColor;
     activeOpacity: number;
@@ -179,13 +179,18 @@ interface TPalette<ColorDefinition = IColorDefinition, ColorModifier = TColorMod
     queryColumnsMultiplier?: number;
 }
 type TBuildStateObject = <T extends Partial<ThemeUICSSObject>>(props: T, state: keyof Required<TStates> | 'checked') => ThemeUICSSObject;
+type TBuildColorsObject = (definition: Partial<TGetColorStateDefinition>) => TGetColorStateDefinition;
 type TParsedPalette = Required<TPalette<Required<IColorDefinition>, TColorModifier, Required<TActionDefinition<IActionOpacity>>>> & {
+    applyStates: TApplyStates;
+    buildColorsObject: TBuildColorsObject;
     buildStateObject: TBuildStateObject;
-    getColor: TColorStateRetriever;
-    getOneState: TStateRetriever;
-    getStatesForColors: TStatesRetriever;
-    getStatesFromDefinition: TStatesRetriever;
+    getColor: TParsedPaletteColorStateRetriever;
+    getColorStates: TParsedPaletteStatesRetriever;
+    getOneState: TParsedPaletteStateRetriever;
+    getStatesForColors: TParsedPaletteStatesRetriever;
+    getStatesFromDefinition: TParsedPaletteStatesByDefinition;
     getStatesFromPath: typeof getColorsAndStatesByPath;
+    getSelectedColors: () => ThemeUICSSObject;
 };
 type TColorDefinitionPrimitive = Pick<ThemeUICSSObject, 'color' | 'backgroundColor' | 'borderColor'>;
 type TColorDefinition = TColorDefinitionPrimitive & {
@@ -205,35 +210,9 @@ declare global {
     }
 }
 
-/**
- * Esta función está pensada para ser utilizada dentro del objeto colors del
- * tema. Aplica recursivamente los distintos estados a todos los elementos
- * contenidos dentro de los objetos pasados como parámetro en properties.
- *
- * Es posible elegir cuáles estados se aplican y cuáles no mediante el segundo
- * parámetro, que es un objeto cuyas propiedades serán tomadas en cuenta
- * únicamente cuando tienen valor false, en cuyo caso no se aplicará el estado
- * correspondiente.
- *
- * @param properties
- * @param states
- */
-declare function applyStates(properties: Record<string, TColorDefinition | string | Record<string, unknown>>[], states?: TStates): void;
+declare function parsePalette(palette: TPalette, theme: Theme): TParsedPalette;
 
-declare function parsePalette(palette: TPalette): TParsedPalette;
-
-/**
- * Básicamente agrega la definición de borderLeftColor, borderRightColor, etc.
- */
-declare function buildColorsObject(definition: Partial<TGetColorStateDefinition>): TGetColorStateDefinition;
-
-/**
- * Esta función calcula los colores de los estados a partir de la definición
- * pasada.
- */
-declare function getColorsAndStatesByDefinition(definition: Partial<TGetColorStateDefinition>, options?: TGetColorsAndStatesOptions): ThemeUICSSObject;
-
-declare function getPalette(arg?: TPalette | boolean): TParsedPalette;
+type CustomTheme = Omit<Theme, 'palette'>;
 
 /**
  * Este método está pensado para usarse únicamente dentro de applyStates, si se
@@ -262,6 +241,12 @@ declare const getColorState: TStateRetriever;
  */
 declare const getColorStates: TStatesRetriever;
 
+/**
+ * Esta función calcula los colores de los estados a partir de la definición
+ * pasada.
+ */
+declare function getColorsAndStatesByDefinition(definition: Partial<TGetColorStateDefinition>, theme: Theme, options?: TGetColorsAndStatesOptions): ThemeUICSSObject;
+
 /**
  * Esta función arma un objeto con los colores que se deben aplicar para
  * garantizar que el resultado sea el esperado, por ejemplo, al aplicar un
@@ -306,7 +291,7 @@ declare function getColorsByPath(path: string, options?: {
  */
 declare const getOneColorState: TColorStateRetriever;
 
-declare function useMainTheme(customTheme?: Theme): Theme;
+declare function useMainTheme(customTheme?: CustomTheme, customPalette?: TPalette): Theme;
 
 /**
  * Permite crear un componente cuyos estilos pueden ser redefinidos por un
@@ -327,7 +312,7 @@ declare function useMainTheme(customTheme?: Theme): Theme;
  * @param Component La definición del componente.
  * @returns Un componente reutilizable y exportable que tiene estilos aplicados.
  */
-declare function makeStyledComponent<T extends object>(displayName: string, stylesPath: string, styles: ThemeUICSSObject, Component: FC<T>, unwraped?: boolean): ((props: T) => theme_ui_jsx_runtime.JSX.Element) & {
+declare function makeStyledComponent<T extends object>(displayName: string, stylesPath: string, styles: ThemeUICSSObject, Component: FC<T>, unwraped?: boolean): ((props: T) => react.JSX.Element) & {
     displayName: string;
 };
 
@@ -361,4 +346,17 @@ declare function injectStyles(path: string, styles: ThemeUICSSObject): void;
  */
 declare function injectStyles(styles: ThemeUICSSObject): void;
 
-export { TColorDefinition, TPalette, TParsedPalette, ThemeProvider, ThemeProviderContext, applyStates, applyStatesGetColor, buildColorsObject, focusOutline, getColorState, getColorStates, getColorsAndStatesByDefinition, getColorsAndStatesByPath, getColorsByDefinition, getColorsByPath, getOneColorState, getPalette, getVariant, injectStyles, makeStyledComponent, parsePalette, responsive, smallButton, spacing, useMainTheme };
+interface TThemeProvider {
+    children: ReactNode;
+    customTheme?: Omit<Theme, 'palette'>;
+    customPalette?: TPalette;
+}
+declare const ApiaThemeProvider: ({ children, customTheme, customPalette, }: TThemeProvider) => react.JSX.Element;
+
+declare module 'theme-ui' {
+    interface Theme {
+        palette: TParsedPalette;
+    }
+}
+
+export { ApiaThemeProvider, CustomTheme, TColorDefinition, TPalette, TParsedPalette, applyStatesGetColor, focusOutline, getColorState, getColorStates, getColorsAndStatesByDefinition, getColorsAndStatesByPath, getColorsByDefinition, getColorsByPath, getOneColorState, getVariant, injectStyles, makeStyledComponent, parsePalette, responsive, smallButton, spacing, useMainTheme };