app-studio 0.7.18 → 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.
- package/README.md +11 -1
- package/dist/native/index.cjs +3360 -0
- package/dist/native/index.cjs.map +1 -0
- package/dist/native/index.d.mts +251 -0
- package/dist/native/index.d.ts +251 -0
- package/dist/native/index.js +3268 -0
- package/dist/native/index.js.map +1 -0
- package/dist/viewAnimation-B4BIoOwQ.d.mts +2246 -0
- package/dist/viewAnimation-B4BIoOwQ.d.ts +2246 -0
- package/dist/web/app-studio.umd.production.min.global.js +28 -0
- package/dist/web/app-studio.umd.production.min.global.js.map +1 -0
- package/dist/web/index.cjs +6109 -0
- package/dist/web/index.cjs.map +1 -0
- package/dist/web/index.d.mts +624 -0
- package/dist/web/index.d.ts +624 -0
- package/dist/web/index.js +6008 -0
- package/dist/web/index.js.map +1 -0
- package/docs/README.md +10 -0
- package/package.json +76 -14
- package/dist/app-studio.cjs.development.js +0 -6754
- package/dist/app-studio.cjs.development.js.map +0 -1
- package/dist/app-studio.cjs.production.min.js +0 -2
- package/dist/app-studio.cjs.production.min.js.map +0 -1
- package/dist/app-studio.esm.js +0 -6650
- package/dist/app-studio.esm.js.map +0 -1
- package/dist/app-studio.umd.development.js +0 -6757
- package/dist/app-studio.umd.development.js.map +0 -1
- package/dist/app-studio.umd.production.min.js +0 -2
- package/dist/app-studio.umd.production.min.js.map +0 -1
- package/dist/components/Form.d.ts +0 -17
- package/dist/components/Image.d.ts +0 -7
- package/dist/components/Skeleton.d.ts +0 -3
- package/dist/components/Text/Text.props.d.ts +0 -27
- package/dist/components/Text/Text.type.d.ts +0 -3
- package/dist/components/Text/Text.utils.d.ts +0 -2
- package/dist/components/Text/Text.view.d.ts +0 -20
- package/dist/components/Text.d.ts +0 -5
- package/dist/components/View.d.ts +0 -16
- package/dist/components/Wrapper.d.ts +0 -4
- package/dist/element/Animation.d.ts +0 -1164
- package/dist/element/Element.d.ts +0 -4
- package/dist/element/Element.types.d.ts +0 -123
- package/dist/element/css.d.ts +0 -50
- package/dist/element/utils.d.ts +0 -4
- package/dist/hooks/useActive.d.ts +0 -2
- package/dist/hooks/useClickOutside.d.ts +0 -6
- package/dist/hooks/useElementPosition.d.ts +0 -39
- package/dist/hooks/useFocus.d.ts +0 -2
- package/dist/hooks/useHover.d.ts +0 -2
- package/dist/hooks/useIframeStyles.d.ts +0 -41
- package/dist/hooks/useInView.d.ts +0 -11
- package/dist/hooks/useKeyPress.d.ts +0 -1
- package/dist/hooks/useMount.d.ts +0 -1
- package/dist/hooks/useOnScreen.d.ts +0 -6
- package/dist/hooks/useResponsive.d.ts +0 -59
- package/dist/hooks/useScroll.d.ts +0 -49
- package/dist/hooks/useWindowSize.d.ts +0 -4
- package/dist/index.d.ts +0 -33
- package/dist/index.js +0 -8
- package/dist/providers/Analytics.d.ts +0 -9
- package/dist/providers/Responsive.d.ts +0 -58
- package/dist/providers/StyleRegistry.d.ts +0 -32
- package/dist/providers/Theme.d.ts +0 -46
- package/dist/providers/WindowSize.d.ts +0 -11
- package/dist/stories/AnimateOn.stories.d.ts +0 -30
- package/dist/stories/Animation.stories.d.ts +0 -35
- package/dist/stories/BorderColor.stories.d.ts +0 -4
- package/dist/stories/Color.stories.d.ts +0 -4
- package/dist/stories/ColorAlpha.stories.d.ts +0 -5
- package/dist/stories/Component.stories.d.ts +0 -7
- package/dist/stories/CrossBrowserCompatibility.stories.d.ts +0 -6
- package/dist/stories/CssCascadeOrder.stories.d.ts +0 -10
- package/dist/stories/EmptyBeforeExample.stories.d.ts +0 -7
- package/dist/stories/EventHandlers.stories.d.ts +0 -6
- package/dist/stories/GradientColors.stories.d.ts +0 -6
- package/dist/stories/GroupPeer.stories.d.ts +0 -7
- package/dist/stories/Hooks.stories.d.ts +0 -17
- package/dist/stories/IframeCSSSupport.stories.d.ts +0 -28
- package/dist/stories/IframeSupport.stories.d.ts +0 -20
- package/dist/stories/Image.stories.d.ts +0 -6
- package/dist/stories/Scroll.stories.d.ts +0 -9
- package/dist/stories/ScrollAnimation.stories.d.ts +0 -36
- package/dist/stories/ScrollTimeline.stories.d.ts +0 -6
- package/dist/stories/Skeleton.stories.d.ts +0 -5
- package/dist/stories/Text.stories.d.ts +0 -18
- package/dist/stories/VendorPrefix.stories.d.ts +0 -6
- package/dist/stories/View.stories.d.ts +0 -10
- package/dist/stories/ViewAnimation.stories.d.ts +0 -33
- package/dist/test/CssVariablesTest.d.ts +0 -3
- package/dist/test/LowercaseVendorPrefixTest.d.ts +0 -3
- package/dist/test/VendorPrefixTest.d.ts +0 -3
- package/dist/test/WebkitTextStrokeTest.d.ts +0 -3
- package/dist/types/scrollAnimation.types.d.ts +0 -75
- package/dist/utils/colors.d.ts +0 -21
- package/dist/utils/constants.d.ts +0 -24
- package/dist/utils/cssProperties.d.ts +0 -8
- package/dist/utils/env.d.ts +0 -15
- package/dist/utils/hash.d.ts +0 -4
- package/dist/utils/shadow.d.ts +0 -10
- package/dist/utils/style.d.ts +0 -22
- package/dist/utils/typography.d.ts +0 -45
- package/dist/utils/vendorPrefixes.d.ts +0 -19
- package/dist/utils/viewAnimation.d.ts +0 -138
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ComponentStory } from '@storybook/react';
|
|
3
|
-
import { View } from '../src/index';
|
|
4
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("../src").ElementProps & React.RefAttributes<HTMLElement> & import("../src").ViewProps>;
|
|
5
|
-
export default _default;
|
|
6
|
-
/**
|
|
7
|
-
* Default behavior: animations trigger on Both (mount + scroll into viewport)
|
|
8
|
-
*/
|
|
9
|
-
export declare const DefaultBehavior: ComponentStory<typeof View>;
|
|
10
|
-
/**
|
|
11
|
-
* Explicitly set animateOn="View"
|
|
12
|
-
*/
|
|
13
|
-
export declare const ExplicitView: ComponentStory<typeof View>;
|
|
14
|
-
/**
|
|
15
|
-
* Using animateOn="Mount" for immediate animations
|
|
16
|
-
*/
|
|
17
|
-
export declare const MountBehavior: ComponentStory<typeof View>;
|
|
18
|
-
/**
|
|
19
|
-
* Comparison of Both vs Mount vs View
|
|
20
|
-
*/
|
|
21
|
-
export declare const Comparison: ComponentStory<typeof View>;
|
|
22
|
-
/**
|
|
23
|
-
* Multiple animations with mixed triggers
|
|
24
|
-
*/
|
|
25
|
-
export declare const MixedTriggers: ComponentStory<typeof View>;
|
|
26
|
-
/**
|
|
27
|
-
* Special Case: Timeline Override
|
|
28
|
-
* If you provide an explicit timeline (e.g. scroll()), it is respected even if animateOn="View" is set.
|
|
29
|
-
*/
|
|
30
|
-
export declare const TimelineOverride: ComponentStory<typeof View>;
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ComponentStory } from '@storybook/react';
|
|
3
|
-
import { View } from '../src/index';
|
|
4
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("../src").ElementProps & React.RefAttributes<HTMLElement> & import("../src").ViewProps>;
|
|
5
|
-
export default _default;
|
|
6
|
-
export declare const SelectableAnimation: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("../src").ElementProps & React.RefAttributes<HTMLElement> & import("../src").ViewProps>;
|
|
7
|
-
export declare const SequencesAnimation: ComponentStory<typeof View>;
|
|
8
|
-
export declare const TranslationAnimation: ComponentStory<typeof View>;
|
|
9
|
-
export declare const RotationOnHover: ComponentStory<typeof View>;
|
|
10
|
-
export declare const ScalingAnimation: ComponentStory<typeof View>;
|
|
11
|
-
export declare const ColorChangeAnimation: ComponentStory<typeof View>;
|
|
12
|
-
export declare const InfiniteRotation: ComponentStory<typeof View>;
|
|
13
|
-
export declare const ResponsiveAnimation: ComponentStory<typeof View>;
|
|
14
|
-
export declare const BlinkAnimation: ComponentStory<typeof View>;
|
|
15
|
-
export declare const ComplexAnimation: ComponentStory<typeof View>;
|
|
16
|
-
export declare const CustomTiming: ComponentStory<typeof View>;
|
|
17
|
-
export declare const ClickAnimation: ComponentStory<typeof View>;
|
|
18
|
-
export declare const AnimateInExample: ComponentStory<typeof View>;
|
|
19
|
-
export declare const AnimateOutExample: ComponentStory<typeof View>;
|
|
20
|
-
export declare const VisibleAnimation: ComponentStory<typeof View>;
|
|
21
|
-
/**
|
|
22
|
-
* Special Use Cases: Scroll-Driven Animations using Scroll Timeline
|
|
23
|
-
* These animations progress as the user scrolls, rather than just triggering on view.
|
|
24
|
-
*/
|
|
25
|
-
export declare const ScrollDrivenAnimations: ComponentStory<typeof View>;
|
|
26
|
-
/**
|
|
27
|
-
* Special Use Cases: View Timeline Presets
|
|
28
|
-
* Performant, pure-CSS animations that trigger when elements enter the viewport.
|
|
29
|
-
*/
|
|
30
|
-
export declare const ViewDrivenPresets: ComponentStory<typeof View>;
|
|
31
|
-
/**
|
|
32
|
-
* Typewriter Effect
|
|
33
|
-
* Demonstrates a classic typewriter animation with a blinking cursor.
|
|
34
|
-
*/
|
|
35
|
-
export declare const TypewriterEffect: ComponentStory<typeof View>;
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("../src").ElementProps & React.RefAttributes<HTMLElement> & import("../src").ViewProps>;
|
|
3
|
-
export default _default;
|
|
4
|
-
export declare const BorderColorExamples: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("../src").ElementProps & React.RefAttributes<HTMLElement> & import("../src").ViewProps>;
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("../src").ElementProps & React.RefAttributes<HTMLElement> & import("../src").ViewProps>;
|
|
3
|
-
export default _default;
|
|
4
|
-
export declare const ColorOverrideExample: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("../src").ElementProps & React.RefAttributes<HTMLElement> & import("../src").ViewProps>;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("../src").ElementProps & React.RefAttributes<HTMLElement> & import("../src").ViewProps>;
|
|
3
|
-
export default _default;
|
|
4
|
-
export declare const AlphaParameter: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("../src").ElementProps & React.RefAttributes<HTMLElement> & import("../src").ViewProps>;
|
|
5
|
-
export declare const NewColorPalettes: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("../src").ElementProps & React.RefAttributes<HTMLElement> & import("../src").ViewProps>;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { ComponentStory } from '@storybook/react';
|
|
2
|
-
import { Input as $Input, Image as $Image, Form as $Form } from '../src/index';
|
|
3
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, any>;
|
|
4
|
-
export default _default;
|
|
5
|
-
export declare const Input: ComponentStory<typeof $Input>;
|
|
6
|
-
export declare const Form: ComponentStory<typeof $Form>;
|
|
7
|
-
export declare const Image: ComponentStory<typeof $Image>;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ComponentStory } from '@storybook/react';
|
|
3
|
-
import { View } from '../src';
|
|
4
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("../src").ElementProps & React.RefAttributes<HTMLElement> & import("../src").ViewProps>;
|
|
5
|
-
export default _default;
|
|
6
|
-
export declare const VendorPrefixedProperties: ComponentStory<typeof View>;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ComponentStory } from '@storybook/react';
|
|
3
|
-
import { View } from '../src';
|
|
4
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("../src").ElementProps & React.RefAttributes<HTMLElement> & import("../src").ViewProps>;
|
|
5
|
-
export default _default;
|
|
6
|
-
export declare const BorderTopPlusBorderColor: ComponentStory<typeof View>;
|
|
7
|
-
export declare const BorderShorthandPlusBorderColor: ComponentStory<typeof View>;
|
|
8
|
-
export declare const BorderShorthandPlusSideShorthand: ComponentStory<typeof View>;
|
|
9
|
-
export declare const FullCascadeStack: ComponentStory<typeof View>;
|
|
10
|
-
export declare const ButtonFooterRepro: ComponentStory<typeof View>;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ComponentStory } from '@storybook/react';
|
|
3
|
-
import { View } from '../src';
|
|
4
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("../src").ElementProps & React.RefAttributes<HTMLElement> & import("../src").ViewProps>;
|
|
5
|
-
export default _default;
|
|
6
|
-
export declare const EmptyBeforePattern: ComponentStory<typeof View>;
|
|
7
|
-
export declare const MultipleNestedPseudos: ComponentStory<typeof View>;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ComponentStory } from '@storybook/react';
|
|
3
|
-
import { View } from '../src';
|
|
4
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("../src").ElementProps & React.RefAttributes<HTMLElement> & import("../src").ViewProps>;
|
|
5
|
-
export default _default;
|
|
6
|
-
export declare const EventHandlersTest: ComponentStory<typeof View>;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ComponentStory } from '@storybook/react';
|
|
3
|
-
import { View } from '../src';
|
|
4
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("../src").ElementProps & React.RefAttributes<HTMLElement> & import("../src").ViewProps>;
|
|
5
|
-
export default _default;
|
|
6
|
-
export declare const GradientWithColorTokens: ComponentStory<typeof View>;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ComponentStory } from '@storybook/react';
|
|
3
|
-
import { View } from '../src';
|
|
4
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("../src").ElementProps & React.RefAttributes<HTMLElement> & import("../src").ViewProps>;
|
|
5
|
-
export default _default;
|
|
6
|
-
export declare const GroupHover: ComponentStory<typeof View>;
|
|
7
|
-
export declare const PeerHover: ComponentStory<typeof View>;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { Meta, Story } from '@storybook/react';
|
|
2
|
-
declare const meta: Meta;
|
|
3
|
-
export declare const ActiveHook: Story;
|
|
4
|
-
export declare const ClickOutsideHook: Story;
|
|
5
|
-
export declare const ElementPositionBasicHook: Story;
|
|
6
|
-
export declare const ElementPositionConfigurableHook: Story;
|
|
7
|
-
export declare const ElementPositionHook: Story;
|
|
8
|
-
export declare const FocusHook: Story;
|
|
9
|
-
export declare const HoverHook: Story;
|
|
10
|
-
export declare const InViewHook: Story;
|
|
11
|
-
export declare const KeyPressHook: Story;
|
|
12
|
-
export declare const MountHook: Story;
|
|
13
|
-
export declare const ScrollHook: Story;
|
|
14
|
-
export declare const OnScreenHook: Story;
|
|
15
|
-
export declare const WindowSizeHook: Story;
|
|
16
|
-
export declare const ResponsiveHook: Story;
|
|
17
|
-
export default meta;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
declare const meta: Meta;
|
|
3
|
-
export default meta;
|
|
4
|
-
declare type Story = StoryObj;
|
|
5
|
-
/**
|
|
6
|
-
* Basic CSS utility classes in iframe
|
|
7
|
-
*/
|
|
8
|
-
export declare const BasicUtilityClasses: Story;
|
|
9
|
-
/**
|
|
10
|
-
* Pseudo-classes and states
|
|
11
|
-
*/
|
|
12
|
-
export declare const PseudoClassesAndStates: Story;
|
|
13
|
-
/**
|
|
14
|
-
* Animations in iframe
|
|
15
|
-
*/
|
|
16
|
-
export declare const AnimationsInIframe: Story;
|
|
17
|
-
/**
|
|
18
|
-
* Responsive styles in iframe
|
|
19
|
-
*/
|
|
20
|
-
export declare const ResponsiveStyles: Story;
|
|
21
|
-
/**
|
|
22
|
-
* Multiple iframes with independent styles
|
|
23
|
-
*/
|
|
24
|
-
export declare const MultipleIframes: Story;
|
|
25
|
-
/**
|
|
26
|
-
* Complex nested components
|
|
27
|
-
*/
|
|
28
|
-
export declare const ComplexComponents: Story;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
declare const meta: Meta;
|
|
3
|
-
export default meta;
|
|
4
|
-
declare type Story = StoryObj;
|
|
5
|
-
/**
|
|
6
|
-
* Basic iframe support demonstration
|
|
7
|
-
*/
|
|
8
|
-
export declare const BasicIframeSupport: Story;
|
|
9
|
-
/**
|
|
10
|
-
* Side-by-side comparison of parent and iframe
|
|
11
|
-
*/
|
|
12
|
-
export declare const SideBySideComparison: Story;
|
|
13
|
-
/**
|
|
14
|
-
* Multiple iframes
|
|
15
|
-
*/
|
|
16
|
-
export declare const MultipleIframes: Story;
|
|
17
|
-
export declare const ScrollAnimationInIframe: Story;
|
|
18
|
-
export declare const StickyScrollInIframe: Story;
|
|
19
|
-
export declare const FillTextInIframe: Story;
|
|
20
|
-
export declare const CreatePortalExample: Story;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ComponentStory } from '@storybook/react';
|
|
3
|
-
import { Image } from '../src/index';
|
|
4
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("../src").ElementProps & React.RefAttributes<HTMLElement> & import("../src").ImageProps>;
|
|
5
|
-
export default _default;
|
|
6
|
-
export declare const Exemple: ComponentStory<typeof Image>;
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { ComponentStory } from '@storybook/react';
|
|
2
|
-
import { Input as $Input } from '../src/index';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
export declare const AnimatedCards: () => React.JSX.Element;
|
|
5
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, any>;
|
|
6
|
-
export default _default;
|
|
7
|
-
export declare const Scroll: ComponentStory<typeof $Input>;
|
|
8
|
-
export declare const IframeScroll: ComponentStory<typeof $Input>;
|
|
9
|
-
export declare const IframeWindowScroll: ComponentStory<typeof $Input>;
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ComponentStory } from '@storybook/react';
|
|
3
|
-
import { View } from '../src/index';
|
|
4
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("../src").ElementProps & React.RefAttributes<HTMLElement> & import("../src").ViewProps>;
|
|
5
|
-
export default _default;
|
|
6
|
-
/**
|
|
7
|
-
* Demonstrates the useScrollAnimation hook with various configurations.
|
|
8
|
-
* This hook uses IntersectionObserver to track element visibility and progress.
|
|
9
|
-
*/
|
|
10
|
-
export declare const UseScrollAnimationHook: ComponentStory<typeof View>;
|
|
11
|
-
/**
|
|
12
|
-
* Demonstrates the useScroll hook for tracking scroll position and progress.
|
|
13
|
-
*/
|
|
14
|
-
export declare const UseScrollHook: ComponentStory<typeof View>;
|
|
15
|
-
/**
|
|
16
|
-
* Demonstrates the useScrollDirection hook.
|
|
17
|
-
*/
|
|
18
|
-
export declare const UseScrollDirectionHook: ComponentStory<typeof View>;
|
|
19
|
-
/**
|
|
20
|
-
* Demonstrates the useSmoothScroll hook for programmatic smooth scrolling.
|
|
21
|
-
*/
|
|
22
|
-
export declare const UseSmoothScrollHook: ComponentStory<typeof View>;
|
|
23
|
-
/**
|
|
24
|
-
* CSS View Timeline Animations - Pure CSS, no JavaScript state!
|
|
25
|
-
*/
|
|
26
|
-
export declare const CSSViewTimelineAnimations: ComponentStory<typeof View>;
|
|
27
|
-
/**
|
|
28
|
-
* Entry + Exit animations combined
|
|
29
|
-
*/
|
|
30
|
-
export declare const EntryExitAnimations: ComponentStory<typeof View>;
|
|
31
|
-
export declare const ScrollTextRevealStory: ComponentStory<typeof View>;
|
|
32
|
-
export declare const FillTextScrollRevealStory: ComponentStory<typeof View>;
|
|
33
|
-
/**
|
|
34
|
-
* All scroll-driven animation presets
|
|
35
|
-
*/
|
|
36
|
-
export declare const ScrollDrivenAnimationPresets: ComponentStory<typeof View>;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ComponentStory } from '@storybook/react';
|
|
3
|
-
import { View } from '../src';
|
|
4
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("../src").ElementProps & React.RefAttributes<HTMLElement> & import("../src").ViewProps>;
|
|
5
|
-
export default _default;
|
|
6
|
-
export declare const ScrollTimeline: ComponentStory<typeof View>;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { ComponentStory } from '@storybook/react';
|
|
2
|
-
import { Skeleton } from '../src/index';
|
|
3
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, any>;
|
|
4
|
-
export default _default;
|
|
5
|
-
export declare const Exemple: ComponentStory<typeof Skeleton>;
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ComponentStory } from '@storybook/react';
|
|
3
|
-
import { Text } from '../src/index';
|
|
4
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, Pick<any, string | number | symbol> & React.RefAttributes<HTMLElement>>;
|
|
5
|
-
export default _default;
|
|
6
|
-
export declare const Exemple: ComponentStory<typeof Text>;
|
|
7
|
-
export declare const blend: ComponentStory<typeof Text>;
|
|
8
|
-
export declare const DarkLightMode: ComponentStory<typeof Text>;
|
|
9
|
-
/**
|
|
10
|
-
* Text Examples - Design System
|
|
11
|
-
*
|
|
12
|
-
* Showcases the Text component following the design guidelines:
|
|
13
|
-
* - Typography: Inter/Geist font, specific sizes/weights
|
|
14
|
-
* - Spacing: 4px grid system
|
|
15
|
-
* - Colors: Neutral palette with semantic colors
|
|
16
|
-
*/
|
|
17
|
-
export declare const DesignSystemText: () => React.JSX.Element;
|
|
18
|
-
export declare const BlendModes: ComponentStory<typeof Text>;
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ComponentStory } from '@storybook/react';
|
|
3
|
-
import { View } from '../src';
|
|
4
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("../src").ElementProps & React.RefAttributes<HTMLElement> & import("../src").ViewProps>;
|
|
5
|
-
export default _default;
|
|
6
|
-
export declare const WebkitBackgroundClip: ComponentStory<typeof View>;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ComponentStory } from '@storybook/react';
|
|
3
|
-
import { View } from '../src/index';
|
|
4
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("../src").ElementProps & React.RefAttributes<HTMLElement> & import("../src").ViewProps>;
|
|
5
|
-
export default _default;
|
|
6
|
-
export declare const Exemple: ComponentStory<typeof View>;
|
|
7
|
-
export declare const VerticalExemple: ComponentStory<typeof View>;
|
|
8
|
-
export declare const VerticalResponsiveExemple: ComponentStory<typeof View>;
|
|
9
|
-
export declare const HorizontalExemple: ComponentStory<typeof View>;
|
|
10
|
-
export declare const HorizontalResponsiveExemple: ComponentStory<typeof View>;
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ComponentStory } from '@storybook/react';
|
|
3
|
-
import { View } from '../src/index';
|
|
4
|
-
declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("../src").ElementProps & React.RefAttributes<HTMLElement> & import("../src").ViewProps>;
|
|
5
|
-
export default _default;
|
|
6
|
-
/**
|
|
7
|
-
* All preset view animations in one demo
|
|
8
|
-
*/
|
|
9
|
-
export declare const AllPresets: ComponentStory<typeof View>;
|
|
10
|
-
/**
|
|
11
|
-
* Custom JSON-configured animation
|
|
12
|
-
*/
|
|
13
|
-
export declare const CustomAnimation: ComponentStory<typeof View>;
|
|
14
|
-
/**
|
|
15
|
-
* Using viewAnimationPresets - JSON configs
|
|
16
|
-
*/
|
|
17
|
-
export declare const UsingPresets: ComponentStory<typeof View>;
|
|
18
|
-
/**
|
|
19
|
-
* Staggered animations with delay
|
|
20
|
-
*/
|
|
21
|
-
export declare const StaggeredAnimations: ComponentStory<typeof View>;
|
|
22
|
-
/**
|
|
23
|
-
* Performance comparison demonstration
|
|
24
|
-
*/
|
|
25
|
-
export declare const PerformanceBenefits: ComponentStory<typeof View>;
|
|
26
|
-
/**
|
|
27
|
-
* Grid layout with mixed animations
|
|
28
|
-
*/
|
|
29
|
-
export declare const AnimatedGrid: ComponentStory<typeof View>;
|
|
30
|
-
/**
|
|
31
|
-
* Entry and Exit animations
|
|
32
|
-
*/
|
|
33
|
-
export declare const EntryAndExit: ComponentStory<typeof View>;
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Types for CSS scroll-driven view() timeline animations
|
|
3
|
-
* These enable performant animations without JavaScript state
|
|
4
|
-
*/
|
|
5
|
-
/** Animation range when element enters/exits viewport */
|
|
6
|
-
export declare type ViewAnimationRange = 'entry' | 'exit' | 'cover' | 'contain' | string;
|
|
7
|
-
/** Timing function options */
|
|
8
|
-
export declare type ViewAnimationTimingFunction = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | string;
|
|
9
|
-
/** Fill mode options */
|
|
10
|
-
export declare type ViewAnimationFillMode = 'none' | 'forwards' | 'backwards' | 'both';
|
|
11
|
-
/**
|
|
12
|
-
* JSON configuration for view-based scroll animations
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* const fadeInConfig: ViewAnimationConfig = {
|
|
16
|
-
* keyframes: {
|
|
17
|
-
* from: { opacity: 0 },
|
|
18
|
-
* to: { opacity: 1 }
|
|
19
|
-
* },
|
|
20
|
-
* timing: { duration: '0.5s', timingFunction: 'ease' },
|
|
21
|
-
* range: 'entry'
|
|
22
|
-
* };
|
|
23
|
-
*/
|
|
24
|
-
export interface ViewAnimationConfig {
|
|
25
|
-
/** Keyframes: CSS properties at different animation points */
|
|
26
|
-
keyframes: {
|
|
27
|
-
from?: Record<string, string | number>;
|
|
28
|
-
to?: Record<string, string | number>;
|
|
29
|
-
[percentage: string]: Record<string, string | number> | undefined;
|
|
30
|
-
};
|
|
31
|
-
/** Animation timing configuration */
|
|
32
|
-
timing?: {
|
|
33
|
-
duration?: string;
|
|
34
|
-
timingFunction?: ViewAnimationTimingFunction;
|
|
35
|
-
fillMode?: ViewAnimationFillMode;
|
|
36
|
-
delay?: string;
|
|
37
|
-
};
|
|
38
|
-
/** When to animate relative to viewport */
|
|
39
|
-
range?: ViewAnimationRange;
|
|
40
|
-
/** Respect prefers-reduced-motion media query */
|
|
41
|
-
respectReducedMotion?: boolean;
|
|
42
|
-
}
|
|
43
|
-
/**
|
|
44
|
-
* Options for view animation preset functions
|
|
45
|
-
*/
|
|
46
|
-
export interface ViewAnimationOptions {
|
|
47
|
-
duration?: string;
|
|
48
|
-
timingFunction?: ViewAnimationTimingFunction;
|
|
49
|
-
range?: ViewAnimationRange;
|
|
50
|
-
delay?: string;
|
|
51
|
-
}
|
|
52
|
-
/**
|
|
53
|
-
* Options for slide animations
|
|
54
|
-
*/
|
|
55
|
-
export interface SlideAnimationOptions extends ViewAnimationOptions {
|
|
56
|
-
distance?: string;
|
|
57
|
-
}
|
|
58
|
-
/**
|
|
59
|
-
* Options for scale animations
|
|
60
|
-
*/
|
|
61
|
-
export interface ScaleAnimationOptions extends ViewAnimationOptions {
|
|
62
|
-
scale?: number;
|
|
63
|
-
}
|
|
64
|
-
/**
|
|
65
|
-
* Options for blur animations
|
|
66
|
-
*/
|
|
67
|
-
export interface BlurAnimationOptions extends ViewAnimationOptions {
|
|
68
|
-
blur?: string;
|
|
69
|
-
}
|
|
70
|
-
/**
|
|
71
|
-
* Options for rotate animations
|
|
72
|
-
*/
|
|
73
|
-
export interface RotateAnimationOptions extends ViewAnimationOptions {
|
|
74
|
-
angle?: string;
|
|
75
|
-
}
|
package/dist/utils/colors.d.ts
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
export declare type ColorPalette = Record<string, Record<number, string>>;
|
|
2
|
-
export declare type ColorSingleton = Record<string, string>;
|
|
3
|
-
export declare const defaultLightPalette: ColorPalette;
|
|
4
|
-
export declare const defaultDarkPalette: ColorPalette;
|
|
5
|
-
export declare const defaultColors: ColorConfig;
|
|
6
|
-
export declare type ColorConfig = Record<string, string>;
|
|
7
|
-
export declare const defaultLightColors: ColorConfig;
|
|
8
|
-
export declare const defaultDarkColors: ColorConfig;
|
|
9
|
-
/**
|
|
10
|
-
* Checks if a value contains color tokens.
|
|
11
|
-
* @param value - The string to check.
|
|
12
|
-
* @returns True if the value contains color tokens.
|
|
13
|
-
*/
|
|
14
|
-
export declare const hasColorToken: (value: string) => boolean;
|
|
15
|
-
/**
|
|
16
|
-
* Replaces color tokens in a string with values returned by a resolver function.
|
|
17
|
-
* @param value - The string containing color tokens.
|
|
18
|
-
* @param resolver - A function that takes a token and returns its replacement value.
|
|
19
|
-
* @returns The string with color tokens replaced.
|
|
20
|
-
*/
|
|
21
|
-
export declare const replaceColorTokens: (value: string, resolver: (token: string) => string) => string;
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
2
|
-
import { AnimationDirection, AnimationFillMode, AnimationIterationCount, AnimationKeyframes } from '../types/style';
|
|
3
|
-
export declare const NumberProps: Set<string>;
|
|
4
|
-
export declare const excludedKeys: Set<string>;
|
|
5
|
-
export declare const extraKeys: Set<string>;
|
|
6
|
-
export declare const includeKeys: Set<string>;
|
|
7
|
-
export interface AnimationProps {
|
|
8
|
-
from?: CSSProperties | any;
|
|
9
|
-
to?: CSSProperties | any;
|
|
10
|
-
leave?: CSSProperties | any;
|
|
11
|
-
duration?: string;
|
|
12
|
-
timingFunction?: string | 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out';
|
|
13
|
-
delay?: string;
|
|
14
|
-
property?: string;
|
|
15
|
-
iterationCount?: AnimationIterationCount;
|
|
16
|
-
direction?: AnimationDirection;
|
|
17
|
-
fillMode?: AnimationFillMode;
|
|
18
|
-
playState?: AnimationPlayState;
|
|
19
|
-
keyframes?: AnimationKeyframes;
|
|
20
|
-
timeline?: string;
|
|
21
|
-
range?: string;
|
|
22
|
-
'--fill'?: any;
|
|
23
|
-
[key: string]: CSSProperties | string | number | Record<string, string | number> | AnimationKeyframes | undefined;
|
|
24
|
-
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { CSSProperties } from 'react';
|
|
2
|
-
declare type ExtendedCSSProperties = CSSProperties & {
|
|
3
|
-
[key: string]: any;
|
|
4
|
-
};
|
|
5
|
-
export declare const vendorPrefixToKebabCase: (property: string) => string;
|
|
6
|
-
export declare const cssPropertyKeys: Array<keyof ExtendedCSSProperties>;
|
|
7
|
-
export declare const numericCssProperties: Set<string>;
|
|
8
|
-
export {};
|
package/dist/utils/env.d.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* whether in browser env
|
|
3
|
-
*/
|
|
4
|
-
export declare const isBrowser: () => boolean;
|
|
5
|
-
/**
|
|
6
|
-
* get window.g_initialProps
|
|
7
|
-
*/
|
|
8
|
-
export declare const getWindowInitialProps: () => any;
|
|
9
|
-
/**
|
|
10
|
-
* whether SSR success in client
|
|
11
|
-
*/
|
|
12
|
-
export declare const isSSR: boolean;
|
|
13
|
-
export declare function isDev(): boolean;
|
|
14
|
-
export declare function isProd(): boolean;
|
|
15
|
-
export declare function isMobile(): RegExpMatchArray | null;
|
package/dist/utils/hash.d.ts
DELETED
package/dist/utils/shadow.d.ts
DELETED
package/dist/utils/style.d.ts
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Converts a camelCase property to kebab-case with proper vendor prefix handling
|
|
3
|
-
*
|
|
4
|
-
* @param property The property name in camelCase
|
|
5
|
-
* @returns The property name in kebab-case with appropriate vendor prefixes
|
|
6
|
-
*/
|
|
7
|
-
export declare function propertyToKebabCase(property: string): string;
|
|
8
|
-
export declare const setSize: (newSize: string | number, styleProps: Record<string, any>) => void;
|
|
9
|
-
export declare const isStyleProp: (prop: string) => boolean;
|
|
10
|
-
/**
|
|
11
|
-
* Enhances styleObjectToCss to handle vendor prefixed properties
|
|
12
|
-
*
|
|
13
|
-
* @param styleObject The style object with camelCase properties
|
|
14
|
-
* @returns A CSS string with properly formatted properties
|
|
15
|
-
*/
|
|
16
|
-
export declare function styleObjectToCss(styleObject: Record<string, any>): string;
|
|
17
|
-
export declare const toKebabCase: (str: string) => string;
|
|
18
|
-
export declare const processStyleProperty: (property: string, value: any, getColor: (color: string) => string) => string | number;
|
|
19
|
-
export declare const StyleProps: string[];
|
|
20
|
-
export declare const StyledProps: Set<string>;
|
|
21
|
-
export declare const shouldBeAttribute: (prop: string) => boolean;
|
|
22
|
-
export declare const generateClassName: (property: string, value: any, getColor: (color: string) => string) => string;
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
export declare const Typography: {
|
|
2
|
-
letterSpacings: {
|
|
3
|
-
tighter: number;
|
|
4
|
-
tight: number;
|
|
5
|
-
normal: number;
|
|
6
|
-
wide: number;
|
|
7
|
-
wider: number;
|
|
8
|
-
widest: number;
|
|
9
|
-
};
|
|
10
|
-
lineHeights: {
|
|
11
|
-
xs: number;
|
|
12
|
-
sm: number;
|
|
13
|
-
md: number;
|
|
14
|
-
lg: number;
|
|
15
|
-
xl: number;
|
|
16
|
-
'2xl': number;
|
|
17
|
-
'3xl': number;
|
|
18
|
-
'4xl': number;
|
|
19
|
-
'5xl': number;
|
|
20
|
-
'6xl': number;
|
|
21
|
-
};
|
|
22
|
-
fontWeights: {
|
|
23
|
-
hairline: number;
|
|
24
|
-
thin: number;
|
|
25
|
-
light: number;
|
|
26
|
-
normal: number;
|
|
27
|
-
medium: number;
|
|
28
|
-
semiBold: number;
|
|
29
|
-
bold: number;
|
|
30
|
-
extraBold: number;
|
|
31
|
-
black: number;
|
|
32
|
-
};
|
|
33
|
-
fontSizes: {
|
|
34
|
-
xs: number;
|
|
35
|
-
sm: number;
|
|
36
|
-
md: number;
|
|
37
|
-
lg: number;
|
|
38
|
-
xl: number;
|
|
39
|
-
'2xl': number;
|
|
40
|
-
'3xl': number;
|
|
41
|
-
'4xl': number;
|
|
42
|
-
'5xl': number;
|
|
43
|
-
'6xl': number;
|
|
44
|
-
};
|
|
45
|
-
};
|