@plasmicapp/react-web 0.2.397 → 0.2.399
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 +345 -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 +51 -1
- package/dist/render/style-tokens.d.ts +114 -0
- package/package.json +2 -2
- 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 +51 -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,56 @@ declare function deriveRenderOpts(props: Record<string, any>, config: {
|
|
|
12683
12868
|
overrides: Partial<Partial<Record<string, any>>>;
|
|
12684
12869
|
};
|
|
12685
12870
|
|
|
12686
|
-
|
|
12687
|
-
|
|
12688
|
-
|
|
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 ActiveGlobalVariants = string | string[] | undefined;
|
|
12872
|
+
type GlobalVariants = {
|
|
12873
|
+
[gv: string]: ActiveGlobalVariants;
|
|
12722
12874
|
};
|
|
12723
|
-
|
|
12724
|
-
declare function PlasmicIcon(props: React$1.ComponentProps<"svg"> & {
|
|
12725
|
-
PlasmicIconType: React$1.ComponentType;
|
|
12726
|
-
}): React$1.JSX.Element;
|
|
12727
|
-
|
|
12875
|
+
type UseGlobalVariants = () => GlobalVariants;
|
|
12728
12876
|
/**
|
|
12729
|
-
*
|
|
12877
|
+
* Usage:
|
|
12878
|
+
* ```
|
|
12879
|
+
* // plasmic.ts
|
|
12880
|
+
* import { usePlatform } from "./PlasmicGlobalVariant__Platform";
|
|
12881
|
+
* import { useTheme } from "./PlasmicGlobalVariant__Theme";
|
|
12882
|
+
*
|
|
12883
|
+
* export const useGlobalVariants = createUseGlobalVariants({
|
|
12884
|
+
* platform: usePlatform,
|
|
12885
|
+
* theme: useTheme,
|
|
12886
|
+
* });
|
|
12887
|
+
*
|
|
12888
|
+
* // PlasmicComponent.tsx
|
|
12889
|
+
* import { useGlobalVariants } from "./plasmic_project";
|
|
12890
|
+
*
|
|
12891
|
+
* export function PlasmicComponent() {
|
|
12892
|
+
* // ...
|
|
12893
|
+
* const globalVariants = useGlobalVariants();
|
|
12894
|
+
* // ...
|
|
12895
|
+
* }
|
|
12896
|
+
* ```
|
|
12730
12897
|
*/
|
|
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;
|
|
12898
|
+
declare function createUseGlobalVariants<T extends {
|
|
12899
|
+
[gv: string]: () => ActiveGlobalVariants;
|
|
12900
|
+
}>(globalVariantHooks: T): UseGlobalVariants;
|
|
12901
|
+
/**
|
|
12902
|
+
* @deprecated - new generated code should use `useGlobalVariants` instead
|
|
12903
|
+
*
|
|
12904
|
+
* Usage:
|
|
12905
|
+
* ```
|
|
12906
|
+
* // PlasmicComponent.tsx
|
|
12907
|
+
* import { useTheme } from "./PlasmicGlobalVariant__Theme";
|
|
12908
|
+
* import { usePlatform } from "./PlasmicGlobalVariant__Platform";
|
|
12909
|
+
*
|
|
12910
|
+
* export function PlasmicComponent() {
|
|
12911
|
+
* // ...
|
|
12912
|
+
* const globalVariants = ensureGlobalVariants({
|
|
12913
|
+
* platform: usePlatform(),
|
|
12914
|
+
* theme: useTheme(),
|
|
12915
|
+
* });
|
|
12916
|
+
* // ...
|
|
12917
|
+
* }
|
|
12918
|
+
* ```
|
|
12919
|
+
*/
|
|
12920
|
+
declare function ensureGlobalVariants<T extends GlobalVariants>(globalVariants: T): GlobalVariants;
|
|
12821
12921
|
|
|
12822
12922
|
type Queries = {
|
|
12823
12923
|
[name: string]: string;
|
|
@@ -12874,56 +12974,117 @@ interface PlasmicRootProviderProps extends PlasmicDataSourceContextValue {
|
|
|
12874
12974
|
declare function PlasmicRootProvider(props: PlasmicRootProviderProps): React$1.JSX.Element;
|
|
12875
12975
|
declare const useIsSSR: typeof useIsSSR$1;
|
|
12876
12976
|
|
|
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
|
-
|
|
12977
|
+
type ClassName = string;
|
|
12978
|
+
/**
|
|
12979
|
+
* All style token data for this project.
|
|
12980
|
+
*
|
|
12981
|
+
* Usage:
|
|
12982
|
+
*
|
|
12983
|
+
* ```
|
|
12984
|
+
* // PlasmicStyleTokensProvider.ts
|
|
12985
|
+
* import { usePlatform } from "./PlasmicGlobalVariant__Platform";
|
|
12986
|
+
* import { useTheme } from "./PlasmicGlobalVariant__Theme";
|
|
12987
|
+
* import projectcss from "./plasmic.module.css";
|
|
12988
|
+
*
|
|
12989
|
+
* const projectStyleTokenData: ProjectStyleTokenData = {
|
|
12990
|
+
* base: projectcss.plasmic_tokens,
|
|
12991
|
+
* varianted: [
|
|
12992
|
+
* {
|
|
12993
|
+
* className: projectcss.global_platform_windows,
|
|
12994
|
+
* groupName: "platform",
|
|
12995
|
+
* variant: "windows"
|
|
12996
|
+
* },
|
|
12997
|
+
* {
|
|
12998
|
+
* className: projectcss.global_platform_osx,
|
|
12999
|
+
* groupName: "platform",
|
|
13000
|
+
* variant: "osx"
|
|
13001
|
+
* },
|
|
13002
|
+
* {
|
|
13003
|
+
* className: projectcss.global_theme_light,
|
|
13004
|
+
* groupName: "theme",
|
|
13005
|
+
* variant: "light"
|
|
13006
|
+
* },
|
|
13007
|
+
* {
|
|
13008
|
+
* className: projectcss.global_theme_dark,
|
|
13009
|
+
* groupName: "theme",
|
|
13010
|
+
* variant: "dark"
|
|
13011
|
+
* },
|
|
13012
|
+
* ],
|
|
13013
|
+
* };
|
|
13014
|
+
* ```
|
|
13015
|
+
*/
|
|
13016
|
+
interface ProjectStyleTokenData {
|
|
13017
|
+
base: ClassName;
|
|
13018
|
+
varianted: {
|
|
13019
|
+
className: ClassName;
|
|
13020
|
+
groupName: string;
|
|
13021
|
+
variant: string;
|
|
13022
|
+
}[];
|
|
13023
|
+
}
|
|
13024
|
+
type UseStyleTokens = () => ClassName[];
|
|
13025
|
+
/**
|
|
13026
|
+
* Returns style tokens. If the context is not available, falls back to the
|
|
13027
|
+
* current project's styles.
|
|
13028
|
+
*
|
|
13029
|
+
* Usage:
|
|
13030
|
+
* ```
|
|
13031
|
+
* // PlasmicStyleTokensProvider.ts
|
|
13032
|
+
* export const useStyleTokens = createUseStyleTokens(
|
|
13033
|
+
* projectStyleTokenData,
|
|
13034
|
+
* useGlobalVariants,
|
|
13035
|
+
* );
|
|
13036
|
+
*
|
|
13037
|
+
* // PlasmicPage.tsx
|
|
13038
|
+
* import { useStyleTokens } from "./plasmic_project";
|
|
13039
|
+
*
|
|
13040
|
+
* export function PlasmicPage() {
|
|
13041
|
+
* const styleTokensClassNames = useStyleTokens();
|
|
13042
|
+
* return (
|
|
13043
|
+
* <div className={classNames(
|
|
13044
|
+
* projectcss.all,
|
|
13045
|
+
* projectcss.root_reset,
|
|
13046
|
+
* projectcss.plasmic_default_styles,
|
|
13047
|
+
* projectcss.plasmic_mixins,
|
|
13048
|
+
* styleTokensClassNames,
|
|
13049
|
+
* )}>
|
|
13050
|
+
* <h1 className={projectcss.all}>
|
|
13051
|
+
* Hello, world!
|
|
13052
|
+
* </h1>
|
|
13053
|
+
* </div>
|
|
13054
|
+
* );
|
|
13055
|
+
* }
|
|
13056
|
+
* ```
|
|
13057
|
+
*/
|
|
13058
|
+
declare function createUseStyleTokens(tokenData: ProjectStyleTokenData, useGlobalVariants: UseGlobalVariants): UseStyleTokens;
|
|
13059
|
+
/**
|
|
13060
|
+
* Creates a StyleTokens context provider for a given project, which includes
|
|
13061
|
+
* its tokens, overrides, and all tokens from its dependencies.
|
|
13062
|
+
*
|
|
13063
|
+
* Usage:
|
|
13064
|
+
* ```
|
|
13065
|
+
* // PlasmicStyleTokensProvider.ts
|
|
13066
|
+
* export const StyleTokensProvider = createStyleTokensProvider(
|
|
13067
|
+
* projectStyleTokenData,
|
|
13068
|
+
* useGlobalVariants,
|
|
13069
|
+
* );
|
|
13070
|
+
*
|
|
13071
|
+
* // Page.tsx
|
|
13072
|
+
* import { StyleTokensProvider } from "./plasmic_project";
|
|
13073
|
+
*
|
|
13074
|
+
* export default function Page() {
|
|
13075
|
+
* return (
|
|
13076
|
+
* <PlatformContext.Provider value="osx">
|
|
13077
|
+
* <ThemeContext.Provider value="dark">
|
|
13078
|
+
* <StyleTokensProvider>
|
|
13079
|
+
* <PlasmicPage />
|
|
13080
|
+
* </StyleTokensProvider>
|
|
13081
|
+
* </ThemeContext.Provider>
|
|
13082
|
+
* </PlatformContext.Provider>
|
|
13083
|
+
* );
|
|
13084
|
+
* }
|
|
13085
|
+
* ```
|
|
13086
|
+
*/
|
|
13087
|
+
declare function createStyleTokensProvider(tokenData: ProjectStyleTokenData, useGlobalVariants: UseGlobalVariants): React__default.ComponentType<React__default.PropsWithChildren>;
|
|
12927
13088
|
|
|
12928
13089
|
declare const usePlasmicTranslator: typeof usePlasmicTranslator$1;
|
|
12929
13090
|
interface TransProps {
|
|
@@ -14500,4 +14661,4 @@ interface TriggeredOverlayContextValue {
|
|
|
14500
14661
|
}
|
|
14501
14662
|
declare const TriggeredOverlayContext: React$1.Context<TriggeredOverlayContextValue | undefined>;
|
|
14502
14663
|
|
|
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 };
|
|
14664
|
+
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";
|