How can I map a responsive prop to a specific PropertyValue

[panoskouff]

example:

import { FlexProps, Flex as PandaFlex } from '@/panda-css-gen/jsx';

type Props = {
  expanded?: boolean;
} & FlexProps;

export const Flex: React.FC<Props> = ({ children, expanded, ...rest }) => (
  <PandaFlex height={expanded ? '100%' : 'auto'} {...rest}>
    {children}
  </PandaFlex>
);

in the component above I have a new prop expanded that if true will set the height of the built in component to 100%

I would like to have something like below so I can do this independently per break point

example:

import { FlexProps, Flex as PandaFlex } from '@/panda-css-gen/jsx';

type Props = {
  expanded?: Responsive<boolean>;
} & FlexProps;

export const Flex: React.FC<Props> = ({ children, expanded, ...rest }) => {

	const resolveHeightPerBreakpoint = (responsiveBoolean, breakpoint) => responsiveBoolean[breakpoint] ? '100%' : 'auto'

	return (
	  <PandaFlex height={(breakpoint) => resolveHeightPerBreakpoint(expanded, breakpoint} {...rest}>
	    {children}
	  </PandaFlex>
	);
}

How can I create something like Responsive<T> type and height={(breakpoint) => resolveHeightPerBreakpoint(expanded, breakpoint} that both resolve at build time ?

obviously you can't get the breakpoint like this height={(breakpoint) => resolveHeightPerBreakpoint(expanded, breakpoint}
but I'm wondering if there is a similar way to get it

[panoskouff]

nvm I guess the simplest thing would be to do this

import { FlexProps, Flex as PandaFlex } from '@/panda-css-gen/jsx';
import { PropertyValue } from '@/panda-css-gen/types/prop-type';

type Props = {
  expanded?: PropertyValue<'height'>;
} & FlexProps;

export const Flex: React.FC<Props> = ({ children, expanded, ...rest }) => (
  <PandaFlex height={expanded} {...rest}>
    {children}
  </PandaFlex>
);

and then you could just do <Flex expanded={{ md: '100%' }}>... on the component

(the difference doing it this way is you dont pass a boolean, but the condition and the value per condition which is less opinionated but more flexible)

expanded as a name doesn't have much meaning though since the intention was to make the behaviour of this component more restricted but this answer doesn't cover this.

[panoskouff]

actually this is closer to what I'm looking for

import { styled } from '../panda-css-gen/jsx';
import { HTMLStyledProps } from '../panda-css-gen/jsx';
import { PropertyValue } from '../panda-css-gen/types/prop-type';

// Restrict/rename properties
type PositionedProps = {
  mode: PropertyValue<'position'>;
  children?: React.ReactNode;
} & Pick<HTMLStyledProps<'div'>, 
  'top' | 'right' | 'bottom' | 'left' | 'inset'
> &
  React.HTMLAttributes<HTMLDivElement>;

export const Positioned: React.FC<PositionedProps> = ({
  // default values for properties
  children,
  mode = 'absolute',
  inset = 0,
  ...rest
}) => (
  // pass default/renamed and rest properties to panda styled component
  <styled.div position={mode} inset={inset} {...rest}>
    {children}
  </styled.div>
);

[IHtDzenda]

For anyone in the futer PropertyValue was changed to UtilityValues and you need to use the "array syntax" for example UtilityValues['width']