@fuzzy-ui/react 0.1.0

package/dist/types/Text/Text.d.ts

@@ -0,0 +1,8 @@
+import type { TextStyleProps } from './text.style';
+declare const T: import("../utils").Component<import("..").StyledComponent<"p", {
+    transform?: "capitalize" | "lowercase" | "uppercase" | undefined;
+    weight?: "light" | "bold" | "normal" | "black" | "medium" | "thin" | "extrabold" | "hairline" | "semibold" | undefined;
+}>, TextProps>;
+export interface TextProps extends TextStyleProps {
+}
+export default T;

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

@@ -0,0 +1,2 @@
+export { default } from './Text';
+export type { TextProps } from './Text';

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

@@ -0,0 +1,9 @@
+import type { StyledProps, FontSizes, SemanticKeys } from '../style';
+export declare const Ts: import("../style").StyledComponent<"p", {
+    transform?: "capitalize" | "lowercase" | "uppercase" | undefined;
+    weight?: "light" | "bold" | "normal" | "black" | "medium" | "thin" | "extrabold" | "hairline" | "semibold" | undefined;
+}>;
+export type TextStyleProps = StyledProps<typeof Ts> & {
+    color?: SemanticKeys;
+    size?: FontSizes;
+};

package/dist/types/TextArea/TextArea.d.ts

@@ -0,0 +1,7 @@
+import type { TextAreaStyleProps } from './textarea.style';
+declare const T: import("../utils").Component<import("..").StyledComponent<"textarea", {
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+}>, TextAreaProps>;
+export interface TextAreaProps extends TextAreaStyleProps {
+}
+export default T;

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

@@ -0,0 +1,2 @@
+export { default } from './TextArea';
+export type { TextAreaProps } from './TextArea';

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

@@ -0,0 +1,18 @@
+import type { StyledProps, SemanticKeys, StyledVariants, CSS } from '../style';
+export declare const WrpStx: import("../style").StyledComponent<"div", {
+    resize?: "auto" | "both" | "none" | "horizontal" | "vertical" | undefined;
+    variant?: "flat" | "bordered" | "underlined" | undefined;
+}>;
+export declare const TAStx: import("../style").StyledComponent<"textarea", {
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+}>;
+export type TextAreaStyleProps = StyledProps<typeof TAStx> & {
+    cssContainer?: CSS;
+    color?: SemanticKeys;
+    variant?: Variants;
+    resize?: Resize;
+};
+type WrpProps = StyledVariants<typeof WrpStx, 'variant' | 'resize'>;
+type Variants = WrpProps['variant'];
+type Resize = WrpProps['resize'];
+export {};

package/dist/types/Tooltip/Provider.d.ts

@@ -0,0 +1,5 @@
+import type { TooltipProvider } from './tooltip.style';
+declare const P: React.FC<TooltipProviderProps>;
+export interface TooltipProviderProps extends TooltipProvider {
+}
+export default P;

package/dist/types/Tooltip/Tooltip.d.ts

@@ -0,0 +1,7 @@
+import type { TooltipStyleProps } from './tooltip.style';
+declare const T: import("../utils").Component<import("..").StyledComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tooltip").TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>, {
+    radius?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "pill" | undefined;
+}>, TooltipProps>;
+export interface TooltipProps extends TooltipStyleProps {
+}
+export default T;

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

@@ -0,0 +1,4 @@
+export { default as TooltipProvider } from './Provider';
+export { default as Tooltip } from './Tooltip';
+export type { TooltipProviderProps } from './Provider';
+export type { TooltipProps } from './Tooltip';

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

@@ -0,0 +1,29 @@
+import type { TooltipProps, TooltipPortalProps, TooltipProviderProps } from '@radix-ui/react-tooltip';
+import type { StyledProps, SemanticKeys } from '../style';
+export declare const PrvStx: import("react").FC<TooltipProviderProps>;
+export declare const RtStx: import("react").FC<TooltipProps>;
+export declare const PrlStx: import("react").FC<TooltipPortalProps>;
+export declare const ArrStx: import("../style").StyledComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tooltip").TooltipArrowProps & import("react").RefAttributes<SVGSVGElement>>, {}>;
+export declare const TrgStx: import("../style").StyledComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tooltip").TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, {}>;
+export declare const CtnStx: import("../style").StyledComponent<import("react").ForwardRefExoticComponent<import("@radix-ui/react-tooltip").TooltipContentProps & import("react").RefAttributes<HTMLDivElement>>, {
+    radius?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "pill" | undefined;
+}>;
+type ArrowProps = Pick<StyledProps<typeof ArrStx>, 'width' | 'height' | 'css'>;
+type Except = 'disableHoverableContent';
+type Inter = {
+    disableInteractive?: boolean;
+};
+type Rtx = Omit<TooltipProps, Except>;
+type Container = TooltipPortalProps['container'];
+export type TooltipProvider = Omit<TooltipProviderProps, Except> & Inter;
+export type TooltipStyleProps = Omit<StyledProps<typeof CtnStx>, 'as'> & {
+    preventClosedOnTrigger?: boolean;
+    renderedOutside?: boolean;
+    container?: Container;
+    arrow?: {
+        [K in keyof ArrowProps]: ArrowProps[K];
+    } | boolean;
+    content?: React.ReactNode;
+    color?: SemanticKeys;
+} & Rtx & Inter;
+export {};

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

@@ -0,0 +1,6 @@
+export { default as useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
+export { default as useMediaQuery } from './use-media-query';
+export { default as useScrollPosition } from './use-scroll';
+export { default as useRollback } from './use-rollback';
+export { default as useDebounce } from './use-debounce';
+export { default as useTimeout } from './use-timeout';

package/dist/types/hooks/use-debounce.d.ts

@@ -0,0 +1,4 @@
+export default function <T>(initialState: T, { delay, cleanUpFn }?: {
+    delay?: number | undefined;
+    cleanUpFn?: (() => void) | undefined;
+}): (boolean | T | import("react").Dispatch<import("react").SetStateAction<T>>)[];

package/dist/types/hooks/use-isomorphic-layout-effect.d.ts

@@ -0,0 +1,3 @@
+import { useLayoutEffect } from 'react';
+declare const _default: typeof useLayoutEffect;
+export default _default;

package/dist/types/hooks/use-media-query.d.ts

@@ -0,0 +1,32 @@
+declare const range: {
+    xs: {
+        min: number;
+        max: number;
+    };
+    sm: {
+        min: number;
+        max: number;
+    };
+    md: {
+        min: number;
+        max: number;
+    };
+    lg: {
+        min: number;
+        max: number;
+    };
+    xl: {
+        min: number;
+        max: number;
+    };
+    xxl: {
+        min: number;
+        max: undefined;
+    };
+};
+type BP = keyof typeof range;
+type Rtype<T> = T extends true ? BP : {
+    [key in BP]: boolean;
+};
+export default function <T extends boolean | undefined = undefined>(current?: T): Rtype<T>;
+export {};

package/dist/types/hooks/use-rollback.d.ts

@@ -0,0 +1,5 @@
+/** The default **delay** is 3000ms */
+export default function <T>(initialState: T, { delay, cleanUpFn }?: {
+    delay?: number | undefined;
+    cleanUpFn?: (() => void) | undefined;
+}): (T | import("react").Dispatch<import("react").SetStateAction<T>>)[];

package/dist/types/hooks/use-scroll.d.ts

@@ -0,0 +1,19 @@
+import type { RefObject, DependencyList } from 'react';
+type ElementRef = RefObject<HTMLElement | undefined>;
+type ScrollValue = {
+    x: number;
+    y: number;
+};
+type CallbackProps = {
+    prevPos: ScrollValue;
+    currPos: ScrollValue;
+};
+export interface UseScrollProps {
+    wait?: number;
+    enabled?: boolean;
+    elementRef?: ElementRef | 'window';
+    callback?: ({ prevPos, currPos }: CallbackProps) => void;
+    deps?: DependencyList;
+}
+declare const _default: (props: UseScrollProps) => ScrollValue;
+export default _default;

package/dist/types/hooks/use-timeout.d.ts

@@ -0,0 +1 @@
+export default function (callback: () => void, delay: number | null): void;

package/dist/types/index.d.ts

@@ -0,0 +1,47 @@
+export { styled, BaseCSS, BPRange, css, createTheme, globalCss, keyframes, defaultTheme, defaultConfig, newTheme, } from './style';
+export { default as ThemeProvider } from './style/ThemeProvider';
+export { default as useTheme } from './style/useTheme';
+export type * from './style';
+export * from './utils';
+export * from './hooks';
+export { default as Header } from './Header';
+export type * from './Header';
+export { default as NavMenu } from './NavMenu';
+export type * from './NavMenu';
+export { default as Box } from './Box';
+export type * from './Box';
+export { default as Flex } from './Flex';
+export type * from './Flex';
+export { default as Grid } from './Grid';
+export type * from './Grid';
+export { default as Button } from './Button';
+export type * from './Button';
+export { default as Table } from './Table';
+export type * from './Table';
+export { default as Text } from './Text';
+export type * from './Text';
+export { default as Card } from './Card';
+export type * from './Card';
+export { default as Input } from './Input';
+export type * from './Input';
+export { default as Slider } from './Slider';
+export type * from './Slider';
+export { default as Modal } from './Modal';
+export type * from './Modal';
+export { default as Spinner } from './Spinner';
+export type * from './Spinner';
+export { default as Presence } from './Presence';
+export type * from './Presence';
+export { default as Slot } from './Slot';
+export type * from './Slot';
+export { default as Portal } from './Portal';
+export type * from './Portal';
+export { default as Select } from './Select';
+export type * from './Select';
+export { default as Popover } from './Popover';
+export type * from './Popover';
+export { default as Separator } from './Separator';
+export type * from './Separator';
+export { default as TextArea } from './TextArea';
+export type * from './TextArea';
+export * from './Tooltip';

package/dist/types/shared/icons/Caret.Down.d.ts

@@ -0,0 +1,3 @@
+import type { Props } from './types';
+declare const _default: import("../../utils").Component<"svg", Props>;
+export default _default;

package/dist/types/shared/icons/Check.d.ts

@@ -0,0 +1,3 @@
+import type { Props } from './types';
+declare const _default: import("../../utils").Component<"svg", Props>;
+export default _default;

package/dist/types/shared/icons/Chevron.Down.d.ts

@@ -0,0 +1,3 @@
+import type { Props } from './types';
+declare const _default: import("../../utils").Component<"svg", Props>;
+export default _default;

package/dist/types/shared/icons/Chevron.Up.d.ts

@@ -0,0 +1,3 @@
+import type { Props } from './types';
+declare const _default: import("../../utils").Component<"svg", Props>;
+export default _default;

package/dist/types/shared/icons/Circle.d.ts

@@ -0,0 +1,3 @@
+import type { Props } from './types';
+declare const _default: import("../../utils").Component<"svg", Props>;
+export default _default;

package/dist/types/shared/icons/Cross.d.ts

@@ -0,0 +1,3 @@
+import type { Props } from './types';
+declare const _default: import("../../utils").Component<"svg", Props>;
+export default _default;

package/dist/types/shared/icons/types.d.ts

@@ -0,0 +1,3 @@
+import type { SVGProps, ComponentRef } from 'react';
+export type SVG = 'svg';
+export type Props = SVGProps<ComponentRef<SVG>>;

package/dist/types/shared/styled-utils.d.ts

@@ -0,0 +1,245 @@
+declare const common: {
+    readonly justify: {
+        readonly start: {
+            readonly jc: "flex-start";
+        };
+        readonly center: {
+            readonly jc: "center";
+        };
+        readonly end: {
+            readonly jc: "flex-end";
+        };
+        readonly 'space-between': {
+            readonly jc: "space-between";
+        };
+        readonly 'space-around': {
+            readonly jc: "space-around";
+        };
+        readonly 'space-evenly': {
+            readonly jc: "space-evenly";
+        };
+    };
+    readonly alignContent: {
+        readonly stretch: {
+            readonly ac: "stretch";
+        };
+        readonly center: {
+            readonly ac: "center";
+        };
+        readonly start: {
+            readonly ac: "flex-start";
+        };
+        readonly end: {
+            readonly ac: "flex-end";
+        };
+        readonly 'space-between': {
+            readonly ac: "space-between";
+        };
+        readonly 'space-around': {
+            readonly ac: "space-around";
+        };
+    };
+    readonly alignItems: {
+        readonly start: {
+            readonly ai: "flex-start";
+        };
+        readonly center: {
+            readonly ai: "center";
+        };
+        readonly end: {
+            readonly ai: "flex-end";
+        };
+        readonly stretch: {
+            readonly ai: "stretch";
+        };
+        readonly baseline: {
+            readonly ai: "baseline";
+        };
+    };
+    readonly direction: {
+        readonly row: {
+            readonly fd: "row";
+        };
+        readonly col: {
+            readonly fd: "column";
+        };
+        readonly 'row-reverse': {
+            readonly fd: "row-reverse";
+        };
+        readonly 'col-reverse': {
+            readonly fd: "column-reverse";
+        };
+    };
+    readonly wrap: {
+        readonly wrap: {
+            readonly fw: "wrap";
+            readonly WebkitFlexWrap: "wrap";
+        };
+        readonly nowrap: {
+            readonly fw: "nowrap";
+            readonly WebkitFlexWrap: "nowrap";
+        };
+        readonly 'wrap-reverse': {
+            readonly fw: "wrap-reverse";
+            readonly WebkitFlexWrap: "wrap-reverse";
+        };
+    };
+    readonly radius: {
+        readonly none: {};
+        readonly pill: {
+            readonly br: "$pill";
+        };
+        readonly xs: {
+            readonly br: "$xs";
+        };
+        readonly sm: {
+            readonly br: "$sm";
+        };
+        readonly md: {
+            readonly br: "$md";
+        };
+        readonly lg: {
+            readonly br: "$lg";
+        };
+        readonly xl: {
+            readonly br: "$xl";
+        };
+    };
+};
+type Mutable<T> = {
+    -readonly [F in keyof T]: {
+        -readonly [S in keyof T[F]]: {
+            -readonly [I in keyof T[F][S]]: T[F][S][I];
+        };
+    };
+};
+type Obj = Mutable<typeof common>;
+export declare function getVariants<T extends Array<keyof Obj>>(variants: T): { [K in T[number]]: Mutable<{
+    readonly justify: {
+        readonly start: {
+            readonly jc: "flex-start";
+        };
+        readonly center: {
+            readonly jc: "center";
+        };
+        readonly end: {
+            readonly jc: "flex-end";
+        };
+        readonly 'space-between': {
+            readonly jc: "space-between";
+        };
+        readonly 'space-around': {
+            readonly jc: "space-around";
+        };
+        readonly 'space-evenly': {
+            readonly jc: "space-evenly";
+        };
+    };
+    readonly alignContent: {
+        readonly stretch: {
+            readonly ac: "stretch";
+        };
+        readonly center: {
+            readonly ac: "center";
+        };
+        readonly start: {
+            readonly ac: "flex-start";
+        };
+        readonly end: {
+            readonly ac: "flex-end";
+        };
+        readonly 'space-between': {
+            readonly ac: "space-between";
+        };
+        readonly 'space-around': {
+            readonly ac: "space-around";
+        };
+    };
+    readonly alignItems: {
+        readonly start: {
+            readonly ai: "flex-start";
+        };
+        readonly center: {
+            readonly ai: "center";
+        };
+        readonly end: {
+            readonly ai: "flex-end";
+        };
+        readonly stretch: {
+            readonly ai: "stretch";
+        };
+        readonly baseline: {
+            readonly ai: "baseline";
+        };
+    };
+    readonly direction: {
+        readonly row: {
+            readonly fd: "row";
+        };
+        readonly col: {
+            readonly fd: "column";
+        };
+        readonly 'row-reverse': {
+            readonly fd: "row-reverse";
+        };
+        readonly 'col-reverse': {
+            readonly fd: "column-reverse";
+        };
+    };
+    readonly wrap: {
+        readonly wrap: {
+            readonly fw: "wrap";
+            readonly WebkitFlexWrap: "wrap";
+        };
+        readonly nowrap: {
+            readonly fw: "nowrap";
+            readonly WebkitFlexWrap: "nowrap";
+        };
+        readonly 'wrap-reverse': {
+            readonly fw: "wrap-reverse";
+            readonly WebkitFlexWrap: "wrap-reverse";
+        };
+    };
+    readonly radius: {
+        readonly none: {};
+        readonly pill: {
+            readonly br: "$pill";
+        };
+        readonly xs: {
+            readonly br: "$xs";
+        };
+        readonly sm: {
+            readonly br: "$sm";
+        };
+        readonly md: {
+            readonly br: "$md";
+        };
+        readonly lg: {
+            readonly br: "$lg";
+        };
+        readonly xl: {
+            readonly br: "$xl";
+        };
+    };
+}>[K]; };
+export type GapProps = {
+    gap?: number | {
+        x?: number;
+        y?: number;
+    };
+};
+export declare function getGap(gap: GapProps['gap'], isGrid?: boolean): {
+    [x: string]: string;
+} | undefined;
+export declare function blurry(prop?: boolean | {
+    opaque?: number | undefined;
+    color?: string | undefined;
+}): {
+    '@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))'?: undefined;
+} | {
+    '@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none))': {
+        bg: string;
+        backdropFilter: string;
+    };
+};
+export {};

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

@@ -0,0 +1,20 @@
+import type { ThemeProviderProps as T } from './types';
+/**
+ * ThemeProvider will set some attributes to html tag, by default it should look like:
+ *
+ * ```html
+ * <html data-theme="system" class="light-theme" data-scheme="light" style="color-scheme: light;">
+ *    ...
+ * </html>
+ * ```
+ *
+ * **data-theme** : The name of current theme, this allows to create styles based on theme name.
+ *
+ * **data-scheme** : The color scheme of current theme, this allows to create styles based on scheme, value of this attribute is simply "light" or "dark".
+ *
+ * on the **class** attribute a class name will be added to apply the theme. and also a "color-scheme" property is added on **style** attribute to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons but this is optional and can be disabled by set the "enableColorScheme" prop to false.
+ */
+declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export interface ThemeProviderProps extends T {
+}
+export default ThemeProvider;

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

@@ -0,0 +1,3 @@
+import type { UseThemeProps, ThemeProviderProps } from './types';
+export declare const ThemeContext: import("react").Context<UseThemeProps | undefined>;
+export declare const Prov: React.FC<ThemeProviderProps>;

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

@@ -0,0 +1,41 @@
+declare const Bp: readonly [readonly ["xs", 0], readonly ["sm", 576], readonly ["md", 768], readonly ["lg", 992], readonly ["xl", 1200], readonly ["xxl", 1400]];
+export declare function BPRange<T extends boolean = true>(withUnit?: T): { [K in BKey]: {
+    min: T extends true ? string : number;
+    max: K extends Last[0] ? undefined : T extends true ? string : number;
+}; };
+export declare const media: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+    xsMax: string;
+    xsOnly: string;
+    xsNot: string;
+    smMax: string;
+    smOnly: string;
+    smNot: string;
+    mdMax: string;
+    mdOnly: string;
+    mdNot: string;
+    lgMax: string;
+    lgOnly: string;
+    lgNot: string;
+    xlMax: string;
+    xlOnly: string;
+    xlNot: string;
+    xxlOnly: string;
+    xxlNot: string;
+};
+export declare const mediaKeys: MediaKeys<typeof Bp>;
+type BP = typeof Bp;
+type Last = BP extends readonly [...unknown[], infer L] ? L : never;
+type BKey = BP[number][0];
+type MediaKeys<T extends readonly (readonly [any, any])[]> = Mutable<{
+    [K in keyof T]: T[K] extends readonly [infer U, any] ? U : never;
+}>;
+type Mutable<T extends readonly any[]> = {
+    -readonly [P in keyof T]: T[P];
+};
+export {};

package/dist/types/style/defaults/colors/error.d.ts

@@ -0,0 +1,31 @@
+declare const error: {
+    light: {
+        error1: string;
+        error2: string;
+        error3: string;
+        error4: string;
+        error5: string;
+        error6: string;
+        error7: string;
+        error8: string;
+        error9: string;
+        error10: string;
+        error11: string;
+        error12: string;
+    };
+    dark: {
+        error1: string;
+        error2: string;
+        error3: string;
+        error4: string;
+        error5: string;
+        error6: string;
+        error7: string;
+        error8: string;
+        error9: string;
+        error10: string;
+        error11: string;
+        error12: string;
+    };
+};
+export default error;