@payfit/unity-themes 1.0.0 → 1.1.0

package/dist/css/unity.css

@@ -11,7 +11,7 @@
  * LINKS
  * =============================================================================
  *
- * GitHub Repository: https://github.com/PayFit/hr-apps/tree/master/packages/unity/themes
+ * GitHub Repository: https://github.com/PayFit/hr-apps/blob/master/libs/shared/unity/themes
  * Documentation:     https://unity-theme.payfit.io/?path=/docs/1-introduction-1-welcome--docs
  * Issues/Support:    https://payfit.atlassian.net/jira/software/c/projects/CEEFRE/boards/623
  *
@@ -424,7 +424,7 @@
   --color-border-primary-focus: var(--uy-color-blue-l5);
   --color-border-primary-active: var(--uy-color-blue-l8);
   --color-border-primary-disabled: var(--uy-color-grayscale-l4);
-  --color-border-neutral-high: var(--uy-color-grayscale-l5);
+  --color-border-neutral-high: var(--uy-color-grayscale-l7);
   --color-border-neutral-high-enabled: var(--uy-color-grayscale-l8);
   --color-border-neutral-high-hover: var(--uy-color-grayscale-l9);
   --color-border-neutral-high-pressed: var(--uy-color-grayscale-l10);

package/dist/esm/index.d.ts

@@ -1 +1,4 @@
+export * from './utils/cn.js';
 export * from './utils/tailwind-merge.js';
+export * from './utils/tailwind-variants.js';
+export { twMergeConfig } from './utils/merge-config.js';

package/dist/esm/index.js

@@ -1,4 +1,12 @@
-import { uyMerge as o } from "./utils/tailwind-merge.js";
+import { classNames as o, clsx as f, cn as m } 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 g } from "./utils/merge-config.js";
 export {
-  o as uyMerge
+  o as classNames,
+  f as clsx,
+  m as cn,
+  g as twMergeConfig,
+  x as uyMerge,
+  s as uyTv
 };

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

@@ -0,0 +1,93 @@
+/**
+ * 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: (...classes: string[]) => 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: (...classes: string[]) => 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: (...classes: string[]) => import('tailwind-variants').CnReturn;

package/dist/esm/utils/cn.js

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

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

@@ -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[];
+            }[];
+        };
+    };
+};

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

@@ -0,0 +1,171 @@
+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 = [
+  "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)), c = {
+  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 {
+  c as twMergeConfig
+};

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

@@ -1 +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

@@ -1,32 +1,8 @@
-import { createTailwindMerge as e, mergeConfigs as o, getDefaultConfig as r } from "tailwind-merge";
-const a = e(
-  () => o(r(), {
-    prefix: "uy",
-    extend: {
-      classGroups: {
-        shadow: [
-          { shadow: ["floating", "raising", "flying", "soaring", "canvas"] }
-        ],
-        rounded: [
-          {
-            rounded: [
-              "0",
-              "25",
-              "50",
-              "75",
-              "100",
-              "125",
-              "150",
-              "200",
-              "300",
-              "400"
-            ]
-          }
-        ]
-      }
-    }
-  })
+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 {
-  a as uyMerge
+  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').CreateTV;
+export type { VariantProps };