@payfit/unity-components
Version:
64 lines (63 loc) • 2.35 kB
TypeScript
/**
* Spacing token utilities for Unity components.
* Internal utilities for processing spacing tokens for use with tailwind-variants.
*/
/**
* Unity spacing token with dollar sign prefix.
* Matches the Unity themes spacing scale.
*/
export type SpacingToken = '$0' | '$25' | '$50' | '$75' | '$100' | '$125' | '$150' | '$200' | '$250' | '$300' | '$400' | '$500' | '$600' | '$800' | '$1000';
/**
* Individual padding configuration for each side.
* All properties are optional, allowing partial specification.
*/
export type PaddingObject = {
top?: SpacingToken;
right?: SpacingToken;
bottom?: SpacingToken;
left?: SpacingToken;
};
/**
* Processed padding variants ready for tailwind-variants.
* Used to pass values to the tv() function.
*/
export type PaddingVariants = {
padding?: SpacingToken;
paddingBlock?: SpacingToken;
paddingInline?: SpacingToken;
paddingTop?: SpacingToken;
paddingRight?: SpacingToken;
paddingBottom?: SpacingToken;
paddingLeft?: SpacingToken;
};
/**
* Processes padding props to determine which variant values to apply.
* Handles three input types:
* 1. Simple token string - applies to all sides
* 2. Block/Inline tokens - applies to vertical/horizontal directions
* 3. Object with individual sides - applies to specific sides
*
* Priority order (highest to lowest):
* - Individual padding properties (top, right, bottom, left)
* - paddingBlock and paddingInline
* - padding (all sides)
* @param padding - Padding for all directions or object with individual sides
* @param paddingBlock - Padding for block direction (top & bottom)
* @param paddingInline - Padding for inline direction (left & right)
* @returns Padding variant values for use with tv() function
* @example
* ```ts
* // All sides
* processPaddingProp('$200')
* // { padding: '$200' }
*
* // Block/Inline
* processPaddingProp(undefined, '$300', '$200')
* // { paddingBlock: '$300', paddingInline: '$200' }
*
* // Individual sides
* processPaddingProp({ top: '$300', right: '$200', bottom: '$300', left: '$200' })
* // { paddingTop: '$300', paddingRight: '$200', paddingBottom: '$300', paddingLeft: '$200' }
* ```
*/
export declare function processPaddingProp(padding?: SpacingToken | PaddingObject, paddingBlock?: SpacingToken, paddingInline?: SpacingToken): PaddingVariants;