welcome-ui 0.0.0-dev.1757005789578 → 0.0.0-dev.1758520464312

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

@@ -1,132 +0,0 @@
-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/tokens.d.ts

@@ -0,0 +1,297 @@
+export declare const semantics: {
+    readonly colors: {
+        readonly '--color-brand-10': "var(--color-yellow-10)";
+        readonly '--color-brand-20': "var(--color-yellow-20)";
+        readonly '--color-brand-30': "var(--color-yellow-30)";
+        readonly '--color-brand-40': "var(--color-yellow-40)";
+        readonly '--color-brand-50': "var(--color-yellow-50)";
+        readonly '--color-brand-60': "var(--color-yellow-60)";
+        readonly '--color-brand-70': "var(--color-yellow-70)";
+        readonly '--color-brand-80': "var(--color-yellow-80)";
+        readonly '--color-brand-90': "var(--color-yellow-90)";
+        readonly '--color-overlay': "color-mix(in oklab, var(--color-neutral-90) 55%, transparent)";
+        readonly '--color-secondary-blue': "var(--color-blue-40)";
+        readonly '--color-secondary-green': "var(--color-green-30)";
+        readonly '--color-secondary-orange': "var(--color-red-orange-40)";
+        readonly '--color-secondary-pink': "var(--color-pink-40)";
+        readonly '--color-secondary-teal': "var(--color-teal-40)";
+        readonly '--color-secondary-violet': "var(--color-violet-40)";
+    };
+    readonly fontSizes: {
+        readonly '--font-size-h0': "var(--font-size-65)";
+        readonly '--font-size-h1': "var(--font-size-45)";
+        readonly '--font-size-h2': "var(--font-size-36)";
+        readonly '--font-size-h3': "var(--font-size-26)";
+        readonly '--font-size-h4': "var(--font-size-20)";
+        readonly '--font-size-h5': "var(--font-size-16)";
+        readonly '--font-size-h6': "var(--font-size-14)";
+        readonly '--font-size-lg': "var(--font-size-18)";
+        readonly '--font-size-md': "var(--font-size-16)";
+        readonly '--font-size-sm': "var(--font-size-14)";
+        readonly '--font-size-subtitle-md': "var(--font-size-13)";
+        readonly '--font-size-subtitle-sm': "var(--font-size-11)";
+        readonly '--font-size-xl': "var(--font-size-24)";
+        readonly '--font-size-xs': "var(--font-size-12)";
+    };
+    readonly fontWeight: {
+        readonly '--font-weight-bold': "var(--font-weight-600)";
+        readonly '--font-weight-medium': "var(--font-weight-500)";
+        readonly '--font-weight-regular': "var(--font-weight-400)";
+    };
+    readonly heights: {
+        readonly '--height-elements-lg': "var(--height-40)";
+        readonly '--height-elements-md': "var(--height-32)";
+        readonly '--height-elements-sm': "var(--height-24)";
+        readonly '--height-elements-xl': "var(--height-48)";
+        readonly '--height-elements-xs': "var(--height-16)";
+        readonly '--height-elements-xxl': "var(--height-64)";
+        readonly '--height-elements-xxs': "var(--height-12)";
+    };
+    readonly lineHeights: {
+        readonly '--line-height-h0': "var(--line-height-72)";
+        readonly '--line-height-h1': "var(--line-height-48)";
+        readonly '--line-height-h2': "var(--line-height-40)";
+        readonly '--line-height-h3': "var(--line-height-32)";
+        readonly '--line-height-h4': "var(--line-height-24)";
+        readonly '--line-height-h5': "var(--line-height-20)";
+        readonly '--line-height-h6': "var(--line-height-18)";
+        readonly '--line-height-lg': "var(--line-height-24)";
+        readonly '--line-height-md': "var(--line-height-18)";
+        readonly '--line-height-sm': "var(--line-height-18)";
+        readonly '--line-height-subtitle-md': "var(--line-height-iso-font-size)";
+        readonly '--line-height-subtitle-sm': "var(--line-height-iso-font-size)";
+        readonly '--line-height-xs': "var(--line-height-14)";
+    };
+    readonly spacings: {
+        readonly '--spacing-3xl': "var(--spacing-48)";
+        readonly '--spacing-4xl': "var(--spacing-64)";
+        readonly '--spacing-5xl': "var(--spacing-96)";
+        readonly '--spacing-6xl': "var(--spacing-128)";
+        readonly '--spacing-7xl': "var(--spacing-192)";
+        readonly '--spacing-lg': "var(--spacing-16)";
+        readonly '--spacing-md': "var(--spacing-12)";
+        readonly '--spacing-sm': "var(--spacing-8)";
+        readonly '--spacing-xl': "var(--spacing-24)";
+        readonly '--spacing-xs': "var(--spacing-4)";
+        readonly '--spacing-xxl': "var(--spacing-32)";
+        readonly '--spacing-xxs': "var(--spacing-2)";
+    };
+};
+export declare const primitives: {
+    readonly borders: {
+        readonly '--border-width-lg': "3px";
+        readonly '--border-width-md': "2px";
+        readonly '--border-width-sm': "1px";
+    };
+    readonly colors: {
+        readonly '--color-beige-10': "#fbf9f7";
+        readonly '--color-beige-20': "#f6f3ef";
+        readonly '--color-beige-30': "#eae4de";
+        readonly '--color-beige-40': "#d2cbc3";
+        readonly '--color-beige-50': "#a7a096";
+        readonly '--color-beige-60': "#605b55";
+        readonly '--color-beige-70': "#4d4944";
+        readonly '--color-beige-80': "#33302d";
+        readonly '--color-beige-90': "#1e1c1a";
+        readonly '--color-blue-10': "#e0f5ff";
+        readonly '--color-blue-20': "#bbeaff";
+        readonly '--color-blue-30': "#9bdef7";
+        readonly '--color-blue-40': "#55c3e9";
+        readonly '--color-blue-50': "#27a5d0";
+        readonly '--color-blue-60': "#057aa3";
+        readonly '--color-blue-70': "#025a79";
+        readonly '--color-blue-80': "#013c50";
+        readonly '--color-blue-90': "#00202b";
+        readonly '--color-green-10': "#eaffd4";
+        readonly '--color-green-20': "#d6f6b4";
+        readonly '--color-green-30': "#bade94";
+        readonly '--color-green-40': "#9fc873";
+        readonly '--color-green-50': "#83ad57";
+        readonly '--color-green-60': "#5a8034";
+        readonly '--color-green-70': "#40611f";
+        readonly '--color-green-80': "#2a4210";
+        readonly '--color-green-90': "#142603";
+        readonly '--color-neutral-10': "#ffffff";
+        readonly '--color-neutral-20': "#f3f3f3";
+        readonly '--color-neutral-30': "#dedede";
+        readonly '--color-neutral-40': "#bdbdbd";
+        readonly '--color-neutral-50': "#989898";
+        readonly '--color-neutral-60': "#585858";
+        readonly '--color-neutral-70': "#444444";
+        readonly '--color-neutral-80': "#212121";
+        readonly '--color-neutral-90': "#000000";
+        readonly '--color-orange-10': "#ffebce";
+        readonly '--color-orange-20': "#ffd495";
+        readonly '--color-orange-30': "#ffbb59";
+        readonly '--color-orange-40': "#ff9f14";
+        readonly '--color-orange-50': "#db860a";
+        readonly '--color-orange-60': "#a6670a";
+        readonly '--color-orange-70': "#824f06";
+        readonly '--color-orange-80': "#573607";
+        readonly '--color-orange-90': "#382303";
+        readonly '--color-pink-10': "#ffeaf5";
+        readonly '--color-pink-20': "#ffd5eb";
+        readonly '--color-pink-30': "#feb7dc";
+        readonly '--color-pink-40': "#f696c8";
+        readonly '--color-pink-50': "#e468a8";
+        readonly '--color-pink-60': "#c24887";
+        readonly '--color-pink-70': "#972962";
+        readonly '--color-pink-80': "#6d1142";
+        readonly '--color-pink-90': "#3c0725";
+        readonly '--color-red-10': "#fbdedc";
+        readonly '--color-red-20': "#fcc7c3";
+        readonly '--color-red-30': "#fdb3ae";
+        readonly '--color-red-40': "#ff9490";
+        readonly '--color-red-50': "#ff6165";
+        readonly '--color-red-60': "#e1003a";
+        readonly '--color-red-70': "#a80029";
+        readonly '--color-red-80': "#75001a";
+        readonly '--color-red-90': "#450101";
+        readonly '--color-red-orange-10': "#ffded0";
+        readonly '--color-red-orange-20': "#ffc9b2";
+        readonly '--color-red-orange-30': "#ffb595";
+        readonly '--color-red-orange-40': "#ff9868";
+        readonly '--color-red-orange-50': "#e67b49";
+        readonly '--color-red-orange-60': "#c45927";
+        readonly '--color-red-orange-70': "#9f4217";
+        readonly '--color-red-orange-80': "#6d2605";
+        readonly '--color-red-orange-90': "#451701";
+        readonly '--color-teal-10': "#d5fffa";
+        readonly '--color-teal-20': "#aaf4eb";
+        readonly '--color-teal-30': "#6de1d2";
+        readonly '--color-teal-40': "#00c7ae";
+        readonly '--color-teal-50': "#01aa95";
+        readonly '--color-teal-60': "#008070";
+        readonly '--color-teal-70': "#00544a";
+        readonly '--color-teal-80': "#003d35";
+        readonly '--color-teal-90': "#00211d";
+        readonly '--color-violet-10': "#f2f2ff";
+        readonly '--color-violet-20': "#e0e0ff";
+        readonly '--color-violet-30': "#c9c9ff";
+        readonly '--color-violet-40': "#acacff";
+        readonly '--color-violet-50': "#9080f0";
+        readonly '--color-violet-60': "#7958d6";
+        readonly '--color-violet-70': "#593cac";
+        readonly '--color-violet-80': "#422a86";
+        readonly '--color-violet-90': "#1f0e51";
+        readonly '--color-yellow-10': "#fff8d9";
+        readonly '--color-yellow-20': "#fff1b2";
+        readonly '--color-yellow-30': "#ffe166";
+        readonly '--color-yellow-40': "#ffcd00";
+        readonly '--color-yellow-50': "#e5b800";
+        readonly '--color-yellow-60': "#b69200";
+        readonly '--color-yellow-70': "#846a01";
+        readonly '--color-yellow-80': "#604d00";
+        readonly '--color-yellow-90': "#423500";
+    };
+    readonly fontFamilies: {
+        readonly '--default-font-family': "\"Work Sans\", sans-serif";
+        readonly '--font-family-headings': "\"welcome-font\", sans-serif";
+        readonly '--font-family-icons': "\"welcome-icon-font\"";
+    };
+    readonly fontSizes: {
+        readonly '--font-size-11': "0.6875rem";
+        readonly '--font-size-12': "0.75rem";
+        readonly '--font-size-13': "0.8125rem";
+        readonly '--font-size-14': "0.875rem";
+        readonly '--font-size-16': "1rem";
+        readonly '--font-size-18': "1.125rem";
+        readonly '--font-size-20': "1.25rem";
+        readonly '--font-size-24': "1.5rem";
+        readonly '--font-size-26': "1.625rem";
+        readonly '--font-size-36': "2.25rem";
+        readonly '--font-size-45': "2.8125rem";
+        readonly '--font-size-65': "4.0625rem";
+    };
+    readonly fontWeights: {
+        readonly '--font-weight-400': "400";
+        readonly '--font-weight-500': "500";
+        readonly '--font-weight-600': "600";
+    };
+    readonly heights: {
+        readonly '--height-8': "0.5rem";
+        readonly '--height-10': "0.625rem";
+        readonly '--height-12': "0.75rem";
+        readonly '--height-16': "1rem";
+        readonly '--height-20': "1.25rem";
+        readonly '--height-24': "1.5rem";
+        readonly '--height-32': "2rem";
+        readonly '--height-40': "2.5rem";
+        readonly '--height-48': "3rem";
+        readonly '--height-64': "4rem";
+    };
+    readonly letterSpacings: {
+        readonly '--letter-spacing-h0': "-0.10625rem";
+        readonly '--letter-spacing-h1': "-0.075rem";
+        readonly '--letter-spacing-h2': "-0.0625rem";
+        readonly '--letter-spacing-h3': "-0.05625rem";
+        readonly '--letter-spacing-h4': "-0.0375rem";
+        readonly '--letter-spacing-h5': "-0.03125rem";
+        readonly '--letter-spacing-h6': "-0.03125rem";
+        readonly '--letter-spacing-lg': "-0.019rem";
+        readonly '--letter-spacing-md': "-0.019rem";
+        readonly '--letter-spacing-sm': "-0.019rem";
+        readonly '--letter-spacing-subtitle-md': "-0.0125rem";
+        readonly '--letter-spacing-subtitle-sm': "-0.0125rem";
+        readonly ' --letter-spacing-xs': "-0.0125rem";
+    };
+    readonly lineHeights: {
+        readonly '--line-height-14': "0.875rem";
+        readonly '--line-height-16': "1rem";
+        readonly '--line-height-18': "1.125rem";
+        readonly '--line-height-24': "1.5rem";
+        readonly '--line-height-32': "2rem";
+        readonly '--line-height-40': "2.5rem";
+        readonly '--line-height-48': "3rem";
+        readonly '--line-height-72': "4.5rem";
+        readonly '--line-height-iso-font-size': "1";
+    };
+    readonly radii: {
+        readonly '--radius-2xl': "1.5rem";
+        readonly '--radius-circle': "100%";
+        readonly '--radius-lg': "0.5rem";
+        readonly '--radius-md': "0.25rem";
+        readonly '--radius-sm': "0.125rem";
+        readonly '--radius-xl': "1rem";
+    };
+    readonly screens: {
+        readonly '--breakpoint-2xl': "1440px";
+        readonly '--breakpoint-3xl': "1620px";
+        readonly '--breakpoint-4xl': "1920px";
+        readonly '--breakpoint-lg': "980px";
+        readonly '--breakpoint-md': "736px";
+        readonly '--breakpoint-sm': "480px";
+        readonly '--breakpoint-xl': "1280px";
+        readonly '--breakpoint-xs': "0px";
+    };
+    readonly shadows: {
+        readonly '--shadow-focus': "0 0 0 2px var(--color-brand-40)";
+        readonly '--shadow-focus-danger': "0 0 0 2px var(--color-red-30)";
+        readonly '--shadow-focus-success': "0 0 0 2px var(--color-green-30)";
+        readonly '--shadow-focus-warning': "0 0 0 2px var(--color-orange-20)";
+        readonly '--shadow-md': "3px 4px 10px 0 color-mix(in oklab, var(--color-neutral-90) 7%, transparent)";
+        readonly '--shadow-sm': "1px 2px 4px 0 color-mix(in oklab, var(--color-neutral-90) 5%, transparent)";
+    };
+    readonly spacings: {
+        readonly '--spacing-2': "0.125rem";
+        readonly '--spacing-4': "0.25rem";
+        readonly '--spacing-8': "0.5rem";
+        readonly '--spacing-12': "0.75rem";
+        readonly '--spacing-16': "1rem";
+        readonly '--spacing-24': "1.5rem";
+        readonly '--spacing-32': "2rem";
+        readonly '--spacing-48': "3rem";
+        readonly '--spacing-64': "4rem";
+        readonly '--spacing-96': "6rem";
+        readonly '--spacing-128': "8rem";
+        readonly '--spacing-192': "12rem";
+    };
+    readonly transitions: {
+        readonly '--duration-fast': "100ms";
+        readonly '--duration-medium': "300ms";
+        readonly '--duration-slow': "500ms";
+        readonly '--timing-primary': "ease";
+        readonly '--timing-secondary': "linear";
+        readonly '--timing-tertiary': "cubic-bezier(0.41, 0.094, 0.54, 0.07)";
+    };
+};

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

@@ -0,0 +1,13 @@
+import { primitives, semantics } from './tokens';
+export type ColorMix = `color-mix(in oklab, var(${ColorTokens}) ${OpacityRanges}%, transparent)`;
+export type ColorTokens = 'transparent' | PrimitiveColorTokens | SemanticColorTokens;
+export type PolymorphicProps<E extends React.ElementType> = React.PropsWithChildren<React.ComponentPropsWithoutRef<E> & {
+    as?: E;
+}>;
+export type SemanticFontSizeTokens = keyof (typeof semantics)['fontSizes'];
+export type SemanticHeightTokens = keyof (typeof semantics)['heights'];
+export type SemanticSpacingTokens = keyof (typeof semantics)['spacings'];
+type OpacityRanges = 10 | 40;
+type PrimitiveColorTokens = keyof (typeof primitives)['colors'];
+type SemanticColorTokens = keyof (typeof semantics)['colors'];
+export {};

package/dist/types/utils/classNames.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/utils/forwardRefWithAs.d.ts

@@ -0,0 +1,77 @@
+import { default as React } from 'react';
+/**
+ * The following source code is mainly inspired by
+ * https://github.com/pluralsight/classic-design-system/blob/08f0962dec18d99e1799a16c7b7eac86f01cbc27/packages/util/src/primatives.ts
+ */
+export type As<BaseProps = any> = React.ElementType<BaseProps>;
+/**
+ * Omit will not distribute over unions by default, this utility type will
+ * distribute it, allowing to omit keys from each member of the union.
+ *
+ * @example
+ *  type A = { a: string; b: number }
+ *  type B = { a: string; c: boolean }
+ *  type Union = A | B
+ *
+ *  // Without DistributiveOmit
+ *  type Test1 = Omit<Union, 'a'> // never  (because 'a' is in both A and B)
+ *  type Test2 = Omit<Union, 'b'> // B      (because 'b' is not in B)
+ */
+export type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
+export interface ForwardRefWithAsRenderFunction<DefaultComponentType extends As, ComponentProps extends PropsType = Record<string, any>> {
+    (props: PropsFromAs<DefaultComponentType, ComponentProps>, ref: React.Ref<React.ElementRef<DefaultComponentType>>): null | React.ReactElement;
+    /**
+     * defaultProps are not supported on render functions
+     */
+    defaultProps?: never;
+    displayName?: string;
+    /**
+     * propTypes are not supported on render functions
+     */
+    propTypes?: never;
+}
+export interface FunctionComponentWithAs<DefaultComponentType extends As, ComponentProps extends PropsType> {
+    /**
+     * Inherited from React.FunctionComponent with modification to support `as`
+     */
+    <CompType extends As = DefaultComponentType>(props: PropsWithAs<CompType, ComponentProps>, context?: any): null | React.ReactElement<any, any>;
+    /**
+     * Inherited from React.FunctionComponent
+     */
+    defaultProps?: Partial<PropsWithAs<DefaultComponentType, ComponentProps>>;
+    displayName?: string;
+}
+/**
+ * This will merge two prop objects, giving P1 priority over P2
+ * In other words, any props in P1 that are also in P2 will override the ones in P2
+ * This is useful when combining the props of the `as` component with your own props
+ */
+export type MergeProps<P1 = EmptyProps, P2 = EmptyProps> = DistributiveOmit<P2, keyof P1> & P1;
+/**
+ * Get the props of a component with `as` support
+ * This will take care of the ref and the merging of the props
+ */
+export type PropsFromAs<CompType extends As, ComponentProps extends PropsType> = React.PropsWithoutRef<PropsWithAs<CompType, ComponentProps>>;
+/**
+ * Props of a component with `as` support
+ */
+export type PropsWithAs<CompType extends As, ComponentProps extends PropsType> = MergeProps<WithAs<CompType, ComponentProps>, React.ComponentProps<CompType>>;
+/**
+ * An empty object type
+ */
+type EmptyProps = Record<never, never>;
+/**
+ * PropsType can either be an object or null/undefined
+ */
+type PropsType = null | Record<string, any>;
+/**
+ * Adds the `as` prop to a component's props
+ */
+type WithAs<DefaultComponentType extends As, ComponentProps extends EmptyProps> = MergeProps<{
+    as?: DefaultComponentType;
+}, ComponentProps>;
+/**
+ * Wraps a component with a forwardRef and adds the `as` prop support
+ */
+export declare function forwardRefWithAs<ComponentProps extends PropsType, DefaultComponentType extends As = 'div'>(render: ForwardRefWithAsRenderFunction<DefaultComponentType, ComponentProps>): FunctionComponentWithAs<DefaultComponentType, ComponentProps>;
+export {};

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

@@ -1,10 +1 @@
-export * from './field-styles';
-export * from './format-bytes';
-export * from './hex-to-rgba';
-export * from './overflow-ellipsis';
-export * from './throttle';
-export * from './ts-utils';
-export * from './use-copy-text';
-export * from './use-fork-ref';
-export * from './use-isomorphic-layout-effect';
-export * from './use-viewport';
+export * from './classNames';

package/dist/utils.js

@@ -1,33 +1,22 @@
 "use client";
-import { F as y, d } from "./field-styles-CfVLcVQp.js";
-import { f as E } from "./format-bytes-gST0dTWd.js";
-import { c as p } from "./index-BmrBYZye.js";
-import { h as T } from "./index-BmrBYZye.js";
-import { o as h } from "./overflow-ellipsis-DGV5Kgt-.js";
-import { t as L } from "./throttle-BDBzFeFj.js";
-import { useState as a, useCallback as i } from "react";
-import { s as g, u as v } from "./use-fork-ref-CUZErtAC.js";
-import { u as k } from "./use-isomorphic-layout-effect-Izr-e2pi.js";
-import { u as B } from "./use-viewport-Bswy2nz0.js";
-function c(e, r) {
-  const [s, t] = a();
-  return [i(() => {
-    let o;
-    typeof e == "number" || typeof e == "string" ? o = e.toString() : e.current instanceof HTMLInputElement ? o = e.current.value : e.current instanceof HTMLElement && (o = e.current.textContent);
-    const f = p(o);
-    t(f), r && setTimeout(t, r);
-  }, [e, r]), s];
+function a(n) {
+  return function(...f) {
+    const s = /* @__PURE__ */ new Set();
+    function c(...i) {
+      for (const t of i)
+        if (t) {
+          if (typeof t == "string")
+            s.add((n == null ? void 0 : n[t]) || t);
+          else if (Array.isArray(t))
+            c(...t);
+          else if (typeof t == "object")
+            for (const r in t)
+              Object.prototype.hasOwnProperty.call(t, r) && t[r] && s.add((n == null ? void 0 : n[r]) || r);
+        }
+    }
+    return c(...f), Array.from(s).join(" ");
+  };
 }
 export {
-  y as FIELD_ICON_SIZE,
-  d as defaultFieldStyles,
-  E as formatBytes,
-  T as hexToRGBA,
-  h as overflowEllipsis,
-  g as setRef,
-  L as throttle,
-  c as useCopyText,
-  v as useForkRef,
-  k as useIsomorphicLayoutEffect,
-  B as useViewportSize
+  a as classNames
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "welcome-ui",
-  "version": "0.0.0-dev.1757005789578",
+  "version": "0.0.0-dev.1758520464312",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "files": [
     "dist"
@@ -17,10 +17,6 @@
       "import": "./dist/utils.js"
     },
     "./*.css": "./dist/*.css",
-    "./Tailwind*": {
-      "types": "./dist/types/TailwindComponents/*/index.d.ts",
-      "import": "./dist/Tailwind*.js"
-    },
     "./*": {
       "types": "./dist/types/components/*/index.d.ts",
       "import": "./dist/*.js"
@@ -90,7 +86,6 @@
     "tsx": "^4.20.3",
     "vite": "^6.3.5",
     "vite-plugin-dts": "^4.5.3",
-    "vite-plugin-static-copy": "^2.3.0",
     "vitest": "^3.1.4"
   },
   "peerDependencies": {

package/dist/AXB53BZF-BKj50_R5.js

@@ -1,25 +0,0 @@
-"use client";
-import { u } from "./P4IRICAX-D_FDslnK.js";
-import { a as c } from "./VGCJ63VH-CCiPNdjP.js";
-import { f as l, c as p, h as D, _ as m, i as g, g as a, s as v } from "./LVA2YJMS-yg4tmz-M.js";
-var f = "button", d = p(
-  function(r) {
-    var s = r, { store: o } = s, e = m(s, ["store"]);
-    const i = c();
-    o = o || i, g(
-      o,
-      process.env.NODE_ENV !== "production" && "DialogDisclosure must receive a `store` prop or be wrapped in a DialogProvider component."
-    );
-    const n = o.useState("contentElement");
-    return e = a({
-      "aria-haspopup": v(n, "dialog")
-    }, e), e = u(a({ store: o }, e)), e;
-  }
-), P = l(function(r) {
-  const s = d(r);
-  return D(f, s);
-});
-export {
-  P as D,
-  d as u
-};