app-studio 0.7.17 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (102) hide show
  1. package/README.md +11 -1
  2. package/dist/native/index.cjs +3360 -0
  3. package/dist/native/index.cjs.map +1 -0
  4. package/dist/native/index.d.mts +251 -0
  5. package/dist/native/index.d.ts +251 -0
  6. package/dist/native/index.js +3268 -0
  7. package/dist/native/index.js.map +1 -0
  8. package/dist/viewAnimation-B4BIoOwQ.d.mts +2246 -0
  9. package/dist/viewAnimation-B4BIoOwQ.d.ts +2246 -0
  10. package/dist/web/app-studio.umd.production.min.global.js +28 -0
  11. package/dist/web/app-studio.umd.production.min.global.js.map +1 -0
  12. package/dist/web/index.cjs +6109 -0
  13. package/dist/web/index.cjs.map +1 -0
  14. package/dist/web/index.d.mts +624 -0
  15. package/dist/web/index.d.ts +624 -0
  16. package/dist/web/index.js +6008 -0
  17. package/dist/web/index.js.map +1 -0
  18. package/docs/README.md +10 -0
  19. package/package.json +76 -14
  20. package/dist/app-studio.cjs.development.js +0 -6742
  21. package/dist/app-studio.cjs.development.js.map +0 -1
  22. package/dist/app-studio.cjs.production.min.js +0 -2
  23. package/dist/app-studio.cjs.production.min.js.map +0 -1
  24. package/dist/app-studio.esm.js +0 -6638
  25. package/dist/app-studio.esm.js.map +0 -1
  26. package/dist/app-studio.umd.development.js +0 -6745
  27. package/dist/app-studio.umd.development.js.map +0 -1
  28. package/dist/app-studio.umd.production.min.js +0 -2
  29. package/dist/app-studio.umd.production.min.js.map +0 -1
  30. package/dist/components/Form.d.ts +0 -17
  31. package/dist/components/Image.d.ts +0 -7
  32. package/dist/components/Skeleton.d.ts +0 -3
  33. package/dist/components/Text/Text.props.d.ts +0 -27
  34. package/dist/components/Text/Text.type.d.ts +0 -3
  35. package/dist/components/Text/Text.utils.d.ts +0 -2
  36. package/dist/components/Text/Text.view.d.ts +0 -20
  37. package/dist/components/Text.d.ts +0 -5
  38. package/dist/components/View.d.ts +0 -16
  39. package/dist/components/Wrapper.d.ts +0 -4
  40. package/dist/element/Animation.d.ts +0 -1164
  41. package/dist/element/Element.d.ts +0 -4
  42. package/dist/element/Element.types.d.ts +0 -123
  43. package/dist/element/css.d.ts +0 -50
  44. package/dist/element/utils.d.ts +0 -4
  45. package/dist/hooks/useActive.d.ts +0 -2
  46. package/dist/hooks/useClickOutside.d.ts +0 -6
  47. package/dist/hooks/useElementPosition.d.ts +0 -39
  48. package/dist/hooks/useFocus.d.ts +0 -2
  49. package/dist/hooks/useHover.d.ts +0 -2
  50. package/dist/hooks/useIframeStyles.d.ts +0 -41
  51. package/dist/hooks/useInView.d.ts +0 -11
  52. package/dist/hooks/useKeyPress.d.ts +0 -1
  53. package/dist/hooks/useMount.d.ts +0 -1
  54. package/dist/hooks/useOnScreen.d.ts +0 -6
  55. package/dist/hooks/useResponsive.d.ts +0 -59
  56. package/dist/hooks/useScroll.d.ts +0 -49
  57. package/dist/hooks/useWindowSize.d.ts +0 -4
  58. package/dist/index.d.ts +0 -33
  59. package/dist/index.js +0 -8
  60. package/dist/providers/Analytics.d.ts +0 -9
  61. package/dist/providers/Responsive.d.ts +0 -58
  62. package/dist/providers/StyleRegistry.d.ts +0 -32
  63. package/dist/providers/Theme.d.ts +0 -46
  64. package/dist/providers/WindowSize.d.ts +0 -11
  65. package/dist/stories/AnimateOn.stories.d.ts +0 -30
  66. package/dist/stories/Animation.stories.d.ts +0 -35
  67. package/dist/stories/BorderColor.stories.d.ts +0 -4
  68. package/dist/stories/Color.stories.d.ts +0 -4
  69. package/dist/stories/ColorAlpha.stories.d.ts +0 -5
  70. package/dist/stories/Component.stories.d.ts +0 -7
  71. package/dist/stories/CrossBrowserCompatibility.stories.d.ts +0 -6
  72. package/dist/stories/EmptyBeforeExample.stories.d.ts +0 -7
  73. package/dist/stories/EventHandlers.stories.d.ts +0 -6
  74. package/dist/stories/GradientColors.stories.d.ts +0 -6
  75. package/dist/stories/GroupPeer.stories.d.ts +0 -7
  76. package/dist/stories/Hooks.stories.d.ts +0 -17
  77. package/dist/stories/IframeCSSSupport.stories.d.ts +0 -28
  78. package/dist/stories/IframeSupport.stories.d.ts +0 -20
  79. package/dist/stories/Image.stories.d.ts +0 -6
  80. package/dist/stories/Scroll.stories.d.ts +0 -9
  81. package/dist/stories/ScrollAnimation.stories.d.ts +0 -36
  82. package/dist/stories/ScrollTimeline.stories.d.ts +0 -6
  83. package/dist/stories/Skeleton.stories.d.ts +0 -5
  84. package/dist/stories/Text.stories.d.ts +0 -18
  85. package/dist/stories/VendorPrefix.stories.d.ts +0 -6
  86. package/dist/stories/View.stories.d.ts +0 -10
  87. package/dist/stories/ViewAnimation.stories.d.ts +0 -33
  88. package/dist/test/CssVariablesTest.d.ts +0 -3
  89. package/dist/test/LowercaseVendorPrefixTest.d.ts +0 -3
  90. package/dist/test/VendorPrefixTest.d.ts +0 -3
  91. package/dist/test/WebkitTextStrokeTest.d.ts +0 -3
  92. package/dist/types/scrollAnimation.types.d.ts +0 -75
  93. package/dist/utils/colors.d.ts +0 -21
  94. package/dist/utils/constants.d.ts +0 -24
  95. package/dist/utils/cssProperties.d.ts +0 -8
  96. package/dist/utils/env.d.ts +0 -15
  97. package/dist/utils/hash.d.ts +0 -4
  98. package/dist/utils/shadow.d.ts +0 -10
  99. package/dist/utils/style.d.ts +0 -22
  100. package/dist/utils/typography.d.ts +0 -45
  101. package/dist/utils/vendorPrefixes.d.ts +0 -19
  102. package/dist/utils/viewAnimation.d.ts +0 -138
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- import { ElementProps, CssProps } from './Element.types';
3
- export type { ElementProps, CssProps };
4
- export declare const Element: React.MemoExoticComponent<React.ForwardRefExoticComponent<ElementProps & React.RefAttributes<HTMLElement>>>;
@@ -1,123 +0,0 @@
1
- import { CSSProperties, HTMLAttributes } from 'react';
2
- import { AnimationProps } from '../utils/constants';
3
- import { Shadow } from '../utils/shadow';
4
- import { ViewStyleProps } from '../types/style';
5
- import type { Theme } from '../providers/Theme';
6
- export interface CssProps extends CSSProperties {
7
- paddingHorizontal?: number | string;
8
- marginHorizontal?: number | string;
9
- paddingVertical?: number | string;
10
- marginVertical?: number | string;
11
- widthHeight?: number | string;
12
- animate?: AnimationProps[] | AnimationProps;
13
- animateIn?: AnimationProps[] | AnimationProps;
14
- animateOut?: AnimationProps[] | AnimationProps;
15
- animateOn?: 'View' | 'Mount' | 'Both' | 'Scroll';
16
- shadow?: boolean | number | Shadow;
17
- blend?: boolean;
18
- _hover?: CSSProperties | string;
19
- _active?: CSSProperties | string;
20
- _focus?: CSSProperties | string;
21
- _visited?: CSSProperties | string;
22
- _disabled?: CSSProperties | string;
23
- _enabled?: CSSProperties | string;
24
- _checked?: CSSProperties | string;
25
- _unchecked?: CSSProperties | string;
26
- _invalid?: CSSProperties | string;
27
- _valid?: CSSProperties | string;
28
- _required?: CSSProperties | string;
29
- _optional?: CSSProperties | string;
30
- _selected?: CSSProperties | string;
31
- _target?: CSSProperties | string;
32
- _firstChild?: CSSProperties | string;
33
- _lastChild?: CSSProperties | string;
34
- _onlyChild?: CSSProperties | string;
35
- _firstOfType?: CSSProperties | string;
36
- _lastOfType?: CSSProperties | string;
37
- _empty?: CSSProperties | string;
38
- _focusVisible?: CSSProperties | string;
39
- _focusWithin?: CSSProperties | string;
40
- _placeholder?: CSSProperties | string;
41
- _groupHover?: CSSProperties | string;
42
- _groupFocus?: CSSProperties | string;
43
- _groupActive?: CSSProperties | string;
44
- _groupDisabled?: CSSProperties | string;
45
- _peerHover?: CSSProperties | string;
46
- _peerFocus?: CSSProperties | string;
47
- _peerActive?: CSSProperties | string;
48
- _peerDisabled?: CSSProperties | string;
49
- _peerChecked?: CSSProperties | string;
50
- _before?: CSSProperties;
51
- _after?: CSSProperties;
52
- _firstLetter?: CSSProperties;
53
- _firstLine?: CSSProperties;
54
- _selection?: CSSProperties;
55
- _backdrop?: CSSProperties;
56
- _marker?: CSSProperties;
57
- WebkitUserDrag?: CSSProperties['userSelect'];
58
- webkitUserDrag?: CSSProperties['userSelect'];
59
- }
60
- export interface ElementProps extends CssProps, Omit<ViewStyleProps, keyof HTMLAttributes<HTMLElement> | 'children' | 'style' | 'pointerEvents'>, Omit<HTMLAttributes<HTMLElement>, 'color' | 'style' | 'content' | 'translate'> {
61
- on?: Record<string, CssProps>;
62
- media?: Record<string, CssProps>;
63
- only?: string[];
64
- css?: CSSProperties | any;
65
- onPress?: any;
66
- onClick?: any;
67
- className?: string;
68
- blend?: boolean;
69
- type?: string;
70
- as?: keyof JSX.IntrinsicElements;
71
- style?: CSSProperties;
72
- widthHeight?: number | string;
73
- children?: React.ReactNode;
74
- before?: React.ReactNode;
75
- after?: React.ReactNode;
76
- /**
77
- * Component-scoped theme override. Remaps `theme-*` tokens used by this
78
- * component (and its style props) to different color tokens, without
79
- * affecting the global ThemeProvider. Each value is a color token string
80
- * (`color-red-500`, `theme-secondary`) or a raw color (`#ff0000`).
81
- */
82
- theme?: Partial<Theme>;
83
- animateOn?: 'View' | 'Mount' | 'Both' | 'Scroll';
84
- _hover?: CssProps | string;
85
- _active?: CssProps | string;
86
- _focus?: CssProps | string;
87
- _visited?: CssProps | string;
88
- _disabled?: CssProps | string;
89
- _enabled?: CssProps | string;
90
- _checked?: CssProps | string;
91
- _unchecked?: CssProps | string;
92
- _invalid?: CssProps | string;
93
- _valid?: CssProps | string;
94
- _required?: CssProps | string;
95
- _optional?: CssProps | string;
96
- _selected?: CssProps | string;
97
- _target?: CssProps | string;
98
- _firstChild?: CssProps | string;
99
- _lastChild?: CssProps | string;
100
- _onlyChild?: CssProps | string;
101
- _firstOfType?: CssProps | string;
102
- _lastOfType?: CssProps | string;
103
- _empty?: CssProps | string;
104
- _focusVisible?: CssProps | string;
105
- _focusWithin?: CssProps | string;
106
- _placeholder?: CssProps | string;
107
- _groupHover?: CssProps | string;
108
- _groupFocus?: CssProps | string;
109
- _groupActive?: CssProps | string;
110
- _groupDisabled?: CssProps | string;
111
- _peerHover?: CssProps | string;
112
- _peerFocus?: CssProps | string;
113
- _peerActive?: CssProps | string;
114
- _peerDisabled?: CssProps | string;
115
- _peerChecked?: CssProps | string;
116
- _before?: CssProps;
117
- _after?: CssProps;
118
- _firstLetter?: CssProps;
119
- _firstLine?: CssProps;
120
- _selection?: CssProps;
121
- _backdrop?: CssProps;
122
- _marker?: CssProps;
123
- }
@@ -1,50 +0,0 @@
1
- import { ElementProps } from './Element.types';
2
- declare type StyleContext = 'base-shorthand' | 'base-sub' | 'base' | 'pseudo' | 'media' | 'modifier' | 'override-shorthand' | 'override-sub' | 'override';
3
- /**
4
- * Utility functions for animation handling
5
- */
6
- export declare const AnimationUtils: {
7
- parseDuration(duration: string): number;
8
- formatDuration(ms: number): string;
9
- processAnimations(animations: any[], manager?: UtilityClassManager | undefined): {
10
- animationRange?: string;
11
- animationTimeline?: string;
12
- animationName: string;
13
- animationDuration: string;
14
- animationTimingFunction: string;
15
- animationDelay: string;
16
- animationIterationCount: string;
17
- animationDirection: string;
18
- animationFillMode: string;
19
- animationPlayState: string;
20
- };
21
- };
22
- export declare class UtilityClassManager {
23
- private styleSheets;
24
- private classCache;
25
- private propertyShorthand;
26
- private mainDocument;
27
- constructor(propertyShorthand: Record<string, string>, maxCacheSize?: number);
28
- private initStyleSheets;
29
- private getDocumentRules;
30
- addDocument(targetDocument: Document): void;
31
- private clearStylesFromDocument;
32
- private escapeClassName;
33
- private serverRules;
34
- injectRule(cssRule: string, context?: StyleContext): void;
35
- getServerStyles(): string;
36
- private getAllRegisteredDocuments;
37
- private addToCache;
38
- getClassNames(property: string, value: any, context: "base-shorthand" | "base-sub" | "base" | "pseudo" | "media" | "modifier" | "override-shorthand" | "override-sub" | "override" | undefined, modifier: string | undefined, getColor: (color: string) => string, mediaQueries?: string[]): string[];
39
- removeDocument(targetDocument: Document): void;
40
- clearCache(): void;
41
- private clearStyleSheet;
42
- regenerateStyles(targetDocument: Document): void;
43
- regenerateAllStyles(): void;
44
- private injectRuleToDocument;
45
- printStyles(targetDocument: Document): void;
46
- }
47
- export declare const propertyShorthand: Record<string, string>;
48
- export declare const utilityClassManager: UtilityClassManager;
49
- export declare const extractUtilityClasses: (props: ElementProps, getColor: (color: string) => string, mediaQueries: Record<string, string>, devices: Record<string, string[]>, manager?: UtilityClassManager | undefined) => string[];
50
- export {};
@@ -1,4 +0,0 @@
1
- export declare const generateKeyframes: (animation: any) => {
2
- keyframesName: string;
3
- keyframes: string;
4
- };
@@ -1,2 +0,0 @@
1
- /// <reference types="react" />
2
- export declare function useActive<T extends HTMLElement = HTMLElement>(): [React.RefObject<T>, boolean];
@@ -1,6 +0,0 @@
1
- /// <reference types="react" />
2
- export interface UseClickOutsideOptions {
3
- /** Optional target window to use (for iframe support). Defaults to global window. */
4
- targetWindow?: Window;
5
- }
6
- export declare function useClickOutside<T extends HTMLElement = HTMLElement>(options?: UseClickOutsideOptions): [React.RefObject<T>, boolean];
@@ -1,39 +0,0 @@
1
- /// <reference types="react" />
2
- export interface RelativePlacement {
3
- vertical: 'top' | 'bottom';
4
- horizontal: 'left' | 'right';
5
- }
6
- export interface ElementPosition {
7
- position: RelativePlacement;
8
- space: RelativePlacement;
9
- }
10
- export interface UseElementPositionOptions {
11
- /** Whether to track changes automatically. Default: true */
12
- trackChanges?: boolean;
13
- /** Throttle delay in milliseconds for updates. Default: 100 */
14
- throttleMs?: number;
15
- /** Whether to track on hover events. Default: true */
16
- trackOnHover?: boolean;
17
- /** Whether to track on scroll events. Default: false */
18
- trackOnScroll?: boolean;
19
- /** Whether to track on resize events. Default: false */
20
- trackOnResize?: boolean;
21
- /** Optional target window to use (for iframe support). Defaults to global window. */
22
- targetWindow?: Window;
23
- }
24
- export interface UseElementPositionReturn {
25
- /** React ref to attach to the target HTML element. */
26
- ref: React.RefObject<HTMLElement>;
27
- /**
28
- * The calculated viewport relation data, or null if not yet calculated
29
- * or element not found.
30
- */
31
- relation: ElementPosition | null;
32
- /** Function to manually trigger an immediate recalculation. */
33
- updateRelation: () => void;
34
- }
35
- /**
36
- * A React hook to determine an element's relative position within the viewport
37
- * and where the most available space is around it within the viewport.
38
- */
39
- export declare function useElementPosition<T extends HTMLElement = HTMLElement>(options?: UseElementPositionOptions): UseElementPositionReturn;
@@ -1,2 +0,0 @@
1
- /// <reference types="react" />
2
- export declare function useFocus<T extends HTMLElement = HTMLElement>(): [React.RefObject<T>, boolean];
@@ -1,2 +0,0 @@
1
- /// <reference types="react" />
2
- export declare function useHover<T extends HTMLElement = HTMLElement>(): [React.RefObject<T>, boolean];
@@ -1,41 +0,0 @@
1
- /// <reference types="react" />
2
- /**
3
- * Hook to register an iframe's document with the style manager.
4
- * This ensures that all CSS utility classes are automatically injected into the iframe.
5
- *
6
- * @param iframeRef - Reference to the iframe element
7
- *
8
- * @example
9
- * ```tsx
10
- * const iframeRef = useRef<HTMLIFrameElement>(null);
11
- * useIframeStyles(iframeRef);
12
- *
13
- * return <iframe ref={iframeRef} src="/content" />;
14
- * ```
15
- */
16
- export declare function useIframeStyles(iframeRef: React.RefObject<HTMLIFrameElement>): void;
17
- /**
18
- * Hook to get an iframe's window and document, and automatically register styles.
19
- * This is a convenience hook that combines iframe access with style registration.
20
- *
21
- * @param iframeRef - Reference to the iframe element
22
- * @returns Object containing iframeWindow, iframeDocument, and isLoaded flag
23
- *
24
- * @example
25
- * ```tsx
26
- * const iframeRef = useRef<HTMLIFrameElement>(null);
27
- * const { iframeWindow, iframeDocument, isLoaded } = useIframe(iframeRef);
28
- *
29
- * return (
30
- * <>
31
- * <iframe ref={iframeRef} src="/content" />
32
- * {isLoaded && <div>Iframe loaded!</div>}
33
- * </>
34
- * );
35
- * ```
36
- */
37
- export declare function useIframe(iframeRef: React.RefObject<HTMLIFrameElement>): {
38
- iframeWindow: Window | null;
39
- iframeDocument: Document | null;
40
- isLoaded: boolean;
41
- };
@@ -1,11 +0,0 @@
1
- /// <reference types="react" />
2
- interface InViewOptions extends IntersectionObserverInit {
3
- triggerOnce?: boolean;
4
- /** Optional target window to use (for iframe support). Defaults to global window. */
5
- targetWindow?: Window;
6
- }
7
- export declare function useInView(options?: InViewOptions): {
8
- ref: import("react").RefObject<HTMLElement>;
9
- inView: boolean;
10
- };
11
- export {};
@@ -1 +0,0 @@
1
- export declare function useKeyPress(targetKey: string): boolean;
@@ -1 +0,0 @@
1
- export declare const useMount: (callback: () => void) => void;
@@ -1,6 +0,0 @@
1
- /// <reference types="react" />
2
- export interface UseOnScreenOptions extends IntersectionObserverInit {
3
- /** Optional target window to use (for iframe support). Defaults to global window. */
4
- targetWindow?: Window;
5
- }
6
- export declare function useOnScreen<T extends HTMLElement = HTMLElement>(options?: UseOnScreenOptions): [React.RefObject<T>, boolean];
@@ -1,59 +0,0 @@
1
- import { BreakpointConfig, WindowDimensions } from '../providers/Responsive';
2
- /**
3
- * Optimized hook for components that only need breakpoint information.
4
- * This hook will NOT cause re-renders on every window resize,
5
- * only when the breakpoint actually changes.
6
- *
7
- * Use this hook instead of useResponsive for better performance
8
- * when you only need to check breakpoints or device type.
9
- *
10
- * @example
11
- * const { screen, on, is, orientation } = useBreakpoint();
12
- * if (on('mobile')) { ... }
13
- * if (is('xs')) { ... }
14
- */
15
- export declare const useBreakpoint: () => {
16
- screen: string;
17
- orientation: import("../providers/Responsive").ScreenOrientation;
18
- on: (s: string) => boolean;
19
- is: (s: string) => boolean;
20
- breakpoints: Record<string, number>;
21
- devices: Record<string, string[]>;
22
- mediaQueries: Record<string, string>;
23
- currentBreakpoint: string;
24
- currentDevice: import("../providers/Responsive").DeviceType;
25
- };
26
- /**
27
- * Hook for components that need exact window dimensions.
28
- * This hook WILL cause re-renders on every window resize.
29
- * Use sparingly - prefer useBreakpoint when possible.
30
- *
31
- * @example
32
- * const { width, height } = useWindowDimensions();
33
- */
34
- export declare const useWindowDimensions: () => WindowDimensions;
35
- /**
36
- * Combined hook that provides both breakpoint info and window dimensions.
37
- * This hook WILL cause re-renders on every window resize.
38
- *
39
- * For better performance, use:
40
- * - useBreakpoint() when you only need breakpoint/device info
41
- * - useWindowDimensions() when you only need exact dimensions
42
- *
43
- * @example
44
- * const { screen, on, currentWidth, currentHeight } = useResponsive();
45
- */
46
- export declare const useResponsive: () => {
47
- screen: string;
48
- orientation: import("../providers/Responsive").ScreenOrientation;
49
- on: (s: string) => boolean;
50
- is: (s: string) => boolean;
51
- breakpoints: Record<string, number>;
52
- devices: Record<string, string[]>;
53
- mediaQueries: Record<string, string>;
54
- currentWidth: number;
55
- currentHeight: number;
56
- currentBreakpoint: string;
57
- currentDevice: import("../providers/Responsive").DeviceType;
58
- };
59
- export type { BreakpointConfig, WindowDimensions };
@@ -1,49 +0,0 @@
1
- import { RefObject } from 'react';
2
- export interface ScrollPosition {
3
- x: number;
4
- y: number;
5
- xProgress: number;
6
- yProgress: number;
7
- /**
8
- * Position of the tracked element relative to the viewport top (if container is provided).
9
- * Equivalent to getBoundingClientRect().top
10
- */
11
- elementY?: number;
12
- /**
13
- * Progress of the element scrolling through the viewport (for sticky/reveal effects).
14
- * Calculated as: -elementY / (elementHeight - viewportHeight)
15
- * Varies from 0 (element hits top) to 1 (element finishes scrolling).
16
- */
17
- elementProgress?: number;
18
- }
19
- export interface UseScrollOptions {
20
- container?: RefObject<HTMLElement>;
21
- offset?: [number, number];
22
- throttleMs?: number;
23
- disabled?: boolean;
24
- }
25
- export interface UseScrollAnimationOptions {
26
- threshold?: number | number[];
27
- rootMargin?: string;
28
- root?: Element | null;
29
- onIntersectionChange?: (isIntersecting: boolean, ratio: number) => void;
30
- /** Target window for iframe support - automatically sets correct root */
31
- targetWindow?: Window | null;
32
- }
33
- export interface UseInfiniteScrollOptions {
34
- threshold?: number;
35
- isLoading?: boolean;
36
- root?: Element | null;
37
- rootMargin?: string;
38
- debounceMs?: number;
39
- }
40
- export declare const useScroll: ({ container, offset, throttleMs, disabled, }?: UseScrollOptions) => ScrollPosition;
41
- export declare const useScrollAnimation: (ref: RefObject<HTMLElement>, options?: UseScrollAnimationOptions) => {
42
- isInView: boolean;
43
- progress: number;
44
- };
45
- export declare const useSmoothScroll: (targetWindow?: Window | undefined) => (element: HTMLElement | null, offset?: any) => void;
46
- export declare const useInfiniteScroll: (callback: () => void, options?: UseInfiniteScrollOptions) => {
47
- sentinelRef: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null>>;
48
- };
49
- export declare const useScrollDirection: (threshold?: number, targetWindow?: Window | undefined) => "up" | "down";
@@ -1,4 +0,0 @@
1
- export declare const useWindowSize: () => {
2
- width: number;
3
- height: number;
4
- };
package/dist/index.d.ts DELETED
@@ -1,33 +0,0 @@
1
- export * from './components/View';
2
- export * from './components/Image';
3
- export * from './components/Text';
4
- export type { TextProps } from './components/Text/Text.props';
5
- export * from './components/Form';
6
- export * from './element/Element';
7
- export * from './components/Skeleton';
8
- export * as Animation from './element/Animation';
9
- export * from './utils/typography';
10
- export * from './utils/shadow';
11
- export * from './utils/env';
12
- export * from './element/css';
13
- export * from './utils/colors';
14
- export * from './providers/Responsive';
15
- export * from './providers/Analytics';
16
- export * from './providers/Theme';
17
- export * from './providers/StyleRegistry';
18
- export * from './providers/WindowSize';
19
- export * from './hooks/useActive';
20
- export * from './hooks/useClickOutside';
21
- export * from './hooks/useElementPosition';
22
- export * from './hooks/useFocus';
23
- export * from './hooks/useHover';
24
- export * from './hooks/useKeyPress';
25
- export * from './hooks/useMount';
26
- export * from './hooks/useOnScreen';
27
- export * from './hooks/useResponsive';
28
- export * from './hooks/useScroll';
29
- export * from './hooks/useWindowSize';
30
- export * from './hooks/useInView';
31
- export * from './hooks/useIframeStyles';
32
- export * from './utils/viewAnimation';
33
- export * from './types/scrollAnimation.types';
package/dist/index.js DELETED
@@ -1,8 +0,0 @@
1
-
2
- 'use strict'
3
-
4
- if (process.env.NODE_ENV === 'production') {
5
- module.exports = require('./app-studio.cjs.production.min.js')
6
- } else {
7
- module.exports = require('./app-studio.cjs.development.js')
8
- }
@@ -1,9 +0,0 @@
1
- import React, { ReactNode } from 'react';
2
- export declare type AnalyticsConfig = {
3
- trackEvent?: (event: any) => void;
4
- };
5
- export declare const AnalyticsContext: React.Context<AnalyticsConfig>;
6
- export declare const useAnalytics: () => AnalyticsConfig;
7
- export declare const AnalyticsProvider: ({ trackEvent, children, }: AnalyticsConfig & {
8
- children?: ReactNode;
9
- }) => React.ReactElement;
@@ -1,58 +0,0 @@
1
- import React, { ReactNode } from 'react';
2
- export declare type ResponsiveConfig = Record<string, number>;
3
- export declare type ScreenOrientation = 'landscape' | 'portrait';
4
- export declare type DeviceType = 'mobile' | 'tablet' | 'desktop';
5
- export declare type DeviceConfig = Record<string, string[]>;
6
- export declare type QueryConfig = Record<string, string>;
7
- export declare type BreakpointConfig = {
8
- breakpoints: ResponsiveConfig;
9
- devices: DeviceConfig;
10
- mediaQueries: QueryConfig;
11
- currentBreakpoint: keyof ResponsiveConfig;
12
- currentDevice: DeviceType;
13
- orientation: ScreenOrientation;
14
- };
15
- export declare type WindowDimensions = {
16
- width: number;
17
- height: number;
18
- };
19
- export declare type ScreenConfig = {
20
- breakpoints: ResponsiveConfig;
21
- devices: DeviceConfig;
22
- mediaQueries: QueryConfig;
23
- currentWidth: number;
24
- currentHeight: number;
25
- currentBreakpoint: keyof ResponsiveConfig;
26
- currentDevice: DeviceType;
27
- orientation: ScreenOrientation;
28
- };
29
- export declare const debounce: (func: Function, wait: number) => (...args: any[]) => void;
30
- export declare const BreakpointContext: React.Context<BreakpointConfig>;
31
- export declare const WindowDimensionsContext: React.Context<WindowDimensions>;
32
- /**
33
- * Hook to access breakpoint information only.
34
- * Components using this hook will NOT re-render on every resize,
35
- * only when the breakpoint actually changes.
36
- */
37
- export declare const useBreakpointContext: () => BreakpointConfig;
38
- /**
39
- * Hook to access window dimensions.
40
- * Components using this hook WILL re-render on every resize.
41
- * Use sparingly - prefer useBreakpointContext when possible.
42
- */
43
- export declare const useWindowDimensionsContext: () => WindowDimensions;
44
- export declare const ResponsiveContext: React.Context<ScreenConfig>;
45
- /**
46
- * Legacy hook for backward compatibility.
47
- * Prefer useBreakpointContext for better performance.
48
- * @deprecated Use useBreakpointContext instead for better performance
49
- */
50
- export declare const useResponsiveContext: () => ScreenConfig;
51
- export interface ResponsiveProviderProps {
52
- breakpoints?: ResponsiveConfig;
53
- devices?: DeviceConfig;
54
- children: ReactNode;
55
- /** Optional target window to track (for iframe support). Defaults to global window. */
56
- targetWindow?: Window;
57
- }
58
- export declare const ResponsiveProvider: ({ breakpoints, devices, children, targetWindow, }: ResponsiveProviderProps) => React.JSX.Element;
@@ -1,32 +0,0 @@
1
- import React from 'react';
2
- import { UtilityClassManager } from '../element/css';
3
- /**
4
- * Context to hold the style manager instance.
5
- */
6
- interface StyleRegistryContextValue {
7
- manager: UtilityClassManager;
8
- }
9
- /**
10
- * Hook to access the current style manager.
11
- */
12
- export declare const useStyleRegistry: () => StyleRegistryContextValue;
13
- interface StyleRegistryProps {
14
- registry?: UtilityClassManager;
15
- children: React.ReactNode;
16
- }
17
- /**
18
- * Provider to wrap the app and manage styles.
19
- * When doing SSR, pass a new registry created via createStyleRegistry().
20
- */
21
- export declare const StyleRegistry: ({ registry, children }: StyleRegistryProps) => React.JSX.Element;
22
- /**
23
- * Helper to create a new style registry (UtilityClassManager) instance.
24
- * Useful for SSR to create a fresh manager per request.
25
- */
26
- export declare const createStyleRegistry: () => UtilityClassManager;
27
- /**
28
- * React hook to get the CSS string from the registry.
29
- * Note: This only works if you're using a fresh registry that collected styles.
30
- */
31
- export declare const useServerInsertedHTML: (registry: UtilityClassManager) => () => React.JSX.Element;
32
- export {};
@@ -1,46 +0,0 @@
1
- import React, { ReactNode } from 'react';
2
- import { ColorPalette, ColorSingleton } from '../utils/colors';
3
- export interface Colors {
4
- main: ColorSingleton;
5
- palette: ColorPalette;
6
- }
7
- export interface Theme {
8
- primary?: string;
9
- secondary?: string;
10
- success?: string;
11
- error?: string;
12
- warning?: string;
13
- disabled?: string;
14
- loading?: string;
15
- }
16
- interface Override {
17
- colors?: Colors;
18
- theme?: Theme;
19
- themeMode?: 'light' | 'dark';
20
- }
21
- interface ThemeContextProps {
22
- getColor: (name: string, override?: Override) => string;
23
- getColorHex: (name: string, override?: Override) => string;
24
- getColorRGBA: (name: string, alphaOrOverride?: number | Override, override?: Override) => string;
25
- getColorScheme: (name: string, override?: Override) => string | undefined;
26
- getContrastColor: (name: string, override?: Override) => 'black' | 'white';
27
- theme: Theme;
28
- colors: Colors;
29
- themeMode: 'light' | 'dark';
30
- setThemeMode: (mode: 'light' | 'dark') => void;
31
- }
32
- export declare const defaultThemeMain: Theme;
33
- export declare const ThemeContext: React.Context<ThemeContextProps>;
34
- export declare const useTheme: () => ThemeContextProps;
35
- export declare const deepMerge: (target: any, source: any) => any;
36
- interface ThemeProviderProps {
37
- theme?: Partial<Theme>;
38
- dark?: Partial<Colors>;
39
- light?: Partial<Colors>;
40
- mode?: 'light' | 'dark';
41
- children: ReactNode;
42
- strict?: boolean;
43
- targetWindow?: Window;
44
- }
45
- export declare const ThemeProvider: ({ theme: themeOverride, mode: initialMode, dark: darkOverride, light: lightOverride, children, strict, targetWindow, }: ThemeProviderProps) => React.ReactElement;
46
- export {};
@@ -1,11 +0,0 @@
1
- import React, { ReactNode } from 'react';
2
- export declare const WindowSizeContext: React.Context<{
3
- width: number;
4
- height: number;
5
- }>;
6
- export interface WindowSizeProviderProps {
7
- children: ReactNode;
8
- /** Optional target window to track (for iframe support). Defaults to global window. */
9
- targetWindow?: Window;
10
- }
11
- export declare const WindowSizeProvider: ({ children, targetWindow, }: WindowSizeProviderProps) => React.JSX.Element;