@fuzzy-ui/react 0.1.0

package/dist/types/style/stitches.config.d.ts

@@ -0,0 +1,502 @@
+import type { CSS as C } from '@stitches/core';
+import type CreateCore from '@stitches/core/types/stitches';
+import type { Theme } from './types';
+import type { Tokens } from './defaults/theme';
+export declare const newTheme: Stitches['createTheme'];
+export declare const css: Stitches['css'];
+export declare const globalCss: Stitches['globalCss'];
+export declare const keyframes: Stitches['keyframes'];
+export declare const getCssText: Stitches['getCssText'];
+export declare const defaultTheme: Stitches['theme'];
+export declare const defaultConfig: Stitches['config'];
+export declare const defaultClass: string;
+declare const SEMANTIC: readonly ["primary", "secondary", "tertiary", "success", "warning", "error"];
+declare const fontSizes: {
+    '2xs': string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+    '7xl': string;
+    '8xl': string;
+    '9xl': string;
+};
+/** FontSizes expects types String or Number, otherwise returns undefined */
+export declare const fsFixer: (fs?: FontSizes) => string | number | undefined;
+/** the "default" color will be treated as undefined */
+export declare const isSemanticColor: (color?: SemanticKeys) => "primary" | "secondary" | "tertiary" | "success" | "warning" | "error" | undefined;
+/** color "default" will be returned as fallback color or undefined */
+export declare const semanticScaler: (color?: SemanticKeys | (string & {}), fallback?: string, options?: {
+    /** Extend color value with token like "$colors$red" instead of "red", default is true.  */
+    tokenExt?: boolean;
+    /** Scale of color from 1 to 12 in string or number, default is 9. */
+    scale?: Scale;
+    /** Combine fallback color with scale number, default is true. */
+    fallbackScaled?: boolean;
+}) => string | undefined;
+export declare const cfgGen: (cls?: string) => {
+    prefix: NAMED;
+    media: MEDIA;
+    themeMap: THEME_MAP;
+    utils: UTILS;
+    theme: THEME;
+};
+export declare const createTheme: <T extends Theme>({ type, theme, className }: T) => string & {
+    className: string;
+    selector: string;
+} & import("@stitches/core/types/stitches").ThemeTokens<{
+    space: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        13: string;
+        14: string;
+        15: string;
+        16: string;
+        17: string;
+        18: string;
+        19: string;
+        20: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+        40: string;
+        44: string;
+        48: string;
+        52: string;
+        56: string;
+        60: string;
+        64: string;
+        72: string;
+        80: string;
+        96: string;
+        min: string;
+        max: string;
+        fit: string;
+        screen: string;
+        full: string;
+        px: string;
+    };
+    sizes: {
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+        13: string;
+        14: string;
+        15: string;
+        16: string;
+        17: string;
+        18: string;
+        19: string;
+        20: string;
+        24: string;
+        28: string;
+        32: string;
+        36: string;
+        40: string;
+        44: string;
+        48: string;
+        52: string;
+        56: string;
+        60: string;
+        64: string;
+        72: string;
+        80: string;
+        96: string;
+        min: string;
+        max: string;
+        fit: string;
+        screen: string;
+        full: string;
+        px: string;
+    };
+    fonts: {
+        sans: string;
+        serif: string;
+        mono: string;
+    };
+    fontSizes: {
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+    };
+    fontWeights: {
+        hairline: string;
+        thin: string;
+        light: string;
+        normal: string;
+        medium: string;
+        semibold: string;
+        bold: string;
+        extrabold: string;
+        black: string;
+    };
+    radii: {
+        xs: string;
+        sm: string;
+        md: string;
+        base: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        squared: string;
+        rounded: string;
+        pill: string;
+    };
+    lineHeights: {
+        xs: string;
+        sm: string;
+        base: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+        '6xl': string;
+        '7xl': string;
+        '8xl': string;
+        '9xl': string;
+    };
+    letterSpacings: {
+        tighter: string;
+        tight: string;
+        normal: string;
+        wide: string;
+        wider: string;
+        widest: string;
+    };
+    zIndices: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        10: string;
+        max: string;
+    };
+    borderWidths: {
+        light: string;
+        normal: string;
+        bold: string;
+        extrabold: string;
+        black: string;
+    };
+    transitions: {
+        default: string;
+        button: string;
+        card: string;
+    };
+    colors: {
+        disable2: string;
+        disable1: string;
+        disable3: string;
+        disable4: string;
+        disable5: string;
+        disable6: string;
+        disable7: string;
+        disable8: string;
+        disable9: string;
+        disable10: string;
+        disable11: string;
+        disable12: string;
+        neutral1: string;
+        neutral2: string;
+        neutral3: string;
+        neutral4: string;
+        neutral5: string;
+        neutral6: string;
+        neutral7: string;
+        neutral8: string;
+        neutral9: string;
+        neutral10: string;
+        neutral11: string;
+        neutral12: string;
+        error1: string;
+        error2: string;
+        error3: string;
+        error4: string;
+        error5: string;
+        error6: string;
+        error7: string;
+        error8: string;
+        error9: string;
+        error10: string;
+        error11: string;
+        error12: string;
+        warning1: string;
+        warning2: string;
+        warning3: string;
+        warning4: string;
+        warning5: string;
+        warning6: string;
+        warning7: string;
+        warning8: string;
+        warning9: string;
+        warning10: string;
+        warning11: string;
+        warning12: string;
+        success1: string;
+        success2: string;
+        success3: string;
+        success4: string;
+        success5: string;
+        success6: string;
+        success7: string;
+        success8: string;
+        success9: string;
+        success10: string;
+        success11: string;
+        success12: string;
+        tertiary1: string;
+        tertiary2: string;
+        tertiary3: string;
+        tertiary4: string;
+        tertiary5: string;
+        tertiary6: string;
+        tertiary7: string;
+        tertiary8: string;
+        tertiary9: string;
+        tertiary10: string;
+        tertiary11: string;
+        tertiary12: string;
+        secondary1: string;
+        secondary2: string;
+        secondary3: string;
+        secondary4: string;
+        secondary5: string;
+        secondary6: string;
+        secondary7: string;
+        secondary8: string;
+        secondary9: string;
+        secondary10: string;
+        secondary11: string;
+        secondary12: string;
+        primary1: string;
+        primary2: string;
+        primary3: string;
+        primary4: string;
+        primary5: string;
+        primary6: string;
+        primary7: string;
+        primary8: string;
+        primary9: string;
+        primary10: string;
+        primary11: string;
+        primary12: string;
+        foregroundA2: string;
+        foregroundA1: string;
+        foregroundA3: string;
+        foregroundA4: string;
+        foregroundA5: string;
+        foregroundA6: string;
+        foregroundA7: string;
+        foregroundA8: string;
+        foregroundA9: string;
+        foregroundA10: string;
+        foregroundA11: string;
+        foregroundA12: string;
+        backgroundA2: string;
+        backgroundA1: string;
+        backgroundA3: string;
+        backgroundA4: string;
+        backgroundA5: string;
+        backgroundA6: string;
+        backgroundA7: string;
+        backgroundA8: string;
+        backgroundA9: string;
+        backgroundA10: string;
+        backgroundA11: string;
+        backgroundA12: string;
+        whiteA1: string;
+        whiteA2: string;
+        whiteA3: string;
+        whiteA4: string;
+        whiteA5: string;
+        whiteA6: string;
+        whiteA7: string;
+        whiteA8: string;
+        whiteA9: string;
+        whiteA10: string;
+        whiteA11: string;
+        whiteA12: string;
+        blackA1: string;
+        blackA2: string;
+        blackA3: string;
+        blackA4: string;
+        blackA5: string;
+        blackA6: string;
+        blackA7: string;
+        blackA8: string;
+        blackA9: string;
+        blackA10: string;
+        blackA11: string;
+        blackA12: string;
+        white: string;
+        black: string;
+        text: string;
+        background: string;
+        foreground: string;
+        divider: string;
+        subtleBackground: string;
+    };
+    shadows: {
+        xxs: string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        '2xl': string;
+        '3xl': string;
+        '4xl': string;
+        '5xl': string;
+    };
+    color: {
+        xScheme: number;
+    };
+} & {
+    borderStyles: {
+        [x: string]: string | number | boolean;
+        [x: number]: string | number | boolean;
+    };
+    borderWidths: {
+        [x: string]: string | number | boolean;
+        [x: number]: string | number | boolean;
+    };
+    colors: {
+        [x: string]: string | number | boolean;
+        [x: number]: string | number | boolean;
+    };
+    fonts: {
+        [x: string]: string | number | boolean;
+        [x: number]: string | number | boolean;
+    };
+    fontSizes: {
+        [x: string]: string | number | boolean;
+        [x: number]: string | number | boolean;
+    };
+    fontWeights: {
+        [x: string]: string | number | boolean;
+        [x: number]: string | number | boolean;
+    };
+    letterSpacings: {
+        [x: string]: string | number | boolean;
+        [x: number]: string | number | boolean;
+    };
+    lineHeights: {
+        [x: string]: string | number | boolean;
+        [x: number]: string | number | boolean;
+    };
+    radii: {
+        [x: string]: string | number | boolean;
+        [x: number]: string | number | boolean;
+    };
+    shadows: {
+        [x: string]: string | number | boolean;
+        [x: number]: string | number | boolean;
+    };
+    space: {
+        [x: string]: string | number | boolean;
+        [x: number]: string | number | boolean;
+    };
+    sizes: {
+        [x: string]: string | number | boolean;
+        [x: number]: string | number | boolean;
+    };
+    transitions: {
+        [x: string]: string | number | boolean;
+        [x: number]: string | number | boolean;
+    };
+    zIndices: {
+        [x: string]: string | number | boolean;
+        [x: number]: string | number | boolean;
+    };
+}, string> & {
+    set: {
+        class: string;
+        scheme: "light" | "dark";
+    };
+};
+type StringOrNumber = (string & {}) | number;
+type ScaleNum = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type Scale = `${ScaleNum}` | ScaleNum;
+export type SemanticKeys = (typeof SEMANTIC)[number] | 'default';
+export type CSSColorKeys = Extract<CSS['color'], string>;
+export type Config = Stitches['config'];
+export type CSS = C<Config>;
+export type WithStyleConfig = Parameters<typeof css.withConfig>[0];
+export type CSSContainer = {
+    cssContainer?: CSS;
+};
+export type FontSizes = keyof typeof fontSizes | StringOrNumber;
+type NAMED = string;
+type MEDIA = Tokens['media'];
+type THEME = Tokens['theme'];
+type THEME_MAP = Tokens['themeMap'];
+type UTILS = Tokens['utils'];
+type Stitches = CreateCore<NAMED, MEDIA, THEME, THEME_MAP, UTILS>;
+export {};

package/dist/types/style/styled.d.ts

@@ -0,0 +1,3 @@
+import type { Styled } from './types';
+declare const styled: Styled;
+export default styled;

package/dist/types/style/types.d.ts

@@ -0,0 +1,151 @@
+import type { ForwardRefExoticComponent, ReactElement, ElementType, ComponentType, JSXElementConstructor, ComponentPropsWithRef } from 'react';
+import type { Assign, Function as Fn, String as Str, WideObject, Widen } from '@stitches/core/types/util';
+import type { RemoveIndex } from '@stitches/core/types/stitches';
+import type { TransformProps, $$StyledComponentType, $$StyledComponentProps, $$StyledComponentMedia, StyledComponentProps as SCProps } from '@stitches/core/types/styled-component';
+import type { CSS, Config, WithStyleConfig } from './stitches.config';
+import { cfgGen } from './stitches.config';
+export type { PropertyValue, ScaleValue, CSSProperties } from '@stitches/core/types';
+export type EI<T> = T;
+type TokenValues = {
+    [Token in number | string]: boolean | number | string;
+};
+type TokenTheme = {
+    [K in keyof Config['theme']]: Config['theme'][K] & TokenValues;
+};
+declare namespace ConfigType {
+    type Theme<T = {}> = {
+        borderStyles?: TokenValues;
+        borderWidths?: TokenValues;
+        colors?: TokenValues;
+        fonts?: TokenValues;
+        fontSizes?: TokenValues;
+        fontWeights?: TokenValues;
+        letterSpacings?: TokenValues;
+        lineHeights?: TokenValues;
+        radii?: TokenValues;
+        shadows?: TokenValues;
+        space?: TokenValues;
+        sizes?: TokenValues;
+        transitions?: TokenValues;
+        zIndices?: TokenValues;
+    } & {
+        [Scale in keyof T]: {
+            [Token in keyof T[Scale]]: T[Scale][Token] extends boolean | number | string ? T[Scale][Token] : boolean | number | string;
+        };
+    };
+}
+export type ThemeCfg<T = {}> = ConfigType.Theme<T>;
+export type Theme = {
+    type?: 'dark' | 'light';
+    className?: string;
+    theme?: (TokenTheme & {
+        [Token in number | string]: TokenValues;
+    }) | {};
+};
+type ThemeData = {
+    [themeName: string]: {
+        class: string;
+        scheme: string;
+    };
+};
+export interface UseThemeProps {
+    /** List of all available theme names */
+    themes: string[];
+    /** Forced theme name for the current page */
+    forcedTheme?: string;
+    /** Update the theme */
+    setTheme: (theme: string) => void;
+    /** Active theme name */
+    theme?: string;
+    /** If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical to `theme` */
+    resolvedTheme?: string;
+    /** Current config theme */
+    config?: ReturnType<typeof cfgGen>;
+    /** Get current theme scheme.  */
+    scheme?: 'dark' | 'light';
+}
+export interface ThemeProviderProps {
+    /** Forced theme name for the current page */
+    forcedTheme?: string;
+    /** Whether to switch between dark and light themes based on prefers-color-scheme */
+    enableSystem?: boolean;
+    /** Disable all CSS transitions when switching themes */
+    disableTransitionOnChange?: boolean;
+    /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */
+    enableColorScheme?: boolean;
+    /** Key used to store theme setting in localStorage */
+    storageKey?: string;
+    /** Default theme name. If `enableSystem` is false, the default theme is light */
+    defaultTheme?: string;
+    /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
+    themes?: ThemeData;
+    /** Nonce string to pass to the inline script for CSP headers */
+    nonce?: string;
+    children?: React.ReactNode;
+}
+/** Unique symbol used to reference the props of a Styled Component. */
+declare const $$StyledCustomProps: unique symbol;
+/** Unique symbol used to reference the props of a Styled Component. */
+type $$StyledCustomProps = typeof $$StyledCustomProps;
+interface Media extends EI<Config['media']> {
+}
+type _CSS = {
+    css?: CSS;
+};
+type _AS = {
+    as?: ElementType;
+};
+type AS_CSS = _AS & _CSS;
+type Transform<P = {}> = TransformProps<P, Media>;
+type VariantProps<P extends any, K extends keyof P> = Transform<{
+    [X in Exclude<keyof P, K>]: P[X];
+}> & {
+    [X in K]: P[X];
+};
+type Composer<Composers = []> = {
+    [K in keyof Composers]: string extends Composers[K] ? Composers[K] : Composers[K] extends string | ComponentType<any> | Fn ? Composers[K] : RemoveIndex<CSS> & {
+        /** The **variants** property lets you set a subclass of styles based on a key-value pair. */
+        variants?: {
+            [Name in string]: {
+                [Pair in number | string]: CSS;
+            };
+        };
+        /** The **compoundVariants** property lets you to set a subclass of styles based on a combination of active variants. */
+        compoundVariants?: Array<('variants' extends keyof Composers[K] ? {
+            [Name in keyof Composers[K]['variants']]?: Widen<keyof Composers[K]['variants'][Name]> | Str;
+        } : WideObject) & {
+            css: CSS;
+        }>;
+        /** The **defaultVariants** property allows you to predefine the active key-value pairs of variants. */
+        defaultVariants?: 'variants' extends keyof Composers[K] ? {
+            [Name in keyof Composers[K]['variants']]?: Widen<keyof Composers[K]['variants'][Name]> | Str;
+        } : WideObject;
+    } & CSS & {
+        [K2 in keyof Composers[K]]: K2 extends 'compoundVariants' | 'defaultVariants' | 'variants' ? unknown : K2 extends keyof CSS ? CSS[K2] : unknown;
+    };
+};
+type Composition = Array<string | ElementType | ForwardRefExoticComponent<any> | JSXElementConstructor<any> | Fn | {
+    [name: string]: unknown;
+}>;
+type StyledFunctionType = <Type extends ElementType, Composers extends Composition = []>(type: Type, ...composers: Composer<Composers>) => StyledComponent<Type, SCProps<Composers>>;
+/** Returns a new Styled Component. */
+export interface StyledComponent<Type = 'span', Props = {}> extends ForwardRefExoticComponent<Assign<Type extends ElementType ? ComponentPropsWithRef<Type> : never, Transform<Props> & AS_CSS>> {
+    (props: Assign<Type extends ElementType ? ComponentPropsWithRef<Type> : {}, Transform<Props> & AS_CSS>): ReactElement | null;
+    <C extends CSS, As extends ElementType = Type extends ElementType ? Type : any, InnerProps = Type extends StyledComponent<any, infer IP> ? IP : {}>(props: Assign<ComponentPropsWithRef<As extends ElementType ? As : never>, Transform<Assign<InnerProps, Props>> & {
+        as?: As;
+        css?: {
+            [K in keyof C]: K extends keyof CSS ? CSS[K] : never;
+        };
+    }>): ReactElement | null;
+    className: string;
+    selector: string;
+    [$$StyledComponentType]: Type;
+    [$$StyledComponentProps]: Props;
+    [$$StyledComponentMedia]: Media;
+    [$$StyledCustomProps]: Assign<Type extends ElementType ? ComponentPropsWithRef<Type> : never, AS_CSS>;
+}
+export type Styled = {
+    withConfig: (config: WithStyleConfig) => StyledFunctionType;
+} & StyledFunctionType;
+export type StyledProps<T extends any, K extends typeof $$StyledComponentProps extends keyof T ? keyof T[typeof $$StyledComponentProps] : keyof unknown = never> = typeof $$StyledComponentProps extends keyof T ? typeof $$StyledCustomProps extends keyof T ? Assign<T[typeof $$StyledCustomProps], VariantProps<T[typeof $$StyledComponentProps], K>> : {} : {};
+export type StyledVariants<T extends any, K extends typeof $$StyledComponentProps extends keyof T ? keyof T[typeof $$StyledComponentProps] : keyof unknown = never> = typeof $$StyledComponentProps extends keyof T ? VariantProps<T[typeof $$StyledComponentProps], K> : {};

package/dist/types/style/useTheme.d.ts

@@ -0,0 +1,3 @@
+import type { UseThemeProps } from './types';
+declare const useTheme: () => UseThemeProps;
+export default useTheme;

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

@@ -0,0 +1,8 @@
+type ReactNode = React.ReactNode;
+type Props = {
+    condition: boolean;
+    wrapper: (child: ReactNode) => ReactNode;
+    children: ReactNode;
+};
+declare const _default: React.FC<Props>;
+export default _default;

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

@@ -0,0 +1 @@
+export * from '@zag-js/auto-resize';

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

@@ -0,0 +1,6 @@
+export default function (children: React.ReactNode): {
+    count: number;
+    onlyChild: boolean;
+    type: "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | "reactelement" | "reactfragment" | "reactsuspense" | "reactprovider" | "reactcontext" | "reactportal" | "reactcomponent" | "htmlelement" | "nan" | "stringnumber" | "stringhtml" | "class" | "asyncfunction" | "generatorfunction" | "null" | "array" | "date" | "error" | "regexp" | "set" | "map" | "weakset" | "weakmap" | "promise" | "window" | "htmldocument" | "navigator" | (string & {});
+    child: (string | number | bigint | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react").ReactPortal | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined>)[];
+};

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

@@ -0,0 +1,2 @@
+/** Clamp a number to keep it inside a specific range boundary. */
+export default function (min: number, max: number, value: number): number;

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

@@ -0,0 +1,2 @@
+/** Find the closest number in the array of number. */
+export default function (num: number, stack: Array<number>): number;

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

@@ -0,0 +1 @@
+export { composeRefs, useComposedRefs } from '@radix-ui/react-compose-refs';

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

@@ -0,0 +1,2 @@
+declare const dm: typeof import("deepmerge");
+export default dm;