npm - @payfit/unity-themes - Versions diffs - 2.46.13 → 2.46.15 - Mend

@payfit/unity-themes 2.46.13 → 2.46.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/dist/esm/components/unity-theme-provider.d.ts ADDED Viewed

@@ -0,0 +1,25 @@
+import { PropsWithChildren, RefObject } from 'react';
+export type UnityTheme = 'legacy' | 'rebrand';
+interface UnityThemeContextValue {
+    theme: UnityTheme;
+    setTheme: (theme: UnityTheme) => void;
+}
+export interface UnityThemeProviderProps {
+    /** Initial theme. Can be changed at runtime via `useUnityTheme().setTheme`. */
+    theme?: UnityTheme;
+    /**
+     * Element on which `data-uy-theme` is set.
+     * - `undefined` (default): uses `document.documentElement` (`<html>`)
+     * - A React ref: uses the referenced element
+     * - A CSS selector string: uses `document.querySelector(selector)`
+     * @default document.documentElement
+     */
+    target?: RefObject<HTMLElement | null> | string;
+}
+export declare function UnityThemeProvider({ theme: initialTheme, target, children, }: PropsWithChildren<UnityThemeProviderProps>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Returns the current theme and a setter to change it at runtime.
+ * Returns `"legacy"` with a no-op setter when used outside a provider.
+ */
+export declare function useUnityTheme(): UnityThemeContextValue;
+export {};

package/dist/esm/components/unity-theme-provider.js ADDED Viewed

@@ -0,0 +1,34 @@
+import { jsx as c } from "react/jsx-runtime";
+import { createContext as i, useState as s, useEffect as f, useContext as h } from "react";
+const o = i({
+  // Render legacy by default for backwards compatibility
+  theme: "legacy",
+  // Intentional noop. Will be replaced by a set dispatcher from React
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setTheme: () => {
+  }
+});
+function d(e) {
+  return e === void 0 ? document.documentElement : typeof e == "string" ? document.querySelector(e) : e.current;
+}
+function T({
+  theme: e = "legacy",
+  target: r,
+  children: u
+}) {
+  const [t, m] = s(e);
+  return f(() => {
+    const n = d(r);
+    if (n)
+      return n.dataset.uyTheme = t, () => {
+        delete n.dataset.uyTheme;
+      };
+  }, [t, r]), /* @__PURE__ */ c(o.Provider, { value: { theme: t, setTheme: m }, children: u });
+}
+function a() {
+  return h(o);
+}
+export {
+  T as UnityThemeProvider,
+  a as useUnityTheme
+};

package/dist/esm/components/unity-theme-provider.test.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/esm/index.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export * from './utils/cn.js';
+export * from './utils/tailwind-merge.js';
+export * from './utils/tailwind-variants.js';
+export { twMergeConfig } from './utils/merge-config.js';
+export { UnityThemeProvider, useUnityTheme, type UnityTheme, type UnityThemeProviderProps, } from './components/unity-theme-provider.js';

package/dist/esm/index.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { classNames as o, clsx as m, cn as t } from "./utils/cn.js";
+import { uyMerge as x } from "./utils/tailwind-merge.js";
+import { uyTv as s } from "./utils/tailwind-variants.js";
+import { twMergeConfig as n } from "./utils/merge-config.js";
+import { UnityThemeProvider as c, useUnityTheme as g } from "./components/unity-theme-provider.js";
+export {
+  c as UnityThemeProvider,
+  o as classNames,
+  m as clsx,
+  t as cn,
+  n as twMergeConfig,
+  g as useUnityTheme,
+  x as uyMerge,
+  s as uyTv
+};

package/dist/esm/scripts/actions/append-animations.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { Config, Dictionary, PlatformConfig } from 'style-dictionary/types';
+export declare function appendAnimations(dictionary: Dictionary, config: PlatformConfig, options: Config): void;
+export declare function removeAnimations(dictionary: Dictionary, config: PlatformConfig, options: Config): void;

package/dist/esm/scripts/actions/compose-multi-theme.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+export interface ComposeInput {
+    /** css/variables output for legacy (:root selector) */
+    legacyCss: string;
+    /** css/variables output for rebrand ([data-uy-theme="rebrand"] selector) */
+    rebrandCss: string;
+    /** css/unity-theme output (@theme block + grid/typography utilities) */
+    themeCss: string;
+    /** File header + imports */
+    header: string;
+    /** Custom variant declarations */
+    customVariants: string;
+    /** Output path for the composed CSS */
+    outputPath: string;
+}
+export declare function composeMultiThemeCss(input: ComposeInput): Promise<void>;

package/dist/esm/scripts/build.d.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/dist/esm/scripts/file-headers/unity.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export declare const name = "unity/theme";
2	+ export declare function unityFileHeader(): string[];

package/dist/esm/scripts/formats/processors/grid-processor.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { Config, Dictionary, LocalOptions } from 'style-dictionary/types';
2	+ export declare function processGridTokens(dictionary: Dictionary, options: Config & LocalOptions): string;

package/dist/esm/scripts/formats/processors/typography-processor.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { Config, Dictionary, LocalOptions } from 'style-dictionary/types';
2	+ export declare function processTypographyTokens(dictionary: Dictionary, _options: Config & LocalOptions): string;

package/dist/esm/scripts/formats/unity-theme.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { FormatFnArguments } from 'style-dictionary/types';
+export declare const name = "css/unity-theme";
+export declare function unityThemeFormat(args: FormatFnArguments): Promise<string>;

package/dist/esm/scripts/formats/utils.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { Prefixes, ProcessorOptions } from '../types.js.js';
+export declare function getPrefixes(options: ProcessorOptions): Prefixes;
+export declare function processCssVariables(rawCssVars: string, variablePrefix: string): string;

package/dist/esm/scripts/transforms/oklch.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { Token } from 'style-dictionary';
+import { Config, PlatformConfig } from 'style-dictionary/types';
+export declare function filter(token: Token, options: Config): boolean;
+export declare function transform(token: Token, _config: PlatformConfig, options: Config): string;

package/dist/esm/scripts/transforms/tailwind-animation-token.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+import { Token } from 'style-dictionary';
+import { Config, NameTransform } from 'style-dictionary/types';
+type Transformer = NameTransform['transform'];
+export declare function filter(token: Token, options: Config): boolean;
+export declare const transform: Transformer;
+export {};

package/dist/esm/scripts/transforms/tailwind-color-token.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { Token } from 'style-dictionary';
+import { NameTransform } from 'style-dictionary/types';
+type Transformer = NameTransform['transform'];
+export declare function filter(token: Token): boolean;
+export declare const tailwindColorTokenNameTransform: Transformer;
+export declare const transform: (token: import('style-dictionary/types').TransformedToken, config: import('style-dictionary/types').PlatformConfig, options: import('style-dictionary/types').Config, vol?: import('style-dictionary/types').Volume) => string | Promise<string>;
+export {};

package/dist/esm/scripts/transforms/tailwind-grid-token.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+import { Token } from 'style-dictionary';
+import { NameTransform } from 'style-dictionary/types';
+type Transformer = NameTransform['transform'];
+export declare function filter(token: Token): boolean;
+export declare const tailwindGridTokenNameTransform: Transformer;
+export declare const transform: (token: import('style-dictionary/types').TransformedToken, config: import('style-dictionary/types').PlatformConfig, options: import('style-dictionary/types').Config, vol?: import('style-dictionary/types').Volume) => string | Promise<string>;
+export {};

package/dist/esm/scripts/transforms/tailwind-spacing-token.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { Token } from 'style-dictionary';
+import { Config, PlatformConfig } from 'style-dictionary/types';
+export declare function filter(token: Token, options: Config): boolean;
+export declare const transform: (token: import('style-dictionary/types').TransformedToken, config: PlatformConfig, options: Config, vol?: import('style-dictionary/types').Volume) => string | Promise<string>;

package/dist/esm/scripts/transforms/tailwind-text-token.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { Token } from 'style-dictionary';
+import { Config, PlatformConfig } from 'style-dictionary/types';
+export declare function filter(token: Token, options: Config): boolean;
+export declare const transform: (token: import('style-dictionary/types').TransformedToken, config: PlatformConfig, options: Config, vol?: import('style-dictionary/types').Volume) => string | Promise<string>;

package/dist/esm/scripts/transforms/tailwind-typography-token.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import { Token } from 'style-dictionary';
+export declare function filter(token: Token): boolean;
+export declare const transform: (token: import('style-dictionary/types').TransformedToken, config: import('style-dictionary/types').PlatformConfig, options: import('style-dictionary/types').Config, vol?: import('style-dictionary/types').Volume) => string | Promise<string>;

package/dist/esm/scripts/types.d.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { Config, LocalOptions, TransformedToken } from 'style-dictionary/types';
+export type TokenWithCTIAttrs = TransformedToken & {
+    attributes: {
+        category: string;
+        type: string;
+        item: string;
+    };
+};
+export type BreakpointToken = TransformedToken & {
+    $value: string;
+    $type: 'dimension';
+};
+export type TypographyGroup = {
+    default?: TokenWithCTIAttrs;
+    responsive: Map<string, TokenWithCTIAttrs>;
+};
+export type ProcessorOptions = Config & LocalOptions;
+export type Prefixes = {
+    classPrefix: string;
+    variablePrefix: string;
+};

package/dist/esm/scripts/utils/prefix-transform.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { NameTransform } from 'style-dictionary/types';
+type Transformer = NameTransform['transform'];
+export declare const prefixTransform: (transformer: Transformer) => Transformer;
+export {};

package/dist/esm/utils/cn.d.ts ADDED Viewed

@@ -0,0 +1,94 @@
+import { cnMerge } from 'tailwind-variants';
+/**
+ * Unity-configured class name utility function for merging CSS classes.
+ *
+ * This is a pre-configured version of tailwind-variants' `cn` function that includes
+ * Unity's custom tailwind-merge configuration. It automatically handles Unity's custom
+ * class names and resolves conflicts according to Unity design system rules.
+ * @param classes - CSS class names to merge
+ * @returns Merged and deduplicated class string
+ * @example
+ * ```tsx
+ * import { cn } from '@payfit/unity-themes'
+ *
+ * // Basic usage
+ * const className = cn('uy:p-200', 'uy:bg-surface-primary-default')
+ * // → 'uy:p-200 uy:bg-surface-primary-default'
+ *
+ * // Conflict resolution - last class wins
+ * const className = cn('uy:bg-surface-primary-default', 'uy:bg-surface-danger-default')
+ * // → 'uy:bg-surface-danger-default'
+ *
+ * // Conditional classes
+ * const className = cn(
+ *   'uy:px-200 uy:py-100',
+ *   isActive && 'uy:bg-surface-primary-default',
+ *   isDisabled && 'uy:bg-surface-neutral-disabled'
+ * )
+ *
+ * // With component props
+ * function Button({ variant, size, className: extraClasses, ...props }) {
+ *   return (
+ *     <button
+ *       className={cn(
+ *         'uy:px-200 uy:py-100 uy:rounded-100', // base styles
+ *         variant === 'primary' && 'uy:bg-surface-primary-default',
+ *         variant === 'secondary' && 'uy:bg-surface-neutral-default',
+ *         size === 'large' && 'uy:px-300 uy:py-150',
+ *         extraClasses // allow override
+ *       )}
+ *       {...props}
+ *     />
+ *   )
+ * }
+ * ```
+ * @description
+ * - Automatically merges conflicting Unity classes using Unity's design system rules
+ * - Supports all Unity design tokens: semantic colors, primitive colors, spacing, typography, etc.
+ * - Handles conditional classes (falsy values are ignored)
+ * - Compatible with standard Tailwind classes alongside Unity classes
+ * - Removes duplicate classes and resolves conflicts intelligently
+ * @see {@link uyMerge} for the underlying merge function
+ * @see {@link twMergeConfig} for the Unity merge configuration details
+ */
+export declare const cn: (...params: Parameters<typeof cnMerge>) => import('tailwind-variants').CnReturn;
+/**
+ * Alias for {@link cn} - Unity-configured class name utility function.
+ *
+ * This function is identical to `cn` but provides a more descriptive name
+ * for developers who prefer explicit naming conventions.
+ * @param classes - CSS class names to merge
+ * @returns Merged and deduplicated class string
+ * @example
+ * ```tsx
+ * import { classNames } from '@payfit/unity-themes'
+ *
+ * const buttonClasses = classNames(
+ *   'uy:px-200 uy:py-100',
+ *   'uy:bg-surface-primary-default',
+ *   'uy:text-content-inverted-default'
+ * )
+ * ```
+ * @see {@link cn} for detailed documentation and examples
+ */
+export declare const classNames: (...params: Parameters<typeof cnMerge>) => import('tailwind-variants').CnReturn;
+/**
+ * Alias for {@link cn} - Unity-configured class name utility function.
+ *
+ * This function is identical to `cn` but follows the naming convention
+ * popularized by the `clsx` library for developers familiar with that API.
+ * @param classes - CSS class names to merge
+ * @returns Merged and deduplicated class string
+ * @example
+ * ```tsx
+ * import { clsx } from '@payfit/unity-themes'
+ *
+ * const cardClasses = clsx(
+ *   'uy:p-300 uy:rounded-200',
+ *   'uy:bg-surface-neutral-default',
+ *   isHighlighted && 'uy:border-border-primary-default'
+ * )
+ * ```
+ * @see {@link cn} for detailed documentation and examples
+ */
+export declare const clsx: (...params: Parameters<typeof cnMerge>) => import('tailwind-variants').CnReturn;

package/dist/esm/utils/cn.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { cnMerge as e } from "tailwind-variants";
+import { twMergeConfig as r } from "./merge-config.js";
+const o = (...t) => e(...t)({
+  twMerge: !0,
+  twMergeConfig: r
+}), s = o, m = o, g = o;
+export {
+  m as classNames,
+  g as clsx,
+  s as cn
+};

package/dist/esm/utils/merge-config.d.ts ADDED Viewed

@@ -0,0 +1,217 @@
+export declare const twMergeConfig: {
+    prefix: string;
+    extend: {
+        classGroups: {
+            'bg-color': {
+                bg: ((value: string) => boolean)[];
+            }[];
+            'text-color': {
+                text: ((value: string) => boolean)[];
+            }[];
+            'border-color': {
+                border: ((value: string) => boolean)[];
+            }[];
+            'outline-color': {
+                outline: ((value: string) => boolean)[];
+            }[];
+            'ring-color': {
+                ring: ((value: string) => boolean)[];
+            }[];
+            'ring-offset-color': {
+                'ring-offset': ((value: string) => boolean)[];
+            }[];
+            'divide-color': {
+                divide: ((value: string) => boolean)[];
+            }[];
+            'text-decoration-color': {
+                decoration: ((value: string) => boolean)[];
+            }[];
+            'gradient-color-from': {
+                from: ((value: string) => boolean)[];
+            }[];
+            'gradient-color-via': {
+                via: ((value: string) => boolean)[];
+            }[];
+            'gradient-color-to': {
+                to: ((value: string) => boolean)[];
+            }[];
+            p: {
+                p: string[];
+            }[];
+            px: {
+                px: string[];
+            }[];
+            py: {
+                py: string[];
+            }[];
+            ps: {
+                ps: string[];
+            }[];
+            pe: {
+                pe: string[];
+            }[];
+            pt: {
+                pt: string[];
+            }[];
+            pr: {
+                pr: string[];
+            }[];
+            pb: {
+                pb: string[];
+            }[];
+            pl: {
+                pl: string[];
+            }[];
+            m: {
+                m: string[];
+            }[];
+            mx: {
+                mx: string[];
+            }[];
+            my: {
+                my: string[];
+            }[];
+            ms: {
+                ms: string[];
+            }[];
+            me: {
+                me: string[];
+            }[];
+            mt: {
+                mt: string[];
+            }[];
+            mr: {
+                mr: string[];
+            }[];
+            mb: {
+                mb: string[];
+            }[];
+            ml: {
+                ml: string[];
+            }[];
+            gap: {
+                gap: string[];
+            }[];
+            'gap-x': {
+                'gap-x': string[];
+            }[];
+            'gap-y': {
+                'gap-y': string[];
+            }[];
+            'space-x': {
+                'space-x': string[];
+            }[];
+            'space-y': {
+                'space-y': string[];
+            }[];
+            'scroll-p': {
+                'scroll-p': string[];
+            }[];
+            'scroll-px': {
+                'scroll-px': string[];
+            }[];
+            'scroll-py': {
+                'scroll-py': string[];
+            }[];
+            'scroll-ps': {
+                'scroll-ps': string[];
+            }[];
+            'scroll-pe': {
+                'scroll-pe': string[];
+            }[];
+            'scroll-pt': {
+                'scroll-pt': string[];
+            }[];
+            'scroll-pr': {
+                'scroll-pr': string[];
+            }[];
+            'scroll-pb': {
+                'scroll-pb': string[];
+            }[];
+            'scroll-pl': {
+                'scroll-pl': string[];
+            }[];
+            'scroll-m': {
+                'scroll-m': string[];
+            }[];
+            'scroll-mx': {
+                'scroll-mx': string[];
+            }[];
+            'scroll-my': {
+                'scroll-my': string[];
+            }[];
+            'scroll-ms': {
+                'scroll-ms': string[];
+            }[];
+            'scroll-me': {
+                'scroll-me': string[];
+            }[];
+            'scroll-mt': {
+                'scroll-mt': string[];
+            }[];
+            'scroll-mr': {
+                'scroll-mr': string[];
+            }[];
+            'scroll-mb': {
+                'scroll-mb': string[];
+            }[];
+            'scroll-ml': {
+                'scroll-ml': string[];
+            }[];
+            typography: {
+                typography: string[];
+            }[];
+            'font-size': {
+                text: string[];
+            }[];
+            rounded: {
+                rounded: string[];
+            }[];
+            'rounded-s': {
+                'rounded-s': string[];
+            }[];
+            'rounded-e': {
+                'rounded-e': string[];
+            }[];
+            'rounded-t': {
+                'rounded-t': string[];
+            }[];
+            'rounded-r': {
+                'rounded-r': string[];
+            }[];
+            'rounded-b': {
+                'rounded-b': string[];
+            }[];
+            'rounded-l': {
+                'rounded-l': string[];
+            }[];
+            'rounded-ss': {
+                'rounded-ss': string[];
+            }[];
+            'rounded-se': {
+                'rounded-se': string[];
+            }[];
+            'rounded-ee': {
+                'rounded-ee': string[];
+            }[];
+            'rounded-es': {
+                'rounded-es': string[];
+            }[];
+            'rounded-tl': {
+                'rounded-tl': string[];
+            }[];
+            'rounded-tr': {
+                'rounded-tr': string[];
+            }[];
+            'rounded-br': {
+                'rounded-br': string[];
+            }[];
+            'rounded-bl': {
+                'rounded-bl': string[];
+            }[];
+            shadow: {
+                shadow: string[];
+            }[];
+        };
+    };
+};