@plasmicapp/react-web 0.2.396 → 0.2.398
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/dist/all.d.ts +344 -184
- package/dist/index-common.d.ts +4 -3
- package/dist/index.cjs.js +1061 -898
- package/dist/index.cjs.js.map +1 -1
- package/dist/react-web.esm.js +1059 -899
- package/dist/react-web.esm.js.map +1 -1
- package/dist/render/elements.d.ts +1 -1
- package/dist/render/global-variants.d.ts +49 -1
- package/dist/render/style-tokens.d.ts +114 -0
- package/package.json +9 -9
- package/skinny/dist/index-common.d.ts +4 -3
- package/skinny/dist/index.js +256 -96
- package/skinny/dist/index.js.map +1 -1
- package/skinny/dist/render/elements.d.ts +1 -1
- package/skinny/dist/render/global-variants.d.ts +49 -1
- package/skinny/dist/render/style-tokens.d.ts +114 -0
package/dist/all.d.ts
CHANGED
|
@@ -12542,6 +12542,191 @@ declare function omit<T extends {}>(obj: T, ...keys: (keyof T)[]): Partial<T>;
|
|
|
12542
12542
|
type StrictProps<T, TExpected> = Exclude<keyof T, keyof TExpected> extends never ? {} : Partial<"Unexpected extraneous props">;
|
|
12543
12543
|
type HTMLElementRefOf<T extends keyof JSX.IntrinsicElements> = Exclude<React__default.ComponentProps<T>["ref"], string>;
|
|
12544
12544
|
|
|
12545
|
+
declare type HeadMetadata = {
|
|
12546
|
+
title?: string;
|
|
12547
|
+
description?: string;
|
|
12548
|
+
image?: string;
|
|
12549
|
+
canonical?: string;
|
|
12550
|
+
};
|
|
12551
|
+
|
|
12552
|
+
declare function PlasmicHead(props: HeadMetadata): React$1.JSX.Element | null;
|
|
12553
|
+
declare const plasmicHeadMeta: {
|
|
12554
|
+
name: string;
|
|
12555
|
+
displayName: string;
|
|
12556
|
+
description: string;
|
|
12557
|
+
importName: string;
|
|
12558
|
+
importPath: string;
|
|
12559
|
+
isRepeatable: boolean;
|
|
12560
|
+
styleSections: boolean;
|
|
12561
|
+
props: {
|
|
12562
|
+
title: {
|
|
12563
|
+
type: string;
|
|
12564
|
+
displayName: string;
|
|
12565
|
+
};
|
|
12566
|
+
description: {
|
|
12567
|
+
type: string;
|
|
12568
|
+
displayName: string;
|
|
12569
|
+
};
|
|
12570
|
+
image: {
|
|
12571
|
+
type: string;
|
|
12572
|
+
displayName: string;
|
|
12573
|
+
};
|
|
12574
|
+
canonical: {
|
|
12575
|
+
type: string;
|
|
12576
|
+
displayName: string;
|
|
12577
|
+
};
|
|
12578
|
+
};
|
|
12579
|
+
};
|
|
12580
|
+
|
|
12581
|
+
declare function PlasmicIcon(props: React$1.ComponentProps<"svg"> & {
|
|
12582
|
+
PlasmicIconType: React$1.ComponentType;
|
|
12583
|
+
}): React$1.JSX.Element;
|
|
12584
|
+
|
|
12585
|
+
/**
|
|
12586
|
+
* Responsive `<img/>` replacement, based on `next/image`
|
|
12587
|
+
*/
|
|
12588
|
+
|
|
12589
|
+
interface ImageLoader {
|
|
12590
|
+
supportsUrl: (url: string) => boolean;
|
|
12591
|
+
transformUrl: (opts: {
|
|
12592
|
+
src: string;
|
|
12593
|
+
width?: number;
|
|
12594
|
+
quality?: number;
|
|
12595
|
+
format?: "webp";
|
|
12596
|
+
}) => string;
|
|
12597
|
+
}
|
|
12598
|
+
type ImgTagProps = Omit<React__default.ComponentProps<"img">, "src" | "srcSet" | "ref" | "style">;
|
|
12599
|
+
interface PlasmicImgProps extends ImgTagProps {
|
|
12600
|
+
/**
|
|
12601
|
+
* Either an object with the src string, and its full width and height,
|
|
12602
|
+
* or just a src string with unknown intrinsic dimensions.
|
|
12603
|
+
*/
|
|
12604
|
+
src?: string | {
|
|
12605
|
+
src: string | {
|
|
12606
|
+
src: string;
|
|
12607
|
+
height: number;
|
|
12608
|
+
width: number;
|
|
12609
|
+
blurDataURL?: string;
|
|
12610
|
+
};
|
|
12611
|
+
fullHeight: number;
|
|
12612
|
+
fullWidth: number;
|
|
12613
|
+
aspectRatio?: number;
|
|
12614
|
+
};
|
|
12615
|
+
/**
|
|
12616
|
+
* className applied to the wrapper element if one is used.
|
|
12617
|
+
*/
|
|
12618
|
+
className?: string;
|
|
12619
|
+
/**
|
|
12620
|
+
* css width
|
|
12621
|
+
*/
|
|
12622
|
+
displayWidth?: number | string;
|
|
12623
|
+
/**
|
|
12624
|
+
* css height
|
|
12625
|
+
*/
|
|
12626
|
+
displayHeight?: number | string;
|
|
12627
|
+
/**
|
|
12628
|
+
* css min-width
|
|
12629
|
+
*/
|
|
12630
|
+
displayMinWidth?: number | string;
|
|
12631
|
+
/**
|
|
12632
|
+
* css min-height
|
|
12633
|
+
*/
|
|
12634
|
+
displayMinHeight?: number | string;
|
|
12635
|
+
/**
|
|
12636
|
+
* css max-width
|
|
12637
|
+
*/
|
|
12638
|
+
displayMaxWidth?: number | string;
|
|
12639
|
+
/**
|
|
12640
|
+
* css max-height
|
|
12641
|
+
*/
|
|
12642
|
+
displayMaxHeight?: number | string;
|
|
12643
|
+
/**
|
|
12644
|
+
* For variable quality formats like jpg, the quality from 0 to 100
|
|
12645
|
+
*/
|
|
12646
|
+
quality?: number;
|
|
12647
|
+
/**
|
|
12648
|
+
* ImageLoader to use for loading different dimensions of the image.
|
|
12649
|
+
* If none specified, will not attempt to load different dimensions.
|
|
12650
|
+
*/
|
|
12651
|
+
loader?: "plasmic" | ImageLoader;
|
|
12652
|
+
/**
|
|
12653
|
+
* Style applied to the wrapper element. objectFit and objectPosition
|
|
12654
|
+
* rules are applied to the img element.
|
|
12655
|
+
*/
|
|
12656
|
+
style?: React__default.CSSProperties;
|
|
12657
|
+
/**
|
|
12658
|
+
* Ref for the img element. The normal <PlasmicImg ref={...} />
|
|
12659
|
+
* prop gives the root element instead, which may be the img element
|
|
12660
|
+
* or a wrapper element
|
|
12661
|
+
*/
|
|
12662
|
+
imgRef?: React__default.Ref<HTMLImageElement>;
|
|
12663
|
+
}
|
|
12664
|
+
declare const PlasmicImg: React__default.ForwardRefExoticComponent<PlasmicImgProps & React__default.RefAttributes<HTMLElement>>;
|
|
12665
|
+
|
|
12666
|
+
declare const PlasmicLink: React__default.ForwardRefExoticComponent<Omit<any, "ref"> & React__default.RefAttributes<any>>;
|
|
12667
|
+
|
|
12668
|
+
declare function PlasmicSlot<T extends keyof JSX.IntrinsicElements = "div">(props: React$1.ComponentProps<T> & {
|
|
12669
|
+
as?: T;
|
|
12670
|
+
defaultContents?: React$1.ReactNode;
|
|
12671
|
+
value?: React$1.ReactNode;
|
|
12672
|
+
}): React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
|
|
12673
|
+
declare function renderPlasmicSlot<T extends keyof JSX.IntrinsicElements = "div">(opts: {
|
|
12674
|
+
as?: T;
|
|
12675
|
+
defaultContents?: React$1.ReactNode;
|
|
12676
|
+
value?: React$1.ReactNode;
|
|
12677
|
+
}): React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
|
|
12678
|
+
|
|
12679
|
+
declare const Stack: (<T extends keyof JSX.IntrinsicElements = "div">(props: {
|
|
12680
|
+
as?: T | undefined;
|
|
12681
|
+
hasGap?: boolean | undefined;
|
|
12682
|
+
} & React$1.ComponentProps<T>) => React$1.ReactElement) & {
|
|
12683
|
+
div: React$1.FC<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
|
|
12684
|
+
hasGap?: boolean | undefined;
|
|
12685
|
+
}>;
|
|
12686
|
+
a: React$1.FC<React$1.ClassAttributes<HTMLAnchorElement> & React$1.AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
12687
|
+
hasGap?: boolean | undefined;
|
|
12688
|
+
}>;
|
|
12689
|
+
button: React$1.FC<React$1.ClassAttributes<HTMLButtonElement> & React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
12690
|
+
hasGap?: boolean | undefined;
|
|
12691
|
+
}>;
|
|
12692
|
+
h1: React$1.FC<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
|
|
12693
|
+
hasGap?: boolean | undefined;
|
|
12694
|
+
}>;
|
|
12695
|
+
h2: React$1.FC<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
|
|
12696
|
+
hasGap?: boolean | undefined;
|
|
12697
|
+
}>;
|
|
12698
|
+
h3: React$1.FC<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
|
|
12699
|
+
hasGap?: boolean | undefined;
|
|
12700
|
+
}>;
|
|
12701
|
+
h4: React$1.FC<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
|
|
12702
|
+
hasGap?: boolean | undefined;
|
|
12703
|
+
}>;
|
|
12704
|
+
h5: React$1.FC<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
|
|
12705
|
+
hasGap?: boolean | undefined;
|
|
12706
|
+
}>;
|
|
12707
|
+
h6: React$1.FC<React$1.ClassAttributes<HTMLHeadingElement> & React$1.HTMLAttributes<HTMLHeadingElement> & {
|
|
12708
|
+
hasGap?: boolean | undefined;
|
|
12709
|
+
}>;
|
|
12710
|
+
label: React$1.FC<React$1.ClassAttributes<HTMLLabelElement> & React$1.LabelHTMLAttributes<HTMLLabelElement> & {
|
|
12711
|
+
hasGap?: boolean | undefined;
|
|
12712
|
+
}>;
|
|
12713
|
+
form: React$1.FC<React$1.ClassAttributes<HTMLFormElement> & React$1.FormHTMLAttributes<HTMLFormElement> & {
|
|
12714
|
+
hasGap?: boolean | undefined;
|
|
12715
|
+
}>;
|
|
12716
|
+
section: React$1.FC<React$1.ClassAttributes<HTMLElement> & React$1.HTMLAttributes<HTMLElement> & {
|
|
12717
|
+
hasGap?: boolean | undefined;
|
|
12718
|
+
}>;
|
|
12719
|
+
head: React$1.FC<React$1.ClassAttributes<HTMLHeadElement> & React$1.HTMLAttributes<HTMLHeadElement> & {
|
|
12720
|
+
hasGap?: boolean | undefined;
|
|
12721
|
+
}>;
|
|
12722
|
+
main: React$1.FC<React$1.ClassAttributes<HTMLElement> & React$1.HTMLAttributes<HTMLElement> & {
|
|
12723
|
+
hasGap?: boolean | undefined;
|
|
12724
|
+
}>;
|
|
12725
|
+
nav: React$1.FC<React$1.ClassAttributes<HTMLElement> & React$1.HTMLAttributes<HTMLElement> & {
|
|
12726
|
+
hasGap?: boolean | undefined;
|
|
12727
|
+
}>;
|
|
12728
|
+
};
|
|
12729
|
+
|
|
12545
12730
|
// Type definitions for dlv 1.1
|
|
12546
12731
|
// Project: https://github.com/developit/dlv#readme
|
|
12547
12732
|
// Definitions by: Ryan Sonshine <https://github.com/ryansonshine>
|
|
@@ -12656,7 +12841,7 @@ type Flex<DefaultElementType extends React$1.ElementType> = (Omit<DefaultOverrid
|
|
|
12656
12841
|
as?: never;
|
|
12657
12842
|
render?: never;
|
|
12658
12843
|
}) | ((props: React$1.ComponentProps<DefaultElementType>) => React$1.ReactNode);
|
|
12659
|
-
declare function hasVariant<V extends Variants>(variants: V | undefined, groupName: keyof V, variant: string):
|
|
12844
|
+
declare function hasVariant<V extends Variants>(variants: V | undefined, groupName: keyof V, variant: string): boolean;
|
|
12660
12845
|
declare function createPlasmicElementProxy<DefaultElementType extends React$1.ElementType>(defaultElement: DefaultElementType, props: Partial<React$1.ComponentProps<DefaultElementType>>, ...children: React$1.ReactNode[]): React$1.ReactNode;
|
|
12661
12846
|
declare function makeFragment(...children: React$1.ReactNode[]): React$1.FunctionComponentElement<{
|
|
12662
12847
|
children?: React$1.ReactNode;
|
|
@@ -12683,141 +12868,55 @@ declare function deriveRenderOpts(props: Record<string, any>, config: {
|
|
|
12683
12868
|
overrides: Partial<Partial<Record<string, any>>>;
|
|
12684
12869
|
};
|
|
12685
12870
|
|
|
12686
|
-
|
|
12687
|
-
|
|
12688
|
-
declare type HeadMetadata = {
|
|
12689
|
-
title?: string;
|
|
12690
|
-
description?: string;
|
|
12691
|
-
image?: string;
|
|
12692
|
-
canonical?: string;
|
|
12693
|
-
};
|
|
12694
|
-
|
|
12695
|
-
declare function PlasmicHead(props: HeadMetadata): React$1.JSX.Element | null;
|
|
12696
|
-
declare const plasmicHeadMeta: {
|
|
12697
|
-
name: string;
|
|
12698
|
-
displayName: string;
|
|
12699
|
-
description: string;
|
|
12700
|
-
importName: string;
|
|
12701
|
-
importPath: string;
|
|
12702
|
-
isRepeatable: boolean;
|
|
12703
|
-
styleSections: boolean;
|
|
12704
|
-
props: {
|
|
12705
|
-
title: {
|
|
12706
|
-
type: string;
|
|
12707
|
-
displayName: string;
|
|
12708
|
-
};
|
|
12709
|
-
description: {
|
|
12710
|
-
type: string;
|
|
12711
|
-
displayName: string;
|
|
12712
|
-
};
|
|
12713
|
-
image: {
|
|
12714
|
-
type: string;
|
|
12715
|
-
displayName: string;
|
|
12716
|
-
};
|
|
12717
|
-
canonical: {
|
|
12718
|
-
type: string;
|
|
12719
|
-
displayName: string;
|
|
12720
|
-
};
|
|
12721
|
-
};
|
|
12871
|
+
type GlobalVariants = {
|
|
12872
|
+
[gv: string]: string | undefined;
|
|
12722
12873
|
};
|
|
12723
|
-
|
|
12724
|
-
declare function PlasmicIcon(props: React$1.ComponentProps<"svg"> & {
|
|
12725
|
-
PlasmicIconType: React$1.ComponentType;
|
|
12726
|
-
}): React$1.JSX.Element;
|
|
12727
|
-
|
|
12874
|
+
type UseGlobalVariants = () => GlobalVariants;
|
|
12728
12875
|
/**
|
|
12729
|
-
*
|
|
12876
|
+
* Usage:
|
|
12877
|
+
* ```
|
|
12878
|
+
* // plasmic.ts
|
|
12879
|
+
* import { usePlatform } from "./PlasmicGlobalVariant__Platform";
|
|
12880
|
+
* import { useTheme } from "./PlasmicGlobalVariant__Theme";
|
|
12881
|
+
*
|
|
12882
|
+
* export const useGlobalVariants = createUseGlobalVariants({
|
|
12883
|
+
* platform: usePlatform,
|
|
12884
|
+
* theme: useTheme,
|
|
12885
|
+
* });
|
|
12886
|
+
*
|
|
12887
|
+
* // PlasmicComponent.tsx
|
|
12888
|
+
* import { useGlobalVariants } from "./plasmic_project";
|
|
12889
|
+
*
|
|
12890
|
+
* export function PlasmicComponent() {
|
|
12891
|
+
* // ...
|
|
12892
|
+
* const globalVariants = useGlobalVariants();
|
|
12893
|
+
* // ...
|
|
12894
|
+
* }
|
|
12895
|
+
* ```
|
|
12730
12896
|
*/
|
|
12731
|
-
|
|
12732
|
-
|
|
12733
|
-
|
|
12734
|
-
|
|
12735
|
-
|
|
12736
|
-
|
|
12737
|
-
|
|
12738
|
-
|
|
12739
|
-
|
|
12740
|
-
}
|
|
12741
|
-
|
|
12742
|
-
|
|
12743
|
-
|
|
12744
|
-
|
|
12745
|
-
|
|
12746
|
-
|
|
12747
|
-
|
|
12748
|
-
|
|
12749
|
-
|
|
12750
|
-
|
|
12751
|
-
|
|
12752
|
-
|
|
12753
|
-
|
|
12754
|
-
fullHeight: number;
|
|
12755
|
-
fullWidth: number;
|
|
12756
|
-
aspectRatio?: number;
|
|
12757
|
-
};
|
|
12758
|
-
/**
|
|
12759
|
-
* className applied to the wrapper element if one is used.
|
|
12760
|
-
*/
|
|
12761
|
-
className?: string;
|
|
12762
|
-
/**
|
|
12763
|
-
* css width
|
|
12764
|
-
*/
|
|
12765
|
-
displayWidth?: number | string;
|
|
12766
|
-
/**
|
|
12767
|
-
* css height
|
|
12768
|
-
*/
|
|
12769
|
-
displayHeight?: number | string;
|
|
12770
|
-
/**
|
|
12771
|
-
* css min-width
|
|
12772
|
-
*/
|
|
12773
|
-
displayMinWidth?: number | string;
|
|
12774
|
-
/**
|
|
12775
|
-
* css min-height
|
|
12776
|
-
*/
|
|
12777
|
-
displayMinHeight?: number | string;
|
|
12778
|
-
/**
|
|
12779
|
-
* css max-width
|
|
12780
|
-
*/
|
|
12781
|
-
displayMaxWidth?: number | string;
|
|
12782
|
-
/**
|
|
12783
|
-
* css max-height
|
|
12784
|
-
*/
|
|
12785
|
-
displayMaxHeight?: number | string;
|
|
12786
|
-
/**
|
|
12787
|
-
* For variable quality formats like jpg, the quality from 0 to 100
|
|
12788
|
-
*/
|
|
12789
|
-
quality?: number;
|
|
12790
|
-
/**
|
|
12791
|
-
* ImageLoader to use for loading different dimensions of the image.
|
|
12792
|
-
* If none specified, will not attempt to load different dimensions.
|
|
12793
|
-
*/
|
|
12794
|
-
loader?: "plasmic" | ImageLoader;
|
|
12795
|
-
/**
|
|
12796
|
-
* Style applied to the wrapper element. objectFit and objectPosition
|
|
12797
|
-
* rules are applied to the img element.
|
|
12798
|
-
*/
|
|
12799
|
-
style?: React__default.CSSProperties;
|
|
12800
|
-
/**
|
|
12801
|
-
* Ref for the img element. The normal <PlasmicImg ref={...} />
|
|
12802
|
-
* prop gives the root element instead, which may be the img element
|
|
12803
|
-
* or a wrapper element
|
|
12804
|
-
*/
|
|
12805
|
-
imgRef?: React__default.Ref<HTMLImageElement>;
|
|
12806
|
-
}
|
|
12807
|
-
declare const PlasmicImg: React__default.ForwardRefExoticComponent<PlasmicImgProps & React__default.RefAttributes<HTMLElement>>;
|
|
12808
|
-
|
|
12809
|
-
declare const PlasmicLink: React__default.ForwardRefExoticComponent<Omit<any, "ref"> & React__default.RefAttributes<any>>;
|
|
12810
|
-
|
|
12811
|
-
declare function PlasmicSlot<T extends keyof JSX.IntrinsicElements = "div">(props: React$1.ComponentProps<T> & {
|
|
12812
|
-
as?: T;
|
|
12813
|
-
defaultContents?: React$1.ReactNode;
|
|
12814
|
-
value?: React$1.ReactNode;
|
|
12815
|
-
}): React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
|
|
12816
|
-
declare function renderPlasmicSlot<T extends keyof JSX.IntrinsicElements = "div">(opts: {
|
|
12817
|
-
as?: T;
|
|
12818
|
-
defaultContents?: React$1.ReactNode;
|
|
12819
|
-
value?: React$1.ReactNode;
|
|
12820
|
-
}): React$1.ReactElement<any, string | React$1.JSXElementConstructor<any>> | null;
|
|
12897
|
+
declare function createUseGlobalVariants<T extends {
|
|
12898
|
+
[gv: string]: () => string | undefined;
|
|
12899
|
+
}>(globalVariantHooks: T): UseGlobalVariants;
|
|
12900
|
+
/**
|
|
12901
|
+
* @deprecated - new generated code should use `useGlobalVariants` instead
|
|
12902
|
+
*
|
|
12903
|
+
* Usage:
|
|
12904
|
+
* ```
|
|
12905
|
+
* // PlasmicComponent.tsx
|
|
12906
|
+
* import { useTheme } from "./PlasmicGlobalVariant__Theme";
|
|
12907
|
+
* import { usePlatform } from "./PlasmicGlobalVariant__Platform";
|
|
12908
|
+
*
|
|
12909
|
+
* export function PlasmicComponent() {
|
|
12910
|
+
* // ...
|
|
12911
|
+
* const globalVariants = ensureGlobalVariants({
|
|
12912
|
+
* platform: usePlatform(),
|
|
12913
|
+
* theme: useTheme(),
|
|
12914
|
+
* });
|
|
12915
|
+
* // ...
|
|
12916
|
+
* }
|
|
12917
|
+
* ```
|
|
12918
|
+
*/
|
|
12919
|
+
declare function ensureGlobalVariants<T extends GlobalVariants>(globalVariants: T): GlobalVariants;
|
|
12821
12920
|
|
|
12822
12921
|
type Queries = {
|
|
12823
12922
|
[name: string]: string;
|
|
@@ -12874,56 +12973,117 @@ interface PlasmicRootProviderProps extends PlasmicDataSourceContextValue {
|
|
|
12874
12973
|
declare function PlasmicRootProvider(props: PlasmicRootProviderProps): React$1.JSX.Element;
|
|
12875
12974
|
declare const useIsSSR: typeof useIsSSR$1;
|
|
12876
12975
|
|
|
12877
|
-
|
|
12878
|
-
|
|
12879
|
-
|
|
12880
|
-
|
|
12881
|
-
|
|
12882
|
-
|
|
12883
|
-
|
|
12884
|
-
|
|
12885
|
-
|
|
12886
|
-
|
|
12887
|
-
|
|
12888
|
-
|
|
12889
|
-
|
|
12890
|
-
|
|
12891
|
-
|
|
12892
|
-
|
|
12893
|
-
|
|
12894
|
-
|
|
12895
|
-
|
|
12896
|
-
|
|
12897
|
-
|
|
12898
|
-
|
|
12899
|
-
|
|
12900
|
-
|
|
12901
|
-
|
|
12902
|
-
|
|
12903
|
-
|
|
12904
|
-
|
|
12905
|
-
|
|
12906
|
-
|
|
12907
|
-
|
|
12908
|
-
|
|
12909
|
-
|
|
12910
|
-
|
|
12911
|
-
|
|
12912
|
-
|
|
12913
|
-
|
|
12914
|
-
|
|
12915
|
-
|
|
12916
|
-
|
|
12917
|
-
|
|
12918
|
-
|
|
12919
|
-
|
|
12920
|
-
|
|
12921
|
-
|
|
12922
|
-
}
|
|
12923
|
-
|
|
12924
|
-
|
|
12925
|
-
|
|
12926
|
-
|
|
12976
|
+
type ClassName = string;
|
|
12977
|
+
/**
|
|
12978
|
+
* All style token data for this project.
|
|
12979
|
+
*
|
|
12980
|
+
* Usage:
|
|
12981
|
+
*
|
|
12982
|
+
* ```
|
|
12983
|
+
* // PlasmicStyleTokensProvider.ts
|
|
12984
|
+
* import { usePlatform } from "./PlasmicGlobalVariant__Platform";
|
|
12985
|
+
* import { useTheme } from "./PlasmicGlobalVariant__Theme";
|
|
12986
|
+
* import projectcss from "./plasmic.module.css";
|
|
12987
|
+
*
|
|
12988
|
+
* const projectStyleTokenData: ProjectStyleTokenData = {
|
|
12989
|
+
* base: projectcss.plasmic_tokens,
|
|
12990
|
+
* varianted: [
|
|
12991
|
+
* {
|
|
12992
|
+
* className: projectcss.global_platform_windows,
|
|
12993
|
+
* groupName: "platform",
|
|
12994
|
+
* variant: "windows"
|
|
12995
|
+
* },
|
|
12996
|
+
* {
|
|
12997
|
+
* className: projectcss.global_platform_osx,
|
|
12998
|
+
* groupName: "platform",
|
|
12999
|
+
* variant: "osx"
|
|
13000
|
+
* },
|
|
13001
|
+
* {
|
|
13002
|
+
* className: projectcss.global_theme_light,
|
|
13003
|
+
* groupName: "theme",
|
|
13004
|
+
* variant: "light"
|
|
13005
|
+
* },
|
|
13006
|
+
* {
|
|
13007
|
+
* className: projectcss.global_theme_dark,
|
|
13008
|
+
* groupName: "theme",
|
|
13009
|
+
* variant: "dark"
|
|
13010
|
+
* },
|
|
13011
|
+
* ],
|
|
13012
|
+
* };
|
|
13013
|
+
* ```
|
|
13014
|
+
*/
|
|
13015
|
+
interface ProjectStyleTokenData {
|
|
13016
|
+
base: ClassName;
|
|
13017
|
+
varianted: {
|
|
13018
|
+
className: ClassName;
|
|
13019
|
+
groupName: string;
|
|
13020
|
+
variant: string;
|
|
13021
|
+
}[];
|
|
13022
|
+
}
|
|
13023
|
+
type UseStyleTokens = () => ClassName[];
|
|
13024
|
+
/**
|
|
13025
|
+
* Returns style tokens. If the context is not available, falls back to the
|
|
13026
|
+
* current project's styles.
|
|
13027
|
+
*
|
|
13028
|
+
* Usage:
|
|
13029
|
+
* ```
|
|
13030
|
+
* // PlasmicStyleTokensProvider.ts
|
|
13031
|
+
* export const useStyleTokens = createUseStyleTokens(
|
|
13032
|
+
* projectStyleTokenData,
|
|
13033
|
+
* useGlobalVariants,
|
|
13034
|
+
* );
|
|
13035
|
+
*
|
|
13036
|
+
* // PlasmicPage.tsx
|
|
13037
|
+
* import { useStyleTokens } from "./plasmic_project";
|
|
13038
|
+
*
|
|
13039
|
+
* export function PlasmicPage() {
|
|
13040
|
+
* const styleTokensClassNames = useStyleTokens();
|
|
13041
|
+
* return (
|
|
13042
|
+
* <div className={classNames(
|
|
13043
|
+
* projectcss.all,
|
|
13044
|
+
* projectcss.root_reset,
|
|
13045
|
+
* projectcss.plasmic_default_styles,
|
|
13046
|
+
* projectcss.plasmic_mixins,
|
|
13047
|
+
* styleTokensClassNames,
|
|
13048
|
+
* )}>
|
|
13049
|
+
* <h1 className={projectcss.all}>
|
|
13050
|
+
* Hello, world!
|
|
13051
|
+
* </h1>
|
|
13052
|
+
* </div>
|
|
13053
|
+
* );
|
|
13054
|
+
* }
|
|
13055
|
+
* ```
|
|
13056
|
+
*/
|
|
13057
|
+
declare function createUseStyleTokens(tokenData: ProjectStyleTokenData, useGlobalVariants: UseGlobalVariants): UseStyleTokens;
|
|
13058
|
+
/**
|
|
13059
|
+
* Creates a StyleTokens context provider for a given project, which includes
|
|
13060
|
+
* its tokens, overrides, and all tokens from its dependencies.
|
|
13061
|
+
*
|
|
13062
|
+
* Usage:
|
|
13063
|
+
* ```
|
|
13064
|
+
* // PlasmicStyleTokensProvider.ts
|
|
13065
|
+
* export const StyleTokensProvider = createStyleTokensProvider(
|
|
13066
|
+
* projectStyleTokenData,
|
|
13067
|
+
* useGlobalVariants,
|
|
13068
|
+
* );
|
|
13069
|
+
*
|
|
13070
|
+
* // Page.tsx
|
|
13071
|
+
* import { StyleTokensProvider } from "./plasmic_project";
|
|
13072
|
+
*
|
|
13073
|
+
* export default function Page() {
|
|
13074
|
+
* return (
|
|
13075
|
+
* <PlatformContext.Provider value="osx">
|
|
13076
|
+
* <ThemeContext.Provider value="dark">
|
|
13077
|
+
* <StyleTokensProvider>
|
|
13078
|
+
* <PlasmicPage />
|
|
13079
|
+
* </StyleTokensProvider>
|
|
13080
|
+
* </ThemeContext.Provider>
|
|
13081
|
+
* </PlatformContext.Provider>
|
|
13082
|
+
* );
|
|
13083
|
+
* }
|
|
13084
|
+
* ```
|
|
13085
|
+
*/
|
|
13086
|
+
declare function createStyleTokensProvider(tokenData: ProjectStyleTokenData, useGlobalVariants: UseGlobalVariants): React__default.ComponentType<React__default.PropsWithChildren>;
|
|
12927
13087
|
|
|
12928
13088
|
declare const usePlasmicTranslator: typeof usePlasmicTranslator$1;
|
|
12929
13089
|
interface TransProps {
|
|
@@ -14500,4 +14660,4 @@ interface TriggeredOverlayContextValue {
|
|
|
14500
14660
|
}
|
|
14501
14661
|
declare const TriggeredOverlayContext: React$1.Context<TriggeredOverlayContextValue | undefined>;
|
|
14502
14662
|
|
|
14503
|
-
export { $State, $StateSpec, BaseButtonProps, BaseMenuButtonProps, BaseMenuGroupProps, BaseMenuItemProps, BaseMenuProps, BaseSelectOptionGroupProps, BaseSelectOptionProps, BaseSelectProps, BaseTextInputProps, BaseTriggeredOverlayProps, ButtonRef, CheckboxProps, CheckboxRef, CheckboxRefValue, DropdownMenu, Flex, HTMLElementRefOf, HtmlAnchorOnlyProps, HtmlButtonOnlyProps, InitFunc, MenuButtonRef, MenuButtonRefValue, MenuRef, MenuRefValue, MultiChoiceArg, PlasmicDataSourceContextProvider, PlasmicHead, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicPageGuard, PlasmicRootProvider, PlasmicSlot, PlasmicTranslator, PlumeButtonProps, PlumeTextInputProps, SelectContext, SelectOptionRef, SelectRef, SelectRefValue, SingleBooleanChoiceArg, SingleChoiceArg, Stack, StrictProps, SwitchProps, SwitchRef, SwitchRefValue, TextInputRef, TextInputRefValue, Trans, TriggeredOverlayConfig, TriggeredOverlayContext, TriggeredOverlayRef, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateOnMutateForSpec, generateStateOnChangeProp, generateStateOnChangePropForCodeComponents, generateStateValueProp, dlv as get, getCurrentInitialValue, getDataProps, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, hasVariant, initializeCodeComponentStates, initializePlasmicStates, is$StateProxy, isPlasmicStateProxy, makeFragment, mergeVariantsWithStates, omit, pick, plasmicHeadMeta, renderPlasmicSlot, resetToInitialValue, set, setPlumeStrictMode, useButton, useCheckbox, useCurrentUser, useDollarState, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, usePlasmicTranslator, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, withPlasmicPageGuard, wrapWithClassName };
|
|
14663
|
+
export { $State, $StateSpec, BaseButtonProps, BaseMenuButtonProps, BaseMenuGroupProps, BaseMenuItemProps, BaseMenuProps, BaseSelectOptionGroupProps, BaseSelectOptionProps, BaseSelectProps, BaseTextInputProps, BaseTriggeredOverlayProps, ButtonRef, CheckboxProps, CheckboxRef, CheckboxRefValue, DropdownMenu, Flex, HTMLElementRefOf, HtmlAnchorOnlyProps, HtmlButtonOnlyProps, InitFunc, MenuButtonRef, MenuButtonRefValue, MenuRef, MenuRefValue, MultiChoiceArg, PlasmicDataSourceContextProvider, PlasmicHead, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicPageGuard, PlasmicRootProvider, PlasmicSlot, PlasmicTranslator, PlumeButtonProps, PlumeTextInputProps, SelectContext, SelectOptionRef, SelectRef, SelectRefValue, SingleBooleanChoiceArg, SingleChoiceArg, Stack, StrictProps, SwitchProps, SwitchRef, SwitchRefValue, TextInputRef, TextInputRefValue, Trans, TriggeredOverlayConfig, TriggeredOverlayContext, TriggeredOverlayRef, classNames, createPlasmicElementProxy, createStyleTokensProvider, createUseGlobalVariants, createUseScreenVariants, createUseStyleTokens, deriveRenderOpts, ensureGlobalVariants, genTranslatableString, generateOnMutateForSpec, generateStateOnChangeProp, generateStateOnChangePropForCodeComponents, generateStateValueProp, dlv as get, getCurrentInitialValue, getDataProps, getStateCellsInPlasmicProxy, getStateSpecInPlasmicProxy, hasVariant, initializeCodeComponentStates, initializePlasmicStates, is$StateProxy, isPlasmicStateProxy, makeFragment, mergeVariantsWithStates, omit, pick, plasmicHeadMeta, renderPlasmicSlot, resetToInitialValue, set, setPlumeStrictMode, useButton, useCheckbox, useCurrentUser, useDollarState, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, usePlasmicTranslator, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, withPlasmicPageGuard, wrapWithClassName };
|
package/dist/index-common.d.ts
CHANGED
|
@@ -2,16 +2,17 @@ export { PlasmicTranslator } from "@plasmicapp/host";
|
|
|
2
2
|
export { PlasmicPageGuard, withPlasmicPageGuard, } from "./auth/PlasmicPageGuard";
|
|
3
3
|
export { omit, pick } from "./common";
|
|
4
4
|
export { HTMLElementRefOf, StrictProps } from "./react-utils";
|
|
5
|
-
export { Flex, MultiChoiceArg, SingleBooleanChoiceArg, SingleChoiceArg, createPlasmicElementProxy, deriveRenderOpts, hasVariant, makeFragment, mergeVariantsWithStates, wrapWithClassName, } from "./render/elements";
|
|
6
|
-
export { ensureGlobalVariants } from "./render/global-variants";
|
|
7
5
|
export { PlasmicHead, plasmicHeadMeta } from "./render/PlasmicHead";
|
|
8
6
|
export { PlasmicIcon } from "./render/PlasmicIcon";
|
|
9
7
|
export { PlasmicImg } from "./render/PlasmicImg";
|
|
10
8
|
export { PlasmicLink } from "./render/PlasmicLink";
|
|
11
9
|
export { PlasmicSlot, renderPlasmicSlot } from "./render/PlasmicSlot";
|
|
10
|
+
export { Stack } from "./render/Stack";
|
|
11
|
+
export { Flex, MultiChoiceArg, SingleBooleanChoiceArg, SingleChoiceArg, createPlasmicElementProxy, deriveRenderOpts, hasVariant, makeFragment, mergeVariantsWithStates, wrapWithClassName, } from "./render/elements";
|
|
12
|
+
export { createUseGlobalVariants, ensureGlobalVariants, } from "./render/global-variants";
|
|
12
13
|
export { createUseScreenVariants } from "./render/screen-variants";
|
|
13
14
|
export { PlasmicDataSourceContextProvider, PlasmicRootProvider, useCurrentUser, useIsSSR, } from "./render/ssr";
|
|
14
|
-
export {
|
|
15
|
+
export { createStyleTokensProvider, createUseStyleTokens, } from "./render/style-tokens";
|
|
15
16
|
export { Trans, genTranslatableString, usePlasmicTranslator, } from "./render/translation";
|
|
16
17
|
export { useTrigger } from "./render/triggers";
|
|
17
18
|
export * from "./states";
|