import "construct-style-sheets-polyfill";

declare module 'preact' {
  namespace JSX {
      interface IntrinsicElements {
        "j-component": JComponentProps;
				"j-avatar": JAvatarProps;
				"j-badge": JBadgeProps;
				"j-box": JBoxProps;
				"j-button": JButtonProps;
				"j-carousel": JCarouselProps;
				"j-checkbox": JCheckboxProps;
				"j-emoji-picker": JEmojiPickerProps;
				"j-flex": JFlexProps;
				"j-icon": JIconProps;
				"j-input": JInputProps;
				"j-menu-group": JMenuGroupProps;
				"j-menu-item": JMenuItemProps;
				"j-menu": JMenuProps;
				"j-modal": JModalProps;
				"j-popover": JPopoverProps;
				"j-radio-button": JRadioButtonProps;
				"j-select": JSelectProps;
				"j-skeleton": JSkeletonProps;
				"j-spinner": JSpinnerProps;
				"j-tab-item": JTabItemProps;
				"j-tabs": JTabsProps;
				"j-text": JTextProps;
				"j-timestamp": JTimestampProps;
				"j-toast": JToastProps;
				"j-toggle": JToggleProps;
				"j-tooltip": JTooltipProps;

      }
  }
}

declare global {
  namespace JSX {
      interface IntrinsicElements {
        "j-component": JComponentProps;
				"j-avatar": JAvatarProps;
				"j-badge": JBadgeProps;
				"j-box": JBoxProps;
				"j-button": JButtonProps;
				"j-carousel": JCarouselProps;
				"j-checkbox": JCheckboxProps;
				"j-emoji-picker": JEmojiPickerProps;
				"j-flex": JFlexProps;
				"j-icon": JIconProps;
				"j-input": JInputProps;
				"j-menu-group": JMenuGroupProps;
				"j-menu-item": JMenuItemProps;
				"j-menu": JMenuProps;
				"j-modal": JModalProps;
				"j-popover": JPopoverProps;
				"j-radio-button": JRadioButtonProps;
				"j-select": JSelectProps;
				"j-skeleton": JSkeletonProps;
				"j-spinner": JSpinnerProps;
				"j-tab-item": JTabItemProps;
				"j-tabs": JTabsProps;
				"j-text": JTextProps;
				"j-timestamp": JTimestampProps;
				"j-toast": JToastProps;
				"j-toggle": JToggleProps;
				"j-tooltip": JTooltipProps;

      }
  }
}


type JComponentProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  variant?: null;
	
}
  

type JAvatarProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  src?: string;
	hash?: string;
	selected?: boolean;
	online?: boolean;
	initials?: string;
	icon?: string;
	size?: ""|"xxs"|"xs"|"sm"|"lg"|"xl"|"xxl";
	
}
  

type JBadgeProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  variant?: ""|"primary"|"success"|"danger"|"warning";
	size?: ""|"sm"|"lg";
	
}
  

type JBoxProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  p?: ""|"100"|"200"|"300"|"400"|"500"|"600"|"700"|"800"|"900";
	pl?: ""|"100"|"200"|"300"|"400"|"500"|"600"|"700"|"800"|"900";
	pr?: ""|"100"|"200"|"300"|"400"|"500"|"600"|"700"|"800"|"900";
	pt?: ""|"100"|"200"|"300"|"400"|"500"|"600"|"700"|"800"|"900";
	pb?: ""|"100"|"200"|"300"|"400"|"500"|"600"|"700"|"800"|"900";
	px?: ""|"100"|"200"|"300"|"400"|"500"|"600"|"700"|"800"|"900";
	py?: ""|"100"|"200"|"300"|"400"|"500"|"600"|"700"|"800"|"900";
	m?: ""|"100"|"200"|"300"|"400"|"500"|"600"|"700"|"800"|"900";
	ml?: ""|"100"|"200"|"300"|"400"|"500"|"600"|"700"|"800"|"900";
	mr?: ""|"100"|"200"|"300"|"400"|"500"|"600"|"700"|"800"|"900";
	mt?: ""|"100"|"200"|"300"|"400"|"500"|"600"|"700"|"800"|"900";
	mb?: ""|"100"|"200"|"300"|"400"|"500"|"600"|"700"|"800"|"900";
	mx?: ""|"100"|"200"|"300"|"400"|"500"|"600"|"700"|"800"|"900";
	my?: ""|"100"|"200"|"300"|"400"|"500"|"600"|"700"|"800"|"900";
	bg?: "";
	color?: "";
	radius?: ""|"sm"|"md"|"lg";
	
}
  

type JButtonProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  variant?: ""|"link"|"primary"|"subtle"|"transparent"|"ghost";
	href?: string;
	size?: ""|"xs"|"sm"|"lg"|"xl";
	disabled?: boolean;
	loading?: boolean;
	square?: boolean;
	full?: boolean;
	circle?: boolean;
	
}
  

type JCarouselProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  gap?: ""|"100"|"200"|"300"|"400"|"500"|"600"|"700"|"800"|"900";
	
}
  

type JCheckboxProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  checked?: boolean;
	full?: boolean;
	disabled?: boolean;
	size?: ""|"sm"|"lg";
	value?: string;
	
}
  

type JEmojiPickerProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  
}
  

type JFlexProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  j?: ""|"center"|"start"|"end"|"between"|"around";
	a?: ""|"center"|"start"|"end";
	wrap?: boolean;
	gap?: ""|"100"|"200"|"300"|"400"|"500"|"600"|"700"|"800"|"900";
	direction?: ""|"row"|"row-reverse"|"column"|"column-reverse";
	
}
  

type JIconProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  name?: string;
	size?: ""|"xs"|"sm"|"lg"|"xl";
	color?: string;
	
}
  

type JInputProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  value?: string;
	max?: string;
	min?: string;
	maxlength?: number;
	minlength?: number;
	pattern?: string;
	label?: string;
	name?: string;
	size?: string;
	list?: string;
	step?: string;
	placeholder?: string;
	errortext?: string;
	helptext?: string;
	autocomplete?: boolean;
	autovalidate?: boolean;
	autofocus?: boolean;
	disabled?: boolean;
	full?: boolean;
	error?: boolean;
	required?: boolean;
	readonly?: boolean;
	type?: string;
	
}
  

type JMenuGroupProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  collapsible?: boolean;
	open?: boolean;
	title?: string;
	
}
  

type JMenuItemProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  selected?: boolean;
	active?: boolean;
	
}
  

type JMenuProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  
}
  

type JModalProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  size?: ""|"xs"|"sm"|"lg"|"xl"|"fullscreen";
	open?: boolean;
	
}
  

type JPopoverProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  open?: boolean;
	placement?: "auto"|"auto-start"|"auto-end"|"top"|"top-start"|"top-end"|"bottom"|"bottom-start"|"bottom-end"|"right"|"right-start"|"right-end"|"left"|"left-start"|"left-end";
	event?: "contextmenu"|"mouseover"|"click";
	
}
  

type JRadioButtonProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  checked?: boolean;
	value?: string;
	name?: string;
	size?: ""|"sm"|"md"|"lg";
	full?: boolean;
	disabled?: boolean;
	
}
  

type JSelectProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  value?: string;
	label?: string;
	open?: boolean;
	inputValue?: boolean;
	
}
  

type JSkeletonProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  variant?: ""|"circle";
	height?: ""|"xxs"|"xs"|"sm"|"md"|"lg"|"xl"|"xxl"|"text";
	width?: ""|"xxs"|"xs"|"sm"|"md"|"lg"|"xl"|"xxl"|"text";
	
}
  

type JSpinnerProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  size?: ""|"sm"|"lg";
	
}
  

type JTabItemProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  checked?: boolean;
	disabled?: boolean;
	
}
  

type JTabsProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  value?: string;
	variant?: string;
	size?: "sm"|"lg";
	vertical?: boolean;
	wrap?: boolean;
	full?: boolean;
	
}
  

type JTextProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  size?: ""|"100"|"200"|"300"|"400"|"500"|"600"|"700"|"800"|"900"|"1000";
	variant?: ""|"heading-lg"|"heading"|"heading-sm"|"subheading"|"ingress"|"body"|"label"|"footnote";
	tag?: ""|"h1"|"h2"|"h3"|"h4"|"h5"|"h6"|"p"|"small"|"b"|"span"|"div";
	nomargin?: boolean;
	inline?: boolean;
	uppercase?: boolean;
	color?: string;
	weight?: string;
	
}
  

type JTimestampProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  value?: string;
	locales?: string;
	relative?: boolean;
	dateStyle?: ""|"full"|"long"|"medium"|"short";
	timeStyle?: ""|"full"|"long"|"medium"|"short";
	dayPeriod?: ""|"narrow"|"short"|"long";
	hourCycle?: ""|"h11"|"h12"|"h23"|"h24";
	timeZone?: string;
	weekday?: ""|"long"|"short"|"narrow";
	era?: ""|"long"|"short"|"narrow";
	year?: ""|"numeric"|"2-digit";
	month?: ""|"numeric"|"2-digit"|"long"|"short"|"narrow";
	day?: ""|"numeric"|"2-digit";
	hour?: ""|"numeric"|"2-digit";
	minute?: ""|"numeric"|"2-digit";
	second?: ""|"numeric"|"2-digit";
	
}
  

type JToastProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  variant?: ""|"success"|"danger"|"warning";
	open?: boolean;
	autohide?: Number;
	
}
  

type JToggleProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  checked?: boolean;
	full?: boolean;
	disabled?: boolean;
	size?: ""|"sm"|"lg";
	value?: string;
	
}
  

type JTooltipProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
  open?: boolean;
	title?: string;
	strategy?: "absolute"|"fixed";
	placement?: "auto"|"auto-start"|"auto-end"|"top"|"top-start"|"top-end"|"bottom"|"bottom-start"|"bottom-end"|"right"|"right-start"|"right-end"|"left"|"left-start"|"left-end";
	
}