welcome-ui 0.0.0-dev.1761316648080 → 0.0.0-dev.1761576812962

package/dist/types/theme/colors.d.ts

@@ -0,0 +1,339 @@
+declare const palette: {
+    'beige-10': string;
+    'beige-20': string;
+    'beige-30': string;
+    'beige-40': string;
+    'beige-50': string;
+    'beige-60': string;
+    'beige-70': string;
+    'beige-80': string;
+    'beige-90': string;
+    'blue-10': string;
+    'blue-20': string;
+    'blue-30': string;
+    'blue-40': string;
+    'blue-50': string;
+    'blue-60': string;
+    'blue-70': string;
+    'blue-80': string;
+    'blue-90': string;
+    'green-10': string;
+    'green-20': string;
+    'green-30': string;
+    'green-40': string;
+    'green-50': string;
+    'green-60': string;
+    'green-70': string;
+    'green-80': string;
+    'green-90': string;
+    'neutral-10': string;
+    'neutral-20': string;
+    'neutral-30': string;
+    'neutral-40': string;
+    'neutral-50': string;
+    'neutral-60': string;
+    'neutral-70': string;
+    'neutral-80': string;
+    'neutral-90': string;
+    'orange-10': string;
+    'orange-20': string;
+    'orange-30': string;
+    'orange-40': string;
+    'orange-50': string;
+    'orange-60': string;
+    'orange-70': string;
+    'orange-80': string;
+    'orange-90': string;
+    'pink-10': string;
+    'pink-20': string;
+    'pink-30': string;
+    'pink-40': string;
+    'pink-50': string;
+    'pink-60': string;
+    'pink-70': string;
+    'pink-80': string;
+    'pink-90': string;
+    'red-10': string;
+    'red-20': string;
+    'red-30': string;
+    'red-40': string;
+    'red-50': string;
+    'red-60': string;
+    'red-70': string;
+    'red-80': string;
+    'red-90': string;
+    'red-orange-10': string;
+    'red-orange-20': string;
+    'red-orange-30': string;
+    'red-orange-40': string;
+    'red-orange-50': string;
+    'red-orange-60': string;
+    'red-orange-70': string;
+    'red-orange-80': string;
+    'red-orange-90': string;
+    'teal-10': string;
+    'teal-20': string;
+    'teal-30': string;
+    'teal-40': string;
+    'teal-50': string;
+    'teal-60': string;
+    'teal-70': string;
+    'teal-80': string;
+    'teal-90': string;
+    'violet-10': string;
+    'violet-20': string;
+    'violet-30': string;
+    'violet-40': string;
+    'violet-50': string;
+    'violet-60': string;
+    'violet-70': string;
+    'violet-80': string;
+    'violet-90': string;
+    'yellow-10': string;
+    'yellow-20': string;
+    'yellow-30': string;
+    'yellow-40': string;
+    'yellow-50': string;
+    'yellow-60': string;
+    'yellow-70': string;
+    'yellow-80': string;
+    'yellow-90': string;
+};
+export declare const getColors: (systemColors: typeof palette) => {
+    overlay: string;
+    'primary-10': string;
+    'primary-20': string;
+    'primary-30': string;
+    'primary-40': string;
+    'primary-50': string;
+    'primary-60': string;
+    'primary-70': string;
+    'primary-80': string;
+    'primary-90': string;
+    'secondary-blue': string;
+    'secondary-green': string;
+    'secondary-orange': string;
+    'secondary-pink': string;
+    'secondary-teal': string;
+    'secondary-violet': string;
+    'beige-10': string;
+    'beige-20': string;
+    'beige-30': string;
+    'beige-40': string;
+    'beige-50': string;
+    'beige-60': string;
+    'beige-70': string;
+    'beige-80': string;
+    'beige-90': string;
+    'blue-10': string;
+    'blue-20': string;
+    'blue-30': string;
+    'blue-40': string;
+    'blue-50': string;
+    'blue-60': string;
+    'blue-70': string;
+    'blue-80': string;
+    'blue-90': string;
+    'green-10': string;
+    'green-20': string;
+    'green-30': string;
+    'green-40': string;
+    'green-50': string;
+    'green-60': string;
+    'green-70': string;
+    'green-80': string;
+    'green-90': string;
+    'neutral-10': string;
+    'neutral-20': string;
+    'neutral-30': string;
+    'neutral-40': string;
+    'neutral-50': string;
+    'neutral-60': string;
+    'neutral-70': string;
+    'neutral-80': string;
+    'neutral-90': string;
+    'orange-10': string;
+    'orange-20': string;
+    'orange-30': string;
+    'orange-40': string;
+    'orange-50': string;
+    'orange-60': string;
+    'orange-70': string;
+    'orange-80': string;
+    'orange-90': string;
+    'pink-10': string;
+    'pink-20': string;
+    'pink-30': string;
+    'pink-40': string;
+    'pink-50': string;
+    'pink-60': string;
+    'pink-70': string;
+    'pink-80': string;
+    'pink-90': string;
+    'red-10': string;
+    'red-20': string;
+    'red-30': string;
+    'red-40': string;
+    'red-50': string;
+    'red-60': string;
+    'red-70': string;
+    'red-80': string;
+    'red-90': string;
+    'red-orange-10': string;
+    'red-orange-20': string;
+    'red-orange-30': string;
+    'red-orange-40': string;
+    'red-orange-50': string;
+    'red-orange-60': string;
+    'red-orange-70': string;
+    'red-orange-80': string;
+    'red-orange-90': string;
+    'teal-10': string;
+    'teal-20': string;
+    'teal-30': string;
+    'teal-40': string;
+    'teal-50': string;
+    'teal-60': string;
+    'teal-70': string;
+    'teal-80': string;
+    'teal-90': string;
+    'violet-10': string;
+    'violet-20': string;
+    'violet-30': string;
+    'violet-40': string;
+    'violet-50': string;
+    'violet-60': string;
+    'violet-70': string;
+    'violet-80': string;
+    'violet-90': string;
+    'yellow-10': string;
+    'yellow-20': string;
+    'yellow-30': string;
+    'yellow-40': string;
+    'yellow-50': string;
+    'yellow-60': string;
+    'yellow-70': string;
+    'yellow-80': string;
+    'yellow-90': string;
+};
+export declare const colors: {
+    overlay: string;
+    'primary-10': string;
+    'primary-20': string;
+    'primary-30': string;
+    'primary-40': string;
+    'primary-50': string;
+    'primary-60': string;
+    'primary-70': string;
+    'primary-80': string;
+    'primary-90': string;
+    'secondary-blue': string;
+    'secondary-green': string;
+    'secondary-orange': string;
+    'secondary-pink': string;
+    'secondary-teal': string;
+    'secondary-violet': string;
+    'beige-10': string;
+    'beige-20': string;
+    'beige-30': string;
+    'beige-40': string;
+    'beige-50': string;
+    'beige-60': string;
+    'beige-70': string;
+    'beige-80': string;
+    'beige-90': string;
+    'blue-10': string;
+    'blue-20': string;
+    'blue-30': string;
+    'blue-40': string;
+    'blue-50': string;
+    'blue-60': string;
+    'blue-70': string;
+    'blue-80': string;
+    'blue-90': string;
+    'green-10': string;
+    'green-20': string;
+    'green-30': string;
+    'green-40': string;
+    'green-50': string;
+    'green-60': string;
+    'green-70': string;
+    'green-80': string;
+    'green-90': string;
+    'neutral-10': string;
+    'neutral-20': string;
+    'neutral-30': string;
+    'neutral-40': string;
+    'neutral-50': string;
+    'neutral-60': string;
+    'neutral-70': string;
+    'neutral-80': string;
+    'neutral-90': string;
+    'orange-10': string;
+    'orange-20': string;
+    'orange-30': string;
+    'orange-40': string;
+    'orange-50': string;
+    'orange-60': string;
+    'orange-70': string;
+    'orange-80': string;
+    'orange-90': string;
+    'pink-10': string;
+    'pink-20': string;
+    'pink-30': string;
+    'pink-40': string;
+    'pink-50': string;
+    'pink-60': string;
+    'pink-70': string;
+    'pink-80': string;
+    'pink-90': string;
+    'red-10': string;
+    'red-20': string;
+    'red-30': string;
+    'red-40': string;
+    'red-50': string;
+    'red-60': string;
+    'red-70': string;
+    'red-80': string;
+    'red-90': string;
+    'red-orange-10': string;
+    'red-orange-20': string;
+    'red-orange-30': string;
+    'red-orange-40': string;
+    'red-orange-50': string;
+    'red-orange-60': string;
+    'red-orange-70': string;
+    'red-orange-80': string;
+    'red-orange-90': string;
+    'teal-10': string;
+    'teal-20': string;
+    'teal-30': string;
+    'teal-40': string;
+    'teal-50': string;
+    'teal-60': string;
+    'teal-70': string;
+    'teal-80': string;
+    'teal-90': string;
+    'violet-10': string;
+    'violet-20': string;
+    'violet-30': string;
+    'violet-40': string;
+    'violet-50': string;
+    'violet-60': string;
+    'violet-70': string;
+    'violet-80': string;
+    'violet-90': string;
+    'yellow-10': string;
+    'yellow-20': string;
+    'yellow-30': string;
+    'yellow-40': string;
+    'yellow-50': string;
+    'yellow-60': string;
+    'yellow-70': string;
+    'yellow-80': string;
+    'yellow-90': string;
+};
+export type ThemeColors = typeof colors;
+export type ThemeSecondaryColors = SecondaryColors;
+type SecondaryColors = 'blue' | 'green' | 'orange' | 'pink' | 'teal' | 'violet';
+export {};

package/dist/types/theme/dark.d.ts

@@ -0,0 +1,7 @@
+import { ThemeValues } from '.';
+type RecursivePartial<T> = {
+    [P in keyof T]?: RecursivePartial<T[P]> | T[P];
+};
+export declare const colorsDark: ThemeValues['colors'];
+export declare const darkTheme: RecursivePartial<ThemeValues>;
+export {};

package/dist/types/theme/defaultFields.d.ts

@@ -0,0 +1,39 @@
+import { CSSObject } from '@xstyled/styled-components';
+import { DefaultFieldStylesProps } from '../utils/field-styles';
+import { ThemeValues } from '.';
+export type ThemeDefaultFields = {
+    checkableField: {
+        checked: CSSObject;
+        disabled: CSSObject;
+    };
+    checkablelabel: {
+        checked: CSSObject;
+        default: CSSObject;
+    };
+    default: CSSObject;
+    disabled: CSSObject;
+    fieldset: CSSObject;
+    focused: VariantsTheme & {
+        default: CSSObject;
+    };
+    hover: CSSObject;
+    iconPlacement: Record<DefaultFieldStylesProps['size'], CSSObject>;
+    placeholder: CSSObject;
+    select: {
+        default: CSSObject;
+        disabled: CSSObject;
+        existing: CSSObject;
+        highlighted: CSSObject;
+        selected: CSSObject;
+        selectedAndHighlighted: CSSObject;
+    };
+    sizes: Record<DefaultFieldStylesProps['size'], CSSObject>;
+    variants: VariantsTheme;
+};
+type VariantsTheme = {
+    danger: CSSObject;
+    success: CSSObject;
+    warning: CSSObject;
+};
+export declare const getDefaultFields: (theme: ThemeValues) => ThemeDefaultFields;
+export {};

package/dist/types/theme/focus.d.ts

@@ -0,0 +1,10 @@
+import { CSSObject } from '@xstyled/styled-components';
+import { ThemeColors } from './colors';
+export type ThemeFocus = (color?: string) => {
+    boxShadow: CSSObject['boxShadow'];
+};
+export declare const getFocus: ({ colors }: {
+    colors: ThemeColors;
+}) => (color?: string) => {
+    boxShadow: string;
+};

package/dist/types/theme/fonts.d.ts

@@ -0,0 +1,18 @@
+import { ThemeValues } from '.';
+export type ThemeFontFaces = {
+    'welcome-font': FontFace[];
+    'welcome-icon-font': FontFace[];
+    'work-sans': FontFace[];
+};
+type FontFace = {
+    display?: FontDisplay;
+    extensions?: string[];
+    isVariable?: boolean;
+    stretch?: string;
+    style?: string;
+    uniCodeRange?: string;
+    url: string;
+    weight?: string;
+};
+export declare const fontFaces: (theme: ThemeValues) => ThemeFontFaces;
+export {};

package/dist/types/theme/index.d.ts

@@ -0,0 +1,132 @@
+import { CSSScalar, ITheme as StyledComponentDefaultTheme, DefaultTheme as XStyledDefaultTheme } from '@xstyled/styled-components';
+import { ThemeAccordions } from '../components/Accordion/theme';
+import { ThemeAlerts } from '../components/Alert/theme';
+import { ThemeAvatars } from '../components/Avatar/theme';
+import { ThemeBadges } from '../components/Badge/theme';
+import { ThemeBreadcrumbs } from '../components/Breadcrumb/theme';
+import { ThemeButtons } from '../components/Button/theme';
+import { ThemeCards } from '../components/Card/theme';
+import { ThemeCheckboxes } from '../components/Checkbox/theme';
+import { ThemeDateTimePickerCommon } from '../components/DateTimePickerCommon/theme';
+import { ThemeDrawers } from '../components/Drawer/theme';
+import { ThemeDropdownMenu } from '../components/DropdownMenu/theme';
+import { ThemeFileDrops } from '../components/FileDrop/theme';
+import { ThemeHints } from '../components/Hint/theme';
+import { ThemeIcons } from '../components/Icon/theme';
+import { ThemeLabels } from '../components/Label/theme';
+import { ThemeLinks } from '../components/Link/theme';
+import { ThemeLoaders } from '../components/Loader/theme';
+import { ThemeModals } from '../components/Modal/theme';
+import { ThemePagination } from '../components/Pagination/theme';
+import { ThemePopovers } from '../components/Popover/theme';
+import { ThemeRadios } from '../components/Radio/theme';
+import { ThemeRadioTabs } from '../components/RadioTab/theme';
+import { ThemeSliders } from '../components/Slider/theme';
+import { ThemeSwipers } from '../components/Swiper/theme';
+import { ThemeTables } from '../components/Table/theme';
+import { ThemeTabs } from '../components/Tabs/theme';
+import { ThemeTags } from '../components/Tag/theme';
+import { ThemeTextareas } from '../components/Textarea/theme';
+import { ThemeToasts } from '../components/Toast/theme';
+import { ThemeToggles } from '../components/Toggle/theme';
+import { ThemeTooltips } from '../components/Tooltip/theme';
+import { ThemeVariantIcon } from '../components/VariantIcon/theme';
+import { ThemeBorderWidths } from './borders';
+import { ThemeColors } from './colors';
+import { darkTheme } from './dark';
+import { ThemeDefaultFields } from './defaultFields';
+import { ThemeFocus } from './focus';
+import { ThemeFontFaces } from './fonts';
+import { ThemeRadii } from './radii';
+import { ThemeScreens } from './screens';
+import { ThemeSelection } from './selection';
+import { ThemeShadows } from './shadows';
+import { ThemeSpace } from './space';
+import { ThemeTimingFunction, ThemeTransitions } from './transitions';
+import { ThemeFonts, ThemeFontSizes, ThemeFontWeights, ThemeLetterSpacings, ThemeLineHeights, ThemeTexts, ThemeTextsFontColors, ThemeTextsFontFamily, ThemeTextsFontWeights, ThemeTextsTextTransform } from './typography';
+import { ThemeUnderline } from './underline';
+export type ThemeColorTokens = keyof ThemeColors;
+export type ThemeFontsUrl = 'https://cdn.welcome-ui.com/fonts' | 'https://cdn.welcometothejungle.com/fonts' | string;
+export type ThemeProps = {
+    [param: string]: unknown;
+    defaultFontFamily?: string;
+    defaultFontSize?: number;
+    defaultLetterSpacing?: string;
+    defaultLineHeight?: number;
+    fontsUrl?: ThemeFontsUrl;
+    headingFontFamily?: string;
+    iconFontFamily?: string;
+};
+export interface ThemeValues extends StyledComponentsTheme, XStyledTheme {
+    accordions: ThemeAccordions;
+    alerts: ThemeAlerts;
+    avatars: ThemeAvatars;
+    badges: ThemeBadges;
+    borderWidths: ThemeBorderWidths;
+    breadcrumbs: ThemeBreadcrumbs;
+    buttons: ThemeButtons;
+    cards: ThemeCards;
+    checkboxes: ThemeCheckboxes;
+    colors: ThemeColors;
+    dateTimePickerCommon: ThemeDateTimePickerCommon;
+    defaultFields: ThemeDefaultFields;
+    defaultLetterSpacing: string;
+    defaultLineHeight: number;
+    drawers: ThemeDrawers;
+    dropdownMenu: ThemeDropdownMenu;
+    fileDrops: ThemeFileDrops;
+    focus: ThemeFocus;
+    fontFaces: ThemeFontFaces;
+    fonts: ThemeFonts;
+    fontSizes: ThemeFontSizes;
+    fontsUrl: ThemeFontsUrl;
+    fontWeights: ThemeFontWeights;
+    hints: ThemeHints;
+    icons: ThemeIcons;
+    inset: ThemeSpace;
+    labels: ThemeLabels;
+    letterSpacings: ThemeLetterSpacings;
+    lineHeights: ThemeLineHeights;
+    links: ThemeLinks;
+    loaders: ThemeLoaders;
+    modals: ThemeModals;
+    pagination: ThemePagination;
+    popovers: ThemePopovers;
+    radii: ThemeRadii;
+    radios: ThemeRadios;
+    radiosTab: ThemeRadioTabs;
+    screens: ThemeScreens;
+    selection: ThemeSelection;
+    shadows: ThemeShadows;
+    sliders: ThemeSliders;
+    space: ThemeSpace;
+    swipers: ThemeSwipers;
+    tables: ThemeTables;
+    tabs: ThemeTabs;
+    tags: ThemeTags;
+    textareas: ThemeTextareas;
+    texts: ThemeTexts;
+    textsFontColors: ThemeTextsFontColors;
+    textsFontFamily: ThemeTextsFontFamily;
+    textsFontWeights: ThemeTextsFontWeights;
+    textsTextTransform: ThemeTextsTextTransform;
+    timingFunction: ThemeTimingFunction;
+    toasts: ThemeToasts;
+    toEm: (int: number) => string;
+    toggles: ThemeToggles;
+    tooltips: ThemeTooltips;
+    toPx: (int: number) => string;
+    toRem: (int: number) => string;
+    transformers: {
+        border: (value: CSSScalar) => CSSScalar;
+        px: (value: CSSScalar) => CSSScalar;
+    };
+    transitions: ThemeTransitions;
+    underline: ThemeUnderline;
+    variantIcon: ThemeVariantIcon;
+}
+type OverrideKeys = 'borderWidths' | 'colors' | 'fonts' | 'fontSizes' | 'fontWeights' | 'letterSpacings' | 'lineHeights' | 'radii' | 'screens' | 'shadows' | 'sizes' | 'space' | 'texts';
+type StyledComponentsTheme = Omit<StyledComponentDefaultTheme, OverrideKeys>;
+type XStyledTheme = Omit<XStyledDefaultTheme, OverrideKeys>;
+export declare const createTheme: (options?: ThemeProps) => ThemeValues;
+export { darkTheme };

package/dist/types/theme/radii.d.ts

@@ -0,0 +1,12 @@
+import { ThemeValues } from '.';
+export type ThemeRadii = {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+    full: string;
+    [key: number]: string;
+};
+export declare const getRadii: (theme: ThemeValues) => ThemeRadii;

package/dist/types/theme/screens.d.ts

@@ -0,0 +1,13 @@
+export type ThemeScreens = {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+    '3xl': number;
+    '4xl': number;
+    [key: string]: number;
+    [key: number]: number;
+};
+export declare const screens: ThemeScreens;

package/dist/types/theme/selection.d.ts

@@ -0,0 +1,4 @@
+import { CSSObject } from '@xstyled/styled-components';
+import { ThemeValues } from '.';
+export type ThemeSelection = CSSObject;
+export declare const getSelection: (theme: ThemeValues) => ThemeSelection;

package/dist/types/theme/shadows.d.ts

@@ -0,0 +1,5 @@
+export type ThemeShadows = {
+    sm: string;
+    md: string;
+};
+export declare const shadows: ThemeShadows;

package/dist/types/theme/space.d.ts

@@ -0,0 +1,18 @@
+import { ThemeValues } from '.';
+export type ThemeSpace = {
+    xxs: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+    '7xl': string;
+    [key: string]: string;
+    [key: number]: string;
+};
+export declare const getSpace: (theme: ThemeValues) => ThemeSpace;

package/dist/types/theme/transitions.d.ts

@@ -0,0 +1,13 @@
+import { CSSObject } from '@xstyled/styled-components';
+export type ThemeTimingFunction = {
+    primary: CSSObject['transition-timing-function'];
+    secondary: CSSObject['transition-timing-function'];
+    tertiary: CSSObject['transition-timing-function'];
+};
+export declare const timingFunction: ThemeTimingFunction;
+export type ThemeTransitions = {
+    fast: CSSObject['transition'];
+    medium: CSSObject['transition'];
+    slow: CSSObject['transition'];
+};
+export declare const transitions: ThemeTransitions;