@payfit/unity-themes 2.46.17 → 2.46.18

package/dist/esm/utils/merge-config.js

@@ -0,0 +1,172 @@
+import { validators as l } from "tailwind-merge";
+const r = [
+  "0",
+  "25",
+  "50",
+  "75",
+  "100",
+  "125",
+  "150",
+  "200",
+  "250",
+  "300",
+  "400",
+  "500",
+  "600",
+  "800",
+  "1000"
+], d = [
+  "display-heading",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "overline",
+  "subtitle",
+  "display-title",
+  "display-body",
+  "body",
+  "body-strong",
+  "body-small",
+  "body-small-strong",
+  "body-large",
+  "body-large-strong",
+  "action",
+  "action-small",
+  "action-large"
+], t = [
+  "50",
+  "75",
+  "100",
+  "200",
+  "300",
+  "400",
+  "500",
+  "600",
+  "800",
+  "1000",
+  "1200",
+  "1400",
+  "1600"
+], o = [
+  "0",
+  "25",
+  "50",
+  "75",
+  "100",
+  "125",
+  "150",
+  "200",
+  "300",
+  "400",
+  "xs",
+  "sm",
+  "md",
+  "lg",
+  "xl",
+  "circle",
+  "pill"
+], n = ["canvas", "raising", "floating", "flying", "soaring"], s = (e) => !!(/^[a-z]+-l\d+$/.test(e) || /^(?:canvas|surface|content|border|utility)-.+$/.test(e)), a = {
+  prefix: "uy",
+  extend: {
+    classGroups: {
+      // Colors - Use pattern matching for maintainability
+      // Matches primitive colors like: grayscale-l0, red-l1, blue-l12, etc.
+      // Matches semantic colors like: surface-primary-default, content-neutral-low, border-danger-default, etc.
+      "bg-color": [{ bg: [l.isArbitraryValue, s] }],
+      "text-color": [{ text: [l.isArbitraryValue, s] }],
+      "border-color": [{ border: [l.isArbitraryValue, s] }],
+      "outline-color": [
+        { outline: [l.isArbitraryValue, s] }
+      ],
+      "ring-color": [{ ring: [l.isArbitraryValue, s] }],
+      "ring-offset-color": [
+        { "ring-offset": [l.isArbitraryValue, s] }
+      ],
+      "divide-color": [{ divide: [l.isArbitraryValue, s] }],
+      "text-decoration-color": [
+        { decoration: [l.isArbitraryValue, s] }
+      ],
+      "gradient-color-from": [
+        { from: [l.isArbitraryValue, s] }
+      ],
+      "gradient-color-via": [
+        { via: [l.isArbitraryValue, s] }
+      ],
+      "gradient-color-to": [
+        { to: [l.isArbitraryValue, s] }
+      ],
+      // Spacing - Padding
+      p: [{ p: r }],
+      px: [{ px: r }],
+      py: [{ py: r }],
+      ps: [{ ps: r }],
+      pe: [{ pe: r }],
+      pt: [{ pt: r }],
+      pr: [{ pr: r }],
+      pb: [{ pb: r }],
+      pl: [{ pl: r }],
+      // Spacing - Margin
+      m: [{ m: r }],
+      mx: [{ mx: r }],
+      my: [{ my: r }],
+      ms: [{ ms: r }],
+      me: [{ me: r }],
+      mt: [{ mt: r }],
+      mr: [{ mr: r }],
+      mb: [{ mb: r }],
+      ml: [{ ml: r }],
+      // Spacing - Gap
+      gap: [{ gap: r }],
+      "gap-x": [{ "gap-x": r }],
+      "gap-y": [{ "gap-y": r }],
+      // Spacing - Space between
+      "space-x": [{ "space-x": r }],
+      "space-y": [{ "space-y": r }],
+      // Spacing - Scroll padding
+      "scroll-p": [{ "scroll-p": r }],
+      "scroll-px": [{ "scroll-px": r }],
+      "scroll-py": [{ "scroll-py": r }],
+      "scroll-ps": [{ "scroll-ps": r }],
+      "scroll-pe": [{ "scroll-pe": r }],
+      "scroll-pt": [{ "scroll-pt": r }],
+      "scroll-pr": [{ "scroll-pr": r }],
+      "scroll-pb": [{ "scroll-pb": r }],
+      "scroll-pl": [{ "scroll-pl": r }],
+      // Spacing - Scroll margin
+      "scroll-m": [{ "scroll-m": r }],
+      "scroll-mx": [{ "scroll-mx": r }],
+      "scroll-my": [{ "scroll-my": r }],
+      "scroll-ms": [{ "scroll-ms": r }],
+      "scroll-me": [{ "scroll-me": r }],
+      "scroll-mt": [{ "scroll-mt": r }],
+      "scroll-mr": [{ "scroll-mr": r }],
+      "scroll-mb": [{ "scroll-mb": r }],
+      "scroll-ml": [{ "scroll-ml": r }],
+      // Typography
+      typography: [{ typography: d }],
+      "font-size": [{ text: t }],
+      // Border radius
+      rounded: [{ rounded: o }],
+      "rounded-s": [{ "rounded-s": o }],
+      "rounded-e": [{ "rounded-e": o }],
+      "rounded-t": [{ "rounded-t": o }],
+      "rounded-r": [{ "rounded-r": o }],
+      "rounded-b": [{ "rounded-b": o }],
+      "rounded-l": [{ "rounded-l": o }],
+      "rounded-ss": [{ "rounded-ss": o }],
+      "rounded-se": [{ "rounded-se": o }],
+      "rounded-ee": [{ "rounded-ee": o }],
+      "rounded-es": [{ "rounded-es": o }],
+      "rounded-tl": [{ "rounded-tl": o }],
+      "rounded-tr": [{ "rounded-tr": o }],
+      "rounded-br": [{ "rounded-br": o }],
+      "rounded-bl": [{ "rounded-bl": o }],
+      // Shadows
+      shadow: [{ shadow: n }]
+    }
+  }
+};
+export {
+  a as twMergeConfig
+};

package/dist/esm/utils/tailwind-merge.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Unity-configured tailwind-merge function for intelligent CSS class merging.
+ *
+ * This is a pre-configured version of tailwind-merge that includes Unity's custom
+ * class definitions and merge rules. It automatically handles Unity's design tokens
+ * including semantic colors, primitive colors, spacing values, typography classes,
+ * border radius, shadows, and more.
+ * @param classes - CSS class names to merge
+ * @returns Merged and deduplicated class string with conflicts resolved
+ * @example
+ * ```tsx
+ * import { uyMerge } from '@payfit/unity-themes'
+ *
+ * // Basic conflict resolution - last class wins
+ * const className = uyMerge('uy:bg-surface-primary-default', 'uy:bg-surface-danger-default')
+ * // → 'uy:bg-surface-danger-default'
+ *
+ * // Spacing conflicts
+ * const className = uyMerge('uy:p-100', 'uy:px-200', 'uy:py-300')
+ * // → 'uy:p-100 uy:px-200 uy:py-300' (px/py don't conflict with p)
+ *
+ * const className = uyMerge('uy:p-100', 'uy:p-200')
+ * // → 'uy:p-200' (direct conflict resolved)
+ *
+ * // Typography conflicts
+ * const className = uyMerge('uy:typography-h1', 'uy:typography-body')
+ * // → 'uy:typography-body'
+ *
+ * // Complex semantic colors
+ * const className = uyMerge(
+ *   'uy:bg-surface-primary-default-default',
+ *   'uy:bg-surface-primary-default-hover'
+ * )
+ * // → 'uy:bg-surface-primary-default-hover'
+ *
+ * // Mixed with standard Tailwind (no conflicts)
+ * const className = uyMerge('flex items-center', 'uy:bg-surface-primary-default', 'justify-center')
+ * // → 'flex items-center uy:bg-surface-primary-default justify-center'
+ *
+ * // Responsive and state variants
+ * const className = uyMerge(
+ *   'uy:bg-surface-neutral-default',
+ *   'uy:hover:bg-surface-primary-hover',
+ *   'uy:md:bg-surface-secondary-default'
+ * )
+ * // → 'uy:bg-surface-neutral-default uy:hover:bg-surface-primary-hover uy:md:bg-surface-secondary-default'
+ * ```
+ * @description
+ * **Supported Unity Features:**
+ * - **Primitive Colors**: `grayscale-l0`, `red-l5`, `blue-l12`, etc. (pattern: `{color}-l{number}`)
+ * - **Semantic Colors**: `surface-primary-default`, `content-neutral-low`, `border-danger-default`, etc.
+ * - **Spacing**: All Unity spacing values (`0`, `25`, `50`, `75`, `100`, `125`, `150`, `200`, `250`, `300`, `400`, `500`, `600`, `800`, `1000`)
+ * - **Typography**: `h1`, `h2`, `body`, `action`, etc. (generated class names without `-sm` variants)
+ * - **Border Radius**: Numeric (`0`, `25`, `50`, etc.) and semantic (`xs`, `sm`, `md`, `lg`, `xl`, `circle`, `pill`)
+ * - **Shadows**: Unity shadow values (`canvas`, `raising`, `floating`, `flying`, `soaring`)
+ * - **All Utilities**: `bg-*`, `text-*`, `border-*`, `outline-*`, `ring-*`, `divide-*`, `decoration-*`, gradients, etc.
+ *
+ * **Merge Rules:**
+ * - Conflicting classes within the same group are resolved (last one wins)
+ * - Non-conflicting classes are preserved
+ * - Unity classes don't conflict with standard Tailwind classes
+ * - Responsive and state variants are handled correctly
+ * - Pattern matching automatically supports new Unity design tokens
+ * @see {@link twMergeConfig} for the complete Unity merge configuration
+ * @see {@link https://github.com/dcastil/tailwind-merge Tailwind Merge Documentation}
+ */
+export declare const uyMerge: (...classLists: import('tailwind-merge').ClassNameValue[]) => string;

package/dist/esm/utils/tailwind-merge.js

@@ -0,0 +1,8 @@
+import { createTailwindMerge as e, mergeConfigs as r, getDefaultConfig as o } from "tailwind-merge";
+import { twMergeConfig as g } from "./merge-config.js";
+const f = e(
+  () => r(o(), g)
+);
+export {
+  f as uyMerge
+};

package/dist/esm/utils/tailwind-variants.d.ts

@@ -0,0 +1,44 @@
+import { VariantProps } from 'tailwind-variants';
+/**
+ * Unity-configured tailwind-variants TV function for creating component variants.
+ *
+ * This is a pre-configured version of tailwind-variants' `createTV` function that includes
+ * Unity's custom tailwind-merge configuration. It automatically handles Unity's custom
+ * class names including semantic colors, spacing values, typography classes, and more.
+ * @example
+ * ```tsx
+ * import { uyTv } from '@payfit/unity-themes'
+ *
+ * const button = uyTv({
+ *   base: 'uy:px-200 uy:py-100 uy:rounded-100',
+ *   variants: {
+ *     variant: {
+ *       primary: 'uy:bg-surface-primary-default uy:text-content-inverted-default',
+ *       secondary: 'uy:bg-surface-neutral-default uy:text-content-neutral-default',
+ *     },
+ *     size: {
+ *       small: 'uy:text-75 uy:px-150 uy:py-75',
+ *       large: 'uy:text-200 uy:px-300 uy:py-150',
+ *     }
+ *   },
+ *   defaultVariants: {
+ *     variant: 'primary',
+ *     size: 'small'
+ *   }
+ * })
+ *
+ * // Usage in component
+ * <button className={button({ variant: 'secondary', size: 'large' })}>
+ *   Click me
+ * </button>
+ * ```
+ * @description
+ * - Automatically merges conflicting Unity classes (e.g., `uy:bg-surface-primary` + `uy:bg-surface-danger` → `uy:bg-surface-danger`)
+ * - Supports all Unity design tokens: colors, spacing, typography, shadows, border radius
+ * - Handles responsive and state variants correctly
+ * - Compatible with standard Tailwind classes alongside Unity classes
+ * @see {@link https://www.tailwind-variants.org/ Tailwind Variants Documentation}
+ * @see {@link twMergeConfig} for the Unity merge configuration details
+ */
+export declare const uyTv: import('tailwind-variants').TV;
+export type { VariantProps };

package/dist/esm/utils/tailwind-variants.js

@@ -0,0 +1,9 @@
+import { createTV as r } from "tailwind-variants";
+import { twMergeConfig as e } from "./merge-config.js";
+const m = r({
+  twMerge: !0,
+  twMergeConfig: e
+});
+export {
+  m as uyTv
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-themes",
-  "version": "2.46.17",
+  "version": "2.46.18",
   "main": "./dist/esm/index.js",
   "types": "./dist/esm/index.d.ts",
   "style": "./dist/css/unity.css",