TypeScript for utility classes

[morzel85]

It would be cool if you provided TypeScript definitions for PrimeFlex utility classes.
This way it would be easy to build components that rely on utility classes with all the benefits of TS.

Maybe you can provide the classes as string unions (it should be trivial to generate)?

Example component:

import { ReactNode } from 'react';

// Would be nice to get such types from PrimeFlex
type Direction =
  | 'flex-row'
  | 'flex-row-reverse'
  | 'flex-column'
  | 'flex-column-reverse';
type Gap = 'gap-0' | 'gap-1' | 'gap-2'; // And so on...
type JustifyContent = 'justify-content-start' | 'justify-content-end'; // And so on...
type AlignItems = 'align-items-stretch' | 'align-items-start'; // And so on...

type Props = {
  direction?: Direction;
  gap?: Gap;
  justifyContent?: JustifyContent;
  alignItems?: AlignItems;
  children: ReactNode;
};

export const Example = ({
  direction = 'flex-row',
  gap = 'gap-1',
  justifyContent = 'justify-content-start',
  alignItems = 'align-items-start',
  children,
}: Props) => (
  <div className={`flex ${direction} ${gap} ${justifyContent} ${alignItems}`}>
    {children}
  </div>
);

Example usage:

<Example
  direction="flex-column"
  gap="gap-2"
  justifyContent="justify-content-start"
>
  Stuff here...
</Example>