@plasmicapp/react-web 0.2.396 → 0.2.398

package/skinny/dist/render/elements.d.ts

@@ -41,7 +41,7 @@ export type Flex<DefaultElementType extends React.ElementType> = (Omit<DefaultOv
     as?: never;
     render?: never;
 }) | ((props: React.ComponentProps<DefaultElementType>) => React.ReactNode);
-export declare function hasVariant<V extends Variants>(variants: V | undefined, groupName: keyof V, variant: string): any;
+export declare function hasVariant<V extends Variants>(variants: V | undefined, groupName: keyof V, variant: string): boolean;
 export declare function wrapFlexContainerChildren(children: React.ReactNode, hasGap: boolean): React.DetailedReactHTMLElement<{
     className: string;
 }, HTMLElement> | null;

package/skinny/dist/render/global-variants.d.ts

@@ -1 +1,49 @@
-export declare function ensureGlobalVariants<T extends Record<string, any>>(globalVariantValues: T): T;
+export type GlobalVariants = {
+    [gv: string]: string | undefined;
+};
+export type UseGlobalVariants = () => GlobalVariants;
+/**
+ * Usage:
+ * ```
+ * // plasmic.ts
+ * import { usePlatform } from "./PlasmicGlobalVariant__Platform";
+ * import { useTheme } from "./PlasmicGlobalVariant__Theme";
+ *
+ * export const useGlobalVariants = createUseGlobalVariants({
+ *   platform: usePlatform,
+ *   theme: useTheme,
+ * });
+ *
+ * // PlasmicComponent.tsx
+ * import { useGlobalVariants } from "./plasmic_project";
+ *
+ * export function PlasmicComponent() {
+ *   // ...
+ *   const globalVariants = useGlobalVariants();
+ *   // ...
+ * }
+ * ```
+ */
+export declare function createUseGlobalVariants<T extends {
+    [gv: string]: () => string | undefined;
+}>(globalVariantHooks: T): UseGlobalVariants;
+/**
+ * @deprecated - new generated code should use `useGlobalVariants` instead
+ *
+ * Usage:
+ * ```
+ * // PlasmicComponent.tsx
+ * import { useTheme } from "./PlasmicGlobalVariant__Theme";
+ * import { usePlatform } from "./PlasmicGlobalVariant__Platform";
+ *
+ * export function PlasmicComponent() {
+ *   // ...
+ *   const globalVariants = ensureGlobalVariants({
+ *     platform: usePlatform(),
+ *     theme: useTheme(),
+ *   });
+ *   // ...
+ * }
+ * ```
+ */
+export declare function ensureGlobalVariants<T extends GlobalVariants>(globalVariants: T): GlobalVariants;

package/skinny/dist/render/style-tokens.d.ts

@@ -0,0 +1,114 @@
+import React from "react";
+import { UseGlobalVariants } from "./global-variants";
+type ClassName = string;
+/**
+ * All style token data for this project.
+ *
+ * Usage:
+ *
+ * ```
+ * // PlasmicStyleTokensProvider.ts
+ * import { usePlatform } from "./PlasmicGlobalVariant__Platform";
+ * import { useTheme } from "./PlasmicGlobalVariant__Theme";
+ * import projectcss from "./plasmic.module.css";
+ *
+ * const projectStyleTokenData: ProjectStyleTokenData = {
+ *   base: projectcss.plasmic_tokens,
+ *   varianted: [
+ *     {
+ *       className: projectcss.global_platform_windows,
+ *       groupName: "platform",
+ *       variant: "windows"
+ *     },
+ *     {
+ *       className: projectcss.global_platform_osx,
+ *       groupName: "platform",
+ *       variant: "osx"
+ *     },
+ *     {
+ *       className: projectcss.global_theme_light,
+ *       groupName: "theme",
+ *       variant: "light"
+ *     },
+ *     {
+ *       className: projectcss.global_theme_dark,
+ *       groupName: "theme",
+ *       variant: "dark"
+ *     },
+ *   ],
+ * };
+ * ```
+ */
+interface ProjectStyleTokenData {
+    base: ClassName;
+    varianted: {
+        className: ClassName;
+        groupName: string;
+        variant: string;
+    }[];
+}
+type UseStyleTokens = () => ClassName[];
+/**
+ * Returns style tokens. If the context is not available, falls back to the
+ * current project's styles.
+ *
+ * Usage:
+ * ```
+ * // PlasmicStyleTokensProvider.ts
+ * export const useStyleTokens = createUseStyleTokens(
+ *   projectStyleTokenData,
+ *   useGlobalVariants,
+ * );
+ *
+ * // PlasmicPage.tsx
+ * import { useStyleTokens } from "./plasmic_project";
+ *
+ * export function PlasmicPage() {
+ *   const styleTokensClassNames = useStyleTokens();
+ *   return (
+ *     <div className={classNames(
+ *         projectcss.all,
+ *         projectcss.root_reset,
+ *         projectcss.plasmic_default_styles,
+ *         projectcss.plasmic_mixins,
+ *         styleTokensClassNames,
+ *     )}>
+ *       <h1 className={projectcss.all}>
+ *         Hello, world!
+ *       </h1>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function createUseStyleTokens(tokenData: ProjectStyleTokenData, useGlobalVariants: UseGlobalVariants): UseStyleTokens;
+/**
+ * Creates a StyleTokens context provider for a given project, which includes
+ * its tokens, overrides, and all tokens from its dependencies.
+ *
+ * Usage:
+ * ```
+ * // PlasmicStyleTokensProvider.ts
+ * export const StyleTokensProvider = createStyleTokensProvider(
+ *   projectStyleTokenData,
+ *   useGlobalVariants,
+ * );
+ *
+ * // Page.tsx
+ * import { StyleTokensProvider } from "./plasmic_project";
+ *
+ * export default function Page() {
+ *   return (
+ *     <PlatformContext.Provider value="osx">
+ *       <ThemeContext.Provider value="dark">
+ *         <StyleTokensProvider>
+ *           <PlasmicPage />
+ *         </StyleTokensProvider>
+ *       </ThemeContext.Provider>
+ *     </PlatformContext.Provider>
+ *   );
+ * }
+ * ```
+ */
+export declare function createStyleTokensProvider(tokenData: ProjectStyleTokenData, useGlobalVariants: UseGlobalVariants): React.ComponentType<React.PropsWithChildren>;
+export {};