@apia/theme 1.0.4 → 2.0.0

package/dist/index.d.ts

@@ -1,390 +1,39 @@
-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';
+import { TParsedPalette } from './base/colors/types.js';
+export { TColorDefinition, TCustomPalette, TPalette, TThemeModifier } from './base/colors/types.js';
+export { default as parsePalette } from './base/colors/util/parsePalette.js';
+export { CustomTheme } from './themeuiExports.js';
 export * from '@theme-ui/match-media';
-import * as react from 'react';
-import { FC, ReactNode } from 'react';
-
-/**
- * Esta función devuelve un array de valores para los distintos breakpoints.
- *
- * **Importante** Debido a un issue con ThemeUI, es necesario agregar un
- * breakpoint inicial de 0px para las vistas de impresión. El comportamiento por
- * defecto será, si se pasa un valor para el índice 4, esta será tomada como
- * vista de impresión, sino se tomará el valor de mayor índice menor que 4.
- *
- * @example
- *
- * display: responsive({0: 'none', 3: 'block'}) // display: ['block', 'none', null, null, 'block'];
- */
-declare function responsive<T>(values: {
-    print?: T;
-    [key: number]: undefined | T;
-}): ResponsiveStyleValue<T>;
-/**
- * Este método permite aplicar espacios (gaps, márgenes y paddings) que se
- * tendrán un comportamiento responsivo por defecto. Esto es, cuando tenemos un
- * padding en una vista de escritorio, probablemente sea demasiado grande al
- * llevarlo a celular. Con esta función se elimina el problema de calcular para
- * cada elemento en forma individual y el problema se convierte en encontrar
- * una única fórmula que quede correcta para todos los breakpoints.
- *
- * @example
- *
- * '.wellPaddedElement': {
- *    p: spacing(6),
- *    pt: spacing(8)
- * }
- */
-declare function spacing(index: number): ResponsiveStyleValue<number>;
-declare const smallButton: {
-    py: number;
-    px: number;
-    fontSize: string;
-};
-declare const focusOutline: ThemeUICSSObject;
-declare function getVariant(variant: string): {
-    variant: string;
-    'data-variant': string;
-};
-
-interface TGetColorsAndStatesOptions {
-    mergeObject?: Record<string, any>;
-    states?: {
-        active?: boolean;
-        checked?: boolean;
-        default?: boolean;
-        disabled?: boolean;
-        focus?: boolean;
-        hover?: boolean;
-        readonly?: boolean;
-        path?: boolean;
-        selected?: boolean;
-    };
-}
-/**
- * Esta función es útil para devolver los estados calculados por la aplicación
- * 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(incomingPath: string, options?: TGetColorsAndStatesOptions): Record<string, ThemeUICSSObject>;
-
-interface IColorDefinition {
-    main: string;
-    light?: string;
-    dark?: string;
-    contrastText?: string;
-}
-interface IActionOpacity {
-    light: string;
-    dark: string;
-}
-interface TStates {
-    active?: boolean;
-    checked?: boolean;
-    default?: boolean;
-    disabled?: boolean;
-    focus?: boolean;
-    hover?: boolean;
-    readonly?: boolean;
-    selected?: boolean;
-}
-type TGetColorStateDefinition = Pick<ThemeUICSSObject, 'backgroundColor' | 'borderColor' | 'borderLeftColor' | 'borderRightColor' | 'borderBottomColor' | 'borderTopColor' | 'color'>;
-type TParsedPaletteColorStateRetriever = (color: string, state: keyof TStates) => string;
-type TColorStateRetriever = (color: string, state: keyof TStates, palette: TParsedPalette) => string;
-type TParsedPaletteStateRetriever = (definition: Partial<TGetColorStateDefinition>, state: keyof TStates) => TGetColorStateDefinition;
-type TStateRetriever = (definition: Partial<TGetColorStateDefinition>, state: keyof TStates, palette: TParsedPalette) => TGetColorStateDefinition;
-type TParsedPaletteStatesRetriever = (definition: Partial<TGetColorStateDefinition>, states?: TStates) => ThemeUICSSObject;
-type TStatesRetriever = (definition: Partial<TGetColorStateDefinition>, palette: TParsedPalette, 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;
-    disabled: OpacityColor;
-    disabledOpacity: number;
-    focus: OpacityColor;
-    focusOpacity: number;
-    hover: OpacityColor;
-    hoverOpacity: number;
-    readonly: OpacityColor;
-    readonlyOpacity: number;
-    selected: OpacityColor;
-    selectedOpacity: number;
-}
-type TColorModifier = (color: string, ratio?: number) => string;
-interface TPalette<ColorDefinition = IColorDefinition, ColorModifier = TColorModifier, ActionDefinition = TActionDefinition> {
-    action: ActionDefinition;
-    background: {
-        default: string;
-        overlay: string;
-        paper: string;
-    };
-    border: {
-        article: string;
-        field: string;
-        ghost: string;
-        section: string;
-    };
-    common: {
-        white: string;
-        black: string;
-    };
-    error: ColorDefinition;
-    gray?: {
-        100: string;
-        150: string;
-        200: string;
-        250: string;
-        300: string;
-        350: string;
-        400: string;
-        450: string;
-        500: string;
-        550: string;
-        600: string;
-        650: string;
-        700: string;
-        750: string;
-        800: string;
-        850: string;
-        900: string;
-        950: string;
-    };
-    info: ColorDefinition;
-    primary: ColorDefinition;
-    secondary: ColorDefinition;
-    spacing: (index: number) => ResponsiveStyleValue<number>;
-    success: ColorDefinition;
-    text: {
-        accent: string;
-        disabled: string;
-        icon: string;
-        link: string;
-        primary: string;
-        secondary: string;
-        title: string;
-    };
-    warning: ColorDefinition;
-    lightenRatio?: number;
-    darkenRatio?: number;
-    /**
-     * Acepta un ratio entre 0 y 100
-     */
-    lightenColor?: ColorModifier;
-    /**
-     * Acepta un ratio entre 0 y 100
-     */
-    darkenColor?: ColorModifier;
-    getContrastText?: ColorModifier;
-    responsive: typeof responsive;
-    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: TParsedPaletteColorStateRetriever;
-    getColorStates: TParsedPaletteStatesRetriever;
-    getOneState: TParsedPaletteStateRetriever;
-    getStatesForColors: TParsedPaletteStatesRetriever;
-    getStatesFromDefinition: TParsedPaletteStatesByDefinition;
-    getStatesFromPath: typeof getColorsAndStatesByPath;
-    getSelectedColors: () => ThemeUICSSObject;
-    getColorsByPath: (path: string, options?: {
-        mergeObject?: Record<string, any>;
-    }) => TGetColorStateDefinition & Record<string, any>;
-};
-type TCustomPalette = Partial<TPalette> & Partial<Pick<TParsedPalette, 'applyStates' | 'buildColorsObject' | 'buildStateObject' | 'getColor' | 'getColorStates' | 'getSelectedColors' | 'getContrastText' | 'getOneState' | 'getStatesForColors' | 'getStatesFromDefinition' | 'getStatesFromPath'>>;
-type TColorDefinitionPrimitive = Pick<ThemeUICSSObject, 'color' | 'backgroundColor' | 'borderColor'>;
-type TColorDefinition = TColorDefinitionPrimitive & {
-    active?: TColorDefinitionPrimitive;
-    checked?: TColorDefinitionPrimitive;
-    disabled?: TColorDefinitionPrimitive;
-    focus?: TColorDefinitionPrimitive;
-    hover?: TColorDefinitionPrimitive;
-    preventParse?: boolean;
-    selected?: TColorDefinitionPrimitive;
-};
-declare global {
-    interface Window {
-        currentPalette: TParsedPalette;
-        customPalettes?: TPalette[];
-        defaultPalette?: TPalette;
-    }
-}
-type TThemeModifier = (theme: Theme) => Theme;
-
-declare function parsePalette(palette: TCustomPalette): TParsedPalette;
-
-type CustomTheme = Omit<Theme, 'palette'>;
-
-/**
- * Este método está pensado para usarse únicamente dentro de applyStates, si se
- * desea obtener un objeto con las propiedades correspondientes a un estado,
- * utilizar el método getColorStates.
- */
-declare const applyStatesGetColor: TStatesRetriever;
-
-/**
- * Este método acepta un objeto con backgroundColor y borderColor y aplica el
- * estado pasado como segundo parámetro de la siguiente manera:
- *
- * Si se pasa backgroundColor, se devuelve un backgroundColor y un color, que
- * corresponden al backgroundColor con el estado aplicado y un color calculado
- * con la función getContrastText.
- *
- * Si se pasa borderColor, se devuelve un nuevo borderColor calculado con el
- * estado aplicado.
- */
-declare const getColorState: TStateRetriever;
-
-/**
- * Con este método es posible construir un objeto con las propiedades
- * necesarias para aplicar los colores correspondientes a los estados deseados
- * a partir de la definición provista.
- */
-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>, palette: TParsedPalette, 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
- * color a un border. Esto es así ya que en ThemeUI hay situaciones en las que
- * si no se aplican el color de borde a cada uno de los lados, no se aplica el
- * color deseado.
- *
- * Ejemplo de lo antedicho es:
- *
- * borderRight: '1px solid',
- * borderColor: 'red'.
- *
- * En este caso, el borde derecho no será rojo como se espera, ya que la
- * propiedad borderRight aplicará un borderRightColor: 'initial', que solamente
- * puede ser reescrito por borderRightColor: 'red'.
- */
-declare function getColorsByDefinition(definition: Partial<TGetColorStateDefinition>, options?: {
-    mergeObject?: Record<string, any>;
-}): TGetColorStateDefinition & Record<string, any>;
-
-/**
- * Esta función NO CALCULA ningún color, simplemente devuelve un objeto con las
- * rutas de color con el formato de ThemeUI. Es útil cuando se desea aplicar
- * colores definidos en el objeto colors.
- *
- * Si se desea generar un objeto con los colores a partir de una definición de
- * colores del tipo TGetColorStateDefinition se debe utilizar el método
- * getColorsByDefinition.
- */
-declare function getColorsByPath(path: string, options?: {
-    mergeObject?: Record<string, any>;
-}): TGetColorStateDefinition & Record<string, any>;
-
-/**
-
- * Este método acepta un color y aplica el estado pasado como segundo
-
- * parámetro. De esta forma se puede obtener el color correspondiente al estado
-
- * calculado automáticamente por la aplicación.
-
- */
-declare const getOneColorState: TColorStateRetriever;
-
-declare function useMainTheme(customTheme?: () => CustomTheme, customPalette?: TCustomPalette, themeModifier?: TThemeModifier): Theme;
-
-/**
- * Permite crear un componente cuyos estilos pueden ser redefinidos por un
- * usuario final.
- *
- * Esto es así puesto que los estilos definidos serán agregados a un árbol que
- * el usuario puede consultar y sobreescribir. De esta manera los estilos
- * finales del componente serán aquellos definidos en este método pero
- * sobreescritos por los definidos por el usuario si es que existen.
- *
- * **Importante** Para aplicar la variante, se aplica un box alrededor del
- * componente que se está renderizando, con className="variant__holder". En caso
- * de que se quisiera evitar este comportamiento, se debe pasar unwraped = true
- *
- * @param displayName Este parámetro es importante para el debugger de React.
- * @param stylesPath La ruta donde se aplicarán los estilos, es importante asegurarse de que esa ruta ya no está siendo utilizada por otro componente.
- * @param styles Un objeto de estilos de ThemeUI
- * @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) => react.JSX.Element) & {
-    displayName: string;
-};
-
-/**
- * Esta función permite agregar estilos al tema principal de la aplicación, de
- * modo que estén disponibles para cualquier componente que lo requirea.
- *
- * @example
- *
- * injectStyles('buttons.myRedButton', {
- *   variant: 'buttons.primary',
- *   backgroundColor: 'red',
- * })
- */
-declare function injectStyles(path: string, styles: ThemeUICSSObject): void;
-/**
- * Esta función permite agregar estilos al tema principal de la aplicación, de
- * modo que estén disponibles para cualquier componente que lo requirea.
- *
- * @example
- *
- * injectStyles({
- *  layout: {
- *    panels: {
- *      myPanel: {
- *        ...
- *      }
- *    }
- *  }
- * })
- */
-declare function injectStyles(styles: ThemeUICSSObject): void;
-
-declare const spacingLayouts: readonly ["dense", "clever", "vertical__clever", "horizontal__clever"];
-type TSpacingLayout = (typeof spacingLayouts)[number];
-declare function getSpacingLayouts(): {
-    '&.dense': {
-        px: number;
-        py: number;
-    };
-    '&.horizontal__clever': {
-        px: number;
-        py: number;
-    };
-    '&.vertical__clever': {
-        px: number;
-        py: number;
-    };
-    '&.clever': {
-        px: number;
-        py: number;
-    };
-};
-
-interface TThemeProvider {
-    children: ReactNode;
-    customTheme?: () => Omit<Theme, 'palette'>;
-    customPalette?: () => TCustomPalette | undefined;
-    themeModifier?: TThemeModifier;
-}
-declare const ApiaThemeProvider: ({ children, customTheme, customPalette, themeModifier, }: TThemeProvider) => react.JSX.Element;
-
-declare module 'theme-ui' {
-    interface Theme {
-        palette: TParsedPalette;
-    }
+export { default as applyStatesGetColor } from './base/colors/util/applyStatesGetColor.js';
+export { default as getColorState } from './base/colors/util/getColorState.js';
+export { default as getColorStates } from './base/colors/util/getColorStates.js';
+export { default as getColorsAndStatesByDefinition } from './base/colors/util/getColorsAndStatesByDefinition.js';
+export { default as getColorsAndStatesByPath } from './base/colors/util/getColorsAndStatesByPath.js';
+export { default as getColorsByDefinition } from './base/colors/util/getColorsByDefinition.js';
+export { default as getColorsByPath } from './base/colors/util/getColorsByPath.js';
+export { default as getOneColorState } from './base/colors/util/getOneColorState.js';
+export { useMainTheme } from './methods/useMainTheme.js';
+export { makeStyledComponent } from './methods/makeStyledComponent.js';
+export { injectStyles } from './methods/injectStyles.js';
+export { TSpacingLayout, getSpacingLayouts, spacingLayouts } from './methods/spacingLayout/index.js';
+export { ApiaThemeProvider } from './ApiaThemeProvider.js';
+export { focusOutline, responsive, smallButton, spacing } from './util.js';
+export { getVariant } from './util/getVariant.js';
+export { MarkdownBuilder } from './markdown/builder/MarkdownBuilder.js';
+export { MarkdownBlock } from './markdown/builder/elements/MarkdownBlock.js';
+export { MarkdownList } from './markdown/builder/elements/list.js';
+export { MarkdownParagraph } from './markdown/builder/elements/paragraph.js';
+export { MarkdownTable } from './markdown/builder/elements/table.js';
+export { MarkdownTableOfContents } from './markdown/builder/elements/tableOfContents.js';
+export { MarkdownTableCell, MarkdownTableObjectCell } from './markdown/extensions/table/types.js';
+export { parseMarkdown } from './markdown/parseMarkdown.js';
+export { IMarkdownStylesAggregator, RemarkableExtension } from './markdown/types.js';
+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, merge, useColorMode, useThemeUI } from 'theme-ui';
+
+declare module '@theme-ui/css' {
+    interface Theme {
+        palette: TParsedPalette;
+    }
 }
 
-export { ApiaThemeProvider, CustomTheme, TColorDefinition, TCustomPalette, TPalette, TParsedPalette, TSpacingLayout, TThemeModifier, applyStatesGetColor, focusOutline, getColorState, getColorStates, getColorsAndStatesByDefinition, getColorsAndStatesByPath, getColorsByDefinition, getColorsByPath, getOneColorState, getSpacingLayouts, getVariant, injectStyles, makeStyledComponent, parsePalette, responsive, smallButton, spacing, spacingLayouts, useMainTheme };
+export { TParsedPalette };
+//# sourceMappingURL=index.d.ts.map